FW Frontend Weekly Поддержи
На главную

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

Как читать этот дайджест
  • Начните с заголовков статей, чтобы получить общее представление о содержании
  • Быстро пробегитесь по первым абзацам, чтобы понять актуальность материалов именно для вас
  • Выберите наиболее интересные или полезные темы под текущие задачи
  • Планируйте чтение: выделите, например, 15 минут утром и 15 минут вечером
  • Не пытайтесь прочитать всё сразу — возвращайтесь к дайджесту в удобное время
  • При повторном просмотре читайте выбранные статьи более вдумчиво, делая заметки
  • Не сожалейте, если прочитали лишь часть: ценность в качестве, а не в количестве
  • Используйте закладки для сохранения интересных материалов
  • Делитесь инсайтами и ссылками с коллегами — так информация лучше усвоится
Фронти на связи - выпуск #46! 🗞️
Safari 26.5 подтянул WebKit: :open, random(), SVG и Origin API. 🧭
TanStack пережил npm-атаку и подробно разобрал цепочку supply chain. 🔐
Rolldown 1.0 стал стабильным и готовит быстрый фундамент для Vite 8. ⚡
GitHub ускорил Issues через local-first кеш и фоновые обновления. 🗂️
Bun 1.3.14 добавил изображения, HTTP/3 и больше совместимости с Node. 🍱
Node.js 26 уже можно изучать глубже: от FFI до HTTP/3 и внутренностей рантайма. ⚙️
CSS снова богат на практику: анимации, ShadowRealm, No-Vary-Search и overflow. 🎨
React-экосистема принесла MDXEditor 4.0, Fate 1.0, Waku beta и новые компоненты. ⚛️
Инструменты недели: wf, Wakaru, Counterfact, Orval, Cascade и Find Font. 🧰
Фронти - маскот дайджеста

🧪 HTML и веб-платформа

Safari 26.5 обновил WebKit и подтянул современные CSS-возможности

Safari 26.5 вышел с новыми возможностями WebKit: браузер получил поддержку псевдокласса :open, доработки CSS-функции random(), исправления для anchor positioning, color-interpolation в SVG-градиентах и поддержку Origin API. Рядом вышел и свежий Safari Technology Preview 243.

В браузерах тестируют встроенную установку веб-приложений

Chrome и Edge начали экспериментировать с новым HTML-элементом <install> для установки веб-приложений. Идея простая: разработчик добавляет доверенную кнопку установки без собственного JavaScript, а браузер сам показывает понятный и безопасный UI. В статье также сравнивают этот подход с Web Install API, где установкой управляют уже через JavaScript.

Браузер может подстраивать сайт под реальные условия пользователя

Harry Roberts показал Obs.js как маленький скрипт для чтения сигналов браузера: задержка сети, пропускная способность, Data Saver, батарея, CPU и память превращаются в классы на <html> и данные в window.obs. В демо Obs.js видно, как это можно использовать: например, отключать тяжелые анимации на слабом устройстве или отдавать изображения полегче на медленной сети.

Кеширование может игнорировать неважные параметры URL

Заголовок No-Vary-Search помогает браузерам и CDN лучше кешировать страницы. Он объясняет кешу, какие query-параметры в URL можно не учитывать при поиске уже сохраненного ответа. Например, если ?utm_source= не меняет содержимое страницы, кеш не обязан считать такой URL полностью новым. Поддержка в браузерах пока ограничена, но для CDN и общих кешей это уже полезная HTTP-идея.

  • В заметке о $$$ в Firefox DevTools объясняется, как искать элементы внутри Shadow DOM. Обычный querySelectorAll туда не заглядывает, поэтому такой помощник удобен при отладке Web Components.
  • Mozilla рассказала, как Claude Mythos помогает искать ошибки в Firefox. Это не магическая замена инженерам, а еще один способ быстрее замечать подозрительные места в большом коде браузера.
  • Материал Mozilla про шесть миллионов выборов Firefox через DMA-экран показывает практический эффект европейского Digital Markets Act: когда пользователю явно дают выбрать браузер, конкуренция становится заметнее.
  • Google I/O 2026 возвращается в мае, а developer keynote 19 мая должен показать, что Google считает важным для разработчиков в ближайший год.

🎨 CSS и дизайн

Скоростью бесконечных CSS-анимаций можно управлять через переменную

Temani Afif разобрал управление скоростью бесконечных CSS-анимаций. Вместо того чтобы создавать несколько почти одинаковых @keyframes, можно вынести скорость в CSS-переменную и менять ее по событию: ускорять, замедлять, останавливать или даже разворачивать анимацию назад. Это хороший пример того, как CSS-переменные превращают статичные стили в управляемую систему.

Клавиатурные пользователи часто не могут прокрутить overflow-контейнеры

Разбор проблемы прокрутки overflow-контейнеров с клавиатуры напоминает о простой ловушке: если блок прокручивается мышью, это еще не значит, что он доступен с клавиатуры. Интерфейсы с боковыми панелями, таблицами и внутренними скроллами стоит проверять без мыши, иначе часть пользователей не сможет добраться до контента.

  • В статье о четырех разумных способах собрать сайт предлагают смотреть на выбор архитектуры через тип проекта: статический сайт, приложение, CMS и гибридные варианты решают разные задачи.

  • Maxime Heckel написал красивый технический разбор рендеринга неба, закатов и планет. Материал помогает понять, как шейдеры создают атмосферу, свет и ощущение глубины.

  • Tailwind CSS v4.3 добавил утилиты для scrollbar, новый @container-size, zoom-* и другие мелочи, которые закрывают частые задачи без ручного CSS.

  • Cascade - набор SVG и React-иконок для CSS-свойств. Если вы делаете дизайн-инструмент или учебный интерфейс, репозиторий Cascade дает готовые символы для display, position, overflow и похожих понятий.

  • Find Font помогает смотреть, сравнивать и скачивать шрифты. В нем есть живое сравнение, подбор пар и большая подборка бесплатных шрифтов по категориям.

Присоединяйтесь Telegram-каналу

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

Подписаться

📦 JavaScript

ShadowRealm изолирует JavaScript от глобальной области

В статье CSS-Tricks про будущий ShadowRealm объясняют TC39-предложение для запуска JavaScript в отдельном окружении со своими глобальными объектами. Такой подход полезен, когда нужно выполнить сторонний код и не дать ему случайно или специально испортить глобальное состояние приложения.

TanStack и десятки других пакетов попали под npm supply chain атаку

Главная тревожная история недели - разбор компрометации npm-пакетов TanStack. Новая версия червя Shai-Hulud опубликовала вредоносные версии пакетов, причем атака затронула около 170 других пакетов. Важная деталь: учетные данные мейнтейнеров, по словам команды, не украли. Атака шла через злоупотребление pull_request_target, отравление кеша и кражу OIDC-токена из памяти CI.

TanStack отдельно опубликовал постмортем npm-атаки и план усиления защиты TanStack после инцидента. Похожие детали есть и в отчете о массовой npm supply chain атаке на TanStack, Mistral и другие пакеты.

Практический вывод: свежий пакет не всегда безопаснее старого. Можно включить задержку установки новых релизов через npm config set min-release-age=7 или настройку minimumReleaseAge в pnpm, а GitHub Actions стоит проверять инструментами вроде zizmor.

Rolldown 1.0 стал стабильным быстрым бандлером

VoidZero объявила Rolldown 1.0 - Rust-бандлер, который должен стать основой Vite 8. Его сильная сторона в сочетании скорости и совместимости с Rollup plugin API: проекты получают сборку заметно быстрее, но не обязаны сразу менять всю экосистему плагинов.

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

Веб-платформа часто училась у JavaScript-библиотек

Jad Joubran в статье о девяти случаях влияния библиотек на веб-платформу показывает, как jQuery, Lodash, Dojo и другие проекты фактически проверяли идеи в реальных приложениях. Потом удачные паттерны попадали в браузеры и становились стандартными API. Это хороший способ посмотреть на библиотеки не только как на зависимости, но и как на экспериментальную лабораторию веба.

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

GitHub ускорил навигацию в Issues через local-first кеш

GitHub подробно описал, как сделал навигацию в GitHub Issues почти мгновенной. Команда использовала модель local-first: сначала страница рисуется из IndexedDB-кеша, а затем данные обновляются в фоне по принципу stale-while-revalidate.

Результат заметный: около 70% React-навигаций стали мгновенными, а один из нижних перцентилей задержки упал с 600 мс до 70 мс. Это хороший пример того, что производительность интерфейса часто зависит не от одного трюка, а от аккуратного кеширования, префетча и правильного момента обновления данных.

Raycast перевел новый интерфейс на React

В техническом разборе нового Raycast команда рассказывает, как macOS-лаунчер с React-экосистемой расширений пришел к React-фронтенду в основной версии 2.0. Если коротко, Raycast стал хорошим примером того, как React используют не только на сайтах, но и в нативных продуктах с быстрым desktop-UX.

Миграция с React на Web Components сэкономила 100 КБ

Evil Martians описали переезд с React на нативные Web Components. Автор показывает, почему для небольшого виджета React оказался лишним, а Web Components дали меньший вес и достаточно удобную модель. Из этих паттернов выросла библиотека nanotags, которая помогает писать маленькие компоненты поверх веб-стандартов.

TanStack Form показывает headless-подход к формам

Adam Rackis представил TanStack Form как библиотеку, которая берет на себя состояние, валидацию и жизненный цикл формы, но не диктует внешний вид. Такой headless-подход хорошо подходит командам с собственной дизайн-системой: логика формы общая, а поля и кнопки остаются вашими.

🛰️ Сборка и фреймворки

Astro 6.3 экспериментирует с продвинутым роутингом

Astro 6.3 добавил экспериментальную поддержку advanced routing: теперь можно точнее управлять тем, как запрос проходит через приложение. Это особенно интересно для проектов, где Astro соседствует с серверной логикой и фреймворками вроде Hono.

  • Waku 1.0 Beta развивает минимальный React Server Components фреймворк на базе Vite и Hono.
  • Capacitor 9.0 Alpha 1 начал новую ветку фреймворка для мобильных приложений на веб-технологиях.
  • Electron 42 обновился до Chromium 148, Node 24.15 и V8 14.8, а еще больше не скачивает бинарник Electron в postinstall, что снижает риск supply chain проблем.
  • История разработчика HTTPS-debugging инструмента о переезде с Electron на Tauri полезна тем, кто выбирает основу для desktop-приложения.

📘 TypeScript и типы

Valibot развивает легкую модульную валидацию схем

Fabian Hiller объяснил, зачем мигрировать на Valibot. Valibot похож по задаче на Zod: он проверяет данные по схеме и помогает TypeScript понимать форму этих данных. Отличие в модульности: можно брать только нужные части и уменьшать вес клиентского кода. Свежий релиз Valibot v1.4.0 делает эту тему особенно актуальной.

⚙️ Node.js и рантаймы

NodeBook завершил первый том про внутренности Node.js

NodeBook завершил первый том продвинутого гайда по внутренностям Node.js. В нем разбираются event loop, работа V8, выделение буферов, streams, разрешение модулей, async/await и жизненный цикл процесса.

Это не вводный тур по Node.js, а способ понять, почему привычный код ведет себя именно так: почему задача попадает в event loop, как модуль находится на диске, где появляются буферы и что происходит перед завершением процесса.

Node.js 26 можно изучать через практические изменения

После релиза Node 26 вышел практический обзор What’s New in Node.js 26. Ветка станет LTS в октябре, поэтому фичи из обзора скоро будут не экспериментом на стороне, а обычной частью продакшен-стека.

Отдельно вышел Node 26.1 Current, который продолжил большой релиз Node 26 и добавил экспериментальную официальную FFI-поддержку.

Bun 1.3.14 добавил изображения, HTTP/3 и улучшения пакетного менеджера

Bun v1.3.14 получился крупным релизом. Новый Bun.Image дает встроенную обработку изображений и в некоторых случаях может заменить Sharp. Пакетный менеджер получил global virtual store по духу похожий на pnpm, Bun.serve экспериментирует с HTTP/3 поверх QUIC, а fetch получил поддержку HTTP/2 и HTTP/3. Плюс продолжаются улучшения совместимости с Node.js.

Наблюдаемость JavaScript пытаются сделать без monkey patching

Sentry рассказала, как команда чинит JavaScript observability по одной библиотеке за раз. Идея в том, чтобы меньше полагаться на monkey patching, когда APM-инструмент подменяет методы библиотек, и больше использовать подход на базе diagnostics_channel. Сложность в том, что популярные пакеты должны поддержать этот путь, но первые изменения уже происходят.

  • Node v22.22.3 LTS принес много обновлений зависимостей, npm v10.9.8 и backport исправлений V8.
  • Socket выпустил certified patches для vm2, потому что старая sandbox-библиотека снова столкнулась с уязвимостью escape-класса.
  • Gabor Koos объясняет, почему рекурсия в JavaScript может обманывать: хвостовая форма сама по себе не делает код безопасным для стека, даже если в ES2015 есть tail call optimization. В качестве обхода показывается trampoline-паттерн.
  • James M Snell написал введение в HTTP/3 поверх QUIC в Node.js. Модуль node:quic пока экспериментальный, но материал помогает понять клиентские и серверные сценарии.
  • pnpm 11.1 и отдельная заметка о новых командах pnpm 11.1 описывают gh: для GitHub Packages, pnpm bugs для открытия баг-трекера пакета и pnpm audit signatures для проверки ECDSA-подписей.
  • В заметках Node.js Collaboration Summit можно посмотреть, чем сейчас занята команда Node.js.

✅ Тестирование и качество

  • Jest 30.4.0 улучшил поддержку ESM, Temporal и React 19. В Node-рассылке тот же релиз отмечен отдельно, включая поддержку require(esm) на Node 24.9+ за флагом.
  • Playwright 1.60.0 продолжает развивать браузерное тестирование для современных приложений.
  • Julia Evans показала, как тестировать Vue-компоненты прямо в браузере, без Node и серверных инструментов. Материал полезен тем, кто хочет понять, что именно происходит при mounting, кликах и проверке DOM.
  • React Review - GitHub App от создателя React Doctor, который сравнивает PR-ветку с base-веткой и ищет плохие React-паттерны именно в новых изменениях.

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

zero-native предлагает еще один путь к desktop-приложениям на JS

zero-native - эксперимент Vercel Labs в пространстве Electron, Tauri и Neutralinojs. Он строит desktop-приложения на Zig-ядре и WebView или Chromium, а UI можно писать на HTML и JavaScript. Есть примеры для vanilla, React, Svelte и Vue, а код лежит в репозитории zero-native. В Node-рассылке проект тоже отмечен как ранний, но рабочий инструмент.

Wakaru разбирает минифицированные JavaScript-бандлы

Wakaru принимает минифицированный bundled-код и пытается восстановить более читаемую структуру модулей. Это может пригодиться для восстановления своего старого кода, reverse engineering или аудита безопасности. Попробовать можно в онлайн-версии Wakaru, а в Node-обзоре проект описан как Rust-инструмент для разбора бандлов.

Anime.js 4.4 развивает зрелый движок анимаций

Anime.js 4.4 продолжает развивать библиотеку для анимации HTML, SVG и JavaScript-объектов. В релизе появился эффект scrambleText и auto-grid режим для stagger grids. У Anime.js сильная документация с живыми примерами, поэтому библиотеку удобно изучать по маленьким шагам.

MDXEditor 4.0 стал богаче как React-компонент редактора

MDXEditor 4.0 - Markdown/MDX-редактор для React на базе Lexical. Он поддерживает редактирование кода, ссылки, изображения, таблицы и другие элементы, а живое демо MDXEditor показывает все возможности в одном интерфейсе.

Fate 1.0 предлагает React-фреймворк для данных

Fate 1.0 - новый data framework для React от Christoph Nakazawa. Он добавляет нормализованный кеш, colocated views и сборку одного корневого запроса поверх tRPC или обычного HTTP. В версии 1.0 появились live views через SSE, сборка мусора и Vite-плагин.

Counterfact запускает API-симулятор из OpenAPI-спеки

Counterfact берет OpenAPI-описание и поднимает живой stateful Node-сервер с типизированными handlers, hot reload и REPL для управления поведением во время работы. Это удобно, когда фронтенду нужен реалистичный backend до того, как настоящий API готов. Код открыт в репозитории Counterfact.

BlueJS компилирует JavaScript в маленькие бинарники

BlueJS - ahead-of-time компилятор JavaScript с возможностью встроить QuickJS для динамических сценариев и поддержки пакетов. Проект закрытый, но заявленные числа интересные: быстрый старт, небольшой расход памяти и компактные GUI-бинарники. В похожем направлении можно посмотреть на открытый PerryTS.

  • wf - CLI для поиска поддержки, багов и документации по возможностям веб-платформы. Его можно запускать через npx.
  • visual-explainer - agent skill, который превращает сложный терминальный вывод в стилизованные HTML-страницы. Это полезно для архитектурных схем, diff review и больших объяснений, где ASCII-графика быстро становится нечитаемой.
  • Mantine 9.2 добавил TreeSelect для древовидного выбора, InlineDateTimePicker без выпадающего меню, RollingNumber для анимации чисел, use-drag и другие улучшения).
  • Ant Design 6.4.0 обновил enterprise UI-библиотеку для React.
  • whisper.rn 0.6 дает React Native-привязки к whisper.cpp для быстрой локальной транскрибации речи.
  • react-native-view-shot 5.1 сохраняет React Native view в изображение.
  • react-qr-scanner 2.6 сканирует QR-коды в React-приложениях.
  • styled-components v7 Alpha показывает следующий этап CSS-in-JS библиотеки.
  • Daishi Kato дал краткое обновление по Jotai: релиз Jotai v2.20.0 вышел, а автор уже начинает думать о Jotai v3.
  • Orval генерирует типобезопасные клиенты из OpenAPI или Swagger: модели, запросы, хуки и моки для React, Vue, Svelte, Solid и других стеков.