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

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

Что случилось с фронтендом за последние 20 лет

David Poblador i Garcia написал большой разбор эволюции фронтенд-разработки: от простых FTP-загрузок до сложных пайплайнов сборки, SPA, SSR, edge-инфраструктуры и новых попыток вернуться к HTML-first подходу.

Safari MCP Server подключает AI-агентов к реальному браузеру

В Safari Technology Preview 247 появился Safari MCP Server для веб-разработчиков. Он дает AI-агенту доступ к открытому окну Safari: агент может смотреть, как страница реально отрисовалась, проверять DOM, взаимодействовать с интерфейсом и помогать в отладке не только по коду, но и по результату в браузере.

В том же выпуске Safari Technology Preview 247 добавил поддержку calc-mix() и исправил много ошибок CSS и рендеринга.

Chrome улучшает Async Clipboard API

Chrome предложил более аккуратное поведение для чтения буфера обмена: Selective Format Read загружает и очищает данные лениво, только когда приложение запросило конкретный MIME-тип. Это полезно, когда в буфере лежит сразу несколько форматов, например HTML, текст и изображение.

• Rachel Andrew собрала июньские обновления веб-платформы, включая переход field-sizing в Baseline. Это свойство помогает формам подстраиваться под содержимое без ручного JavaScript.
• В Microsoft Edge появились новые инструменты для разработчиков: подсветка пробелов в layout, улучшения доступности с клавиатуры и помощь при переносе PWA на новый origin.
• Visual Studio Code 1.127 добавил agentic browser tools, чтобы ассистенты могли работать с браузером прямо во время разработки.
• В Codrops показали, как делать постоянные page transitions через WebGPU и обычный JavaScript. Идея в том, что одна WebGPU-сцена переживает переходы между страницами, а демо переходов помогает увидеть эффект без длинных объяснений.

🎨 CSS и дизайн

Anchor Positioning делает привязанные элементы проще

Josh W. Comeau написал подробное введение в CSS Anchor Positioning. Эта возможность помогает привязывать один элемент к другому: например, tooltip к кнопке, popover к полю ввода или меню к выбранному пункту.

Раньше такие вещи часто требовали JavaScript: нужно было измерять координаты, следить за resize и scroll, пересчитывать позицию. Anchor Positioning переносит часть этой логики в CSS. При этом технология еще молодая: Jake Archibald отдельно предупредил о текущих багах, так что использовать ее в продакшене стоит с проверками.

CSS Mixins начинают реализовывать в Chromium

Patrick Brosset сообщил, что команда Edge начала реализацию CSS Mixins в Chromium. Идея похожа на миксины в Sass: описываем переиспользуемый блок стилей, передаем аргументы и используем его в разных местах без копипасты.

MDN уже описывает концепцию кастомных функций и миксинов в CSS. До повседневного применения еще далеко, но направление заметное: браузеры постепенно забирают часть возможностей, ради которых раньше почти всегда подключали препроцессор.

border-shape открывает новые формы рамок

Temani Afif разобрал будущее CSS-свойство border-shape. Оно продолжает линию shape() и corner-shape и позволяет делать рамки сложнее обычного прямоугольника: декоративные формы, необычные углы и анимации без тяжелой графики.

Пока поддержка есть только в Chromium, поэтому это скорее материал для экспериментов и понимания направления платформы. Но уже видно, что многие эффекты, которые раньше требовали SVG или нескольких оберток, постепенно становятся частью обычного CSS.

Адаптивная типографика через progress()

Matthew Morete показал, как строить fluid typography с CSS progress(). Смысл в том, чтобы плавно менять размер текста между контрольными точками, но при этом не ломать пользовательские настройки масштаба шрифта.

В статье полезно показано, почему просто писать размеры во vw опасно: такой текст может игнорировать предпочтения пользователя. Подход с rem и диапазонами делает типографику гибкой, но уважает доступность. Минус пока практический: Firefox еще не поддерживает эту возможность, поэтому нужен fallback.

• David Bushell объяснил, как починить full-bleed CSS и избежать проблемы с 100vw, из-за которой страница получает горизонтальный скролл рядом с вертикальной полосой прокрутки.
• Каталог Things You No Longer Need JavaScript For собирает примеры интерфейсных задач, которые теперь можно решить современными HTML и CSS без скриптов.
• Новый шрифт Geist Pixel из семейства Vercel Geist теперь доступен в Google Fonts.

♿ Доступность и UX

• Grace Snow написала о дизайне для людей с трудностями чтения. Хороший интерфейс здесь начинается с простых решений: понятный язык, читаемые строки, достаточный контраст, предсказуемая структура и отсутствие лишней перегрузки.
• OverflowGuard предлагает строить компоненты вокруг реального содержимого, а не только вокруг брейкпоинтов. Он доступен как React-компонент и Custom Element, а исходный код OverflowGuard показывает, как элемент адаптируется без магических чисел.
• Driver.js 1.6 помогает делать туры по интерфейсу, подсветку элементов и контекстные подсказки. Такой инструмент полезен, когда сложный продукт нужно объяснить прямо внутри приложения, не отправляя пользователя читать отдельную документацию.

📦 JavaScript, Deno, Bun и WebAssembly

ECMAScript 2026 утвержден

Pawel Grzybek разобрал, что нового в ECMAScript 2026. Спецификация ECMA-262 в этом году включает несколько уже практичных возможностей: Array.fromAsync, преобразование Uint8Array в Base64 и Hex, а также другие улучшения стандартной библиотеки.

Хорошая новость в том, что почти все из списка уже доступны в браузерах и рантаймах.

Bun переписывают на Rust

Jarred Sumner рассказал полную историю переписывания Bun на Rust. Это необычный кейс: большая часть порта была сделана с участием AI-инструментов, а будущая версия Bun 1.4 будет опираться на результат этой работы.

PocketJS запускает JavaScript в 8 МБ памяти

PocketJS объединяет JavaScript VM, Vue Vapor и Solid UI так, чтобы уложиться примерно в 8 МБ памяти. Проект может работать в WASM, нативно на macOS и даже на Sony PSP.

• js1024 2026 открыл прием работ: участникам нужно сделать демо на JavaScript размером до 1024 байт. Чтобы понять уровень конкурса, можно посмотреть победителя прошлого года.
• В TC39 появился proposal для стандартизации свойства code у Error. В Node.js такой подход давно используется на практике, а стандарт поможет сделать поведение единым.
• В статье про гидрацию и стратегии рендеринга сравнивают SSR, streaming, islands, resumability и React Server Components. Это полезная карта, если слова уже знакомы, но границы между подходами все еще размыты.
• В материале WebGL Without a GPU объясняют, как тестировать и делать скриншоты WebGL-сцен на серверах без видеокарты.
• PGlite достиг 10 миллионов загрузок в неделю. Это WASM-сборка Postgres для JavaScript-окружений, которую можно использовать в браузере, тестах и локальных инструментах.
• Upyo 0.5 дает единый type-safe API для отправки email через SMTP и HTTP-провайдеров из Node, Deno, Bun и edge functions.

⚛️ React

Как устроен ChatGPT Web на большом масштабе

Dennis Brotzky разобрал как устроен ChatGPT Web по исходникам страниц, бандлам и сетевым запросам. Внутри заметны React Router 7, TanStack Query, Radix и ProseMirror, а не самые важные скрипты откладываются до момента, когда пользователь уже может печатать.

shadcn/ui перешел на Base UI по умолчанию

Новые проекты shadcn/ui теперь используют Base UI как библиотеку компонентов по умолчанию. Radix не исчезает: компоненты продолжают поставляться в обоих вариантах, но для новых проектов команда рекомендует Base UI.

Документация React объяснила Suspense Boundaries

В официальной документации React появился раздел что активирует Suspense boundary. Там перечислены ситуации, когда React показывает fallback UI, и для каждой есть живой пример. Aurora Scharff дополнительно пояснила обновление.

React-формы от HTML до TanStack Form

Vu Nguyen подготовил интерактивный материал React Forms Done Right. Он начинает с обычных HTML-форм без JavaScript, затем переходит к нативным form actions в React 19 и заканчивает связкой TanStack Form с Zod.

Это полезный путь обучения: сначала понять, что браузер уже умеет сам, а потом добавлять React там, где появляется состояние, валидация, сложные поля и серверные действия.

Обновления React-экосистемы

• Для Next.js появился официальный RFC WebSocket support in Route Handlers. Если его примут, real-time сценарии в Next.js станут проще и ближе к встроенной модели фреймворка.
• React Google Maps 1.9 предоставляет компоненты и хуки для Google Maps, а репозиторий React Google Maps показывает примеры маркеров, рисования и интеграции карты в React-состояние.
• React Email Editor 2.0 добавляет drag-and-drop редактор писем как React-компонент; поведение можно посмотреть в демо React Email Editor.
• react-easy-crop помогает интерактивно обрезать изображения и видео, поддерживает перетаскивание, зум и поворот, а код лежит в репозитории react-easy-crop.
• React Hook Form 7.81.0 добавил компонент FieldArray для динамических массивов полей; основная документация доступна на сайте React Hook Form.
• Вышли React Native 0.87 RC и React Router 8.2.0.

🛰️ Фреймворки и сборка

Vite+ объединяет инструменты вокруг одной команды

VoidZero выпустили Vite+ Beta - unified toolchain для веб-разработки. Идея в том, чтобы запускать dev server, тесты, форматирование, lint и сборку через одну команду vp, а под капотом использовать Vite, Vitest, Oxlint и соседние инструменты.

vinext 1.0 Beta переносит Next.js API на Vite

Cloudflare выпустила vinext 1.0 Beta - Vite-плагин, который переосмысляет API Next.js. Проект поддерживает App Router, Pages Router, React Server Components, Server Actions и ISR, но пока не является полностью drop-in заменой.

Интересно, что vinext вырос из эксперимента, где Cloudflare пробовала собрать клон Next.js с помощью AI. После тысяч изменений он стал более серьезной попыткой совместить привычную модель Next.js с инфраструктурой Vite.

Medal уменьшил Electron-бандл с 40 МБ до 2.7 МБ

Команда Medal рассказала, как сократила размер Electron frontend bundle с 40+ МБ до 2.7 МБ. В ход пошли Vite, Rolldown, code splitting и агрессивное удаление мертвого кода.

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

• Swizec Teller рассказал, как переписывал блог на RSC-native framework под названием TimberJS. Это взгляд на то, как React Server Components начинают влиять не только на Next.js.
• Dennis Morello написал первый взгляд React-разработчика на SolidJS 2.0: сигналы, async-подход и другая модель реактивности помогают понять, чем Solid отличается от React.
• Software Mansion сравнила одно и то же приложение на Kotlin Multiplatform и React Native. По их бенчмаркам KMP сильно впереди на Android, а React Native хорошо держится на iOS.
• webpack-dev-server 6.0 перешел на Express 5, добавил возможность использоваться как webpack-плагин, переключился на ESM и поднял требования к Node.js.

📘 TypeScript

TypeScript 7.0 вышел с новым Go-компилятором

Microsoft выпустила TypeScript 7.0 - версию с новым компилятором на Go, о котором команда рассказывала заранее. Главная цель - заметно ускорить проверку типов и сборку больших проектов.

Переходить сразу всем не обязательно. У TypeScript 7.0 пока нет программного API, поэтому многим фреймворкам и инструментам еще подходит TypeScript 6.0 как промежуточный шаг. Но для больших кодовых баз это уже важный сигнал: типизация JavaScript становится быстрее на уровне самого инструмента.

• Tejas Bubane объяснил distributive conditional types в TypeScript. Это одна из тем, где простая запись вроде T extends ... ? ... : ... начинает вести себя неочевидно, если T является union-типом.

⚙️ Node.js

npm 12 вышел и отключил install scripts по умолчанию

npm 12 стал стабильным релизом: теперь lifecycle scripts и неявные сборки node-gyp не запускаются по умолчанию. Полный список изменений есть в релизе npm CLI 12.0.0, а Sarah Gooding разобрала практические последствия npm 12.

Это изменение направлено на безопасность supply chain. Пакет больше не сможет автоматически выполнить скрипт при установке так же легко, как раньше. При этом npm смягчил одно поведение из preview-версий: неизвестные ключи .npmrc теперь должны предупреждать, а не ломать установку, что видно в соответствующем PR.

Node.js 26.5.0 добавил импорт текстовых файлов и новые perf-возможности

В Node.js 26.5.0 Current появились экспериментальные импорты текстовых файлов в ES modules через import attributes. Эта возможность связана с proposal Import Text и пока включается за флагом из PR Node.js.

Еще релиз добавил blob.textStream() для потокового чтения больших Blob и возможность измерять задержку event loop по итерациям через perf_hooks, что описано в PR про event-loop delay sampling. Такие вещи особенно полезны для серверов, где маленькие задержки постепенно превращаются в видимую медлительность.

История CVE, который не должен был быть CVE

Matteo Collina написал честный разбор CVE-2026-48931 Shouldn’t Have Been a CVE. Речь о проблеме вокруг HTTP/1.1 poisoning, исправление которой в итоге сломало node-fetch, Firebase и официальные Docker-образы.

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

Безопасность публикации пакетов остается сложной

William Woodruff объяснил, почему trusted publishing не стоит воспринимать как знак качества. npm действительно поддерживает trusted publishers, но это про аутентификацию процесса публикации, а не про гарантию, что пакет безопасен или хорошо поддерживается.

Matteo Collina раньше тоже писал, почему trusted publishing не спасает npm само по себе. Безопасность пакетов складывается из нескольких слоев: аккаунты, CI, зависимости, review, репутация и реакция на инциденты.

Node.js-инструменты и релизы

• Inngest поделились опытом использования Node.js Worker Threads в продакшене. Worker Threads помогают выносить тяжелую работу из основного event loop, но требуют думать об очередях, памяти и завершении задач.
• eslint-node-test добавляет ESLint-правила для встроенного тест-раннера node:test, чтобы ловить ошибки и поддерживать единый стиль тестов.
• terminal-image 5.0 умеет показывать изображения в терминале через цветные блоки или нативную поддержку inline graphics, а в новой версии улучшена работа с iTerm2.
• XO 4.0 обновил opinionated ESLint-wrapper с большим набором готовых правил и плагинов.
• MongoDB Node.js Driver 7.5 добавил поддержку Queryable Encryption string queries в MongoDB 9.0.
• node-calls-python 1.2 позволяет вызывать Python из Node.js внутри процесса, без запуска отдельного процесса на каждый вызов.
• FoalTS 5.3 добавил новый формат логирования dev-verbose.
• Вышли Fastify 5.10.0 и feed 6.0 для генерации RSS, JSON Feed и Atom.

🤖 ИИ

Agent-Ready Toolkit проверяет, удобно ли сайтом пользоваться агентам

Google представила Agent-Ready Toolkit - набор проверок в Lighthouse, который оценивает, насколько сайт понятен AI-агентам. Он смотрит на качество accessibility tree, стабильность layout и интеграцию с WebMCP.

Важно, что многие такие проверки полезны не только агентам. Если дерево доступности чистое, элементы понятны, а layout не прыгает, интерфейс обычно становится лучше и для людей: экранных читалок, клавиатурной навигации и обычного восприятия страницы.

Практический пример работы с AI от автора htmx

Carson Gross написал конкретный пример работы с AI на основе расследования баг-репорта в htmx. Это спокойный взгляд на AI как на помощника в исследовании, а не как на магическую замену инженерной работе.

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

Wordgard - новый редактор текста от автора ProseMirror

Marijn Haverbeke представил Wordgard - современную модульную библиотеку rich text editor. У автора сильный опыт в этой области: он создал Eloquent JavaScript и ProseMirror, поэтому проект сразу привлекает внимание.

Wordgard поддерживает модульную архитектуру и совместное редактирование. Его можно попробовать в живом демо и начать с базового примера. Такие редакторы сложны не из-за кнопок жирного текста, а из-за выделений, undo, вставки, коллаборации и структуры документа.

visual-json дает несколько способов редактировать JSON

visual-json - визуальный JSON-редактор от Vercel Labs. Он поддерживает tree view, form view, diff view и raw editing mode, а еще умеет учитывать схему данных.

Это полезно для админок, конфигураторов и внутренних инструментов, где обычное текстовое поле для JSON быстро становится опасным. Исходный код visual-json открыт, поэтому его можно изучить или встроить в свой проект.

µJS добавляет SPA-навигацию без фреймворка

µJS - маленькая Ajax navigation library, которую можно подключить обычным script tag. Она перехватывает ссылки и отправку форм, чтобы добавить ощущение SPA без сборки и большого фреймворка.

Такой подход подходит для проектов, где сервер уже хорошо рендерит HTML, но хочется сделать переходы быстрее и мягче. Если нужно понять устройство, можно открыть исходный код µJS.

GTA2 Web перенес классическую игру в браузер

GTA2 Web - порт классической GTA 2, который запускается прямо в браузере и добавляет WebRTC peer-to-peer multiplayer. Это не типичный рабочий инструмент, но хороший пример того, насколько далеко ушли браузерные рантаймы, графика и сеть.

Такие проекты полезны как витрина возможностей платформы: если в браузере можно запускать сложную игру с мультиплеером, то многие прикладные интерактивные интерфейсы уже точно не упираются в “браузер не справится”.

Обновления

• Astryx - открытая дизайн-система Meta с большим набором React-компонентов, темами, dark mode и CLI-инструментами.
• Better Auth присоединяется к Vercel: об этом написали и в анонсе Better Auth, и в анонсе Vercel. Если библиотека незнакома, есть короткое введение от Flavio Copes.
• Bundle Size Comparison Across Frameworks сравнивает размеры бандлов популярных фреймворков на одинаковом демо-приложении; детали методики лежат в репозитории проекта.
• Dependency Cruiser 18.0 помогает проверять и визуализировать зависимости внутри проекта.
• npm 11.18.0 и pnpm 11.10 обновили пакетные менеджеры, хотя главное внимание недели уже забрал npm 12.
• ESLint Plugin Perfectionist 5.10 следит за сортировкой импортов, объектов, типов и других структур.
• TinyBase 9.0 вышел как релиз исправлений и стабильности для reactive data store и sync engine.
• wavesurfer.js 7.12.10 обновил библиотеку для интерактивного отображения аудиоволн.
• Commit History строит графики GitHub-коммитов по времени; можно использовать для profile README, о которых пишет документация GitHub, или посмотреть пример по профилю Sindre Sorhus.
• Ruby-сообщество подготовило гайд по запуску meetup. Хотя он написан для Ruby, советы по месту, формату, докладам и регулярности легко перенести на React или JavaScript-сообщества.