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

Валидация на чистом CSS: считаем поля через :nth-child(n of selector)

Раньше для проверки «заполнено ли хотя бы 3 поля» нам обязательно нужен был JavaScript. Теперь с этим справляется нативный CSS.

В чем суть?
Синтаксис :nth-child(n of .selector) позволяет считать не все элементы подряд, а только те, что соответствуют определенному правилу.

Как это работает для валидации:

Мы определяем «заполненное» состояние (например, через :not(:placeholder-shown) или :valid).

Используем селектор :nth-child(3 of .field:has(:valid)). Он «выстрелит» только тогда, когда в списке появится третий валидный элемент.

Через комбинатор «тильда» (~) управляем состоянием кнопки отправки или показываем сообщение об успехе.

Пример кода:

CSS
/* Разблокируем кнопку, когда заполнено минимум 3 поля */
.form:has(.field:nth-child(3 of :has(input:not(:placeholder-shown)))) button {
opacity: 1;
pointer-events: auto;
}

👉 @seniorFront

Нативный CSS-скоупинг: как изолировать стили без сборщиков

Если вы работали с Vue или Svelte, то наверняка любите их локальные стили (scoping) — это когда код компонента заперт внутри него и не ломает верстку в других частях сайта. Раньше для этого приходилось настраивать CSS Modules или плагины для Webpack/Vite. Теперь браузеры учатся делать это сами.

В Safari появилась интересная фича — контейнеры только по имени (Name-Only Containers).

Обычно директива @container проверяет размеры экрана (например, «если родитель шире 500px»). Но если убрать условие размера и оставить только имя, мы получаем отличный инструмент для изоляции стилей:

CSS
/* Обозначаем границы нашего компонента карточки */
.my-card {
container-name: card-container;
}

/* Пишем стили, которые будут работать ТОЛЬКО внутри этой карточки */
@container card-container {
.title { color: royalblue; }
}
Теперь, даже если на сайте есть другие элементы с классом .title, наш цвет применится только внутри .my-card.

👉 @seniorFront

Совет на ближайшие годы — изучайте ВАЙБ-КОДИНГ

ИИ уже пишет код, чинит баги, генерирует тесты, документацию и помогает запускать продукты быстрее, чем это делали классические команды разработки. И это уже не "будущее когда-нибудь", а реальность, которая меняет рынок уже сегодня

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

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

Подписывайтесь, нас уже 45 тысяч: @vibecoding_tg

Верстаешь?

Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:

1. Без опыта сделаешь реальный сайт сервиса доставки с нуля;
2. Добавишь JavaScript-логику, расчёты и трекинг;
3. Подключишь карты и маршрут доставки через API;
4. Превратишь сайт в Angular-приложение;
5. Подключишь backend и выложишь проект в продакшен;
6. Научишься использовать ChatGPT и Giga во Frontend-разработке;
7. Узнаешь 9 способов найти первый заказ на фрилансе даже без опыта.

А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 12-летним стажем – Романа Чернова и получишь живую помощь по проекту.

👉 Проскочить на интенсив бесплатно

Начинаем уже завтра.

🔥 С нас обучение, практика и помощь с выходом на фриланс или собеседованием.