Gradient Text Stroke Effects

В этом видео создается градиентный текст при помощи CSS background-clip со значением text.

👉 @seniorFront

👉 @seniorFront

Как получить ипотеку в Москве под 4,5%?

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

ИТ-ипотека по таким условиям будет доступна до конца 2024 года. Но дальше получать ее будет сложнее – у банков заканчиваются лимиты на льготные программы. Так что лучше не откладывать.

Найти стильную, комфортную и современную квартиру поможет аналитик Андрей Негинский. Он вместе с командой изучает рынок и делится находками в своем телеграм-канале. Там он публикует редкие квартиры, исследования рынка, рассказывает о получении ипотеки и отвечает вопросы подписчиков.

Подписывайтесь на Негинского и забирайте из закрепа подборку 12 лучших ЖК для ИТшников. Она будет доступна 24 часа, поэтому не откладывайте.

Наши коллеги запустили канал-тренажёр для кодеров

Они ежедневно дают задачи на JavaScript, HTML, CSS, Python, Java. Объясняют решения и публикуют туториалы, как исправить сложные баги.

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

И это не всё — скоро розыгрыш подписок Telegram Premium 🎁

Чтобы участвовать, достаточно решить задачу с картинки:

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