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

🧪 HTML и браузерная платформа

Почему разработчики не всегда используют возможности браузера

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

Chrome позволит ограничить соединения страницы

В Chrome 152 появится HTTP-заголовок Connection-Allowlist. С его помощью сайт сможет перечислить серверы, к которым странице разрешено обращаться, а браузер заблокирует остальные подключения. Это помогает снизить риск нежелательных запросов, например после внедрения стороннего скрипта. При настройке нужно учесть все внешние сервисы, которые действительно нужны странице.

Разработчики обсуждают следующие общие задачи для браузеров

Олли Уильямс предложил кандидатов для будущей программы совместимости браузеров. Среди них — Sanitizer API для безопасной очистки HTML, focusgroup для управления фокусом в группах элементов и grid-lanes для новых возможностей сетки. Пока это предложения, а не обещание скорого появления во всех браузерах.

• В Safari Technology Preview 253 в инструментах разработчика появилось замедление сети: так проще проверять загрузку сайта при плохом соединении.
• Firefox 157 обновил оформление. Разработчикам полезно проверить, как их сайты выглядят рядом с новым браузерным интерфейсом.
• Полифил Custom Attributes показывает, как добавлять повторно используемое поведение обычным HTML-элементам через атрибуты с собственным жизненным циклом. Это экспериментальная идея для будущего стандарта.
• Энди Белл объясняет, как не вызывать масштабирование страницы при двойном касании кнопки. Материал пригодится при настройке мобильных элементов управления.
• Разработчики example.com объяснили появление JavaScript на странице: многие автоматические клиенты его не запускают, поэтому передаваемых данных становится меньше. История изменения сайта дает дополнительный контекст.

🎨 CSS и дизайн интерфейсов

GitHub заменил CSS-in-JS на CSS Modules и ускорил серверный рендеринг

GitHub рассказал, как за три года перевел сайт со styled-components на CSS Modules. CSS-файлов стало больше, зато время серверного рендеринга страницы, по измерениям команды, сократилось на 55%. Стили больше не нужно вычислять во время работы JavaScript для каждого компонента.

CSS Modules — соглашение для инструментов сборки: классы из файла .module.css получают уникальные имена и не сталкиваются с классами из других компонентов. Инструкция по началу работы показывает, как это устроено.

CSS может определять пересечение элементов

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

Контейнерные запросы требуют другого подхода к адаптивной верстке

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

• Темани Афиф нашел способ получать сведения о CSS Grid через анимации от прокрутки: эксперимент позволяет узнавать число строк и колонок и положение элементов без JavaScript.
• В материале о плавной типографике объясняют, почему автор предпочитает единицы ширины окна контейнерным запросам для размера шрифта.
• Transitions.dev собрал примеры CSS-переходов для интерфейсов; исходный код проекта помогает разобраться в реализации.
• Шпаргалка по дизайну интерфейсов показывает на иллюстрациях приемы работы с цветом, скруглениями, масштабом, анимацией и доступностью.
• Конструктор Bastardica смешивает символы двух веб-шрифтов и дает скачать результат — необычный способ поэкспериментировать с типографикой.
• В soundcn собрано более 800 звуков для веб-интерфейсов; перед использованием стоит проверить лицензии. Есть и репозиторий проекта.
• Правила проверки CSS вынесены из eslint-plugin-unicorn в отдельный пакет eslint-cssicorn. Так правила для стилей можно подключать независимо от большого набора правил для JavaScript.

📚 Обучение веб-разработке

• Маттиас Бинеггер пишет о проблемах обучения веб-разработке, а Энди Белл отвечает на его размышления. Оба текста помогают задуматься, как люди осваивают основы платформы на фоне все более сложного набора инструментов.

📦 JavaScript и Web API

Три новых метода итераторов приблизились к стандарту JavaScript

По итогам сентябрьского заседания TC39 финальной стадии достигли предложения о разбиении итератора на части, объединении значений в строку и проверке наличия значения. Итератор позволяет получать элементы последовательности по одному; новые методы сокращают код, который раньше приходилось писать вручную. Метод includes уже доступен в Chrome 154, но перед использованием без запасного варианта нужно проверить поддержку других браузеров.

Объекты без прототипа можно создавать быстрее

Маттео Коллина исследовал производительность объектов с null вместо прототипа. Такой объект удобен как словарь без унаследованных свойств, но V8 сразу хранит его свойства в менее быстром режиме. Автор показывает способ сначала создать обычный объект, а затем убрать прототип, сохранив быстрый доступ к свойствам. Подробности устройства движка есть в объяснении команды V8.

• В статье о необычной записи с тегированным шаблоном показано, как передать функции объект с именем и значением переменной. Пример помогает разобраться сразу в двух возможностях JavaScript.
• На площадке Dittytoy появился трек Take on Me, полностью воссозданный на JavaScript, включая синтезированный вокал. Пример показывает возможности программной генерации звука в браузере.

⚛️ React и похожие библиотеки

Preact 11 обновил гидрацию и работу с ref

Preact 11 вышел после долгой подготовки, которую можно проследить по обсуждению релиза. Библиотека улучшила гидрацию — подключение интерактивности к HTML, подготовленному на сервере, — и автоматически передает ref компонентам. Пакет теперь публикуется только как ESM, поэтому перед обновлением стоит проверить сборку по руководству по миграции.

• Ink 8.0 — библиотека для терминальных интерфейсов на React — требует React 19.3 и добавляет смещение прокрутки для длинных экранов.
• Inferno 10 переносит больше работы из времени выполнения в JSX-компилятор, чтобы быстрее отображать интерфейс.
• Таннер Линсли представил идею Redact — более простой реализации, совместимой с API React. За развитием можно следить в репозитории.
• Redux Toolkit 2.13 добавил поддержку TypeScript 7 для проектов, которые используют этот набор инструментов управления состоянием.

🧩 Фреймворки

Nuxt 4.6 делает серверную часть менее зависимой от Nitro

В Nuxt 4.6 появилась экспериментальная возможность собирать серверную часть через Vite без обязательной привязки к Nitro. Также добавлены встроенные сессии и поддержка Vue Vapor. Вместе с релизом вышел Nuxt CLI 4.0. Для существующего проекта особенно важно проверить настройки сервера и модулей перед переходом.

Remix 3 вышел без обязательной зависимости от React

Remix 3.0 стал стабильным релизом обновленного полнофункционального фреймворка. Теперь React для него не обязателен, а описание релиз-кандидата объясняет новый подход подробнее. Это заметное изменение для разработчиков, которые связывали Remix только с React-приложениями.

• SvelteKit 3 в основном упрощает и приводит в порядок существующие возможности. Удаленные функции пока остаются экспериментальными; пройти изменения поможет руководство по миграции с командой sv migrate.
• Qwik 2.0 дошел до релиз-кандидата, а Ember 7.3 получил очередное обновление.
• Команда Angular описала новый компилятор с компонентами на Rust: перенос TypeScript 7 на Go не предоставляет часть API, которыми пользуется нынешняя сборка. Параллельно вышел Angular 22.2.
• Vinext 1.0 реализует возможности Next.js поверх Vite, поддерживает Pages Router и App Router и предлагает путь миграции существующих приложений.
• Автор Solid сравнивает архитектуру HTMX, React, LiveView и других подходов: все они по-разному распределяют между клиентом и сервером навигацию, содержимое и быстрый отклик интерфейса. Solid 2.0 пытается охватить больше таких сценариев.
• В бенчмарке JavaScript-фреймворков появились результаты Chrome 154 для 196 реализаций одного приложения. Сравнивать их полезно по нескольким показателям сразу: скорости, размеру сборки и объему выполняемой работы.

📘 TypeScript

• Статья о читаемых регулярных выражениях на TypeScript показывает, как собирать большое выражение для SemVer из небольших именованных частей. Так проще понять и изменить сложную проверку строки.
• Разбор автоматического уточнения типов после filter показывает, какие функции проверки позволяют TypeScript сузить тип элементов массива, а какие оставляют исходный тип.
• Typia 15.0 генерирует проверки значений во время выполнения на основе типов TypeScript. Это полезно на границе приложения, где данные пришли извне и одного описания типа недостаточно.

⚙️ Node.js и серверные рантаймы

Встроенные возможности Node.js заменяют часть зависимостей

Флавио Копес собрал 12 встроенных модулей и API Node.js, которые закрывают задачи популярных npm-пакетов. Для каждого он отмечает уровень стабильности и ограничения. Если нужная функция уже есть в Node.js, проект можно упростить, но переход требует проверки поведения и поддержки нужной версии рантайма.

Booking.com снизил стоимость Node.js-сервиса на 38%

Инженеры Booking.com описали, как перестроили запуск и распределение нагрузки в Node.js-сервисе. Они перешли с PM2 на рабочие потоки Watt и изменили конфигурацию процессов. Полученная экономия относится к их нагрузке; общий принцип — измерять, где сервис тратит ресурсы, прежде чем увеличивать число серверов.

• Разработчик рассказал, почему вернулся с Deno на Node.js: генератор сайта удалось перенести почти без изменений, а экосистема Node за это время заметно улучшилась. Для сравнения есть его старый рассказ о выборе Deno.
• Bun экспериментирует с предварительной компиляцией JavaScript. В показанном примере запуск быстрее и расход памяти ниже, но итоговый исполняемый файл примерно вдвое больше. Это предварительные результаты, а не обещание для всех программ.

🤖 ИИ и инструменты агентов

• В руководстве по модификациям Claude Code показано, как расширять поведение агента на JavaScript: реагировать на события и добавлять собственный интерфейс. Описание Mods помогает понять возможности механизма.
• Pi 1.0 — компактный агент для программирования на Node.js — получил поддержку MCP и дополнительных моделей через Codemode. Экспериментальный Pi Durable предназначен для длительных задач, которые должны переживать сбои.
• Cloudflare Turnstile Spin помогает агентам настраивать защиту Turnstile для создаваемых сайтов.

🚀 Производительность и качество

Anthropic сократила время до готовности интерфейса Claude

Команда Anthropic описала двухнедельную работу над скоростью веб-приложения Claude. Время до возможности начать вводить текст для 75-го процентиля пользователей сократилось с 3,1 до 0,55 секунды. Помогли измерения небольших сдвигов верстки, поиск дорогого селектора :root:has(), устранение лишних перезагрузок и исправление взаимодействия с предварительной загрузкой Chrome. История показывает, почему общая метрика скорости не всегда указывает на конкретную причину задержки.

• В практическом руководстве Storybook по тестированию компонентов объясняют, как проверять отдельные части интерфейса до сборки целой страницы.
• Size Limit позволяет задать предел размера или времени загрузки JavaScript и сообщать в CI, когда изменение выходит за бюджет.
• Netlify сократила задержку запуска Edge Functions примерно в пять раз, перейдя от размещенных V8-изолятов к микро-VM в собственной edge-сети. Это серверная оптимизация, которая может ускорить ответ пользователю.
• Lightpanda 1.0 — браузер без графического интерфейса для автоматизации. Его можно использовать через Puppeteer или Playwright либо запускать сценарии на JavaScript.

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

Vite+ 1.0 объединил задачи разработки в одном CLI

Vite+ 1.0 предлагает команду vp для запуска сервера разработки, линтинга, форматирования, тестов и сборки. При желании через нее можно управлять версией Node.js и пакетным менеджером. Настройки хранятся в vite.config.ts, а команда миграции помогает перевести существующий проект. В обзоре работы VoidZero также упомянуты изменения в Oxc React Compiler, Vitest и линтинге с учетом типов.

EmDash 1.0 предлагает CMS для сайтов на Astro

EmDash достиг версии 1.0. Это открытая CMS на Astro: каждый сайт получает MCP-сервер, чтобы агент мог работать с содержимым. Для расширений появился прием плагинов и каталог. В техническом рассказе Cloudflare объясняется децентрализованный реестр на AT Protocol и запуск плагинов в изолированной среде. Проект также может работать на Node.js.

Mermaid 12 меняет расположение диаграмм по умолчанию

В Mermaid 12.0 для блок-схем и нескольких других типов диаграмм по умолчанию используется движок ELK. Старые схемы могут выглядеть иначе; если важен прежний вид, можно указать layout: dagre. Также добавлены диаграммы вариантов использования UML.

Effect 4 перестроил основу библиотеки

Effect 4.0 обновил библиотеку для приложений, где нужно управлять ошибками, параллельными задачами и ресурсами. Команда переписала внутренний механизм выполнения: по ее измерениям, минимальная сборка стала в пять раз меньше, а расход памяти на параллельную задачу — на 86% ниже. Для существующих проектов это крупное обновление, поэтому перед переходом нужно проверить изменения API.

Обновления инструментов

• Cloudflare выпустила единый cf CLI для всех своих API: прежде Wrangler покрывал только часть возможностей.
• Markuplint 5.0 проверяет HTML-разметку на ошибки. Можно посмотреть релиз в репозитории и попробовать интерактивную площадку.
• npm stage publish теперь умеет создавать новый пакет: автоматизации больше не нужен отдельный первый выпуск вручную.
• pnpm 12.8 и более новая версия 12.10 получили отдельные записи о релизах; при обновлении стоит читать изменения для всех пропущенных версий.
• MSW 3.0 стал пакетом только с ESM, добавил плагин для Vite и перехват навигации, отправки форм и подписок GraphQL. Библиотека помогает подменять ответы API при тестировании.
• QUnit 3.0 опубликовал руководство по переходу для проектов с тестами на QUnit.
• TinyBase 10 обновил библиотеку для хранения и синхронизации данных в приложении.
• TanStack Charts 1.0 позволяет описывать диаграммы типизированным JavaScript независимо от фреймворка и выводить их через SVG или Canvas. В каталоге примеров есть столбчатые, линейные и другие виды графиков.
• DOCX 9.8 расширил генерацию документов Word из JavaScript: появились диаграммы, фигуры, водяные знаки и новые математические обозначения. Сайт библиотеки содержит примеры.
• wavesurfer 8.0 обновил библиотеку отображения звуковой волны и воспроизведения аудио, улучшив эффективность и исправив ошибки.
• pretty-bytes 7.2 переводит число байтов в понятную строку, например размер файла для интерфейса.
• postal-mime 4.0 разбирает почтовые сообщения в разных JavaScript-средах.
• Video.js 10 обновил библиотеку для создания видеоплееров на веб-страницах.
• ESLint 10.12 получил очередное обновление инструмента для статической проверки JavaScript-кода.
• pixelmatch 8.0 сравнивает изображения попиксельно и использует более точную для восприятия цвета метрику. После обновления количество найденных различий может измениться.
• PR Comment Inbox собирает комментарии к GitHub pull request в интерфейс, похожий на почтовый ящик, с темами и отметками о прочтении.
• Electron Forge 8 обновил инструменты для сборки и публикации настольных приложений на Electron.
• В Git 2.56 появились git add –resolved для подготовленных исправлений конфликтов и git branch –delete-merged для удаления уже слитых веток.
• Автор заметки объясняет историю популярных портов 3000 и 8080, которые часто встречаются в локальной разработке.
• Опрос State of Devs 2026 собрал ответы более пяти тысяч разработчиков о карьере, отношении к ИИ, увлечениях и условиях работы.