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

🧪 HTML и API

История Core Web Vitals: как метрики изменили веб

Статья от Addy Osmani подробно рассказывает, как Google разработал и внедрил Core Web Vitals — набор метрик, измеряющих реальный пользовательский опыт на сайте. Сначала метрики были частью инициативы AMP, но позже стали открытым стандартом, доступным любому сайту. За 2023–2025 годы оптимизация под эти метрики сэкономила пользователям Chrome более 30 000 лет ожидания! В статье также описаны ключевые метрики (LCP, FID → INP, CLS), их влияние на SEO и как разработчики, CMS и фреймворки адаптировались под новые требования.

🎨 CSS и дизайн

Что нового в View Transitions в 2025 году

Обновлённый обзор от Bramus (Google) описывает последние улучшения в View Transitions API — технологии для плавных анимаций при смене состояния страницы. В 2025 году появились такие фичи, как:

• автоматическое именование элементов через view-transition-name: match-element,
• вложенная структура групп переходов (для сложных эффектов вроде clipping),
• наследование всех анимационных свойств псевдоэлементами,
• улучшенная отладка в DevTools,
• поддержка scoped-переходов (на поддереве DOM),
• и даже глобальное свойство document.activeViewTransition.

Также React официально добавил поддержку <ViewTransition> в канареечную версию, а Firefox готовится выпустить полную поддержку в версии 144.

Практическое руководство по современным цветам в CSS

Первая часть руководства от Kevin Powell объясняет, как использовать современные форматы цветов в CSS (например, color() и oklch()), которые дают больше контроля над оттенками и контрастностью. Статья написана простым языком и подходит даже тем, кто только начинает разбираться в CSS.

• Использование shape-outside для нестандартных обтеканий — примеры и демки от Andy Clarke, показывающие, как можно обтекать текст вокруг фигур, а не только вокруг прямоугольников.
• Как стилизовать отдельные символы с помощью CSS — короткий гайд от Terence Eden о применении правил к конкретным символам текста.

📦 JavaScript

Vite: Документальный фильм

Вышел новый документальный фильм о сборщике Vite, который стал одним из самых популярных инструментов в экосистеме JavaScript. В фильме участвуют создатели Vite и других ключевых технологий — такие как Evan You (Vue), Rich Harris (Svelte) и Ryan Carniato (SolidJS). Это отличный способ понять, как Vite устроен изнутри и почему он так быстро завоевал доверие разработчиков. Длительность — 39 минут.

Vite+: коммерческая версия Vite для команд

Появился новый проект под названием Vite+ (VitePlus) — это расширенная, ориентированная на команды версия Vite с дополнительными возможностями для enterprise-разработки. Подробности обещают раскрыть на следующей неделе.

Playwright 1.56 с поддержкой агентов

В новой версии Playwright 1.56 появились Playwright Agents — инструмент для создания автономных агентов, которые могут взаимодействовать с веб-страницами как настоящие пользователи. Это открывает новые возможности для тестирования и автоматизации.

ESLint v10.0 и v9.37.0

Nicholas C. Zakas рассказал о том, что готовится в ESLint v10.0. Также вышла стабильная версия ESLint v9.37.0, содержащая последние улучшения и исправления.

Рождение Prettier

Автор Prettier, Christopher Chedeau (известный как Vjeux), вспоминает, как 10 лет назад появился этот популярный форматтер кода. Он объясняет, почему Prettier стал таким важным — благодаря полностью автоматическому форматированию на основе AST, что избавило команды от бесконечных споров о стиле кода.

Как группировать массивы без reduce()

Рассказывается о новых встроенных методах JavaScript — Object.groupBy() и Map.groupBy(), которые позволяют легко группировать элементы массива без необходимости писать сложный код с reduce().

Быстрый поиск на статических сайтах Astro

Показано, как добавить клиентский поиск на сайт на Astro без серверной части — с помощью JavaScript и локального индекса. Отличное решение для блогов и документации.

Анимация WebGL-шейдеров с помощью GSAP

Подробное руководство по созданию эффектов вроде ряби, плавных раскрытий и динамического размытия с использованием GSAP и WebGL. Подходит для тех, кто хочет добавить визуальные эффекты на сайт.

Управление состоянием в Vue

Вводная статья о том, как работать с состоянием в приложениях на Vue — от простых реактивных переменных до использования Pinia и других подходов.

• Как определить версию Safari и iOS из JavaScript — практический совет от Evil Martians для случаев, когда всё же нужно делать feature-detection для Apple-устройств.
• Ladybird Browser достиг важного этапа — независимый браузер теперь может считаться полноценной альтернативой на iOS, что потенциально расширит выбор движков за пределами WebKit.
• Wayback Machine сохранил более 1 триллиона веб-страниц — историческое достижение архива, подчеркивающее важность сохранения цифрового наследия.

⚛️ React

Появление React Foundation

React и React Native официально переходят под управление независимого фонда. Раньше проекты принадлежали Meta, но с ростом экосистемы стало ясно, что им нужна более нейтральная и сообщественная структура. Новый фонд будет поддерживать инфраструктуру, организовывать конференции (вроде React Conf) и выделять гранты на развитие экосистемы. Среди первых участников — Amazon, Microsoft, Vercel, Expo и другие крупные компании.

Вышел React 19.2

React 19.2 — это обновление с полезными новыми возможностями для разработчиков любого уровня:

Next.js 16 Beta

Вышла бета-версия Next.js 16. Теперь по умолчанию используется Turbopack как сборщик, добавлена поддержка React 19.2, а также стабильная поддержка React Compiler. Это крупное обновление, которое значительно ускоряет сборку и работу приложений.

• <Activity /> — новый компонент, который позволяет «скрывать» части интерфейса, не удаляя их из памяти. Это ускоряет навигацию: например, если пользователь ушёл со страницы, её состояние сохранится, и при возврате всё останется как было.
• useEffectEvent — хук, который помогает избежать ненужных переподключений в useEffect. Теперь можно реагировать на внешние события (например, подключение к чату), не перезапуская весь эффект при изменении второстепенных пропсов вроде темы.
• Улучшения в DevTools — теперь в Chrome DevTools можно видеть, как React планирует задачи и какие компоненты рендерятся. Это сильно упрощает поиск узких мест в производительности.
• Partial Pre-rendering — возможность заранее отрендерить статическую часть приложения на сервере и позже «дозагрузить» динамическое содержимое. Это особенно полезно для сайтов с гибридной архитектурой.

Также исправлены баги, улучшена совместимость с View Transitions и обновлён префикс useId.

Coinbase открыл свой дизайн-систему

Coinbase Design System (CDS) — это кроссплатформенная библиотека компонентов для React и React Native, теперь доступная под лицензией Apache 2.0. В ней есть интересные компоненты, например анимированный счётчик и многошаговый прогресс. Всё это можно использовать в своих проектах — репозиторий на GitHub.

• Как переехать с Next.js на React Router или TanStack Start — подробное руководство от Alem Tuzlak для тех, кто хочет уйти от фреймворка к более гибкой маршрутизации.
• Краткий обзор новых фич React 19.2 от Mofei Zhang на React Conf 2025
• Вышла первая стабильная версия React Compiler, и есть гайд по постепенному внедрению в существующие проекты.
• Доступна запись первого дня React Conf 2025

⚙️ Node.js

15 новых возможностей Node.js, которые заменяют популярные npm-пакеты

В новых версиях Node.js появилось множество встроенных функций, которые раньше требовали установки сторонних библиотек. В статье разбираются 15 таких возможностей — от работы с файлами до обработки URL и управления зависимостями. Это отличный способ уменьшить количество зависимостей и упростить проект. Читать подробнее

Как обработать 14 ГБ данных на 78% быстрее с помощью оптимизации Buffer

Автор экспериментировал с обработкой огромного файла метеоданных (почти 15 ГБ) и добился впечатляющего ускорения на 78%, просто правильно используя встроенные средства Node.js — особенно буферы. Статья отлично подойдёт тем, кто хочет понять, как Node работает с памятью и как избежать типичных ошибок при работе с большими объёмами данных. Читать подробнее

Как Deno защищает от уязвимостей в npm

Команда Deno объясняет, почему их подход к безопасности («безопасность по умолчанию») помогает избежать многих проблем, с которыми сталкиваются пользователи npm. В статье сравниваются модели разрешений, способы загрузки зависимостей и другие аспекты, которые делают Deno более защищённой альтернативой для запуска JavaScript-кода. Читать подробнее

Удаление 120 неиспользуемых зависимостей в Nx-монорепозитории

Разработчик поделился опытом чистки большого монорепозитория на Nx: с помощью инструмента Knip он безопасно удалил 120 ненужных зависимостей. Это полезный кейс для тех, кто работает с большими проектами и хочет избавиться от «мёртвого груза» в package.json. Читать подробнее

• Лучшие практики безопасности при работе с npm — подробное руководство от эксперта по веб-безопасности Лирона Тала. Советы подойдут даже тем, кто использует альтернативные менеджеры пакетов, например pnpm или Yarn. Читать подробнее
• Советы по упаковке и публикации Node.js-пакетов в 2025 году — полезная презентация с конференции NordicJS. Читать подробнее
• pnpm 10.18: мониторинг сетевых задержек — теперь pnpm может предупреждать, если загрузка пакетов идёт слишком медленно. Обновление
• Bun 1.3 — ожидаемый релиз — новая версия популярного JavaScript-рантайма должна выйти в день публикации дайджеста. Следить за релизом

📊 Видео и статьи

• «Хватит игнорировать браузер» — статья в The New Stack призывает чаще использовать нативные браузерные API вместо тяжёлых фреймворков, особенно там, где это уместно.
• Европейский закон о cookie «сломал интернет» — и теперь его хотят починить — аналитика от Politico о том, как Еврокомиссия планирует упростить согласие на cookies, возможно, через настройки в самом браузере.
• Firefox запустил сайт для голосования за важные веб-стандарты. Вы можете повлиять на приоритеты разработки браузера.
• Эксперт по безопасности Liran Tal собрал лучшие практики безопасности для npm.
• Mirrow — новый способ анимировать SVG с помощью CSS-подобного языка. Есть интерактивная песочница.
• Пример параллельной обработки клеточных автоматов с WebGPU — демонстрация возможностей нового API для вычислений на GPU.

DevTools и производительность

• Что нового в DevTools (версии 139–141) — видеообзор от Matthias Rohmer о свежих фичах: улучшения в Network-панели, информация о Baseline-поддержке и новые AI-ассистенты.
• Как оптимизировать viewport на мобильных устройствах — советы от Anna Monus для ускорения первых взаимодействий пользователя с сайтом.
• Ежемесячные обзоры от команд Svelte, Astro и Vite — свежие новости и обновления из мира современных фронтенд-фреймворков. Svelte, Astro, Vite-экосистема

🤖 ИИ

• Google AI Studio теперь генерирует Angular-приложения — новый функционал в инструменте от Google для быстрого прототипирования. Подробнее
• Статья о том, можно ли называть генерацию кода с помощью LLM «вайб-инженерией» (vibe engineering).
• Heroku запустил Heroku Vibes — экспериментальный AI-инструмент для быстрой сборки приложений.

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

Globby 15.0: удобный способ работать с файловыми шаблонами (globs)

Globby — популярная утилита для поиска файлов по шаблонам (например, *.js или src/**/*). Новая версия 15.0 улучшает поддержку .gitignore, позволяет использовать отрицания (!) и работает быстрее. Это must-have для всех, кто пишет скрипты сборки или CLI-инструменты. Читать подробнее

Odiff 4.0: сверхбыстрое сравнение изображений по пикселям

Odiff позволяет сравнивать два изображения и находить различия на уровне пикселей. Написан на OCaml, но имеет удобный CLI и библиотеку для Node.js. Поддерживает PNG, JPG и BMP. Полезен для визуального тестирования UI. Читать подробнее

Icebird: чтение таблиц Apache Iceberg на JavaScript

Icebird — новая библиотека для работы с форматом Apache Iceberg, который используется для хранения больших аналитических таблиц. Теперь такие данные можно читать прямо в JavaScript-приложениях. Читать подробнее

Javet 5.0: запуск Node.js и V8 внутри Java-приложений

Javet позволяет встраивать движок V8 и Node.js прямо в JVM-приложения. Это открывает возможности для гибридных систем, где логика на JavaScript работает внутри Java-сервера. Читать подробнее

Viz.js 3.20 — Graphviz в браузере

Viz.js — это WebAssembly-версия Graphviz, позволяющая рисовать графы прямо в браузере. Полезно для визуализации зависимостей, архитектур и других структур.

EmbedPDF — PDF-просмотрщик для любого JavaScript-проекта

EmbedPDF — лёгкий и независимый просмотрщик PDF с поддержкой аннотаций, поиска, тем и API для интеграции в любые фреймворки.

resolve-lexicon — работа с AT-протоколом

Библиотека от Dan Abramov для загрузки и разрешения схем Lexicon, используемых в экосистеме AT Protocol (например, в Bluesky).

• Cap’n Web — новый RPC-протокол для браузеров и серверов — альтернатива Cap’n Proto с поддержкой HTTP, WebSocket и postMessage(), ориентированная на JavaScript. Читать подробнее
• Accented — библиотека для непрерывного тестирования доступности — инструмент на базе Axe, который показывает подсказки прямо в интерфейсе приложения, если элементы нарушают правила доступности.
• Size Matters — генератор адаптивных типографских шкал — онлайн-инструмент, который создаёт fluid-типошкалы с использованием clamp() и позволяет экспортировать результат в CSS, Sass или JSON.
• Harmonizer — генератор доступных цветовых палитр — библиотека и веб-инструмент, который создаёт цвета с перцептуально согласованной яркостью и контрастом, что особенно полезно для текста и UI-компонентов.
• StreamTest — расширение Chrome для мониторинга WebRTC — инструмент для разработчиков, показывающий FPS, битрейт, потерю пакетов и другие метрики видеопотока в реальном времени.

Обновления

• react-map-gl 8.1 — обёртка над Mapbox GL для удобной работы с картами в React. Пример использования.
• React Native Audio API 0.9 — аудио-движок на основе Web Audio API для React Native.
• json-edit-react 1.29 — компонент для редактирования JSON-объектов прямо в интерфейсе. Демо.
• React Admin 5.12 — фреймворк для создания B2B-интерфейсов (админок, дашбордов и т.п.).
• React Stripe.js 5.2 — официальные компоненты для интеграции Stripe в React-приложения.
• Reactylon 3.2 — фреймворк для создания XR-приложений (AR/VR) с использованием Babylon.js и React.
• isomorphic-git 1.34 — чистая JavaScript-реализация Git для Node.js и браузеров.
• node-llama-cpp 3.14 — запуск локальных больших языковых моделей (LLM) через Node.js.
• pg-promise 12.2 — клиент для PostgreSQL с официальной поддержкой PostgreSQL 18.
• BullMQ 5.61 — надёжная очередь на основе Redis.
• node-mssql 12.0 — клиент для Microsoft SQL Server.
• node-soap 1.5 — библиотека для работы с SOAP (и клиент, и сервер).
• Pino 10.0 — высокопроизводительный логгер для Node.js.
• NodeBB 4.6 — форум на Node.js.
• Tarot.js 1.0 — библиотека для работы с колодами Таро.
• PlayCanvas glTF Viewer 5.6 — просмотрщик 3D-моделей.
• Vue-multiselect 3.4 — компонент выбора значений для Vue.
• Marked 16.4 — быстрый парсер Markdown.
• Pixi.js 8.14 — мощный 2D-рендерер на WebGL.
• Javet 5.0 — интеграция Node.js и V8 в Java-приложения.