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

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

HTML внутри canvas сохраняет привычные возможности страницы

Chrome готовит HTML-in-Canvas: API позволяет рисовать живые HTML-элементы внутри canvas с контекстом 2D, WebGL или WebGPU. При этом текст можно выделять и находить поиском по странице, формы остаются интерактивными, а содержимое доступно программам экранного чтения.

Это особенно интересно для графических редакторов, игр и сложных визуализаций: кнопки и поля ввода больше не обязательно имитировать нарисованными фигурами. Поддержка уже есть в Three.js, Babylon.js и PixiJS, но сама браузерная возможность пока ограничена Chrome.

Safari учится работать со складными экранами

В Safari 27.1 появились экспериментальные средства для адаптации интерфейса к сгибу устройства. Device Posture API сообщает положение экрана, а Viewport Segments API описывает его отдельные видимые области.

Это помогает, например, расположить список с одной стороны сгиба, а содержимое выбранного элемента — с другой. Оба API пока включаются через экспериментальные настройки, поэтому основной интерфейс должен работать и без них.

• Firefox 159 включил по умолчанию анимации, связанные с прокруткой: теперь они доступны во всех основных браузерных движках. Ещё появились локальные реестры пользовательских HTML-элементов, позволяющие разным частям приложения определять свои компоненты без конфликта имён.
• В Chrome 156 перестали запоминать неудачные загрузки модулей из-за сетевых или HTTP-ошибок. Если динамический import() не сработал из-за временного сбоя, загрузку можно повторить.
• Начиная с Chrome 155, Digital Credentials API умеет выдавать цифровые удостоверения в совместимое приложение-кошелёк на телефоне. Это механизм передачи документов, а не просто скачивание файла со страницы.
• Поддержку браузера Arc планируют завершить в декабре. Его разработчики предлагают переходить на Dia; ещё один вариант с похожим вниманием к интерфейсу — Zen, основанный на другом движке, а не Chromium.

🎨 CSS и дизайн

• В Safari 27.2 добавили ::field-content для оформления отображаемого текста настраиваемого <select>. В Grid Lanes свойство flow-tolerance переименовали в fit-tolerance: экспериментальный CSS-код стоит проверить на старое имя.
• Бреннен Пут разобрал, как подготовить сайт к печати: скрыть ненужную шапку, выбрать размер текста в пунктах и сделать ссылки чёрными. Отдельные стили печати помогают странице оставаться читаемой на бумаге и при сохранении в PDF.
• Крис Койер объясняет, что показывать на динамических карточках ссылок. В Discord, Slack и соцсетях рядом с картинкой уже видны заголовок и описание, поэтому изображение полезнее использовать для дополнительной информации о содержимом.

🛡️ Безопасность и производительность

Забытый сторонний скрипт может превратиться в точку атаки

В разборе DeadTag показано, как старые теги аналитики, рекламы и виджетов стали каналом доставки шпионского ПО. Злоумышленники выкупают истёкшие домены сервисов, а сайты с оставшимися подключениями начинают загружать уже чужой код.

Проблема касается даже давно работающего сайта, в котором никто недавно не менял исходники. У каждого внешнего <script> есть владелец и жизненный цикл: ненужные подключения стоит удалять, а судьбу оставшихся — периодически проверять.

Предпросмотр сгенерированного HTML требует изоляции

Кешав Малик на пяти примерах показывает, как защитить предпросмотр HTML, созданного моделью. Простая вставка в iframe через srcdoc без ограничений не создаёт безопасную границу: содержимое может выполняться с правами страницы приложения.

Автор постепенно добавляет sandbox, строгую Content Security Policy и проверку сообщений postMessage. Эти механизмы решают разные задачи: ограничивают возможности вложенной страницы, разрешённые ресурсы и обмен данными с основным интерфейсом.

Бюджет скорости лучше строить по типично плохим результатам

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

Вместо этого он предлагает P90 или P95 по недавним данным: значения, в которые укладываются 90% или 95% измерений. Так бюджет учитывает медленные загрузки, но не определяется единственным исключением. В статье есть шаблон таблицы для расчётов.

• Пол Калвано исследовал, почему один шрифт загружался трижды: сначала WOFF2, затем WOFF и TTF. Разбор проходит от ошибок браузера до исходников Chromium и показывает, как последовательные попытки использовать резервные форматы создают лишние запросы.
• В статье о медленном ПО и архитектурных решениях Шон Гудеке объясняет, почему смена языка сама по себе не исправляет неудачную организацию работы программы. Материал помогает смотреть на причины задержек шире отдельных строк кода.

📦 JavaScript

Общие объекты между потоками можно попробовать до появления стандарта

Structs реализует идеи предложения TC39 о структурах, которое находится на второй стадии стандартизации. Цель — дать нескольким воркерам доступ к общим объектам в памяти вместо постоянной упаковки, отправки и восстановления копий данных.

Это может пригодиться для вычислений в нескольких потоках, где пересылка больших объёмов данных сама становится дорогой операцией. Поведение можно изучить в интерактивной песочнице Structs, но экспериментальную реализацию не следует путать с уже принятым стандартом JavaScript.

Первая GTA возвращается в браузере

Брамус рассказал, как воссоздаёт движок Grand Theft Auto 1997 года на JavaScript и WebGL. Проект загружает Liberty City из файлов оригинальной демоверсии; результат можно проверить в браузерной GTA.js.

Рядом любопытная история из прошлого игры: Пэт Керр, чей прототип 1996 года лёг в основу автомобильной физики GTA, тоже перенёс свою модель движения машин в JavaScript.

• Макс Бернштейн объясняет, как движки ускоряют доступ к полям динамических объектов. В основе — сведения о форме объекта и кеширование уже найденного способа доступа к свойству; небольшие запускаемые примеры помогают увидеть эти механизмы в работе.
• Вышел CoffeeScript 2.7.1 — первый релиз за четыре с половиной года, с исправлениями для Node.js 22+ и атрибутами импорта with { type: 'json' }. Сам CoffeeScript компилируется в JavaScript, а Брендан Айк ещё в 2011 году отмечал его стрелочные функции и компактные классы как ориентиры для будущего ES6.
• Mutative 2.0 помогает обновлять вложенные данные, сохраняя исходный объект неизменным. Автор сообщает об ускорении в 3,6 раза относительно Immer в своём наборе тестов; результат конкретного приложения зависит от характера обновлений.
• query-string 10 разбирает параметры URL и собирает их обратно в строку. Теперь библиотека выбрасывает ошибку для непредставимых значений, поэтому при обновлении стоит проверить обработку входных данных.
• Вышел axios 1.21 — очередное обновление библиотеки HTTP-запросов для браузера и серверного JavaScript.

⚛️ React и React Native

TanStack Redact уменьшает клиентский React, но меняет модель рендеринга

TanStack Redact подменяет React и React DOM в браузерной сборке более компактной реализацией. Плагин подключается к Vite, TanStack Start, Vinext и Next.js без переписывания компонентов; команда заявляет уменьшение клиентских сборок на 20–70%.

Важное ограничение — только синхронный рендеринг: работа не разбивается на части, между которыми браузер может обработать пользовательский ввод. Перед экспериментом полезно изучить руководство по совместимости. В обсуждении сообщества сравнивают подход с Preact, а один из тестировщиков получил примерно двукратный рост затрат CPU при повторных рендерах двух рабочих сайтов. Меньший файл ещё не гарантирует более отзывчивый интерфейс.

Дизайн-системы сравнили на задачах с заметной нагрузкой

Ден Оделл измерил производительность десяти дизайн-систем, включая MUI, Mantine, Ant Design и React Spectrum. При четырёхкратном замедлении CPU список из 249 стран открывался за 84 мс в Mantine и за 134 мс в Ant Design; MUI и React Spectrum превысили 200 мс.

У React Spectrum обнаружились последовательные измерения отдельных пунктов, вынуждавшие браузер заново рассчитывать расположение элементов. Автор завёл задачу с описанием проблемы, а исправление отправили на проверку. Для других действий результаты отличались: например, MUI быстрее обрабатывал массовое переключение флажков. Сравнить собственные компоненты можно с помощью опубликованных Playwright-тестов.

Почему React.lazy может задержать уже загруженный интерфейс

В разборе задержки React.lazy и Suspense команда нашла паузу при запуске, хотя код компонента уже был загружен. Ленивый компонент способен приостановить первый рендер, а React может ограничивать частоту показа приостановленного содержимого интервалом в 300 мс.

Это полезный пример для отладки: наличие файла в кеше не означает, что интерфейс сразу появится на экране. Статья показывает, как авторы отделили загрузку кода от поведения Suspense и нашли исправление для своего случая.

TanStack DB приближается к версии 1.0

TanStack DB 1.0 RC1 зафиксировал API реактивного слоя клиентских данных: интерфейс может автоматически обновляться при изменении коллекций. При переходе нужно проверить руководство по миграции, поскольку изменились обработчики записей, хуки и ошибки.

Серверные компоненты, формы и Next.js

• На 3 ноября запланирован релиз безопасности Next.js, который должен исправить семь уязвимостей средней серьёзности. Подробности обещаны вместе с исправлениями.
• Дэн Абрамов проверяет протокол React Flight случайно сгенерированными данными, пропуская их через настоящие серверную и клиентскую части. Так нашли шесть ошибок потоковой обработки и три ошибки записи в формате, который используют Server Components.
• Джейкоб Эби объясняет, как сохранить работу форм с серверными действиями до гидрации, даже если интерфейс заранее показывает ожидаемый результат отправки. Гидрация — это этап, когда React подключает клиентскую логику к HTML с сервера. w- Васим Анджум сравнил Babel- и Rust-варианты React Compiler в Next.js 16.4. Материал помогает оценить влияние реализации компилятора по измерениям, а не по языку, на котором он написан.
• Vinext 1.4 развивает реализацию API Next.js поверх Vite. В демонстрационном клоне Hacker News затраты серверного CPU на запрос снизились на 43% относительно Vinext 1.3; в этом конкретном тесте результат оказался немного лучше Next.js.

Компоненты, редакторы и мобильная разработка

• Puck 0.24 обновил визуальный редактор страниц, который встраивается в приложение и использует его React-компоненты. Можно гибче организовать панель настроек компонента, улучшено перетаскивание; исходники доступны в репозитории Puck.
• react-window 2.5 добавил scrollElement, чтобы длинный список прокручивался вместе со страницей или родительским элементом, и хук useVirtualizer() для собственной разметки. Виртуализация отрисовывает только нужную часть списка; документация и примеры показывают, как это уменьшает нагрузку.
• MicroKit собрал 54 небольших анимации и интерактивных эффекта для React: кнопки, вкладки, поля и реакции на наведение. Есть варианты на JavaScript и TypeScript, с обычным CSS и Tailwind; примерно половине примеров не нужны зависимости.
• React Native Windows 0.85 завершил переход на новую архитектуру React Native. Для настольных приложений также развиваются независимый от команды Expo проект Expo Desktop и Legend Spark для macOS.
• OpenTUI 0.8, библиотека терминальных интерфейсов с React-привязками, теперь перерисовывает только изменившиеся части кадра. Её использует OpenCode.
• React Hook Form 7.91 исправил ошибки useFieldArray и асинхронной валидации, а также сократил число повторных рендеров. Версия 8 пока дошла до пятой беты.
• React-Toastify 11.2 добавил theme="auto": всплывающие уведомления могут автоматически следовать светлой или тёмной теме операционной системы.
• emoji-picker-react 5.1 предлагает настраиваемый выбор эмодзи; варианты оформления и поведения можно проверить в интерактивном примере.
• В Graveyard Pinball на React Three Fiber можно сыграть на хэллоуинском столе с черепами, котлами и скелетом-магом. Автор объяснил устройство игры: за объёмной сценой скрывается двумерная физика.

🛰️ Фреймворки и серверные платформы

Svelte-компоненты пробуют рисовать без браузерного движка

gpuix-svelte экспериментирует с нативными настольными приложениями: Svelte-компоненты рисует GPUI, графический UI-фреймворк редактора Zed, а код выполняется в Node.js или Bun. Встроенное браузерное окно для отображения интерфейса не используется.

Проект опирается на ещё не выпущенную возможность Svelte подключать собственные средства отрисовки, поэтому пока подходит для изучения и экспериментов. Реализация открыта в репозитории gpuix-svelte.

• Вышел Remix 3.1 — очередной релиз фреймворка для веб-приложений.
• SonicJS, CMS без собственного пользовательского фронтенда для Cloudflare Workers на базе Hono, выпустила версию 3.0. В ней переработаны слой данных, авторизация и система плагинов.
• Directus 12.6 подключается к SQL-базе и предоставляет REST- и GraphQL-API вместе с визуальным интерфейсом управления данными. Для взаимодействия с ИИ-агентами предусмотрен встроенный MCP-сервер.

📘 TypeScript

TypeScript 7.1 beta открывает API инструментам разработки

В TypeScript 7.1 beta появился программный API: редакторы, плагины и другие инструменты могут обращаться к возможностям новой реализации компилятора. Ещё добавлены импорты исходной фазы и цель компиляции --target es2026.

Другая важная возможность — content mappers. Они позволяют представить содержимое файлов другого формата как TypeScript для проверки типов, что важно, например, для компонентов Vue, Svelte и Astro.

Проверка типов выходит за пределы файлов .ts

Йови де Крок показал, как устроены content mappers на примерах CSS-модулей и GraphQL. TypeScript 7 не использует прежние плагины tsserver, поэтому новый механизм становится способом подключать подобные сценарии к новой реализации.

Практическое применение уже есть у Reylo: запросы пишутся в обычных .sql-файлах и импортируются в TypeScript, а типы параметров и строк результата выводятся из SQL. Отдельный шаг генерации кода не требуется, но инструмент зависит от TypeScript 7.1, который пока находится в бете.

• В пошаговой статье «Парсерные комбинаторы на TypeScript с нуля» небольшие функции разбора объединяются в более сложный парсер. Итоговый пример превращает вывод ping в объекты с известными типами — промежуточный подход между регулярными выражениями и тяжёлыми системами разбора.

⚙️ Node.js

Node.js 26 Lithium стал веткой с долгосрочной поддержкой

Node.js 26.13.0 перевёл ветку 26 в статус Active LTS с обновлениями до апреля 2029 года. Node.js 24 перешёл в фазу сопровождения, а ветка 22 остаётся в ней до апреля 2027 года. Сроки удобно сравнивать по графику жизненного цикла релизов.

Параллельно готовится первая альфа Node.js 27. Это первый выпуск в рамках нового ежегодного расписания, поэтому привычные ожидания от смены основных версий стоит сверить с новым планом.

Исправления Node2Shell закрывают уязвимость декодера Brotli

Октябрьские обновления безопасности Node.js исправляют десять уязвимостей. Среди них — выход за границы памяти в декодере Brotli, который может привести к выполнению чужого кода при распаковке специально подготовленных данных, например через node:zlib.

Исправления вошли в 26.12.1, 24.22.1 и 22.23.4. У Imperva есть разбор атаки Node2Shell, а ELLIO сообщает о попытках эксплуатации в реальном трафике. Поскольку ошибка находится в библиотеке Brotli, обновления нужны и другим продуктам с её встроенными копиями.

Виртуальная файловая система меняет упаковку приложений

Маттео Коллина разобрал, как работает node:vfs и какие у него ограничения. Виртуальная файловая система позволяет представить упакованное содержимое приложения как файлы, с которыми работает среда выполнения.

На экспериментальном VFS в Node.js 26 построен bundle: инструмент собирает приложение и его зависимости в подписанный ZIP, который запускается без отдельного npm install. Это интересный вариант доставки готового приложения, но он опирается на экспериментальную возможность Node.js.

Verdaccio 7 усиливает контроль публикаций

Verdaccio позволяет разместить собственный реестр npm-пакетов и прокси к внешнему реестру. В релизе 7.0 появились двухфакторная аутентификация, более строгие проверки владельцев и экспериментальная публикация в два этапа: новую версию сначала нужно одобрить.

В обзоре Verdaccio 7 описаны изменения и требования: теперь нужен Node.js 24 или новее. Такой реестр полезен командам, которым нужно управлять распространением внутренних пакетов.

Наблюдаемость и резервные копии

• OpenTelemetry JS 3.0 получил ESM- и CommonJS-сборки со строгой картой exports: импорты внутренних файлов пакета перестанут работать. Базовый, браузерный и Node.js SDK для трассировки объединены в один пакет. В организации Node.js также появился microtel — прототип минимальной реализации OpenTelemetry для возможного включения в саму среду выполнения.
• Platformatic рассказал о sqlite-js-stream: переносе написанного на Go инструмента Litestream в TypeScript поверх node:sqlite с помощью ИИ-агента. Идея — непрерывно отправлять журнал изменений SQLite в S3, чтобы базу можно было восстановить.

Исправления и инструменты Node.js

• Express опубликовал разбор ошибки body-parser: лишние байты после сжатого gzip-тела запроса могли аварийно завершить процесс. Исправления доступны в версиях 2.4.0 и 1.20.9.
• После голосования технического комитета в Node.js добавили экспериментальный флаг для удаления TypeScript-типов внутри node_modules. Возможность ограничена пакетами с отметкой private, например внутренними пакетами монорепозитория.
• Electron 45 обновился до Chromium 156, Node.js 24.22 и V8 15.6, а также получил точки подключения локальной модели через Prompt API. В изолированных preload-скриптах больше нет глобальных Buffer и setImmediate; поддержка Electron 42 завершена.
• Эверт Пот объяснил, почему параллельная публикация пакетов временно ломает npm install. В монорепозитории новая версия одного пакета может появиться в реестре раньше версий зависимостей, на которые она уже ссылается.
• Chokidar 6.0 переписал механизм наблюдения за файлами: перед отправкой события библиотека сверяет изменение с реальным состоянием файловой системы.
• AVA 8.2 продолжает обновление тестового раннера исправлениями. Предыдущая версия 8.1 могла выполнять многие типичные сценарии до 50% быстрее.
• path-to-regexp 9.0, превращающий маршруты вида /user/:name в регулярные выражения, перешёл только на ESM. Также изменилось сопоставление неоднозначных сегментов, поэтому нестандартные маршруты стоит перепроверить.
• ShareDB 7.0 обновил серверную основу для совместной работы в реальном времени. Изменения нескольких пользователей согласуются через операционные преобразования, чтобы участники могли редактировать общие данные.
• Croner 11.0 обновил библиотеку запуска функций по расписанию и вычисления времени срабатывания cron-выражений.

🚀 Deno и Bun

Будущее Deno обсуждают вместе с разнообразием сред выполнения

Команда Deno сообщает, что работает над передачей проекта фонду. На этом фоне появился форк Ende, который собирается отказаться от совместимости с Node.js и сосредоточиться на изолированном выполнении кода. Первые шаги форка описаны в отдельном материале об Ende.

Кейт Холтерхофф рассматривает ситуацию шире в статье о рисках сокращения числа JavaScript-сред выполнения. На примерах IE6, доминирования Chromium и форка io.js она объясняет, почему разные реализации полезны экосистеме: они дают альтернативы и пространство для независимых решений.

• Bun 1.4.4 добавил bun fmt — совместимый с Prettier форматировщик, который читает существующие настройки Prettier или oxfmt. Команда делает акцент на скорости, а для проекта это возможность попробовать инструмент без ручного переноса правил оформления.
• Вышел Deno 2.9.8 — очередное обновление ветки 2.9.

🤖 ИИ

TanStack AI 1.0 стал стабильным набором для ИИ-функций

TanStack AI 1.0 зафиксировал API для чатов, вызова инструментов и работы с медиа. Набор не привязан к одному фреймворку или поставщику моделей: есть 23 адаптера провайдеров, поддержка MCP и React-хуки вроде useChat().

Это позволяет строить интерфейс и логику приложения вокруг общего API, а не связывать всё с одним сервисом. При этом механизм длительно работающих агентов пока экспериментальный: стабильность версии 1.0 не распространяется автоматически на все новые возможности.

• W3C запустил пилот поддержки полифилла WebMCP. WebMCP описывает JavaScript API, через который веб-приложение может предоставлять агентам вызываемые инструменты; полифилл помогает пробовать подход до широкой встроенной поддержки.
• browser-whisper 2.0 распознаёт речь из аудио и видео прямо в браузере через WebGPU, с запасным вариантом на WebAssembly. Поддерживаются Whisper, Moonshine и другие модели, временные отметки, кеширование моделей и ввод с микрофона.
• Vercel представил skill для уменьшения JavaScript-сборок Next.js с помощью агента. Он использует граф модулей Turbopack, чтобы находить источники лишнего кода и направлять оптимизацию на конкретные зависимости.

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

Biome 2.6 расширяет поддержку форматов

Biome 2.6 добавил форматирование Markdown, YAML и SCSS, а также начальные проверки линтером для этих форматов. Инструмент на Rust постепенно охватывает больше файлов проекта, которые раньше приходилось обрабатывать отдельными средствами.

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

Проверка связей между модулями и запуск проекта

• Dependency Cruiser 18.7 проверяет правила зависимостей: например, запрещает циклические импорты или обращение к внутренним файлам соседнего пакета. Проверки можно запускать в CI, а связи — рисовать графом; есть примеры для реальных проектов, включая Yarn и React.
• Файлы фиксации зависимостей GitHub Actions стали общедоступны. В поддерживающих их процессах можно закрепить используемые actions и их зависимости, чтобы выполнение меньше зависело от неожиданных внешних изменений.
• The Website Specification предлагает технический список проверок перед запуском сайта: поисковая оптимизация, доступность, безопасность, скорость, приватность и поддержка языков. Его можно использовать как основу собственного процесса подготовки релиза.
• pnpm 12.16 обновил менеджер зависимостей JavaScript-проектов.
• В oxlint 1.89 рекомендованные правила плагинов React, Vue, Next.js, Jest/Vitest и других теперь тоже учитываются как рекомендованные. После обновления набор предупреждений может расшириться даже без изменения исходников.

Полезные находки

• TitleArt воссоздаёт в браузере стили WordArt из старых версий Microsoft Office: декоративные надписи, изгибы и объёмные эффекты. Подойдёт для экспериментов с ретро-типографикой.
• UI SFX собрал 78 звуковых сигналов интерфейса в 12 стилях — от минималистичных до аркадных. Можно синтезировать их небольшим модулем через Web Audio или использовать 936 готовых MP3/Ogg-файлов под CC0; исходники UI SFX открыты.
• Расширение Overgrown заращивает забытые вкладки виртуальными растениями. Чтобы вернуться к странице, заросли предлагают расчистить мачете, бензопилой или огнемётом; расширение устанавливается вручную из репозитория Overgrown, в магазине Chrome его нет.
• Google Docs научился открывать, редактировать и совместно изменять Markdown-файлы, а Google Drive — показывать их предпросмотр. Это упрощает работу с .md для команд, которые обсуждают документы в привычном веб-редакторе.