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

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

Складной экран меняет привычную вёрстку

Darius Cepulis исследовал, как адаптировать веб-интерфейс к iPhone Duo. В симуляторе он попробовал Device Posture API и Viewport Segments API: первый сообщает о положении устройства, второй помогает учитывать отдельные области экрана. Обе возможности пока включаются экспериментальным флагом.

На примере плеера Video.js автор попытался повторить интерфейс Netflix для согнутого устройства. Оказалось, что разместить элементы по разные стороны сгиба — только часть задачи: ограничения полноэкранного режима в Safari тоже влияют на результат. Материал показывает, какие предположения о форме экрана стоит пересмотреть при разработке адаптивных страниц.

HTML можно передавать частями и собирать в другом порядке

Dave Rupert показал, как строить вложенные комментарии с помощью потокового HTML. Обычно серверу или клиентскому коду приходится обходить дерево комментариев и собирать вложенную разметку. Здесь браузер получает фрагменты по мере готовности и вставляет их в нужные места.

В основе примера — декларативные частичные обновления HTML. Они позволяют отделить порядок получения данных от порядка элементов на странице. Пока это экспериментальная возможность Chromium, поэтому закладываться на её работу во всех браузерах рано.

Когда браузер начинает ленивую загрузку

Ben Schwarz измерил, насколько заранее браузеры загружают медиа с loading="lazy". Chrome, Firefox и Safari не ждут, пока изображение окажется прямо перед пользователем: загрузка начинается на некотором расстоянии от видимой области. Это расстояние и поведение отличаются между браузерами.

Автор объясняет разницу между lazy, eager и fetchpriority: первое откладывает загрузку, второе убирает такое откладывание, а третье подсказывает приоритет ресурса. Также рассматривается ленивая загрузка видео и аудио в Chromium. Такой разбор помогает осмысленно настраивать медиа, а не добавлять одинаковые атрибуты ко всем файлам подряд.

• Firefox предлагает расставить приоритеты для Interop 2027: после входа через GitHub можно сравнивать предложения по развитию веб-платформы. Jake Archibald рассказал о пользе прошлогоднего голосования: около 1 900 оценок помогли определить направления работы над совместимостью браузеров.
• В Firefox 158 поддержка JPEG XL включена по умолчанию. Браузер также добавляет image/jxl в заголовок Accept, чтобы сервер мог выбрать этот формат при отправке изображения.
• В бета-версии Chrome 156 появилась CSS-функция random(). В Safari Technology Preview 254 добавили calc-size() и interpolate-size, которые помогают рассчитывать и анимировать размеры с учётом естественного размера содержимого.
• Mozilla представила Firefox Enterprise для организаций. На странице корпоративной версии описаны возможности управления безопасностью, телеметрией и требованиями к рабочим браузерам.
• Apple собрала аргументы в пользу перехода с Chrome на Safari.
• Новый браузер Crest предлагает интерфейс в духе Arc и необычное сочетание движков Chromium и WebKit. Это ещё один эксперимент с тем, как организовать повседневную работу с вкладками.
• Gavin Anderegg объясняет, почему решил перейти на WebP. Формат давно перестал быть экзотикой: таблица поддержки WebP помогает оценить, подходит ли он аудитории конкретного сайта.
• Roy Fish разбирает, как цифровой отпечаток браузера заменяет cookie для отслеживания. Сайт может сопоставлять особенности браузерных API и другие сигналы, чтобы узнавать посетителя даже без привычного идентификатора в cookie.
• Let’s Encrypt объявил, что с февраля 2027 года новые и перевыпущенные сертификаты будут по умолчанию действовать 64 дня вместо 90. Для владельцев сайтов это повод проверить автоматическое продление HTTPS-сертификатов.
• Библиотека lift-html расширяет уже существующий HTML веб-компонентами, вместо того чтобы заново отрисовывать страницу в браузере. В репозитории lift-html можно изучить подход к компонентам для HTML и CSS без отдельного этапа гидрации.

🎨 CSS и дизайн

Система иконок без изменений в HTML

Lea Verou предложила управлять иконками целиком из CSS. В решении сочетаются пользовательское свойство --icon, регистрация свойств через @property, запросы к стилям и mask. Иконку можно назначать и менять там же, где задаются остальные визуальные свойства элемента.

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

Bootstrap 6 Alpha переходит на современные возможности браузеров

В первой альфа-версии Bootstrap 6 большую часть Sass-переменных заменяют CSS-переменными, а JavaScript-плагины переводят на ESM — стандартный формат модулей с import и export. CSS-переменные можно менять прямо в браузере, поэтому для части настроек темы больше не потребуется пересобирать стили.

Прокрутка может запускать самостоятельную анимацию

Brecht De Ruyte разобрал CSS Animation Triggers на пяти примерах. Идея в том, чтобы запускать анимацию при достижении определённой позиции прокрутки, а не обязательно связывать каждый её кадр с движением страницы.

Это полезно для историй с появляющимися иллюстрациями, подписями и переходами между сценами. Автор показывает, какую часть такого поведения сможет описывать CSS; сама спецификация рассматривается как кандидат для Interop 2027.

• CSS-сброс reseter.css получил крупное обновление 3.0. Полная и минимальная версии используют @layer reset, логические свойства и сборку на Lightning CSS. Слой позволяет предсказуемее переопределять базовые правила своими стилями.
• Команда WebKit подготовила интерактивные примеры Grid Lanes — сеток с укладкой элементов разной высоты, похожей на каменную кладку. Демо показывает, как описывать такую раскладку средствами CSS без JavaScript.
• Справочник CSS Units объясняет более 60 единиц измерения с живыми примерами. Он помогает разобраться, когда нужны пиксели, размеры относительно шрифта, окна браузера или контейнера.
• Библиотеку njX UI можно подключить через CDN и использовать для лендингов без фреймворка и сборщика. Внутри есть готовые компоненты, вспомогательные классы, плавно меняющаяся типографика и эффекты движения.
• FixCSS преобразует альтернативный синтаксис в обычный CSS. Автор предлагает исправленные названия свойств, значения и селекторы для спорных мест спецификации, а библиотека переводит их в поддерживаемые браузерами правила.
• Design Tokens Visualizer показывает связи между дизайн-токенами и компонентами. Такой просмотр помогает понять, где используются общие цвета, размеры и другие настройки дизайн-системы.
• FontGlyph превращает SVG- и PNG-иконки в шрифт WOFF2. Инструмент обрабатывает файлы локально и пригодится, если проекту нужен собственный иконочный шрифт.
• Набор Shaders с более чем 190 эффектами на WebGPU стал открытым. Движок, интеграции с фреймворками и компоненты эффектов доступны под лицензией MIT: свечение, волны и другие эффекты можно собирать без написания собственного кода шейдеров.
• В ascii.rest собраны сотни анимированных ASCII-композиций: от декоративных сцен до индикаторов загрузки, геометрических фигур и диаграмм для веб-страниц.

📦 JavaScript

Partytown 1.0 выносит сторонние скрипты из основного потока

После пяти лет разработки Partytown выпустил стабильную версию 1.0. Библиотека переносит выполнение сторонних скриптов в Web Worker — отдельный поток, который не конкурирует с отрисовкой интерфейса так же, как код в основном потоке страницы.

• В статье о вызове функций без круглых скобок разобран ещё один необычный приём JavaScript.
• Raymond Camden показал, как создавать небольшие настольные приложения с TinyJS. Сам проект TinyJS предлагает использовать JavaScript для маленьких приложений вне браузерной вкладки.
• Keshav Malik объясняет, как тестировать обработчик postMessage внутри iframe. Такой обработчик отвечает за обмен сообщениями между встроенной страницей и её окружением, поэтому его поведение полезно проверять отдельно от всего интерфейса.
• Движок Kiesel написан на Zig и продолжает расширять поддержку JavaScript. В отчёте о версии 0.4.0 автор сообщает о прохождении 94,7% тестов test262 и работе над современными предложениями языка.
• Klattsch открывает код синтезатора с ретроголосом робота. Его можно использовать в браузере и подключать как npm-пакет в Node.js.
• В p-map 7.1 появились pMapSettled, варианты для объектов и Map, а также pMapStop для раннего завершения. Сама библиотека p-map помогает обрабатывать набор асинхронных задач с ограничением числа одновременных операций.
• RandExp.js 0.6 генерирует случайные строки по регулярному выражению. Это удобно для создания примеров и тестовых данных, которые должны соответствовать заданному формату.
• В Handlebars 4.7.10 исправлены две критические уязвимости внедрения JavaScript, затрагивающие версии начиная с 3.0. Если проект использует этот шаблонизатор, стоит проверить установленную версию.
• Библиотека he 2.0 для кодирования и декодирования HTML-сущностей получила первый релиз за восемь лет. Теперь она распространяется в формате ESM и использует именованные экспорты.

🦕 Deno и Bun

Bun 1.4.3 добавляет встроенную проверку типов

В Bun 1.4.3 появилась команда bun check. Она использует порт проверяющей части TypeScript 7, читает tsconfig.json и сообщает об ошибках типов, как tsc. По оценке команды Bun, проверка работает в 3–6 раз быстрее; её также можно подключать к запуску, тестированию и сборке проекта.

Релиз уменьшает расход CPU у простаивающих серверов. Кроме того, обновление JavaScriptCore принесло улучшения производительности. Проверка типов и выполнение кода остаются разными задачами: новая команда помогает находить ошибки до запуска приложения.

• mochi.js предлагает автоматизацию браузера с опорой на Bun. Проект делает снижение заметности автоматизации частью своей архитектуры, а не набором дополнительных исправлений поверх Playwright или Puppeteer.

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

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

TanStack Start выпустил версию 1.0. Фреймворк предназначен для приложений на React и Solid, которым нужны и интерфейс в браузере, и серверная логика. В нём есть типизированные серверные функции и потоковый SSR: сервер может отправлять готовые части страницы, не ожидая завершения всей работы.

Приложения можно размещать на Node.js, Bun, Cloudflare Workers и других платформах. В сравнении TanStack Start с Next.js собраны различия, которые помогают оценить фреймворк под требования проекта.

Tamagui 3 помогает делить интерфейс между вебом и мобильными приложениями

В Tamagui 3 обновили систему стилей и набор компонентов для React и React Native. Одна кодовая база интерфейса может использоваться в веб-приложении и мобильных версиях, а компилятор помогает уменьшать накладные расходы такого подхода.

Среди изменений — свойства для стилизации в духе Tailwind и поддержка React Strict DOM. Релиз интересен командам, которые хотят переиспользовать не только бизнес-логику, но и значительную часть компонентов между платформами.

• Jules Blom предложил визуальные обозначения для родительского дерева и дерева владельцев React. Они помогают различать, где компонент находится в структуре интерфейса и какой компонент создал соответствующий элемент. В интерактивной песочнице деревья строятся по коду.
• В React Aria 1.22 появился компонент Sheet. В документации Sheet можно изучить выдвижную панель и встроенные возможности доступности.
• React Native Doctor ищет проблемы в приложениях React Native: ошибки поведения, узкие места производительности, вопросы безопасности, доступности и сопровождения кода.
• Coinbase рассказала о переходе с React Native на нативную мобильную разработку. В компании связывают решение с тем, что ИИ-агенты сделали отдельную реализацию функций для двух платформ дешевле. Это опыт конкретной команды, а не универсальный вывод о выборе стека.
• Команда Next.js анонсировала внеплановое обновление безопасности на 14 октября. Уведомление полезно для проверки дальнейших рекомендаций и подходящей версии фреймворка; сам анонс не заменяет описание выпущенных исправлений.
• Sergio Xalambrí поделился опытом шести месяцев разработки с Remix 3. Это взгляд на повседневную работу с новой версией после ухода фреймворка от React.
• Marionette 5.0 вернулся с ядром без Backbone, jQuery и Underscore. Авторы объясняют, зачем пересобрали основу фреймворка и какие идеи сохранили от прежних версий.
• В Astro Playground можно запускать примеры прямо в браузере. Песочница позволяет проверить разметку и компоненты Astro без создания локального проекта.

📘 TypeScript и проверка данных

Переход на Zod 4 сократил нагрузку на CPU

Команда Trigger.dev рассказала, как обновление с Zod 3 до Zod 4 позволило сэкономить до 31% ресурсов CPU. Zod проверяет реальные данные во время выполнения программы, поэтому стоимость таких проверок становится заметной, когда через сервис проходит много запросов и событий.

• Вокруг Zod появилось новое обсуждение безопасности, но, по разъяснению Colin McDonnell, вредоносный релиз не попал в npm. Изменения в репозитории, связанные с версией 4.6.6, были отменены в тот же день ещё в сентябре. Здесь важно различать изменение кода в репозитории и публикацию пакета, который устанавливают пользователи.
• Theo Browne экспериментирует с переносом компилятора TypeScript 7 на Rust с помощью ИИ-агентов. Репозиторий ts-rust содержит ранний результат этого эксперимента; рассматривать его как готовую замену компилятору пока рано.
• Schema Benchmarks сравнивает производительность библиотек проверки схем и отдельно измеряет этапы обработки. Это помогает понять, что именно занимает время, а не выбирать библиотеку по одному общему числу.

⚙️ Node.js

Node.js 26.12 закрепляет конфигурационные файлы

В Node.js 26.12.0 конфигурационные файлы стали стабильными. Через них можно описывать настройки выполнения, тестов, наблюдения за файлами и разрешений, вместо того чтобы хранить всё в длинной командной строке. Синтаксис подключения разобран в документации параметра --config-file.

Вышедшая перед этим Node.js 26.11.0 добавила --process-timeout для завершения процесса по таймеру и поддержку виртуальных таблиц в node:sqlite. Такие таблицы позволяют подключать к SQLite источники данных с собственным поведением.

• В Node.js 24.22.0 LTS перенесли util.throttle и util.debounce. Первый ограничивает частоту вызовов, второй помогает дождаться паузы в серии событий перед запуском функции.
• На 21 октября анонсированы обновления безопасности Node.js для веток 26.x, 24.x и 22.x, включая исправление как минимум одной проблемы высокой серьёзности. На 20 октября запланирован переход Node.js 24 в режим сопровождения, а на 28 октября — начало активной LTS-поддержки Node.js 26.

Skia Canvas 4.0 рисует на сервере и загружает PDF

Skia Canvas предоставляет Canvas API для Node.js на базе графического движка Skia, который используется и в Chrome. Он умеет работать с изображениями, шрифтами, путями и фигурами, использовать GPU и выводить результат как в файл, так и в отдельное нативное окно.

В версии 4.0 уменьшили размер и ускорили работу, а также добавили нативную загрузку PDF. Исходники Skia Canvas пригодятся для изучения серверной генерации графики, превью и других сценариев, где раньше приходилось запускать браузер ради отрисовки.

В новом тесте WebSocket Node.js приблизился к задержкам C

Daniel Lemire заново сравнил WebSocket-серверы на Node.js, Bun и Deno. В этот раз он использовал клиент и сервер-посредник на C как точку отсчёта. В проверенном сценарии Node.js 26 с uWebSockets.js показал задержки, близкие к C, и опередил Bun и Deno.

Автор также пересмотрел своё сравнение 2023 года: в старом сервере на Bun была ошибка. Результат относится к конкретной библиотеке и сценарию пересылки сообщений, поэтому его полезно воспринимать как повод измерить собственную нагрузку.

• Статья «Быстрый Node.js — это прежде всего меньше работы» предлагает смотреть на лишние действия приложения при поиске причин медленной работы. Это полезный ракурс перед попыткой заменить среду выполнения или переписать весь сервис.
• В Express 5.3.0 обновили зависимости и исправили ошибки. Исправления в qs, proxy-addr и body-parser закрывают пять известных уязвимостей, поэтому релиз заслуживает внимания даже без крупных новых функций.
• H3 v2 переписан вокруг стандартных Request и Response. HTTP-фреймворк, на котором основан серверный слой Nitro и Nuxt, рассчитан на Node.js, Bun, Deno, Workers и браузер; руководство по миграции H3 помогает разобраться с изменениями API.
• В Hono 5.0 RC меняются правила подключения модулей и адаптеров. Фреймворк переходит только на ESM, а адаптеры для разных сред выполнения выносятся в отдельные пакеты.
• ImapKit запускает управляемый IMAP-сервер внутри тестов. Почтовые ящики можно держать в памяти и намеренно воспроизводить сбои, чтобы проверять устойчивость почтового клиента; для управления из других языков есть REST API.
• В p-queue 10.0 убрали все зависимости, перешли на EventTarget и сохранили контекст AsyncLocalStorage вызывающего кода. Очередь p-queue ограничивает число параллельных задач и частоту их запуска.
• Вышел node-oracledb 26.0 — официальный драйвер Oracle Database для Node.js. Он позволяет приложению подключаться к базе Oracle и выполнять запросы.

🤖 ИИ и автоматизация

OpenCode 2.0 добавляет фоновых субагентов и программную работу с инструментами

В OpenCode 2.0 переработали открытый агент для разработки на Bun. Среди основных изменений — субагенты, работающие в фоне, и режим, в котором модель может писать код для вызова инструментов через MCP — протокол подключения внешних возможностей к ИИ-приложениям. Для управления агентом из программ появились клиенты для обычного JavaScript и Effect.

Начать работу с OpenCode можно на сайте проекта. Для сравнения подходов к устройству помощников можно изучить открытый проект Pi.

• LangWatch помогает отслеживать и тестировать обращения к языковым моделям. Платформа с открытым кодом собирает трассировки, поддерживает маршрутизацию вызовов и позволяет контролировать работу агентов и ассистентов в компании.
• n8n-check проверяет регрессии в сценариях n8n: использует JSON-наборы данных, локальные HTTP-заглушки, точные проверки запросов и ответов, а также отчёты JUnit. Это способ замечать, когда изменение автоматизации ломает уже работавший процесс.

⚒️ Инструменты и практика разработки

Личный сайт на Swift вместо Astro

Sindre Sorhus рассказал, почему переписал свой сайт на Swift вместо Astro. Теперь язык используется не только для логики: через него описываются разметка и стили. Часть ошибок, включая неверные ссылки и опечатки в стилях, выявляется при компиляции.

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

• В опросе разработчиков Stack Overflow за 2026 год приняли участие 30 903 человека. JavaScript занял первое место среди языков двенадцатый год подряд, TypeScript — шестое. Результаты отражают ответы участников опроса и помогают следить за распространённостью технологий.
• Screen Ruler измеряет элементы страницы и позволяет менять CSS на лету. Расширение для Chromium совмещает визуальную линейку, просмотр стилей и MCP-сервер.
• Каталог webvitals.fyi сравнивает 29 инструментов для анализа производительности. Оценки зависят от возможностей инструмента и задач пользователя: например, фронтенд-разработчика или инженера по производительности.
• Реестр плагинов Vite помогает искать и сравнивать расширения для Vite, Rolldown и Rollup. Он пригодится при выборе плагина для сборки и проверке доступных альтернатив.
• dompdf.js преобразует HTML в PDF прямо на клиенте. В основе движка — TypeScript, Web Workers, Rust и WebAssembly, поэтому для генерации документа не нужен отдельный сервер обработки.
• В Happy DOM 21.0 загрузка внешних таблиц стилей и iframe отключена по умолчанию. Happy DOM реализует браузерное окружение на JavaScript без графического интерфейса и используется в тестах; обновление меняет поведение внешних ресурсов.
• env.style назначает разные значки вкладок для окружений разработки. Так проще отличать production, локальную версию и предпросмотр, когда одновременно открыто много похожих страниц.
• Cap предлагает CAPTCHA с самостоятельным размещением, без Google, телеметрии и визуальных головоломок. Проект рассчитан в том числе на замену reCAPTCHA.
• В DevSexy собраны 35 инструментов для JSON, JWT, сертификатов, текста и кода. Обработка выполняется локально в браузере, что удобно для работы без отправки данных стороннему серверу.
• QuickTiny подбирает действия для вставленного текста с помощью ИИ: например, форматирование, преобразование или сжатие. Вместо поиска нужной утилиты предлагается начать с самих данных.
• Markdy превращает текстовое описание архитектуры в анимированную диаграмму. Его специализированный язык компилируется в анимации Web Animations API, избавляя от ручного расчёта координат и отрисовки на canvas.
• Расширение «.MD this page» преобразует веб-страницу в Markdown. Оно убирает лишние элементы, сохраняет структуру и позволяет скопировать результат или скачать файл.
• Каталог r4ck собирает предложения VPS, облачных и физических серверов, GPU и PaaS. Варианты можно искать по характеристикам, цене и расположению.
• Movie Scene Map показывает места съёмок фильмов и сериалов. Можно искать локации по названию произведения или посмотреть, что снимали в выбранном месте на карте.

Обновления инструментов командной строки

• pnpm 12.12 получил очередное обновление. Список изменений пригодится перед обновлением менеджера пакетов в проекте и CI.
• В actions/setup-node 7.1 появилась загрузка версии Node.js из mise.toml. Это помогает использовать один источник настройки версии для локальной разработки и GitHub Actions.
• caniname проверяет доступность имени проекта в npm и Netlify. Утилиту командной строки можно расширять проверками других сервисов.
• fast-cli 6.0 измеряет скорость скачивания и отправки данных. Для разовой проверки достаточно запустить npx -y fast-cli.