WebGL carousel

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

👉 @seniorFront

CSS Facial Recognition

В этом видео создается CSS анимация распознавания лица.

👉 @seniorFront

Hover to reveal part of background image

При движении мыши JavaScript обновляет позицию элемента .magic, центрируя его относительно курсора, а CSS задаёт стили и анимацию.

👉 @seniorFront

Correct the time-string

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

Пример:

 "09:10:01" -> "09:10:01"  
 "11:70:10" -> "12:10:10"  
 "19:99:99" -> "20:40:39"  
 "24:01:01" -> "00:01:01"

👉 @seniorFront

Кеширование Lottie-анимаций с помощью Service Worker

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

В проекте было около 30 Lottie-анимаций, некоторые весили ~100 KB, и нам нужно было оптимизировать их загрузку.

Как снизить трафик и нагрузку? Правильно - кеширование. Мы выбрали кеширование на стороне Service Worker.

👉 @seniorFront

Псевдоэлементы для подсветки текста

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

::selection: выделенный текст
::target-text: представляет собой конкретный текст, к которому браузер прокручивает страницу при использовании фрагментов текста (например, через URL с #:~:text=...).
::spelling-error: содержимое, которое было помечено user-agent как ошибочное
::grammar-error: содержимое, которое было помечено user-agent как грамматически не верное

Последние два псевдоэлемента еще не поддерживаются браузерами.

Эти псевдоэлементы могут принимать свойства:
- color
- background-color
- cursor
- caret-color
- outline
- text-decoration
- text-emphasis-color
- text-shadow

👉 @seniorFront

Rotating 3D Slider

Логика работы слайдера реализована в JS. Стилизовано и анимировано в SCSS.

👉 @seniorFront

​Почему ИИ в кодинге не панацея и как объяснить это менеджменту

Я — разработчик с 8 годами опыта, от C++ до ML и продуктовой разработки. Прошёл "ИИ-изацию" компании в 2023 и делюсь, почему не стоит слепо пушить ИИ в кодинг.

Проблемы ИИ в разработке:
1. Контекст. ИИ не знает историю проекта и продуктовые требования, которые живут в головах разработчиков. Он видит только код, теряя важные нюансы.
2. Иллюзия ускорения. Исследование METR показывает: ИИ замедляет разработку на 19%, хотя кажется, что ускоряет на 20%. Ощущения обманчивы!
3. Потеря фокуса. ИИ требует переключения внимания, разрывая рабочий поток и снижая продуктивность.
4. Посредственный код. ИИ, обученный на среднем коде из интернета, плодит техдолг, переписывает тесты, откладывая проблемы.
5. Баги и откаты. Стэнфордский рисерч: до 25% ИИ-кода содержит ошибки, которые ловят QA или пользователи, увеличивая цикл разработки.

Но есть нюанс
Исследования не идеальны. METR — выборка всего 16 человек, большинство без опыта с ИИ (например, Cursor). У тех, кто освоил ИИ, эффективность выросла, у лучших — почти в 2 раза! Главное — научиться использовать инструмент.

Итог: Менеджмент не должен пушить ИИ — рынок сам разберётся. Ключ к успеху — эксперименты и изучение лучших практик, чтобы ИИ стал помощником, а не обузой.

👉 @seniorFront

Айти “умирает”, вакансий нет, все говорят про кризис?
В канале “Frontend менторинг | Косилов” разбираю, что реально происходит на рынке и как всё-таки находить офферы.

Там: честные зарплатные вилки, разборы резюме и портфолио, стратегии поиска работы и роста в кризис, без инфоцыганства и розовых обещаний. Я действующий фронтенд-разработчик и ментор, показываю, как адаптироваться к рынку, а не ждать “когда всё наладится”.

Для тех, кто придёт отсюда, — скидка 30% на менторство и разборы по промокоду Kosilov2026.

Ни одного лишнего блюра: хардкорная оптика IDE для тех, кто пишет код десятилетия подряд

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

👉 @seniorFront

В канале “Frontend менторинг | Косилов” вы можете найти честные зарплатные вилки, разборы резюме и портфолио, стратегии поиска работы и роста в кризис, обзор технологий и мысли по этому поводу.

Так же публикует в Инсте смешные ролики и полезный контент про АйТи.

https://www.instagram.com/kosilllov?igsh=MXN1ZWxvN3JhaW5uMg%3D%3D&utm_source=qr

Всем, кто подпишется и напишет в личку слово js в инстаграме, пришлет список вопросов по JavaScript с собесов + даст краткие ответы/подсказки, как лучше отвечать.

dropdown concept

Здесь создается интерактивное выпадающее меню с 3D-эффектами, используя HTML, CSS с радиальным градиентом и 3D-трансформациями (rotateY, perspective, transform-style: preserve-3d), а также JavaScript с плагином jQuery Makisu для реализации анимации сворачивания/разворачивания элементов меню, оптимизированной через CSS-ключевые кадры и динамическое управление стилями.

👉 @seniorFront

Reveal Elements on Page Scroll

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

👉 @seniorFront

Если ты хочешь войти во фронтенд-разработку — сейчас идеальный момент входа.

ИИ не убил профессию. Он убрал самое страшное — барьер входа.

Сегодня первый рабочий сайт можно сгенерировать через ChatGPT или DeepSeek, довести до ума на HTML и CSS, оживить JavaScript и выложить в продакшен. Всё это за одну неделю.

Именно это мы и делаем на бесплатном 7-дневном практикуме.

Ты пройдёшь путь от чистого листа до реального проекта в портфолио, с поддержкой кураторов на каждом шаге. Не один на один с туториалами.

Стартуем завтра.

👉 Приходи на бесплатный практикум

🎁 Каждому участнику гайд «Фронтенд в 2026: что делать новичку в эпоху ИИ»

System Design - этап собеседования, на котором часто сыпятся даже сильные разработчики. Не потому, что они плохо пишут код, а потому что никогда не проектировали системы целиком и не знают, как уложить это в 40 минут собеса.

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

В первой части рассказывается:
- что такое системный дизайн и кому он нужен
- как в целом проектируются системы: монолиты, микросервисы, нагрузка, масштабирование, проектирование API
- какие темы нужно понимать для продвинутого уровня: распределённые транзакции, 2PC, 3PC, TCC и другие.

Во второй части планируют разобрать System Design во фронтенде, но для подготовки к собеседованию, по сути, достаточно уже первой.

Ссылка на видео: https://youtu.be/PgC7LzIG29k

🧭 Разбираем React вместе с Podlodka React Crew

Современные React-приложения становятся всё сложнее. Разработчики регулярно сталкиваются с проблемами производительности, утечками памяти и архитектурными вызовами.

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

💡Эксперты Podlodka React Crew решили разобраться с этой проблемой на онлайн-конференции под названием «Продвинутый React».

С 23 по 27 марта ее участники:

⚙️ узнают, как устроен рендер и внутренние механизмы в современном React

🧠 познакомятся с архитектурой приложений, где применяются React Server Components

📊 научатся профилировать React-приложения и выявлять медленные рендеры, memory leak

🛠️познакомятся с дополнительными инструментами, которые помогут упростить отладку и выявить сложные проблемы

Формат — удобный и ламповый: пять дней, живые Zoom-сессии утром и вечером, закрытое профессиональное сообщество в Telegram и общение со спикерами.

Если хотите углубить свои знания про React в компании крутых экспертов, присоединяйтесь к Podlodka React Crew👇

🎟Забрать early-bird билет: https://podlodka.io/reactcrew

Apple TV Macbeth Poster Animation

Анимированная карточка, реализованная на HTML и SCSS.

👉 @seniorFront

Как работает JPEG: магия, обманывающая ваши глаза

Вы когда-нибудь задумывались, почему JPEG при сжатии в 10 раз выглядит почти идеально, а при 100 — рассыпается на «кашу» из квадратов?

Вот основные этапы этой инженерной магии:

🌈Цветовой обман (YCbCr): Человеческий глаз лучше видит яркость, чем оттенки. JPEG переводит картинку в формат, где яркость отделена от цвета, и... просто выкидывает половину цветовых данных. Вы этого даже не заметите!

🟦 Сетка 8x8: Изображение режется на блоки. Именно их мы видим как «артефакты», когда перебарщиваем со сжатием.

🔄 Магия частот (DCT): Каждый блок превращается из набора пикселей в набор «частот».

🎚 Квантование: Тот самый ползунок «Quality» в редакторах. На этом этапе алгоритм решает, сколько мелких деталей превратить в нули. Больше нулей — меньше вес файла, но хуже картинка.

Потыкать интерактивные примеры и увидеть DCT в действии можно здесь 👇

📄 Эффект загнутого угла на чистом CSS
Интересный разбор от Kitty Giraudel.

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

Как это работает?
Весь секрет в комбинировании двух линейных градиентов внутри одного свойства background:

Первый слой - это крошечный треугольник, который имитирует загнутую часть бумаги.

Второй слой - основной фон элемента, в котором сделан «срез» (прозрачная область) точно в том месте, где располагается наш треугольник.

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

А еще браузер рисует градиенты быстрее, чем подгружает внешние ассеты, что экономит трафик и ускоряет рендеринг.

Оригинал статьи ниже👇

👉 @seniorFront