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

🧪 HTML и веб-платформа

Браузеры разрешат отключать блокировку прокрутки по одной оси

Новое CSS-свойство scroll-axis-lock: none включает немедленную диагональную прокрутку. Обычно браузер определяет главное направление жеста и временно «приклеивает» движение к вертикальной или горизонтальной оси. Для обычной страницы это удобно, но на карте, большой схеме или холсте мешает свободно двигаться в любую сторону.

Пока свойство работает только в Chromium 153 и новее, но неподдерживающие браузеры просто проигнорируют его. В дополнительном разборе scroll-axis-lock собраны подходящие сценарии и описана обнаруженная при тестировании ошибка.

Baseline помогает

Как с помощью Baseline найти лишние полифилы и сократить JavaScript. Автор предлагает проверять зависимости группами — интернационализацию, HTTP-клиенты, UI-примитивы и утилиты — и предупреждает, что современная замена не всегда легче старой: например, переход с Day.js на Temporal в некоторых проектах увеличит бандл.

• В эксперименте с HTML поверх WebSocket сервер отправляет готовые фрагменты интерфейса в обе стороны соединения. Так можно построить приложение с обновлениями в реальном времени и небольшим количеством клиентского JavaScript.
• Разбор масштабирования крошечных JPEG в Chrome объясняет, почему маленькая картинка может выглядеть в браузере иначе, чем ожидается, и какие этапы декодирования и растягивания влияют на результат.

🎨 CSS и дизайн

Пять CSS-свойств для более выразительной типографики

В практической подборке показаны приемы оформления текста через background-clip, box-decoration-break, letter-spacing и другие свойства. Из отдельных небольших эффектов можно собрать заголовки с градиентной заливкой, аккуратно оформить многострочный текст и точнее управлять расстоянием между буквами.

Переключателю темной темы достаточно двух состояний

Lea Verou предлагает не показывать пользователю сразу светлый, темный и системный режимы. Если текущая тема уже совпадает с настройкой системы, интерфейсу достаточно предложить переход к противоположной. Так обычный переключатель остается понятным, а системное значение все равно используется как начальное.

• В коротком руководстве улучшили читаемость текста с text-stroke, добавив к стандартной обводке несколько слоев и аккуратные края.
• Авторы Tailwind обсуждают, можно ли сделать его стандартную палитру доступнее, чтобы разработчики реже получали недостаточный контраст из коробки.
• Генератор Critical CSS принимает адрес страницы и извлекает минимальный набор стилей для ее первого экрана. Такой CSS можно загрузить раньше остальных стилей и быстрее показать основное содержимое.
• Опубликованы результаты исследования State of CSS 2026: в нем можно сравнить популярность возможностей языка, инструменты разработчиков и главные сложности в работе со стилями.
• Классическая заставка Windows получила CSS-версию Pipes. Вдохновением послужила история оригинальной заставки, а трехмерная сцена собрана на библиотеке cssGraphics и движке PolyCSS.

♿ Доступность

W3C обновил инструмент для отчетов о доступности

WCAG-EM Report Tool превращает результаты проверки продукта в структурированный отчет: помогает описать область аудита, выбранные страницы, найденные проблемы и общий результат. Инструмент обновили под методологию WCAG-EM 2, которая теперь подходит не только для сайтов, но и для других цифровых продуктов.

• Able Player — доступный HTML5-плеер для аудио и видео с плейлистами, субтитрами, управлением с клавиатуры и настройкой горячих клавиш.

📦 JavaScript

jsDelivr расширяет поддержку npm-пакетов в браузерном ESM

Технический разбор показывает, как jsDelivr преобразует npm-пакеты для загрузки через /+esm. Главная сложность — CommonJS: в нем зависимости и экспорты могут определяться динамически, поэтому превратить любой пакет в статический браузерный модуль автоматически не всегда просто.

Сам jsDelivr позволяет подключать библиотеки с CDN без отдельной сборки. Материал помогает понять, что происходит между опубликованным npm-пакетом и кодом, который в итоге выполняет браузер.

• Remy Sharp предлагает подключать обработчик как можно раньше и повторять действие после загрузки приложения, чтобы клик пользователя не потерялся на медленном соединении.
• devalue 5.9 сериализует больше встроенных типов JavaScript, чем обычный JSON.stringify, и подходит для безопасной передачи сложных данных.
• fuzzysort 4.0 выполняет быстрый нечеткий поиск, ранжирует приблизительные совпадения и позволяет настроить собственную формулу оценки.

🦕 Deno и Bun

Deno 2.9.5 экспериментирует с движком QuickJS

В Deno 2.9.5 появился экспериментальный QuickJS-бэкенд для deno compile и deno desktop. Он дает еще один способ упаковывать JavaScript-программы и настольные приложения, не полагаясь во всех сценариях на V8.

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

celld переносит идею Durable Objects в собственное хранилище S3

celld — самохостинговая реализация объектов с состоянием от команды Deno. Она объединяет V8, SQLite и формат репликации LTX, а координацию хранит в S3-совместимом бакете без отдельного слоя консенсуса. Исходный код celld уже доступен для изучения.

• Разработчики продолжают намекать на близкий выход Bun 1.4: в одном тизере показывают новый релиз, а в другом главным изменением называют совместимость с Node.js. Следить за выпуском можно на сайте Bun и в его официальном блоге. Создатель рантайма параллельно участвовал в исследовании гипотезы Римана с помощью ИИ.
• Belgie 0.40 встраивает окружение Deno с ограниченными разрешениями внутрь Python-приложения, чтобы безопаснее выполнять JavaScript.

📘 TypeScript

Yelp перенес 1,4 миллиона строк с Flow на TypeScript

Инженеры Yelp описали многолетнюю миграцию большого монорепозитория с Flow на TypeScript. Команде пришлось постепенно переводить сотни пакетов и какое-то время запускать оба анализатора типов. В результате покрытие типами выросло с 83% до 96%.

История полезна не только тем, кто еще использует Flow: она показывает, как разбивать масштабный технический переход на этапы и не останавливать разработку продукта. Ранее Yelp похожим образом рассказывал о миграции сборки с webpack на Rspack.

Необязательное поле неожиданно сломало типы middleware

В TypeScript-разборе объясняют, почему добавление второго middleware превратило ожидаемый тип результата в {}. Причиной оказался распространенный способ фильтровать ключи объекта: при необязательных свойствах в вычисления проникал undefined, и дальнейшие условные типы давали неожиданный результат.

Это наглядный пример того, что ошибка в сложном generic-типе может проявиться далеко от места, где она была заложена. Поиск лучше начинать с упрощения промежуточных типов и проверки каждого преобразования отдельно.

• Эксперимент с типом для ссылочной стабильности позволяет компоненту требовать заранее созданный массив или функцию и отклонять новый литерал при каждом рендере.
• scriptc компилирует TypeScript и JavaScript в нативные исполняемые файлы и WebAssembly, а неподдерживаемые динамические участки при необходимости запускает во встроенном QuickJS.
• tsnapi делает снимки экспортов и деклараций типов публичного API пакета, чтобы случайное несовместимое изменение обнаруживалось в тестах.

⚛️ React, Next.js и React Native

React Native 0.87 сделал строгий TypeScript API основным

В React Native 0.87 публичный JavaScript API теперь описывается через Strict TypeScript API, типы для которого генерируются прямо из исходников. Это уменьшает риск расхождения между реальным поведением фреймворка и ручными декларациями.

Сборщик Metro обновился до версии 0.87 и стал компактнее, а для iOS появилась экспериментальная интеграция со Swift Package Manager.

GTKX запускает React-интерфейсы как нативные Linux-приложения

GTKX 1.0 преобразует JSX в настоящие виджеты GTK4 и Adwaita без WebView. Приложение работает в обычном процессе Node.js, может использовать npm-пакеты и поддерживает Fast Refresh. Репозиторий GTKX содержит код и примеры.

Следом вышел GTKX 1.1 с командой gtkx deploy, которая собирает Flatpak, пакеты .deb и .rpm, а также AppImage для распространения приложения.

Next.js проверяет мгновенность переходов до ответа сети

Next.js 16.3 добавил Playwright-помощник instant(), а команда Vercel рассказала, как с его помощью ускорила навигацию в v0. Тест фиксирует то, что успело появиться на экране до завершения сетевого запроса, поэтому можно проверить не только итоговый результат, но и ощущение мгновенности интерфейса. Сам конструктор v0 использовали как рабочий пример.

• Preact 11 RC дает разработчикам возможность заранее проверить совместимость приложений с будущей основной версией.
• Biome 2.5.8 получил правило useReactCompiler, которое запускает React Compiler в режиме проверки и показывает несовместимые компоненты и хуки до включения компилятора.
• Обзор сканирования штрихкодов в React Native сравнивает доступные библиотеки, подходы к камере и ограничения платформ.
• React Native Connection пройдет 24 сентября в Париже и будет посвящена разработке мобильных приложений на React Native.
• Rollipop — экспериментальная замена Metro для React Native с прицелом на производительность и интеграцию с Rollup и Rolldown.
• kbar 1.0 добавляет в React-приложение палитру команд и поиска по нажатию Cmd+K; стабильный релиз поддерживает React 18 и 19.
• Liquid Gooey собирает готовые плавные «жидкие» эффекты для React-компонентов.
• React Hook Form 7.85 поддержал компонент <Activity> из React 19.2.
• В Motion 13.1 компонент Reorder научился переставлять элементы в нескольких измерениях, определять ось и учитывать RTL-направление; примеры библиотеки доступны на сайте Motion.
• Next.js 16.3.1 исправил повторные циклы prefetch, слишком раннее удаление кеша и устаревшие данные из headers() после большого релиза Next.js 16.3.
• Sonner 2.0.8 стал первым за год обновлением популярного компонента уведомлений; внешний вид и поведение можно проверить в демо Sonner.
• Набор Dot Matrix содержит больше 55 индикаторов загрузки на React и Tailwind, а исходники можно подключать через реестр shadcn.
• TermUI Registry предлагает больше 110 терминальных React-компонентов в стиле shadcn для библиотеки Ink.

🧱 TanStack

TanStack Table v9 стал модульнее и экономнее

TanStack Table v9 перешел на архитектуру, из которой сборщик может удалить неиспользуемые части. Состояние теперь хранится в TanStack Store, а точечная реактивность позволяет обновлять только зависимые части интерфейса.

Для таблиц с большим числом строк команда отдельно измерила снижение расхода памяти. Это важно для административных интерфейсов и аналитики, где таблица легко становится самым тяжелым компонентом страницы.

TanStack Form v2 полностью перестроил валидацию

TanStack Form v2 вышел в alpha после года обратной связи по первой версии. Вместо отдельного обработчика для каждого события проверки теперь образуют конвейер, где правило само указывает условие и момент запуска.

В новой архитектуре также улучшили типизацию и серверный рендеринг. Статус alpha означает, что API еще может меняться, но уже можно оценить направление и подготовить обратную связь.

🛰️ Другие фреймворки и UI

• SolidStart v2 готовит для SolidJS полнофункциональный слой приложений с маршрутизацией, серверным рендерингом и загрузкой данных.
• Astro 7.2 обновил фреймворк для контентных сайтов и серверных приложений.
• Svelte Select 6.0 обновил компонент выбора, автодополнения и поиска и теперь требует Svelte 5.
• Mantine Vue переносит большую библиотеку компонентов Mantine из React в Vue 3.
• ScrollX UI собирает доступные компоненты на Next.js, TypeScript, Tailwind и Motion для сайтов с выразительной прокруткой и анимациями.
• Стартовый набор astro-shopify соединяет Astro с Shopify через Storefront Web Components и добавляет готовые страницы магазина.
• spartan предлагает Angular-приложениям доступные нестилизованные UI-примитивы с signals, SSR и работой без Zone.js.
• Vengence UI содержит эффекты наведения, анимированные подсказки и макеты со scroll-driven animations для маркетинговых страниц.
• Registry Directory помогает искать сторонние реестры компонентов и блоков, совместимых с shadcn/ui.
• isolet упаковывает компонент React, Solid, Svelte или обычного JavaScript в самостоятельный изолированный виджет.

⚙️ Node.js

Node.js 26.7 добавил трассировку Perfetto и расширил покрытие тестов

В Node.js 26.7 Current появилась начальная поддержка трассировки Perfetto и флаг --test-coverage-include-all, который учитывает в отчете покрытия даже не загруженные тестами файлы. Релиз также исправляет сбои в FFI и SQLite.

Версия Current подходит для знакомства с новыми возможностями, но для большинства рабочих систем разумнее оставаться на поддерживаемой LTS-ветке до планового обновления.

Fastify 6 вышел в alpha и требует Node.js 24

Первая alpha Fastify 6 в основном очищает накопившийся API и повышает минимальную версию Node.js до 24. Стабильные приложения пока не стоит переводить на нее без необходимости, но авторам плагинов уже полезно начать тестирование.

Познакомиться с фреймворком можно на сайте Fastify, историю роста предыдущего поколения описывает материал о релизе Fastify 5, а цели новой версии обсуждаются в задаче Fastify 6.

В Node.js 27 могут усилить устаревание node:domain

Модуль node:domain помечен устаревшим в документации с 2015 года, а теперь для Node.js 27 обсуждается предупреждение уже во время выполнения. Если старое приложение все еще использует domains для обработки ошибок, пора запланировать переход на современные механизмы.

Одновременно пользователи сообщают о падениях из-за нехватки памяти после обновления с Node.js 24.18.1 до 24.19.0. Причина еще не подтверждена, поэтому пострадавшим проектам стоит приложить воспроизводимый пример или временно отложить обновление.

• Руководство по отладке зависшего процесса Node.js показывает, как найти синхронную работу, которая надолго блокирует event loop и не отдает управление.
• Vercel добавил обновление устаревшей версии Node.js одной кнопкой; новые сборки на Node.js 20 перестанут проходить после 1 октября.
• Подборка пяти полезных команд через npx напоминает, как запускать одноразовые проверки орфографии, чистку проекта и другие утилиты без глобальной установки.
• Статья про паттерн Outbox в Node.js объясняет, как согласовать запись в базу данных с отправкой события в очередь и не потерять одну из операций при сбое.
• unbash — быстрый парсер Bash без зависимостей, выделенный из инструмента Knip. Он строит типизированное AST для анализа разрешений, классификации и переписывания команд.
• njsscan 1.0 ищет в Node.js-приложениях XSS, SSRF, опасный eval, ошибки JWT и NoSQL-инъекции с помощью набора правил Semgrep.
• NodeBB 4.15 исправил ошибки и улучшил интеграцию форума с fediverse; готовую установку можно посмотреть на демо-сайте NodeBB.
• smol-toml 1.8 — небольшой быстрый парсер и сериализатор стандарта TOML 1.1.
• BullMQ 6.1 обновил распределенную очередь задач, которая может работать поверх Redis или PostgreSQL.
• swift-node 0.1.2 позволяет писать нативную часть модуля Node.js на Swift.

🤖 ИИ и агенты

Kitesurf запускает браузер для агентов в изолятах Cloudflare

Kitesurf — браузерный движок, рассчитанный на программных агентов, а не на отображение страниц человеку. Каждая страница работает в отдельном V8 isolate на Cloudflare Workers. По данным команды, движок использует в 3–7 раз меньше процессора и памяти, чем Chromium, хотя выполняет задачи медленнее.

Проект пока находится в beta, но его уже можно попробовать в интерактивной версии. В будущем Cloudflare планирует открыть исходный код.

WebMCP превращает функции страницы в инструменты для агента

Экспериментальный хук use-webmcp-tool помогает React-приложению публиковать функции страницы через WebMCP. Вместо имитации кликов агент сможет вызвать явно описанное действие, например поиск товара или добавление позиции в корзину.

Стандарт еще разрабатывается, поэтому API может измениться. Но сам подход делает интеграцию надежнее: сайт заранее определяет допустимые действия и схему их параметров.

MCP научился работать без состояния между запросами

Спецификация MCP от 28 июля 2026 года добавила stateless-режим: серверу больше не обязательно сохранять привязку клиента к одной сессии и держать открытый поток. Это упрощает масштабирование за балансировщиком и восстановление после сбоев.

Cloudflare подготовил обзор изменений MCP и руководство по миграции, где объясняет, что нужно поменять существующим серверам и клиентам.

• Команда Astro применила агентов для сортировки задач и сократила число открытых issues с более чем 200 до 30. Материал показывает устройство «фабрики» автоматических проверок, а не только ее итоговый счетчик.
• Docker Sandboxes запускает coding-агентов в отдельных microVM с собственным Docker daemon, изолируя их команды и окружение от основной системы.
• DeepSeek Harness — агентная среда с веб-интерфейсом, построенная на плагинах Node.js-системы Cordis. Исходный код Harness опубликован на GitHub.
• Мейнтейнер Node.js рассказывает, как разбирает 20–40 сгенерированных ИИ отчетов о безопасности в неделю и отделяет полезные находки от шума.

🛡️ Безопасность и надежность

Почти весь трафик небольшого сайта оказался ботами

Автор подробно описал год борьбы с ботами, создававшими 99% трафика сайта. Он показывает, как менялось поведение автоматических запросов и какие правила Cloudflare помогли снизить нагрузку.

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

Слабый генератор случайных чисел в старой crypto-js привел к краже средств

Расследование показало, как уязвимый псевдослучайный генератор старых версий crypto-js использовали для восстановления секретов и опустошения криптокошельков. Проблема существовала много лет, но затрагивала создание ключей версиями до 4.0.0.

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

🔨 Сборка и качество кода

pnpm 12 почти завершил перенос на Rust

pnpm 12 вышел в release candidate. Большая часть менеджера пакетов переписана на Rust, но для пользователя команда постаралась сохранить поведение pnpm 11: заметных несовместимых отличий осталось всего несколько.

Перед обновлением рабочего монорепозитория стоит проверить lockfile, скрипты установки и CI на тестовой ветке, даже если список изменений выглядит коротким.

• vlt 1.0 предлагает совместимую с npm установку пакетов и команду vlt query с более чем 60 CSS-подобными селекторами для анализа графа зависимостей, включая проверки безопасности.
• Vite+ объединяет runtime, менеджер пакетов, сборку и другие части фронтенд-стека в одной цепочке команд.
• eslint-package-json добавляет правила ESLint для проверки и автоматического исправления package.json.
• Vitest 5 RC позволяет заранее проверить тесты и плагины перед стабильным релизом новой основной версии.
• branchyard собирает утилиты для уборки старых Git-веток и поддержания рабочего окружения в порядке.

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

TermDOM переносит HTML, CSS и DOM в терминал

TermDOM реализует DOM, каскад и движок раскладки, который рисует интерфейс прямо в терминале. Приложение можно писать на обычном JavaScript или любом UI-фреймворке и запускать в Node.js, Bun или Deno без нативных и WebAssembly-зависимостей.

Проект похож по назначению на React-библиотеку Ink, но не требует React. В качестве демонстрации автор запустил TodoMVC с заменой только таблицы стилей; сам разработчик ранее создал Crank.js.

Hucre читает и создает таблицы без внешних зависимостей

Hucre 1.0 — движок электронных таблиц для JavaScript. Он умеет читать и записывать распространенные форматы, работать со встроенными изображениями, ссылками, защитой паролем и сводными таблицами.

Библиотека поддерживает tree shaking, поэтому сборщик может не включать в приложение неиспользуемые возможности. Это пригодится при импорте и экспорте таблиц прямо в браузере или Node.js.

Инструменты для изображений, звука и интерфейсов

• Morphicons плавно превращает одну контурную иконку в другую с пружинной анимацией и работает с React, Vue и Svelte.
• VidStudio обрезает, масштабирует и сжимает медиа, добавляет субтитры и выполняет обработку локально в браузере.
• Dither накладывает на изображение эффект дизеринга, дает настроить алгоритм, палитру и градиент и экспортирует результат в SVG или PNG.
• soundcn содержит сотни звуков интерфейса, распределенных по категориям и доступных через реестр shadcn.
• BulkPicTools пакетно сжимает, конвертирует, обрезает и редактирует больше 200 изображений локально, не отправляя файлы на сервер.
• 3dsvg превращает SVG в интерактивный трехмерный React-компонент и предоставляет визуальный редактор.
• CATAAS отдает через REST API случайные изображения котов, GIF и картинки с заданным цветом или текстом — удобно для прототипов и заглушек.
• Nutrepedia ищет пищевую ценность продуктов и блюд на нескольких языках и показывает данные на порцию или грамм.