javascript

Frontend Status: свежий дайджест фронтенда и AI — 09.04.2026

  • пятница, 10 апреля 2026 г. в 00:00:03
https://habr.com/ru/articles/1021402/
Frontend Status: Привет! Свежий дайджест фронтенда и AI
Frontend Status: Привет! Свежий дайджест фронтенда и AI

Привет!

Это 12-й выпуск Frontend Status - дайджеста по фронтенд-разработке.

В этом выпуске:

  • 📺 Крупные релизы и видео: Babylon.js 9.0 и доклад Таннера Линсли про TanStack Start.

  • 🤖 AI в проде без розовых очков: как агенты «видят» веб, что не так с персонами в промптах и почему Cloudflare меняет подход к кэшу.

  • 🛡️ Supply chain снова в фокусе: пауза bug bounty в Node.js, кейс с axios и практичные меры защиты зависимостей.

  • 🎨 CSS-практика без магии: containment, sticky по осям, subgrid, dino game и «жидкие» анимации от Темани Афифа.

  • ⚡ JavaScript/TypeScript: главное по JS 2026, новый JSIR от Google и утилиты для View Transitions.

  • 🅰️ Angular-экосистема для AI-эпохи и не только: ngxtension, LLMs.txt в NG-ZORRO и MCP-страница в PrimeNG.

  • 🌎 Веб-стандарты и браузеры: W3C про AI и голосовых агентов, JetStream 3 и MCP-коннектор в Opera Neon.

  • 🖌️ UI/UX и доступность: WebAIM Million 2026, дизайн для людей с тревожностью и разборы про принципы дизайна.

  • …и многое другое.

📺 Медиа

  • Анонс Babylon.js 9.0: самый крупный релиз движка за год - кластерное освещение (масштабирование до сотен/тысяч источников света), редактор частиц, объёмное освещение, готовый к продакшену граф рендер-проходов, перенос анимаций между разными ригами и расширенная поддержка гауссовых сплатов. Много примеров и демо по каждому блоку.

  • TanStack Start: client-first фреймворк для веба: 30-минутный доклад Таннера Линсли о позиционировании TanStack Start как полноценного SSR-решения для разработчиков на React и Solid, с акцентом на ценность client-first подхода.

🤖 AI

🛡️ Безопасность

  • Node.js приостановил программу bug bounty: Internet Bug Bounty, который финансировал награды за найденные уязвимости, прекратил работу. Волонтёрский проект не может платить из собственных средств. Репорты по-прежнему принимают на HackerOne, но денег за них больше нет.

  • GitHub рассказывает, как защищает open-source supply chain: обзор мер безопасности цепочки поставок, от Dependabot до code scanning.

  • Пакет Axios NPM скомпрометирован из-за атаки на цепочку поставок: был получен доступ от аккаунта мейнтейнера, затем было опубликовано 2 вредоносных версии. Как такое могло произойти и как не скачать себе скомпрометированный пакет.

  • Утечка Claude Code: по официальной версии компания Anthropic случайно выложила в открытый доступ исходный код Claude Code. Утекло примерно 500 000+ строк кода и тысячи файлов, и неудивительно, что репозиторий стал одним из самых скачиваемых на GitHub за короткое время.

  • Минимальный срок релиза как недооцененный фактор защиты цепочки поставок: в современных менеджерах пакетов есть настройка, позволяющая устанавливать только те версии библиотек, с момента релиза которых прошло определенное время, например, 7 дней. Разработчик Дани Акаш из Индии проанализировал более 20 атак последних лет, и выяснил, в каких случаях этой меры было бы достаточно для полной защиты.

🎨 CSS

  • Гарри Робертс написал большой разбор CSS Containment: зачем нужно свойство contain, чем отличаются layout, paint, size и style, как content-visibility позволяет браузеру вообще не рендерить скрытые элементы, и реальный кейс с OpenTable, где containment дал ощутимый буст INP. Статья, которую стоило написать несколько лет назад.

  • Темани Афиф собрал Chrome Dino Game на чистом CSS - с управлением с клавиатуры. Scroll-Driven Animations, @property, container queries. Работает только в Chrome, потому что динозавр отказался бегать в других браузерах.

  • Эффект «растекающейся жидкости» через shape(): Темани Афиф показывает, как с помощью clip-path: shape() и двух ключевых кадров сделать reveal-анимацию, при которой «жидкость» стекает со страницы. Код генерируется через его wavy divider generator.

  • position: sticky теперь работает поосно: Брамус объясняет, как Chrome 148 решил задачу, которую с 2017 года считали невозможной: если таблица в контейнере с горизонтальным скроллом, то её заголовок может прилипать к вьюпорту по вертикали, а первая колонка - к обёртке по горизонтали без JS.

  • Дэвид Бушелл: CSS Subgrid - это очень хорошо. Практический разбор, почему subgrid решает задачи выравнивания вложенных элементов, которые раньше требовали хаков.

  • Дэвид Бушелл: 10 предательств Figma - подборка ситуаций, в которых Figma подводит разработчиков.

  • Чёрт, опять этот CSS: коллекция кейсов, когда CSS бесит даже опытных разработчиков. Стас Мельников разбирает неочевидные сюрпризы каскада.

⚡ JS / TS

  • Крис Койер: что нужно знать о JavaScript в 2026. Подробный разбор ECMAScript 2025 (Iterator Helpers с ленивыми вычислениями, Set-методы вроде intersection и difference, RegExp.escape(), Promise.try(), Import Attributes для JSON и CSS), плюс обзор того, что движется к стандарту: Temporal, Signals, Pattern Matching, using для ресурсов.

  • Robin Wieruch про Resource Names в TypeScript-монорепозиториях: когда 10 сервисов в монорепе строят пути к ресурсам каждый по-своему (template literals, конкатенация, хардкод), любой рефакторинг ломает половину кодовой базы. Решение - конвенция ресурсных имён из Google API Design Guide: collection/id с типизированными encode/decode функциями вместо строковой интерполяции.

  • Pretext: измерение текста до того, как DOM вообще существует. Библиотека решает то, чего CSS сделать не может - предрассчитать размеры текстовых блоков вне рендер-дерева.

  • Брамус выпустил view-transitions-toolkit - npm-пакет с утилитами для View Transitions: feature detection, шим для document.activeViewTransition, оптимизация анимаций группы, пауза/перемотка переходов и автоматические типы навигации. То, что раньше приходилось переизобретать в каждом проекте.

  • [RFC] JSIR: high-level IR для JavaScript на базе MLIR: Google представил открытый промежуточный формат, который сохраняет почти 1:1 соответствие с AST, но добавляет регионную модель control flow и dataflow-анализ. Ключевая идея - обратимый цикл Source ↔ AST ↔ JSIR для source-to-source трансформаций (деобфускация, декомпиляция).

👁️ Vue

🅰️ Angular

  • ngxtension: большая коллекция утилит для современного Angular: 50+ type-safe и tree-shakable утилит под signals, standalone-компоненты и новый control flow - от signal/router/injector helpers до RxJS-операторов, директив и эффектов. Хороший «швейцарский нож» для снижения бойлерплейта в Angular-проектах.

  • NG-ZORRO добавил LLMs.txt для AI-инструментов: документация библиотеки теперь доступна в формате llms.txt/llms-full.txt/llms-full-cn.txt, плюс есть .md-страницы отдельных компонентов. Идея простая: подключить эти файлы в Cursor/Copilot/Claude Code и дать агентам стабильный контекст по API и примерам NG-ZORRO.

  • PrimeNG запустил страницу про MCP: ещё один сигнал, что UI-библиотеки для Angular адаптируются под AI-ассистентов и агентные сценарии разработки, где модели получают структурированный контекст по компонентам и документации.

𝐒 Svelte

  • What’s new in Svelte: апрель 2026. MCP-интеграция в OpenCode стала проще, svelte.config.js теперь поддерживает функции для css, runes, customElement, error boundaries заработали на сервере в SvelteKit 2.54, а матчеры в параметрах страниц наконец-то сужают типы.

🦮 A11y

  • WebAIM Million 2026: восьмой ежегодный аудит миллиона популярных сайтов. Среднее число ошибок доступности выросло до 56 на страницу (+10% за год). Сложность страниц удвоилась за 7 лет (1437 элементов в среднем), а пользователь с инвалидностью натыкается на ошибку каждые 26 элементов.

  • Как проектировать для людей с тревожностью: Демельза Фелтхэм из TetraLogical разбирает, как таймеры, scarcity cues («осталось 3 штуки!») и автоматическое воспроизведение видео усиливают тревогу, и предлагает конкретные решения - от щедрых таймаутов до возможности скрыть обратный отсчёт.

📦 Разное

🌐 Веб-стандарты

🌎 Браузеры

  • WebKit представил JetStream 3 - обновлённый кросс-браузерный бенчмарк. Совместная работа Apple, Google и Mozilla. Главное изменение - переработка тестирования WebAssembly: старый подход с разделением на Startup/Runtime давал бесконечные баллы, потому что браузеры стали слишком быстры. JetStream 3 сливает фазы, добавляет реалистичные Wasm-нагрузки и растёт вместе со сложностью современного веба.

  • Opera Neon добавила MCP Connector: теперь внешние AI-клиенты (Claude Code, Lovable и т.д.) могут подключаться к живой сессии браузера по протоколу MCP, видеть контекст страницы и выполнять действия. Чтобы использовать таким образом Chrome нужно устанавливать внешние сервера, например, mcp-chrome.

🎨 UI|UX и дизайн

  • Google Stitch и смерть джуниор-дизайнера: Луиза Норт разбирает, как платформа Google с «Vibe Design» генерирует за 30 секунд дашборды чище тех, что команды пилили месяцами в Figma. Но возникает проблема: AI делает «правильно», а не «для человека», и интернет рискует превратиться в один бежевый корпоративный…

  • Ваша следующая ОС - не Windows и не macOS, а OpenClaw: как запустить команду AI-агентов, которые сами собирают тренды в сфере дизайна.

  • Виталий Фридман: практический гайд по дизайн-принципам. Когда любой пассажирский дизайн можно сгенерировать за минуту, ценность смещается к пониманию того, что стоит строить. Фридман собрал примеры принципов от Dieter Rams до Anthropic, Linear и Gov.uk, и объясняет, как организовать воркшоп для выработки своих.

Статья подготовлена при поддержке @CosyFrontend, @alexbraun и @DreamShaded.