Parallax Depth Cards

Реализовано на Vue. Поворот карточки реализован при помощи CSS трансформаций.

👉 @seniorFront

Masked SVG Loader

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

👉 @seniorFront

👉 @seniorFront

Reveal Text on Scroll

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

👉 @seniorFront

Exploring UI

Анимировано библиотекой GSAP. Логика переключения слайдов реализована в JS.

👉 @seniorFront

Character with longest consecutive repetition

Для заданной строки s найти символ c (или C) с самым длинным последовательным повторением и вернуть: [c, l]
где l (или L) - длина повтора. Если есть два или более символов с одинаковым l, возвращается первый в порядке появления.

Для пустой строки возвращается:["", 0]

Примеры:
longestRepetition("aaaabb") => ["a",4]
longestRepetition("bbbaaabaaaa") => ["a",4]
longestRepetition("cbdeuuu900") => ["u",3]

👉 @seniorFront

Minimal Clothing Catalogue

Вёрстка реализована на HTML и SCSS.

👉 @seniorFront

aria-level

aria-level помогает браузерам и вспомогательным технологиям рассказать об уровнях элементов, когда не можете передать их иерархию с помощью чистого HTML.

Пример
<span
role="heading"
aria-level="1"
>
Гайвань
</span>

Скринридеры прочтут код примерно так: «Гайвань, заголовок первого уровня».

Используйте для заголовков теги <h1>–<h6>. У них по умолчанию есть свойство aria-level. Когда по крайне важной причине верстаете кастомные заголовки, учитывайте несколько особенностей поведения aria-level.

Заголовок с ролью heading без aria-level автоматически получает второй уровень.

👉 @seniorFront

Music Player with Slider

Слайдер создан библиотекой Swiper. Логика запуска и переключения музыки реализована в JS

👉 @seniorFront

​Сколько работают программисты?

Для начала, что такое "работа"? По моему мнению, это и обдумывание задачи, и планирование, и чтение рассылок, и написание кода и рисование набросков - всё это важно.
Но под работой часто имеют в виду именно написание кода.
Мне тяжело работать больше чем 5 часов. Я могу проработать и 8, и 12, но для этого нужно иметь очень точный план работы и точное описание результата. Обычно первого нет. Реже нет второго.

По 15 часов в день работают либо профнепригодные, неспособные выполнить задачу вовремя, либо одержимые. И то и другое говорит о низком уровне организации личного времени.

Кроме того, восьмичасовые сессии требуют регенерации - расплатой обычно оказывается качество кода и следующий рабочий день. Оно того не стоит.

Отдельная тема - работа в выходные. Работа в выходные - это всегда последствия ошибки в планировании. Я с опаской отношусь к людям, которые сидят на работе с утра до ночи и регулярно проводят там же выходные. Это не нормально.

Но не стоит путать работу над своими проектами и работу выходные. Это разные вещи.

👉 @seniorFront

Leap Frog Likes

Это несколько svg картинок, которые анимируются в CSS.

👉 @seniorFront

Slider with Button Wave Effect

Логика переключения слайдов реализована в JS. Анимировано библиотекой gsap.

👉 @seniorFront

Radial Octagon Menu

В этом видео с нуля создается оригинальное навигационное меню на HTML, CSS и JS.

👉 @seniorFront

👉 @seniorFront

Sticky Sections

Плавность прокрутки реализована при помощи библиотеки Lenis. Анимировано библиотекой gsap.

👉 @seniorFront

Icon Hover Effect Using

Иконки с оригинальным эффектом при наведении, созданные на HTML и CSS.

👉 @seniorFront

Creative Text Hover Effect

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

👉 @seniorFront

animated text

Буквы создаются в JS и анимируются в CSS.

👉 @seniorFront