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

Привет!

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

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

• 📺 Для тех, кто хочет делать игровые интерфейсы быстрее: видео про 2D-игры с AI и Phaser, где генеративные инструменты работают как напарник, а не как «чёрный ящик».

• 🤖 В AI-разделе — разбор того, что уже можно брать в прод: micro-ml на Rust/WASM, кейс крупной техкомпании с роем из 50+ агентов, Flint Alpha и практическая интеграция Claude с видео.

• 🛡️ По безопасности фокус на снижении рисков: прикладной XSS, бесплатная оценка уязвимостей кода от GitHub и дорожная карта крупной техкомпании по постквантовой криптографии.

• 🎨 CSS-блок про баланс визуала и доступности: почему box-shadow не заменяет outline в forced-colors и как сохранить корректный фокус.

• ⚛️ React-секция для тех, у кого интерфейсный слой растёт в сложности: управление модалками без хаоса, UI без брейкпоинтов и состояние компонентов через radio state machine.

• ⚡ В JS/TS — практичный набор без перегруза: Pretext для текста, k-means для палитр, модульная архитектура, Intl API и Web Audio API в Node/Bun.

• 🅰️ Angular-раздел посвящён Signal Forms в v21 и тому, как перейти к типизированным формам без ручных подписок.

• 🌐 В стандартах и дизайне — что уже можно внедрять сейчас: CSS Image Animation, Baseline за март, Liquid UI и UX-подходы для legacy-систем.

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

📺 Медиа

• Создавайте потрясающие 2D-игры для веб-сайтов с помощью AI: доклад о том, как использовать AI как соавтора при создании браузерных игр на Phaser. Phaser — open-source 2D-движок для HTML5 (Canvas/WebGL) с готовыми сценами, анимациями, физикой и богатой экосистемой плагинов, поэтому он хорошо подходит для быстрых прототипов и небольших игровых проектов.

🤖 AI

• micro-ml: tiny ML в ~56KB: компактная библиотека на Rust/WASM без зависимостей, заточенная под прикладные задачи вроде трендлайнов, сглаживания, прогнозирования, кластеризации и базовой классификации без «тяжёлого» TensorFlow.js. В репозитории заявлены 16 алгоритмов и sub-millisecond выполнение на типичных датасетах, плюс поддержка Web Workers для крупных объёмов данных.

• Научить Claude распознавать видео несложно: достаточно подружить с Qwen Omni! @kirillbrsnkv поделился рецептом интеграции через DashScope API.

• Flint Alpha — языковая модель, обученная не сходиться к правильному ответу. Springboards выпустила альфа-версию небольшой модели на базе Qwen3-30B, специально доработанную для творческих задач. По бенчмарку NoveltyBench (считает, сколько содержательно разных ответов из 10 попыток) Flint даёт 7.47, тогда как Claude Sonnet 1.83, а GPT-5.4 — 2.54. При повторе одного и того же промпта 50 раз косинусное сходство ответов Flint составляет 0.721 против 0.905 у Claude, что позволяет считать Flint идеальным инструментом для генерации идей.

• Как крупная техкомпания использовала AI для картирования tribal knowledge в больших data pipelines. Компания столкнулась с тем, что AI-агенты плохо работают с большой кодовой базой без контекста: четыре репозитория, три языка, 4100+ файлов — в итоге они угадывали вместо того, чтобы вносить полезные правки. Решением стал рой из 50+ специализированных агентов, который прочитал весь код и собрал 59 компактных контекстных файлов с неочевидными паттернами, зависимостями между модулями и правилами, раньше существовавшими только в головах инженеров. Отдельно интересно, что система поддерживает себя сама: периодические джобы проверяют актуальность файлов и чинят устаревшие ссылки.

• Эпоха языковых моделей подходит к концу. Jose Crespo утверждает и приводит ссылки: GPT, Claude, Gemini галлюцинируют не меньше, а больше с каждым релизом — флагманские модели OpenAI показывают до 48% галлюцинаций на собственных бенчмарках. Масштабирование инференса проблему не решает, потому что проблема архитектурная: все крупные модели не умеют представлять неопределённость. Альтернативой представляется байесовский ИИ на метрике Фишера, где веса обновляются во время работы, а не замораживаются после обучения. Автор разбирает пятёрку претендентов: VERSES AI, causalLens, Symbolica, Layer 6 и Microsoft с Infer.NET. Внимание: у редакции дайджеста есть сомнения в непредвзятости автора оригинальной статьи.

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

• Как обнаружить XSS-атаки: методы, используемые исследователями безопасности в реальных условиях — Эксперт делится техниками, которые используют профессиональные исследователи безопасности для поиска межсайтового скриптинга. В материале разбираются все типы XSS (отражённые, хранимые, DOM-based и даже blind), сравниваются возможности автоматических сканеров (Dalfox, XSStrike) и ручного тестирования, а также рассматриваются неочевидные векторы атак — от генерации PDF-файлов до десктопных Electron-приложений.

• Миграция на постквантовую криптографию в крупной техкомпании: фреймворк, уроки и выводы. Компания объясняет, почему откладывать переход нельзя: сценарий «store now, decrypt later» позволяет собирать зашифрованный трафик уже сегодня в расчёте на будущую расшифровку через 10-15 лет. В материале предложена концепция PQC Migration Levels — система уровней готовности, которая помогает командам приоритизировать миграцию по разным сценариям использования. Стандарты ML-KEM (Kyber) и ML-DSA (Dilithium) уже опубликованы NIST, а криптографы компании стали соавторами алгоритма HQC.

• GitHub запустил оценку рисков безопасности кода — бесплатное сканирование до 20 репозиториев организации на уязвимости в коде, которое работает в паре с уже существующим Secret Risk Assessment.

🎨 CSS

• box-shadow не замена outline: Мануэль Матузович напоминает о проблеме доступности в режиме forced-colors: box-shadow там может исчезать, и фокус-стиль пропадает полностью. Практический вывод: не убирать outline (outline: none), а оставлять прозрачный контур (outline: 2px solid transparent), чтобы фокус оставался видимым в системных режимах.

⚛️ React

• Архитектура управления модальными окнами в React: типизированный стек с overlay-хуками. Статья о том, что происходит с модалками в крупном проекте через полгода после старта: prop drilling через пять уровней, тысяча экземпляров тяжёлого компонента в DOM, God Object с if-ами под каждый контекст вызова и ручное управление шестью флагами для трёх связанных окон. @undefinet предлагает Redux-стек с тремя стратегиями открытия (Reset, Replace, Stack), типизированными данными на каждую модалку и source-обёртками, которые разделяют логику по контексту вызова, оставляя UI чистым.

• Как строить UI без брейкпоинтов. Амит Шин разбирает, почему брейкпоинты как основной инструмент адаптива устарели: компонент живёт одновременно в сайдбаре, модалке, дашборде и фулл-вайд ленте, а ширина вьюпорта ничего не знает об этих контекстах. Альтернатива: intrinsic layout: auto-fit + minmax() вместо четырёх @media-блоков для сетки, clamp() для типографики, container queries для компонентов, которым нужно реагировать на своего родителя. Media queries остаются, но только для реальных возможностей устройства и пользовательских предпочтений, а не как главный инструмент верстки.

• Конечный автомат на радиокнопках. Развитие идеи checkbox hack: вместо одного чекбокса с двумя состояниями создаётся группа радиокнопок, каждая из которых представляет отдельное состояние UI. Получается конечный автомат прямо в CSS: переключение тем из трёх вариантов, многоступенчатые визуальные режимы, взаимоисключающие состояния компонента. Отдельно разбирается доступность: hidden убирает элемент и от скринридеров, поэтому правильнее стилизовать сам input через appearance: none, а не прятать его за label.

• Tailwind CSS и дизайн-системы: почему это не работает. @m_ig разбирает конкретную проблему: добавить новый вариант кнопки btn-focus, который корректно комбинируется с btn-sm, btn-outline, btn-icon и правильно наследует правила состояний (hover на 15% темнее, active на 10% светлее). В классических CSS-фреймворках это одна функция-миксин. В Tailwind — либо CVA с заранее прописанными комбинациями (не масштабируется), либо CSS-переменные (работает, но теряется главное преимущество Tailwind — скорость), либо @utility (костыль, ломающийся на пересечениях типов). Вывод: для прототипов и коротких проектов Tailwind отлично, для долгоживущей дизайн-системы накопит технический долг.

⚡ JS / TS

• Pretext — библиотека, которая считает текстовую вёрстку в 500 раз быстрее браузера. Инженер Midjourney Cheng Lou разработал библиотеку на TS для оптимизации производительности разметки текста за счет избежания перерисовки DOM. Традиционные методы, такие как getBoundingClientRect(), используемые для измерения текста, могут вызывать проблемы с производительностью, особенно в динамических контекстах. Pretext решает эту проблему путем отделения измерений текста от рендеринга DOM.

• Как получить палитру доминирующих цветов из изображения. @4Nun4ku применил алгоритм k-means для сжатия цветовой палитры, используя предварительную обработку изображения, расстояние между цветами в виде суммы квадратов разностей каналов, итерации для стабилизации и Web Worker для повышения производительности. После итераций 8 раз удаляются близкие цвета по порогу (расстояние < 18²), сокращая палитру до 5–10 доминирующих цветов.

• Хорошо спроектированная модульная система JavaScript — ваше первое архитектурное решение. Статья объясняет, почему выбор между CJS и ESM — это не вопрос синтаксиса, а архитектурное решение: ESM намеренно пожертвовал гибкостью require() ради статического анализа и tree-shaking, и именно это делает его правильным выбором для больших проектов. Дальше — про dependency rule из Clean Architecture (зависимости должны указывать внутрь, к бизнес-логике, а не наружу к фреймворкам), граф модулей как индикатор здоровья проекта и как circular dependencies убивают поддерживаемость раньше, чем мы это замечаем.

• Intl API: лучший браузерный API, которым вы не пользуетесь. Подробный разбор нативного браузерного API интернационализации, который заменяет Moment.js (295 kB), date-fns (77 kB), numeral.js — всё это уже в браузере и знает локаль пользователя без лишних настроек. Статья описывает baseline widely available и актуальна для любого проекта с форматированием дат или чисел.

• web-audio-api: Web Audio API для Node и Bun: open-source библиотека от Sebastien Piquemal, которая переносит Web Audio API в серверную среду. Можно проигрывать звук прямо на машине/сервере или рендерить его в файл, при этом совместимы привычные инструменты вроде Tone.js и есть набор готовых примеров.

🅰️ Angular

• Signal Forms в Angular v21: смена парадигмы управления формами. @EgorMolchanov разбирает экспериментальный API Signal Forms на конкретном примере формы с вложенными массивами, асинхронной валидацией и динамическими правилами. Главное отличие от Reactive Forms: вместо FormGroup/FormControl/FormArray используется сигнал с моделью данных, а form() строит поверх него типизированное дерево полей. Валидация собирается в одном месте, applyEach() заменяет ручную работу с FormArray, а when и validate() позволяют описывать правила, зависящие от значений других полей, без единой ручной подписки.

📦 Разное

• Новые правила в отношении спама: перехват нажатия кнопки “Назад” — Когда пользователь нажимает кнопку “Назад” в браузере, он ожидает, что вернется на предыдущую страницу. Перехват нажатия кнопки “Назад” приводит к иным результатам. Это ситуация, когда сайт вмешивается в навигацию в браузере и не дает пользователю вернуться на предыдущую страницу, и теперь такие действия будут наказываться.

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

• CSS Image Animation Module Level 1: первый публичный рабочий черновик — W3C опубликовал первый публичный черновик спецификации, которая даёт авторам CSS-контроль над анимированными изображениями (GIF, PNG, WebP). Два новых инструмента: свойство image-animation со значениями paused, stopped, running и псевдокласс :animated-image для точечной стилизации. До этого у разработчиков не было никакого способа управлять автовоспроизведением анимаций, что нарушало WCAG 2.2 и раздражало пользователей на страницах с галереями.

• Мартовский дайджест Baseline за 2026 год. В марте 2026 статус Newly available получили: WebTransport (двунаправленная связь поверх HTTP/3), readable byte streams для эффективной работы с бинарными данными, Reporting API для централизованного сбора CSP-нарушений и браузерных ошибок, Iterator.concat() для склейки итераторов без промежуточных массивов, font-family: math для MathML и два новых ключевых слова text-indent: hanging и each-line. В Widely available перешли contain-intrinsic-size, scrollbar-width, @starting-style и ряд других фич — можно использовать в продакшне без полифилов (если ваши клиенты сидят на свежайших браузерах, конечно).

🎨 UI|UX и дизайн

• Конец статичного дизайна: жизнь в эпоху Liquid UI. Алекс Харпер описывает концепцию Liquid UI: интерфейс, который не показывает всё, что умеет, а показывает только то, что нужно прямо сейчас. Меню не существует в фиксированном месте — инструменты появляются рядом с точкой взаимодействия и исчезают, когда контекст меняется. Дизайн-система превращается из набора токенов в набор правил поведения: компонент знает, каким быть в «исследовательском» состоянии пользователя и каким — в «режиме действия». Статья скорее манифест, чем инструкция, но хорошо формулирует направление, в котором движется профессия: от pixel-perfect макетов к проектированию хореографии переходов.

• Как улучшить UX в legacy-системах. Виталий Фридман написал руководство для тех, кому досталась система, которой десять лет, которую никто до конца не понимает и которую все боятся трогать. Он разбирает реальные сложности: предприятия тратят 40–60% времени на поддержку легаси, авторы системы давно ушли, документации нет, а любое изменение может сломать что-то в неожиданном месте. Статья про то, как двигаться вперёд маленькими шагами, не ломая то, на что опираются пользователи каждый день.

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