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

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

Как читать этот дайджест
  • Начните с заголовков статей, чтобы получить общее представление о содержании
  • Быстро пробегитесь по первым абзацам, чтобы понять актуальность материалов именно для вас
  • Выберите наиболее интересные или полезные темы под текущие задачи
  • Планируйте чтение: выделите, например, 15 минут утром и 15 минут вечером
  • Не пытайтесь прочитать всё сразу — возвращайтесь к дайджесту в удобное время
  • При повторном просмотре читайте выбранные статьи более вдумчиво, делая заметки
  • Не сожалейте, если прочитали лишь часть: ценность в качестве, а не в количестве
  • Используйте закладки для сохранения интересных материалов
  • Делитесь инсайтами и ссылками с коллегами — так информация лучше усвоится
Фронти на связи! Открываем выпуск №70 релизами Stylelint и Stylistic. 🗞️
Safari пробует тёмную тему для светлых сайтов, а Chrome 157 рисует HTML на холсте. 🧪
CSS укладывает карточки в плитку, а у Geist появился шрифт с засечками. 🎨
Скрипт на Polymarket поменялся по прежнему адресу. Разбираемся, как проверять содержимое файла. 🔒
djs умеет поставить скрипт на паузу даже во время await. 📦
Discord пробует клиент на Rust, а Redux Toolkit готовится к версии 3.0. ⚛️
TypeScript проверяет сообщения между окнами, а Effect читает CSV по частям. 📘
У Node.js 27 вышла первая альфа с V8 15.6 и новым лимитом памяти. ⚙️
Считаем расходы на код с ИИ и смотрим, как агенты ищут ошибки в V8. 🤖
В Three.js растекается жидкость, Parcel перешёл на Rust, а Vitest выбирает тесты по правкам. ⚒️
Фронти - маскот дайджеста

🎨 Проверка CSS

Вышли Stylelint 18 и Stylistic 6

Stylelint 18.0.0 точнее проверяет значения CSS, в том числе записанные через var(). Перед обновлением стоит свериться с руководством по переходу на Stylelint 18: изменились требования к Node.js и некоторые параметры командной строки.

В @stylistic/stylelint-plugin 6.0.0 переехало правило Stylelint, которое ограничивает число объявлений в одной строке, и добавилось несколько новых правил оформления.

Плагин нужно обновлять вместе со Stylelint:

pnpm up @stylistic/stylelint-plugin@latest stylelint@latest

После обновления проверьте свою конфигурацию по руководству по переходу на Stylistic 6. Новые функции defineStylistic() и defineStylisticOverride() позволяют указать синтаксис, например SCSS или Less, один раз для всего блока настроек. Имена правил при этом можно записывать в короткой форме.

Если удобнее начать с готового набора правил оформления, добавьте встроенный пресет @stylistic/stylelint-plugin/recommended в поле extends. Пресет будет пополняться по мере развития плагина, а отдельные настройки можно переопределить в своём проекте.

Спасибо firefoxic за новость о релизах Stylelint и Stylistic!

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

Safari пробует автоматически затемнять сайты

В бета-версии Safari 27.3 можно включить адаптивную тёмную тему. Когда у сайта есть только светлое оформление, браузер сам подбирает тёмные цвета. По данным WebKit, около 40% загрузок страниц приходится на пользователей с тёмным режимом, а собственную тёмную тему страницы используют примерно в 10% загрузок.

  • В бета-версии Chrome 158 тестируют элемент <install> для установки веб-приложений и CSS-состояния :playing и :paused для медиа. Отдельный сайт отслеживает вывод XSLT из браузеров. Эту технологию используют, чтобы преобразовывать XML, например в HTML.
  • Рэйчел Эндрю собрала октябрьские изменения веб-платформы. Среди них поддержка анимаций, привязанных к прокрутке, во всех основных браузерных движках.
  • Мисти Де Мео объясняет, как сохранить копию сайта, если он может исчезнуть. В статье есть способы сделать снимок страницы прямо в браузере, автоматически обойти ссылки и встроить получившийся архив.

🎨 CSS и дизайн

Плитка с карточками разной высоты средствами CSS

В руководстве по CSS Grid Lanes Салех Мубашар показывает, как собрать раскладку в духе Pinterest. Карточки занимают свободное место в колонках, поэтому у каждой может быть своя высота. В статье есть примеры горизонтальной раскладки, вложенных сеток и настройки того, насколько плотно располагаются элементы.

Отдельный пример посвящён порядку карточек. Внешний вид сетки может отличаться от порядка элементов в HTML, по которому пользователь перемещается клавишей Tab.

Как новые возможности CSS влияют на размеры элементов

Габриэль Шойомбо показывает четыре ситуации, в которых современный CSS усложняет раскладку. Например, запросы к контейнеру помогают менять вид карточки по ширине родителя. Однако настройка контейнера меняет и правила расчёта его размера. В одном из примеров из-за этого элемент внутри flex-контейнера сжимается до нулевой ширины.

Автор также разбирает, как условия в :has() связывают стили с разметкой. Если компонент переиспользуется на нескольких страницах, стоит посмотреть, как его поведение меняется при другой вложенности и ширине.

🔒 Безопасность веба

Как сторонний скрипт превратился в атаку на Polymarket

Скотт Хелм разобрал подмену скрипта мониторинга Polymarket. Как и в случае с забытыми тегами <script>, сайт продолжал доверять внешнему ресурсу, когда тот уже стал опасным. Браузер загрузил код с уже разрешённого адреса, но файл по этому адресу изменился. Политика безопасности CSP пропустила запрос, потому что источник остался прежним.

Для статичных файлов можно задать контрольную сумму через Subresource Integrity. Тогда браузер проверяет, что получил именно ту версию, которую указал сайт. Заголовок Integrity-Policy-Report-Only помогает сначала собрать отчёты о ресурсах без такой проверки.

📦 JavaScript, среды выполнения и WebAssembly

Экспериментальный движок djs сохраняет состояние работающего скрипта

Армин Ронахер, создатель Flask, представил движок JavaScript djs, который работает в WebAssembly. Он умеет сохранить состояние виртуальной машины и продолжить выполнение в другой среде. Остановиться можно даже там, где код ждёт результат через await. Такой подход позволяет перенести незавершённую задачу вместе с её состоянием.

  • Бартош показал как собрать строки и запустить JavaScript без кавычек и круглых скобок. Это головоломка про синтаксис и неявное преобразование значений.
  • В Cloudflare Workers можно включить встроенный Temporal флагом совместимости. API помогает работать с датами, временем и часовыми поясами. Для дат совместимости с 1 декабря его планируют включить по умолчанию.
  • Команда Microsoft объясняет, как уменьшила размер clarity.js после сжатия. Удаление импортов вида import * помогло, а вынос повторяющегося кода в функции иногда давал более крупный файл. Статья показывает, почему размер исходника и размер загрузки стоит измерять отдельно.
  • Сергей Целовальников сравнил, какие символы считаются пробельными в Java, Python и JavaScript. Для обычного пробела языки согласны, но некоторые символы Unicode дают разные результаты.
  • Кейт Холтерхофф объясняет, зачем вебу несколько сред выполнения JavaScript. Выбор между движками и средами влияет на то, какие возможности получает разработчик и насколько легко перенести приложение.
  • Николя Шарпантье разобрал пробел в предупреждениях Dependabot для Bun. Если GitHub не читает bun.lock, часть зависимостей, которые подтянулись автоматически, остаётся вне поля зрения.
  • Handwired превращает JavaScript в сеть математических операций, которую можно запустить на GPU. Автор Pretext показал на этом подходе поиск по 100 тысячам JSON-документов.
  • CheerpJ 5.0 позволяет запускать Java 21 и 25 в браузере с помощью WebAssembly. В комплект входит JDK, поэтому код можно даже скомпилировать во вкладке.
  • Джеймс Лонг возвращает к жизни Prepack, инструмент, который выполняет часть JavaScript заранее. В демо с React можно сравнить время серверной отрисовки обычным React, результатом Prepack и сочетанием обоих подходов.

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

Redux Toolkit готовится к версии 3.0

Марк Эриксон опубликовал план развития Redux Toolkit. В 3.0 команда собирается оставить только стандартные модули JavaScript (ESM). Проектам, которые загружают библиотеку через require(), понадобится проверить способ подключения.

В Next.js экспериментируют с обработчиками маршрутов на Go

В прототипе Next.js серверный маршрут можно описать в файле route.go. Из него экспортируют обработчики HTTP-методов, например GET, а Turbopack компилирует код для отдельного процесса на Go. Пока это эксперимент для App Router.

Компоненты и инструменты для React

  • Loading UI предлагает спиннеры и другие индикаторы загрузки для React. Их можно добавить через командную утилиту shadcn.
  • SVAR React File Manager добавляет в приложение файловый менеджер для просмотра, сортировки и предпросмотра файлов. Через API можно подключить свои операции с файлами.
  • В FormSCN форму на shadcn/ui можно собрать перетаскиванием полей, посмотреть результат и выгрузить код на TypeScript.
  • React Trace помогает найти в исходниках компонент, который сейчас отрисован в браузере.
  • Evil Buttons собирает необычные анимированные кнопки, которые можно установить через реестр shadcn/ui.
  • Dotzee переносит в React подход к хранению состояния, знакомый по Pinia. Компоненты могут подписываться только на нужные им данные.

Обновления фреймворков и библиотек

  • В Preact 11.1 появилась совместимость с кодом, который преобразовал React Compiler. Preact 11.2 добавил поддержку отдельных реестров пользовательских элементов внутри Shadow DOM. Это позволяет разным частям страницы независимо использовать одинаковые имена элементов.
  • Вышли XState 6.0 Beta для описания поведения через состояния и переходы и бета @xstate/react 7 для подключения к React. Команда больше не планирует менять публичные API до стабильного релиза.
  • TanStack Redact 0.3, компактная альтернатива React для синхронной отрисовки, добавила плагины Webpack и Rspack для одностраничных приложений.
  • В кандидате в релизы React Native 0.89 ускорили раскладку текста и вызовы нативных модулей. Из этой версии также удалили устаревшие API моста между JavaScript и нативным кодом.
  • Nuxt DevTools v4 переходит на Devframe и Vite DevTools. Благодаря общей основе в Nuxt теперь доступна полная панель Vue DevTools, в которой можно исследовать компоненты и их состояние.
  • Nuxt 4.6.4 и Nitro 2.13.6 закрывают одиннадцать проблем безопасности. Обновление относится к стабильным веткам.
  • В кандидате в релизы Nitro 3 зафиксировали API, уменьшили размер установки и добавили проверку серверных маршрутов через Vitest. Экспериментальная команда nitro serve запускает исходный код без отдельной сборки.

📘 TypeScript

Сообщения между вкладками и фреймами с проверкой типов

Павел Гринченко показывает, как сделать postMessage типобезопасным с обёрткой меньше 350 байт. postMessage позволяет передавать данные между окнами или фреймами. Когда отправитель и получатель пользуются одним описанием сообщений, TypeScript может заметить неверное имя события или поле ещё при разработке.

  • По данным GitHub Octoverse 2026, TypeScript лидирует на GitHub по числу участников, а JavaScript занимает третье место. GitHub также отметил признаки использования ИИ примерно в 44% принятых пул-реквестов на TypeScript.
  • В Effect 4.1 появились средства для криптографических операций, поиска файлов по шаблону и чтения CSV частями. Последнее помогает обрабатывать большие таблицы, не загружая файл целиком.

⚙️ Node.js

Вышла первая альфа Node.js 27

Первая альфа Node.js 27 открывает новый график релизов. Крупные версии теперь сначала проходят примерно полгода альфа-тестирования, а затем переходят в стадию Current. Для рабочих проектов есть ветка Node.js 26 Lithium с долгосрочной поддержкой. Сроки обновлений перечислены в таблице выпусков Node.js.

В обзоре перехода на V8 15.6 команда разбирает новые возможности JavaScript. Math.sumPrecise() уменьшает погрешность при сложении чисел, а Iterator.zip() группирует элементы нескольких последовательностей по позиции. Отложенное выполнение модулей через import defer и неизменяемые буферы ArrayBuffer доступны за флагами.

  • В лимите памяти теперь учитываются данные объектов Buffer. Лимит по умолчанию равен половине физической памяти с нижней границей в 256 МБ и верхней в 4 ГБ. Формат сериализации объектов V8 тоже изменился, поэтому старые версии Node.js могут не прочитать данные, записанные новой.
  • Поиск файлов через fs.glob() получил нативную реализацию. Сетевой API net/promises можно попробовать в экспериментальном режиме, а --allow-env добавляет контроль доступа к переменным окружения.
  • Вместе с альфой поставляется npm 12. При переходе пригодится список несовместимых изменений npm.

Что помогает защитить установку пакетов

Бруно Юркович описал эксперимент с недельной задержкой установки свежих пакетов. Если вредоносную версию удалят вскоре после публикации, она не успеет попасть в проекты команды. Автор рассказывает, какие проблемы возникли с файлами фиксации зависимостей и в каких случаях задержка не поможет.

Эндрю Несбитт сравнил, как реестры пакетов подписывают релизы и подтверждают их происхождение. Подпись помогает проверить подлинность файла, а сведения о происхождении связывают его с конкретной сборкой. Один из примеров применения такого подхода — mise, который проверяет происхождение npm-пакетов по умолчанию.

Серверные фреймворки и пакеты

  • В обзоре обновлений безопасности Express собрали исправления для body-parser и multer. Там же объясняют, что делать с уязвимостью в обработке Brotli.
  • Вышел Fastify 5.12.8. Среди связанных обновлений есть исправление обхода префикса в прокси Fastify. В Hono 4.13.16 также закрыли несколько уязвимостей.
  • NestJS 12.3 добавил адаптер на базе node:http. Он позволяет запускать сервер на стандартном модуле Node.js, сохраняя привычные методы обработки запросов.
  • Wiki.js 3 позволяет поднять собственную вики на Node.js. Для подключения внешних систем есть модули, а исходный код Wiki.js доступен под лицензией AGPL.
  • Клиент базы данных Postgres.js 4.0 переписали. Появились отмена запросов через AbortSignal и планировщик, который помогает коротким запросам меньше ждать длинных. Руководство по переходу объясняет изменения в типах параметров и подключении через ESM.
  • Got 16.2 позволяет передать валидатор в .json(), чтобы сразу проверить структуру HTTP-ответа и получить типизированный результат.
  • fast-json-stringify 7.3 может использовать быстрый путь JSON.stringify в Node.js 25 и новее. В замерах авторов изменения пропускная способность выросла примерно вдвое.
  • express-fileupload 1.6 исправляет проверку Content-Type. Специально составленный заголовок мог надолго занять цикл обработки событий.
  • Koa 3.3 укрепляет защиту серверного фреймворка.
  • ora 10 требует Node.js 22 и обновляет индикатор в терминале, сохраняя остальной вывод программы.
  • marked-terminal 8.0 показывает Markdown в терминале. В новой версии появилась команда mt и поддержка изображений через протоколы Kitty и iTerm2.

🤖 ИИ

Сколько стоит собрать одно приложение с ИИ на разных фреймворках

Нолан Лоусон попросил Claude собрать одно приложение на двенадцати стеках. Для каждого стека он повторил опыт пять раз. Стоимость заметно менялась от запуска к запуску, а Гаутам Параб показал, что диапазоны затрат для большинства пар стеков пересекаются.

В этом опыте лучше различался размер JavaScript, который получал браузер. Медиана составила 0 КБ у Astro, 18 КБ у Hono с htmx и 36 КБ у SvelteKit. У React Router, TanStack Start и Next.js она была от 115 до 142 КБ. Код эксперимента позволяет повторить сравнение.

Google готовит общую настройку для обучения ИИ на материалах сайтов

Google объявил о поддержке общего правила для обучения моделей в robots.txt. Это файл, в котором сайт публикует правила для автоматических обходчиков. Идея инициативы IETF AIPREF в том, чтобы владелец сайта мог выразить своё предпочтение один раз для нескольких поставщиков ИИ, которые поддержат этот механизм. Google рассчитывает добавить поддержку в 2027 году.

Генератор тестов и ИИ полгода искали уязвимости в V8

Команда Google Project Zero сравнила Fuzzilli и BigSleep. Первый инструмент генерирует программы, чтобы проверить поведение движка, а второй анализирует изменения в коде с помощью языковой модели. За полгода они нашли 37 и 45 уязвимостей соответственно. Часть находок совпала, поэтому совместное применение двух методов помогло увидеть больше проблем.

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

  • Reticle даёт агенту доступ к работающему приложению в режиме разработки. Через MCP он может проверить, что произошло после действия в интерфейсе, посмотреть сетевые запросы и найти ошибки в консоли.
  • Juggler собирает работу с агентами в одном интерфейсе. Сессию, запущенную на рабочем компьютере или сервере, можно открыть в настольном приложении и браузере.
  • zot запускает агента в терминале и подключается к разным поставщикам моделей. Агент может редактировать файлы и выполнять команды.
  • В Agent Scripts собраны инструкции, навыки и небольшие вспомогательные скрипты, которыми автор пользуется при работе с агентами.
  • Apache Maka ведёт журнал действий агента, чтобы можно было восстановить ход его работы.
  • Webcmd запоминает повторяющиеся действия агента на сайте и превращает их в команды для следующих запусков.
  • DeepSeek Harness предоставляет среду для запуска агентов. Плагины позволяют добавлять возможности под конкретную задачу.
  • Browy добавляет агента в боковую панель Chrome. Он может читать активную вкладку, нажимать кнопки, заполнять формы и делать снимки страницы.
  • OpenFox ориентирован на локальные языковые модели. Он поддерживает вызов инструментов и отслеживает выполнение условий задачи.
  • Расширение WAVE AI Code Review & Analysis добавляет проверку кода с помощью ИИ прямо в VS Code.
  • В Ness можно вести несколько сессий Claude Code или Codex параллельно в одном приложении для macOS.
  • Copilot Credits читает локальные журналы Copilot и показывает расход кредитов за день и месяц, а также разбивку по моделям.

🕹️ Графика и игры

  • Мисаки Накано показывает, как сделать эффект растекающейся жидкости на Three.js. Одна карта хранит толщину слоя, другая задаёт движение, а шейдер рисует результат для каждого пикселя.
  • В phoria2 можно собрать трёхмерный график или просмотрщик модели на WebGL 2. На странице библиотеки есть интерактивные примеры.
  • edge-aura рисует мягкое свечение по краям экрана через Canvas 2D. Для React предусмотрен отдельный адаптер.
  • drawably добавляет элементам интерфейса вид рисунка от руки. Библиотека каждый раз немного меняет линии и предлагает небольшую обёртку для React.
  • GitHub запустил четырнадцатый Game Off с темой SHIFT. Страницу игры можно отправить на itch.io до 1 декабря.
  • В WhoDunnitAI расследование строится на голосовых разговорах с виртуальными подозреваемыми.

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

Parcel 3 переписали на Rust

В первой альфе Parcel 3 ядро сборщика стало самостоятельной программой на Rust. В одном из тестов на большом репозитории холодная сборка была до ста раз быстрее, чем в Parcel 2. Плагины можно писать на JavaScript и TypeScript, а также на Rust, Go, Swift и C.

В сборщик включили Tailwind и MDX. Поддержку React Compiler можно включить отдельно, а серверные компоненты React доступны в бета-режиме. Для приложений на Node.js появилось горячее обновление при правках.

  • В сравнении производительности десяти дизайн-систем Ден Оделл показывает, как измерять скорость компонентов на реальных объёмах данных. В его примерах раскрывается список из 249 вариантов и переключаются 100 флажков. Такие сценарии помогают обнаружить замедление до выпуска изменений.
  • В Chrome DevTools появился визуальный редактор position-area для позиционирования относительно опорного элемента. Также улучшили диагностику манифестов для установки веб-приложений и сервер MCP.
  • GitHub объявил, что событие pull_request_target будет отключено по умолчанию в публичных репозиториях, если его явно не разрешить политикой событий. В публикации есть даты временных отключений и основного перехода.
  • x18n проверяет файлы переводов и обращения к ним из кода. Инструмент продолжает идеи i18n-ally и находит пропущенные, сломанные и неиспользуемые ключи.
  • webframe запускает страницу по адресу или из HTML-файла как команду в терминале. Сообщения из консоли идут в обычный вывод, а исключения в поток ошибок.
  • File Viewer показывает документы Office, PDF, чертежи, архивы и другие файлы прямо в браузере. Примеры форматов можно открыть в демо просмотрщика, а сам компонент подключить к React, Vue или Svelte.
  • Real Fake Data вставляет в VS Code вымышленные имена, адреса и номера документов с реалистичным форматом. Это пригодится для форм и демонстраций.
  • В MarkText результат разметки Markdown виден прямо во время редактирования. Приложение доступно для Linux, macOS и Windows.
  • DevGhost for IDE строит отчёты об активности по истории коммитов Git.
  • Rune объединяет редактор кода и несколько терминальных сессий в одном приложении.
  • Pokechi добавляет в VS Code питомца, который вылупляется из яйца и развивается по мере работы в редакторе.

Обновления

  • В Vitest 5.1 флаг --since-last-run повторно запускает тесты, затронутые правками с прошлого запуска. Vitest запоминает, какие файлы загружал каждый тест. Ещё добавили интерактивный просмотр изменений сохранённых результатов тестов.
  • Rspack 2.3 перешёл на SWC Next, обновлённый инструмент разбора JavaScript. По замерам команды, сборки стали быстрее на 5–20%, а пиковое потребление памяти снизилось.
  • В первой бете Leaflet 2.0 у библиотеки карт появились встроенные типы TypeScript. Сборщик теперь может удалить неиспользуемый код, а импорт по умолчанию заменили именованными импортами.
  • В ESLint 10.14 исправили пограничные случаи в нескольких правилах, включая no-invalid-this и object-shorthand.
  • В Shiki 4.6 ускорили обработку дополнительных стилей подсветки и уменьшили размер модуля WebAssembly, который ищет совпадения по регулярным выражениям.
  • jsdom 31.0, который имитирует браузерный DOM в тестах, получил новую реализацию CSS с поддержкой вложенности, каскадных слоёв и @scope. Также изменилось подключение Canvas и поведение при разборе блокирующих скриптов.
  • В Vite+ 1.5 добавили загрузчик TypeScript через node --import vite-plus/register. Его можно подключить к встроенному запуску тестов Node.js или к AVA.
  • Вышла первая бета Storybook 11. Storybook позволяет открывать компоненты отдельно от приложения и проверять, как они выглядят в разных состояниях.