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

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

Команды Invoker: управляйте диалогами и попапами без JavaScript

API Invoker Commands позволяет открывать и закрывать диалоги, меню и другие интерактивные элементы с помощью чистого HTML, без написания обработчиков событий на JavaScript. Это упрощает код и повышает надёжность.
Посмотреть примеры

Анимация с помощью акселерометра смартфона

Статья показывает, как использовать данные с датчиков мобильного устройства (например, акселерометра) для создания интерактивных анимаций прямо в браузере. Лучше всего открывать материал на телефоне.
Попробовать демо

• Влияние производительности веб-сайта на пользовательский опыт: почему скорость загрузки и отзывчивость критически важны.
  Прочитать анализ
• Прогнозы развития веб-доступности в ближайшие годы: какие технологии и подходы станут стандартом.
  Ознакомиться с прогнозами
• Нет необходимости «ловить фокус» внутри <dialog> — современные браузеры сами корректно обрабатывают навигацию по клавише Tab внутри диалоговых окон.
  Подробнее

🎨 CSS и дизайн

Когда появятся CSS Grid Lanes и как ими пользоваться уже сейчас?

CSS Grid Lanes — это новое расширение популярной системы вёрстки Grid, которое позволяет более гибко управлять колонками и рядами. Safari уже поддерживает эту функцию в Technology Preview, а другие браузеры не за горами. В статье объясняется, как использовать Grid Lanes уже сегодня с учётом поддержки старых браузеров через прогрессивное улучшение.
Читать подробнее

Основы CSS-вёрстки: поток, модель блока и позиционирование

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

Как отлаживать правило @starting-style в Chrome DevTools

Новое CSS-правило @starting-style позволяет задавать начальное состояние анимации. В статье показано, как его отлаживать прямо в инструментах разработчика Chrome.
Узнать больше

Что нового в CSS в 2026 году

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

Как правильно настроить favicons в 2026 году

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

Разбираемся со стекинг-контекстами в CSS

Статья объясняет, почему одни элементы «закрывают» другие, даже если в коде они идут раньше, и как управлять порядком наложения с помощью z-index, opacity, transform и других свойств.
Изучить тему

📦 JavaScript

Обзор JavaScript-фреймворков на 2026 год

Создатель SolidJS, Райан Карниато, ежегодно анализирует состояние экосистемы. В этом году он называет текущий момент «невероятно захватывающим» и делится наблюдениями о трендах, производительности и архитектуре.
Подробнее: JavaScript Frameworks – Heading into 2026

TypeScript

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

Уязвимости DoS в React Server Components: новые исправления

Команда React выпустила обновления 19.2.4, 19.1.5 и 19.0.4, чтобы устранить недостаточно полные исправления предыдущих версий. Были обнаружены дополнительные уязвимости типа «отказ в обслуживании» (DoS) в React Server Components. Если вы используете RSC, обязательно обновитесь.
Подробнее: More DoS Fixes for Server Components Arrive in React 19.2.4, 19.1.5, and 19.0.4

Улучшение производительности с помощью React Server Components

На конференции ReactNext ’25 инженер из Vercel продемонстрировал, как правильно использовать React Server Components для максимальной производительности. В докладе разбираются базовые принципы и продвинутые паттерны работы с RSC.
Подробнее: Improving Performance using React Server Components

Написание хороших unit-тестов для React

Подробное руководство для новичков о том, как писать читаемые, надёжные и поддерживаемые unit-тесты для компонентов React. Автор объясняет, какие практики работают, а какие — нет.
Подробнее: Writing Good Unit Tests for React

Уязвимости DoS в self-hosted Next.js

Vercel сообщил о двух уязвимостях типа «отказ в обслуживании», затрагивающих самостоятельно развернутые приложения Next.js. Проблемы исправлены в версиях 15.5.10, 15.6.0-canary.61, 16.1.5 и 16.2.0-canary.8.
Подробнее: Vercel summarizes two DoS vulnerabilities found that affect self-hosted Next.js apps

⚙️ Node.js

Улучшение сборки одиночных исполняемых приложений в Node.js

В Node.js появилась новая возможность — создавать одиночные исполняемые файлы (Single Executable Applications, SEA), которые можно запускать даже на машинах без установленного Node.js. Раньше для этого требовался ряд сложных шагов и внешние инструменты, но теперь всё стало проще: в Node.js 25.5.0 добавлен флаг --build-sea, который позволяет собрать такой файл одной командой. Это особенно полезно для распространения приложений без зависимости от среды выполнения.

🔗 Подробнее об улучшении SEA

Вышел Node.js 25.5.0 (Current)

Новая версия Node.js принесла не только упрощённую сборку одиночных исполняемых файлов, но и другие важные изменения:

• Встроенный модуль node:sqlite теперь включает режим защиты по умолчанию.
• Метод fs.watch получил опцию ignore, чтобы фильтровать ненужные события файловой системы.

🔗 Анонс релиза

Сравнение производительности Node.js с версии 16 по 25

Исследователи протестировали производительность разных версий Node.js на одних и тех же задачах. Оказалось, что в Node.js 25 наблюдаются значительные улучшения по скорости выполнения некоторых операций, а в других случаях прогресс был более плавным. Такие сравнения помогают понять, стоит ли обновляться и какие выгоды это даёт.

🔗 Бенчмарки по версиям

• Проверьте, не используете ли вы уязвимые версии Node.js: запустите npx is-my-node-vulnerable. Это официальный инструмент от NodeSource и команды Node.js.
  🔗 Проверить уязвимости
• OpenSSL опубликовал обновление безопасности с 12 CVE. Команда Node.js оценила, что три из них затрагивают Node, но из-за ограниченной поверхности атаки исправления войдут в обычные релизы.
  🔗 Оценка уязвимостей
• Было проведено сравнение популярных клиентов Redis/Valkey для Node.js, чтобы понять, стоит ли переходить с ioredis на другие решения.
  🔗 Результаты бенчмарка

🧠 Ещё интересное

AGENTS.md лучше навыков в AI-ассистентах

Исследования Vercel показали, что простой файл AGENTS.md с документацией по Next.js работает лучше, чем сложные «навыки» (skills) в AI-ассистентах, потому что последние часто не срабатывают. Это важный вывод для разработчиков, создающих AI-инструменты.
Подробнее: Vercel Finds AGENTS.md Outperforms Skills in Evals

• Разработчик описал, как с помощью ИИ-ассистента Claude Code перенёс 100 000 строк TypeScript-кода на Rust. В статье много практических советов по работе с агентными ИИ-инструментами.
  🔗 Порт на Rust с помощью ИИ

Браузеры

Попробуйте поддержку масштабирования текста в Chrome Canary

В Chrome Canary появился новый метатег text-scale, который позволяет сайту корректно реагировать на увеличение размера текста в настройках операционной системы. Это улучшает доступность и читаемость без простого увеличения всего контента.
Попробовать функцию

• Google перестраивает своё предложение Programmable Search Engine, добавляя специализированные инструменты для поиска по сайтам, индексации всего веба и AI-поиска в корпоративной среде.
  Ознакомиться с анонсом
• Поддержка формата JPEG-XL медленно, но верно возвращается в браузеры после периода неопределённости.
  Следить за развитием
• Mozilla пытается создать «альянс против монополий» в сфере ИИ, но не все участники рынка поддерживают эту инициативу.
  Прочитать о реакции
• Бренд Netscape просуществовал гораздо дольше, чем многие думают — он официально исчез только в конце 2025 года.
  Историческая справка

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

Color Palette Pro — инструмент для подбора цветов

Этот онлайн-инструмент имитирует внешний вид аппаратного синтезатора и позволяет создавать палитры в разных цветовых пространствах. Результаты можно легко делиться.
Попробовать инструмент

ReliCSS — археологический инструмент для CSS

Сервис анализирует ваш CSS и находит устаревшие хаки и обходные пути, которые больше не нужны в современных браузерах. Полезно при рефакторинге старых проектов.
Запустить проверку

Typewriter Web Component — анимированный печатающий текст

Кастомный веб-компонент, который имитирует печатающийся текст. Поддерживает управление через кнопки: пауза, продолжение, перемотка.
Посмотреть демо на CodePen

Nxtlify — онлайн-редактор тем для Nuxt UI

Визуальный редактор, позволяющий настраивать CSS-переменные компонентов Nuxt UI и сразу видеть результат. Пока поддерживается около 18 компонентов.
Попробовать редактор

• Facehash: уникальные минималистичные аватары для пользователей — компонент автоматически генерирует стильные и ненавязчивые аватары, если у пользователя нет собственного изображения.
  Facehash: Unique Minimalist User Avatar Component
• React Tilt Button: «тактильная» 3D-кнопка — интерактивная кнопка, которая слегка прогибается при нажатии и наклоняется под курсором, создавая эффект реального взаимодействия.
  React Tilt Button
• Travels 1.0: эффективная библиотека для Undo/Redo — вместо сохранения полных снимков состояния, эта библиотека хранит только изменения, что экономит память. Есть готовый хук use-travel для React.
  Travels 1.0: A Fast, Efficient Undo/Redo Library
• React Timeline Editor 1.0 — компонент для создания редакторов на основе временных шкал (например, для видеомонтажа или расписаний).
  React Timeline Editor 1.0
• React Dropzone 14.4 — популярный хук для реализации зоны перетаскивания файлов в React-приложениях.
  react-dropzone 14.4
• focus-trap-react 12.0 — помогает ограничить фокус клавиатуры внутри модального окна или другого элемента, улучшая доступность.
  focus-trap-react 12.0
• Rspack 2.0 Alpha 1 — сборщик, совместимый с Webpack, теперь включает встроенные плагины для React Server Components.
  Rspack 2.0 Alpha 1
• Bun v1.3.7 и v1.3.8 — обновления JavaScript-движка Bun: ускорение async/await на 35%, улучшения для ARM64, встроенная поддержка JSON5/JSONL и даже парсер Markdown.
  Bun v1.3.7, Bun v1.3.8
• Yarn 6 в предварительном просмотре — менеджер пакетов переходит на Rust ради скорости. Стабильный релиз ожидается в третьем квартале 2026 года.
  Yarn 6 is in preview
• StyleX от Meta получает новый сайт и песочницу — CSS-in-JS библиотека, используемая внутри Facebook, теперь имеет удобный интерфейс для экспериментов.
  Новый сайт StyleX, Песочница
• Инструмент для создания SVG в браузере — веб-приложение, позволяющее визуально рисовать и экспортировать SVG без кода.
  Web-based tool for crafting SVGs

Обновления

• Lodash 4.17.23 — минорное обновление популярной утилитной библиотеки, но оно закрывает важную уязвимость (CVE).
  🔗 Релиз | Подробности об уязвимости
• CMake.js v8.0.0 — альтернатива node-gyp для сборки нативных аддонов с использованием CMake.
  🔗 CMake.js
• create-dmg v8.0 — утилита для быстрого создания красивых DMG-образов для macOS-приложений.
  🔗 create-dmg
• pnpm v10.28.2 и npm v11.8.0 — обновления популярных менеджеров пакетов.
  🔗 pnpm | npm