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

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

Разработчики выбирают приоритеты Interop 2027

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

Джош Комо выделяет новые функции CSS и анимации при прокрутке. Сара Суэйдан ставит на первое место доступность и focusgroup, а Деклан Чидлоу — улучшения SVG и порядка чтения. Свои варианты объяснили Стюарт Робсон, Эрик Мейер, Ана Родригес и Тайлер Стика.

Chrome 157 тестирует новые CSS-возможности, а unload уходит

Chrome 157 перешёл в бета-канал. Среди готовящихся изменений — сокращённая запись для углов, строковое значение text-overflow и anchor-valid. Пока новые свойства не стали повсеместными, их стоит применять с проверкой поддержки.

Браузер также завершил отказ от события unload: обработчик больше не срабатывает по умолчанию при уходе со страницы. Для сохранения состояния и реакции на закрытие вкладки лучше изучить pagehide и visibilitychange — они лучше сочетаются с современным жизненным циклом страницы.

JPEG XL пришёл в основные браузеры: как он выглядит рядом с AVIF

После включения JPEG XL по умолчанию в Firefox 158 формат поддерживают основные браузеры. Джейк Арчибальд сравнил JPEG XL и AVIF на веб-задачах: качество картинки важно оценивать вместе с размером файла и скоростью обработки. Отдельная галерея крошечных изображений показывает, сколько деталей можно сохранить даже при размере меньше 200 байт.

• Опрос State of HTML 2026 собирает опыт разработчиков с HTML, веб-компонентами, браузерными API и постепенным улучшением сайтов.
• Safari блокирует инфраструктуру «разрешения личности»: трекеры могут связывать адрес электронной почты из формы с действиями человека на разных сайтах и устройствах.
• CrUX экспериментально учитывает мягкие переходы в SPA. Когда приложение меняет экран без загрузки нового HTML-документа, Core Web Vitals раньше хуже отражали этот переход.
• В материале о будущем WCAG 3 объясняют, почему доступность нельзя сводить к перечню пройденных проверок и чем предлагаемый стандарт отличается от WCAG 2.
• pour проверяет доступность страницы прямо в браузере и показывает нарушения WCAG поверх интерфейса, разделяя их по серьёзности.
• Как веб-сжатие работает со склеенными данными: практическое сравнение gzip, Brotli и zstd помогает понять, что происходит, когда сервер собирает ответ из нескольких частей.
• Нолан Лоусон размышляет о будущем веб-компонентов. Технология позволяет создавать собственные HTML-элементы, но её перспективы зависят и от того, насколько охотно разработчики ими пользуются.
• Эксперимент с декларативными частичными обновлениями HTML показывает, как повторяющуюся разметку можно обновлять без привычного клиентского рендеринга; техническая основа описана в предложении Chromium.

🎨 CSS и дизайн

CSS-функция random() добавляет управляемую случайность

В стабильном Chrome 156 появилась CSS-функция random(). В разборе с живыми примерами показано, как слегка менять положение букв, карточек и других элементов прямо в стилях. Так можно сделать композицию менее механической без отдельного JavaScript-кода. Случайность здесь служит оформлению: текст и управление интерфейсом всё равно должны оставаться понятными.

• Ахмад Шадид использует calc-size() и round(), чтобы высота элемента совпадала с целым числом повторений фонового узора. Это избавляет от обрезанного последнего ряда; поддержку браузеров пока нужно учитывать.
• Математическая шкала размеров заголовков помогает сделать заголовки разных уровней согласованными, не подбирая каждый размер на глаз.
• Расширение DevTools для анимаций, запускаемых прокруткой рисует диапазоны активации и показывает текущее состояние анимации. Его можно установить из Chrome Web Store или изучить исходный код.
• Furifont автоматически добавляет чтение над японскими иероглифами средствами OpenType, без HTML-разметки ruby и JavaScript. Реализация доступна в репозитории шрифта.

📦 JavaScript

Форматирование меняет поведение программы: необычный пример с Tetris

Исследователь собрал JavaScript-код, который после форматирования превращается из Tetris в Snake. Причина — сочетание тонкостей синтаксиса и допущений инструментов, которые «очищают» код. Это наглядное напоминание: результат преобразования следует проверять тестами, особенно если исходник недоверенный или намеренно запутан.

• В интерактивной статье о Proxy видно, как перехват чтения и записи свойств заставляет обычный на вид объект вести себя неожиданно. Это полезно для понимания реактивности и отладки библиотек.
• Приём с String.replace() как итератором позволяет вызывать функцию для каждого совпадения регулярного выражения; автор сравнивает его с более очевидными альтернативами.
• В истории перехода с Zod 3 на Zod 4.5 команда Trigger.dev рассказывает, почему валидация данных стала потреблять примерно на треть меньше CPU при ста миллионах разборов в день.
• Очередь промисов p-queue 10 избавилась от зависимостей и получила EventTarget; репозиторий проекта объясняет, как ограничивать число одновременно выполняемых задач.

⚛️ React и React Native

TanStack Start 1.0 стал стабильным

TanStack Start 1.0 вышел из статуса кандидата в релизы. Это полноценный фреймворк для React на основе TanStack Router: он соединяет маршрутизацию, серверные функции и вывод страниц, чтобы проект не собирал эти части по отдельности.

При выборе инструмента полезно смотреть не только на скорость. Есть сравнение одного приложения с Next.js 16.4, официальные инструкции по переходу с Next.js и с кандидата в релизы. Разработчики описали переезд с Astro и миграцию старого проекта. В обсуждении Райана Карниато и ветке сообщества React можно посмотреть на практические вопросы релиза.

Next.js исправил две критические уязвимости

Обновление безопасности Next.js закрывает две возможности удалённого выполнения кода: одну в use cache, связанную с уязвимостью React Server Components, и другую в обработке SVG оптимизатором изображений. Для уязвимости use cache уже опубликован разбор с демонстрацией атаки.

Проектам на Next.js следует перейти на исправленные версии 16.4.1 или 15.5.28. Если React Server Components используются вне Next.js, нужно также проверить версии пакетов react-server-dom по рекомендациям React.

React Router передаёт переходы между страницами React

React Router 8.5 пометил собственные API переходов между экранами как устаревающие в пользу компонента React ViewTransition. В руководстве по миграции показано, как обернуть Outlet и заменить старые настройки. Ещё появился экспериментальный режим только для API, когда сервер обслуживает загрузчики и действия, а HTML остаётся статическим.

• Документация React DevTools для агентов описывает, как инструменты разработки передают агенту сведения о компонентах и профилировании через Chrome DevTools MCP.
• Команда Next.js рассказывает, как уменьшила число экранов-заглушек в конструкторе v0: помогли предварительная загрузка по намерению пользователя, частичный prefetch и новый navigation() API. Сам конструктор v0 служит примером интерфейса с частыми переходами.
• Более 10 тысяч сайтов ресторанов перенесли с Next.js на Astro, оставив React только в интерактивных фрагментах. Для страниц меню заявлено сокращение p75 LCP с 5,4 до 0,7 секунды.
• Раннее начало загрузки WebAssembly-модуля ускорило редактор Recraft на 17%. Пока компонент ожидал Suspense, загрузка 9 МБ откладывалась; перестановка работы убрала это ожидание.
• Expo SDK 58 использует React Native 0.88. Отдельно React Native for Web снова получил активных сопровождающих и переезжает в организацию React Foundation.
• Подготовка React Native-приложения к складному экрану разбирает разные уровни совместимости: интерфейс должен нормально переживать изменение размеров и способа раскрытия устройства.
• Tamagui 3 помогает делить компоненты и стили между React в браузере и React Native; в версии 3 появился экспериментальный нативный движок тем.
• Shopify Hydrogen 2026.10 теперь можно подключать как библиотеку к существующим приложениям Next.js или React Router.
• Unistyles 3.6 пробует подключение к Metro без отдельного Babel-плагина, а Motion 14.6 добавляет перемещение элементов списка с клавиатуры и stepFrames для тестов анимации.

🛰️ Фреймворки и сборка

Astro 7.4 помогает искать долгие этапы сборки

В Astro 7.4 команда добавила флаг astro build –timings, который показывает, где именно сборка тратит время. Экспериментальный параллельный prerendering распределяет генерацию страниц между рабочими потоками. Это особенно интересно большим статическим сайтам, где ожидание сборки уже заметно разработчикам.

Void открыл инструменты сборки и развёртывания

Команда Vite опубликовала исходный код Void — набора для полноценных приложений и их развёртывания. Если проекту нужен серверный код рядом с интерфейсом, такие решения сокращают количество разрозненных настроек. Пока инструмент развивается, стоит проверять, насколько он подходит конкретному способу размещения приложения.

• Foldkit — фронтенд-фреймворк на TypeScript и Effect, который делает состояние и побочные действия явными; это помогает понимать, откуда появились данные и что может изменить интерфейс.
• Mastro — небольшой фреймворк и генератор статических сайтов, рассчитанный на серверный HTML без сложной инфраструктуры.
• Marionette предлагает заранее согласованную структуру приложения и контракты для разработки интерфейсов с помощью coding agents.
• Проект Fixi объединяет маленькие библиотеки для HTML с дополнительным поведением, потоковой выдачи, обновления DOM и обёрток над fetch().
• Spiceflow — типизированный API-фреймворк с возможностями React Server Components, совместимый с Node.js, Bun и Cloudflare Workers.
• Elysia 2.0 RC готовит следующее крупное обновление серверного фреймворка; Vuetify 4.3 обновляет библиотеку компонентов Vue.
• tsup 9.0 и ESLint 10.13 обновили инструменты сборки и проверки JavaScript-кода.
• В истории миграции 70 тысяч тестов с Jest на Vitest команда Miro делится опытом работы с монорепозиторием из 800 пакетов и использованием агентов для повторяющихся изменений.
• Knip помог Sentry удалить 28 тысяч строк неиспользуемого кода. Сам Knip находит мёртвые файлы, экспорты и зависимости, которые легко пропустить при ручной уборке.

📘 TypeScript

tsrs переносит компилятор TypeScript на Rust

Cloudflare и VoidZero представили экспериментальный tsrs — реализацию компилятора TypeScript на Rust, которую развивают вместе с командой TypeScript и включают в экосистему Oxc. Заявленные измерения показывают ускорение до восьми раз относительно компилятора TypeScript 7 на Go, но результат зависит от проекта, а инструмент пока экспериментальный. Работу можно запускать и через WebAssembly.

История создания первой версии описывает участие coding agents и конкретный эффект в одном проекте: проверка типов сократилась с 80 до 7 секунд. Сопутствующее обсуждение с участием команды TypeScript помогает понять, какие вопросы ещё открыты. Пока tsrs стоит пробовать параллельно с привычной проверкой, чтобы заметить различия в диагностике.

TypeScript 7.1 вышел в бета-версии

TypeScript 7.1 Beta добавляет программный API и продолжает работу над скоростью новой реализации. В опубликованном примере проверка документации MUI стала в 1,9 раза быстрее и потребовала примерно вдвое меньше памяти. Тем, кто создаёт плагины или инструменты поверх TypeScript, важен именно API; остальным пока разумно проверить бета-версию на своём проекте и сравнить результаты.

⚙️ Node.js

Для Node.js вышли исправления безопасности

Объявленные на 21 октября обновления Node.js уже доступны: 26.12.1, 24.22.1 и 22.23.4. Они закрывают несколько уязвимостей, в том числе ошибки проверки DNS-имён и TLS-сертификатов. Если сервер или инструменты разработки используют поддерживаемую ветку Node.js, стоит обновиться до исправленной версии своей ветки.

• В Node.js 26.12.0 сделали стабильным конфигурационный файл и разрешили синхронно загружать большинство ES-модулей; Node.js 24.22.0 LTS получил util.throttle и util.debounce. Для развёртывания используйте более новые версии с исправлениями безопасности из новости выше.
• Skia Canvas 4.0 предоставляет Canvas API для Node.js на движке Skia: графику можно создавать на сервере без браузера.

🚀 Другие рантаймы

• В статье о конкуренции Deno с Node.js объясняют, как идеи альтернативных рантаймов влияли на Node.js и npm. Поводом стало присоединение Deno к Cloudflare.
• Для Bun обсуждают компиляцию JavaScript заранее: черновой pull request показывает путь к исполняемым файлам без JIT и байткода. Это пока работа в процессе.
• tinyjs позволяет собирать нативные приложения с JavaScript и системным WebView без поставки Chromium.
• Dialogue Ts помогает строить обмен событиями в реальном времени на основе Socket.IO, Hono и Bun.

🤖 ИИ и разработка

Как проверять код, написанный агентами

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

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

• Lighthouse для Claude Code превращает результаты PageSpeed Insights и Lighthouse в план исправлений в CLAUDE.md; рекомендации всё равно нужно сверять с реальным поведением сайта.
• Codenotch показывает на macOS остаток лимита coding assistants и состояние их работы в компактном индикаторе.
• UI Skills собирает инструкции и инструменты, которые помогают агентам создавать согласованные интерфейсы.
• peek-cli даёт агенту возможность снять скриншот открытой вкладки и проверить результат визуально.
• Yedric AI предлагает встраивать в приложения помощника, который выполняет пользовательские действия по текстовому запросу.
• TokenBlast помогает настраивать параметры Claude Code через готовые наборы и ползунки.
• OpenWiki создаёт и поддерживает связанную документацию по кодовой базе; Claude-Mem сохраняет проектный контекст между сеансами работы агента.
• jax-js запускает вычисления для машинного обучения в браузере через WebGPU и WebAssembly: это способ выполнять модели и обработку изображений без обязательного сервера.

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

Chartist 2.0 возвращает лёгкие графики на SVG

Chartist 2.0 обновил библиотеку графиков, которую можно оформлять обычным CSS. Появились составной API и серверный рендеринг в SVG, поэтому график можно подготовить ещё до запуска JavaScript в браузере. Для проектов на прежней версии есть руководство по переходу с 1.x.

Pele выводит Mermaid-диаграммы в настраиваемый SVG

Pele берёт знакомый синтаксис Mermaid и рисует адаптивный SVG, цвета которого можно менять через CSS-переменные. Автор делает ставку на небольшой размер и отсутствие зависимостей; оценить результат можно в интерактивной песочнице.

• Maplair — ответвление Leaflet с вращением карты, поиском, тепловыми картами и другими возможностями, которые сборщик может исключать, если они не используются. У исходного проекта тоже есть план выпуска Leaflet 2.0.
• Веб-компонент rich-input собирает поле поиска, где обычный текст сочетается с подсвеченными фильтрами вида key:value и подсказками при вводе.
• TanStack Hotkeys обрабатывает сочетания клавиш и их различия между платформами. Новые области действия сочетаний помогают, например, закрывать клавишей Escape активное окно, не затрагивая экран под ним.
• Pretext 1.0 рассчитывает разбиение многострочного текста без доступа к DOM, используя алгоритмы, близкие к браузерным.
• Chokidar 6.0 сверяет события наблюдения за файлами с состоянием диска, чтобы после серии быстрых правок не сообщать о лишних изменениях; общая документация есть в репозитории.
• Happy DOM 21.0 по умолчанию блокирует загрузку таблиц стилей и iframe; библиотека имитирует браузерную среду для тестов без открытия настоящего браузера.
• env.style меняет цвет или значок favicon для разных окружений Next.js и Vite, чтобы вкладки разработки и продакшена было легче различать.
• Pixel рисует React-интерфейсы в терминале с поддержкой графического протокола Kitty: там возможны шрифты, градиенты и даже встроенные веб-представления.
• Particle Charts строит адаптивные графики из обычного JSON в виде движущихся частиц.
• SubPulse показывает активность каналов, на которые подписан пользователь YouTube: частоту публикаций и время с последнего обновления. Это веб-приложение со статистикой, а не ссылка на видеоролик.

🖼️ Графика и медиаинструменты

• 3dsvg превращает SVG, текст или рисунок в трёхмерную модель, которую можно выгрузить в GLB или STL.
• Reels Editor редактирует фото и видео прямо на устройстве: обрезает, меняет размер, добавляет фильтры и удаляет фон без обязательной загрузки файла на сервер.
• Textmode Overlay превращает содержимое видео и canvas в живую текстовую графику с настройками вида.
• Reicon собрал тысячи SVG-иконок в двух стилях и готовые варианты подключения для разных UI-фреймворков.
• EXIF Data Viewer показывает метаданные фото и видео локально в браузере — полезно проверить дату, камеру, редактор и другие поля перед публикацией.
• fontglyph создаёт и редактирует наборы иконок, а затем экспортирует их в шрифт WOFF2.
• Imagetools обрабатывает изображения во время сборки через директивы импорта и sharp, чтобы не хранить вручную множество размеров одного файла.
• Paper.js 0.13 и 0.14 стали заметными обновлениями инструмента для векторной графики на canvas; возможности показаны на сайте проекта и в примерах.
• LittleJS 1.27 добавил трёхмерные возможности к небольшому игровому движку без зависимостей.
• Morphicons 2.0 научился плавно превращать друг в друга не только контурные, но и залитые SVG-иконки; демо анимаций помогает быстро оценить эффект.
• Strudel Flow 2 позволяет соединять музыкальные инструменты и эффекты на схеме, построенной с помощью React Flow, и получать код для Strudel. Исходники и пояснение команды показывают, как добавлять собственные узлы.

🌍 Веб и сообщество

• PHP выпустил срочные исправления для веток 8.5, 8.4, 8.3 и 8.2: две критические уязвимости при определённых условиях позволяют выполнять код на сервере без входа в систему. PHP Foundation объясняет выпуск и то, как проект усиливает работу над безопасностью. Если фронтенд размещён рядом с PHP-сервером, обновление инфраструктуры касается и его.
• Реакцию сообщества на уязвимости PHP можно увидеть и в ироничном обсуждении; само обновление, конечно, лучше не откладывать.
• /dev/null — небольшая социальная сеть для разработчиков с привязкой к GitHub; пример профиля участника показывает, как устроены страницы сообщества.
• Headlines предлагает угадать год события по заголовкам новостей — короткая игра для перерыва между задачами.