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

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

Chrome 151 улучшает работу с камерой и микрофоном

В Chrome 151 появился элемент управления, который пользователь сам активирует, чтобы разрешить доступ к потоку с камеры или микрофона. Такой подход делает чувствительные разрешения заметнее и понятнее: сайт не должен неожиданно начинать захват медиа.

Команда Chrome также показала, как применяет ИИ для усиления защиты браузера. Это не новая веб-возможность, но хороший контекст: безопасность браузера зависит не только от кода сайта, но и от того, как сам браузер находит угрозы.

У изображения есть скрытое переполнение

Temani Afif разбирает, почему у элемента img по умолчанию действует overflow: clip. Обычно это незаметно, но становится важно, когда у изображения есть тень, фильтр, скругление или элемент выходит за его границы.

Статья помогает понять, почему попытка показать «обрезанную» часть картинки иногда не работает. Вместо случайных свойств можно осознанно выбрать, где снимать ограничение, и проверить, не появятся ли нежелательные полосы прокрутки.

• В статье «Кнопка или ссылка» объясняют базовое правило семантики: ссылкой переходят к другому ресурсу, а кнопкой совершают действие на текущей странице. Это влияет на ожидания пользователя, клавиатурную навигацию и доступность.
• Интерактивный проект Mow предлагает оптимально подстричь виртуальный газон и заодно показывает, как данные, анимация и правила могут превратить статью в запоминающийся интерфейс.

🎨 CSS и дизайн

State of CSS 2026: якорное позиционирование в фокусе

Опубликованы результаты State of CSS 2026. Среди новых возможностей разработчики особенно выделили anchor positioning — способ привязывать всплывающий элемент к другому элементу интерфейса. При этом его внедрение пока сдерживает поддержка браузеров. Разобраться в механике поможет подробный гид по anchor positioning.

В опросе также высоко оказались :has(), aspect-ratio и вложенность CSS. Это полезная карта зрелости возможностей: когда язык уже позволяет убрать JavaScript или дополнительную разметку, но всё ещё нужно сверять поддержку в целевых браузерах.

В CSS предлагают учитывать маршрут навигации

Bramus Van Damme рассказывает о предложении декларативно стилизовать переходы между маршрутами. Новые at-правила и псевдоклассы могли бы позволить View Transitions учитывать, откуда пришёл пользователь и куда он переходит, без обработчика на JavaScript.

Пока это лишь проект спецификации. Но он хорошо показывает направление развития CSS: описывать поведение интерфейса через состояние и контекст, а не собирать каждый визуальный эффект вручную.

Gap между элементами теперь можно оформить отдельно

Chrome и Edge 149 первыми реализовали CSS gap decorations. Новое свойство rule позволяет рисовать линии и другие украшения именно в промежутках grid- и flex-раскладки — без псевдоэлементов, лишних обёрток и расчётов.

Это особенно удобно для списков, таблицоподобных интерфейсов и навигации. Сам раскладочный контейнер остаётся семантически простым, а оформление интервалов перестаёт быть отдельным хаком.

• Единица lh равна вычисленной высоте строки текущего элемента. С ней легче задавать отступы, высоту и размеры так, чтобы они сохраняли ритм текста при смене шрифта или масштаба.
• Обновлённая статья о пяти правилах порядка в Tailwind CSS предлагает договориться о слоях, токенах и повторяемых компонентах, прежде чем длинные строки классов начнут мешать поддержке проекта.
• В материале о центре страницы при наличии боковых панелей разбирают, почему математический центр окна и центр доступной области могут не совпадать. Это заметно в приложениях с выезжающими sidebar и панелями инструментов.
• Шпаргалки Polypane собрали в одном месте Flexbox, Grid, anchor positioning и Invoker Commands.
• CSS Type Studio позволяет в браузере поэкспериментировать с переносами, кернингом и возможностями OpenType, а генератор neumorphism помогает подобрать мягкие тени для объёмного интерфейса.

📦 JavaScript

«Худшая» реализация htmx объясняет, что делает библиотека

Serge Zaitsev продолжил учебную серию и собрал минимальную «худшую» версию htmx. До этого он подобным образом разбирал React и Vue. Такой подход отбрасывает почти все удобства библиотек, чтобы показать их главную идею на небольшом коде.

В случае htmx становится понятнее, как HTML-атрибуты описывают запросы и замену фрагментов страницы. Это не замена настоящей библиотеки для production, а полезный способ увидеть, что именно она берёт на себя.

Один JSON-обмен может незаметно изменить данные

В статье «Ваш JSON вам врёт» напоминают, что связка JSON.parse и JSON.stringify не сохраняет данные без потерь. Большие числа, undefined, Date, RegExp, Map и циклические ссылки либо меняются, либо вовсе не переживают преобразование.

Это важно на границе между сервером, браузером, localStorage и API. Если тип данных важен, его стоит сериализовать явно или использовать библиотеку, которая понимает нужные структуры.

Длительный тест помогает поймать утечку памяти в SPA

Den Odell показывает, как провести soak-тест SPA через Playwright. Тест много раз проходит один пользовательский сценарий в том же контексте браузера, следит за числом DOM-узлов и обработчиков, а затем может уронить CI при росте показателей.

Обычный тест доказывает, что экран работает один раз. Soak-тест отвечает на другой вопрос: не остаётся ли после каждого перехода чуть-чуть ненужной памяти, которая через час работы превратится в проблему.

• Cloudflare рассказала о переезде cdnjs на Workers и R2. Теперь популярный CDN библиотек обрабатывает около 9 млрд запросов в день без традиционных серверов.
• MicroDiff 1.6 быстро находит различия между объектами и массивами, а в новой версии понимает типы Temporal. Автор отдельно объяснял, откуда берётся скорость MicroDiff.
• Javy 9.1 — набор инструментов для компиляции JavaScript в WebAssembly, а DukPy 0.6 теперь использует QuickJS-NG и поддерживает современный JavaScript с Promise.
• Neutralinojs 6.9 — лёгкая альтернатива Electron; новая версия добавила C++ API для HTTP-запросов, не ограниченный CORS WebView.
• Devalue 5.9 сериализует циклические ссылки, Map, Set и регулярные выражения, с которыми не справляется JSON.stringify; результат можно проверить в песочнице Svelte.
• undent убирает лишние отступы из шаблонных строк, Brownies объединяет cookies, localStorage, sessionStorage и IndexedDB под единым API, а buffered-clone сохраняет поддерживаемые JavaScript-типы в компактном бинарном виде.

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

Next.js 16.3 ускоряет сборку, SSR и навигацию

Вышел Next.js 16.3. Релиз ускоряет сборки и серверный рендеринг, добавляет опциональную проверку типов через TypeScript 7 и продолжает развивать инструменты для ИИ. Важное изменение — Instant Navigations: фреймворк старается подготовить следующий маршрут заранее, чтобы переход ощущался мгновенным.

Команда Vercel отдельно описала, как платформа поддерживает возможности Next.js 16.3. Обновляться стоит после проверки в своём приложении: скорость зависит от того, насколько проект использует SSR, кэширование и маршрутизацию.

TanStack Table v9 стала модульнее

TanStack Table v9 вышла спустя четыре года после v8. Библиотека стала tree-shakable: приложение подключает только нужные функции таблицы, поэтому таблица с одной пагинацией не тянет фильтрацию и группировку.

Состояние переезжает в TanStack Store с более точечной реактивностью. Авторы также показывают выигрыш по памяти на больших наборах данных, что особенно важно для админок и аналитических интерфейсов.

В экосистеме React вышли новые версии библиотек

React Router v8 уже доступен, а команда начала обсуждать React Router v9. shadcn/ui добавил компонент Questionnaire для пошаговых опросов в вариантах Base UI, React Aria и Radix UI.

Вышли SWR 2.5 с предзагрузкой RSC-кэша и методом unload(), React Aria 1.20 с компонентами PreviewTrigger и TokenField, react-dropzone 20 для drag-and-drop файлов, Base UI 1.7, Astryx 0.3, Material UI 9.3, react-hcaptcha 2.1 и React Three Fiber 9.7. Base UI теперь стал вариантом по умолчанию для shadcn/ui, а Astryx остаётся открытой дизайн-системой Meta на React и StyleX с документацией.

• TanStack обновил бренд и представил библиотеки TanStack Markdown и Highlight для отображения Markdown и подсветки кода.
• MobX 7 убрал устаревшие части API, обновил React-привязки и теперь всегда использует Proxy для observable-объектов и массивов.
• В июльском обзоре Astro и августовском обзоре Svelte собраны последние изменения экосистем. Для SvelteKit уже доступны первые preview-версии 3-й версии, а Astro 7.2 экспериментально умеет не пересобирать неизменившиеся статические страницы.
• Remix 3 можно изучить через перенос демо с Solid 2 на server-first модель. Для альтернативного RSC-стека появился rshono: он соединяет Hono, Rspack и React Server Components и ориентируется на простоту по сравнению с Waku.
• Plate помогает собрать React-редактор из нужных блоков; есть подробная документация и исходный код. Morphicons анимирует переход между контурными иконками из Lucide, Tabler, Heroicons и других наборов сменой одного свойства.
• Virtua даёт виртуализированные списки и сетки для React, Vue, Solid, Svelte и Angular. В демо и таблице сравнения можно оценить её подход.
• Vite 8.2, Lerna 10 и Hono 4.13 обновили инструменты вокруг фронтенд-проектов; Hono также получил поддержку HTTP-метода QUERY.

📱 React Native и мобильная разработка

• react-native-docusign открывает нативный интерфейс подписания DocuSign внутри приложения, mobile-ink даёт движок рисования для Apple Pencil, а expo-paperkit переносит возможности Apple PaperKit в Expo.
• react-native-enriched-html предлагает нативный rich-text с HTML-парсингом, React Native NSFW Detector проверяет изображения на устройстве через CoreML, а Legend Motion описывает анимации декларативно.

📘 TypeScript

Эксперимент с defer показывает, зачем нужен using

Andrew Healey попробовал добавить в компилятор TypeScript конструкцию Go defer. defer откладывает вызов функции до выхода из текущей функции. Эксперимент показывает, что форкнуть компилятор и добавить синтаксис технически возможно, но в реальном проекте проще опереться на уже существующий using для освобождения ресурсов.

Это хороший пример разницы между интересной идеей языка и решением, которое удобно поддерживать. Иногда нужный сценарий уже закрыт стандартным механизмом — просто под другим названием.

• better-result 3.0 даёт лёгкий тип Result для TypeScript и композицию на генераторах.
• Comark расширяет Markdown синтаксисом компонентов, хранит его в компактной сериализуемой форме и умеет рендерить в Vue, React, Svelte, Angular, HTML или ANSI.
• pg-typesafe генерирует TypeScript-типы для PostgreSQL-запросов без runtime-зависимостей, а Tinqer превращает типобезопасные стрелочные функции в SQL для PostgreSQL или SQLite.

⚙️ Node.js

В npm продолжается волна supply-chain атак

В начале недели стало известно о компрометации Keyv, Cacheable и сотен связанных пакетов. Socket, JFrog и Aikido описали распространение червя, который похищал учётные данные; список известных затронутых пакетов ведётся в репозитории Wiz.

Это не повод бездумно менять пакетный менеджер, но хороший повод проверить lockfile, переустановить зависимости из доверенного источника, отозвать потенциально скомпрометированные токены и включить ограничения на install scripts. В практическом материале о безопасном выпуске npm-пакетов разбираются trusted и staged publishing. GitHub рассказал о защите от атак на npm и Actions и начал сканировать все пакеты на вредоносный код при публикации.

Node.js 26.7 добавляет покрытие неизменённых файлов

Node.js 26.7.0 вышел через два дня после 26.6.0. Новый флаг –test-coverage-include-all позволяет включать в отчёт покрытия файлы, которых тесты вовсе не коснулись. Также исправлены падения в FFI и SQLite, а в кастомных сборках доступна трассировка Perfetto.

Одновременно Node 24.19.0 LTS получил экспериментальный import текста, возможность передать собственный буфер в fs.readFile() и дополнительные параметры TCP keep-alive. Это обновления рантайма, поэтому их стоит сначала прогнать через CI и тесты приложения.

vlt 1.0 ищет зависимости CSS-селекторами

Вышел vlt 1.0 — совместимая с npm альтернатива с командой vlt query. Она использует более 60 селекторов, похожих на CSS, чтобы искать пакеты и связи в дереве зависимостей; около половины селекторов связаны с безопасностью. Автор ранее объяснял, какая большая проблема долго жила в npm-экосистеме.

Для повседневных проектов это прежде всего инструмент изучения зависимостей. Он не заменяет аудит, но помогает точнее спросить: какой пакет зависит от уязвимой версии и почему она вообще оказалась в сборке.

• Express выпустил security-релизы body-parser против DoS-уязвимости. В Node ускоряют net.BlockList и добавляют ему новые методы, а также обсуждают перенос Web Worker API из HTML-стандарта в рантайм.
• В будущих версиях node:zlib появится поддержка ZIP-архивов. Mongoose 9.9 посвящён заметным оптимизациям, а статья о зависших процессах Node.js показывает, как находить код, блокирующий event loop.
• ioredis 6.0 добавил RESP3 и возможности Redis 8.10, node-x11 3.8 получил клиент X Window System без зависимостей и браузерную песочницу.
• pnpm 11.20 усилил безопасность и добавил короткий префикс npmjs:, а pnpm 12 RC уже можно тестировать. Ещё вышли graphql-upload 18 для multipart-запросов GraphQL и cron-parser 5.7 для работы с cron-выражениями.
• Microsoft показала preview динамической проекции WinRT API для Node.js. Она даёт Node и Electron доступ к нативным Windows API без C++-аддонов.
• Спор Deno и Oracle о товарном знаке JavaScript продолжается: Deno согласилась на пятое продление срока.

🤖 ИИ

React-хук упрощает использование WebMCP

use-webmcp-tool — React-хук над предложенным стандартом WebMCP. Его идея в том, чтобы сайт мог явно описать JavaScript-функции, которыми разрешено пользоваться AI-агенту: например, выполнить поиск, открыть форму или добавить товар.

Сам WebMCP пока не стал стандартом. Хук интересен тем, что переводит императивный API в привычную для React декларативную модель: возможности агента описываются рядом с компонентом, а не прячутся в отдельной интеграции.

• Flue 2.0 — TypeScript-фреймворк для открытых AI-агентов от автора Astro. В новой версии появились Agent Hooks: аналог React-хуков для состояния и динамического поведения агента.
• Журнал TIME, как показало исследование Vincent Schmalbach, отдаёт поисковому боту ChatGPT Markdown-версию страниц, блокируя ботов для обучения. Это пример того, как сайты начинают по-разному обслуживать разных автоматических посетителей.
• В ЕС вступили в силу требования маркировать часть контента, созданного ИИ. Требования зависят от ситуации и юрисдикции, поэтому для конкретного продукта стоит сверяться с первоисточником и юристами.
• Sean Goedecke объясняет, почему LLM вознаграждают предметную экспертизу: качество результата во многом определяют не «волшебные» формулировки, а умение проверить ответ модели и поставить правильную задачу.
• DryRun PostgreSQL MCP даёт агентам, IDE и CI представление о схеме PostgreSQL без подключения к production. TOON предлагает компактный читаемый формат объектов для LLM-промптов и TypeScript SDK.

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

TanStack Charts предлагает язык для описания графиков

TanStack Charts — экспериментальный framework-agnostic способ декларативно описывать графики и рендерить их в SVG или Canvas. У проекта есть сравнение с другими решениями, которое помогает выбрать библиотеку под задачу.

Такой подход отделяет данные и правила отображения от конкретного фреймворка. Пока проект находится на ранней стадии, но он интересен для приложений, где графики должны быть гибкими и хорошо стилизоваться.

Anydoc переводит документы в Markdown

anydoc — библиотека на Rust с Node.js- и WASM-привязками, которая конвертирует Word, презентации, таблицы, PDF, EPUB, CSV и другие форматы в Markdown. Исходный код доступен на GitHub.

Для более узких задач авторы предлагают pdf-inspector с информацией о позициях текста и Liteparse с OCR для отсканированных PDF. Эти инструменты полезны при импорте контента, поиске по документам и подготовке данных для агентов.

Интерактивные компоненты, редакторы и данные

• Perspective 5 — WASM-компонент для аналитики и визуализации больших либо потоковых наборов данных. Версии 5.0 и 5.1 принесли исправления, wasm64-сборки и оконные столбцы.
• Blossom Carousel строит карусель поверх нативного скролла и подгружает drag-движок только для мыши или трекпада; примеры позволяют проверить поведение. Extend UI предлагает открытые компоненты для document apps, включая просмотрщики PDF, DOCX и презентаций; есть и исходный код.
• ffmpeg webCLI запускает операции ffmpeg.wasm прямо в браузере: обрезку, конвертацию и сжатие видео можно попробовать в онлайн-версии без загрузки файла на сервер.
• isomorphic-git 1.40 реализует Git на JavaScript для Node и браузера, @pierre/trees рисует гибко настраиваемые деревья файлов, а µJS добавляет Ajax-навигацию в одну строку без сборщика и фреймворка.
• PolicyStack хранит правила приватности и согласий как код, visual-json даёт встраиваемый редактор JSON с древовидным, форменным и diff-представлениями, а SQL Studio — нативный кроссплатформенный клиент для SQL.
• Shaper создаёт SQL-first дашборды на DuckDB. They Live Adblocker заменяет рекламу на браузерные лозунги из фильма «Чужие среди нас».
• GitHub запустил public preview stacked pull requests: цепочку маленьких зависимых PR теперь можно вести прямо на платформе.