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

🎄 Адвент-календари для веб-разработчиков

Декабрь — время адвент-календарей! В этом месяце веб-сообщество делится полезными материалами каждый день. Вот самые интересные подборки:

• CSS Advent Calendar — каждый день автор Стив Харрисон рассказывает о новом CSS-свойстве или фиче, объясняя, как оно работает и зачем нужно.
• HTMHell Advent Calendar — ежегодный календарь от Мануэля Матузовича, где эксперты делятся статьями по безопасности, производительности, доступности и другим важным темам.
• AdventJS — ежедневные JavaScript-задачки для прокачки навыков.
• Web Performance Calendar — авторы из разных компаний рассказывают о том, как делать сайты быстрее и эффективнее.

Также Адриан Росселли собрал все известные адвент-календари в одном месте.

🧪 HTML

Что такое Baseline и почему это важно?

Проект Baseline от Google фиксирует набор веб-фич, которые уже поддерживаются всеми основными браузерами. Новая серия статей на web.dev показывает, как использовать эти возможности на практике — например, для создания слоистых UI-паттернов.

🎨 CSS и дизайн

Masonry: Больше не нужна библиотека

Браузеры наконец-то научились делать «кирпичную» (masonry) вёрстку без JavaScript! Патрик Броссе, разработчик из команды Microsoft Edge, подробно объясняет, как использовать новую нативную CSS-возможность и какие подводные камни могут возникнуть.

Почему CSS-in-JS — плохая идея?

Автор утверждает, что CSS-in-JS, изначально задуманный как решение проблем с глобальными стилями, на деле принёс новые сложности: плохую производительность, увеличение размера бандлов и путаницу в отладке. Статья предлагает вернуться к «чистому» CSS и использовать современные подходы вроде CSS-слоёв и scope’ов.

Как делать не квадратные блюры на изображениях

Ана Тудор показывает, как создавать эффект размытия вокруг изображения, даже если оно не квадратное. Она использует только CSS и объясняет, какие браузеры уже поддерживают эти приёмы.

Как правильно фиксировать позицию при открытом диалоге

Когда появляется модальное окно, контент под ним часто «прыгает» из-за исчезновения скроллбара. Джефф Грэм предлагает простое решение, чтобы отключать прокрутку, но не терять макет.

Как избежать сдвига макета из-за скроллбара

Амит Мерчант делится CSS-хаком, который предотвращает «прыжки» страницы при появлении и исчезновении вертикального скроллбара — распространённую проблему на macOS.

Якорное позиционирование и IMCB

Брамус Ван Дамме объясняет, как работает новая CSS-техника якорного позиционирования через position-area и inset, и почему важно понимать, как формируется содержащий блок (IMCB) для таких элементов. В статье есть интерактивные демо для лучшего понимания.

📦 JavaScript

JavaScript исполнилось 30 лет

В декабре 1995 года Netscape и Sun Microsystems официально представили язык JavaScript, изначально названный Mocha, а затем LiveScript. За три десятилетия он стал основой веба — от простых интерактивных элементов до приложений на сервере, в мобильных устройствах и даже на микроконтроллерах. Подробнее об истории и значении JavaScript, а также официальном анонсе 1995 года.

• WebGPU теперь поддерживается во всех основных браузерах — это открывает возможность использовать мощь видеокарты прямо из браузера для сложных вычислений и графики.
• Как быстро браузеры обрабатывают данные в формате Base64? — большинство современных браузеров (кроме Firefox и Servo) справляются с этим на уровне нескольких гигабайт в секунду.
• Создание синтезатора «дрон-звука» на JavaScript с помощью Web Audio API. Автор показывает, как можно превращать любые файлы в звуковую текстуру через гранулярный синтез. Попробовать демо можно здесь.

TypeScript

TypeScript 7 будет на 10× быстрее благодаря Go

Команда TypeScript работает над двумя крупными релизами: версия 6.0 станет последней, написанной на JavaScript, а 7.0 — первой, полностью переписанной на Go. Это обещает ускорение компиляции до 10 раз. Подробнее о планах на TypeScript 7.

• Строгость TypeScript не всегда работает как ожидается: включение strictNullChecks и noImplicitAny вместе может давать неочевидные результаты. Полезно знать при настройке проектов.

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

Критическая уязвимость в React Server Components

В некоторых версиях React (v19.0, 19.1.0, 19.1.1 и 19.2.0) обнаружена серьёзная уязвимость, позволяющая выполнять произвольный код на сервере (RCE), если приложение использует React Server Components (RSC). Если ваш проект вообще не использует серверную часть React (например, вы собираете SPA без RSC), то он не подвержен риску. Команда React выпустила срочные обновления: React 19.0.1, 19.1.2 и 19.2.1 — обязательно обновитесь, если используете RSC.

• React Router добавляет поддержку React Server Components — Kent C. Dodds рассказывает о том, как React Router внедряет поддержку RSC. Это пока экспериментальная функция, но она уже почти готова к использованию.

Next.js

• Атака на Next.js за $0.0001 — описана уязвимость, позволявшая перегружать серверы Next.js. Проблема уже исправлена: обновитесь до Next.js 15.5.5 или 16+.
• Что нового в Next.js 16 для аутентификации и авторизации — обзор новых возможностей от Auth0.

React Native

• «Новая архитектура» теперь основная — участники команды React Native объясняют, почему новая архитектура (ранее называвшаяся «новой») теперь стала стандартом.
• react-native-quick-crypto 1.0: криптография как в Node.js — библиотека реализует модуль crypto из Node.js для React Native с высокой производительностью, используя C/C++ под капотом.

Vite

• Vite 8 Beta: сборка на Rolldown — первая бета-версия Vite 8, использующая новый бандлер Rolldown, обещает значительно ускорить сборку в продакшене и улучшить расширяемость инструмента.

⚙️ Node.js

Tinybench 6.0: крошечная и простая библиотека для бенчмарков

Это легковесная библиотека для измерения производительности функций в JavaScript и Node.js. Она автоматически использует самые точные доступные средства замера времени (например, process.hrtime или performance.now), позволяет задать длительность или количество прогонов бенчмарка и возвращает подробную статистику. Работает как в браузере, так и в Node.js.
GitHub-репозиторий Tinybench

• Вышел Express v5.2, но уже в тот же день появилась версия 5.2.1, отменяющая проблемное изменение безопасности из 5.2.0. Одновременно обновились и ветки v4 (до 4.22.1).
  Информация о релизе Express 5.2.1
• Node.js 24 LTS теперь можно использовать в серверных функциях на платформе Vercel.
  [Обновлен

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

• Chokidar 5.0 — популярная библиотека для отслеживания изменений файлов — теперь полностью перешла на ESM (модули ES6). Она нормализует события между разными ОС и делает работу с файловой системой более стабильной.
  GitHub Chokidar 5.0
• readdirp 5.0 — рекурсивный аналог fs.readdir с поддержкой потоковой обработки директорий. Полезен, когда нужно обойти вложенные папки без риска переполнения памяти.
  GitHub readdirp 5.0
• binary-parser 2.3 — инструмент для описания структуры двоичных данных (например, сетевых пакетов) с помощью цепочки методов. Удобен для разбора бинарных протоколов.
  GitHub binary-parser
• Better Auth — универсальный фреймворк для аутентификации на TypeScript. Поддерживает вход по email/паролю, OAuth, управление сессиями, двухфакторную аутентификацию и даже режим без базы данных. Недавно вышла версия 1.4 с поддержкой stateless-сессий.
  Сайт Better Auth
• В Playwright 1.57 появилась новая вкладка «Speedboard» в HTML-отчётах, где тесты сортируются по скорости выполнения. Также движок теперь использует Chrome for Testing вместо Chromium.
  Playwright 1.57

---

• React Web Camera: съёмка нескольких фото без перезапуска камеры — удобный компонент для работы с веб-камерой в браузере, позволяет делать несколько снимков подряд. Есть демо.
• Docs: совместная среда для написания текстов на React — инструмент, созданный правительствами Франции и Германии, построен на React, Django и BlockNote. Исходный код на GitHub.
• FullCalendar: полноценный календарь для веб-приложений — готовый к использованию календарь в стиле Google Calendar с поддержкой React, Vue, Angular и чистого JavaScript. Базовая версия бесплатна по лицензии MIT.
• Кастомные директивы в React — автор делится подходом к созданию собственных «директив» в духе Vue, но для React.

---

• Project Wallace — набор из 13 инструментов для анализа CSS: от проверки качества кода до извлечения design tokens и расчёта специфичности.
• Framework7 9.0 — фреймворк для создания мобильных и десктопных приложений с помощью HTML, CSS и JavaScript. Поддерживает iOS, Android и даже ПК-приложения.
• Плагин для WordPress от Internet Archive — автоматически сохраняет внешние ссылки в Wayback Machine, чтобы они не «ломались» со временем.
• capo.js 2.0 — скрипт, который анализирует порядок тегов в <head> и предлагает оптимальную последовательность для ускорения отображения страницы.
• Плагин для Figma: Design System Audit — помогает отслеживать состояние компонентов в дизайн-системе: проверяет метаданные, дубликаты, статус публикации и многое другое.

Обновления

• pnpm 10.24 получил адаптивное управление сетевыми запросами, что ускоряет загрузку пакетов.
  pnpm 10.24
• ESLint v10.0.0 Alpha 1 — первая альфа-версия новой мажорной версии популярного линтера.
  ESLint v10.0.0 Alpha 1

---

• React Spectrum Charts v1.22.0 — библиотека от Adobe для построения доступных и стилизованных графиков.
• React Markdown Editor v4.0.10 — простой редактор Markdown с предпросмотром и подсветкой синтаксиса (демо).
• markdown-to-jsx v9.3.0 — гибкий инструмент для превращения Markdown в JSX.
• React Uploady 1.13 — компоненты и хуки для загрузки файлов.
• Berry v51.0 — админ-панель на базе Material UI.
• Reactylon 3.5 — фреймворк для XR-приложений (AR/VR) с использованием Babylon.js.
• React Three Fiber 9.4.2 — React-рендерер для Three.js.
• Prettier 3.7 — популярный форматировщик кода.
• Preact 10.28.0 — лёгкая альтернатива React.