CSS / SVG Blobby Background

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

👉 @seniorFront

Change Background Image on Scroll

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

👉 @seniorFront

Cool Layout with Complex Chainable Animation

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

👉 @seniorFront

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

Попытка создать идеальный компонент формы

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

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

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

Array.values()

Массив в JavaScript имеет различные методы для перебора элементов. Например, map() или forEach(). Но иногда удобнее работать не с самим массивом, а с итерируемым объектом.
Метод values() возвращает новый объект-итератор, созданный из значений элементов массива. Подробнее о том, что такое итератор, можно прочитать в посте «Итератор».

Пример:
const array = [1, 2, 3]
const iterator = array.values()

for (const item of iterator) {
console.log(item)
}
// 1
// 2
// 3

👉 @seniorFront

Skating bunny

Реализовано на canvas при помощи библиотеки Three.js

👉 @seniorFront

Что значит быть хорошим разработчиком: 11 полезных советов от сеньора

Путь разработчика, возможно, не проще пути джедая. Важно понимать, чего вы хотите, и слушать советы наставников и старших коллег.

1. Слушайте советы старших коллег, но не забывайте о критическом мышлении.
Прежде чем приступать к каким-то действиям, нужно определиться с вектором своей карьеры. Для этого нужно понять, в каком направлении вам интереснее развиваться. Одним разработчикам интереснее техническая часть, другие хотят расти как управленцы, третьи мечтают создать собственный продукт. Для каждого из направлений нужно развивать собственный скиллсет.

2. Составьте дорожную карту своего профессионального развития.
Будем честны: не во всех компаниях внедрены процессы, направленные на развитие сотрудников. В этом случае заниматься составлением дорожной карты придётся самостоятельно. Определите для себя, в какую сторону вы хотели бы расти, составьте список необходимых навыков и подумайте, как можно их развить.

3. Изучайте базовые технологии.
Некоторые технологии быстро изменяются, но существует база, знание которой необходимо на любом этапе карьеры.

4. Учитесь писать хороший код.
Довольно очевидный пункт, но его нельзя не упомянуть. Хороший разработчик в первую очередь должен уметь писать хороший код. При этом не нужно бояться делать ошибки: без них не получится освоить новые навыки. Однако каждая ошибка должна учить вас чему-то.

5. Полюбите процесс написания кода.
Чтобы развиваться в профессии, нужна сильная мотивация. Причём одной лишь финансовой составляющей для мотивации недостаточно — важно искренне интересоваться технологиями. Пробуйте необычные подходы к работе — например, геймефицируйте рабочий процесс — изучайте новые стеки, ищите направление деятельности, которое вам наиболее близко.

6. Изучайте не только свою предметную область, но и соседние.
Важно знать общие принципы создания программного продукта. Если вы в будущем хотели бы возглавить подразделение, важно иметь представление о задачах и процессах каждого участника команды.

7. Спокойно относитесь к рутине.
Программирование — это не только решение интересных задач. Разработчику приходится сталкиваться со скучными однообразными задачами или нудным поиском ошибок. Это часть профессии, в которой тоже нужно искать положительные моменты.

8. Развивайте навык понимания задач.
Если руководитель просит вас сделать что-то, убедитесь, что вы правильно уяснили цель задачи. Для этого нужно уметь правильно формулировать вопросы — и не стесняться их задавать.

9. Учитесь писать хорошие тексты.
Разработчику приходится много писать — письма коллегам и клиентам, комментарии к коду, техническая документация. Важно, чтобы тексты были понятными. Это существенно сократит объём коммуникаций, освободив время для решения других задач.

10 Тренируйтесь искать информацию.
Для многих задач уже существуют готовые решения. Хороший разработчик не будет изобретать велосипед и воспользуется другими наработками. Умение находить ответы на свои вопросы — важный скилл, развитию которого нужно уделять внимание.

11. Не забывайте о soft skills.
Любой программный продукт — это не техническая система, а социально-техническая система. Эффективное взаимодействие с коллегами и понимание потребностей заказчиков не менее важно, чем написание качественного кода.

Ваш план развития может меняться со временем — почти каждый разработчик на своём карьерном пути проходит ряд трансформаций. Но знания и умения, которые вы приобретёте в процессе, помогут вам добиваться профессиональных целей и стать тем, на кого будут равняться джуны нового поколения.

👉 @seniorFront

Photo editor UI

В CSS созданы переменные, значения которых изменяются в JS при перемещении ползунка.

👉 @seniorFront

2D to 3D Image Hover Effects

В этом видео создаётся эффект 3D при наведении на элемент при помощи CSS трансформаций.

👉 @seniorFront

Мидлы маскируются под стажеров, чтобы задать сеньору вопрос по своей проблеме.

👉 @seniorFront

Stacked Cards with Autoplay

В JS создана функция перелистывания карточек, которая запускается по заданному интервалу.

👉 @seniorFront

Cards animation

Создано на чистом CSS. При наведении запускаются CSS трансформации.

👉 @seniorFront

Liquid Blast Effects

В этом видео создаётся эффект взрыва частиц при наведении. В JS генерируются частицы, которые затем анимируются в CSS.

👉 @seniorFront

Accessible Horizontal Accordion

Свёрстано на HTML и CSS. Логика переключения реализована в JS.

👉 @seniorFront

Check same case

Создайте функцию, которая принимает две буквы и проверяет, в одном ли они регистре (обе строчные или обе заглавные).

Примеры:
'a' and 'g' returns 1
'A' and 'C' returns 1
'b' and 'G' returns 0
'B' and 'g' returns 0
'0' and '?' returns -1

👉 @seniorFront

Берем ответственность за вопросы: как задавать их правильно

Умение правильно задавать вопросы — это навык, который можно развить. И нужен он не только менеджерам и тимлидам, а всем, потому что мы задаем много вопросов по работе каждый день.

В статье рассказывается:
- какие виды вопросов бывают и какие ошибки в них допускают чаще всего,
- какие практики повысят навык формулирования вопросов,
- как не вестись на манипулятивные вопросы и избегать их в своей речи.

👉 @seniorFront

Как создать радиальный градиент в CSS?

Функция radial-gradient используется для задания фона в виде радиального (кругового, эллиптического) градиента.

Самый простой градиент задаётся двумя цветами.
.element {
background-image: radial-gradient(#6e4aff, #49A16C);
}

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

Цветов мы можем перечислить сколько угодно. Браузер сам распределит градиент таким образом, чтобы последний цвет всегда заходил в угол элемента.

Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).

Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.

Neon lights

Стилизовано в SCSS. В JS создана логика перемещения светящегося блока.

👉 @seniorFront