Привет!

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

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

• 📺 Плейлист по отладке Next.js с Sentry.

• 🤖 Рэйчел Эндрю и Эдди Османи — два взгляда на AI: когда использовать, а когда координировать целый оркестр агентов.

• 🛡️ GlassWorm: атака через невидимые Unicode-символы в npm-пакетах и расширениях VS Code.

• 🎨 CSS Anchor Positioning: два круга, стрелка и ноль строк JS от Темани Афифа.

• ⚛️ Storybook MCP для React, data-testid как признак недоступности и пошаговые туры через React Joyride.

• 👁️ Vue Devtools не работает в продакшене? QA-инженер написал свой инспектор.

• 🌎 Chrome 147 с scoped view transitions, Safari TP 240 и дайджест веб-платформы за март.

• 🖌️ Осмысленное трение в UX, ARIA-роли для дизайнеров и тест масштабирования шрифтов в Figma.

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

📺 Медиа

• Набор уроков: отладка приложений Next.js — полезный плейлист для разработчиков на Next.js, которые хотят научиться быстро находить и исправлять баги с помощью Sentry.

🤖 AI

• Рэйчел Эндрю работает на веб с 1996 года, и её взгляд на AI предсказуемо трезвый: LLM — инструмент, как электронные таблицы, и люди, которые советуют применять его ко всему, ошибаются ровно так же, как советчики «делайте всё в Excel». Два сценария, где она реально использует AI: задачи, которые никогда не дойдут до очереди без AI (мелкие правки в документации, скриншоты, опечатки), и высокоприоритетные задачи с огромным объёмом грязных данных, где AI делает первый проход, а люди проверяют результат. Самое ценное наблюдение в конце: те, кто умеет различать, когда и что использовать, и выстраивает процессы с защитой от ошибок AI, окажутся самыми ценными специалистами в ближайшие годы.

• Эдди Османи выступил на O’Reilly AI CodeCon и написал развёрнутый разбор своего доклада. Шесть месяцев назад большинство разработчиков работали с одним AI-агентом в синхронном цикле. Сейчас продуктивные разработчики координируют несколько агентов асинхронно, каждый со своим контекстным окном и зоной ответственности. Статья разбирает паттерны от subagents (Task tool, параллельный запуск, ручное управление зависимостями) до Agent Teams с общим списком задач, пиринговым обменом сообщениями и автоматической разблокировкой зависимостей. Отдельный блок про инструменты трёх уровней: in-process агенты, локальные оркестраторы (Conductor, Vibe Kanban) и облачные асинхронные агенты (Claude Code Web, Copilot Coding Agent, Jules, Codex). Главный тезис жёсткий: узкое место сместилось с генерации на верификацию, и без качественных gates, плана, хуков и человеческого ревью можно агентически закодировать себя в угол.

• Автор с ником Antra запустил Nemotron-Cascade-2-30B на домашнем сетапе NUC 64GB + RTX 3090 через vLLM с AWQ-квантованием и FP8 для KV-кэша. Модель: гибридная архитектура Mamba + MoE: MoE даёт скорость, Mamba позволяет работать с длинным контекстом без квадратичного роста памяти. Qwen 3.5-35B и GGUF-варианты не прошли отбор по соотношению скорости и качества. Статья в формате детального лога тестов: физика, термодинамика, сравнение архитектур БД, анализ документов через RAG, и каждый тест с reasoning-блоком модели, ответом и разбором от Gemini.

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

• Злоумышленники из кампании GlassWorm скомпрометировали как минимум 151 GitHub-репозиторий, npm-пакеты и расширения VS Code и сделали это незаметно, спрятав полезную нагрузку в Unicode variation selectors (диапазоны 0xFE00–0xFE0F), которые рендерятся как пустое пространство во всех редакторах. Открываешь файл, а видишь пустые строки. JavaScript-интерпретатор же видит исполняемый код, который через eval() крадёт токены и секреты. Атрибуция коммитов убедительная: исследователи Aikido полагают, что все 151 изменение сгенерированы LLM, т.к. вручную это нереально. Последняя эволюция атаки — злоупотребление полями extensionPack и extensionDependencies в VS Code: безобидное расширение получает доверие, затем тихо тянет GlassWorm-загрузчик как зависимость. Автор в конце описывает конкретные шаги, которые сделал сам и советует применять: проверил lockfile по списку скомпрометированных пакетов, удалил неиспользуемые зависимости, ужесточил диапазоны версий в package.json, перепроверил расширения VS Code, ограничил область видимости секретов в CI/CD.

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

• Анимация нарисованных элементов — нарисуйте что-нибудь на странице (например, подпись или почерк), нажмите кнопку и получите код Motion, который можно вставить в компонент для повторной анимации нарисованного.

🎨 CSS

• Темани Афиф на Frontend Masters показал, как CSS Anchor Positioning позволяет связать два произвольных элемента стрелкой — с позицией, формой, измерением расстояния между ними и реакцией на сближение — всё без JavaScript (кроме drag). Ключевой трюк: inset: min(anchor(--c1 inside), anchor(--c2 inside)) строит минимальный прямоугольник вокруг обоих элементов, который двигается вместе с ними. Дальше clip-path, математика через round() и atan2() для угла поворота, и @container для детектирования столкновения.

⚡ JS / TS

• Как устроены сигналы изнутри: push-pull алгоритм: разбор механизма реактивности, который лежит в основе сигналов в Solid, Vue и других фреймворках.

⚛️ React

• Storybook MCP для React: MCP-сервер даёт AI-агентам доступ к информации о компонентах — структуре, пропсах, stories — чтобы генерировать более качественный код, сценарии и тесты.

• React Joyride — библиотека для пошаговых туров по интерфейсу: подсвечивает элементы, ведёт пользователя по шагам и объясняет, что где находится. Заточена под современный React с хуками и улучшенным рендерингом.

• data-testid — это признак недоступности: Доминик утверждает, что data-testid — костыль, а не лучшая практика, и что переход на селекторы на основе ролей позволяет проверять доступность «практически бесплатно». Включает примеры «до» и «после», а также советы по улучшению удобства запросов к разметке.

👁️ Vue

• QA-инженер описал на Хабре, как построил browser extension для инспекции Vue-приложений в production-сборке, где Vue Devtools выдаёт «inspection is not available». Отправная точка: данные физически живут в runtime — значит, до них можно добраться. Первый console script читал и менял props компонентов напрямую. Потом выяснилось, что часть поведения определяется Pinia — добавил слой для чтения и изменения store, вызова actions, проверки getters. Потом — интерцептор сетевых запросов без proxy, мок-ответы прямо в браузере.

🅰️ Angular

• Signality — набор утилит поверх Angular Signals: расширяет стандартные сигналы Angular вспомогательными функциями, которые опираются на pull-based реактивность и встроенный DI. Полезно, когда базовых signal(), computed() и effect() не хватает для сложной логики состояния.

🦮 A11y

• Стив Френзель разбирает ситуацию, знакомую многим: ты понимаешь, что продукт недоступен, но начальство не хочет слышать про доступность — нет времени, нет денег, «у нас нет слепых пользователей». Статья про то, как работать обходными путями: найти союзников через неформальные каналы, понять разницу между культурой (сверху) и климатом (снизу) организации, и незаметно протаскивать фиксы под видом SEO-работ, code review или рефакторинга. Четыре роли для разных сценариев: советник, медиатор, контрабандист и хакер. Статья длинная и местами неудобная — в ней прямо называется эйблизм в индустрии. Но техническая часть конкретная и применимая сразу.

📦 Разное

• Автор под ником Staurus собрал на Хабре подробную статью про то, как строить SEO-систему захвата ниши в эпоху AI-поиска — не «попроси нейросеть написать текст», а инженерный пайплайн с семантикой, архитектурой сайта и подготовкой к тому, что ответ выдаётся раньше клика.

• Абхишек Джакхар, senior engineer в Coinbase, написал на Frontend Masters статью про главное качество, которое отделяет кандидата «Strong Yes» от просто «Yes» на техническом интервью: умение проговаривать решения вслух, пока пишешь код. Не объяснять каждую строку, но артикулировать важные архитектурные решения — почему пустой массив зависимостей в useEffect, зачем useCallback, почему box-sizing: border-box. Три практических следствия: интервьюер может вовремя скорректировать направление, кандидат сам ловит баги в процессе объяснения, и эра AI-читерства делает навык объяснения главным признаком уровня: код сгенерировать просто, объяснить концепции за ним без понимания нельзя. Вторая часть статьи - разбор реального задания с Atlassian: компонент Bar Chart на React, с разбором типичных ошибок и тем, как интервьюеры выставляют оценку.

🌎 Браузеры

• Chrome 147 добавляет Element.startViewTransition(): view transition теперь можно запускать не на весь документ, а на конкретное поддерево DOM. Это решает сразу три проблемы: несколько переходов могут идти параллельно, переходы можно вкладывать друг в друга, и пропадают проблемы с наложением position: fixed контента.

• Safari Technology Preview 240 в основном про фиксы: таблицы с rowspan, скролл snap, Navigation API, SVG-фильтры, PDF-паннинг на iOS, медиа с Opus и VP9. Из новинок: revert-rule в CSS (откатывает каскад, как будто текущего правила не существовало), subpixel inline layout для более точного позиционирования текста, поддержка более широкого набора символов в именах DOM-атрибутов, и контрастная информация в Color Picker Web Inspector при редактировании цвета фона. Ещё удалены нестандартные nearestViewportElement и farthestViewportElement из SVGGraphicsElement в соответствии со спецификацией SVG2.

• Рэйчел Эндрю собрала ежемесячный дайджест новинок веб-платформы за март 2026: вышли Chrome 146, Firefox 149 и Safari 26.4. Из заметного: Chrome 146 добавил scroll-triggered animations — декларативное управление анимациями через позицию скролла, работающее в воркер-треде без нагрузки на main thread. Firefox 149 и Safari 26.4 синхронно добавили поддержку контейнерных запросов без условий — теперь можно матчить контейнер только по имени, без size или style constraints.

🎨 UI|UX и дизайн

• Unicorn Club разобрал восемь ARIA-ролей, которые нужно знать дизайнеру продукта для грамотной спецификации компонентов. Логика простая: дизайнер уже владеет моделью взаимодействия, но без указания ролей разработчик угадывает — и пользователи скринридеров проигрывают. Статья разбирает конкретные решения: button vs link (навигация или действие?), dialog с обязательным focus trap и закрытием по Escape, разницу между alert и alertdialog, правила табов (стрелки, не Tab), и как правильно аннотировать landmark-роли в макете.

• Рубен Феррейра разобрал в Smashing Magazine, как через Figma Variables встроить тест масштабирования шрифтов в обычный дизайн-процесс. Точка отсчёта: 26% пользователей Android и iOS увеличивают размер шрифта по умолчанию, и WCAG 2.2 AA требует поддержки увеличения до 200% без потери функциональности. Метод работает так: создаёшь number-переменные для font-size и line-height каждого text style, прописываешь значения для шкал 100–200%, копируешь экраны и переключаешь переменные. Предварительное условие — auto layout везде, иначе при масштабировании всё разваливается. Figma-файл с примером открыт для сообщества.

• Дизайнер с Хабра описала конкретный приём, как сократить время вёрстки: подключить переменные из библиотеки компонентов прямо в Figma вместо передачи «сырых» значений. Суть проблемы понятна многим фронтендерам: разработчик в инспекторе видит flow, radius, border дважды с одинаковым значением и теряет время на расшифровку. Решение: переменные в Figma привязываются к токенам дизайн-системы и в инспекторе уже отображаются как --color-primary, --spacing-md и прочие знакомые переменные. Гайд на бесплатной версии Figma, с примером через модальное окно от дизайна до готового компонента.

• Статья атакует культ «бесшовного» UX с неожиданной стороны: интерфейс без трения не делает пользователя счастливым — он переводит его в режим пассивного потребления. Бесконечный скролл, автовоспроизведение, покупка в один клик — это не «delight», это «цифровой сомнамбулизм», после которого пользователь не помнит, что купил и зачем. Автор вводит термин «осмысленное трение» (meaningful friction) и опирается на эффект Зейгарник: незавершённые задачи запоминаются лучше завершённых, и именно небольшое усилие заставляет мозг кодировать опыт в долгосрочную память. Два конкретных приёма: вместо дропдауна на 50 пунктов — интерфейс «выбери путь» с последовательными категориальными решениями, и намеренная задержка загрузки для премиальных сервисов — если AI генерирует финансовый план за 0.2 секунды, ему не верят.

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