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

🧪 HTML и API

Интерактивное руководство по SVG Paths

Josh W. Comeau продолжает разбирать мир SVG. В этот раз он показывает, как работает элемент <path>. Обычно он кажется «магическим» и непонятным, но автор объясняет всё простым языком и с примерами. Отличный материал для тех, кто хочет уверенно рисовать иконки, фигуры и сложные формы в SVG.

• Email is ‘Easy’ — забавный квиз: нужно угадать, какие e-mail адреса валидны. Некоторые ответы удивляют.
• Скрытые элементы с помощью hidden=until-found — объяснение нового HTML-атрибута.

🎨 CSS и дизайн

Результаты опроса State of CSS 2025

Каждый год сообщество фронтенд-разработчиков делится опытом использования CSS. В этом отчёте видно, насколько язык ушёл далеко от простой стилизации. CSS теперь активно применяют для анимаций, доступности и сложных макетов. Интересный факт: около 80% участников уже используют селектор :has().

Пять полезных CSS-функций с новой директивой @function

В Chrome 139 появилась поддержка CSS-функций. Una Kravets делится практическими примерами того, как они могут упростить жизнь разработчикам. Пока поддержка ограничена, но будущее у этой возможности большое.

Нежное введение в Anchor Positioning

Теперь в CSS можно позиционировать элементы относительно других с помощью anchor(). Это сильно упрощает жизнь — например, для всплывающих подсказок больше не нужен JS.

Эффект Scrollspy только на CSS

Sara Soueidan показывает, как с помощью scroll-marker-group и :target-current можно реализовать подсветку активных ссылок при прокрутке. И всё это без JS, доступно и просто.

“Не существует CSS Reset”

Адам Стоддард рассуждает о том, что “reset” — это миф. Единственный настоящий дефолт — это стили браузера, а всё остальное — лишь набор удобных нормализаций.

Жёлтый, фиолетовый и миф о доступности цветовых палитр

Стефани Вальтер разбивает миф о том, что доступность ограничивает выбор цветов. На самом деле достаточно правильно учитывать контраст по стандартам WCAG.

Custom Highlight API

Теперь можно подсвечивать текст прямо в браузере с помощью JavaScript для выбора диапазонов и CSS для стилей. Все основные браузеры (включая Firefox 140) уже поддерживают. Полезно для поиска по странице или динамической подсветки кода.

• Что мы узнали, создавая PostCSS — заметки Андрея Ситника.
• Изменение размера DOM-элементов в 2 строки CSS.

📦 JavaScript

Сила Intl API

Современный JS уже содержит встроенный инструмент для интернационализации — Intl. Раньше приходилось тянуть тяжёлые библиотеки, а теперь можно обойтись нативным решением. Статья подробно показывает, как с ним работать.

Устранение холодных стартов JavaScript в AWS Lambda

Появился Porffor — новый ahead-of-time компилятор JavaScript, который запускает процессы почти мгновенно (менее миллисекунды). Это скорее эксперимент для энтузиастов, чем готовое решение для продакшена, но выглядит как намёк на будущее без долгих холодных стартов.

jQuery 4.0.0 RC1

Да-да, jQuery жив! Вышел первый релиз-кандидат четвёртой версии. Хотя библиотека считается устаревшей, она до сих пор используется во множестве проектов.

Rspack представил Rslint — быстрый линтер на Go

Новый линтер для JavaScript и TypeScript написан на Go и позиционируется как сверхбыстрый аналог ESLint. Инструмент входит в экосистему Rspack. ⚡ В тему: Oxlint на Rust теперь умеет “понимать типы”, а также стоит присмотреться к Biome, если вас мучает медлительность ESLint.

• Простой ликбез по массивам в JavaScript — отличная шпаргалка для новичков.

📦 TypeScript 

⚛️ React

Размышления о сообществе React

Ли Робинсон (ранее из Vercel), один из ключевых людей в развитии Next.js и React, делится откровенными мыслями о будущем сообщества. Он поднимает темы:

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

Next.js 15.5

Вышла версия Next.js 15.5. Главное:

• Turbopack-сборки (в бета-режиме);
• стабильная работа Node.js middleware;
• улучшения для TypeScript;
• next lint устаревает;
• подготовка к Next.js 16 с предупреждениями о будущих изменениях.

React Mock Interview: три разработчика решают задачу

50-минутное видео, где три известных разработчика (Kent C. Dodds, Piyush Agarwal, Jack Herrington) решают одно и то же задание по React - создание формы с валидацией. Отличный способ посмотреть, как по-разному можно подойти к решению одной задачи.

React Native 0.81

Главные изменения:

• поддержка Android 16 и новые обязательные
• edge-to-edge интерфейсы;
• предсобранные iOS-сборки, что ускоряет процесс сборки до 10 раз.

💡 Параллельно стартовал двухнедельный бета-период Expo SDK 54, который включает поддержку React Native 0.81 и React 19.1.

• 📺 Три новых фичи TanStackQuery - короткий разбор возможностей.
• 📄 React Cache: это про согласованность - почему cache важен не только для оптимизации, но и для согласованного рендера.
• 📄 Сочетание серверных и клиентских компонентов на практике.

⚙️ Node.js

Node.js 24.6.0 (Current)

Небольшой, но полезный релиз. Теперь можно использовать доверенные сертификаты из системы, просто установив переменную окружения NODE_USE_SYSTEM_CA (аналог --use-system-ca). В модуле zlib появилась поддержка словарей Zstd, а в http добавили опцию keepAliveTimeoutBuffer для тонкой настройки keep‑alive. Подробнее в заметке о релизе.

Коротко по платформе:

• На официальном сайте Node появилась понятная страница про процесс End‑of‑Life (EOL): когда версия считается «устаревшей», что может сломаться, и статус поддерживаемых веток.
• Если у вас много проектов на Vercel с «умирающими» версиями Node, теперь можно массово обновить конфиги.
• В превью: Oxlint с типо‑осознанным (type‑aware) линтингом — полезно, если вы хотите быстрый линтер, который учитывает типы.

Поддержка Express в Cloudflare Workers (локальная разработка)

Cloudflare добавляет прямую поддержку Express‑приложений в среде Workers. Пока это работает для локальной разработки, но движение показательное: многие до сих пор живут на Express, несмотря на появление «экспресс‑лайков» вроде Hono. Сам Express по‑прежнему остается самым популярным вариантом, поэтому такой мост упростит миграции и эксперименты.

• Как неверный парсинг Shopify‑вебхука привёл к удалению базы — история о том, как undefined попал в Prisma и чем это закончилось. Полезный пост‑мортем про валидации и защитные проверки.
• npm добавил OIDC для Trusted Publishing в CI/CD — разбор нового способа безопасно публиковать пакеты из пайплайнов с OpenID Connect.
• Как читать flame‑графы в Node.js — понятное введение в профилирование и визуализацию времени выполнения.
• Rari: замена Node.js на Rust‑бэкенд для рендера RSC — демонстрация заметного прироста производительности при рендеринге React Server Components.

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

• Как Bun сделал postMessage быстрее в 500 раз.
• Будущее JavaScript: что нас ждёт.
• Проблемы модалок и как их решить во Vue.js.
• Проектирование AI API в Chrome.
• Что такое Baseline и как его использовать.
• Как исправить медленный сайт: 4 совета по производительности.
• Сколько стоит доступность?.
• Бенчмарк минификаторов JS (новичок — cminify).

🌐 Браузеры

• 🦊 Firefox столкнулся с проблемами производительности, но Mozilla обещает исправление.
• ✨ OpenAI тестирует браузер на основе Chromium.
• 🧑‍🎨 MDN обновляет дизайн, чтобы сделать интерфейс проще и удобнее.
• ✅ Изменения в проекте Baseline.

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

Panda CSS 1.0

Создатель Chakra UI представил новый инструмент для CSS-in-JS. Он генерирует стили на этапе сборки, даёт типизацию и работает с Next.js, Vite, Astro и даже серверными компонентами.

Sidequest.js — фоновые задачи для Node с масштабированием

Новый процессор фоновых задач, который «из коробки» масштабируется и дружит с TypeScript. Есть веб‑панель для мониторинга, поддержка нескольких бекендов хранения и репозиторий на GitHub. Проект представлен на сайте и распространяется под LGPL‑3.0. Если вы когда‑то склеивали очереди задач вручную (Bull, Agenda и пр.), здесь понравится современная эргономика и TS‑первый подход.

• LooksSame — библиотека для визуального сравнения изображений (под регрессионные тесты). Сравнение «по‑человечески», с учетом восприятия цвета. Важно: только PNG, чтобы не тянуть тяжёлые зависимости.
• zx v8.8 — «сахар» для shell‑скриптов на Node: удобные обертки над child_process, экранирование аргументов, адекватные дефолты. Пайпинг стал гибче. Документация.
• Pyodide — CPython, скомпилированный в WebAssembly. Работает в браузере и в Node: можно импортировать и запускать Python‑код прямо из JS.
• QuickJS Sandbox 3.0 — безопасный запуск JS/TS в песочнице на базе QuickJS: изоляция, минимальная поддержка Node‑модулей и виртуальная ФС. Исходники.
• YIKES — движок текстовых приключений на LLM. Ранний эксперимент, но интересный формат для игр и интерактива.
• Hoverly — эффекты при наведении на ссылки и заголовки.
• PatternCraft — коллекция паттернов и градиентов для фона.
• Kelp — UI-библиотека на Web Components без этапа сборки.

Новые версии

• NVM Desktop 4.1 — десктоп‑менеджер множественных версий Node (macOS/Windows/Linux).
• fdir 6.5 — быстрый обход директорий и glob‑поиск; появился ESM‑сборник.
• Strong SOAP 5.0 — SOAP‑клиент с мок‑сервером; фактически переписанный node-soap.
• Ghost 6.0 — платформа блогов на Node.
• Fastify 5.5 — скоростной веб‑фреймворк.
• CryptoES 3.0 — набор криптоалгоритмов.
• Prisma 6.14 — ORM для Node + TypeScript.
• Undici 7.14 — мощный HTTP‑клиент для Node.
• node‑soap 1.3 — SOAP‑клиент и сервер.
• ESLint 9.33.0 — плановое обновление.
• pnpm 10.15 - новая версия популярного пакетного менеджера.
• Waku 0.25 — минималистичный React-фреймворк добавил концепцию “slice components”.
• React Date Picker 8.6 — простой компонент выбора даты (демо).
• Uppy 5.0 — модульный загрузчик файлов с поддержкой облачных сервисов и интеграцией с React/Vue/Svelte/Angular.
• Faceclick — лёгкий эмодзи-пикер с поиском.
• Ky 1.9 — простой HTTP-клиент на базе Fetch (работает в браузере, Node и Deno).
• Repomix 1.3 — упаковывает репозиторий в один файл для удобной работы с LLM.
• Flatbush 4.5 — быстрый индекс для работы с 2D-геометрией.
• plotly.js 3.1 — библиотека визуализации данных.
• Chai 6.0 — фреймворк для тестирования (BDD/TDD).