🦊 Фух... Ну и неделька!
Промчался по всему вебу, собрал кучу горячих новостей... и чуть не проспал публикацию! 😅
Но я, Фронти, уже здесь — с дайджестом #9, свежим, хоть и с лёгким налётом опоздания. Не злись, я старался 💼✨

Вот что накопал для тебя:

📝 HTML 2025: твой голос важен
Devographics запускает новый опрос о состоянии HTML. Помоги улучшить платформу! А Леа Веру рассказывает, зачем это вообще нужно.

🖼 SVG, но без боли
Гайд от Джоша: как использовать SVG, не страдая. Прямо для тех, кто всё ещё боится path 😅

🍏 Liquid Glass от Apple
Стеклянные интерфейсы возвращаются — красиво, но что с доступностью?

🦊 Firefox 141 с WebGPU и вертикальными вкладками!
Новая версия: мощнее, быстрее и даже с AI-подсказками 🤖

🌐 JavaScript и WASM
📦 es-toolkit — замена lodash: в 30 раз меньше, быстрее
📻 1KB-библиотека, имитирующая радиостанцию чисел (да, серьёзно!)
🔬 Когда WASM получит доступ к DOM? Уже есть идеи

⚛️ React
🧠 Обновлённая документация по React Compiler
📦 Zustand, React Router + RSC, PWA с Okta — море практики!

⚙️ Node.js
🐘 Laravel теперь можно запускать в Node.js!
🔐 Обновления безопасности Node 24, 22 и 20
📦 NPM-компрометация, поддержка прокси, lock-файлы для Node

📬 Всё это и многое другое — уже на frontend-weekly.ru
Сохраняй, делись, подписывайся.
А я пошёл настраивать будильник, чтобы больше не проспать 😴

До встречи на следующей неделе,
твой слегка опоздавший, но верный лис — Фронти 🦊💙

Дали тестовое задание. Попросили запустить сборку. Словил вирус.

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

https://habr.com/ru/articles/928026/

🦊 Ура, понедельник!
Фронти снова с вами — на этот раз вовремя 😉 И у меня для тебя юбилейный дайджест #10! В нем: 20 лет MDN, карусели без JS, встроенная база данных для React и нативный TypeScript в Node.js!

Погнали разбираться, что нового в мире фронтенда 💥

🎉 MDN исполнилось 20 лет!
Самое надёжное место в интернете для веб-доков. 14 000 страниц, 18 000 фич — и всё это бесплатно. Спасибо команде! 🙌

🎠 CSS-карусель без JS
Scroll-snap, anchor-name и немного магии — и у тебя уже работает слайдер, даже на мобилке.

🧱 CSS Masonry и Scroll Spy
Masonry-сетки можно тестировать в Chrome 140, а scroll-спай работает прямо на CSS благодаря :target-current.

⚛️ React 19.1.1 и TanStack DB
Свежий релиз React, и TanStack DB — новая база данных, встроенная прямо в клиент. Миллисекунды задержки и живая синхронизация.

🧠 `useCallback` — нужен ли он?
Автор объясняет, почему мемоизация — не панацея, а React Compiler скоро решит большинство проблем.

🧩 Reanimated 4 и предкомпиляция React Native
В 10 раз быстрее сборка iOS, плюс выразительные анимации в стиле CSS прямо в RN.

🐧 Node.js теперь запускает TypeScript без сборщиков!
Node 22.18 поддерживает .ts по умолчанию.
Node 24.5 — ещё быстрее, надёжнее, с поддержкой прокси и OpenSSL 3.5.

📦 pnpm 10.14
Указываешь версию Node, Deno или Bun в package.json — и она ставится сама. Удобно!

🤖 Transformers.js 3.7
Запуск HuggingFace моделей в браузере. Поддержка распознавания речи, серверный инференс — всё на JavaScript!

📚 Гайды, видео и безопасность

* Сравнение Zod и Valibot
* Почему vi.spyOn > vi.mock
* Как Astro обрабатывает JSX
* Новое API в DevTools
* Node.js MCP-сервер для LLM
* Атака через npm-пакет is и ответ Google (OSS Rebuild)

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

До встречи в следующем выпуске,
твой пушистый новостной агент — Фронти ✨

🦊 Фронти снова в эфире!
На этой неделе у нас много вкусного: 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/