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

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

Safari 27 beta приносит много новых возможностей веб-платформы

Apple показала что нового появилось в WebKit и Safari 27 beta. Релиз большой: кастомизируемый <select>, новые CSS-свойства, поддержка sizes="auto" для изображений и десятки других улучшений. Для разработчика это важный сигнал: привычные элементы HTML постепенно становятся гибче, а часть интерфейсов, которые раньше требовали тяжелого JavaScript, можно будет собирать ближе к нативной платформе.

HTML-first подход помог удвоить число завершенных форм

История про HTML-first сайт, который удвоил число пользователей за ночь, хорошо показывает, почему базовые формы все еще важны. После двух дорогих неудачных переработок публичный сервис вернули к обычным HTML-формам, сохранению прогресса на сервере и JavaScript только там, где он реально помогает. Чем меньше интерфейс ломается из-за состояния на клиенте, тем проще пользователю дойти до конца.

Заголовки могут учитывать контекст секции

Manuel Matuzovic разбирает контекстно-зависимые заголовки в HTML и экспериментальный атрибут headingoffset. Идея в том, чтобы компонент мог подстраивать уровень заголовка под место, куда его вставили. Это полезно для дизайн-систем: карточка, секция или виджет не должны ломать структуру страницы только потому, что переехали в другую часть макета.

• Google улучшил Baseline Checker: теперь проще выбрать подходящую Baseline-цель для сайта без ручного экспорта данных из Analytics.
• В Safari 27 beta переписали ESM loader ближе к стандартам, что улучшает поддержку top-level await, а WebAssembly получил поддержку JSPI для более удобной работы с промисами между JS и WASM.
• CodePen разрешил превращать работы, созданные в новом редакторе 2.0, в живые опубликованные сайты. Для маленьких демо это сокращает путь от идеи до публичной страницы.

🎨 CSS и дизайн

CSS @function делает стили ближе к настоящим вычислениям

В статье про основы и developer experience CSS @function объясняется новая возможность объявлять функции прямо в CSS и возвращать значения, которые потом используются в свойствах. Сейчас поддержка @function ограничена Chromium-браузерами, а инструменты еще шероховатые, но направление понятное: часть повторяющейся логики можно будет держать в CSS, не вынося ее в препроцессор или JavaScript.

CSS gap decorations получают практические примеры

Brecht De Ruyte подробно показывает, как оформлять промежутки между grid и flex-элементами. Раньше линии между карточками часто делали через border, псевдоэлементы или дополнительные обертки. Новый подход позволяет стилизовать именно gap, поэтому сетка остается чище, а оформление не смешивается с содержимым элементов.

Переходы между страницами можно делать без JavaScript

Материал про CSS View Transitions между документами показывает, как обычный сайт может получить плавные переходы между страницами всего через CSS. Это не заменяет продуманную навигацию, но помогает сделать многостраничный сайт визуально ближе к приложению без клиентского роутера.

Grid Lanes получили большой интерактивный справочник

Команда WebKit запустила The Field Guide to CSS Grid Lanes и отдельно рассказала о запуске справочника. Это набор интерактивных примеров про линии и области в CSS Grid. Хороший ресурс, чтобы перестать воспринимать Grid как магическую таблицу и начать осознанно раскладывать сложные блоки.

• В статье про scrubbable staggered animation на CSS @function показывают, как формулой описать повторяемую задержку для анимаций, прокрутки или других входных значений.
• CSS Wordle превращает изучение CSS-возможностей в игру: нужно угадать фичу по подсказкам.
• FontSelf помогает настроить Google Fonts для self-hosting: выбрать шрифт, скачать пакет и получить готовый CSS.
• В номинациях Tiny Awards собирают маленькие, творческие и handmade-проекты из веба - хороший повод посмотреть на веб не только как на продуктовую платформу.

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

Порядок фокуса обычно не нужно размечать вручную

Eric Bailey объясняет, почему не стоит отдельно аннотировать focus order. Если HTML семантический, а визуальный порядок совпадает с порядком чтения, клавиатурная навигация чаще всего уже работает правильно. Когда приходится рисовать сложную схему фокуса, это может быть признаком, что структура страницы стала слишком запутанной.

Мифы о доступности лучше разбирать конкретными аргументами

Stéphanie Walter собрала 9 мифов о доступности и ответы на них. Такие возражения часто звучат одинаково: “это дорого”, “нашим пользователям не нужно”, “мы поправим потом”. Статья помогает отвечать не общими лозунгами, а практическими объяснениями про качество продукта, риски и реальные сценарии пользователей.

Гибридные мобильные приложения требуют осознанного выбора стека

В гайде по ландшафту hybrid mobile app development объясняется, чем отличаются подходы вроде WebView, Capacitor, React Native и PWA. Для фронтенд-разработчика важно понимать компромисс: где вы пишете почти обычный веб, где получаете доступ к нативным API, а где начинаете жить в отдельной мобильной архитектуре.

• Smashing Magazine рассказывает, как подготовить дизайн-систему к работе с AI: компонентам нужны ясные правила, токены, описания и ограничения, чтобы модели не собирали интерфейс наугад.
• Micromodal.js помогает делать доступные модальные окна по WAI-ARIA-практикам и добавляет удобства поверх нативного <dialog>: hooks, блокировку прокрутки, анимации и закрытие по фону.

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

Angular 22 стабилизирует формы, доступность и асинхронную реактивность

Google выпустил Angular v22. В стабильный или production-ready статус перешли Signal Forms, Angular Aria и асинхронная реактивность. Роутер также получил экспериментальную работу с браузерным Navigation API. Это релиз про то, как Angular подтягивает современные идеи реактивности, не отказываясь от своего полного фреймворк-подхода.

VoidZero присоединяется к Cloudflare

VoidZero присоединяется к Cloudflare - это важная новость для всего мира Vite, Vitest, Rolldown и Oxc. Проекты остаются MIT-лицензированными, а команда продолжит ими руководить. В отдельном посте команды Vite Cloudflare объявила фонд на 1 миллион долларов для мейнтейнеров и контрибьюторов Vite-экосистемы.

Rust-порт React Compiler готовят к тестированию

Rust-версия React Compiler уже готова к тестированию и близка к слиянию. Компилятор нужен, чтобы React мог лучше оптимизировать компоненты автоматически, а Rust-порт делает инструментальную часть быстрее и удобнее для больших проектов. Для разработчиков это не мгновенная магия в UI, но важный шаг к более зрелой сборке React-приложений.

React Foundation оформляет новую страницу экосистемы

React Foundation запустил новый сайт после того, как в феврале фонд принял управление React от Meta. Переезд виден и в GitHub: старый адрес facebook/react теперь ведет на react/react. Для разработчиков это не меняет API, но показывает, что React постепенно оформляется как более независимый open source-проект с отдельной организационной базой.

Большой список React-библиотек помогает выбрать стек на 2026 год

Robin Wieruch обновил свой обзор React-библиотек и инструментов на 2026 год. Внутри есть категории для старта нового приложения, UI, анимаций, форм, тестов, интернационализации и управления состоянием. Такой список полезен не как готовый рецепт для всех проектов, а как карта экосистемы: проще понять, какие задачи обычно закрывают отдельными библиотеками и где лучше не тянуть лишнюю зависимость.

• TanStack Table v9 Beta обновляет headless-движок таблиц для React, Preact, Solid, Vue, Angular, Svelte и Lit. Headless означает, что библиотека отвечает за состояние и поведение таблицы, а внешний вид вы строите сами.
• TanStack AI вышел в beta: это набор инструментов для AI-функций без привязки к конкретному фреймворку или провайдеру моделей.
• В React RFC предложили возвращать disposable из useEffect и useLayoutEffect вместо функции очистки. Идея пока обсуждается, но она показывает, как React ищет более явный способ описывать освобождение ресурсов.
• Aurora Scharff подробно показывает, как собрать активный NavLink в Next.js: ссылка сама понимает текущий маршрут и подсвечивается в навигации.
• Jenna Smith объясняет, почему лучшие loading states иногда вообще не показываются: если заранее подгрузить данные перед переходом, пользователь видит готовый экран вместо скелетона.
• Jay Freestone разбирает случай, когда родительскому React-компоненту нужно знать о своих детях. Это помогает аккуратнее передавать состояние вверх, не превращая дерево компонентов в набор случайных связей.

React Native обновляет платформу и инструменты

React Native 0.86.0 вышел вместе с React Native Windows v0.83. Это важно для команд, которые используют один React-подход не только в браузере, но и в мобильных или desktop-приложениях. Отдельно Nicholas Tarta показал, как убирал рекламу с React Native-страницы Kindle через разбор Hermes bytecode; история скорее исследовательская, но хорошо напоминает, что React Native уже встречается даже в интерфейсах устройств.

• react-native-network-logger 3.0 помогает смотреть HTTP-запросы прямо внутри React Native-приложения на iOS и Android.

• react-native-compressor 2.0 сжимает изображения, видео и аудио перед загрузкой, чтобы приложение меньше тратило трафик и быстрее отправляло файлы.

• React Native Testing Library 14.0 теперь требует React 19+ и React Native 0.78+, поэтому обновление лучше планировать вместе с версиями основного стека.

• react-redux-firebase 4.0 обновил Redux-биндинги для Firebase и добавил поддержку React 19.

• Taiga UI 5.10 обновляет большой набор компонентов для Angular, где уже больше 50 UI-элементов.

• Astro Photo Grid предлагает минимальную одностраничную фотогалерею с lightbox для Astro.

📦 JavaScript

Source maps помогают отлаживать продакшен, но требуют контроля

В статье Everything You Need to Know About Source Maps объясняется, как source maps связывают минифицированный код с исходниками. Это удобно, когда нужно понять ошибку из продакшена, но публикация source maps без правил доступа может раскрыть структуру проекта и куски исходного кода.

Geometric.js добавляет удобную геометрию в JavaScript

Geometric.js - библиотека для работы с полигонами, bounding boxes, отражениями, интерполяцией и вращением. В примерах видно, как это применять в графике и визуализациях, а для проверки пересечения фигур есть отдельная функция. Это полезно, когда в интерфейсе появляется карта, редактор, диаграмма или любая сцена с координатами.

NoLoJS собирает альтернативы JavaScript-паттернам на HTML и CSS

NoLoJS показывает, какие привычные JS-задачи можно решить HTML, CSS или совсем небольшим скриптом. Внутри есть примеры для аккордеонов, модальных окон, ленивой загрузки и других стандартных сценариев. Это не призыв отказаться от JavaScript, а напоминание сначала проверить, не умеет ли платформа это сама.

• RunJS 4 обновляет песочницу для быстрого запуска JavaScript-фрагментов.
• eslint-plugin-functional 10.0 добавляет правила линтера, которые запрещают мутации и подталкивают код к функциональному стилю.
• Draco.js - чистый JavaScript-загрузчик Draco mesh для three.js от mrdoob, с отдельным демо.
• tsParticles 4 обновляет движок частиц для конфетти, огня, снега и похожих эффектов; рядом есть ribbons и живые демо пресетов.

📘 TypeScript

TypeScript умеет выводить типовые переменные, но важно понимать границы

Nicolas Laurent разбирает, как TypeScript выводит type variables. Это полезно, когда generic-функция сама понимает типы из аргументов и не требует вручную писать <T>. Но вывод типов не телепатия: если данные слишком общие или связей между аргументами не хватает, типы нужно помогать уточнять.

• ts-loader 9.6 обновляет TypeScript-loader для webpack и возвращает поддержку webpack 4, что важно для проектов, которые еще не переехали на более свежую сборку.
• Kanel 4.0 генерирует TypeScript-типы из живой Postgres-базы, чтобы схемы данных меньше расходились с кодом приложения.
• babel-plugin-zod-hoist от автора Slonik выносит определения Zod-схем выше по файлу и помогает ускорять валидацию.

⚙️ Node.js

npm v12 перестанет запускать install scripts по умолчанию

GitHub рассказал, что npm v12 больше не будет автоматически выполнять install scripts вроде preinstall, install и postinstall, если проект явно не разрешил их через новый workflow. Подготовиться можно уже сейчас через npm 11.16.0: он предупреждает, какие пакеты будущая версия заблокировала бы. Это важное изменение для безопасности, потому что install scripts могут запускать произвольный код при установке зависимости.

Node.js меняет график релизов и нумерацию

Luciano Mammino подробно объясняет новый релизный цикл и версии Node.js. Начиная с Node 27 проект переходит к одному major-релизу в год и добавляет alpha-канал для тестирования. Для команд это означает более предсказуемое планирование обновлений: проще заранее понять, когда ждать breaking changes, а когда безопаснее оставаться на LTS.

Supply chain-проблемы в npm продолжают давить на экосистему

На фоне продолжающихся npm worms и supply chain атак вспоминают отчет об уязвимости еще из 2016 года, который предсказывал похожие проблемы. Параллельно Drizzle ORM столкнулся с тем, что команда не может публиковать новые версии в npm из-за лимита метаданных реестра: у пакета уже 1 397 опубликованных версий. Даже инфраструктурные лимиты внезапно становятся частью надежности зависимостей.

Node-RED 5.0 сильно обновляет редактор

Node-RED 5.0 получил самое большое обновление редактора за историю проекта: новые боковые панели, темную тему, паузу debug output и вызов Link nodes из Function nodes. Это low-code среда на Node.js, где логику собирают из блоков, поэтому улучшения редактора напрямую влияют на скорость работы.

• Новые версии Node.js v26.x, 24.x и 22.x готовятся закрыть уязвимости, самая серьезная из которых отмечена как HIGH.
• Исследование ESM provision by popular npm packages показывает, что 38% популярных пакетов уже публикуют ESM, а 16% стали ESM-only.
• Из-за бага npm tooling несколько односимвольных пакетов были ошибочно помечены как security holders, включая c, i, n и x; для реестра это редкий, но показательный сбой метаданных.
• Playwright fixtures API разобрали изнутри: статья показывает, как Playwright понимает нужные фикстуры по сигнатуре тестовой функции.
• pnpm 11.5 обновляет пакетный менеджер на фоне общей работы экосистемы над безопасностью установок.
• Bonsai предлагает безопасный язык выражений для пользовательских правил, фильтров и шаблонов без eval; для экспериментов есть playground.
• DepsGuard проверяет и ужесточает настройки npm, pnpm, Yarn и Bun: отключает install scripts, включает cooldowns и следит за provenance.
• Commander.js 15.0 стал ESM-only, а версия 14 будет поддерживаться до мая 2027 года для проектов, которым нужно время на миграцию.
• NodeAV 6.0 дает прямой доступ к C API FFmpeg для работы с кодеками, фильтрами и потоками.
• Juice 12.1 встраивает CSS прямо в HTML, что часто нужно при сборке email-шаблонов; библиотеку используют и в инструментах вроде MJML и node-email-templates.
• Cucumber.js 13.0 перестроил параллельный runtime тестов на worker threads.
• Envalid 8.2 обновляет библиотеку для проверки переменных окружения.
• Интерактивный проект Wander Around a Heap of Packages in node_modules превращает папку node_modules в 3D-пространство; за ним стоит Andrew Nesbitt из ecosyste.ms.

🧬 Рантаймы, сборка и WASM

Deno спорит с направлением развития

В статье I Wish Deno Would Keep Doing What It Does Best автор переживает, что Deno слишком много сил тратит на совместимость с Node.js и npm. Ранний Deno был интересен как zero-config runtime на веб-стандартах и в одном бинарнике. Чем сильнее он догоняет привычную Node-экосистему, тем сложнее сохранить эту ясную идентичность.

Bun показывает, как AI может менять open source-инфраструктуру

RedMonk разбирает, что Bun говорит нам об AI и open source. Вокруг Bun интересно не только то, что это быстрый runtime, но и то, что все больше кода в такой инфраструктуре пишется с помощью AI. Это поднимает вопросы о поддерживаемости, доверии и том, как оценивать качество кода, если его автором все чаще становится связка человека и модели.

• Electron 43 beta ускоряется за счет embedded Node.js snapshot, кеширования bundle как V8 bytecode и link-time optimization основного бинарника.
• Rolldown 1.1 обновляет быстрый bundler из экосистемы VoidZero.
• Emscripten 6.0 обновляет инструмент, который компилирует C/C++ и похожий код в WebAssembly для запуска в браузере и других JS-средах.
• Neutralinojs 6.8 улучшает легкий фреймворк для кроссплатформенных desktop-приложений: добавлены native drag and drop файлов и новая политика окон для target="_blank".

🤖 ИИ

Инженерные ценности меняются, когда код все чаще пишут агенты

Christoph Nakazawa в Modern Engineering Values рассуждает, какие навыки становятся важнее в эпоху coding agents. Автор Jest и Fate делает акцент на владении продуктом, вкусе, быстрых проверках и строгой обратной связи. Когда код генерируется быстрее, ценность смещается к умению понять, что именно стоит строить и как проверить результат.

VS Code Agent Hook реагирует на изменения файлов

Nicholas C. Zakas показывает, как создать VS Code Agent Hook для реакции на изменения файлов. Такой hook может запускать действия агента автоматически, когда проект меняется: например, обновлять контекст, проверять файлы или подсказывать следующий шаг. Это маленький пример того, как IDE постепенно становится средой для совместной работы человека и агента.

• Raymond Camden проверил, может ли встроенный AI в Chrome играть в Zork 1. Эксперимент игровой, но полезный: он показывает, как браузерные AI API справляются с состоянием, инструкциями и последовательными решениями.

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

Mitos ASCII Tool превращает изображения в ASCII и анимации

Mitos ASCII Tool от Oxide Computer Company конвертирует изображения в ASCII-иллюстрации и анимации. Внутри есть livecoding-среда на базе play.core, поэтому это не просто фильтр, а маленький творческий инструмент для визуальных экспериментов.

replacements.fyi помогает заменить лишние npm-зависимости

replacements.fyi подсказывает, чем заменить npm-пакет: более простым пакетом, коротким сниппетом или встроенным API платформы. Это полезно при чистке зависимостей: иногда библиотека все еще нужна, а иногда современный Node.js или браузер уже умеют то же самое без внешнего кода.

Obs.js адаптирует UX под возможности устройства

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

• visx 4.0 обновляет набор React-примитивов для визуализаций от Airbnb с полной поддержкой React 19; в галерее компонентов проще увидеть, какие графики можно собрать.
• PDFSlick 4.0 обновляет PDF-viewer на базе PDF.js для React, Solid, Svelte и обычного JavaScript; React bindings помогают встроить просмотрщик в приложение, а в демо видны аннотации и работа с большими документами.
• bezier-easing-editor 1.1 добавляет React-компонент для визуального редактирования кривых Безье, а живое демо помогает сразу почувствовать, как меняется easing.
• MUI 9.1.0 добавил поддержку prefers-reduced-motion, чтобы компоненты Material UI лучше уважали системную настройку уменьшения анимаций.
• performative-ui собирает шуточные React-компоненты для типичных AI-лендингов, включая ASCII hero art и node graph backgrounds.
• .MD This Page - расширение браузера, которое превращает страницу в чистый Markdown и убирает лишний интерфейс, рекламу и шумную верстку.