Еженедельный дайджест #26: Новости фронтенда

🧪 HTML и Платформа

• «Accessible Names and Labels: Understanding What Works & What Doesn’t» — разбор того, как правильно задавать названия и подписи для элементов интерфейса: когда использовать aria-label, когда достаточно <label>, что происходит, если комбинировать несколько источников имени. Полезно, чтобы ваши формы и кнопки были понятны скринридерам и клавиатурным пользователям, а не только зрительно.

🎨 CSS и дизайн

• Рабочая группа CSS договорилась использовать значение display: grid-lanes для masonry-сетки. Это очередной шаг к нативной masonry-раскладке (когда карточки «перетекают» по колонкам, как в Pinterest), без JS-библиотек и штук вроде column-count.
• В Chrome Canary анимация width и height больше не всегда уходит в главный поток: при определённых условиях браузер может анимировать размер на compositor-слое. В статье Брамуса объясняется, когда это работает, какие свойства нужно комбинировать и почему это может сильно улучшить плавность анимаций.

Range-синтаксис для container queries и if()

Статья о Range-синтаксисе, который приехал в Chrome 142 для container style queries и функции if(). Автор показывает, как вместо громоздких сравнений вроде:

@container (width >= 400px) and (width <= 800px) { ... }

можно использовать более компактную запись в стиле математики:

@container (400px <= width <= 800px) { ... }

В примерах показывают:

• как комбинировать range-синтаксис с кастомными свойствами,
• как использовать if() для ветвления логики прямо в CSS,
• как подставлять значения через attr() и литералы.

Хороший материал, чтобы освежить в голове modern-CSS и начать думать о брейкпоинтах не как о «magic numbers», а как о понятных диапазонах.

• «Безопасное улучшение Web Components через самоуничтожающийся CSS» — идея в том, чтобы компонент был скрыт по умолчанию и показывался только тогда, когда стили реально загрузились и применились. Для этого используют небольшой CSS-хак, который убирает сам себя после срабатывания, не полагаясь на JavaScript.
• Отладка CSS Gamepad API через CSS Layers: автор показывает, как использовать @layer, чтобы визуально подсвечивать состояние кнопок геймпада прямо в интерфейсе — удобно для тестирования игр и интерактивных демо прямо в браузере.
• «Лучший способ сделать параллакс-эффект» — разбор современных подходов к параллаксу, которые не ломают производительность: использование transform, will-change и IntersectionObserver вместо старого скролл-лисенера на каждом кадре.
• Репозиторий css-extras с полезными CSS-функциями для @function — тут собрано 40+ кастомных функций (например, для цвета, типографики, математики), чтобы поиграть с новым @function-синтаксисом, даже если поддержка в браузерах пока неполная. Это хороший способ почувствовать, как в будущем можно будет выносить сложную логику из препроцессоров в чистый CSS.
• Инструмент Baseline Status for Video помогает тем, кто записывает обучающие видео: вы можете сгенерировать небольшой клип со статусом Baseline для нужной CSS-фичи (по данным MDN), а потом вставить его в ролик — зрителю сразу понятно, где и с каких версий работает показанная техника.

📦 JavaScript

Что обсуждали на 111-й встрече TC39

Комитет TC39 (тот самый, который придумывает новые фичи JavaScript) провёл 111-ю встречу. Конспекты появятся позже, но уже известно, какие предложения продвинулись по стадиям:

• Iterator Sequencing дошёл до stage 4 — это почти “готово к стандарту”. Помогает удобнее собирать несколько итераторов подряд.
• Joint Iteration, Iterator Join и Await dictionary of Promises двинулись на stage 2.7 — новые паттерны работы с коллекциями и промисами.
• Error.captureStackTrace, import .. with { type: "text" } и Object.keysLength достигли stage 2 — возможные будущие улучшения работы с ошибками, импортом ресурсов и объектами.
• Intl Unit Protocol на stage 1 — идея стандартизировать, как мы описываем единицы измерения (метры, килограммы и т.п.).
• Typed Array Find Within на stage 1 — по сути “умный indexOf” для typed-массивов.

Если вы путаетесь в стадиях, можно освежить в памяти, что значит каждая стадия TC39. В целом направление простое: JavaScript постепенно получает более мощные и удобные примитивы для работы с данными, ошибками и импортом.

• JavaScript in Depth — новая книга от James M. Snell — автор (участник TC39 и активный контрибьютор в экосистему Node) пишет глубокую книгу по JS для Manning. Финальный релиз запланирован на середину 2026, но уже доступны несколько глав в раннем доступе.

• Brimstone — новый JavaScript-движок на Rust — движок компактный, покрывает ~97% спецификации и всё ещё активно развивается. Для любителей низкого уровня и экспериментов с JS-runtime’ами. Для сравнения можно взглянуть на другие JS-движки.

Angular 21: большой релиз с сигналами, headless-компонентами и AI-тьютором

Google представила Angular v21 — крупное обновление фреймворка. Команда сделала релиз в виде небольшого ретро-квеста: можно пройти игровой тур по новым возможностям. Для нас, фронтендеров, главное:

• новый подход к формам на основе signals вместо старых API;
• MCP-сервер для AI-воркфлоу (интеграция с инструментами на базе LLM);
• библиотека headless-компонентов, сфокусированных на доступности (логика отдельно, разметку и стили пишете сами);
• Angular AI Tutor, который помогает быстрее вникнуть в экосистему.

Если вы давно не смотрели на Angular, сейчас хороший момент обновить картину мира.

⚛️ React

imgui-react-runtime: React + Dear ImGui + Static Hermes

imgui-react-runtime — это необычный способ собирать нативные приложения на React поверх легковесной C++-библиотеки GUI Dear ImGui и движка Hermes. Автор ранее показывал демо в X, а теперь выложил код.

Идея такая: вместо привычного браузера у вас ImGui-интерфейс, а всё UI-дерево описано React-компонентами. Можно попробовать, если хочется поэкспериментировать с десктопом/игрушками, не вылезая из экосистемы React.

Опрос «State of React 2025»

Команда Devographics запустила ежегодный опрос про экосистему React — State of React 2025. Если вы пишете на React в проде, это хороший повод рассказать, какими библиотеками пользуетесь, что нравится и чего не хватает.

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

Tooltip Components Should Not Exist

В статье **«Tooltip Components Should Not Exist» Dominik (TkDodo) спорит с привычным подходом «делаем универсальный <Tooltip /> и тащим его везде». Мысль простая, но важная для новичков:

• тултипы — это не самостоятельный виджет, а поведение конкретного элемента интерфейса;
• когда вы выносите всё в один огромный <Tooltip />, он перестаёт нормально учитывать контекст (фокус, доступность, роли, события).

Автор предлагает мыслить «поведениями», а не «магическими компонентами на все случаи» — полезное чтение, если вы только начинаете собирать дизайн-систему на React.

Переезд с Enzyme на React Testing Library

HubSpot поделились опытом миграции тестов в статье **«Moving Mountains: How We Migrated from Enzyme to React Testing Library». Они переписали больше 76 000 тестов c Enzyme на современный стек.

Для начинающих это хороший практический кейс:

• почему Enzyme устарел и чем он концептуально отличается от RTL;
• как автоматизировать часть миграции и не переписывать всё руками;
• как постепенно переносить тесты, не ломая прод.

Web-платформа против React: что показывают ИИ-модели

В заметке **«When Everyone’s a Developer, How Do We Promote the Web Platform Over React?» автор рассуждает, как современные ИИ-модели по умолчанию советуют «React + Next.js», даже когда достаточно возможностей браузера.

Для нас, фронтендеров, это мягкое напоминание:

• сначала думать про нативные API (form, dialog, <details>, Fetch, Web Components),
• и только потом тащить тяжёлую связку Next + React, если она действительно нужна.

Быстрый Tailwind-стайлинг в React Native с Nativewind

Статья **«Nativewind: Speeding up Styling in React Native» рассказывает, как NativeWind переносит концепцию Tailwind CSS в мир React Native.

Если вы новичок в RN:

• вы пишете классы в стиле Tailwind (bg-blue-500, flex-row и т.п.),
• Nativewind превращает их в стили React Native под капотом.

Это упрощает визуальную настройку и делает код более читаемым, если вы уже привыкли к Tailwind в вебе.

Инкапсулируйте как можно больше состояния в компоненте

Короткая заметка **«Encapsulate as Much State as Possible in Your Component» напоминает базовую, но важную практику:

• старайтесь хранить состояние как можно ближе к месту использования;
• не выносите useState «наверх» просто так;
• уменьшайте количество пропов, которые только «прокидывают» данные.

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

CSS Grid в React Native (возможно) скоро

Команда React Native экспериментирует с поддержкой CSS Grid — об этом кратко упоминается в заметке, что CSS Grid support может появиться в React Native.

Для нас это значит: в будущем можно будет использовать более привычный грид-лейаут и в RN, а не только flex-разметку.

⚙️ Node.js

Node.js 25.2.1: стабильный type-stripping и откат спорного изменения

Node.js 25.2.1 (Current) вышел сразу после версии 25.2.0, в которой type stripping пометили как стабильный. Это значит, что теперь все крупные серверные рантаймы официально умеют работать с TypeScript-кодом “из коробки” — они просто выбрасывают типы и запускают результат как обычный JS. Есть отдельный обзор, как все крупные рантаймы теперь поддерживают TypeScript.

В 25.2.1 при этом откатили одно изменение в поведении localStorage: попытка доступа могла выбрасывать исключение из соображений соответствия спецификации — но это оказалось слишком ломким для экосистемы, и эксперимент отложили до Node 26.

• Node.js 24.11.1 (LTS) — патч-релиз LTS-ветки, который чинит баг в Buffer.allocUnsafe. Если вы используете 24-ю ветку, стоит обновиться.
• Обновление по безопасности от OpenJS Foundation — короткий отчёт за октябрь 2025 по безопасности, в основном вокруг Node.js: уязвимости в зависимостях, процесс реагирования и т.д.

Как развивался сборщик мусора в V8 за последние годы

В статье «V8’s Garbage Collector Developments in Recent Years» разработчик V8 и JavaScriptCore рассказывает, как менялся GC в V8 за последние пару лет. Много низкоуровневых деталей: инкрементальный сбор мусора, оптимизации пауз, работа с большими хипами и т.п. Если вы когда-нибудь пытались понять, откуда берутся GC-стопы в Node-приложении, это хороший исторический и технический контекст.

---

Автоматическое обновление npm-секретов в GitHub Actions

После недавних изменений в безопасности npm многие CI-пайплайны для публикации пакетов сломались: токены теперь живут меньше и требуют более строгой настройки. В статье «Automated NPM Secret Rotation in GitHub Actions» показывают, как настроить автоматическую ротацию npm-токенов в GitHub Actions, чтобы не бегать вручную и не переходить пока на trusted publishing. Полезно, если у вас несколько пакетов и сложный релизный pipeline.

• Как «официально» помечать методы deprecated в Node — напоминают, что в Node есть утилита util.deprecate, которая логирует предупреждения при использовании устаревших функций. Удобно, когда вы эволюционируете публичное API или внутренние утилиты.
• «Tinyglobby: A Success Story in Modernization and Performance» — история того, как автор переписал утилиту для поиска файлов по glob-маскам на современный стек, улучшил производительность и упростил поддержку. Хороший пример “рефакторинга ради живучести” библиотеки.
• «The IndonesianFoods TEA Theft: Analyzing an NPM Spam Campaign» — разбор спам-кампании в npm: как выглядели пакеты, что они делали, как их обнаружили. Полезно, чтобы понимать, какие приёмы используют злоумышленники в экосистеме npm.
• «Several Tips for Secure Coding in JavaScript» — набор базовых, но важных практик по безопасному JS-коду: работа с вводом пользователя, управление токенами, обработка ошибок и т.д. Хороший чек-лист, если вы только начинаете обращать внимание на безопасность.

---

Electron против Tauri: что выбрать для десктоп-приложения

Команда, которая делает опенсорсный десктоп-клиент на JavaScript, описывает свой опыт в статье «Comparing Electron vs. Tauri for Building and Distributing a Desktop App». Они попробовали переписать приложение с Electron на Tauri, не отказываясь от JS/HTML в UI.

Ключевые выводы:

• Tauri даёт более лёгкие бинарники и меньший расход памяти за счёт нативного рантайма на Rust.
• Но экосистема Electron пока взрослее: больше готовых решений, документации и знакомых инструментов.
• В итоге проект остался в основном на JavaScript, но стал комфортнее в дистрибуции и обновлениях.

Хороший разбор, если вы как раз выбираете стек для десктопного клиента.

🌐 Браузеры

Шесть вещей, которые вы могли не знать о DevTools в Chrome

В первой части статьи «Six Things I Bet You Didn’t Know You Could Do With Chrome’s Devtools» и во второй части автор показывает неочевидные возможности DevTools, которые экономят много времени:

• работа с console.time и другими таймерами,
• наблюдение за DOM-изменениями,
• запись и повтор действий пользователя,
• более удобная работа с сетевыми запросами и логами.

Если вы обычно используете только вкладку Elements и Console, самое время пройтись по статье и «прокачать» свой дебаг-набор.

• «Старые технологии в браузерном стеке» — напоминание о том, что в браузере есть не только CSS-селекторы, но и XPath. Автор показывает, как комбинировать XPath с CSS в реальных задачах: например, когда сложная структура DOM делает CSS-селекторы громоздкими, XPath может оказаться проще.
• Firefox наконец-то добавит поддержку настраиваемых горячих клавиш — фича, которую пользователи просят с 2004 года. Для нас, фронтендеров, это скорее новость уровня «качество жизни», но приятно видеть, что старые запросы всё-таки доезжают до релиза.
• Google представил модель Gemini 3 Pro. Многие разработчики уже заметили, что она особенно хорошо справляется с задачами типа «сверстай страницу по макету» — можно отдавать ей дизайн и просить HTML/CSS-рывок. Это не повод забыть CSS, но хороший дополнительный инструмент в наборе.
• Mozilla поделилась, как они «добавляют ИИ по-своему» в Firefox, а кто-то в ответ написал заметку «Мне кажется, никто не хочет ИИ в Firefox, Mozilla». В контексте фронтенда это ещё один пример того, как браузеры ищут баланс между полезными фичами и навязчивым AI-интеграциями.

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

• pnpm 10.23 — быстрый и экономный менеджер пакетов продолжает эволюцию. Если у вас большой монорепозиторий, имеет смысл сравнить pnpm с npm/yarn, чтобы уменьшить время установки зависимостей и вес node_modules.
• Astro 5.16 — свежий минор для Astro, фреймворка для контент-сайтов и гибридных приложений. Обновления в основном вокруг DX и интеграций.
• Webpack Bundle Analyzer 5.0 — плагин для Webpack, который показывает содержимое бандла в виде интерактивной treemap-карты. Удобно, чтобы быстро увидеть, какие зависимости съедают больше всего килобайт, и решить, что можно выкинуть или заlazy-load’ить.
• PlayCanvas glTF Viewer 5.7 — просмотрщик 3D-моделей с поддержкой glTF 2.0 и PLY. Если вы работаете с 3D в вебе, удобно быстро чекать модели прямо в браузере.
• VueFinder — файловый менеджер-компонент для Vue 3 — готовый UI для управления файлами: предпросмотры, навигация по директориям, операции над файлами. Можно встроить в админку или внутренний инструмент.
• is-online 12.0 — утилита, которая проверяет, действительно ли есть доступ к интернету (а не просто “сетевое подключение”). Работает и в Node, и в браузере, использует несколько механизмов проверки.
• Neo.mjs 11.7 — фреймворк для быстрых “десктопных” веб-приложений с мультипоточностью. Заинтересует тех, кто делает сложные SPA и хочет поэкспериментировать с нетипичным стеком.
• Plotly.js 3.3 — мощная библиотека визуализации данных. Подходит для дашбордов, аналитики и научных графиков.
• Rockpack 7.0 — генератор стартовых React-приложений. Помогает быстро поднять проект с настроенным сборщиком и базовым стеком.

---

Inquirer.js 13.0: современные интерактивные CLI-опросники

Inquirer.js 13.0 — классическая библиотека для создания интерактивных CLI: вопросы, чекбоксы, выбор из списка, ввод паролей и т.п. В свежей версии:

• кодовую базу “осовременили” и полностью перевели на ESM (CommonJS больше не поддерживается);
• выкинули старые депрекейтнутые API;
• убрали стороннюю библиотеку цветов Yoctocolors и переключились на встроенный Node-инструмент styleText.

Если вы хотите сделать “человеческий” CLI для своего тулкита или генератора, Inquirer остаётся одним из самых удобных вариантов.

• Globby 16.0 — удобная обёртка над glob-масками. Даёте массив шаблонов — получаете список путей. Поддерживает отрицания и умеет учитывать .gitignore (теперь и в родительских директориях). Полезно для любых CLI, билд-скриптов и утилит, где нужно гибко выбирать файлы.
• node-libcurl 5.0 — биндинги к мощной библиотеке libcurl для Node. В свежем релизе подтянули libcurl до версии 8.17.0, а предсобранные бинарники теперь включают поддержку HTTP/3 на всех платформах. Хороший вариант, если стандартного fetch/http вам мало и нужны экзотические протоколы.
• Marked.js 17.0 — быстрый парсер и компилятор Markdown. Можно использовать и в браузере, и в Node, и как CLI. Подходит, если вам нужно конвертировать Markdown в HTML на лету или строить свой мини-рендерер документации.

---

• Поддержка TanStack Start на Vercel — теперь приложения на TanStack Start можно деплоить на Vercel «из коробки», без особых танцев.
• ZenPaint — милый пиксель-арт редактор, веб-ремейк классического MacPaint, написанный на React. Отличный пет-проект, чтобы посмотреть на сложный UI в React.
• React Player 3.4 — компонент для проигрывания видео с YouTube, Vimeo, Facebook и др.; есть живое демо.
• react-native-mmkv 4.0 — очень быстрый key/value-стор для React Native с низкоуровневым движком; для апдейта с прошлых версий пригодится гайд по миграции.
• React Stripe.js 5.4 — компоненты для интеграции Stripe.js и Stripe Elements в ваши React-формы.

Fumadocs — фреймворк документации для React

Fumadocs — фреймворк для создания сайтов документации, заточенный под React.

Основные моменты:

• умеет работать с Markdown и MDX;
• поддерживает Next.js, TanStack Start, Waku и React Router;
• есть режим «headless»: вы храните структуру и контент, а UI рисуете сами.

Для новичка это альтернатива классическим «док-темам» и генераторам. В статье отдельно напоминают, что Docusaurus остаётся ещё одним популярным вариантом в той же нише.

TanStack DB 0.5: запрос управляет синхронизацией

TanStack DB 0.5 — экспериментальная клиент-первая база данных с реактивными запросами.

Ключевая идея:

• вы описываете запрос в коде;
• этот же запрос используется, чтобы понять, какие данные нужно дернуть с сервера;
• обновления приходят инкрементально, а UI перестраивается очень быстро.

Для новичков это хороший пример современного подхода к данным: меньше ручных REST-вызовов, больше декларативных запросов поверх «умного» клиента.

ESLint-плагин для Baseline JavaScript

ESLint Plugin for Baseline JavaScript — победитель Baseline Tooling Hackathon. Плагин умеет подсветить места, где вы используете фичи JavaScript, которые моложе вашего целевого Baseline-таргета (набора широко поддерживаемых браузерами возможностей).

Практическая польза:

• вы настраиваете, какие браузеры поддерживаете;
• линтер подсказывает, если где-то проскочил слишком новый синтаксис/фича;
• меньше сюрпризов в старых браузерах.

Обновления дев-инструментов

• VS Code 1.106 — свежий релиз редактора: можно выделять удалённый код прямо в diff, «усыплять» навязчивые подсказки, улучшили команду «Go to Line», а Terminal IntelliSense теперь считается стабильной.
• Git 2.52 — среди новинок команда git last-modified, которая показывает последний коммит для каждого файла в директории.
• Postgres в PlanetScale за $5/мес — ребята, известные своим облачным MySQL, запустили недорогой managed-Postgres для небольших прод-проектов и пет-проектов.
• Статья о том, как скриптовать LibreOffice на JavaScript и даже собрать Wordle-клон внутри него — забавный пример того, где ещё можно применять JS, помимо браузера.

Обновления

• pnpm 10.22 — быстрый и экономный package-manager. Добавили опцию trustPolicyExclude, чтобы явно перечислить пакеты, которые нужно устанавливать даже при жёсткой политике доверия.
• MikroORM 6.6 — ORM на TypeScript для Node.js (Data Mapper, Unit of Work, Identity Map). В релизе стало больше контроля над фильтрами на отношениях и улучшена работа с приватными свойствами.
• OpenAI Node 6.9 — официальный SDK для Node, который теперь поддерживает модель GPT-5.1. Если вы завязываете приложение на OpenAI, стоит обновиться ради нового API.
• ESLint v10.0.0 Alpha 0 — ранний альфа-релиз следующего мажора. Можно посмотреть, какие breaking-changes нас ждут, и начать готовить конфиги.
• LogTape 1.2 — простая библиотека логирования для всех основных JS-рантаймов. В changelog можно посмотреть мелкие улучшения.
• pg-boss 12.2 — job-очередь на базе PostgreSQL для Node.js. Подходит, если у вас уже есть Postgres и не хочется поднимать отдельный брокер.
• Mercurius 16.6 — GraphQL-сервер поверх Fastify.
• FoalTS 5.1 — полнофункциональный Node-фреймворк на TypeScript “всё-в-одном”.