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

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

Firefox 155 и августовские обновления платформы

В Firefox 155 функция attr() заработала в любых CSS-свойствах, появились математические функции progress() и alpha(), а font-stretch получил новое имя font-width. Mozilla теперь выпускает крупную версию браузера каждые две недели, поэтому новые возможности будут доходить до пользователей быстрее.

В общем обзоре веб-платформы за август собраны изменения разных браузеров и статусы Baseline; среди главных новинок — свойства семейства text-box для точного управления вертикальными границами текста.

• Google удалила оставшиеся расширения Manifest V2 из Chrome Web Store, включая старую версию uBlock Origin. Разработчикам расширений теперь нужно ориентироваться на Manifest V3.
• В Firefox для iOS появился встроенный блокировщик рекламы. Он включается по желанию и использует системный Content Blocker API вместе со списком EasyList.
• David Bushell сравнил три способа сделать текстовый редактор в браузере: <canvas>, contenteditable и обычный <textarea>. Интерактивные примеры показывают ограничения каждого подхода.
• Предложенный Spell Check Custom Dictionary API позволит сайту добавлять профессиональные термины и названия в словарь браузера. В объяснении улучшенной проверки орфографии также разобрано, почему разные браузеры на одном компьютере подчеркивают разные слова.
• Новый API подтверждения электронной почты пытается заменить привычный переход по ссылке из письма. Браузер и почтовый сервис передают токен, который сервер проверяет при отправке формы; пока эксперимент ограничен Chrome и Gmail.
• Harry Roberts показал, как ускорение цикла релизов браузеров влияет на RUM: данные реальных пользователей начинают быстрее отражать новую версию, и сравнивать периоды нужно осторожнее.

🎨 CSS и дизайн

Как использовать CSS-функцию random() за пределами Safari

Пока только Safari умеет выполнять random() непосредственно в CSS. Полифил сохраняет вызовы функции в custom properties: браузер без поддержки оставляет их как текст, а небольшой JavaScript находит и вычисляет значения.

Так можно случайно распределять размеры, позиции или задержки анимаций уже сегодня, не лишая Safari нативной реализации. При этом важно помнить, что полифил добавляет выполнение JavaScript и не превращает функцию в полноценно поддерживаемую возможность платформы.

@supports named-feature() проверяет составные возможности браузера

Обычный @supports проверяет конкретное свойство, значение, селектор или at-rule, но иногда функция браузера складывается сразу из нескольких частей. Предложение @supports named-feature() дает таким наборам общее имя и позволяет надежно узнать, готов ли браузер использовать всю возможность целиком.

Механизм уже есть в Chrome 150 и тестовых сборках Firefox и Safari. Он пригодится для прогрессивного улучшения: базовая версия интерфейса работает везде, а новый вариант включается только там, где реализованы все необходимые детали.

Ambient CSS строит свет и объем из набора параметров

Ambient CSS описывает направление света, глубину и форму элемента, а затем автоматически согласует тени, градиенты и фаски. Автор сверял результат с рендерами Blender, поэтому система стремится не просто украсить блок, а сохранить понятную модель освещения.

• CSSUnits.com объясняет каждую единицу CSS и помогает понять разницу между абсолютными, относительными, экранными и контейнерными величинами.
• В руководстве по узорам из плиток на CSS Grid шесть орнаментов собраны из градиентов, border-radius и сетки. Те же приемы подходят для фонов, карточек и декоративных иллюстраций.
• В споре о переключателе темы Bramus Van Damme защищает три состояния: светлое, темное и системное, а Lea Verou объясняет, почему считает достаточными два. Оба варианта помогают продумать, что именно должен запоминать интерфейс.
• Jake Archibald разобрал, когда вычисляются CSS custom properties. Значение переменной подставляется не обязательно там, где это интуитивно ожидается, и это влияет на наследование и запасные значения.
• Эссе «Профессор доктор Стиль» возвращает к десяти направлениям веб-дизайна 1993 года, когда даже цвет фона был новой возможностью. Продолжить путешествие можно в Музее веб-дизайна, сохраняющем скриншоты сайтов первых десятилетий веба.
• Чистая CSS-игра The Mine показывает, насколько сложное интерактивное приключение можно построить на селекторах, состояниях формы и анимациях без JavaScript.

📦 JavaScript и библиотеки

«Сапер» на JavaScript уместился в 247 байт

Разбор игры «Сапер» размером 247 байт показывает приемы экстремального code golf: короткие выражения одновременно создают поле 8×8, расставляют флаги и раскрывают цепочки пустых клеток.

Такой код не стоит переносить в рабочий проект — краткость здесь важнее читаемости. Зато статья наглядно демонстрирует приведение типов, работу операторов, строки как структуры данных и другие особенности языка.

• Quicklink во время простоя браузера заранее загружает страницы по видимым ссылкам, чтобы следующий переход ощущался быстрее.
• Particle Charts рисует диаграммы облаками частиц. Это необычный вариант для презентационной визуализации, где движение и форма важнее плотности данных.
• Cropper.js 2.2 предоставляет готовый контрол для обрезки изображений. Его можно испытать в playground, а исходный код и API доступны в репозитории.
• Uppy 6.0 обновил модульную загрузку файлов с возобновлением после обрыва и источниками вроде Dropbox и Google Drive. В релизе переписан S3-плагин и сокращено число пакетов; есть интеграции с React, React Router и Next.js.
• Schedule-X 4.7 добавляет большой календарь и расписание в приложения на React, Vue, Angular, Svelte и Preact.
• noble-curves 2.4 — компактная и прошедшая аудит реализация криптографии на эллиптических кривых без нативных зависимостей.

🛰️ Фреймворки

htmx 4 управляет запросами и DOM прямо из разметки

htmx 4.0 позволяет отправлять серверные запросы и заменять части страницы с помощью HTML-атрибутов, почти не прибегая к собственному JavaScript. В новом крупном релизе библиотека перешла с XMLHttpRequest на fetch, сделала наследование атрибутов явным и привела названия событий к более последовательному виду.

Встроенные morphing swaps аккуратно обновляют существующее DOM-дерево вместо полной замены фрагмента, а элемент <hx-partial> умеет раскладывать один ответ сервера по нескольким местам страницы. Полный список изменений собран в руководстве по htmx 4. Познакомиться с подходом можно на сайте проекта, в документации и на странице с готовыми паттернами.

Remix 3 больше не требует React

Релиз-кандидат Remix 3 завершает превращение проекта из React-фреймворка в самостоятельный полнофункциональный набор для веб-приложений. Маршрутизация, серверная логика и работа с данными теперь собраны вокруг собственных примитивов Remix, а не компонентов React.

Обновленный сайт Remix показывает, как собрать приложение в одном пакете. Финальный релиз запланирован на 2 октября, но RC уже подходит для знакомства и ранней миграции.

• В сентябрьском обзоре Svelte собраны новые методы SvelteMap из Svelte 5.57, релиз-кандидат SvelteKit 3 и дополнение ai-tools для CLI sv.
• Svelte Bits переносит на Svelte набор анимированных компонентов React Bits от того же автора.
• Августовский обзор Astro рассказывает о новом руководителе проекта и других изменениях экосистемы, а примеры теперь можно запускать в Astro Playground.
• Lovable описала миграцию приложения на 850 тысяч строк с Next.js на TanStack Start. Оба приложения работали параллельно за прокси и использовали общую папку, поэтому маршруты переносили постепенно.
• Создатели одной сетки данных сравнили реализации для React, Vue и Svelte. Главный вывод: виртуализация, обновление ячеек и другие дорогие операции требуют одинакового внимания независимо от синтаксиса фреймворка.
• Vue 3.6 RC6 дает возможность заранее проверить совместимость проекта с будущим релизом.

⚛️ React и React Native

React-компоненты выходят за пределы браузерного DOM

GPUIX соединяет React с нативным GPU-интерфейсом редактора Zed. Компоненты превращаются в элементы GPUI, поэтому настольное приложение собирается в один бинарный файл и обходится без Electron и WebView.

Blender React применяет похожую идею к 3D-сценам: аддон запускает QuickJS внутри Blender, а собственный reconciler сопоставляет React-компоненты с объектами сцены.

• Статья о разбиении JavaScript в Turbopack объясняет, как Next.js формирует чанки и какими экспериментальными настройками версии 16.3 можно уменьшить клиентский бандл.
• TanStack и Vercel объявили о партнерстве, чтобы TanStack Start получил полноценную поддержку на платформе. Первый практический шаг — руководство по развертыванию.
• Черновое обновление @types/react для React 19.3 показывает будущие типы для browser(), View Transition и ref у Fragment; точные изменения видны в diff.
• Команда Margelo, создавшая Nitro Modules и VisionCamera, присоединяется к Callstack.
• Инженер Anthropic рассказал, как заменил Next.js на небольшой фреймворк, сгенерированный Claude. В материале есть сравнение производительности, стоимость работы, ограничения и обнаруженные особенности браузеров.
• Shopify подняла стабильность мобильных end-to-end тестов до 98%, заменив основную часть testID компьютерным зрением. Подход проверяет экран ближе к тому, как его видит пользователь.
• Mantine 9.6 добавил lightbox, панель массовых действий ActionBar и четыре вида диаграмм: waffle, matrix, gauge и candlestick.
• cn заменяет связку tailwind-merge и clsx: заранее компилирует правила конфликтов Tailwind в таблицы и может оставить в бандле только нужные правила. Устройство оптимизации объяснено в отдельном документе.
• React Aria 1.21.0 принес компонент NavigationTree и большое обновление меню с готовой поддержкой доступности.
• React Countdown Clock 3.0 переписан для React 18 и 19 и использует requestAnimationFrame для плавного отсчета на Canvas; результат можно увидеть в демо.
• React Native WebGPU 0.9 реализует WebGPU для мобильных React-приложений, а шаблон Expo ускоряет настройку проекта.
• Catalyst — React-фреймворк для универсальных Android- и iOS-приложений с серверным рендерингом, загрузкой данных на уровне маршрутов и упаковкой в нативный WebView.
• Dot Matrix предлагает больше 55 настраиваемых индикаторов загрузки в точечном стиле на React, TypeScript, Tailwind и shadcn.
• Warper использует Rust и WebAssembly для виртуализации списков на миллионы элементов, включая строки с динамической высотой.
• FormEngine строит React-формы по JSON-описанию, чтобы структуру и правила можно было менять без ручной сборки каждого поля.
• microcharts рисует миниатюрные React-графики, которые помещаются в строку таблицы, KPI-карточку или даже предложение текста.
• mapcn дает готовые компоненты карт на MapLibre, оформленные Tailwind и пригодные для копирования и настройки.
• Extend UI собирает React-компоненты для просмотра PDF, DOCX, XLSX и CSV, выделения областей-источников, загрузки файлов и электронной подписи.

🟢 Node.js, Deno и Bun

NestJS 12 перешел на ESM, Rspack и Vitest

NestJS 12 стал крупнейшим обновлением серверного фреймворка за несколько лет. Пакеты теперь в первую очередь ориентированы на ESM, хотя CommonJS все еще поддерживается; Rspack заменил webpack, а Vitest стал основным вариантом для тестов.

Поддержка Standard Schema упрощает подключение Zod, Valibot и других библиотек валидации, а структурированные логи удобнее отправлять в системы наблюдаемости. Вместе с релизом появился новый сайт NestJS.

Bun 1.4 проходит 80% тестов Node.js

Интерактивная таблица совместимости Bun с Node.js показывает, какие части стандартного API уже работают, а где остаются пробелы. В Bun 1.4 доля пройденных тестов достигла 80%; подробности собраны в разделе о совместимости с Node.js.

Встроенный build теперь умеет запускать React Compiler, а Bun.markdown.react() преобразует Markdown сразу в React-элементы.

Новые возможности и релизы Node.js

В ветку Node.js добавили node:ffi, включенный по умолчанию. Экспериментальный модуль позволяет вызывать функции нативных C-библиотек без отдельного аддона и node-gyp, но пока еще не вошел в официальный релиз.

Single Executable Applications смогут монтировать вложенные ресурсы как виртуальную файловую систему. Это дает упакованному в один файл приложению обычный путь для чтения шаблонов, сертификатов и других ресурсов.

• Вышли Node.js 26.8.0 Current и Node.js 24.20.0 LTS.
• AWS Lambda открыла предварительный доступ к рантайму Node.js 26.
• Express закрыл шесть уязвимостей в hbs, multer и morgan, поэтому проекты с этими зависимостями стоит обновить.
• В документации Node.js предложено убрать параллельные примеры ESM и CommonJS, чтобы API-страницы были короче и проще в сопровождении.
• Checkly рассказала о переписывании Node.js-сервиса на Go с помощью ИИ-агентов. Команда сначала построила тестовый стенд, затем выполнила перенос и раскатывала замену под контролем метрик.
• Статья о поиске полных сканирований SQLite в Node.js показывает, как после запроса прочитать счетчик просмотренных строк и заметить отсутствующий индекс.
• Сравнение worker threads и отдельных процессов помогает выбрать между общей памятью и более сильной изоляцией при параллельных задачах.
• srvx 1.0 запускает один обработчик Request → Response без изменений в Node, Deno и Bun. CLI умеет следить за файлами, раздавать статику и вызывать обработчик без запуска сервера.
• NVM for Windows 2.0 переписан вокруг легких shim-файлов, закрепляет версию Node для проекта и больше не требует прав администратора; код доступен в репозитории.
• Got 16 получил встроенный HTTP/2-клиент, DNS-кеш и поддержку стандартизированного метода QUERY.
• SimpleWebAuthn 14 умеет проверять постквантовые passkey на ML-DSA, а на Node 24.7+ предпочитает ML-DSA-44 при регистрации.
• Restify 12 вернулся после двух с половиной лет, добавил Node 26 и перешел с url.parse() на WHATWG URL; несовместимые изменения перечислены в описании релиза.
• np 12.1 ускорил удобный сценарий публикации npm-пакетов, а express-rate-limit 8.7 обновил ограничение частоты запросов для Express.
• Deno 2.9.6 выпустил очередное исправление альтернативного JavaScript- и TypeScript-рантайма.
• Открыт опрос пользователей Node.js 2026, результаты которого помогают команде выбирать приоритеты проекта.

📘 TypeScript

Zod 4.5 ускорил проверку и сократил память схем в девять раз

Zod 4.5 добавил z.compile() для предварительной компиляции схем и быстрый путь, когда нужно только узнать, валидны ли данные, без построения полного результата разбора.

Схемы теперь занимают примерно в девять раз меньше памяти. В техническом разборе оптимизации показано, как мемоизация методов уменьшила размер простого z.string() в куче с 7,5 КБ до 784 байт.

• TypeScript получил ambient modules с учетом import attributes. Объявление вроде declare module "*" with { type: "css" } теперь может описывать только импорты с нужным атрибутом.
• Язык доказательств Lean использует проверку типов как основу верификации математических утверждений, а реализация идеи на TypeScript помогает увидеть механизм на знакомом синтаксисе.
• unbash — быстрый TypeScript-парсер Bash без зависимостей. Он разбирает структуру команды или скрипта, не выполняя потенциально опасный ввод.
• tsbro запускает TypeScript прямо в браузере без отдельной сборки и цепочки инструментов.

🤖 ИИ и инструменты для агентов

Разработка с агентами возвращает внимание к базовым примитивам

Robin Wieruch объясняет, почему при агентной разработке выгодно опираться на простые примитивы. Агент может быстро собрать небольшой слой поверх D3 или браузерного API, поэтому большая универсальная библиотека не всегда остается самым дешевым выбором.

Addy Osmani напоминает, что мастерство по-прежнему требует повторения практики. Если агент постоянно выполняет упражнение вместо разработчика, скорость растет, но понимание приходится поддерживать отдельной осознанной работой.

• Ahmad Alfy проверил Google Modern Web Guidance на настоящем React-приложении и показал, насколько рекомендации skill совпадают с реальными проблемами проекта.
• Agent Behavior предлагает стандартный человекочитаемый формат ожидаемого поведения агента, чтобы сценарии можно было сравнивать по трассировкам и проверять в eval-тестах.
• Paseo дает единый самохостинговый интерфейс для Claude Code, Codex, Copilot, OpenCode и других coding agents на компьютере и телефоне.
• CLI asm устанавливает, ищет, проверяет и упорядочивает skills для разных агентных инструментов.
• Awesome Claude Code Plugins собирает плагины с командами, агентами, hooks и MCP-серверами для Claude Code.
• Ponytail — набор правил, который просит агента выбирать минимальное решение и писать как можно меньше кода, достаточного для задачи.
• MiMoCode работает в терминале, меняет файлы, запускает команды и сохраняет долговременную память о проекте.
• Oh My OpenAgent координирует несколько моделей и специализированных агентов при работе с большой кодовой базой.
• Галерея примеров Apps SDK содержит UI-компоненты и образцы MCP-серверов для приложений внутри ChatGPT.
• Обсуждение ограничений терминала как интерфейса для coding agents поднимает вопрос, достаточно ли последовательного текстового потока для наблюдения и управления параллельной работой.

🧰 Сборка, тестирование и инструменты

pnpm 12 переписан на Rust без смены привычного workflow

Стабильный pnpm 12 сохранил почти все команды, флаги и формат lock-файла версии 11, но его внутренности теперь написаны на Rust. Это позволяет обновить пакетный менеджер без полной перестройки CI и правил репозитория.

Небольшой список несовместимостей вынесен в руководство по отличиям pnpm 12.

Сборщики и тесты ускоряются и становятся наблюдаемее

Rspack 2.2, Rsbuild 2.2 и Rslint 0.9 ускорили сборку и HMR, сократили идентификаторы модулей и включили разбиение Node.js-чанков по умолчанию в Rsbuild. Rslint теперь реализует все правила и пресеты @typescript-eslint.

Vitest 5 примерно на 15% быстрее в тесте React SPA и получил просмотр трассировки браузерного теста, по которой можно пошагово восстановить произошедшее. Несовместимые изменения собраны в руководстве по миграции.

• Cypress 16 ускоряет тесты благодаря поддержке HTTP/2.
• Mocha 12 выпустил новый крупный релиз тестового фреймворка.
• Electron 44 получил официальный обзор изменений платформы для настольных приложений.
• В статье о конкурирующих автоисправлениях линтера показано, почему одновременное применение нескольких fixes может сломать код и чем безопаснее цикл «исправить — заново проанализировать».
• James Healy объясняет, почему частое повышение major-версии JavaScript-библиотеки вредит пользователям: в одном проекте накапливаются несовместимые копии одной зависимости.
• Drydock сравнивает подготовленный npm-архив с предыдущей опубликованной версией и отмечает новые install-скрипты, сетевой доступ и бинарные файлы. Быстро проверить две версии можно в веб-интерфейсе diff.
• Storybook 10.6 добавил CLI-команды, через которые агенты могут запускать инструменты и skills среды компонентов.
• Speedlify 2 регулярно измеряет Lighthouse, Core Web Vitals и доступность Axe через GitHub Actions и Pages. Это бесплатный самохостинговый проект автора Eleventy.
• svelteesp32 превращает сборку Svelte, React, Angular или Vue в один C++ header с gzip, ETag и OTA-обновлениями для ESP32 и ESP8266.
• eslint-markdown добавляет правила проверки Markdown поверх @eslint/markdown.
• pnpr — совместимый с npm-протоколом реестр пакетов на Rust, к которому могут подключаться pnpm, npm и Yarn.
• crust сравнивает две production-сборки Next.js App Router и показывает, что изменилось перед публикацией.
• pack одной командой публикует локальное приложение по постоянному HTTPS-адресу для самостоятельного хостинга.