🎯Podlodka React Crew #3 — сезон о паттернах и практиках фронтенда

Как писать продуманный и масштабируемый фронтенд с помощью React? Какие паттерны реально работают, а какие — мода ради моды?

В новом сезоне Podlodka React Crew обсуждаем архитектуру, производительность, нестандартные layout'ы, системный подход к интервью и многое другое.

📌 В программе:
• Паттерны анимаций с View Transition API
• Проверка AI-ассистентов на реальных задачах
• Глубокое погружение в архитектуру React Hooks
• Практика layout'ов вне CSS Grid и Flexbox
• System Design для фронтендера: как не завалить интервью

💡Все доклады — с практикой, кейсами и интерактивом.

📆 Реактим с 25 по 29 августа. Бегом за билетами: https://podlodka.io/reactcrew

А мой промокод AttractorCode дает скидку в 500р🥳

Розыгрыш одного билета на Podlodka React Crew

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

1) Вам должен быть интересен React, иначе участие бессмысленно. Понимаете, да? =) Почитайте программу на лэндинге и напишите какую тему, кроме моей, и почему ждёте большего всего;

2) Напиши какую-нибудь интересную историю связанную с тобой и любым программированием. Это может быть любая история. Она не должна быть смешной или жизнеутверждающей. Она должна быть просто интересной лично вам. Ваша же история =) Может быть что-то связанное с микроволновкой? Шучу-шучу =)

Куда писать? А вот прям сюда в комментарии.

В следующую пятницу я запущу рандомизатор среди выполнивших условие и в тихом режиме отправлю билет для онлайн участия.

Всем участникам удачи ❤️ КШ

🦊 Привет, фронтендеры!
На этой неделе дайджест получился короче обычного. Но не переживай — как и хвост у лисы, он всё равно пушистый и полный полезностей 🦊✨

Что у нас есть:
HTML:
🔎 hidden=until-found — спрятал? Браузер найдёт.
🧩 Веб-компоненты без хаоса.
📐 SVG наконец-то встаёт на место.

CSS:
🎨 Психология цвета в UX.
🪝 Anchor-позиционирование без JS.
🔢 auto-fit и количество колонок.
🧭 Safari DevTools в деле.
📓 Чему нас научил PostCSS за 12 лет.

👉 Полный выпуск — на frontend-weekly.ru

Неостановимый

Привет! Рад сообщить о создании нового проекта — https://webpatterns.ru/

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

В целом идея проекта не новая, но есть несколько причин, по которым я хотел бы, чтобы такой ресурс существовал в интернете:
- современные подходы;
- мнение сообщества, а не одного разработчика;
- возможность повлиять на паттерны — своеобразная база данных, объясняющая, почему одно решение может оказаться плохим, а другое, пусть даже очень старое, — лучше.

Проект будет смотреть в будущее, чтобы тянуть отрасль вперёд и не давать ей стагнировать. Поэтому могут использоваться современные свойства, методы — да что угодно. =) Ну как современные. Некоторым свойства уже десять лет, а они всё ещё могут игнорироваться =(

На первое время упор будет делаться на UI: пагинация, хлебные крошки, навигация, логотипы, кнопки, модальные окна, попапы, дроверы и прочее. Далее UX: копирование, работа с файлами, сетки, PWA. В целом, посмотрим как пойдёт, но с планом лучше, чем без плана.

Сейчас проект находится в бета-версии для сбора обратной связи. У меня есть куча идей по улучшению, но вместо того, чтобы всё это варилось только в моей голове, я хочу воспользоваться вашим мнением. Приходите и делитесь своими идеями — я всё выслушаю.

Первый паттерн самый простой — центрирование контента на странице. Я начал с элементарного однострочного решения для центрирования.
https://webpatterns.ru/patterns/centering-page/

PS: я уже писал, что есть парочка идей для проектов. Это один из них. Второй ждём всем селом =)

"Ты не хлеб, но без тебя жизнь пустая, крошка"

Привет. Верстал хоть раз хлебные крошки? Давай вместе придумаем отличное решение для хлебных крошек.

Приходи обсуждать https://github.com/nikolai-shabalin/webpatterns/discussions/3, а я потом паттерн создам на https://webpatterns.ru/

Что такое scroll chaining и как его контролировать?

Вчера ковырялся с хлебными крошками и случайно откопал CSS-свойство, которое как-то прошло мимо меня — overscroll-behavior.
Оказалось, его внедрили в браузеры ещё в 2017, а в 2019 появилась логическая версия.

Представьте: вы скроллите модалку, доезжаете до конца и… вместо остановки браузер начинает прокручивать основной документ. Это и есть scroll chaining. На мобильных это ещё и сопровождается bounce-эффектом или pull-to-refresh. Для некоторых интерфейсов такое поведение выглядит странно и даже ломает UX.

overscroll-behavior позволяет взять это под контроль, избавиться от костылей вроде overflow: hidden с JavaScript и аккуратно управлять поведением прокрутки.

Всё что узнал запаковал в статью https://shabalin.online/blog/css/overscroll-behavior/

Приятного чтения!

Аутлайны

Аутлайны нужны. Аутлайны не нужны. Если нужны, то должны быть красивыми. Если отключить, то придумать замену. Если сложный многогранный элемент, то не нужны, но надо что-то придумывать.
На проекте есть тёмная тема. Какое там медиавыражение было? А теперь менять для всех элементов?

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

https://webpatterns.ru/patterns/focus-outline/

Божечки-кошечки

Мой любимый пет-проект (https://nikolai-shabalin.github.io/css-properties/) попал в популярную рассылку по фронтенду.

Я так счастлив вы бы знали 😊

State of CSS 2025

Прошёл State of CSS 2025. Я с ним ознакомился и собрал для вас выжимку. Почитать можно всё там же https://shabalin.online/blog/css/stateofcss-2025/

Из интересного:

Среди всех функций наибольшую популярность и положительные оценки получил селектор :has(). Его применяли 80 % участников, при этом 51,5 % высказывают о нём положительное мнение. Второе место по любви занял Subgrid, а третье — aspect‑ratio.

Завтра подводим итоги розыгрыша.

У нас целых два участника. Шансы 50/50 =)

Давайте подведём итоги этого напряжённого конкурса. Напряжённым он был потому, что я впервые проводил конкурс.

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

Коля: запускает рандомайзер
Рандомайзер: «Коля, их всего двое. Ты меня заставляешь использовать процессорное время, чтобы выбрать 1 или 2? Ты совсем уже? Отдай ребятам билеты и не беспокой меня больше по таким пустякам».
Коля: Ладно.

@Mishok21 и @IISergey, спасибо за участие и ваши истории. Поздравляю с победой! Обязательно с пользой проведите время: заведите новые знакомства и узнайте что-нибудь новое.

А все положительные эмодзи к этому посту адресованы вам! Грац! 🎉

Как делаем masonry раскладку?

Вышла вторая часть про masonry в блоге вебкита. Ребята всё ещё собирают обратную связь от разработчиков интерфейсов.

Предпочтение они до сих отдают ItemFlow во флексовом и гридовом контекстах, вместо нового display: masonry

Ознакомиться можно тут
https://shabalin.online/blog/css/item-flow-2/

Добрый день

Провёл доклад на Подлодке про View Transition API в браузере и в React, но это не отменяет свеженький выпуск дайджеста. Благо мне помогает Фронти.

На этой неделе Фронти выпустит новый дайджест, а я подготовлю новый паттерн. На следующей неделе, с Божьей помощью, запущу новый проект =) ждёмс

🦊 Привет, фронтендеры!
Фронти снова на связи — и принёс тебе дайджест #13. Не суеверный, а наоборот — полный вкусных новостей 🚀

SVG больше не магия — интерактивный гайд по path.
CSS-функции с @function — будущее уже в Chrome.
Anchor Positioning и 👀 Scrollspy на CSS — меньше JS, больше магии стилей.
Intl API — интернационализация без тяжёлых библиотек.
Lambda без холодных стартов — AOT-компиляция для молниеносного запуска.
jQuery 4.0 RC1 — живее всех живых.
Жёлтый и фиолетовый — могут дружить (и быть доступными).
Custom Highlight API — подсветка текста нативно в браузере.
React Native 0.81 и Next.js 15.5 — новые версии с ускорением.
Node 24.6.0 и Express в Cloudflare Workers — ещё удобнее и безопаснее.


📬 Читай полный выпуск с большим количеством новостей на frontend-weekly.ru

А я пойду проверю, не спрятался ли 14-й выпуск за дивом с hidden=until-found 🦊

Вопросик на ночь вам: зачем нам кастомные свойства в :root, вместо html?

👉 https://shabalin.online/blog/css/why-root/

Новая неделя - новый паттерн

На этой неделе можно оценить, а лучше обсудить хлебные крошки: https://webpatterns.ru/patterns/breadcrumbs/

Решение компонента получилось неоднозначным для меня. Есть куча узких мест, которые я пока не понимаю как решить. Тут бы не помешало ваше мнение. Так победим.

CLI

У моего любименького пет-проекта css-properties появилась CLI-версия, а значит он стал 5.0.0. Ну вот так я люблю версии

Теперь в терминале в любой момент времени можно ввести npx css-properties-list list -y 2025 и получить все CSS-свойства внедрённые в браузеры за 2025 год.
Можно также поискать какое-то CSS-свойство или значение: npx css-properties-list list -s text-wrap и посмотреть, когда они внедрились в браузеры.

Также к результатам всегда прикреплены ссылки на спецификации и MDN.

Если будут идеи по добавлению новых команд пишите =)

🦊 С днём знаний, фронтендеры!
Пусть ваш рюкзак сегодня будет набит не тетрадями, а свежими релизами и клёвыми демками. (Я — Фронти — уже выгрыз мелом «display: grid» на доске 😅)

Вот что в дайджесте #14:

🎲 CSS random() — случайности без JS, играем с задержками и цветами.
🌈 OKLCH — предсказуемые цвета и аккуратные палитры.
📊 Big O с картинками — алгоритмы наконец понятно.
🧱 Plate — собираем rich-text редактор как LEGO.
❄️ Lambda без холода — Porffor разгоняет старты функций.
🚀 Bun ускорил postMessage в 500×.
😱 Remix v3 без React — горячая тема недели.
✍️ Шрифты: как грузить правильно и быстро.
🟡 LiftKit — золотое сечение прямо в UI.
🔧 Пачка полезных либ: ImageJS 1.0, React-PDF 10.1, Headless Tree и ещё горсть апдейтов.

Лисья шутка дня: если учитель спрашивает, почему работа не сдана — скажите, что я использовал random() и домашка выпала в другую ветку релиза. 🧪🙈

Полный выпуск — https://frontend-weekly.ru/weekly-digest-14/. Всем отличного учебного (и релизного) сезона!

А почему не :root?

Доброй ночи. Не спишь? Тогда слушай...

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

Если раньше моя мысль была: «А почему :root?»,
то теперь — «А почему-то не :root?» 😅

📄 Делюсь статьёй — https://shabalin.online/blog/css/why-not-root/

🦊 Йо-хо-хо, фронтендеры! Это Фронти с дайджестом #15 — свежим как npm i после кэша 🤌

Вот что принёс в рюкзаке:

🧪 HTML & API
Beacon API — надёжно «прощаемся» при закрытии вкладки (метрики, логи) без блокировок.

🎨 CSS
- Anchor Positioning — тултипы и дропдауны без JS.
- 3D-текст слоями, «CSS Elevator» (мини-машина состояний), креативные картинки в лонгридах.
- Жидкая типографика с clamp(), спорим о судьбе light-dark().
- 10 реально полезных фич из свежего CSS.
- Пруф, что многое уже можно без JavaScript.

📦 JavaScript
- Почему браузеры душат таймеры.
- Intl.Segmenter для честной длины строк (эмодзи не сломают счётчик).
- XML читаемый без XSLT.
- Функциональные Web Components без оверхеда.
- Линт-практика: noFloatingPromises в Biome.

🅰️ Angular
Летнее обновление: курс на zone-less, новые анимации и удобный дебаг.

🧷 TypeScript
В TS 6.0 хотят включить --strict по умолчанию. Дискуссия горячая 🔥

⚛️ React
- RSC без фреймворка — пощупать механику «вчистую».
- react-window 2.0 — виртуализация списков быстрее и свежее.
- Redux Toolkit 2.9 — апгрейд RTK Query.
- Activity + Suspense: скрываем компонент, состояние остаётся.
- React on Rails 15 — ранняя гидратация, курс на RSC.
- Мнение: у Next.js «краевые случаи» на каждом шагу — хороший чек-лист.
- Expo: синхронный встроенный SQLite и когда выводить клиент-стейт из серверного.

🛠 Инструменты

Пакет обновлений: Rspack 1.5, react-json-view-lite, react-qrcode-logo 4.0, Reanimated 4.1, React Admin 5.11, React Stripe.js 4.0, BlockNote 0.37, Ink 6.2.3.

📊 Чтиво и видео
- Firefox ускорил локальный ИИ-рантайм (нативный C++ вместо WASM-слоя).
- Как восстановить удалённые файлы в VS Code.
- Chrome — 17 лет: история от V8 до site isolation.
- Стоит ли preload-ить шрифты?
- Как меняется поиск с ИИ по данным NN/g.

🧠 Лисья мысль недели: «Если тултип прыгает — пристегни его anchor-ом». А если таймеры душат — не душите пользователя спиннерами 😅

Полный выпуск — https://frontend-weekly.ru/weekly-digest-15/

🦊 Привет, это Фронти! Дайджест #16 подъехал — лёгкий, бодрый и с яркими фичами недели. Поехали 👇

🧪 HTML & API
- headingoffset в HTML — контейнер сам смещает уровни заголовков, иерархия не ломается.
- Reciprocate для Web Components — сигнальная реактивность и зеркалирование атрибутов ↔️ свойств (демка и репо внутри статьи).

🎨 CSS & дизайн
- Liquid Glass: эффект «яблочного» преломления на чистых CSS + SVG.
- Color Shifting: как плавно «переливать» цвета и не словить странные переходы.
- Interpolation 101: почему пространство цвета важно для градиентов и mix().
- Learn CSS от Google обновили — есть nesting, anchor positioning, container queries и др.
- Гайд по выравниванию (flex/grid/box) и чек-лист по тестированию на бюджетных смартфонах — ближе к реальности.

📦 JavaScript

- Andromeda (движок Nova на Rust): рантайм с упором на single-file, GPU-ускоренный Canvas и мост к Rust.
- «Безопасные» методы массивов: toSorted, toSpliced, toReversed — без мутаций и сюрпризов.
- Песочница по Intl.* (форматы дат/чисел) — быстро проверить опции.

⚛️ React
- Storybook 10 (beta) → только ESM. Если где-то живут CJS-конфиги — готовим миграцию.
- React Three Timeline — задаём поведение 3D сцен «историями» через async-генераторы.
- Нодовый тест-раннер + TS/React — старт без Jest/Vitest.

⚙️ Node.js
- Крупная supply-chain атака на npm: включайте 2FA, проверяйте changelog’и.
- Node HTTP-серверы в Cloudflare Workers — привычные API на edge без переписывания.
- Как ухаживать за package.json, и что происходит «под капотом» у bun install.

## 🧰 Инструменты

- Mediabunny — медиа без FFmpeg: превью, метаданные, процедурное видео.
- Splide — лёгкий доступный слайдер без зависимостей.
- Feedsmith 2.0 — парсинг/генерация RSS/Atom/JSON Feed.
- BlazeDiff — быстрый покадровый image-diff.
- Ещё: github-script 8.0, sqs-consumer 13, Peaks.js 4, Cosmic UI, React Bits и др.

🔄 Обновления

Deno 2.5, ESLint 9.35, Node 24.8 (Current), Electron 38, Expo Router v6, Fastify 5.6, MongoDB Node 6.19, Ink 6.3 и пачка мелких релизов.

🦊 Лисья шутка недели: «Цвета в CSS теперь такие плавные, что я перестал путать orange и fox — но IDE всё ещё подчёркивает хвост, видимо, по *lint*ам» 🧡

📝 Кстати, если в норе завалялась классная статья — можешь прислать её мне, и я добавлю её в следующий выпуск! Именно так в этот раз и сделал Сергей Артёмов 🦊📨 (да, теперь у нас дайджест с народным хвостом 🦴)

Полный выпуск - https://frontend-weekly.ru/weekly-digest-16/