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

Главные новости

ECMAScript 2025 официально принят

Ecma International утвердила спецификацию ECMAScript 2025. Если нет желания читать весь стандарт, вот краткий разбор от Dr. Axel. Он объясняет нововведения простым языком.

HTML и API

• JSON-модули теперь доступны в браузерах.

CSS

🌀 Руководство по scroll-driven анимациям на чистом CSS

Теперь можно создавать анимации, зависящие от прокрутки, без JavaScript. Используются функции scroll() и view(), позволяющие, например, делать индикаторы прогресса и плавные появления. Также затрагиваются вопросы доступности и снижения укачивания у пользователей.

💎 Жидкое стекло, но в CSS

Попытка воспроизвести Apple-стиль «Liquid Glass» средствами CSS. Хотя поддержка браузеров ограничена, выглядит эффектно и технологично.

🧠 Плавное сравнение CSS cascade layers, BEM и utility-классов

Victor объясняет, как правильно управлять специфичностью в CSS, чтобы избежать необходимости использовать !important.

📦 CSS-функция if() в Chrome 137

Новая мощная возможность CSS — условные выражения. В статье наглядно показано, как использовать if() вместе с другими свойствами.

🎨 Погружение в цвета CSS

Объясняется, как работают функции lab() и oklch() в CSS, и почему они дают больше контроля, чем стандартные RGB и HSL.

Коротко

• 🗳️ Опрос State of CSS 2025 ещё открыт.

JavaScript

🤯 Как упростить работу с регулярными выражениями в JavaScript

Axel Rauschmayer делится советами, как писать регулярки читаемо и понятно — как если бы вы писали обычный код.

Что дальше ждёт JavaScript?

Команда Deno рассказала о 9 новых предложениях для языка, которые сейчас находятся на рассмотрении TC39. Там есть примеры кода, так что удобно для новичков.

Коротко

• Введение в компилятор Porffor — видео-доклад.

React

🚀 Recharts 3.0: D3-библиотека графиков для React

Вышла третья версия библиотеки Recharts, построенной на D3 и SVG-компонентах. Это популярная библиотека для визуализации данных в React. В новой версии улучшена архитектура, и теперь доступны разные типы графиков: линейные, столбчатые, круговые, диаграммы рассеяния и радары.

▶ Как работает повторный рендеринг в React

Понятное объяснение того, когда и почему происходят повторные рендеры в React. Полезно новичкам для понимания производительности и правильного использования хуков.

▶ Переход с WordPress на Next.js и Vercel

История переезда блога с WordPress на современный стек с использованием Next.js, Vercel и инструмента Cursor. Хороший пример для тех, кто хочет сделать что-то подобное.

▶ Можем ли мы с помощью ИИ перенести страницу на Next.js?

Команда попыталась с помощью искусственного интеллекта воссоздать страницу на Rails в Next.js. Получилось интересно — хороший материал для вдохновения и анализа возможностей ИИ.

Коротко

• 🧠 Будущее графики в React Native — обсуждение технологий вроде WebGPU, Three.js и Skia Graphite.
• ⚛️ Переосмысление ViewTransition из React для Vanilla JS

📦 Node.js

🚀 План развития AdonisJS 7

Adonis — это фреймворк на TypeScript, ориентированный на удобство и готовый к работе «из коробки». Разработчики представили дорожную карту версии 7, которая обещает:

• Поддержку diagnostic_channel из Node.js,
• Безопасный генератор URL,
• Новый слой шифрования,
• Интеграцию с TanStack Query и систему уведомлений.

Также опубликована сравнительная статья о Adonis и Nest.

🧵 Потоки в Node.js: гайд по многопоточности

Хотя Node.js изначально работает в однопоточном режиме, worker threads дают возможность распараллеливать задачи. Это особенно полезно для тяжёлых операций вне основного потока.

⚖️ Сравнение сериализации в Node.js

Подробное сравнение JSON, Protobuf и MsgPack — какие способы сериализации работают быстрее и эффективнее.

🧪 MongoDB Memory Server для тестов

Инструмент, который позволяет запускать MongoDB в памяти — удобно для юнит-тестирования без необходимости поднимать настоящую БД.

🧪 Генерация тестов Playwright с помощью AI

Видео об использовании AI в связке с Playwright MCP сервером для автоматической генерации end-to-end тестов.

🔌 Совместная работа CommonJS и ESM в Node.js

Объяснение, как правильно соединить модули двух систем — CommonJS и ES-модули, особенно в больших проектах.

🧠 RAG-система на Node + OpenAI

Практика создания Retrieval-Augmented Generation системы с использованием Node.js и OpenAI API.

Коротко

• Новый custom element <syntax-highlight> — красивый синтаксис без span-хаоса.
• Новая книга “Exploring JavaScript: ES2025 Edition” + карточки для запоминания от Dr. Axel.
• Git 2.50.0 — крупное обновление с обзором от GitHub.
• Новая политика Firefox для расширений вступит в силу в августе.

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

• Почему визуальные редакторы сайтов не прижились — мнение от Salma Alam-Naylor.
• Уроки из разработки inline-документ вьювера — Anjali Munasinghe делится опытом.
• 3D аудио-визуализатор на Three.js + Web Audio API — красочное демо.
• JavaScript испортил веб и назвал это прогрессом — провокационная колонка от Jono Alderson.
• Более удобный API для Intersection и Mutation Observer — Zell делает их проще и понятнее.
• ▶ Создание десктоп-приложения для macOS с React Native — видеоурок по созданию чат-бота с ИИ на React Native.

🔐 Безопасность и доступ

• История ботов и борьбы с ними — IP, капчи, headless-браузеры и поведенческий анализ. Отличный обзор от OlegWock.
• Как работает OAuth — понятное объяснение с примерами и советами по безопасности.

⚙️ Инструменты и фреймворки

• Vite 7.0 вышел
• Bun 1.2.17 — улучшения совместимости с Node.js и новый серверный бандлинг.
• Node.js 20.19.3 (LTS) — обновлены сертификаты, V8 и API WebCrypto.
• SVGO 4.0 — оптимизатор SVG с улучшенной архитектурой и поддержкой ESM/CJS.
• Hono 4.8 — лёгкий фреймворк для серверной разработки под множество платформ.
• LogTape 1.0.0 — универсальный логгер для JavaScript-приложений.
• Astro 5.10 — адаптивные изображения готовы к продакшену + экспериментальная fetch-функция.
• Firefox 140.0 — вертикальные вкладки, fetchpriority для SVG, и обновлённая документация для разработчиков.
• Mossaik — генератор красивых SVG-фонов прямо в браузере.
• Contrast Report — удобная проверка контрастности по WCAG.
• Text to SVG — конвертация текста в SVG-путь.
• SlimImg — компрессия изображений прямо в браузере.
• 🔌 Подключение React-приложения к MCP-серверу за 3 строки — Cloudflare выпустила хук use-mcp, который позволяет легко интегрировать клиент с сервером по протоколу Model Context Protocol.
• 📟 Warka — фреймворк для создания интерфейсов на e-ink дисплеях с React.
• 🔊 Soundz — новая библиотека для добавления звуков к компонентам React.
• 🌐 react-force-graph — визуализация графов в 2D, 3D, VR и AR.
• 📽 ReMDX 0.16 — минималистичная библиотека для презентаций с использованием React и MDX.
• 🧩 Intergalactic 16.4 — набор из более чем 50 компонентов React.
• 🏢 React Admin 5.9 — фреймворк для создания интерфейсов админок.
• 📱 rn-swiper-list 2.5 — свайпы в стиле Tinder для React Native.
• 📝 MDXEditor 3.37 — редактор Markdown-контента на React.
• 📚 BlockNote 0.32 — редактор блоков в стиле Notion.

🧪 Библиотеки и релизы

• zx 8.6 — улучшенный способ написания shell-скриптов на Node.
• Typegoose 12.17 — определяйте Mongoose-модели через TypeScript-классы.
• OpenAI Node 5.7 — новая версия официальной библиотеки для API OpenAI.
• Electron 37.0 — новый релиз фреймворка для десктопных приложений.
• BullMQ 5.56 — распределённая очередь на Redis.
• Mocha 11.7 — стабильный фреймворк для тестирования.
• 🔧 CKEditor: как они уменьшили размер бандла на 40%