🦊 Фронти снова в эфире!
На этой неделе у нас много вкусного: HTML, который переживёт всех, каскадные слои, ленивые импорты в TypeScript, Web Workers в React и новый API для звука в React Native.

Погнали по порядку 👇

🦴 HTML живее всех живых
Семантическая разметка — не олдскул, а ключ к скорости, доступности и чистому DOM. Меньше <div> ради <div>, больше смысла.

🎨@ layer приручает каскад
Cascade Layers позволяют задать предсказуемый порядок стилей без войны !important.

📝 TypeScript 5.9
Не громкий, но полезный релиз: import defer, --module node20 и раскрывающиеся подсказки типов в IDE.

🌐 SPA vs сервер
Создатель RedwoodSDK утверждает: пора снова строить приложения с упором на сервер.

⚡️ Web Workers в React
Разносим тяжёлые вычисления по потокам, освобождаем UI и ускоряем отклик.

🚀 V8 ускорил JSON.stringify
В 2+ раза быстрее сериализация JSON. Меньше задержек при API-ответах и логах.

🔧 Node 22.18 с TypeScript в рантайме
Пишешь node app.ts — и оно просто работает.

🔍 Dependency Cruiser
Рисует наглядные графы зависимостей проекта. Идеально для ревизии архитектуры.

📬 Полный выпуск — на frontend-weekly.ru
А я пошёл копать для тебя ещё свежих фронтовых находок 🦊

Can i *

Делюсь списком сервисов, где можно проверить поддержку фич
- https://caniuse.com/ - вы же в курсе что это
- https://www.caniemail.com/ - проверяет поддержку в email-агентах
- https://compat-table.github.io/compat-table/es6/ - проверяет работоспособность JS-методов в разных движках
- https://a11ysupport.io/ - работоспособность ally-фич в разных инструментах и браузерах

и оффтопиком
- https://caninclude.onrender.com/ - проверяет вложенность тегов (работает не отлично, но хорошо). Кстати, написал студент Академии

Если у вас в загашнике есть подобные проекты - делитесь в комментариях к этому посту

Дорогие друзья спасибо, что читаете этот канал, а особенно за то, что общаетесь в комментариях

Сегодня у канала круглая и важная дата - 300 читателей.

Скоро выйдет ещё пару моих проектов. Ждите новостей

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

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

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

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

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

📆 Реактим с 25 по 29 августа. Бегом за билетами: http://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/. Всем отличного учебного (и релизного) сезона!