AI13: GLSL Video Transition

Создано и анимировано при помощи библиотеки gsap.

👉 @seniorFront

Sum of a Beach

На пляже много песка, воды, рыбы и солнца. Создайте функцию, которая принимает строку и подсчитывает количество встречающихся слов Sand, Water, Fish и Sun.

Примеры:
sumOfABeach("WAtErSlIde") ==> 1
sumOfABeach("GolDeNSanDyWateRyBeaChSuNN") ==> 3
sumOfABeach("gOfIshsunesunFiSh") ==> 4
sumOfABeach("cItYTowNcARShoW") ==> 0

👉 @seniorFront

Skeuomorphic Toggle Switch

Оригинальный переключатель, созданный на HTML и SCSS.

👉 @seniorFront

Как устроена специфичность стилей?

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

Например:

 h1 {
   color: red;
 }
 .h1 {
   color: blue;
 }
 #h1 {
   color: yellow;
 }

<h1 id="h1" class="h1" style="color: black">Header</h1>

Какое-то из свойств должно "победить". Побеждает (имеет преимущество) свойство самого близкого по отношению к форматируемому элементу стиля. Или, правильнее выразиться, самого специфичного стиля. Вот упрощенная, но наглядная модель специфичности селекторов в условных единицах:

- Селектор тегов имеет специфичность, равную 1 условной единице.
- Класс — 10 условных единиц.
- Идентификатор — 100 условных единиц.
- Строчный стиль — 1000 условных единиц

В приведённом примере <h1> будет иметь чёрный цвет текста.

👉 @seniorFront

Winter papercut

Анимируемые частицы созданы при помощи библиотеки particlesJS.

👉 @seniorFront

​Pet-проекты — это зло. Вредные советы для фронтендеров

Сегодняшний текст — о том, как, мне кажется, нужно и, наоборот, нельзя вести пет-проекты. Надеюсь, вы тоже любили эту книгу Григория Остера в детстве. Если вы с ней не знакомы, концепция состоит в том, что дети часто вредничают и делают всё наоборот, поэтому нужно давать им советы от противного.
Зачем вообще нужны пет-проекты, если можно просто овертаймить

 Если все же вы решили
 Сесть покодить внеурочно,
 То пишите код в проекте,
 Где работали фулл-тайм.

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

Пробуй новые технологии вширь, а не вглубь
Чтобы стать крутым синьёром,
Нужно срочно на реакте,
Ангуляре, вью и qwik-е
Вам закодить ту-ду лист.
Изучать область вширь — это нормально и важно, если вы хотите быть конкурентоспособными. Однако развивать широту, пока у вас нет глубины, — провальная стратегия. Если вы джун или миддл фронтендер, в первую очередь стоит сделать глубокое погружение во фронтенд. И даже если вы миддл+ и уже нарастили мышцы в своих стандартных инструментах, ничто не мешает задипдайвить в свою предметную область ещё раз.

План не нужен, работай как работается
Знай, в своём проекте важно:
Быть художником- творить!
А роадмапы эти ваши
Мы оставим тимлидам
Раньше, начиная что-то делать, я не думал, какой результат хочу получить. Целью было попробовать свежеизученную технологию на абстрактной задаче, на этом всё.
Гораздо правильнее иметь роадмап.

👉 @seniorFront

Marquee-like Content Scrolling

Создано на HTML и CSS. Количество отображаемых элементов задается через CSS переменную.

👉 @seniorFront

Typing Effect

Текст генерируется и выводится при помощи JS.

👉 @seniorFront

CSS 3D Glassmorphism List Hover Effects

В этом видео создаются полупрозрачные карточки на CSS. Ко всем карточкам применяется CSS transform, благодаря чему они меняют свое положение.

👉 @seniorFront

👉 @seniorFront

Blob

В JS анимируется CSS свойство clip-path. Параметры анимации зависят от положения курсора.

👉 @seniorFront

Vertical menu with gooey effect on hover

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

👉 @seniorFront

Motion Pictures Animation Effects

В этом видео создаётся CSS анимация. Параметры анимации задаются при помощи CSS переменных.

👉 @seniorFront

Peeled Text Transforms

Каждая буква состоит из элемента и двух псевдо элементов. При наведении изменяется их свойство transform.

👉 @seniorFront

Преобразование в прайм

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

Пример:
minimumNumber ([3,1,2]) = return (1)

👉 @seniorFront

Glide To Reveal with CSS :has()

Создано и анимировано без использования JS.

👉 @seniorFront

Свойство transform

Свойство transform применяется для поворота, масштабирования, наклона или сдвига элемента.

При этом, в потоке элемент остаётся на прежней позиции. То-есть, увеличение картинки с помощью transform: scale(2) не раздвинет соседние элементы картинки, а заставит её частично их перекрывать. Это является минусом transform. Плюсом же можно назвать высокую производительность этого решения.

Например, благодаря наличию transform считается антипаттерном анимирование width и height.

Некоторые функции transform:
- matrix();
- perspective();
- rotate();
- translate();
- scale();
- skew().

В transform можно передавать сразу несколько функций:
transform: translateX(10px) rotate(10deg) translateY(5px);

👉 @seniorFront

Drop-down menu

В JS созданы кастомный курсор, логика переключения темы и логика открытия меню.

👉 @seniorFront

​Учи код правильно!

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

1. Создание плана обучения: Разработайте список тем, которые вы хотите изучить, и сформулируйте цели, которые хотите достичь. Это поможет вам сосредоточиться на ключевых областях и следить за прогрессом.

2. Работа над проектами: Начните с маленьких проектов и постепенно увеличивайте сложность, чтобы применять изученные навыки и совершенствовать их.

3. Код-ревью: Найдите напарника или наймите репетитора, с которым вы можете делиться своим кодом и получать обратную связь. Это поможет вам избежать ошибок и улучшить качество кода.

4. Участие в сообществе: Участвуйте в сообществе программистов на форумах, социальных сетях, конференциях и митапах, чтобы получать поддержку и вдохновение от других людей, которые идут той же дорогой.

5. Практика решения задач: Решайте задачи и упражнения, чтобы практиковать и закрепить навыки. Есть множество онлайн-ресурсов, таких как LeetCode, HackerRank и CodeWars, где вы можете найти множество задач для отработки.

6. Делайте перерывы: Не забывайте отдыхать, особенно если вы чувствуете утомление или раздражение. Регулярные перерывы помогут вам обновить мысли и сохранять вашу концентрацию. Попробуйте заниматься активностями, которые вам нравятся, такими как спорт, чтение , чтобы отдохнуть и вернуться к работе с новыми силами. Компьютерные игры — это не отдых, если что.

7. Учиться на ошибках: Не бойтесь делать ошибки, каждая ошибка является уникальной возможностью узнать что-то новое. Научитесь извлекать пользу из ошибок, анализируя их причины и изучая их как важный инструмент роста и развития.

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

👉 @seniorFront

WebGL liquid masking

Создано на canvas при помощи технологии WebGL.

👉 @seniorFront