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

Привет!

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

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

• 📺 Разговор с Машей Кондрашиной из Авито о том, что в IT больше не спорят из-за технологий.

• 🤖 VS Code переходит на еженедельные релизы благодаря AI-агентам, Chrome объясняет разницу между MCP и WebMCP, а Эдди Османи вводит термин «comprehension debt».

• ⚛️ React получает shadcn/cli v4 с режимом для агентов, SvelteKit ловит FOWL, Astro v6 подтягивает данные из API прямо в content collections.

• 🌎 Chrome 146, Mozilla за анонимность в вебе.

• 🎨 Брэд Фрост о дизайне в эпоху AI.

• 📦 Эмпирическое исследование утечек памяти ^[1] на 500 репозиториях.

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

📺 Медиа

• Маша Кондрашина, фронтендер и тимлид в Авито ^[2]: В IT больше не спорят из-за технологий.

🤖 AI

• Как команда VS Code перешла на еженедельные релизы с помощью AI-агентов ^[3]: десять лет — ежемесячный цикл, потом взяли и сделали еженедельный. Пирс Богган и менеджер Пэн Лю рассказывают, за счёт чего это стало возможным: агенты запускаются параллельно во время митингов, тикеты триажируются автоматически через GitHub Actions, PM пишет не спеки, а сразу PR с прототипом. Отдельно про качество: Playwright MCP делает скриншоты и сам правит, если что-то сломалось, а код-ревью от Copilot стало обязательным перед тем, как звать живого человека. Статья не про то, что AI крут, а про конкретную инфраструктуру, которую команда построила под скорость.

• Chrome объясняет, чем WebMCP отличается от MCP и зачем нужны оба ^[4]: MCP — это бэкенд, работает везде и всегда, отвечает за данные и бизнес-логику. WebMCP — это фронтенд, существует только пока открыта вкладка, даёт агенту доступ к живому DOM, куки и сессии. Без WebMCP агент гадает, какую кнопку нажать; с WebMCP разработчик явно объявляет, как с сайтом взаимодействовать. Статья снимает путаницу и объясняет, что выбирать не нужно – в хорошем агентном приложении работают оба.’

• GitHub Copilot SDK открывает агентный движок Copilot для встраивания в собственные приложения ^[5]: тот же цикл планирования и выполнения, что работает в Copilot CLI, теперь можно запускать программно из своего кода. Три паттерна: делегировать агенту многошаговые задачи вместо хрупких скриптов, подключать реальные инструменты через MCP вместо набивания контекста в промпты, и встраивать выполнение не в IDE, а прямо в десктопные приложения, сервисы и event-driven системы. Суть сдвига простая: AI перестаёт быть текстовым ответом на вопрос и становится слоем исполнения внутри архитектуры продукта.

• GitAgent — открытый стандарт для описания AI-агентов прямо в git-репозитории ^[6]: идея простая до неприличия — репозиторий и есть агент. Три ключевых файла: agent.yaml с конфигурацией, SOUL.md с личностью и инструкциями, RULES.md с ограничениями. Далее папки skills/, tools/, knowledge/ — и агент готов к экспорту в Claude Code, OpenAI Agents SDK, CrewAI, LangChain или любой другой фреймворк через адаптеры.

• axe — CLI для запуска узкоспециализированных AI-агентов в духе Unix ^[7]: агент описывается в TOML-файле, получает системный промпт, скилл в формате SKILL.md, список инструментов и память. Дальше — git diff | axe run pr-reviewer, и готово. Поддерживает Anthropic, OpenAI и Ollama, умеет в суб-агентов, персистентную память с GC и песочницу для файловых операций. Если вы знакомы с OpenClaw – концепция скиллов та же, но назначение другое: OpenClaw живёт внутри сессии Claude и обучает его делать конкретные вещи лучше, например создавать docx, pptx, xlsx — там инструкции читаются в момент работы и уточняют поведение ^[8] модели. axe — это про автоматизацию вне IDE: cron, git hooks, CI и так далее.

• Your AI Slop Bores Me — платформа, где промпты выполняют люди, а не модели ^[9]: пишешь промпт — живой человек отвечает на него текстом или рисунком. Хочешь кредитов — сам отвечай на чужие промпты. Сайт просит быть добрее, потому что это не Grok. Автор против вибекодинга!

• Эдди Османи вводит термин «comprehension debt» — долг пон��мания, который накапливается при активном использовании AI для генерации кода ^[10]: это разрыв между тем, сколько кода существует в системе, и тем, сколько из него кто-либо реально понимает. В отличие от технического долга, comprehension debt не ощущается — код выглядит чистым, тесты зелёные, метрики хорошие. Исследование Anthropic показало, что разработчики, которые делегировали генерацию AI, набрали на 17% меньше на тесте понимания, чем те, кто использовал AI для вопросов и концептуального изучения. Главная инверсия: раньше синьоры успевали ревьювить быстрее, чем джуны писали. AI сломал это — джун генерирует быстрее, чем синьор может критически проверить. Тесты помогают, но не закрывают проблему: нельзя написать тест на поведение ^[11], о котором ты не подумал. Суть в том, что когда AI обновляет сотни тестов под новое поведение — вопрос уже не «код правильный?», а «все ли эти изменения тестов нужны?». Понимание остаётся работой человека.

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

• Mozilla формулирует позицию по анонимности в вебе ^[12]: веб устроен так, что можно ходить по сайтам без логина — как по улице без паспорта. Мартин Томсон называет это «casual anonymity» и объясняет, почему этой норме угрожают сразу три силы: боты и AI-трафик выдавливают сайты к инвазивному фингерпринтингу, законы об ограничении возраста требуют удостоверения личности, цифровые госдокументы делают идентификацию технически тривиальной. Mozilla видит выход в криптографии: zero-knowledge proof позволяет доказать, что ты человек, не раскрывая, кто именно. Конкретные решения обещают показать в ближайшие месяцы.

💫 Анимации и 3D

• data-anim — анимации через HTML-атрибуты, без единой строки JS ^[13]: добавляешь data-anim="fadeInUp" на элемент, подключаешь скрипт — готово. 30+ встроенных анимаций, весит меньше трёх килобайт, учитывает prefers-reduced-motion, со встроенной защитой от FOUC (“вспышка” нестилизованного контента). Есть TypeScript-поддержка для React и Vue с автодополнением атрибутов.

🎨 CSS

• Дэниел Шварц строит toggletips на anchored container queries, поповерах и corner-shape ^[14]: подсказка появляется справа от кнопки, не хватает места — переворачивается влево, и стрелочка-каретка переезжает вместе с ней. Всё это без единой строки JS. Механика: position-try: flip-inline переворачивает тултип, container-type: anchored превращает его в контейнер, а @container anchored(fallback: flip-inline) позволяет каретке узнать, что тултип перевернулся. Сверху — прогрессивные улучшения через corner-shape: scoop для скруглённых стрелок и modern attr() для декларативных якорей. Поддержка пока только Chrome 143+.

• Брехт де Рёйте показывает corner-shape на пяти примерах ^[15]: карточки товаров с ленточными бейджами, кнопки с анимацией при ховере от bevel к squircle (ох уж эти названия) и другие. Преимущество свойства в том, что corner-shape работает с border, box-shadow и background в отличие от clip-path, который всё это обрезает. Каждое демо устроено через @layer с прогрессивным улучшением: базовый слой выглядит хорошо везде, @supports (corner-shape: bevel) добавляет улучшение только там, где поддерживается. Пока только Chrome 139+.

• Джон Шамир разбирает, как сделать плавное переключение между светлой и тёмной темой ^[16]: стандартный подход через transition: background-color, color работает, но быстро становится неудобным — каждое новое свойство (например, border-color) нужно добавлять руками, и стоит пропустить один элемент, как он мигает при переключении. Решение — @property из CSS Houdini: объявляешь CSS-переменную с типом <color>, и браузер уже умеет её анимировать. Вместо перечисления свойств объявляешь переход на уровне переменных — и все элементы, использующие палитру, переключаются плавно автоматически. С поддержкой проблем не возникает – в старых браузерах просто не будет анимации, тема всё равно переключится.

• Патрик Бросс издевается над customizable <select> ^[17]: стопка папок, которые разворачиваются дугой, веер игральных карт, пикер эмодзи по кругу, и всё это — обычный <select> с appearance: base-select и горстью новых CSS-фич. ::picker(select) убирает дефолтный дропдаун, ::picker-icon и ::checkmark переопределяют иконки, sibling-index() даёт каждому <option> его порядковый номер для вычисления угла поворота, @starting-style заставляет CSS-переходы работать при появлении элементов, cos() и sin() расставляют опции по окружности. Доступность при этом сохраняется: браузер продолжает обрабатывать клавиатуру и скринридеры. Пока только Chromium.

• Уна Кравец представляет contrast-color() — нативную CSS-функцию, которую она сама предложила в CSSWG ещё в 2019 году ^[18]: принимает любой цвет, возвращает либо black, либо white — тот, что даёт лучший контраст по WCAG 2. Работает в Chrome 147+, Safari 26+ и Firefox 146+.

• В следующей статье она же показывает два способа выйти за пределы «чёрный или белый» в contrast-color() ^[19]. Первый способ: смешать результат с фирменным цветом через color-mix() — получается тонированный вариант вместо чистого чёрного/белого. Второй, более гибкий: зарегистрировать кастомное свойство --contrast-color через @property, записать в него contrast-color(), а потом использовать новую функцию if() со style queries как детектор «светлый или тёмный фон» и выбирать из собственной палитры. Оба подхода используют contrast-color() не как источник финального цвета, а как детектор режима — всё остальное остаётся за разработчиком, включая проверку доступности.

⚡ JS / TS

• Подробный гайд по Scoped Custom Element Registries, которые появились в Chrome и Edge 146 ^[20]: раньше все кастомные элементы жили в одном глобальном window.customElements, и если две библиотеки определяли <my-button> — страница падала с ошибкой ^[21]. Теперь можно создать изолированный реестр через new CustomElementRegistry() и привязать его к shadow root, отдельному элементу или документу. Особенно актуально для микрофронтендов и дизайн-систем от разных команд. Firefox пока не поддерживает, Safari — с верси�� 26.

• Практическое руководство по миграции с Moment.js на Temporal API ^[22]: Temporal дошёл до Stage 4, работает в Chrome 144+ и Firefox 139+. Джо Аттарди разбирает миграцию по рецептам: создание объектов, парсинг, форматирование, арифметика дат, сравнение, конвертация часовых поясов. Ключевые отличия: Temporal иммутабелен (никаких .clone() перед каждой операцией), месяцы с единицы а не с нуля, часовые пояса встроены без отдельного пакета, форматирование через Intl.DateTimeFormat с автоматической локализацией. Strict-only парсинг: если строка не ISO 8601 — сразу RangeError, никаких угадываний. Полифилл @js-temporal/polyfill весит вдвое меньше Moment и втрое меньше moment-timezone.

⚛️ React

• Сунил Сандху строит одну и ту же многошаговую форму дважды (на React Hook Form + Zod и на SurveyJS) и сравнивает, где оказывается бизнес-логика ^[23]. В RHF-версии логика ^[24] рассыпана по хукам и переменным, а в SurveyJS-версии тот же JSON-объект содержит visibleIf, expression и условную навигацию рядом с полями, которых они касаются, и в результате react-компонент упрощается до к <Survey model={model} /> и useMutation.

• Релиз shadcn/cli v4 ^[25] обновление, рассчитанное на людей и агентов с «skills» для повышения производительности агентов; пресеты, чтобы упаковать конфиг дизайн‑системы в простой ID и переключаться между ними; режим «dry run», чтобы заранее посмотреть, что реестр добавит; shadcn/create переписан с набором компонентов для быстрого превью пресет��в.

🅰️ Angular

• Вышел Ionic Framework 8.8 ^[26]: ModalController и PopoverController в Angular теперь поддерживают кастомный Injector при создании overlays — компоненты внутри модалки или поповера получают доступ к route-scoped сервисам и провайдерам вне root.

𝐒 Svelte

• Дэвид Бушелл поймал баг в SvelteKit и придумал ему имя: FOWL — Flash of Wrong Locale ^[27]: приложение рендерится на сервере с en-US (дефолт Cloudflare Workers), потом гидратируется в браузере с en-GB — и дата на долю секунды мелькает в неправильном формате. В статье рассказывается и о решении бага.

🌠 Astro

• Реймонд Камден тестирует Live Content Collections в Astro v6 на примере TMDB API ^[28]: новая фича позволяет использовать привычные content collections, но данные подтягиваются не из файлов, а из внешнего API в реальном времени. Нужно описать лоадер с двумя методами — loadCollection для списка и loadEntry для одного элемента — и зарегистрировать его в live.config.ts. Дальше в компонентах работаешь через getLiveCollection и getLiveEntry, как с обычными коллекциями. Бонусом — экспериментальный API кеширования через Astro.cache.set() с поддержкой stale-while-revalidate: буквально одна строка кода на страницу, но работает только в preview/production, в dev режиме проверить пока не получится.

NodeJS, Deno, Bun, etc

• Node Weekly #615 ^[29]: из важного — Temporal proposal дошёл до Stage 4 на TC39. Девять лет ждали. Node должен включить его по умолчанию в 26-й версии. TypeScript 6.0 RC вышел. Node переходит на один мажорный релиз в год начиная с Node 27. node-sqlite3 выпустил финальный 6.0 и уходит на пенсию — самое время переехать на better-sqlite3 или встроенный node:sqlite. MikroORM 7 сменил Knex на Kysely, стал нативным ESM и отвязался от Node. ArkType 2.2 добавил type.fn — функции с автоматической валидацией входных и выходных типов. В общем, мы сделали дайджест из другого дайджеста!)

🦮 A11y

• GitHub рассказывает, как с помощью Copilot и GitHub Actions выстроили систему обработки отчётов об accessibility-проблемах ^[30]: раньше половина фидбека лежала нетронутой больше 300 дней. Теперь каждый отчёт автоматически анализируется Copilot — модель присваивает severity, маппит на WCAG, определяет затронутые группы пользователей и генерирует чеклист для воспроизведения бага, покрывая около 80% метаданных. Дальше — человек проверяет, команда валидирует, исправление уходит к пользователю, и тот сам подтверждает что всё работает. Результат за год: среднее время закрытия упало со 118 до 45 дней, 89% задач закрываются в течение 90 дней. Детальный разбор архитектуры с диаграммами — хороший шаблон для тех, кто хочет встроить автоматизацию в процесс работы с фидбеком.

📦 Разное

• Смотрите дорамы? Теперь ещё и программируйте на корейском ^[31]: Han — компилируемый язык программирования на хангыль, написанный на Rust. 함수 вместо function, 만약 вместо if, 반복 вместо for — всё честно, компилируется через LLVM IR в нативный бинарник. Есть интерпретатор, REPL и даже LSP-сервер с автодополнением. Автор серьёзно аргументирует выбор языка: хангыль создан в 1443 году с нуля как идеальная фонетическая система, и грех не заставить его делать ещё и туду-листы. А ещё представьте, как нам пришлось попотеть при составлении этой новости – мы ж не знаем корейского!

• Гарри Крессвелл разбирает разницу между HTML-элементом и тегом через реальную ошибку студента ^[32]: студент получил инструкцию «вставь код под элемент <title>» и вставил его сразу после открывающего тега, внутрь элемента. Причина: тег и элемент — разные вещи, а мы используем эти слова как синонимы. Тег — это одна часть элемента (<title> или </title>). Элемент — это открывающий тег, закрывающий тег, контент между ними и атрибуты. Для самозакрывающихся вроде <img> элемент состоит только из одного тега с атрибутами.

• Утечки памяти во фронтенде: статический анализ 500 репозиториев и бенчмарк-исследование по пяти сценариям ^[33] Вы кликаете по своему SPA — переходите между страницами, заполняете формы, переключаете вкладки. Всё работает быстро. А через двадцать минут интерфейс начинает подтормаживать. События прокрутки запаздывают. Анимации теряют кадры. Вы открываете вкладку Memory в DevTools и наблюдаете, как линия хипа неуклонно ползёт вверх — 200 МБ, 300 МБ, 400 МБ — без каких-либо признаков стабилизации.

🌎 Браузеры

• Chrome 146 ^[34]: три заметных новинки. Scroll-triggered animations — декларативное управление анимациями на основе позиции скролла без JavaScript, то, что раньше делали через IntersectionObserver и ручной старт. Scoped custom element registry — несколько реестров кастомных элементов на одной странице, конфликты имён между библиотеками больше не проблема. Sanitizer API — наконец стабильный способ очистить произвольный HTML от потенциально опасного кода без сторонних библиотек, теперь и в Firefox тоже.

• DevTools в Chrome 146 ^[35]: Adopted Style Sheets теперь видны в дереве Elements как отдельный узел #adopted-style-sheets — их можно инспектировать и редактировать прямо в Styles, как обычные <style>. Console перестал терять правки при навигации по истории команд. Панель «Privacy and Security» переименована в «Security», а все предупреждения о куки и приватности переехали в Console. DevTools MCP server обновился до 0.19.0: Lighthouse прямо из агентских воркфлоу, --slim режим для экономии токенов, новые скиллы для отладки LCP и доступности.

• Chrome придёт на ARM64 Linux во втором квартале 2026 года ^[36]. После macOS в 2020-м и Windows в 2024-м очередь дошла до Linux: полноценный Chrome с синхронизацией, расширениями и Google Password Manager, без специальных настроек. Google партнёрится с NVIDIA, чтобы упростить установку на DGX Spark – компактных AI-суперкомпьютерах на архитектуре Grace Blackwell.

• Safari Technology Preview 239 ^[37]: релиз преимущественно про баги. Из нового — поддержка псевдокласса :open для <input> и цветовой контраст прямо в Color Picker в Web Inspector. Остальное: починили scroll anchoring (страница прыгала в начало при динамической подгрузке контента), сломанный рендеринг при прерывании инерции скролла, text-indent в contenteditable, который мигал при наборе текста, и пачку CSS-расчётов с subgrid и абсолютным позиционированием.

🎨 UI|UX и дизайн

• Брэд Фрост записал монолог во время прогулки с собакой — про AI, дизайн и то, где мы сейчас находимся ^[38]. OpenAI и Anthropic борются за контракты с военными — и это не абстрактная этическая проблема, а конкретный выбор. «Просто не используй AI» — благородно, но нереалистично для большинства людей, у которых нет такой привилегии. Сравнение с Майклом Джексоном точное: технология может быть трансфор��ирующей и одновременно созданной при помощи сомнительных решений — обе вещи правда, и примирения между ними нет. Что делать: признать ситуацию такой, какая она есть, не заниматься самообманом, выработать ценности и принципы работы — и придерживаться их, пока ландшафт меняется с головокружительной скоростью.

Статья подготовлена при поддержке @CosyFrontend ^[39], @alexbraun ^[40] и @DreamShaded ^[41].