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

🧪 HTML, браузеры и доступность

Safari 27 обновил формы, CSS и загрузку модулей

В Safari 27 появились настраиваемые элементы <select>, автоматический расчет размера изображений через sizes="auto", псевдокласс :heading, функции работы с цветом alpha() и многоцветный color-mix(). Кроме того, после переработки загрузчика модулей конструкция await на верхнем уровне модулей надежно работает во всех основных браузерах.

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

Chrome 153 добавил элементы <camera> и <microphone>

Chrome 153 получил HTML-элементы <camera> и <microphone>, которые делают запрос доступа к соответствующим устройствам более понятной частью интерфейса. В нестабильных каналах также тестируются контейнеры прокрутки только по одной оси.

Следом вышла бета Chrome 154. Разработчикам стоит заранее проверять в ней сайты: так проще заметить изменение поведения браузера до того, как новая версия попадет ко всем пользователям.

Современные возможности HTML, которые стоит знать

Chris Coyier собрал обзор новых возможностей HTML: элементов <geolocation> и <install>, рисования HTML внутри Canvas и улучшенной настройки <select>. Обзор помогает понять, какие задачи браузер вскоре сможет решать без сторонних компонентов.

Веб-компонент <rich-input> показывает другой путь развития форм. Внешне это обычное текстовое поле, но оно умеет подсвечивать фрагменты и предлагать дополнения по ключевым словам благодаря OpaqueRange и CSS Custom Highlight API.

• Front-End Checklist вырос почти до 400 правил качества по доступности, производительности, безопасности и SEO. Чек-лист можно подключать к ИИ-инструментам через MCP, чтобы они проверяли проект по тем же критериям.
• Автор разбора JPEG XL в браузере объясняет, почему формат, по его мнению, дает вебу мало преимуществ перед AVIF, несмотря на появление декодирования в Chrome и Firefox.
• WebKit начал поддерживать директиву interactive-widget, которая определяет, как страница меняет размер при открытии экранной клавиатуры. В статье наглядно сравнены три доступных режима.
• Тесты показывают, что скринридеры часто игнорируют атрибут headers у ячеек таблиц. Это важно учитывать при разметке сложных таблиц и обязательно проверять их реальными средствами доступности.
• Eric Eggert разобрал спорные дополнительные требования в черновике WCAG 3 и предложил заменить необязательные правила понятными именованными модулями, которые команды смогут принимать отдельно.
• Charcuterie помогает исследовать Unicode: находить символы, связанные глифы, системы письма и визуально похожие знаки.

🎨 CSS и дизайн

Экскурсия по старым CSS-хакам

В материале «CSS-диковинки прошлого» собраны приемы, которыми разработчики когда-то заставляли браузеры показывать страницы одинаково. Среди них звездочный хак, JavaScript-выражения прямо в CSS, фильтры DirectX и знаменитый хак блочной модели.

StyleX превращает JavaScript-стили в обычный CSS

Практический разбор StyleX объясняет устройство библиотеки Meta. Разработчик описывает стили объектами JavaScript, а во время сборки они превращаются в небольшие атомарные CSS-классы, которые можно переиспользовать между компонентами.

Якоря, границы и аккуратное выравнивание

• Ahmad Shadeed показывает, как выровнять иконку относительно первой строки подписи с помощью единицы lh. Обычное центрирование выглядит хорошо только с одной строкой, а на длинном тексте иконка съезжает к середине всего блока.
• Боковые примечания на CSS Anchor Positioning размещаются на полях рядом с нужным фрагментом, не требуют JavaScript и превращаются в обычный поток на узких экранах или в старых браузерах.
• Руководство по анимации border-image показывает, как оживлять рамки из изображений и градиентов для выразительных состояний интерфейса.
• У проекта CSS-Tricks стало меньше публикаций; редактор Geoff Graham объяснил причины паузы и текущее положение издания.

CSS-инструменты и готовые эффекты

• Neat Annotations добавляет к тексту нарисованные от руки стрелки и подписи с помощью CSS; исходный код доступен в репозитории проекта.
• ds.css воспроизводит пиксельную эстетику Nintendo DS, а готовые компоненты можно посмотреть в интерактивной демонстрации.
• EaseMotion CSS — фреймворк без зависимостей с кнопками, карточками, раскладками и более чем двадцатью анимациями. Быстро оценить классы можно на демо-странице.
• @codepen/slidevars создает ползунки и палитры для интерактивного изменения CSS-переменных внутри Shadow DOM.
• prop-for-that переносит положение указателя, размер окна, видимость элемента и другие значения в CSS custom properties, чтобы интерфейс мог реагировать на них через calc() и var().
• FontSelf помогает скачать Google Fonts для самостоятельного размещения, чтобы не отправлять запросы к чужому серверу и лучше контролировать загрузку шрифтов.
• CSS Type Studio позволяет визуально подобрать гарнитуру, размер, интервалы и другие параметры типографики, а затем перенести результат в HTML и CSS.
• category-colors превращает алгоритм выбора различимых цветов для диаграмм в готовый npm-пакет. Палитры можно сразу проверить в браузерном инструменте.

📦 JavaScript

Карта терминов функционального программирования

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

Почему async/await ведет себя по-разному в разных языках

Исследование вариантов дизайна async/await начинается с короткой задачи, которая дает разные результаты в JavaScript, Rust, Python и Swift. Небольшой тест проверяет интуицию, а затем автор объясняет, когда запускается асинхронная работа и что именно означает ожидание в каждом языке.

Предложения TC39 и практика JavaScript

• В повестке ближайшей встречи TC39 есть три дополнения к Iterator Helpers: join, includes и разбиение на части. Все три предложения претендуют на Stage 4, после которого возможность считается готовой к включению в стандарт.
• Evan Hahn разбирается, почему программисты часто не любят reduce, хотя map и filter обычно проходят ревью без споров.
• Статья о внутреннем устройстве V8 объясняет, как движок исполняет и оптимизирует код и какие привычки мешают ему делать это эффективно.
• Laurie Voss предлагает использовать реестры пакетов как механизм, который поможет добиться финансирования open source от компаний, получающих пользу от библиотек.

Игры, графика и небольшие библиотеки

• На js13kGames 2026 поступило рекордное количество работ: 317 игр размером не больше 13 КБ. Начать знакомство можно с гонки SP13KTRA и roguelike-игры Hornbound.
• Zod 4.6 добавил метод .validate(): он возвращает только true или false и не тратит время на построение подробной ошибки, поэтому на невалидных данных может быть значительно быстрее .safeParse().
• parse-xml 5.0 — быстрый XML-парсер, который теперь распространяется только как ES-модуль; детали перехода перечислены в заметках к релизу.
• n64js 1.0 эмулирует Nintendo 64 целиком на JavaScript и показывает, насколько сложные системы можно перенести в браузер.

⚛️ React и React Native

React 19.3 стабилизировал View Transitions и ссылки на фрагменты

React 19.3 сделал стабильными View Transitions и Fragment Refs, а также добавил поддержку Trusted Types. View Transitions позволяют анимировать переход между состояниями интерфейса средствами браузера, а ссылка на фрагмент дает доступ сразу к группе соседних DOM-узлов без лишней обертки.

Motion 13.4 уже использует новые возможности: компонент AnimateView строит переходы между представлениями поверх браузерного API и React-компонента ViewTransition.

Нужны ли фреймворки в эпоху coding agents

Автор статьи «Важны ли еще фреймворки?» спорит с идеей, что агенту достаточно отдать React и разрешить импровизировать. Без готовых ограничений агент все равно создает собственный неформальный фреймворк, но он получается менее последовательным.

Слишком много абстракций тоже мешает: в эксперименте с React-приложением работа агента с переусложненным кодом обходилась до пяти раз дороже. Практический вывод — полезна ясная структура, а не максимальное количество слоев.

Производительность и состояние React-приложений

• React Router 8.4 сократил лишние рендеры при навигации и добавил экспериментальный сопоставитель маршрутов, который может значительно ускорить большие приложения.
• Компонент <Activity> умеет отрисовать скрытое дерево без запуска его эффектов. Разбор утечки в старом хуке показывает, почему подписки нельзя создавать прямо во время рендера.
• Статья «Real-time и offline — одна задача» описывает подключение TanStack DB к React Admin и общий подход к синхронизации локальных данных с сервером.
• Оптимизация большого выпадающего списка снизила INP с 1256 до 96 мс. Это практический пример поиска долгих обработчиков, из-за которых интерфейс медленно отвечает на действия пользователя.
• Elastic описала миграцию 1100 файлов на Redux Toolkit v2 без остановки работы над монорепозиторием.
• React DevTools 8.0 включил вкладку Suspense по умолчанию, убрал отдельный Timeline и научился показывать React-компонент для выбранного DOM-узла. Расширение доступно в Chrome Web Store.

Компоненты и библиотеки React

• Линтер @shadcn/lint позволяет описать, какие Tailwind-классы разрешены каждому компоненту, и подсказывает человеку или агенту правильный токен либо вариант.
• React Konva дает React-компоненты для сцены Konva и подходит для досок, диаграмм и графических редакторов. Новая версия требует React 19.3, а исходники находятся в репозитории.
• React Simple Maps 5.0 строит SVG-карты декларативными компонентами поверх d3-geo и TopoJSON; начать работу помогает руководство проекта.
• Astryx 0.6 научил дизайн-систему Meta менять тему по ширине экрана, типу указателя и предпочтениям контрастности средствами CSS.
• ilamy Calendar 3.0 точнее трактует конец события по RFC 5545 и Google Calendar API. Изменения описаны в релизе 3.0, а поведение видно в демо календаря.
• billboard.js 4.1 перенес React-компонент библиотеки графиков в основной пакет.
• React Native Skia 2.12 обновил высокопроизводительную 2D-графику на движке Skia, а react-native-nitro-sqlite 9.8 — быстрый доступ React Native к SQLite через JSI.
• SSGOI 7.1 создает похожие на нативное приложение переходы между страницами с помощью Web Animations API.

📘 TypeScript

Типы для новых браузерных API

Стандартные DOM-типы TypeScript обычно включают API только после их появления в нескольких браузерных движках. Поэтому уже работающие возможности вроде fetchLater или startViewTransition на отдельном элементе могут неожиданно вызывать ошибку типов.

Philip Walton подробно объяснил происхождение этой задержки и выпустил modern-web-types — замену lib.dom, которая добавляет интерфейсы, доступные хотя бы в одном браузере. Пакет полезен для экспериментов, но поддержку нужных браузеров все равно следует проверять отдельно.

• Fallow — быстрый Rust-инструмент без настройки, который находит в JavaScript- и TypeScript-проектах мертвый код, дубли, циклические зависимости и слишком сложные участки. Исходники опубликованы на GitHub.
• tshtmlwriter собирает корректный HTML цепочками типобезопасных TypeScript-методов, без конкатенации строк, шаблонных литералов и JSX.

🟢 Node.js и серверный JavaScript

Node.js 26.9 ускорил воркеры и включил экспериментальный FFI

Node.js 26.9 включил экспериментальный node:ffi по умолчанию. FFI позволяет вызывать функции нативных библиотек напрямую, без отдельного addon-модуля на C++.

В релиз также вошел модуль node:bench для бенчмарков, устроенный похоже на node:test, и экспериментальные браузерные Web Workers. Обычные worker threads теперь запускаются до двух раз быстрее и требуют меньше памяти благодаря встроенному снимку Node.

GitHub перенес среду выполнения Copilot с Node.js на Rust

GitHub рассказал, как и зачем переписал runtime Copilot на Rust. Причинами стали скорость старта и расход памяти. Переезд выполняли небольшими частями через совместимые прослойки napi-rs, поэтому продукт продолжал выпускаться каждый день.

Особенно полезны описания найденных расхождений: числа в двух языках устроены по-разному, оператор || имеет разную семантику, а случайная блокировка event loop проявляется не так, как в JavaScript.

Что готовят для следующих версий Node.js

• В ядро уже добавлены будущие util.debounce() и util.throttle(), поэтому для двух распространенных операций со временем не всегда понадобится отдельная библиотека.
• Новая версия документации Node.js уже объединена с основным репозиторием и должна вскоре заменить текущий раздел API.
• Начиная с Node 27, HTTP-клиент будет отклонять ответы со слишком большим количеством заголовков, а не молча обрезать лишние значения.
• Релизы Node.js 26.8.2 и Node.js 24.21 LTS обновили Undici и закрыли несколько уязвимостей сетевого клиента.

Серверная практика и безопасность пакетов

• Статья о повторном использовании соединений показывает, как один Undici Agent на адрес назначения избавил сервис вебхуков от лишних TLS-рукопожатий.
• Upyo отделяет создание письма от конкретного транспорта и провайдера. Библиотека опирается на веб-стандарты и работает в Node, Deno, Bun и edge-средах.
• Практическое руководство объясняет, как реализовать распределенный circuit breaker, чтобы множество экземпляров сервиса согласованно переставали обращаться к неисправной зависимости.
• Moment.js 2.31 исправил опасный обход каталогов. Хотя библиотека находится в режиме поддержки, она все еще используется во множестве проектов.
• Команда OpenJS, которая регистрирует CVE для JavaScript-проектов, объявила скоординированную паузу из-за выгорания после наплыва ИИ-сгенерированных отчетов. На активно эксплуатируемые проблемы команда продолжит реагировать.
• npm ввел 72-часовую блокировку чувствительных действий после входа с recovery code, чтобы украденный аккаунт нельзя было сразу использовать для публикации вредоносной версии.

Node.js-библиотеки и инструменты

• Javet 6.0 встраивает runtime Node.js 26 в JVM и дает двустороннее взаимодействие Java с JavaScript.
• @platformatic/memcached — клиент без зависимостей для memcached, который использует современный meta protocol и конвейер запросов по одному соединению.
• jsdom 30.1 ускорил построение и изменение DOM, getComputedStyle() и отправку событий, одновременно снизив потребление памяти.
• XO 5.0 теперь проверяет package.json и требует расширения файлов в TypeScript-импортах.
• officeParser 8.0 превращает DOCX, PPTX, XLSX и PDF в абстрактное синтаксическое дерево и получил переписанный PDF-парсер.
• oclif 6.0 обновил фреймворк Salesforce для Node CLI и отказался от установки устаревших плагинов.
• pg-boss 12.33 добавил TestClock, чтобы тесты очереди заданий PostgreSQL не ждали настоящие таймеры.
• Aedes 1.2 — компактный MQTT-брокер, который работает поверх любого потокового сервера.
• Express 4.22.3 закрыл уязвимость в четвертой основной версии фреймворка.

npm и менеджеры пакетов

• pnpm 12.4 научился управлять Rust crates и Python-пакетами вместе с npm-зависимостями в одном workspace.
• npmchart.com сравнивает динамику скачиваний и активность репозиториев npm-пакетов; например, есть отдельный график для Express.
• Обзор шестнадцати недель релизов пакетных менеджеров показывает общие защитные меры: задержки публикации, запрет install scripts, как в npm 12, и проверку пакета на вредоносный код при публикации.
• Изменения npm 12 признали слишком рискованными для Node 22, 24 и 26, поэтому новая основная версия менеджера появится в комплекте только с Node 27.

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

Открытые Vite-серверы сканируют в поисках секретов

Злоумышленники массово ищут доступные из интернета dev-серверы Vite. Уязвимость обходила server.fs.deny и позволяла прочитать .env с ключами и паролями. Исправления вошли в Vite 7.3.2 и 8.0.5, а dev-сервер по-прежнему не следует публиковать в сеть без защиты.

Свежий Vite 8.3 стоит устанавливать вместе с проверкой конфигурации: само обновление не исправит сервер, который намеренно слушает внешний интерфейс.

• Playwright 1.63 разрешил тестам объявлять именованные блокировки, чтобы сценарии с общим ресурсом не выполнялись одновременно.
• GitHub Actions получил cache-mode, ограничивающий доступ к кэшу на уровне workflow или job. Мера снижает риск атак вроде компрометации npm-пакетов TanStack.
• Vercel представил фиксированную цену CDN для Pro-команд, которая делает расходы предсказуемее при скачках трафика.

Конструкторы сайтов и CMS

• Frappe Builder — визуальный low-code конструктор сайтов с открытым исходным кодом.
• Drupal.js переосмысливает Drupal на Node.js, Vite, Tailwind и Supabase и поставляется с примером плагина, конфигурацией и Dockerfile.
• ScrewFast — минималистичный стартовый шаблон на Astro, Tailwind и Preline UI.
• Datenstrom Yellow достаточно распаковать на сервер, после чего небольшой сайт, документацию, wiki или блог можно редактировать прямо в браузере.
• Zenex CMS — многоязычная headless CMS на Next.js 16, React 19, Prisma 6, PostgreSQL и Editor.js.
• nixtml — генератор статических сайтов на Nix с коллекциями, таксономиями и привычной моделью контента.

🤖 ИИ и агентная разработка

WebMCP дает агентам понятный интерфейс к сайту

Rachel Nabors объясняет, как Google и OpenAI предлагают сайтам взаимодействовать с агентами через WebMCP. Вместо угадывания по кнопкам и тексту агент получает явно описанные действия и параметры — примерно как программный API для пользовательского интерфейса.

Интеграция @freshjuice/astro-webmcp показывает практическую сторону идеи: сайт на Astro можно открыть агентам одной строкой конфигурации.

Как строить интерфейсы и процессы вместе с агентами

• UI Skills — набор инструкций по дизайн-инженерии, которые помогают людям и агентам создавать более последовательные интерфейсы.
• Nicholas C. Zakas описал пять ролей инженера при работе с ИИ: от постановки задачи и задания ограничений до проверки и интеграции результата.
• git-lrc запускает небольшое ИИ-ревью каждого Git-коммита и пытается поймать проблему до того, как она накопится в большой набор изменений.
• Ante — автономный агент для терминала в виде одного Rust-бинарника без runtime-зависимостей.
• Hunk показывает полный diff в терминале и хранит рядом объяснение агента, почему был изменен конкретный участок.
• Разработчики поделились примерами удачных сайтов, созданных с ИИ, чтобы обсуждать не только объем сгенерированного кода, но и качество результата.

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

SnapDOM 3.0 превращает DOM-элементы в изображения

SnapDOM — альтернатива html2canvas без зависимостей, которая понимает веб-шрифты, псевдоэлементы и Shadow DOM. Версия 3.0 быстрее повторно снимает изменившиеся элементы, автоматически встраивает шрифты и создает изображение напрямую из строки HTML через fromString().

Eraser Diagrams отдает разработчику контроль над раскладкой

Eraser Diagrams — открытые Node API и CLI, которые превращают JSON-описание схемы в PNG или HTML. В отличие от Mermaid и D2, библиотека не расставляет блоки автоматически: координаты задает разработчик или модель, а инструмент прокладывает связи и применяет стили.

Проверки, терминалы и командная строка

• picospinner — маленький CLI-спиннер без зависимостей с заменяемыми символами и настраиваемым потоком вывода.
• wterm рисует веб-терминал обычными DOM-элементами, поэтому поддерживает системное выделение текста, поиск и доступность. Эмулятор написан на Zig и скомпилирован в WebAssembly.
• Скрипт git-uncommit отменяет последний или несколько последних коммитов, но оставляет изменения подготовленными к следующему коммиту.
• ghostty-web переносит VT100-ядро Ghostty в браузер и сохраняет совместимость с API xterm.js.

Визуальные и прикладные инструменты

• Page Rage превращает страницу в интерактивную игрушку, где можно разрушать готовые сайты или подключить расширение к любой странице.
• VibeSail — бесплатный трехмерный симулятор управления парусной лодкой прямо в браузере.