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

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

Полезные паттерны для создания HTML-инструментов

Иногда для создания полезных веб-инструментов не нужны сложные фреймворки — достаточно одного HTML-файла с небольшой порцией JavaScript и CSS. Саймон Уиллисон делится своим опытом создания таких инструментов с помощью больших языковых моделей и рассказывает, какие практики помогают быстро и эффективно собирать работающие приложения. Читать статью

• Зачем нужен атрибут lang в HTML — Маленькая, но важная деталь, которая делает контент доступным для пользователей по всему миру. Без него скринридеры могут неправильно произносить текст.
• Контроль над диалогами и поповерами через Invoker Commands API — Новый способ управлять модальными окнами и всплывающими элементами без JavaScript.
• Как я пытался объяснить HTML и CSS своей пятилетней племяннице — Лёгкая и вдохновляющая история о том, как можно объяснять сложные вещи простыми словами.
• Неблокирующая отрисовка изображений на canvas в разных браузерах — Советы по корректной загрузке и рисованию картинок на canvas без «мерцаний» и артефактов.
• «Лучше никакого ARIA, чем плохой ARIA» — Совет от W3C: не усложняйте доступность, если не уверены в правильности использования.

🎨 CSS и дизайн

CSS Wrapped 2025

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

Сложные веб-приложения можно сделать быстрее

Предложено новое API — Delayed Message Timing, которое поможет улучшить производительность приложений, использующих множество параллельных контекстов (например, iframe, вкладки или воркеры). Авторы просят сообщество оставить обратную связь по предложению.

У браузера два дерева доступности — и это важно знать

Техническое погружение в архитектуру Chrome: как браузер создаёт два дерева доступности и как они взаимодействуют с DOM и событиями. Особенно полезно тем, кто хочет глубже понять, как технологии вспомогательного доступа работают под капотом. Читать подробнее

Как быстро браузеры обрабатывают Base64-данные?

На современных устройствах браузеры способны обрабатывать гигабайты Base64-данных в секунду. Исключение — Firefox, но оптимизации уже в разработке. Подробнее о тестах и результатах

Анатомия отчёта о производительности веба

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

NoLoJS: меньше JavaScript за счёт HTML и CSS

Современные возможности HTML и CSS всё чаще позволяют решать задачи без JavaScript — или хотя бы с минимальным его количеством. Автор предлагает заменить привычные JS-паттерны на более лёгкие и эффективные решения на базе веб-стандартов. Читать статью

TypeScript

TypeScript 7: переход на Go и ускорение в 10 раз

TypeScript 6.0 станет последней версией, написанной на JavaScript. Следующая мажорная версия — TypeScript 7 — будет переписана на Go и обещает скорость выполнения до 10 раз выше. Подробности от Microsoft.

• Нюансы типизации в JavaScript с помощью JSDoc — простое руководство для тех, кто хочет получить преимущества типов без перехода на TypeScript.

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

Как React 19.2 улучшает оптимизацию INP

INP (Interaction to Next Paint) — это метрика, которая показывает, насколько быстро ваш сайт реагирует на действия пользователя. В React 19.2 появились два мощных инструмента для улучшения этой метрики: новый компонент <Activity /> и Performance Tracks в Chrome DevTools.

Компонент <Activity /> позволяет скрывать части интерфейса, не теряя их состояние (например, данные в формах или позицию прокрутки), и при этом снижает нагрузку на браузер, так как React перестаёт выполнять эффекты и обновления в скрытых блоках. Это особенно полезно для вкладок, модальных окон и фильтров.

А в DevTools теперь можно одновременно видеть всё, что происходит в приложении: от выполнения JavaScript и сетевых запросов до внутренних фаз работы React (рендер, коммит и т.д.). Это сильно упрощает поиск узких мест в производительности.

Подробнее о React 19.2 и INP

Уязвимость React2Shell (CVE-2025-55182)

В React Server Components обнаружена критическая уязвимость, получившая название React2Shell. Она позволяет выполнить произвольный код на сервере. Команда React и Vercel уже опубликовали рекомендации по защите, особенно для пользователей Next.js.

Подробнее об уязвимости

• React Grab: инструмент для агентного разработки на React — позволяет «забирать» контекст из компонентов приложения и передавать его ИИ-агентам для автоматического внесения изменений в код. Узнать больше
• Некоторые советы и ошибки при использовании useEffectEvent — краткое руководство по правильному применению этой экспериментальной функции. Читать
• Создание монорепозитория с Next.js и Prisma — как объединить модель данных фронтенда и бэкенда в одном месте, используя Prisma. Руководство
• Оптимизация изображений в Next.js через next/image — лучшие практики и тонкости использования встроенного компонента. Статья

⚙️ Node.js

Node.js v24.12.0 (LTS)

Выпущен новый стабильный релиз Node.js с поддержкой type stripping (удаления типов TypeScript) прямо «из коробки». Это упрощает запуск TypeScript-кода без дополнительных шагов транспиляции. Скачать и прочитать changelog

Защита от атак в цепочке поставок npm

Инженер из Seattle Times делится опытом перехода с npm на pnpm — менеджер пакетов, который обеспечивает более строгую изоляцию зависимостей и снижает риски компрометации проекта через вредоносные пакеты. Подробнее в статье.

Предстоящие обновления безопасности Node.js

15 декабря 2025 года выйдут обновления для версий Node.js 25.x, 24.x, 22.x и 20.x, устраняющие пять уязвимостей, включая три с высоким уровнем опасности. Официальное объявление.

• Как усилить безопасность при публикации npm-пакетов — статья Зака Лезермана, автора 11ty, о том, как избежать утечки токенов и настроить безопасный CI/CD для публикации.

Замена glob-all на встроенный glob в Node.js

Как перейти с устаревшего пакета glob-all на нативный fs.promises.glob, доступный в современных версиях Node.js. Инструкция на SiteLint.

• Компания Anthropic (разработчик Claude) приобрела команду Bun. Bun останется открытым.

Вышел Deno 2.6

Новая версия популярного JavaScript- и TypeScript-рантайма Deno принесла с собой несколько важных обновлений:

• Утилита dx, похожая на npx, для запуска бинарников из npm и JSR;
• Команда deno audit для поиска уязвимостей в зависимостях;
• Более точный контроль над разрешениями;
• Поддержка «source phase imports».
  Подробности о релизе

Статьи и обзоры

• AV1 получил «Эмми» — Видеокодек AV1 официально признан революционным в доставке видео по интернету.
• Let’s Encrypt — 10 лет — За десятилетие проект защитил почти миллиард сайтов. История роста.
• Orion — новый браузер от Kagi — Построен на WebKit, а не на Chromium. Выпущен в версии 1.0.
• Google подвёл итоги поиска за 2025 год — Самые популярные запросы и тренды. Year in Search.

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

• Bun v1.3.4 получил поддержку URLPattern, улучшенный console.log и управляемые таймеры в тестах.
• Oxlint теперь поддерживает type-aware linting (альфа).

---

TanStack AI: единый интерфейс для LLM-провайдеров

TanStack AI — новая библиотека из семейства TanStack, которая унифицирует работу с разными поставщиками ИИ (OpenAI, Anthropic и др.). Поддерживает потоковую передачу и валидацию через Zod. Включает готовую интеграцию с React.

Официальный сайт и туториал

• React Datepicker 9.0 — популярный компонент выбора даты получил поддержку часовых поясов, выбор времени в диапазонах и улучшения для доступности. О релизе
• Yet Another React Lightbox 3.27 — современный компонент для отображения изображений в модальном окне. GitHub
• Jotai 2.16 — примитивная и гибкая библиотека управления состоянием для React. Документация
• React Grid Layout 2.0 — гибкая система сетки, похожая на Gridster или Packery, для случаев, когда CSS Grid недостаточно. GitHub-репозиторий
• fate: современный клиент данных для React и tRPC — минималистичная библиотека для выборки и управления данными без «магии» и сложных DSL. Сайт проекта
• Open Sourcing the Remix Store — код интернет-магазина Remix, построенного на Remix и Hydrogen, теперь открыт. Отличный пример реального проекта от создателей фреймворка. GitHub
• Ant Design 6.1 — обновление популярной библиотеки компонентов. Релиз
• react-geo v32.7.0 — компоненты для создания картографических приложений на React. Документация

---

• Browser Score: проверьте, насколько ваш браузер поддерживает веб-платформу — Улучшенная версия старого CSS3 Test с фильтрами по типам фич (CSS, экспериментальные, стабильные и др.).
• Telescope — кросс-браузерный агент для тестирования производительности — Поддерживает Chrome, Edge, Safari и Firefox. Можно настраивать через CLI или скрипты, генерировать HTML-отчёты.
• Sonda — универсальный анализатор бандлов — Работает с большинством популярных сборщиков и фреймворков, строит интерактивный отчёт на основе source map. Попробовать демо
• CanIUse Embed — встраивайте таблицы совместимости прямо на свой сайт — Лёгкий и быстрый способ показать, какие браузеры поддерживают ту или иную функцию.
• NativeWindUI — 30+ готовых компонентов для React Native — Коллекция переиспользуемых UI-элементов, экранов и пользовательских потоков.

Обновления

• pnpm 10.25 — популярный альтернативный менеджер пакетов.
• Prisma 7.1 — ORM для TypeScript и Node.js.
• Prettier 3.7 — форматирование кода без обсуждений.
• Mongoose 9.0.1 — работа с MongoDB.
• jsdom 27.3 — реализация DOM в чистом JavaScript.
• OpenAI Node 6.10 — официальная библиотека с поддержкой новых моделей.