Привет!
Это четырнадцатый выпуск Frontend Status — дайджеста по фронтенд-разработке.
В этом выпуске:
📺 Vue на развилке роста: разбираем State of Vue 2026, чтобы понять, куда вложить время сегодня и не чинить стек завтра.
🤖 AI без иллюзий, но с результатом: от генеративных UI и reasoning-RAG до правил, которые уменьшают «переписывание ради переписывания» в код-ассистентах.
🛡️ Безопасность как конкурентное преимущество: сверяем npm-практики по OWASP, кейс Context.ai и экономику фейковых звезд, чтобы не привезти риск в прод.
🎨 Новый CSS вместо старых костылей:
sizes="auto"и HTML в<canvas>показывают, как делать богаче интерфейсы и проще поддержку.⚡ JS/TS и фреймворки под давлением масштаба: читаемость кода, ускорение Angular и обновления React/Vue как ориентиры для технических решений.
🧪 Инструменты, которые сокращают путь до релиза: автогенерация E2E, Excel через WebAssembly и процедурный звук для живого интерфейса.
…и многое другое.
📺 Медиа
Evan You представил State of Vue 2026: ежегодный апдейт от создателя Vue с обзором дорожной карты, развития экосистемы, улучшений производительности и общего вектора развития фреймворка.
🤖 AI
A2UI продвигает идею генеративных интерфейсов через открытый протокол: проект предлагает протокол взаимодействия AI и UI, чтобы интерфейс собирался динамически под задачу пользователя, а не оставался жёстко зашитым интерфейсом.
HyperFrames — фреймворк для создания видео на HTML и JavaScript: open-source альтернатива Remotion без React, в которой можно собирать ролики из готовых блоков, эффектов и медиа-клипов.
Ваш RAG не умеет думать. А мой умеет. Авторы из Ohio State University собрали систему, которая решает главную боль обычного RAG - multi-hop reasoning, когда ответ размазан по нескольким документам и требует логической цепочки. Под капотом OpenIE извлекает из текстов триплеты «субъект — отношение — объект», из них строится knowledge-граф, а Personalized PageRank ранжирует факты по ассоциативным связям. Спасибо, @rRenegat!
Не надо переписывать то, что не поломано. Если вы пользовались AI-ассистентами для кода, то вам знакома картина: просишь поправить одну строку, получаешь переписанную функцию с новыми проверками на None и переименованными переменными. Автор называет это «избыточной редактурой» и впервые её численно измеряет: ломает 400 задач из BigCodeBench программно (а не через LLM), считает расстояние Левенштейна на уровне токенов и прирост когнитивной сложности. Инструкция «сохраняй оригинальный код» в промпте снижает Левенштейн почти везде, причём сильнее у моделей с рассуждениями: способность к рассуждениям не вызывает избыточную редактуру, а помогает следовать ограничениям. В обучении SFT катастрофически забывает базовые навыки (-43% на LiveCodeBench), а RL обобщается и не деградирует — подтверждение тезиса «SFT запоминает, RL обобщает».
🛡️ Безопасность
OWASP обновляет NPM Security Cheat Sheet: актуальный чеклист по безопасности npm-пакетов с практиками против typosquatting и dependency confusion, а также рекомендациями по trusted publishing и отключению опасных lifecycle scripts.
Внутри фальшивой звездной экономики GitHub: в ходе масштабного расследования выяснилось, что на GitHub существует развитая экономика по накрутке звёзд (от $0,03 за штуку), включающая более 6 миллионов фейковых отметок на 18 617 репозиториях, причём особенно уязвимыми оказались AI/LLM и криптовалютные проекты.
The Web Is Fun Again: First Experiments with HTML in Canvas. Амит Шин разбирает свежий экспериментальный API, который позволяет рендерить настоящий HTML внутри
<canvas>и применять к пикселям эффекты через 2D Canvas, WebGL или WebGPU — при этом DOM-элементы остаются интерактивными, форма работает, инпут принимает ввод, всё доступно для скринридеров. Доступно пока только в Chromium 146+ за флагомchrome://flags/#canvas-draw-element.Context.ai. Компрометация токена OAuth: скомпрометированные токены Context.ai OAuth позволили злоумышленникам осуществить атаку на цепочку поставок через доверенные интеграции SaaS.
💫 Анимации и 3D
CSS для тех, кто спал и проснулся. @Sedm1 честно признаётся: семь лет назад сразу прыгнул в JS-фреймворки, а CSS освоил «на уровне базы», и теперь возвращается посмотреть, что произошло. Получился обзорный гайд для тех, кто в той же ситуации, для новичков веб-разработки, а также для тех, кто не читает наши дайджесты. Хорошее напоминание о том, что огромный пласт задач, под которые раньше тянули JS, теперь решается чистым CSS.
The end of responsive images. Мэт Маркис, бывший председатель RICG, группы, которая 14 лет назад протащила в стандарт
srcset,sizesи<picture>— пишет лонгрид о том, как он лично продвигал синтаксис, который ненавидит. Кpictureиsrcsetпретензий нет, обоснованно объясняет, почему контроль над выбором источника отдан браузеру. Главный “враг” же -sizes: атрибут требует описать размеры картинки на всех брейкпоинтах одной строкой вида(min-width: 1340px) 257px, (min-width: 1040px) calc(24.64vw - 68px), ..., и автоматизировать это нормально нельзя — пришлось бы рендерить весь сайт на этапе сборки. Развязка: в Gecko и WebKit недавно приземлились патчи, выравнивающие их с Blink по поддержкеsizes="auto". Работает только в связке сloading="lazy"— ленивая загрузка откладывает запрос до момента, когда браузер уже знает реальные размеры элемента в layout, иsizesстановится не нужен. Браузеры без поддержки просто проигнорируютautoи пойдут дальше по строке, так что использовать можно прямо сейчас без полифилов. WordPress уже переключился на этот подход. Ручнойsizesостаётся только для бэкграунд-картинок, которымloading="lazy"не подходит — там обычно и так100vw.
⚡ JS / TS
Почему JS/TS — не функциональный язык (и почему это важно понимать). @divideme два года собеседовал JS/TS-инженеров, заметил повторяющуюся асимметрию (об ООП говорят уверенно, а FP критикуют через опыт работы только с JS, а не с Haskell или Scala) и решил разобрать, чем настоящий FP-язык отличается от JS на уровне рантайма.
Почему я больше не использую цепочки вызовов в JavaScript: разработчик Мэтт Смит о том, что отказ от повсеместного использования цепочек в JavaScript улучшает читаемость и отладку кода, особенно когда цепочка превышает 2-3 шага.
⚛️ React
Animata — коллекция готовых анимированных компонентов для React: на сайте собраны UI-блоки с эффектами, которые можно быстро вставлять в проект и адаптировать под свой дизайн.
React Email выпустил версию 6.0.0: крупное обновление фреймворка для создания HTML-email-писем на React с улучшениями в экосистеме компонентов и процессе сборки шаблонов.
🅰️ Angular
VoidZero ускорили Angular-компилятор с помощью AI: разработчики команды Oxc показывают, как использовали AI в инженерном цикле и получили заметный прирост скорости сборки Angular-проектов.
📦 Разное
wasm-xlsxwriter генерирует Excel-файлы в браузере и Node.js: библиотека переносит возможности xlsxwriter в WebAssembly, чтобы собирать
.xlsxбез серверной обработки.
🛠️ Инструменты
Cloudflare представила Agent Readiness Score: насколько ваш сайт готов к AI-агентам. Тулза isitagentready.com проверяет сайт по четырём осям и выставляет оценку: discoverability (robots.txt, sitemap.xml, Link-заголовки RFC 8288), content (Markdown content negotiation через
Accept: text/markdown), bot access control (Content Signals, Web Bot Auth) и capabilities (API Catalog RFC 9727, MCP Server Card, Agent Skills, OAuth-discovery, WebMCP). Сканирование 200 тысяч топовых доменов из Cloudflare Radar показало, что веб к агентам пока не готов: robots.txt есть у 78% сайтов, но почти все написаны под классические поисковики, Content Signals — у 4%, корректный markdown-фоллбек — у 3,9%, а MCP Server Cards и API Catalog в сумме встречаются меньше чем на 15 сайтах из всей выборки. Бонусом — кейс самой Cloudflare: они переделали свою документацию по этим стандартам, и агент на Kimi-k2.5 через OpenCode стал отвечать на технические вопросы на 66% быстрее и тратить на 31% меньше токенов, чем на других docs-сайтах. Для каждой проваленной проверки сервис выдаёт готовый промпт, который можно скормить кодинг-агенту, чтобы он сам всё починил.
🧪 Тестирование
Meticulous автоматически генерирует E2E UI-тесты: сервис от AI инженеров собирает и постоянно обновляет набор end-to-end тестов, чтобы повысить покрытие интерфейса без ручного написания каждого сценария.
🎨 UI|UX и дизайн
tiks — процедурные UI-звуки для веба: миниатюрная библиотека на Web Audio API, которая синтезирует клики, попы и пинги без тяжёлых аудиофайлов.
Статья подготовлена при поддержке @CosyFrontend, @alexbraun и @DreamShaded.