Привет!

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

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

• Медиа: TanStack Router — маршрутизация в React; Pinia и будущее Vue (Эдуардо Сан Мартин).

• AI: агентное будущее Next.js, AGENTS.md по-новому (Эдди Османи), вайб-кодинг и ценность кода (Маттео Коллина), таймлайн LLM за 10 лет.

• Безопасность: OWASP для агентных приложений (Auth0), Firefox 148 setHTML() вместо innerHTML.

• Браузеры: как в Blink реализован CSS corner-shape (Chrome).

• CSS: псевдокласс :near(), смерть скролл-фейду (Крис Койер), x86 на чистом CSS/HTML.

• JS/TS: зелёный дизайн интерфейсов (Смэшинг), полифил switch, TypeScript v6 beta (последний на JS), TSSLint v3, асинхронные паттерны.

• A11y: .visually-hidden в 2026 (Дэвид Бушелл).

• React: React Doctor (Million.js), SVAR Gantt, когда RSC тормозит приложение.

• Angular: PrimeNG 19→21 — критические изменения; Taiga UI CDK v4.72.0 (tuiSum, Textfield, скролл, font-size).

• Vue: документация Nuxt на русском, Nuxt + VueUse.

• Разное: ностальгия по вебу 90-х, штраф Amazon 2,5 млрд за тёмные паттерны.

• 3D: WebGL composite rendering (Three.js), voxCSS — 3D из DOM и Mahjong на нём.

Медиа

• Как стать мастером маршрутизации в React - автор убеждает, что TanStack Router — это будущее маршрутизации в React-приложениях, особенно для тех, кто устал от ограничений React Router v6/v7 и хочет типобезопасность, производительность и масштабируемость

• Хранилище, роутинг и будущее Vue - Эдуардо Сан Мартин Мороте — член основной команды Vue.js и создатель Pinia — рассказывает про философию Pinia, проблемы поддержки инфраструктуры, используемой миллионами разработчиков, и будущее управления состоянием, маршрутизации и реактивности. Вы узнаете, почему был создан Pinia, чем он превосходит Vuex и как разработчики ищут баланс между инновациями и долгосрочной стабильностью экосистемы.

AI

• Next.js и агентное будущее - В течение последнего года мы занимались улучшением работы агента Next.js. За это время мы разработали и прекратили поддержку агента, работающего в браузере, внедрили интеграцию с MCP и поняли, что настоящий ключ к улучшению поддержки агентов — это взгляд с точки зрения самого агента.

• Мы неправильно пользуемся AGENTS.md по мнению директора Google Cloud AI Эдди Османи. Он рассказывает, как лучше структурировать, как уменьшить объём контекста по умолчанию и почему нужно создавать несколько отдельных агентских инструкций.

• В эпоху вайб-кодинга всё ещё необходимо учиться программировать. Так считает председатель техкомитета NodeJS, разработчик fastify и не только Маттео Коллина, и в статье обстоятельно защищает этот тезис.

• Посмотрите, как развивались LLM за последние 10 лет!

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

• Статья на Auth0 объясняет, какие новые уязвимости появляются в агентных приложениях и почему классический список угроз OWASP нужно адаптировать под автономных агентов. В ней разбираются ключевые моменты для таких систем: атаки через подсказки (prompt injection), злоупотребление инструментами агента, чрезмерные права доступа и риски цепочек действий, когда ИИ может выполнять реальные операции.

• В новом релизе Firefox 148 появляется setHTML() метод, призванный безопасно заменить innerHTML. Этот механизм снижает риск XSS атак без необходимости использовать санитайзеры.

Браузеры

• В блоге разработчиков Chrome вышла статья о том, как в Blink реализована спецификация CSS corner-shape. Автор разбирает, как движок рендеринга вычисляет геометрию углов и какие компромиссы пришлось реализовать ради производительности и совместимости.

CSS

• Предложенный псевдокласс :near(distance) будет реагировать на приближение указателя до наведения на элемент, и в статье разбираются возможные UX паттерны с его использованием. Интересно, но сильно на будущее.

• Крис Койер разделяет мнение Девида Бушелла про скролл-фейд, и предлагает вместо скролл фейда простую симпатичную анимацию в несколько строк CSS.

• х86 процессор на CSS и HTML без JS! Полнота по тьюрингу, и даже можно запустить свою программу, скомпилировав по инструкции в README.

JS / TS

• Цифровые "излишки" и зелёный дизайн - задумывались ли вы, как ваши интерфейсы влияют на планету?

• Полифил для позволит воспроизвести работу этого элемента за пределами Safari с учётом accent-color и других нюансов.

• Релиз бета-версии Typescript v6, последнего релиза, написанного на Javascript. Следующая мажорная версия будет уже на Go.

• Прошёл месяц с релиза TSSLint v3, самого легковесного typescript линтера по версии автора инструмента, который обещает мгновенную диагностику и исправления, а также максимальную гибкость и расширяемость. Поддерживает в том числе и кастомные расширения файлов (tsx|vue|astro).

• Шаблоны работы с асинхронным кодом собрал Габор Коос в статье на Hackernoon, сравнивая старые подходы и новые, на базе AbortSignal и AbortController.

A11y (доступность)

• Девид Бушелл не смог ответить, работает ли .visually-hidden версии 2026, и оказалось, что всё не так просто. Дэвид исследовал множество материалов с 2004 года, ещё до создания WCAG!

React

• AI пишет React-код быстрее, чем ты читаешь… но без React Doctor он оставляет дыры для хакеров - React Doctor — это open-source CLI-инструмент (от команды Million.js / millionco), который сканирует React-кодовую базу и автоматически диагностирует типичные проблемы: антипаттерны, performance-issues, accessibility-проблемы, архитектурные косяки и критические security-уязвимости.

• Создаёте свой инструмент для управления проектами на react? - SVAR React Gantt — современный, высокопроизводительный Gantt-компонент специально для React-приложений

• Когда RSC тормозит ваше приложение: в статье разбираются типичные ошибки при работе с серверными компонентами. Автор учит, как правильно организовать серверные и клиентские части, как работать с кешем и прочее.

Angular

• Обновление PrimeNG с версии 19 до 21: критические изменения, о которых вам нужно знать - Если вы обновляете своё Angular-приложение до версии 21, вам также потребуется обновить PrimeNG до версии 21. Это обновление вносит некоторые критические изменения, которые могут повлиять на ваше приложение.

• Taiga UI CDK v4.72.0 - исправлены точность tuiSum с десятичными числами, размеры иконки/placeholder в Textfield (S), видимость выбранного текста в выпадающем списке, добавлен приятный delay скролла в tuiInputChip и слежение за font-size перенесено только на :root.

Vue js

• Документация Nuxt теперь на русском - если вам удобнее изучать Nuxt на русском языке, то добро пожаловать.

• Ускорение работы приложений Nuxt с помощью VueUse - если вы разрабатываете приложения на Nuxt и ещё не используете VueUse, вы, вероятно, создаете себе сложности там, где не нужно.

3D и анимации

• WebGL и композитный рендериг: как обеспечить плавность переходов на ThreeJS.

• voxCSS - движок для 3D из DOM элементов собрал уже почти 400 звёзд за 2 месяца! Ранее такие сцены создавались только на canvas, теперь же можно использовать DOM. Очень интересный исходный код, а в README есть ссылки на демо. А ещё можно поиграть в Majong на этом движке тут.

Разное

• Интернет 90х был не самым красивым, но живым. Луиза Норм ностальгирует о старом вебе, об уникальности разных сайтов и приложений, о хаосе и красоте.

• Штраф Амазон на 2.5 млрд долларов за "тёмные паттерны" дизайна (ошибки нет, действительно такая сумма) впечатляет. Это повод проверить "на честность" свои продукты, особенно читателям из зарубежных компаний. В статье даётся чеклист паттернов и советы по устранению возможных проблем.

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