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

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

Анонсирован Interop 2026

Interop — это ежегодная инициатива, где команды Google, Apple, Igalia, Microsoft и Mozilla договариваются, какие веб‑фичи в этом году важнее всего «довести до ума» во всех браузерах. В 2026 добавили 15 новых тем, среди которых: улучшения attr(), container style queries, contrast-color(), scroll‑driven animations и уточнение спецификации CSS Scroll Snap. Дополнительно: есть отдельные посты партнёров — например, пост Google от Rachel Andrew, заметка для Mozilla от Jack Archibald, взгляд Microsoft и обзор от Igalia.

• CSSWG опубликовали первый Public Working Draft Selectors Level 5 — ранний черновик следующей версии селекторов, чтобы разработчики могли смотреть и обсуждать будущие возможности.

Вышел Chrome 145

В релизе добавили поддержку CSS‑свойств column-wrap и column-height для работы с многоколоночной раскладкой. Есть демо и объяснения нововведений, а также упоминаются улучшения DevTools.

Виртуальный скролл для таблицы «на миллиарды строк»

Подробный техразбор, как проектировали таблицу, где физически нельзя держать в DOM «всё». Автор рассказывает про:

• ограничения DOM и рендеринга,
• точность скроллбара и вычисления смещений,
• доступность (a11y) и UX‑ограничения, и приводит пример компонента/подхода на базе HighTable.

🎨 CSS и дизайн

• Tailwind CSS v4.2 — в дефолтной теме появились новые палитры (mauve/olive/mist/taupe).
• 🤯 Эмулятор x86 CPU… на CSS — чисто «вау‑демо», но расширяет представление о возможностях CSS.
• Modern CSS Code Snippets — коллекция «до/после»: как делали раньше и как можно сделать сейчас, используя более современный CSS.
• Приближаем contrast-color() с помощью других CSS‑фич — пока contrast-color() ещё не везде работает, автор показывает короткий приём на основе oklch() и относительных цветов, чтобы автоматически выбирать чёрный/белый текст под фон.
• Почему text-wrap: pretty имеет смысл — разбор того, когда «красивый» перенос строк реально улучшает читабельность, а когда может выглядеть странно.
• Адаптивная «пирамидальная» сетка на современном CSS — практический туториал по нестандартной раскладке без тяжёлого JS.
• Пробуем сделать идеальную круговую диаграмму на CSS — эксперимент/разбор приёмов, ограничений и компромиссов.

📦 JavaScript

Прощай innerHTML — привет setHTML для более сильной защиты от XSS

Firefox (начиная с v148) поддержал Sanitizer API: вместо того чтобы вставлять HTML через innerHTML, можно использовать безопасный по умолчанию подход через setHTML. В заметке также упоминается, что Chrome 146 (beta) добавляет поддержку, а Safari пока нет — поэтому библиотеки вроде DOMPurify ещё будут актуальны.

• JS‑модули в service worker’ах теперь во всех основных браузерах — краткая заметка про поддержку после релиза Firefox 147.
• Трюк: сжимать текстовые данные через canvas из JavaScript — «хак» для экспериментов и нестандартных задач (полезно знать, что такое вообще возможно).

Самый быстрый фронтенд‑тулчейн для людей и ИИ

Автор (известен по Jest) показывает, как собрать стек инструментов так, чтобы быстро работали установка зависимостей, сборка, линтинг и тесты. Полезно как чек‑лист для проекта и как база идей для CI. У статьи есть версия в Markdown — удобно скормить LLM: Markdown‑версия.

Oxfmt Beta: быстрый форматтер JavaScript на Rust

Новый форматтер кода, который старается быть полностью совместимым с Prettier, но работает заметно быстрее (в описании заявляют «в разы/десятки раз»). Это «сестринский» проект для Oxlint и конкурирует с Biome. Из интересного: форматирование «встроенных» языков (JSX/YAML/HTML и т.п.), сортировка Tailwind‑классов (class sorting) и сортировка импортов (import sorting).

• «JS‑heavy подходы не совместимы с долгосрочными целями по производительности» — взгляд инженера по веб‑перфомансу: почему «тяжёлые» фронтенд‑фреймворки могут мешать удерживать скорость продукта, и почему сервер‑ориентированные подходы иногда выигрывают.

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

React Doctor: быстрый «чекап» React-кодовой базы

Новый CLI‑инструмент от автора React Scan/React Grab, который пробегается по репозиторию и подсвечивает проблемы безопасности, производительности и архитектуры. Идея такая: сначала получаешь отчёт, а дальше (по желанию) можно подключать агент/автоматизацию для исправлений. Запуск выглядит максимально просто: npx -y react-doctor@latest .. Полезно, если хочешь быстро понять «где болит» в большом проекте. Есть репозиторий на GitHub.

• You Might Not Need An Effect 0.9 — ESLint‑плагин, который ловит случаи, когда useEffect используется лишний раз и можно сделать проще/надёжнее.

styled-components снова «жив», и теперь поддерживает React Server Components

Библиотека была в «режиме поддержки» примерно год, но разработка возобновилась. Начиная с релиза 6.3.0 добавили поддержку React Server Components (RSC). Для новичков: это важно, если ты используешь Next.js/React‑стек с серверными компонентами и хочешь, чтобы CSS‑in‑JS корректно работал в таком режиме. Также есть заметка о выходе из maintenance mode на OpenCollective: обновление.

• Scroll‑driven 3D «Image Tube» на React Three Fiber — туториал с эффектной 3D‑сценой, которая «едет» от скролла. Если хочется вдохновения и примеров нестандартной анимации — отличный материал.
• react-scad: рендерим JSX в SCAD‑модели — экспериментальный подход: описываешь 3D‑объекты как компоненты, а на выходе получаешь формат для OpenSCAD.
• Как стать «Routing God» в React с TanStack Router (видео) — 52‑минутное введение в TanStack Router. Параллельно можно открыть документацию TanStack Router, чтобы повторять по ходу просмотра.

⚙️ Node.js

Как снизить потребление памяти Node.js в 2 раза с помощью «pointer compression»

В продакшене иногда важнее не скорость, а «сколько RAM съедает сервис». В статье разбирают совместную работу Cloudflare, Igalia и участников Node над образом node-caged: это Docker‑образ с Node 25, где в V8 включена сжатая адресация (pointer compression). Идея простая: многие указатели в памяти можно хранить в более компактном виде — за счёт этого уменьшается общий «след» процесса и иногда получается около 50% экономии. Но есть компромиссы: такие оптимизации могут влиять на совместимость окружения, поведение памяти/адресного пространства и не всегда подходят всем workloads. Поэтому важно понимать, что именно выигрывает ваш проект и какой ценой.

• 🔒 Страницы npm‑пакетов теперь ссылаются напрямую на анализ безопасности Socket (пример: отчёт для express).

• В zlib на подходе поддержка кастомных Brotli‑словарей — полезно, когда вы много раз сжимаете похожие данные и хотите выжать ещё проценты.

• Также вышли релизы: Node.js 25.6.1 (Current) и Node.js 24.13.1 (LTS).

• Node.js: v25.7.0 (Current) и v24.14.0 (LTS).

• Temporal API близка к включению по умолчанию в Node.js — важная новость для работы с датами/временем в JS: стандартная современная API может стать «по умолчанию» в одном из будущих релизов Node.

Вышел npm v11.10.0

Релиз добавляет несколько вещей, которые заметны в ежедневной разработке:

• У npm install появился флаг --allow-git (пока по умолчанию all, но ожидается, что в npm 12+ станет none). Идея — более явно контролировать установки зависимостей, которые тянут код из Git‑репозиториев, и снижать риск «неожиданного» выполнения.
• Мейнтейнеры могут обновлять настройки trusted publishing сразу для нескольких пакетов за одну операцию.
• Отдельно упоминают флаг --min-release-age — полезно, если вы хотите «подождать N часов/дней» после публикации версии, прежде чем предлагать/разрешать её установку в CI.

🤖 ИИ

• Google показывает превью WebMCP — идея стандарта, где сайты смогут «выдавать» возможности (abilities) AI‑агентам.
• Cloudflare: агенты смогут забирать Markdown напрямую — фича, которая упрощает автоматическим агентам получение контента с сайтов (особенно документации).
• Building Next.js for an Agentic Future — короткий обзор экспериментов команды Vercel о том, как они смотрят на инструменты разработки «с агентами» (когда часть работы делает автоматизация/LLM‑помощник).

Git

• Как публиковать в npm из GitHub Actions — про новый workflow trusted publishing через OIDC (минимум секретов, больше доверия).
• Полезные «магические» файлы Git — разбор того, как .gitignore, .gitmessage и другие файлы влияют на поведение Git.

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

OpenSeadragon 6.0: веб‑просмотрщик ультра‑HD изображений

Редкий «надёжный ветеран» для зума/панорамирования больших изображений (типа карт/сканов/планов) получил большой апдейт: новый асинхронный пайплайн с управлением кэшем (акцент на эффективность при масштабе). Отдельно отмечают проект, где он применён: Isometric NYC.

Oat — ультралёгкая HTML UI‑библиотека без зависимостей

Идея простая: подключаешь один CSS и один JS файл (в сумме около 8KB gzip) — и получаешь набор UI‑компонентов в стиле «shadcn‑эстетики», но без сборки и тяжёлого тулчейна. Хороший вариант для небольших проектов, прототипов или страниц, где хочется «быстро и чисто».

Обновления

• SVAR React Gantt Chart — open‑source (MIT) диаграмма Ганта для React‑приложений (есть и коммерческая версия). Для старта пригодится туториал по Next.js (часть 1/2) и репозиторий на GitHub.

• TanStack Hotkeys — типобезопасная библиотека горячих клавиш «для разных окружений». В React можно начать с overview/гайда.

• Broad Infinite List — двунаправленный бесконечный список для React и React Native (подходит для логов, чатов, фидов), с упором на плавность и отсутствие «прыжков» верстки.

• React Split Pane 3.2 — сплит‑панели с touch‑поддержкой, клавиатурной навигацией и настраиваемыми областями. Есть демо.

• DayFlow 3.1 — календарь получил полноценную плагин‑архитектуру. Есть демо.

• react-scroll-into-view 2.3 — декларативный компонент для плавного скролла к любому элементу.

• React Lite YouTube Embed 3.5 — лёгкое и быстрое встраивание YouTube‑видео (обычно полезно для производительности).

• Ink 6.8 — популярный «рендерер React для терминала», чтобы писать TUI‑приложения.

• Jotai 2.18 — заметка для пользователей: jotai/babel переехал в пакет jotai-babel.

• Electrobun v1 — сборка кроссплатформенных desktop‑приложений поверх системного webview, Bun и Zig (в духе Electron/Neutralino, но с упором на меньший размер). Документация: Electrobun Docs.

• Slowmo: замедляй/пауза/ускоряй время в браузере — инструмент/расширение для отладки анимаций и сценариев; умеет влиять на CSS‑анимации, transitions и даже requestAnimationFrame.

• Подборка релизов: ESLint 10.0.2, Hono 4.12, Deno 2.6.10, Electron 40.6, Three.js r183.

• pnpm v10.30.0 — команда pnpm why теперь показывает «обратное» дерево зависимостей (от кого зависит пакет).

• DOCX 9.6.0 — генерация и изменение файлов .docx из JavaScript.

• 📊 Plotly.js 3.4 — библиотека визуализации (графики/карты и т.д.); есть примеры.

• Beautiful Mermaid 1.0 — рендер Mermaid‑диаграмм в SVG или ASCII/Unicode.

• Бесконечная процедурная «змейка» на Three.js и WebGL — статья‑разбор, как собрать игру/демо с процедурной генерацией.