🦊 Привет, это Фронти! Дайджест #18 на месте — свежайшие новости и ссылки. Поехали 👇

🧪 HTML & API
- WebAssembly 3.0 стал стандартом — мощный апдейт для веба.
- Temporal скоро в Chrome — даты без боли.
- MDN офлайн в одном архиве.

🎨 CSS & дизайн
- Что важно в CSS 2025: if(), popover, field-sizing.
- zoom стал стандартом и попал в Interop.
- Как внедрять Cascade Layers без рефакторинга всего проекта.

📦 JavaScript
- TC39 продвигает Import Bytes, Iterator Chunking и pushAll.
- findLast() вместо reverse().find() — чище и быстрее.
- «JSON не везде одинаковый» — подводные камни совместимости.

⚛️ React
- React Router 7.9: стабильные middleware.
- TanStack Start — RC 1.0, почти релиз.
- useSyncExternalStore вместо лишних useEffect.
- Плагины: «может, эффект не нужен?» для чистого кода.

⚙️ Node.js
- Усиливают безопасность npm — план GitHub + гайд по практикам.
- Node v24.9.0 (Current) и v22.20.0 (LTS).

🤖 ИИ
- DevTools через MCP для ИИ — автоматическая отладка ближе, чем кажется.
- MCP‑сервер для DevTools: ИИ видит и дебажит в браузере.
- Copilot CLI в публичном превью.

⚒️ Инструменты
- nuqs — типобезопасное состояние в URL.
- React Old Icons — 2000+ ретро‑иконок (аккуратнее с правами).
- react-native-big-calendar — календарь как у Google.
- Repo2txt и Repomix — сжимаем репо для ИИ.
- Catalyst — современный стартер для Next.js.

🔄 Обновления
- Docusaurus 3.9, VanJS 1.6, Milkdown 7.16.
- pretty-bytes 7.1, ESLint 9.36, pnpm 10.17.
- Cap’n Web — новый RPC для веба.

и ещё 70 статей внутри дайджеста.

🦊 Лисья шутка недели: «Temporal лечит время, но дедлайны всё равно болят!» 😅

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

CSS interest-delay: умные задержки для лучшего UX

Сегодня в спеке CSS Basic User Interface Module Level 4 обнаружил новое CSS-свойство interest-delay и скупая мужская слеза потекла по щеке я тут же решил накидать статейку.

Помните проблему: наводишь курсор на пункт меню — появляется выпадающий список, но стоит чуть «промахнуться» при переходе к этому списку, как всё тут же исчезает?

Это происходит потому, что как только курсор покидает сам пункт навигации, состояние :hover пропадает — и меню закрывается, даже если вы всё ещё пытаетесь до него добраться.

Раньше для решения приходилось городить JavaScript, менять HTML-структуру или хитро подгонять отступы… В общем, подстраиваться под ограничения CSS. По этой теме писали огромные статьи и делали доклады.

Но теперь появилось новое CSS-свойство — interest-delay, которое решает проблему элегантно: оно даёт пользователю время «додумать» действие.

Мы буквально говорим браузеру:

Не торопись скрывать меню — подожди немного, вдруг человек просто ведёт курсор к выпадашке?

Свойства interest-delay-start и interest-delay-end позволяют задать задержку на включение и на выключение такого «состояния внимания». Например:

.nav-item {
  interest-delay: 100ms 300ms;
}

Первое значение — сколько ждать, прежде чем показывать меню.
Второе — сколько ждать, прежде чем скрывать его после ухода курсора.

👉 https://shabalin.online/blog/css/interest-delay/

🦊 Привет, это Фронти! Хррррр. Ой-ой, простите. Хрррр. Я кажется, что-то приготовил вам. Ах да, дайджест #19 на месте — свежайшие новости и ссылки. Поехали 👇

🧪 HTML & API
- Экономика усилий пользователя: как делать «выгодный» UX.
- Почему WCAG устаревают и где болит доступность.
- Липкая навигация и автоматические a11y‑тесты: риски и ограничения.

🎨 CSS & дизайн
- Медиа‑запросы на новом уровне: от aspect‑ratio до viewport‑segments.
- Safari 26 привёз свежие фичи и новое corner-shape.
- Соседи в CSS: sibling-count/sibling-index и практичный стартовый файл от Койера.

📦 JavaScript
- State of JS 2025 открыт — можно голосовать.
- findLast() вместо .reverse().find() — чище и быстрее.
- TC39 двигает Import Bytes, Iterator Chunking и pushAll.

⚛️ React
- React 19.2: <Activity/>, useEffectEvent, PPR и апгрейд DevTools.
- Управление состоянием в 2025: автор рекомендует Zustand.
- TanStack Start — RC, плюс гайд и демо с TanStack Table v8.

⚙️ Node.js
- Node v24.9.0 (Current) и v22.20.0 (LTS) — обновления и безопасность.
- Cloudflare Workers: ближе к Node.js, даже HTTP‑серверы завелись.
- GitHub усиливает безопасность npm; Deno — «безопасно по умолчанию».

📊 Видео и статьи
- SVG‑«скриншоты» HTML, история WWW от Тим Бернерс‑Ли, «пьяный CSS».

🤖 ИИ
- Copilot CLI — публичное превью для команд в терминале.
- Chrome DevTools через MCP: ИИ‑агенты видят и дебажат браузер.

⚒️ Инструменты
- npm‑check‑updates 19.0: умные апдейты с «возрастом» пакетов.
- Skia Canvas 3.0: 2D‑рендеринг в Node.js как в браузере.
- ffetch: обёртка над fetch с ретраями, circuit breaker и типами.

и ещё десятки статей и ссылок внутри дайджеста.

🦊 Лисья шутка недели: «findLast() нашёл баг последним — а дедлайн первым!» 😅

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

🦊 Привет, это Фронти! Сегодня у меня для вас особенный дайджест #20 — он просто ломится от невероятных обновлений! React стал независимым от Meta, Vite выпустил enterprise-версию, а Core Web Vitals сэкономили пользователям целых 30 000 лет ожидания!
Готовы погрузиться в мир фронтенда? Тогда поехали! 🚀

🧪 HTML & API
- Core Web Vitals сэкономили пользователям 30 000 лет ожидания!
- История метрик: от AMP до открытого стандарта.

🎨 CSS & дизайн
- View Transitions 2025: автоматические имена и scoped-переходы.
- Современные цвета в CSS: color() и oklch() для лучшего контроля.
- shape-outside для нестандартных обтеканий текста.

📦 JavaScript
- Vite: документальный фильм с создателями фреймворков.
- Vite+ — enterprise-версия для команд.
- Playwright Agents: автономные тесты как настоящие пользователи.
- Object.groupBy() вместо reduce() — чище и проще.
- Prettier: 10 лет без споров о стиле кода.

⚛️ React
- React Foundation: независимость от Meta! 🎉
- React 19.2: <Activity/>, useEffectEvent, PPR и DevTools.
- Next.js 16 Beta: Turbopack по умолчанию.
- Coinbase Design System — открытый код с анимированными компонентами.

⚙️ Node.js
- 15 встроенных функций Node.js вместо npm-пакетов.
- Обработка 14 ГБ данных на 78% быстрее с Buffer.
- Deno vs npm: безопасность по умолчанию.
- Удаление 120 неиспользуемых зависимостей в монорепозитории.

📊 Видео и статьи
- «Хватит игнорировать браузер» — больше нативных API.
- Mirrow — анимация SVG с CSS-подобным языком.
- WebGPU для параллельных вычислений в браузере.

🤖 ИИ
- Google AI Studio генерирует Angular-приложения.
- Heroku Vibes — AI-инструмент для быстрой сборки.
- «Вайб-инженерия» — генерация кода через LLM.

⚒️ Инструменты
- Globby 15.0: улучшенная работа с файловыми шаблонами.
- Odiff 4.0: сверхбыстрое сравнение изображений.
- Javet 5.0: Node.js и V8 внутри Java-приложений.
- EmbedPDF — лёгкий PDF-просмотрщик для любого проекта.

и ещё десятки статей и ссылок внутри дайджеста.

🦊 Лисья шутка недели: «React Foundation теперь независимый — а зависимости всё равно остались!» 😅

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

🦊 Привет, это Фронти!
Сегодня у нас дайджест #21, и этот выпуск 🔥 — всё буквально кипит от новостей!
View Transitions теперь работают во всех браузерах, React Compiler стал стабильным, Next.js 16 уже с Turbopack, а Bun 1.3 официально идёт в фулл-стек.
Поехали смотреть, что принесла неделя! 🚀

🧪 HTML & API
* Firefox 144 догнал Chrome и Safari — теперь View Transitions API*поддерживается везде! 🎉
* Появился Interop Feature Ranking — сайт, где можно влиять на приоритеты веб-платформы.
* Новый логотип у W3C, JSON-формат Custom Elements Manifest, и напоминание про тег <output>.

🎨 CSS & дизайн
* Отличная статья «CSS Grid через линии» — переосмысливаем сетки, думаем не ячейками, а линиями 📐.
* Новые функции: shape(), contrast-color(), progress(), и продвинутые селекторы :is(), :where(), :has().
* Как сделать переключатель тёмной темы без JS — элегантное решение чисто на CSS 🌗.

📦 JavaScript
* Забавный эксперимент с pipeline-композицией через Symbol.toPrimitive.
* Райан Карниато рассказывает, куда движутся signals (видео на YouTube).
* Почему typeof null === 'object' — и как этот «баг» пережил 25 лет.
* Как находить место выделения объекта в Chrome DevTools 🕵️.

⚛️ React и экосистема
* Triplex стал опенсорсным! 🎮 Визуальный рабочий стол для React и React Three Fiber теперь под крылом Poimandres.
* React Compiler 1.0 — стабильный! ⚡ Теперь React сам заботится о мемоизации.
* Next.js 16 Beta с Turbopack и поддержкой React 19.2 — производительность на новом уровне 🚀.
* React Native 0.82 перешёл на Новую архитектуру и обновил Hermes — новая эра для RN 📱.
* Документалка о Vite и проект Vite+ — must-see для всех, кто пишет на современном JS.
* Ещё: Lit вступил в OpenJS Foundation, обновления TanStack Router и Angular на Signals.

⚙️ Node.js & Backend
* Node.js 25.0.0 — свежий релиз с Web Storage, быстрым JSON.stringify и улучшенным JIT 🟢.
* Bun 1.3 становится полноценным фулл-стек-рантаймом 💪.
* Kaluma 1.3 — запускаем JS на Raspberry Pi Pico 2!
* Мост Python ↔ Node от Platformatic — теперь можно дружить ASGI и JS 🧩.
* Плюс: Node 22 стал LTS, улучшения памяти в контейнерах и свежие советы по TypeScript.

📊 Видео и статьи
* Prettier исполнилось 10 лет! 🎨 История создания от Vjeux — ностальгия и стандарты.
* Как добавить поиск на сайте Astro и улучшить UX.
* Happy DOM 20.0 — теперь выполнение JS по умолчанию отключено для детерминизма тестов.

🤖 ИИ и автоматизация
* Playwright 1.56 добавил «агентов» для LLM 🤖 — теперь тесты можно писать вместе с ИИ.
* Гайд по GitHub Copilot CLI — как заставить ИИ помогать прямо в терминале.
* llama.ui 2.38 — минималистичный AI-интерфейс в браузере.

⚒️ Инструменты недели
* jsonriver — потоковый JSON-парсер.
* Got 14.5 и Ky 1.12 — современные HTTP-клиенты.
* Ow 3.1 — лаконичная валидация данных.
* React Chrono 3.0, React-to-Print, React Knob Headless — свежие компоненты для React-проектов.
* EmbedPDF, Dev Tools Hub и Make Graph — полезные штуки для фронтендера.
* И не забудьте: React Compiler 1.0 и Remix 3 уже на подходе!


🦊 Лисья шутка недели: «React Compiler стал стабильным — теперь он оптимизирует не только рендер, но и мои нервы!» 😅

Полный выпуск читайте на 👉 frontend-weekly.ru/weekly-digest-21

🦊 Привет, это Фронти!
Сегодня у нас дайджест #22, и этот выпуск просто взрывной! 💥
URLPattern в Baseline, Vitest 4.0 с визуальными тестами, Next.js 16 с Turbopack, Node.js 25 готов, а CSS inherit() обещает революцию в дизайн-системах!
Поехали смотреть, что принесла неделя! 🚀

🧪 HTML & API
* URLPattern и view transitions попали в Baseline — теперь можно смело использовать в продакшене! 🎯
* Google сворачивает часть Privacy Sandbox из-за низкого принятия — эпоха меняется 📉
* Safari Technology Preview 230 с новыми фиксами и экспериментами 🍎
* W3C предлагает WAICT для повышения надёжности JavaScript в Сети 🔒

🎨 CSS & дизайн
* 25 крутых возможностей CSS за 25 минут — от Адама Аргайла! Авто-подгон размеров, стили скроллбаров, матфункции 🎨
* CSS inherit() — новая функция для контекстно-зависимых компонентов без тонны пропов!
* Эволюция Masonry: от первых предложений до текущего состояния спецификаций 📐
* Anchor Positioning — актуальное состояние осенью 2025 ⚓

📦 JavaScript
* JSON: import против fetch — что выбрать? Джейк Арчибальд разбирает плюсы и минусы 📦
* Асинхронные циклы без ловушек — почему await в for...of работает по-другому 🔄
* Boa v0.21 — JS-движок на Rust с поддержкой Temporal 🦀

⚛️ React и экосистема
* Vitest 4.0 вышел! Визуальные регрессионные тесты, стабильный Browser Mode, поддержка Playwright Traces 🧪
* Next.js 16 с Turbopack и React Compiler — производительность на новом уровне! 🚀
* Angular 21 выбирает Vitest как тест-раннер по умолчанию вместо Karma/Jasmine ⚡
* Solito 5.0 — мост между React Native и Next.js без React Native Web 🌉

⚙️ Node.js & Backend
* Node.js 25.0.0 — Web Storage по умолчанию, быстрый JSON.stringify, улучшенный JIT 🟢
* Bun 1.3.1 — фулл-стек-рантайм готов к бою! 💪
* Deno Deploy с кучей улучшений платформы деплоя 🦕
* CLI на Ace (Node/Bun) — как сделать мини-приложение закладок 📌

🤖 ИИ и автоматизация
* ChatGPT Atlas — новый Chromium-браузер с встроенным ИИ-чатом и агентами! 🤖
* Web Codegen Scorer от Angular — утилита для оценки качества веб-кода от ИИ 📊

⚒️ Инструменты недели
* Biome 2.3 с поддержкой Vue, Svelte и Astro ⚡
* Wretch 3.0 — обёртка над fetch с читаемым API 📡
* Obra Icons — 1000+ иконок с настройкой толщины и размера 🎨
* Format JSON Online с ИИ-помощью для исправления JSON 🤖
* Graffle 7.3 — GraphQL-клиент с поддержкой CommonJS 📊

🦊 Лисья шутка недели: «URLPattern в Baseline — теперь можно паттернить не только URL, но и свою жизнь!» 😅

Полный выпуск читайте на 👉 frontend-weekly.ru/weekly-digest-22

Baseline timeline

Кстати, про baseline, если хотите узнать, что из последнего попало в Widely available или Newly available, то можно глянуть на специальном ресурсе пет-проекте
https://nikolai-shabalin.github.io/css-baseline-timeline/

🦊 Привет, это Фронти!

Человек забыл, что сегодня понедельник. Сегодня у нас дайджест #23, и этот выпуск просто взрывной! 💥
TypeScript стал №1 на GitHub, React Compiler 1.0 стабильный, Next.js 16 с Turbopack, пружины на чистом CSS, а Node.js 24.11 теперь LTS!
Поехали смотреть, что принесла неделя! 🚀


🧪 HTML & Платформа
* Прогрессивный рендеринг изображений: что умеем сегодня — Джейк Арчибальд проверяет AVIF, JPEG XL и другие форматы в 2025! 🖼️
* Web MIDI + Web Audio в действии — как «сыграть» Daft Punk прямо в браузере! 🎵
* HTML Tables API — оказывается, есть скрытый API для работы с таблицами! 📊
* Страничные заголовки не должны быть в <header> — напоминание по семантике 📐

🎨 CSS & дизайн
* Пружины и «отскоки» на чистом CSS — функция linear() делает анимации живыми без JS! 🎨
* Секционный лейаут решается современным CSS — clamp(), style queries, :has() и другие новинки 📐
* CSS-reset'ы в 2025 — обзор популярных ресетов и зачем они нужны сейчас 🔄
* Отладка @starting-style в Chrome DevTools — теперь проще понимать стартовые состояния 🛠️

📦 JavaScript
* Директивы и «граница платформы» — от use strict к use client, use server и use no memo 🎯
* История JavaScript — 25 минут о зарождении языка и современном инструментальном вебе 📚
* Почему NaN !== NaN — разбор IEEE 754 и странностей чисел в JS 🔢
* Переосмысление асинхронных циклов — почему await в циклах часто ведёт не туда 🔄

📘 TypeScript
* TypeScript стал №1 по использованию на GitHub! GitHub связывает это с ростом LLM-ориентированной разработки 📈
* Типизированные регексы — ArkRegex даёт типы для паттернов и групп захвата 🎯
* Пишем как в Rust, но в TS — приёмы для более «системного» кода 🦀

⚛️ React и экосистема
* React Conf 2025 — React 19.2, стабильный React Compiler 1.0, большие изменения в React Native! 🎉
* Next.js 16 вышел — стабильные Turbopack и React Compiler, новые компоненты кеширования, MCP-сервер для ИИ-отладки! 🚀
* Новая директива use no memo — помечает функцию, чтобы React Compiler не оптимизировал её 🔧
* Как починить любой баг — Дан Абрамов показывает ценность минимального «репро» 🐛
* Remix 3 показали впервые на Remix Jam — ждём релиз! 🌊

⚙️ Node.js & Backend
* Node.js 24.11 становится LTS — поддержка до апреля 2028! 🟢
* Vitest 4.0 вышел! Браузерный режим стабильный, визуальные регрессионные тесты, поддержка Playwright Traces 🧪
* Awesome Node — более 500 отобранных пакетов, ресурсов и ссылок 📚
* Что нового в Express.js — апдейт от Лизз Пэроди о состоянии проекта 📝
* Переезд Mastro с Deno на Node — опыт портирования и подводные камни 🦕→🟢

Ещё сто новостей читайте в полном выпуске!

🦊 Лисья шутка недели: «Пружины на чистом CSS — теперь даже физика подчиняется CSS! Но use no memo всё равно не оптимизирует мои переживания о багах» 😅

Полный выпуск читайте на 👉 https://frontend-weekly.ru/weekly-digest-23/

🦊 Привет, это Фронти!
Встречайте дайджест #24! 🎉
Storybook 10 легче на 29%, тултипы на Anchor Positioning, source maps под капотом, field-sizing для инпутов, а Safari 26.1 с новинками!
Что интересного произошло на этой неделе? 🚀

🎨 CSS & дизайн
* Идеальные тултипы на Anchor Positioning — ставим подсказку точно к нужной точке без костылей! 🎯
* field-sizing: подгоняем ширину/высоту инпута под содержимое — больше никаких «пляшущих» размеров! 📏
* Обрезаем текст по строкам с line-clamp — полезный гайд для карточек и лент 📐
* «Самая нелюбимая» функция: tan() в CSS — тригонометрия в CSS не страшно! 📐
* Проверка в градациях серого — недостающий шаг в контроле доступности цвета 🎨
* Как быстро добавить View Transitions на сайт и не сломать навигацию — практичный разбор ✨
* Подсветка синтаксиса без библиотек: CSS Custom Highlight API теперь поддерживается везде! 🎨
* Производительность веб-анимаций: большая памятка-«тиер-лист» по техникам и их цене 🚀

📦 JavaScript
* Внутренности source maps в JavaScript — как девтулы показывают исходники вместо минифицированного кода 🔍
* Мини-трюк от Lea Verou: ленивое создание Symbol через прокси — элегантное решение 🎩
* Почему NaN !== NaN — разбор IEEE-754 и особенностей сравнения чисел в JS 🔢

📘 TypeScript
* Андерс Хейлсберг о взлёте TypeScript — создатель TS делится мыслями о популярности, переписывании компилятора на Go и роли ИИ 📈
* Встраиваем TS/JS-движок Hako через WebAssembly — запускаем скрипты в разных средах, включая мобильные 🚀

⚛️ React и экосистема
* Storybook 10: теперь только ESM, легче на 29% и с новым automocking — быстрее сборка, проще моки в тестах! 📚
* Reddit-тред: почему у Facebook 140 слоёв контекст-провайдеров и чем это оправдано — горячее обсуждение 🧵
* Исследование: Evil Martians посмотрели на стартUPы с фандингом — React у большинства 📊
* Встраиваем Godot в RN-приложение — новый open-source мост для Android/iOS 🎮
* Как передать базу SQLite через AirDrop из RN-приложения — детальный разбор 📱
* Критическая уязвимость в React Native Community CLI — при запуске dev-сервера возможен удалённый запуск команд! ⚠️
* Запускаем Next.js внутри ChatGPT — подробный разбор «нативной интеграции» от Vercel 🤖
* Генеративное искусство в браузере — как рисовать абстракции на Three.js из React 🎨

⚙️ Node.js & Backend
* Путеводитель по миграции с Node v22 на v24 — гид от команды Node с кодмодами для автоматизации 🗺️
* Вышел Node.js v25.1.0 (Current) — новая версия 🚀
* Через неделю-две npm аннулирует классические токены — проверьте аутентификацию! 🔐
* Импорт модулей из BitTorrent — эксперимент с хуками кастомизации импортов в Node 🌐
* Node на Hugging Face Spaces — если скучаете по Glitch, можно хостить небольшие серверные приложения 🏠
* Почему мигрировали с Python на Node.js — опыт переезда и подводные камни 🐍→🟢
* URLPattern как роутер без фреймворка в Node 24 — используем стандартный API для маршрутизации 🛣️

🌐 Браузеры
* Что нового в WebKit (Safari 26.1) — поддержка улучшенного Anchor Positioning, относительные единицы в SVG, переработка CSS Units 🍎
* Обновления платформы за месяц (stable/beta) — подборка Рейчел Эндрю 📰
* Деприкация XSLT в Chrome: зачем и как это улучшит безопасность — анонс от Google 🔒

Ещё более 100 новостей ждут вас в полном выпуске!

🦊 Лисья шутка недели: на этой неделе не будет

Полный выпуск читайте на 👉 https://frontend-weekly.ru/weekly-digest-24/

Основы реакта - визуально

Интересный по задумке и реализации сайт https://react.gg/visualized

Показывает визуально базовые концепции React. Если уже немного погружены в React, то это позволит немного повысить понимание

А 6 декабря можем встретиться на Я.Субботнике в оффлайне

https://events.yandex.ru/events/ya-subbotnik-2025-12-06

Мелихова в живую посмотрим

🦊 Привет, это Фронти!

Неделя выдалась насыщенной! Сегодня у нас дайджест #25, и этот выпуск полон открытий! 🎯

CSS Highlight API для подсветки без библиотек, зоопарк из 100+ JS-движков, ESLint для Baseline JavaScript, pnpm 10.21 с умной установкой Node, а Node.js теперь с официальными рекомендациями по безопасности!

Поехали смотреть, что принесла неделя! 🚀

🧪 HTML & Платформа
- Семантический HTML — объяснение "по-человечески", зачем нужны семантические теги и как они помогают скринридерам
- Миф про длину alt-текста — разбор того, что важнее не количество символов, а полезность описания

🎨 CSS & дизайн
- Список производительности веб-анимаций — какие анимации нагружают браузер, а какие почти бесплатные
- CSS Custom Highlight API — подсветка синтаксиса без тяжёлых библиотек, уже поддерживается во всех браузерах!
- Странности position: sticky — почему "липкие" элементы иногда ведут себя не так, как ожидаем
- CSS-миры без JS — целые "миры" с рельефом на чистом CSS, используя стековые гриды и 3D-трансформации
- width: 100% без overflow — новое значение stretch устраняет раздражающий оверфлоу без calc()
- SVG pathLength для анимаций — проще управлять анимацией линий в SVG
- Идеальные тултипы к углам — как аккуратно отрисовать "хвостик" подсказки

📦 JavaScript
- Зоопарк JS-движков — больше 100 JavaScript-движков в одной таблице с сортировкой по производительности!
- ESLint для Baseline JavaScript — автоматическая проверка, можно ли использовать фичу без полифиллов
- Таблица совместимости ECMAScript — проверка поддержки фич в движках и браузерах
- TC39 встреча #111 — плотная повестка по будущим фичам JS
- Безопасный JavaScript — советы по защите от типичных атак
- Visual Types — визуальный гид по TypeScript через картинки и примеры
- Развитие GC в V8 — как сборщик мусора стал быстрее за последние годы
- Error chaining — использование Error.cause для цепочки причин ошибок

⚛️ React
* Не используйте useTransition повсюду — когда переходы помогают, а когда только усложняют код
* Your URL is Your State — как хранить состояние приложения в URL для шаринга и навигации
* nuqs — type-safe менеджер состояния через query-параметры
* Concurrent Hydration с useSyncExternalStore — правильная подписка на глобальное хранилище
* React Source Lens — выбрать компонент в браузере и открыть файл в редакторе

⚙️ Node.js & Backend
* Node.js Security Best Practices — официальные рекомендации по безопасности от самой команды Node
* Node.js v25.2.0 — type-stripping стал стабильным, можно запускать TS без сборки!
* Bun v1.3.2 — альтернатива Node.js и npm в одном инструменте
* State of Node.js 2025 — получасовой доклад от Matteo Collina о состоянии платформы
* Изменения в безопасности npm-токенов — классические токены больше нельзя создавать
* Массовое тестирование пакетов против свежих сборок Node — автоматическ

🌐 Браузеры
- 32 года Mosaic — первому популярному графическому браузеру уже больше 32 лет! 🎂
- GitHub отказывается от "тостов" — убирают всплывающие уведомления из-за проблем с доступностью 🚫
- Polypane с код-агентами — DevTools можно связать с ИИ-агентами для автоматизации 🤖
- Новый маскот Firefox — знакомьтесь, "Kit" 🦊
- Horizon — текущий вид неба в виде CSS-градиента, обновляется через meta refresh 🌅

Ещё больше новостей читайте в полном выпуске!

🦊 Лисья шутка недели: «CSS Highlight API — теперь даже подсветка синтаксиса подчиняется CSS! Но position: sticky всё равно не объясняет, почему мой код иногда "прилипает" к багам» 😅

Полный выпуск читайте на 👉 https://frontend-weekly.ru/weekly-digest-25/

Custom media queries

Рассказал про кастомные медиавыражения в CSS на хабре https://habr.com/ru/articles/966950/

@custom-media --mobile (min-width >= 480px);

.text {
  font-size: 20px;
}

@media (--mobile) {
  .text {
    font-size: 24px;
  }
}

или даже с CSS Nesting

@custom-media --mobile (min-width >= 480px);

.text {
  font-size: 20px;

  @media (--mobile) {
    font-size: 24px;
  }
}

Сегодня я весь день убил на знакомство с WebView

Я особо с ним никогда не сталкивался. Лишь читал в статьях. Итогом сегодняшнего дня стало следующее знание:
- локальные ссылки типа /about - работают в вебной части(на фронте)
- остальные ссылки регулирует WebView и если он не поймёт ссылку, то просто ничего не сделает. Ссылка просто не переведёт никуда, даже в браузер, например Safari
- Диплинки типа mysuperapp://search, также контролируются WebView
- Любые внешние ссылки ya.ru, также контролируются WebView

Всё что под контролем WebView можно смело отдавать мобильщикам. При этом в Андроиде всё прекрасно работает, а вот в iOS нужен разработчик по мобилкам, который докавыряет ссылки и напишет обработчики.

PS: выпуску быть. Уже кашеварится

🦊 Привет, это Фронти!

Встречайте дайджест #26! 🎉

Masonry наконец-то в CSS, Angular 21 с сигналами, `range`-синтаксис для container queries,`width`-анимации быстрее, Node type stripping стабилен, и 76k тестов мигрировали!

Что интересного произошло на этой неделе? 🚀

🎨 CSS & дизайн
* Masonry наконец-то в CSS! Рабочая группа договорилась использовать display: grid-lanes для masonry-сетки — без JS-библиотек! 🧱
* width-анимации быстрее: в Chrome Canary анимация width и height больше не всегда уходит в главный поток — можно анимировать на compositor-слое! ⚡
* Range-синтаксис для container queries: вместо @container (width >= 400px) and (width <= 800px) теперь можно писать @container (400px <= width <= 800px) — красиво! 📏
* Отладка CSS Gamepad API через CSS Layers — визуально подсвечиваем состояние кнопок геймпада прямо в интерфейсе 🎮


📦 JavaScript
* Что обсуждали на 111-й встрече TC39: Iterator Sequencing дошёл до stage 4, новые паттерны для коллекций и промисов, Error.captureStackTrace на stage 2 📈
* Brimstone — новый JavaScript-движок на Rust, покрывает ~97% спецификации 🔥
* Angular 21: большой релиз с сигналами, headless-компонентами, MCP-сервером для AI-воркфлоу и Angular AI Tutor! Можно пройти игровой тур по новым возможностям ⚡

⚛️ React и экосистема
* Опрос «State of React 2025» запущен — расскажите, какими библиотеками пользуетесь! 📊
* Tooltip Components Should Not Exist — Dominik (TkDodo) спорит с подходом «делаем универсальный <Tooltip /> и тащим везде». Тултипы — это поведение, а не компонент! 💡
* Web-платформа против React: что показывают ИИ-модели — напоминание думать сначала про нативные API, а потом про Next.js 🌐
* Инкапсулируйте как можно больше состояния в компоненте — базовая, но важная практика для начинающих ✅
* CSS Grid в React Native (возможно) скоро — команда экспериментирует с поддержкой 🎯


⚙️ Node.js & Backend
* Node.js 25.2.1: type stripping пометили как стабильный — теперь все крупные рантаймы официально умеют работать с TypeScript "из коробки"! 🎯
* Node.js 24.11.1 (LTS) — патч-релиз, который чинит баг в Buffer.allocUnsafe 🔧
* Как развивался сборщик мусора в V8 за последние годы — низкоуровневые детали для тех, кто пытался понять GC-стопы 🗑️


🌐 Браузеры
* Шесть вещей, которые вы могли не знать о DevTools в Chrome — неочевидные возможности, которые экономят время: console.time, наблюдение за DOM, запись действий 🔍
* Старые технологии в браузерном стеке — напоминание про XPath и как комбинировать его с CSS 🛠️
* Firefox наконец-то добавит поддержку настраиваемых горячих клавиш — фича, которую просят с 2004 года! 🦊
* Google представил модель Gemini 3 Pro — особенно хорошо справляется с задачами типа «сверстай страницу по макету» 🤖
* Mozilla поделилась, как они «добавляют ИИ по-своему» в Firefox — поиск баланса между полезными фичами и навязчивыми AI-интеграциями 🧠


⚒️ Инструменты и библиотеки
* pnpm 10.23 — быстрый и экономный менеджер пакетов продолжает эволюцию 📦
* ESLint Plugin for Baseline JavaScript — победитель Baseline Tooling Hackathon, подсвечивает фичи JS моложе вашего Baseline-таргета ✅
* Astro 5.16, Webpack Bundle Analyzer 5.0, Inquirer.js 13.0 (теперь только ESM), Globby 16.0, Marked.js 17.0 — обновления инструментов 🛠️
* VS Code 1.106, Git 2.52, Postgres в PlanetScale за $5/мес — обновления дев-инструментов 💻

Ещё более 100 новостей ждут вас в полном выпуске!

🦊 Лисья шутка недели:
— Что сказал Node.js, когда type stripping стал стабильным?
— "Теперь я официально умею выбрасывать типы, но делаю это элегантно!" 🎯

Полный выпуск читайте на 👉 https://frontend-weekly.ru/weekly-digest-26/

Что стало Widely available в Baseline в октябре 2025

Коротко:
- Canvas: createConicGradient()
- Canvas: roundRect()
- HTML: inert
Из списка самый интересный это inert.

Длинно: https://habr.com/ru/articles/970142/

В начале декабря расскажу про ноябрь. Там вы узнаете, что color, color-mix и oklch - уже можно начинать использовать в проде

Что стало Widely available в Baseline в ноябре 2025

Коротко:
- color() — функция для работы с цветовыми пространствами (Display P3, Rec.2020 и др.)
- color-mix() — смешение цветов в заданном цветовом пространстве
- Compression Streams API — нативное сжатие и распаковка данных (gzip, deflate)
- :nth-child(… of <selector>) — улучшенный псевдокласс для точного выбора элементов
- Oklab и OkLCh — восприятие-ориентированные цветовые пространства
- WebRTC: RTCPeerConnection.sctp — доступ к информации о SCTP-транспорте
- Lab и LCH — научно обоснованные цветовые пространства CIE

Длинно: https://habr.com/ru/articles/970540/

Следующий выпуск уже в январе 2026 года 😱

🦊 Привет, это Фронти!

Встречайте дайджест #27! 🎉

WebGPU везде, CSS Subgrid работает, range-синтаксис для style queries, React 19.2 с асинхронностью, Angular 21 вышел, Node type stripping стабилен, 6k тестов мигрировали с AI, и Vercel запустил React Native приложение!

Что интересного произошло на этой неделе? 🚀

🧪 HTML и Платформа
* WebGPU теперь поддерживается везде! Современный API для работы с графикой и вычислениями на GPU прямо в браузере — гораздо мощнее WebGL и доступен во всех основных браузерах 🚀
* Web Install API доступен для тестирования в Edge — позволяет веб-приложениям запрашивать установку на устройство (как PWA) прямо из браузера 📱

🎨 CSS и дизайн
* CSS Subgrid работает везде! Мощное расширение CSS Grid, которое позволяет вложенным сеткам наследовать структуру родительской сетки — теперь во всех основных браузерах!
* Range-синтаксис для style queries: теперь, как и в медиа- или контейнерных запросах, можно использовать диапазоны значений (например, min-width и `max-width`) — открывает новые возможности для адаптивных компонентов
* Ключевые кадры как токены: стандартизация анимаций — как создать набор переиспользуемых «токенов анимации», чтобы они выглядели одинаково во всём проекте
* grid-template-areas делает код визуальным — описываем сетку буквально «рисуя» макет с помощью имён областей, код становится понятным даже без комментариев
* Изменения в overscroll-behavior в Chrome 144 — поведение прокрутки за пределами контента теперь регулируется иначе, важно для мобильных интерфейсов
* Черновик CSS Backgrounds Module Level 4 — первая официальная версия нового стандарта для фона в CSS, в будущем появятся новые способы управления градиентами и изображениями 🖼️

📦 JavaScript
* Более 150 алгоритмов и структур данных на JavaScript — проект с открытым исходным кодом демонстрирует реализацию популярных алгоритмов и структур данных, доступен на 18 языках, включая русский 📚
* Неравенство в производительности веба в 2026 году — Алекс Расселл показывает, насколько сильно различаются условия использования веба и призывает не забывать о пользователях с медленными устройствами и сетями 🌐

⚛️ React и фреймворки
* React 19.2: Асинхронность теперь повсюду — долгожданная поддержка асинхронных операций «везде» от сервера до клиента, важный шаг к более предсказуемой работе с асинхронным кодом
* Зачем использовать React на фронтенде? — Jeremy Keith ставит под сомнение необходимость React именно на клиентской стороне, предлагая более лёгкие решения для некоторых задач 🤔
* Angular 21 вышел! Большой релиз с улучшениями производительности и новыми API, представление нововведений оформлено в стиле ретро-игр

⚙️ Node.js и Backend
* Как лето в Абруццо помогло внедрить «очистку типов» в Node.js — личная история Марко Ипполито о реализации type stripping, теперь функция официально считается стабильной!
* Возвращение атаки Shai Hulud 2.0: новый виток цепной атаки через npm — злоумышленники заражают популярные пакеты, которые крадут учётные данные GitHub и npm. Будьте бдительны!
* Node.js v20.19.6 (LTS) — обновление включает новые корневые сертификаты, обновление OpenSSL и официальное упразднение приоритезации в HTTP/2
* GitHub теперь сканирует секреты даже в Gist'ах — даже «неприватные» Gist-посты не являются полностью закрытыми, GitHub уведомляет провайдеров о найденных токенах

⚒️ Инструменты и библиотеки

* pnpm 10.23 — быстрый и экономный менеджер пакетов продолжает эволюцию
* Recharts 3.5, React Virtuoso 4.15.0, React Chrono 3.3 — обновления популярных библиотек
* Gluegun, tshy 3.1, Glob 13, is-online 12.0, open v11.0 — обновления инструментов для разработки
* Chroma.js 3.2, swc4j 2.0, Vuetify 3.11, Fable 4.28.0 — обновления дев-инструментов

Ещё более 100 новостей ждут вас в полном выпуске!

🦊 Лисья шутка недели:

— Что сказал Node.js, когда type stripping стал стабильным?
— "Теперь я официально умею выбрасывать типы, но делаю это элегантно!" 🎯

Полный выпуск читайте на 👉 https://frontend-weekly.ru/weekly-digest-27/

is - атрибут тега 🤯

не путать с селектором `:is()`

Путешествуя по бескрайним просторам веба, иногда натыкаюсь на странные возможности.
А вы знали, что в HTML есть глобальный атрибут `is`? 😲
Я до вчерашнего дня не знал!

Работает он во всех браузерах с 2018 года, кроме Safari.

С помощью is и JavaScript можно расширять стандартные HTML-элементы, не создавая полностью новые теги.

Пример из спецификации:

class MyButton extends HTMLButtonElement {
  constructor() {
    super(); // обязательно первым!
    this.addEventListener('click', () => {
      console.log('MyButton clicked!');
    });
  }

  connectedCallback() {
    console.log('MyButton подключён к DOM');
  }
}

// Регистрируем как «customized built-in» элемент
customElements.define('my-button', MyButton, { extends: 'button' });

А использовать его можно так:

<button is="my-button">Жми меня!</button>

Где это можно применить я пока не знаю, но видимо не один я такой, так как масштабного распространения фича не получила

Сегодня иду на я.субботник в Питере. У вас есть возможность сходить онлайн

https://events.yandex.ru/events/ya-subbotnik-2025-12-06

🦊 Привет, это Фронти!

Пока Коля шастает по митапам, я приготовил новый выпуск. Встречайте дайджест #28! 🎉

🎄 Адвент-календари для веб-разработчиков, Masonry нативно в CSS, JavaScript исполнилось 30 лет, TypeScript 7 будет на Go (10× быстрее!), критическая уязвимость в React Server Components, атака на Next.js, Vite 8 Beta, Baseline важен, CSS-in-JS плохая идея, и pnpm 10.24 быстрее!

Что интересного произошло на этой неделе? 🚀

🎄 Декабрь — время адвент-календарей!

🧪 HTML и Платформа
* Что такое Baseline и почему это важно? Проект Baseline от Google фиксирует набор веб-фич, которые уже поддерживаются всеми основными браузерами. Новая серия статей на web.dev показывает, как использовать эти возможности на практике — например, для создания слоистых UI-паттернов


🎨 CSS и дизайн
* Masonry: Больше не нужна библиотека! Браузеры наконец-то научились делать «кирпичную» вёрстку без JavaScript.
* Почему CSS-in-JS — плохая идея? Автор утверждает, что CSS-in-JS принёс новые сложности: плохую производительность, увеличение размера бандлов и путаницу в отладке. Статья предлагает вернуться к «чистому» CSS и использовать современные подходы вроде CSS-слоёв и scope'ов
* Как делать не квадратные блюры на изображениях — Ана Тудор показывает, как создавать эффект размытия вокруг изображения, даже если оно не квадратное, используя только CSS
* Как правильно фиксировать позицию при открытом диалоге — Джефф Грэм предлагает простое решение, чтобы отключать прокрутку, но не терять макет при появлении модального окна
* Как избежать сдвига макета из-за скроллбара — Амит Мерчант делится CSS-хаком, который предотвращает «прыжки» страницы при появлении и исчезновении вертикального скроллбара
* Якорное позиционирование и IMCB — Брамус Ван Дамме объясняет, как работает новая CSS-техника якорного позиционирования через position-area и inset

📦 JavaScript
* JavaScript исполнилось 30 лет! В декабре 1995 года Netscape и Sun Microsystems официально представили язык, изначально названный Mocha, а затем LiveScript. За три десятилетия он стал основой веба — от простых интерактивных элементов до приложений на сервере, в мобильных устройствах и даже на микроконтроллерах

TypeScript
* TypeScript 7 будет на 10× быстрее благодаря Go! Команда TypeScript работает над двумя крупными релизами: версия 6.0 станет последней, написанной на JavaScript, а 7.0 — первой, полностью переписанной на Go. Это обещает ускорение компиляции до 10 раз

⚛️ React и фреймворки
* Критическая уязвимость в React Server Components — в некоторых версиях React (v19.0, 19.1.0, 19.1.1 и 19.2.0) обнаружена серьёзная уязвимость, позволяющая выполнять произвольный код на сервере (RCE). Команда React выпустила срочные обновления: React 19.0.1, 19.1.2 и 19.2.1 — обязательно обновитесь, если используете RSC!
* React Router добавляет поддержку React Server Components — Kent C. Dodds рассказывает о том, как React Router внедряет поддержку RSC. Это пока экспериментальная функция, но она уже почти готова к использованию
* Атака на Next.js за $0.0001 — описана уязвимость, позволявшая перегружать серверы Next.js. Проблема уже исправлена: обновитесь до Next.js 15.5.5 или 16+
* «Новая архитектура» React Native теперь основная — участники команды React Native объясняют, почему новая архитектура теперь стала стандартом
* Vite 8 Beta: сборка на Rolldown — первая бета-версия Vite 8, использующая новый бандлер Rolldown, обещает значительно ускорить сборку в продакшене и улучшить расширяемость инструмента

Ещё более 100 новостей ждут вас в полном выпуске!

🦊 Лисья шутка недели:
— Что сказал JavaScript, когда ему исполнилось 30 лет?
— "Я всё ещё молод душой, но уже достаточно зрелый, чтобы управлять всем интернетом!" 🎯

🦊 Важное объявление от лиса: Ближе к новому году количество новостей в дайджестах будет сокращаться — все авторы начинают готовиться к отдыху и праздникам. Но мы всё равно будем радовать вас самыми важными и интересными новостями! 🎄

Полный выпуск читайте на 👉 https://frontend-weekly.ru/weekly-digest-28/