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

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

WebGPU теперь поддерживается везде

WebGPU — это современный API для работы с графикой и вычислениями на GPU прямо в браузере. Он гораздо мощнее WebGL и теперь доступен во всех основных браузерах. Подробнее о поддержке.

Web Install API доступен для тестирования в Edge

Этот API позволяет веб-приложениям запрашивать установку на устройство (как PWA), прямо из браузера Microsoft Edge. Попробовать сейчас.

🎨 CSS и дизайн

Новые макеты с помощью CSS Subgrid

Subgrid — это мощное расширение CSS Grid, которое позволяет вложенным сеткам наследовать структуру родительской сетки. Теперь это работает во всех основных браузерах! С его помощью можно легко выравнивать элементы в сложных компонентах (например, карточках или формах), не задавая фиксированные размеры. Подробнее в статье Джоша Комо.

Синтаксис диапазонов для style-запросов

Style-запросы (style queries) — это новая функция CSS, позволяющая стилизовать элементы в зависимости от их текущих CSS-свойств. Теперь, как и в медиа- или контейнерных запросах, можно использовать диапазоны значений (например, min-width и max-width). Это открывает новые возможности для адаптивных компонентов. Подробности от Уны Кравец.

Как работают наследование и совместное использование значений в CSS

Статья объясняет, почему одни CSS-свойства наследуются, а другие — нет, и почему сложно «передавать» значение одного свойства в другое. Автор предлагает гипотетическую функцию compute(), которая могла бы это упростить. Полезно для понимания внутренней логики CSS. Читать на CSS-Tricks.

Ключевые кадры как токены: стандартизация анимаций

Анимации заслуживают такой же системности, как цвета или типографика. В статье показано, как создать набор переиспользуемых «токенов анимации» — например, для входа, выхода или подсветки — чтобы они выглядели одинаково во всём проекте. Смотреть на Smashing Magazine.

Как grid-template-areas делает код визуальным

Это свойство позволяет описывать сетку буквально «рисуя» макет с помощью имён областей (например, "header header", "sidebar main"). Такой подход делает код понятным даже без комментариев. Обзор от WebKit.

Изменения в overscroll-behavior в Chrome 144

Поведение прокрутки за пределами контента теперь регулируется иначе. Это может повлиять на UX в мобильных интерфейсах, где важно отключать «подпрыгивание» при достижении края страницы. Объяснение от Брамуса.

Черновик CSS Backgrounds Module Level 4

Опубликована первая официальная версия нового стандарта для фона в CSS. Пока это только начало, но в будущем появятся новые способы управления градиентами, изображениями и другими фоновыми эффектами. Смотреть черновик.

• Как обновлять border-radius при переполнении контейнера — полезный лайфхак для компонентов с прокруткой и скруглёнными углами.
• Почему можно говорить «CSS-переменные», а не только «кастомные свойства» — дружелюбное пояснение терминологии для новичков.

📦 JavaScript

Более 150 алгоритмов и структур данных на JavaScript

Проект с открытым исходным кодом демонстрирует реализацию популярных алгоритмов (например, манипуляции с битами, расстояние Хэмминга, треугольник Паскаля) и структур данных (связные списки, графы, деревья поиска и т.д.). Каждый пример сопровождается понятным объяснением и доступен на 18 языках, включая русский.
Посмотреть проект на GitHub

Неравенство в производительности веба в 2026 году

Эксперт по веб-стандартам Алекс Расселл показывает, насколько сильно различаются условия, в которых пользователи используют веб: разные устройства, скорости интернета и размеры пакетов JavaScript. Он призывает разработчиков не забывать о пользователях с медленными устройствами и сетями.
Читать статью

• Введение в асинхронный JavaScript — глава из курса «JavaScript для всех» теперь доступна бесплатно. Идеально подойдёт новичкам, которые хотят разобраться, как работает асинхронность в JS.

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

Как Vercel создали своё первое мобильное приложение на React Native

Команда Vercel рассказала, как они использовали React Native и Expo для создания iOS-приложения своего AI-инструмента v0. В статье подробно разбираются подходы к обеспечению отзывчивого и плавного пользовательского интерфейса. Это хороший пример применения React Native в продакшене с упором на производительность и удобство разработки.
Читать подробнее

React 19.2: Асинхронность теперь повсюду

Jack Herrington объясняет, как в React 19.2 реализована долгожданная поддержка асинхронных операций «везде» — от сервера до клиента. Это важный шаг к более предсказуемой и эффективной работе с асинхронным кодом в React-приложениях.
Читать подробнее

Зачем использовать React на фронтенде?

Jeremy Keith ставит под сомнение необходимость использования React именно на клиентской стороне. Он отмечает, что хотя React отлично справляется с серверным рендерингом, для некоторых задач на фронтенде может быть достаточно более лёгких решений, таких как Preact. Это полезная рефлексия для разработчиков, выбирающих технологии под конкретные требования проекта.
Читать подробнее

Мигрировали 6000 React-тестов с помощью AI и AST

Elio Capella описывает, как с помощью AI-агентов и абстрактных синтаксических деревьев (AST) удалось автоматизировать миграцию шести тысяч тестов за одну неделю. Это показывает, что AI может быть полезен не только для генерации нового кода, но и для рутинной модернизации существующих проектов.
Читать подробнее

• React Router получил новый хук — появился экспериментальный хук unstable_useRoute, который может упростить работу с маршрутами. Но будьте осторожны: он пока нестабилен.
  Подробнее
• Как упростить компоненты с производным состоянием — практический гайд о том, как избежать избыточного состояния и упростить логику компонентов, вычисляя данные на лету.
  Подробнее
• Создание «жидких» стеков в стиле Apple Maps в Expo — руководство по реализации визуального эффекта прозрачных полупрозрачных карточек, как в нативных iOS-приложениях.
  Подробнее
• 93% ускорение Next.js в Kubernetes — советы по оптимизации запуска Next.js-приложений в Kubernetes-кластерах.
  Подробнее
• Волнующие бесконечные карусели в React Three Fiber — создание визуально эффектных анимаций с использованием WebGL и GLSL-шейдеров.
  Подробнее

---

• Вышел Angular v21 — новая версия популярного фреймворка от Google. В релизе — улучшения производительности и новые API. Представление нововведений оформлено в стиле ретро-игр.
  Тур по новым возможностям

⚙️ Node.js

Как лето в Абруццо помогло внедрить «очистку типов» в Node.js

Разработчик и участник технического комитета Node.js Марко Ипполито рассказал личную историю о том, как ему удалось реализовать поддержку «очистки типов» (type stripping) — функции, которая позволяет Node.js игнорировать TypeScript-типы при запуске кода без предварительной компиляции. Теперь эта функция официально считается стабильной. Сейчас Марко работает над новой экспериментальной возможностью: поддержкой пользовательских конфигурационных файлов через флаг --experimental-config-file.
Читать подробнее

Возвращение атаки Shai Hulud 2.0: новый виток цепной атаки через npm

Произошла новая волна цепной атаки через экосистему npm, получившая название Shai Hulud 2.0. Злоумышленники заражают популярные пакеты, которые при установке крадут учётные данные GitHub и npm, а затем публикуют новые вредоносные пакеты. GitLab и другие компании рекомендуют проверять свои зависимости и использовать специализированные сканеры, например, Shai Hulud 2.0 Detector от Corridor, чтобы обнаружить уязвимые пакеты.
Подробнее от GitLab

• Вышел Node.js v20.19.6 (LTS) — обновление включает новые корневые сертификаты, обновление OpenSSL и официальное упразднение приоритезации в HTTP/2 (в соответствии с RFC 9113).
• За кулисами автоматизированного процесса выпуска Node.js — короткий обзор того, как работает система автоматических релизов Node.js.
• Полное руководство по обработке ошибок в Node.js — подробный обзор подходов к логированию, перехвату и диагностике ошибок в серверных приложениях. Автор: Айолува Исаия (Honeybadger).
• Волнa атак “Shai Hulud” в npm — злоумышленники внедряют вредоносный код через post-install скрипты, крадут токены и реплицируют заражённые пакеты. Будьте бдительны при установке зависимостей! Подробнее
• GitHub теперь сканирует секреты даже в Gist’ах — даже «неприватные» Gist-посты не являются полностью закрытыми, и GitHub теперь уведомляет провайдеров о найденных токенах в них. Подробнее

🌐 Браузеры

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

• Gluegun: набор инструментов для создания CLI-приложений на Node.js — позволяет быстро собрать консольную утилиту с поддержкой подкоманд, шаблонов, цветного вывода и парсинга аргументов.
• tshy 3.1 — гибридный сборщик TypeScript-модулей, который генерирует пакеты, совместимые и с CommonJS, и с ESM, чтобы не «ломать» проекты при переходе между форматами.
• Glob 13 — библиотека для поиска файлов по шаблонам, как в командной строке Unix (например, *.js). Называется «самой точной и второй по скорости» реализацией на JavaScript.
• is-online 12.0 — проверка подключения к интернету — работает и в Node.js, и в браузере, используя несколько методов для надёжного определения доступности сети.
• open v11.0 — кроссплатформенный запуск URL и файлов. Поведение похоже на команду open в macOS: открывает ссылки, документы и приложения в зависимости от ОС.
• jsonld.js v9.0 — обработка JSON-LD, стандарта для описания структурированных данных в формате JSON, который часто используется для SEO и семантического веба.
• Node File Trace (NFT) 1.1 — анализ зависимостей проекта от Vercel. Помогает понять, какие именно файлы нужны для запуска приложения — полезно при создании минимальных образов или бандлов.
• Link Preview JS 4.0 — извлечение превью ссылок (заголовок, описание, изображение) с веб-страниц через OpenGraph-теги.
• node-redis 5.10 — клиент для Redis/Valkey получил поддержку новых команд.
• cron-schedule 6.0 — планировщик задач без зависимостей, умеет парсить и выполнять задачи по cron-выражениям.
• pnpm 10.23 — быстрый и экономный менеджер пакетов, альтернатива npm и yarn.

---

• Также вышла React Suite 6.0 — ещё один популярный набор компонентов для корпоративных приложений.
  Подробнее
• Recharts 3.5 — обновление популярной библиотеки для построения графиков на основе D3.
  Подробнее
• React Virtuoso 4.15.0 — мощный компонент для виртуализации длинных списков.
  Подробнее
• React Chrono 3.3 — обновление компонента для отображения временных шкал.
  Подробнее
• Respinner 5.0 — кастомизируемые SVG-спиннеры для индикации загрузки.
  Подробнее
• React Lite YouTube Embed v3.2.0 — лёгкий и быстрый компонент для встраивания YouTube-видео.
  Подробнее | Демо
• react-vnc 3.2 — компонент для отображения VNC-потока прямо в браузере.
  Подробнее
• React Native Bounceable 2.1 — анимация «подпрыгивания» для любого компонента в React Native.
  Подробнее

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

• Chroma.js 3.2 — библиотека для работы с цветами: смешивание, конвертация и т.д.
• swc4j 2.0 — компиляция и сборка JS/TS на JVM.
• Vuetify 3.11 — популярная UI-библиотека для Vue.
• Fable 4.28.0 — компилятор F# в JavaScript.