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

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

Chrome экспериментирует с declarative partial updates

Chrome 148 начал пробовать Declarative Partial Updates за флагом. Идея в том, чтобы часть динамического интерфейса описывать прямо в HTML: <template for> помогает повторять разметку без ручного JavaScript-шаблонизатора, а setHTML() и streamHTML() позволяют безопаснее вставлять и стримить HTML-блоки в DOM. Для экспериментов уже есть полифилы для <template for> и setHTML/streamHTML, так что можно посмотреть на подход до появления стабильной поддержки.

Доступность и Web Components снова требуют аккуратности

Manuel Matuzovic объясняет, почему не стоит ставить aria-label на обычные div и span. У таких элементов нет понятной роли для вспомогательных технологий, поэтому подпись может не сработать или сработать по-разному в разных браузерах и скринридерах.

Scott Riley показывает практичный путь к дизайн-системам на Web Components. Главная польза подхода в том, что компоненты можно использовать в разных фреймворках, а не переписывать кнопки, поля и карточки отдельно для React, Vue или Svelte.

• Firefox 151 получил поддержку Web Serial API, поэтому веб-приложение может подключаться к устройствам через последовательный порт: например, к микроконтроллерам, 3D-принтерам или лабораторному оборудованию.
• Jake Archibald заметил баг Chrome с <input type="number">, из-за которого значение может неожиданно измениться. Исправление ожидается в Chrome 150.
• Команда Firefox UX рассказала, какие решения стоят за новым дизайном Firefox: это хороший взгляд на то, как браузерный интерфейс проектируют для очень разных пользователей.
• Vivaldi выпустил крупнейшее обновление дизайна десктопного браузера с заметной переработкой внешнего вида и поведения интерфейса.
• WordPress 7.0 вышел под кодовым именем Armstrong. В обзоре новинок WordPress 7.0 отдельно выделяют, что AI-возможности остались необязательными.

🎨 CSS и дизайн

Современное центрирование в CSS стало богаче, но не проще на автомате

Temani Afif разобрал состояние CSS-центрирования в 2026 году. Сейчас уже не обязательно вспоминать старые хаки с position и transform: для многих задач хватает grid, flexbox, place-content и новых возможностей вроде anchor positioning. Но важная мысль прежняя: сначала нужно понять, что именно центрируется - текст, один блок, группа элементов или привязанный к другому элемент интерфейс.

Patrick Brosset посмотрел на результаты прошлогоднего опроса и написал, чего все еще не хватает CSS Layout. Статья показывает CSS не как набор отдельных свойств, а как язык для решения реальных задач: сетки, выравнивание, адаптивность и контроль сложных компоновок.

Анимации, переходы и математические раскладки получают новые приемы

Josh Comeau сравнил CSS и JavaScript для анимаций. Простые переходы состояния часто удобнее делать на CSS, а JavaScript нужен там, где анимация зависит от данных, жестов, времени или сложной логики. Главное не выбирать инструмент по привычке, а смотреть на конкретную задачу.

В CSS-Tricks вышла вторая часть про cross-document view transitions на сотнях элементов. Нативные переходы между страницами выглядят магически, но на больших интерфейсах приходится продумывать имена элементов, порядок анимаций и то, какие части страницы вообще стоит связывать между собой.

• Открылся опрос State of CSS 2026. В этом году он короче и сфокусирован на самых важных возможностях, поэтому его проще пройти и полезнее использовать как карту современного CSS.
• В Smashing Magazine показали математические раскладки через sibling-index() и sibling-count(). Эти функции помогают стилизовать элемент с учетом его позиции среди соседей и общего количества элементов.
• font-size-adjust calculator подбирает значение для CSS-свойства font-size-adjust: загружаете шрифт, а инструмент считает метрику, которая помогает сделать fallback-шрифты визуально ближе к основному.
• Tailwind CSSTree добавляет синтаксис CSSTree в Tailwind-проекты и совместим с ESLint CSS Plugin. Это полезно, если нужно разбирать, проверять или генерировать CSS более строго.
• dev.css дает готовые базовые стили для обычного HTML, вдохновленные new.css. На демо-странице видно, как простой документ становится аккуратнее без полноценной дизайн-системы.

📦 JavaScript

asm.js уходит в историю Firefox

Mozilla рассказала, что Firefox в будущем удалит asm.js. Когда-то asm.js помогал запускать производительный код в браузере до появления WebAssembly, но теперь движок SpiderMonkey уже отключил специальные оптимизации по умолчанию. Для современных проектов вывод простой: если нужен низкоуровневый быстрый код в браузере, смотреть стоит в сторону WebAssembly.

JavaScript-кроссворд проверяет знание странностей языка

JS Crossword - головоломка, где все ответы являются JavaScript-выражениями. Она хорошо напоминает, что в браузере есть window, числа можно записывать разными способами, присваивание возвращает значение, а tagged template literals позволяют вызывать функции необычным синтаксисом.

• TC39 провел очередную встречу комитета. Подробный отчет еще ожидается, но это место, где предложения языка двигаются между стадиями и постепенно становятся будущим JavaScript.
• Cassidy Williams описала простой алгоритм кластеризации списков. Это легкий вход в тему группировки похожих элементов без тяжелой математики.
• Apache ECharts 6.1 обновил библиотеку для графиков и визуализаций; посмотреть возможности можно в демо ECharts.
• Perspective 4.5 обновляет компонент для аналитики и визуализации больших, в том числе потоковых, наборов данных.
• Partytown 0.14.0 помогает переносить тяжелые сторонние скрипты в Web Workers, чтобы они меньше мешали основному UI-потоку.
• Пакеты @atproto TypeScript SDK были пересобраны и теперь поставляются как ESM.

⚛️ React и фреймворки

TanStack Router и TanStack Query лучше разделяют маршруты и данные

Dominik Dorfmeister показал, как связать TanStack Router с TanStack Query. У роутера кеш обычно привязан к конкретному маршруту, а Query хранит данные глобальнее, поэтому она лучше подходит для информации, которая нужна на нескольких страницах. В статье объясняется, как передать QueryClient в контекст роутера, отключить лишнее кеширование роутера и запускать загрузку данных в loader, чтобы компоненты потом читали результат через useSuspenseQuery.

Если вы еще не смотрели в сторону этого роутера, начните с текста The Beauty of TanStack Router, а затем уже переходите к документации TanStack Query.

React исполнилось 13 лет, и споры вокруг него никуда не делись

React впервые вышел 29 мая 2013 года, и к 13-летию David Bushell собрал язвительный архив жалоб в материале Does Anybody Actually Like React?. Это не столько релизная новость, сколько зеркало экосистемы: React одновременно остается стандартным выбором для многих команд и продолжает раздражать тех, кто устал от его сложности. Обсуждение быстро разрослось на Hacker News.

React Router 7.16 готовит проекты к v8

React Router 7.16.0 стабилизирует флаг future.v8_trailingSlashAwareDataRequests и предупреждает о будущих флагах v8, которые вы еще не включили. Это мягкий способ заранее увидеть изменения поведения, пока проект еще не переехал на следующую мажорную версию.

React-производительность начинается с понимания кадра

Rachel Kaufman опубликовала слайды React at 60 FPS. Там собраны приемы для интерфейсов с живыми данными и анимацией: Canvas, requestAnimationFrame, WebSockets и React.memo. Хороший материал, если хочется понять, почему “просто обновлять state чаще” быстро приводит к дерганому UI.

• В документации TanStack Start появился подробный гайд по deferred hydration: можно откладывать гидратацию частей страницы, которые пользователь пока не видит или не трогает.
• В статье почему автор ушел с Next.js и RSC к обычному SPA и отдельному backend хорошо видно, что серверные компоненты не обязаны быть правильным ответом для каждого продукта.
• WorkOS выпустил гайд по аутентификации в TanStack Start, где разбирается современный поток входа для приложений на этом фреймворке.
• Matt Huggins показал, как собрать predictive text input в React: поле ввода, которое заранее предлагает продолжение текста.
• Storybook 10.4 добавил first-class поддержку TanStack React и сценарии, где агент помогает настроить Storybook в сложном приложении. Storybook остается удобной отдельной средой для проверки компонентов без запуска всего продукта.
• React Data Table - адаптивная таблица с сортировкой и пагинацией из коробки. Релиз v8.3 сфокусирован на локализации, а код доступен в репозитории компонента.
• pip-it-up позволяет вынести любой React-компонент в плавающее Picture-in-Picture-окно; поведение можно посмотреть в живых примерах.
• Spoiled 0.5 скрывает контент под эффектом “спойлера” из частиц, пока пользователь не решит его раскрыть. Код лежит в репозитории Spoiled.

📱 React Native

• React Native Reanimated 4.4 добавил новый CSS animation engine на iOS: анимации могут исполняться через Core Animation, а не через постоянные JS-обновления.
• React Native Gesture Handler 3.0 переехал на New Architecture и получил новый Touchable-компонент для работы с нативными жестами.
• Hot Updater помогает делать self-hosted over-the-air обновления React Native-приложений, чтобы доставлять часть изменений без нового релиза через магазин приложений.

📘 TypeScript

• Kysely 0.29.0 обновил type-safe SQL query builder. В релизе появились compile-time table scoping, типовой контроль read-only доступа и отмена запросов через AbortSignal; подробнее изменения описаны и в Node-подборке Kysely 0.29.0.
• TypeSQL 0.24 генерирует типобезопасные TypeScript API из SQL-запросов и поддерживает MySQL, Postgres и SQLite.
• Svader 1.0 позволяет создавать GPU-rendered Svelte-компоненты, но пишет их в привычном TypeScript/JavaScript-стеке.

⚙️ Node.js

Deno 2.8 резко приблизился к Node.js-экосистеме

Deno 2.8 команда называет самым большим minor-релизом проекта. Главная цифра - совместимость с Node.js выросла с 42% в Deno 2.7 до 76.4% в 2.8, а префикс npm: больше не нужен при добавлении и установке пакетов. В отдельной заметке релиз описан как Deno 2.8 с 76% совместимости Node.js, что важно для команд, которые хотят попробовать Deno без полного отрыва от npm-мира.

Внутри релиза много практичных деталей: заметные ускорения производительности, улучшения поддержки Web API, стабильный OffscreenCanvas, поддержка module.registerHooks(), просмотр сетевого трафика Deno в Chrome DevTools, встроенный CPU profiler, поддержка import defer, V8 14.9 и TypeScript 6.0.3. Еще появились команды audit fix, pack и why, которые делают Deno ближе к привычному пакету инструментов вокруг Node.js.

npm усиливает публикацию и установку пакетов

npm запустил staged publishing: новая версия пакета получает период проверки перед публикацией в реестр. Поддержка появилась в npm 11.15.0, а pnpm 11.3 добавил pnpm stage, trustLockfile, команды pkg, repo, set-script и другие улучшения. Параллельно вышел npm 12.0 prerelease.

GitHub также описал новые npm-флаги --allow-*, которые ограничивают, откуда npm может брать пакеты. А npm 11.16.0 добавил первые предупреждения для opt-in политики install scripts через allowScripts; подробности есть в отдельном материале про защиту установки зависимостей. Это все про одну проблему: зависимость может запускать код при установке, поэтому пакетному менеджеру нужны более явные правила доверия.

Mini Shai-Hulud снова напомнил о рисках supply chain

Microsoft опубликовала анализ компрометации Mini Shai-Hulud, связанной с вредоносными npm-пакетами. Это продолжение истории про цепочку атаки Mini Shai-Hulud, где опасность не в одном пакете, а в том, как быстро зараженные версии могут разойтись по дереву зависимостей. Для обычного проекта это аргумент в пользу lockfile, осторожного обновления зависимостей и контроля install scripts.

Node.js 24.16 LTS принес полезные стабильные улучшения

Node.js 24.16.0 LTS добавил crypto.randomUUIDv7(), поддержку hex-цветов в util.styleText и рандомизацию порядка тестов во встроенном test runner. Если Node 26 пока слишком свежий для продукта, LTS-ветка все равно продолжает получать новые удобные API.

В release-подборке также отметили Node.js v26.2.0 Current. Current-ветка полезна для раннего знакомства с новыми возможностями, а LTS - для проектов, где важнее предсказуемость обновлений.

Streams в Node.js могут течь даже с pipeline()

В разборе production playbook для утечек Node.js streams показано пять сценариев, где код проходит тесты, но ломается под реальным трафиком: клиент отключился, таймаут остановил ответ, а upstream-запрос продолжил жить, или backpressure не сработал так, как ожидалось. Для базы можно сначала прочитать вводный материал про backpressure в Node.js streams.

• Команда Node.js обсуждает, стоит ли пересмотреть требование ABI-стабильности для обновлений V8 в major-релизах после задержки Node 26 из-за V8 14.6.
• В Node 26 macOS на Intel x64 перешел в tier 2 платформ: если бинарные сборки на этой платформе не получится выпустить, это не будет блокировать остальные релизы. У Node есть отдельное описание уровней поддержки платформ.
• Dean Hume написал, как собрать собственный MCP-сервер на Node.js. Это полезно, если хочется подключать свои инструменты к AI-агентам через понятный протокол.
• ANSIS 4.3 - библиотека для ANSI-цветов и оформления текста в Node, Bun, Deno и devtools. В v4.3 появилась поддержка OSC 8 terminal hyperlinks, которые уже понимают многие терминалы.
• Helmet.js 8.2 обновил middleware для защиты Express-приложений через HTTP-заголовки вроде Content-Security-Policy и Strict-Transport-Security; это первый релиз Helmet v8.2 за год.
• Официальный codemod Node.js для миграции с Axios на fetch помогает автоматически заменить часть старого HTTP-кода на встроенный Fetch API. Сам подход с codemod полезен, когда однотипные правки нужно безопасно провести по большому проекту.
• pnpm 11.4 сфокусирован на надежности и безопасности пакетного менеджера.
• dns2 3.0 обновил чистую JavaScript-реализацию DNS-сервера и клиента.

🤖 ИИ

Modern Web Guidance уже критикуют за чрезмерное доверие к подсказкам

Google выпустил Modern Web Guidance - набор проверенных подсказок и навыков для AI-агентов, которые пишут веб-интерфейсы. На странице Google Modern Web Guidance видно, что подсказки покрывают производительность, доступность и UX. Но Adrian Roselli в статье Maybe Don’t Rely on Google’s Modern Web Guidance напоминает, что такие подсказки не заменяют понимание спецификаций и проверку результата человеком.

AI-разработка может ускорять код и одновременно выжигать разработчика

В статье AI-Assisted Engineers are Burning Out разбирается, почему постоянная работа с AI-инструментами может утомлять: нужно проверять больше кода, держать в голове намерения агента и быстро переключаться между задачами. Nolan Lawson смотрит на тему с другой стороны и пишет, как использовать AI, чтобы писать код медленнее, но лучше: просить объяснения, сравнивать варианты и не превращать модель в генератор бесконечных патчей.

Миграция Express в Next.js показана как агентный workflow

James O’Reilly показал миграцию Express-приложения на Next.js с помощью AI-агентов. В примере участвуют Next.js App Router и TypeScript, а интереснее всего то, что автор выложил reusable agent skills для модернизации Express. В контексте экосистемы Antigravity это хороший пример, как агентные инструкции превращают разовую миграцию в повторяемый процесс.

• Результаты State of Web Dev AI 2026 собрали ответы более 7000 разработчиков: какие инструменты они используют, чего боятся, где видят пользу и чем AI помогает кроме написания кода.
• Mauro Bieg задается вопросом, не ведет ли AI к новому lost decade фронтенда: когда инструменты ускоряют производство, но могут ухудшить понимание базовых вещей.
• Matthias Ott в эссе Ad infinitum и заметка Vale.Rocks продолжают разговор о том, как AI-ответы и скрейпинг меняют мотивацию делать открытые сайты.
• Flue - TypeScript-фреймворк от Astro для программируемых AI-агентов поверх Node.js: задачи, sandboxing, навыки и headless-запуск.

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

Tegaki превращает текст в анимированное письмо от руки

Tegaki умеет брать любой шрифт и текст, включая неанглийские языки, и превращать их в анимацию рукописного написания. В пакет уже встроены несколько handwriting-шрифтов, а в playground Tegaki можно быстро проверить результат без настройки проекта.

JSON4U помогает смотреть на JSON как на структуру, а не стену текста

JSON For You показывает JSON в виде графа или таблицы, умеет парсить вложенные значения, работать с jq и импортировать/экспортировать CSV. Для больших ответов API это удобнее, чем прокручивать один огромный объект; попробовать можно в онлайн-редакторе JSON4U.

Rspack помог Yelp вдвое ускорить сборку

Yelp описал миграцию с Webpack на Rspack, после которой build time сократился примерно вдвое. Rspack старается быть drop-in заменой webpack, но работает на Rust и быстрее справляется с тяжелыми проектами. Отдельно в статье полезны выводы про barrel files и re-exports: иногда медленная сборка начинается не с инструмента, а со структуры импортов.

Инструменты для документов, клавиатуры и подсветки стали свежее

DOCX 9.7 обновил зрелую библиотеку для генерации Word .docx из JavaScript на клиенте и сервере. Есть простой пример на CodePen, больше 100 example scripts, а Node-подборка отдельно показывает ту же библиотеку как DOCX для серверного JavaScript с демо и примерами.

tinykeys 4.0 - маленькая библиотека для keyboard shortcuts. API простой: описываете сочетания клавиш и функции, которые должны сработать, а на странице есть живые демо.

Обновления

• officeParser 7.1 разбирает office-файлы вроде docx, pptx, xlsx и odt в AST, чтобы с ними можно было работать программно.
• React Archer 5.0 рисует стрелки между DOM-элементами в React и теперь поддерживает React 19.
• Sugar High 1.2 обновил сверхлегкий подсветчик синтаксиса для JavaScript и JSX размером около 1KB.
• React Spring 10.1 выпустил небольшой релиз популярной библиотеки UI-анимаций.
• MUI X 9.3 обновил набор сложных React-компонентов вроде таблиц, датапикеров и графиков.
• Stéphanie Walter опубликовала La Carte Blanche - printable-карточку для UX-стратегии, которая помогает заранее проговорить цель проекта и не утонуть в хаосе требований.