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

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

Firefox 153 расширяет возможности Picture-in-Picture и всплывающих элементов

В Firefox 153 появилась поддержка Picture-in-Picture API на компьютерах и улучшилось поведение popover="hint". В предварительном режиме браузер также получил Native Containers, которые разделяют сайты по изолированным окружениям и помогают не смешивать cookies и авторизацию разных задач.

Web Locks API координирует работу вкладок

Web Locks API помогает управлять параллельной работой нескольких вкладок и воркеров одного сайта. Они могут по очереди получать блокировку на важную операцию, например синхронизацию локальных данных, и не перезаписывать результат друг друга. Само API и примеры его использования собраны в документации MDN.

• Стандарт электронных книг EPUB 3.4 перешёл в статус Candidate Recommendation Draft. Формат основан на HTML, CSS и других веб-технологиях, поэтому многие привычные знания фронтендера применимы и к цифровым изданиям.
• Эксперимент с настоящим DOM внутри <canvas> показывает, как совместить свободный графический рендеринг Canvas с обычными HTML-элементами.
• Анимированный JPEG, замаскированный под обычное изображение, наглядно раскрывает внутреннее устройство формата и необычные способы интерпретации его данных.

🎨 CSS и дизайн

Турнирная таблица FIFA на CSS Grid и Subgrid

Ahmad Shadeed воссоздал сложную адаптивную таблицу FIFA с помощью Grid и Subgrid. Разбор показывает, как выровнять связанные данные по общим колонкам, сохранить читаемость на узком экране и не превращать разметку в набор жёстких размеров.

Новые возможности CSS для анимации и сложных раскладок

Masonry-раскладка с плавной анимацией построена на CSS Grid и Anchor Positioning, а в перспективе ту же задачу упростит grid-lanes. Ещё один пример показывает, как анимировать <details> только средствами CSS, без JavaScript-обработчиков открытия и закрытия.

Для небольших декоративных эффектов тоже появляется меньше причин подключать скрипты: конфетти можно разбросать с помощью CSS-функции random().

Цвет интерфейса меняется вместе со временем суток

В примере с Temporal API и CSS-функцией color-mix() локальное время пользователя превращается в плавно меняющуюся цветовую тему. Temporal отвечает за корректную работу со временем, а CSS смешивает оттенки без большого набора заранее рассчитанных цветов.

• Обзор Custom Highlight API, text-indent и font-family: math знакомит с тремя возможностями уровня Baseline: подсветкой текста без изменения DOM, типографскими отступами и подходящим шрифтом для формул.
• Коллекция 100 способов центрировать элемент в CSS полезна как интерактивная шпаргалка, хотя для рабочего кода лучше выбирать понятные решения на Flexbox или Grid.
• edge-aura создаёт на Canvas 2D живое свечение по краям окна браузера без CSS-фильтров.
• Decoy Font — экспериментальный TTF-шрифт, в котором один и тот же знак выглядит по-разному при разных масштабах восприятия.
• shadcn/typeset оформляет HTML и Markdown одной CSS-обёрткой и несколькими переменными. Настроить стили и получить готовый код помогает визуальный конструктор Typeset.
• Автор Linaria объяснил, почему создал новый инструмент: dx-styles предлагает zero-runtime подход к CSS-in-JS и вычисляет стили при сборке, а не в браузере. Для существующих проектов подготовлено руководство по переходу с Linaria.

♿ Доступность и UX

Как Figma добавила доступность в интерфейс на Canvas

Canvas не создаёт привычное дерево HTML-элементов, поэтому браузер не может автоматически передать экранному диктору структуру интерфейса. Figma подробно описала, как заново реализовала семантику, управление с клавиатуры и фокус для своего графического редактора.

Видимая рамка фокуса снова важна

Статья о возвращении CSS-свойства outline напоминает, почему нельзя бездумно отключать рамку у активных элементов. Она показывает пользователю клавиатуры, где он находится, а псевдокласс :focus-visible позволяет отображать рамку именно тогда, когда она полезна.

• Руководство по aria-expanded объясняет, как сообщать вспомогательным технологиям, открыто или закрыто связанное меню, панель либо список.
• A11Y.md хранит проверяемые правила доступности для ИИ-агентов, чтобы требования WCAG учитывались во время генерации кода.
• AIMAC сравнивает модели ИИ по тому, насколько доступные интерфейсы они создают в задачах программирования.
• Исследование мобильных устройств среднего и бюджетного уровня помогает собрать реалистичный набор телефонов для тестирования, а не ориентироваться только на новые флагманы.

📦 JavaScript и WebAssembly

Быстрый JavaScript-парсер благодаря структурам данных

В разборе Yuku показано применение data-oriented design: данные хранятся в форме, удобной для последовательной обработки процессором, что уменьшает лишние обращения к памяти. Сам парсер Yuku можно сравнить с альтернативами в таблице производительности и онлайн-песочнице, а Yuku Analyzer добавляет статический анализ кода.

WebAssembly подключается как обычный модуль

unwasm позволяет импортировать .wasm-файлы почти так же, как ES-модули. Инструмент встраивается в процесс сборки и берёт на себя служебный код, который обычно нужен для загрузки и запуска WebAssembly.

• Travels реализует undo/redo через небольшие JSON-патчи вместо полных снимков состояния, поэтому подходит для редакторов и других приложений с историей действий.
• gridstack.js 13.0 создаёт адаптивные панели и дашборды, где блоки можно перетаскивать и менять в размере.
• Jelly UI предлагает 40 веб-компонентов без внешних зависимостей и добавляет нативным контролам мягкие физические анимации.
• Minne — фреймворк веб-компонентов на сигналах, которому не нужны декораторы и обязательный этап сборки.
• BotKit помогает написать на JavaScript самостоятельного ActivityPub-бота, которого можно читать из Mastodon. Запустить его можно в Deno, Node.js или Cloudflare Workers.

⚛️ React и Next.js

ReactBench проверяет, умеют ли ИИ-агенты писать рабочий React

ReactBench оценивает модели на реалистичных задачах по созданию React-приложений, а не только на коротких фрагментах кода. Описание методики помогает понять, какие ошибки учитывает тест; проект создан командой, стоящей за React Scan и Million.js.

Кэширование в Next.js 16

Подробное объяснение Cache Components в Next.js разбирает модель, где страницы по умолчанию динамические, а разработчик явно кэширует подходящие части через use cache. В статье также показаны cacheLife, cacheTag и их связь с быстрыми переходами Instant Navigations.

• Официальная страница команды React теперь отражает новую структуру управления: Leadership Council и рабочие группы компилятора, React Native и документации. Изменения продолжают переход проекта под управление React Foundation.
• Pete Hunt возглавит Next.js после возвращения в экосистему React вместе с Ником Шроком, одним из создателей GraphQL.
• Разработчики обсуждают, почему React всё ещё остаётся самой заметной UI-библиотекой и какие преимущества потребуются возможному преемнику.
• Руководство показывает, как собрать React Native-чат с локальной языковой моделью и RAG, чтобы ответы учитывали документы конкретного приложения.
• react-dropzone 17.0 даёт хуки для зон загрузки файлов через drag-and-drop, а базовый пример показывает минимальную разметку и обработку выбранных файлов.
• Библиотека React Mosaic в версии 7.0 обновила движок мозаичной раскладки компонентов и поддерживает React 16–19. Оценить оконный интерфейс можно в интерактивном демо.
• DSSSP предлагает SVG-компоненты для частотных графиков и управления аудиофильтрами; поведение компонентов видно в живых примерах.
• brainless переносит интерфейсы Claude Code, Codex и Grok в компоненты shadcn, включая онбординг терминального агента и отображение diff.
• react-fontawesome 3.4 поддержал новые анимации набора Font Awesome, появившиеся в версии 7.3.
• use-local-storage-state 20.0 сохраняет состояние React-компонента в localStorage.
• react-dropdown 2.0 предоставляет компактный и доступный выпадающий список.
• react-joyride 3.2 помогает создавать пошаговые экскурсии по интерфейсу приложения.
• React Native Skia 2.9 обновил высокопроизводительный графический движок для React Native.

🛰️ Фреймворки

Nuxt 4.5 готовит переход к Nuxt 5

Nuxt 4.5 стал одним из крупнейших обновлений ветки: внутри Vite 8 и Rspack 2, экспериментальная потоковая серверная отрисовка и новый composable useLayout. Параллельно команда готовит Nuxt 5, а поддержка Nuxt 3 завершается 31 июля.

Vue 3.6 приблизился к стабильному релизу

Vue 3.6 вышел в статусе Release Candidate. Главная часть обновления — завершённый Vapor Mode, который сокращает объём служебной работы виртуального DOM и может сделать компоненты легче и быстрее.

Сравнение фронтенд-фреймворков на одном приложении

Автор Framework Benchmarks реализовала одинаковое погодное приложение на React, Angular, Solid, Alpine.js и других решениях, а затем сравнила размер бандла, скорость сборки и пользовательские метрики. Дополнительный инструмент Stack Match подбирает фреймворк по заданным требованиям.

• Angular переходит на ежегодный график крупных релизов: версия 23 запланирована на июнь 2027 года, через год после выхода Angular 22.
• Preact 11 Beta 2 стал одной из последних тестовых версий перед релизом; основные несовместимые изменения уже собраны в руководстве по миграции.
• Фреймворк Astro в версии 7.1 добавил более точное управление CSP для встроенных скриптов и стилей и позволил полностью настраивать URL пагинации.
• Блог Cloudflare переехал на EmDash — CMS на базе Astro, которую компания называет современным продолжением идей WordPress; результат можно увидеть на самом блоге.
• AngularEditor 3.1 обновил WYSIWYG-редактор для Angular 22+, а демо позволяет проверить его до установки.
• Pinia 4.0 стала компактнее и перешла на распространение только в формате ES-модулей.
• Componentry собирает готовые React-компоненты для анимированного текста, hero-блоков и визуальных эффектов.
• shadcn-admin-kit предоставляет открытые блоки shadcn/ui для админок, внутренних сервисов и B2B-приложений.
• performative-ui — сатирическая библиотека компонентов, которая пародирует интерфейсы стартапов и их гонку за впечатляющими показателями.
• termcn распространяет через реестр shadcn настраиваемые React-компоненты для терминальных приложений на Ink и OpenTUI.
• OpenUI описывает генеративный интерфейс компактным потоковым форматом и умеет отображать его разными рендерами, включая React.
• Первая официальная конференция Three.js пройдёт в Париже 10–11 сентября; среди участников будет создатель библиотеки Mr.doob, а познакомиться с самим 3D-движком можно на сайте Three.js.

📘 TypeScript

• WebStorm 2026.2 добавил поддержку TypeScript 7 и улучшил работу с проектами на Svelte и Vue.
• Optique — типобезопасный конструктор CLI-парсеров для TypeScript: структура команд одновременно задаёт допустимые комбинации параметров, итоговые типы и автодополнение.
• Counterfact поднимает локальный stateful mock-сервер по OpenAPI-описанию и сохраняет типобезопасность TypeScript, горячую перезагрузку и общее состояние между запросами.

⚙️ Node.js

• actions/setup-node@v7 обновил официальный GitHub Action для установки Node.js и настройки кэша пакетных менеджеров в CI.
• np 12.0 поддержал npm 12 и staged publishing, упрощая проверку и безопасную публикацию пакетов.

🛡️ Безопасность

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

Исследователи разобрали атаку через JavaScript-задание на фальшивом собеседовании. Вредоносный код прячется внутри SVG и пытается украсть учётные данные. Похожий реальный случай описал разработчик, получивший предложение через LinkedIn, поэтому незнакомый проект лучше запускать только в изолированной среде и после проверки зависимостей.

Уязвимости WordPress уже используют в атаках

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

• rnsec без дополнительной настройки сканирует React Native и Expo-проекты, ищет секреты в коде, уязвимости и небезопасную конфигурацию.
• OpenReview — открытый бот для ревью pull request, который разворачивается самостоятельно, подключается как GitHub App и запускает проверку кода по запросу.

🤖 ИИ

Кто из ИИ-ботов действительно читает сайты

Evil Martians два месяца измеряли трафик LLM-краулеров, чтобы проверить пользу «SEO для ИИ». Исследование помогает отличить реальных посетителей и агентов от предположений и понять, стоит ли специально адаптировать контент для машинного чтения.

• Flint компилирует простое JSON-описание графика в Vega-Lite, ECharts или Chart.js. Единый промежуточный формат подходит и людям, и агентам, которым нужно выбрать конкретный движок уже на этапе отображения.
• GitHub Agentic Workflows запускает coding agents в GitHub Actions и добавляет ограничения по правам и расходам.
• mgrep выполняет смысловой поиск из командной строки по коду, изображениям, PDF и другим файлам.
• Terax объединяет компактный терминал, редактор, ИИ-агентов и живой предпросмотр веб-приложения.

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

Babylon Lite — компактный 3D-движок только для WebGPU

Команда Babylon создала Babylon Lite с нуля как более маленькую и быструю альтернативу большому Babylon.js. За компактность приходится платить отказом от старых графических API: движок рассчитан только на WebGPU.

ESLint автоматизирует миграцию между крупными версиями

Официальные codemod-преобразования ESLint обновляют конфигурацию и код при переходах с v8 на v9 и с v9 на v10. Это снижает объём ручных исправлений, но результат всё равно стоит проверить тестами и линтером.

• Rslint 0.7 обновил быстрый линтер, написанный на Rust.
• Rolldown 1.2 продолжил развитие быстрого сборщика, совместимого с привычной экосистемой Rollup.
• All UtilityCSS — каталог из более чем 180 шаблонов, компонентов и инструментов для Tailwind с поиском и фильтрами.
• Slim выдаёт локальному серверу аккуратный HTTPS-адрес и при необходимости открывает публичный туннель.
• fakecloud локально эмулирует AWS API для разработки и интеграционных тестов без облачного аккаунта.
• Baguette управляет headless-симулятором iOS через Swift CLI и веб-интерфейс без запуска Simulator.app.
• Kvile — быстрый offline-first клиент для отладки HTTP с поддержкой файлов .http, без аккаунта и телеметрии.
• GitHub Copilot App предлагает отдельное desktop-приложение для запуска и контроля агентных задач в репозиториях.
• Gitdeck собирает репозитории, issues, pull request, CI и статистику нескольких GitHub- и Forgejo-аккаунтов в локальном дашборде.
• shieldcn визуально собирает значки и графики для README и SKILL.md, после чего выдаёт готовую разметку.
• TanStack npm stats строит графики популярности пакетов и сравнивает библиотеки по числу загрузок.