Senior Frontend - javascript, html, css
25.7K subscribers
1.28K photos
2.25K videos
705 links
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи

Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU
Download Telegram
What's in a name?

Создайте функцию, принимающую в качестве параметра две строки и проверяющую, содержит ли первая строка все буквы второй строки по порядку.
В этом случае функция должна возвращать true, а в противном случае — false. Сравнение букв должно быть чувствительным к регистру.

Примеры:
"Across the rivers", "chris" --> true
^ ^ ^^ ^
c h ri s

Contains all of the letters in "chris", in order.
----------------------------------------------------------
"Next to a lake", "chris" --> false

Contains none of the letters in "chris".
--------------------------------------------------------------------
"Under a sea", "chris" --> false
^ ^
r s

Contains only some of the letters in "chris".


👉 @seniorFront
👎3👍1
Нужна ли айтишнику вышка?

Куда отдать абитуриента, чтобы вырос программистом? Можно ли совмещать ли работу с учебой и когда начинать? Получать ли второе высшее, если недавно устроился в IT и хочешь выучить недостающую базу?

Из-за статуса кво высшее образования идеализируются и не подвергается рациональной оценке. Отцы и деды ходили в ВУЗ, значит и нам надо, чего тут рассуждать. Но проблема у отцов и дедов не было столь стремительно развивающихся технологий, интернета и компьютеров. Во избежание когнитивных искажений, в этой статье оценивается высшее образование по критериям обычного курса. То есть, продукта со своими плюсами и минусами, который нам предлагает приобрести за деньги государство.

👉 @seniorFront
👍7🤔21👎1
Глобальные ключевые слова в CSS

Для всех свойств CSS, помимо их стандартных значений, можно задать значения в виде ключевых слов:

initial
У каждого из свойств в CSS есть значение по умолчанию. Оно применяется ещё до того, как вы написали что-либо в вашем файле стилей.
Ключевое слово initial сбрасывает все указанные значения свойства для конкретного блока до этих самых значений по умолчанию.

inherit
CSS-свойства делятся на наследуемые и ненаследуемые.
Значения наследуемых свойств применяются не только к элементу, для которого прописаны, но и для всех вложенных дочерних элементов. Это очень удобно, чтобы не писать много одинаковых свойств для разных селекторов, перечисляя всех потомков.

unset
Это ключевое слово ведёт себя по-разному с наследуемыми и ненаследуемыми свойствами:
- С наследуемыми свойствами ключевое слово unset ведёт себя как inherit.
- С ненаследуемыми свойствами оно ведёт себя как initial.

revert
Это ключевое слово сбрасывает значение свойства до указанного в стилях браузера.
👍7🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
CSS 3D Bending Effect - Page Flip

Создано на чистом CSS с использованием возможностей препроцессора Haml.

👉 @seniorFront
👍2
Frontend Developer — это первоисточник всего, что происходит во Frontend-сообществе

Здесь опытный Senior-разработчик ежедневно публикует материалы, которые накопил за 9 лет Frontend-разработки:

Шаблоны с готовым кодом для твоих проектов

Вопросы с собеседований, задачи и викторины

Шпаргалки по JavaScript, HTML и CSS

P.S. Даже онлайн-школы берут материалы с этого канала🤫
👍94👎1
Как очистить карму своему коду?

Часто ли у так бывает, что вы встречаете плохой код и мысленно ругаете автора?
А потом приходите к выводу, что код не так уж и плох, и автора ругали зря… Но осадок-то остался!

В общем, медитировал я давеча перед монитором, и посетил меня код с картинки:
Вслед за этим кодом меня посещает, конечно, Негативная Эмоция. Недоумение.
Почему надо делить на сто и тут же умножать на сто?
Зачем надо прибавлять сто и делать на сто? Что тут вообще происходит? WTF?

Разгадка
В ходе дебага выясняется, что код этот вполне работает. Поскольку речь идёт о целых числах, то при делении на 100 результат округляется, а при повторном умножении на сто получается меньшее число. Например, из 666 получается (666/100) * 100 = 6*100 = 600. То есть значение округляется до ближайшей сотни.

Что получается? Код как бы есть, он как бы работает, то есть обвинить программиста как бы и не в чем. Но в то же время я потратил силы, чтобы в нём разобраться, а самое главное — я произнёс вслух "What The Fuck" что увеличило мою карму на единичку.

Как же очистить карму своего кода?
Как утверждается в ведических текстах, любой программер может изменить судьбу кода, если напишет тесты и сотрет непотребные комментарии и сделав код втрое короче

👉 @seniorFront
5👍2
Prompt engineering — путь к эффективной работе с ChatGPT

В этой статье рассказывается о том, как эффективно работать с ChatGPT в разных задачах и архитектуре. Многие пробовали, но не у всех получилось. Статья написана по мотивам доклада для конференции Highload.

Какие темы обсуждаются:

- Поговорим о GPT;
- Разберёмся, зачем нужны промпты;
- Рассмотрим фреймворки для создания промптов;
- Создадим ассистента архитектора.

👉 @seniorFront
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Tab bar active animation

Создано на HTML и SCSS. В JS реализована логика переключения классов при нажатии на элемент меню.

👉 @seniorFront
👍52
В ПСБ Цифровая лаборатория есть программа, по которой платят 100 000 руб. за рекомендацию в ИТ.

Деньги придут, как только рекомендованный вами сотрудник пройдет испытательный срок.На какой стек и с каким опытом ищем ИТ-специалистов — смотреть тут.

Проектов много. Работа стабильная, зарплата приличная.

Реклама. ООО "ПСБ ЛАБ". ИНН 7714436892.
👎2
Media is too big
VIEW IN TELEGRAM
Infinite Page Scrolling

В этом видео создается страница с подгрузкой данных при прокрутке на чистом JS.

👉 @seniorFront
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Турецкий продавец мороженного покоряет фронтенд

👉 @seniorFront
🔥42👍7👎2
This media is not supported in your browser
VIEW IN TELEGRAM
Shattered popup

При нажатии частицы генерируются в JS и затем анимируются в SCSS.

👉 @seniorFront
🔥13👎3👍2
This media is not supported in your browser
VIEW IN TELEGRAM
CSS / SVG Blobby Background

Это SVG картинка, анимируемая в CSS.

👉 @seniorFront
5👍5
Какой метод следует использовать для прокрутки элемента относительно его текущего положения?
Anonymous Quiz
35%
scrollTo()
24%
scrollBy()
25%
scrollIntoView()
16%
scrollElement()
👎12👍93
Media is too big
VIEW IN TELEGRAM
Change Background Image on Scroll

В этом видео реализуется смена фоновой картинки при прокрутке при помощи JS.

👉 @seniorFront
👍10🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Cool Layout with Complex Chainable Animation

Создано и анимировано на HTML и SCSS.

👉 @seniorFront
👍11🔥42
Bananas

Вам дана последовательность букв a, b, n, сколькими способами вы можете составить слово «banana», вычеркивая разные буквы и читая его слева направо?
(Используйте - для обозначения перечеркнутой буквы)

Пример:

Ввод:
bbananana


Вывод:
b-anana--
b-anan--a
b-ana--na
b-an--ana
b-a--nana
b---anana
-banana--
-banan--a
-bana--na
-ban--ana
-ba--nana
-b--anana


👉 @seniorFront
👍8👎2
Попытка создать идеальный компонент формы

В моей работе(и не только моей) очень часто возникает необходимость писать логику для формы. Каждый раз это больно. Кажется, даже создатели React солидарны с этим, поэтому скоро у нас появится useFormStatus, но, на моей взгляд, этот хук лишь немного облегчит жизнь в простых кейсах, но никак не поможет в более сложных.

Под сложными кейсами я имею ввиду, например:
- Значение поля не примитив, а объект или массив (или Map/Set)
- Нужна возможность задать стейт вне инпута/очистить какое-то поле или ресетнуть всю форму, т.е. более продвинутый API, а не просто возможность вытащить данные из инпута
- Нужна продвинутая валидация, например возможность провалидировать только выбранные поля формы или одно поле на основе значения из другого или задать свою функцию валидации (например проверить, что логин свободен)

Поэтому чаще всего приходится использовать библиотеку для работой с формой или писать свой велосипед. В этой статье автор создаёт свой компонент формы.
👍6👎1