Привет!

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

В этом выпуске — 30+ ссылок: разбираем, почему Angular живёт в банках и корпорациях, AGENTS.md vs skills в Next.js. Плюс CSS, который заменяет десятки строк JS, React Compiler от А до Я, Vue-слоты и Regle, вайбкодинг-исповедь «я сдался», WebGL-галерея на GSAP + Three.js, и ещё много всего интересного!

Видео

• ANGULAR против REACT | Зарплаты, кризис в IT и почему корпорации остаются на Angular | Олег Щёголев - Angular всё ещё живее всех живых: в подкасте Олег Щёголев честно разбирает, почему банки, корпорации и госсектор выбирают именно его вместо хайпового React, сколько на нём реально зарабатывают в кризис, и почему для новичков это может оказаться самым простым и мощным стартом во фронтенде — без воды и заумных терминов.

• Bun за 3 минуты - Bun — это среда выполнения JavaScript, менеджер пакетов и средство запуска тестов, разработанное как полноценная замена Node.js, узнайте за несколько минут о возможностях Bun.

• Видео-гайд по CSS для сильного буста перформанса веб-приложений опубликован в ютуб-канале LogRocket.

AI

• Топ 10 UI-паттернов для работы с ИИ-агентами в 2026 - В 2026 интерфейсы с ИИ-агентами эволюционировали от простых чатов к полноценным системам. Вот 10 ключевых паттернов, которые уже используют CopilotKit, Claude, Perplexity и другие.

CSS

• Оптические иллюзии на CSS - Коллекция из более чем 50 оптических иллюзий, созданных с помощью CSS (и немного HTML).

• Крис Коер опубликовал заметку о разнице селекторов :has(:not(img)) и :not(:has(img)), также в статье разбирается ещё пара нюансов со ссылками на блоги других CSS авторов.

• Современный гайд по созданию анимированного аккордеона на CSS опубликовал Красимир Цонев. Ранее приходилось сильно больше изворачиваться, теперь же задача решается просто!

• Ахмада Шадида раздражает кривой адаптив, и он советует как следует продумать адаптивность заранее, используя CSS для естественной адаптации интерфейсов.

JS / TS

• JavaScript-фреймворки: тренды и будущее 2026 - В 2026 году JavaScript-фреймворки эволюционируют в сторону AI-first подхода, изоморфных архитектур и асинхронности как основы, где Remix 3 выделяется как радикальный перезапуск full-stack разработки с упором на простоту и генерацию кода ИИ, а SvelteKit, SolidStart и TanStack Start продвигают мощные изоморфные паттерны, в то время как React стабилизируется, но сталкивается с конкуренцией от более лёгких и производительных альтернатив.

React

• AGENTS.md vs skills на примере Next.js - Jude Gao из Vercel: 8 КБ файл AGENTS.md даёт ИИ-агентам 100% успеха на Next.js, в отличие от skills, которые часто вообще игнорируются.

• Паттерн Focus Trap в доступности интерфейсов A11y - Focus-trap-react — React компонент, который запирает фокус клавиатуры внутри модального окна, диалога или любого оверлея, делая интерфейс по-настоящему доступным для людей, управляющих только Tab и клавиатурой.

• Гайд с практическим примером по Cache Components в Next.js 16 показывает, как смешивать статический и динамический контент на одной странице, избегая полной перезагрузки, и показывает прогрес от медленного рендеринга к мгновенному отображению контента страницы с прогрессивной подгрузкой.

• Полный гайд по React Compiler: как, когда использовать, плюсы и минусы, от А до Я.

Vue js

• useSlots() во Vue - зачем и кому - что такое useSlots, когда и как использовать слоты, а также практические примеры для разъяснения назначения useSlots.

• Валидация форм с Regle - следующая ступень в воспросах валидации после Vuelidate. Если вы когда-либо создавали формы и писали повторяющуюся логику валидации, сталкивались со сложными состояниями, ошибками или потерей типобезопасности, Regle — неплохое решение.

A11y

• Доступность вложенных интерактивных элементов -Современный CSS позволяет имитировать вложенные интерактивные элементы, расширяя область клика главной кнопки по всему контейнеру без реальной вложенности в DOM, чтобы сохранить полную доступность и удобство для всех пользователей.

Разное

• 2 года Вайбкодинга — и я сдался: вернулся к нормальному коду - Два года вибекодил на ИИ — и понял: это чистый слоп, который выглядит круто в PR, но рушит весь проект, поэтому вернулся писать код руками — и стал быстрее, точнее и креативнее

• Библиотека Travels - Быстрая, независимая от фреймворков библиотека для отмены/повтора действий (undo/redo). Эти функции важны для текстовых редакторов, графических приложений, конструкторов форм и любых интерактивных приложений. В отличие от традиционных систем отмены, которые копируют целые объекты состояния для каждого изменения, Travels хранит только различия, что делает его в 10 раз быстрее и более эффективной с точки зрения использования памяти.

• JSbenchmarks - новая попытка провести сравнительный анализ производительности нескольких популярных JavaScript-фреймворков.

• Как выбирать иконки для сайта? - существует множество бесплатных и платных библиотек иконок, настолько много, что можно утонуть в море вариантов. Брать детализированные картинки или уйти в абстракцию? Разноцветные или монохром? Как сочетать разные иконки на сайте?

• Chrome DevTools MCP + Gemini разбирает performance trace и даёт точные фиксы за секунды - В статье показывают, как Chrome DevTools MCP сервер позволяет Gemini/Claude запускать Chrome, записывать performance trace, анализировать Core Web Vitals (LCP, CLS, TBT) и предлагать реальные оптимизации — от preload изображений до defer скриптов — прямо в чате, ускоряя дебаг в разы даже на локалхосте.

• OpenClaw Skill для фронтенда - Этот скилл OpenClaw творит настоящую магию: генерит уникальные, production-ready фронтенд-интерфейсы с топовым дизайном, которые выглядят как работа крутого дизайнера + разработчика. Просишь компонент, страницу или целое приложение — получаешь креативный, отточенный код без шаблонной эстетики ИИ.

• Проект заметки "Использование криптографии в веб-стандартах" опубликовала группа по вопросам безопасности W3C. По сути данный документ представляет собой руководство по криптографическим алгоритмам и их применению в ряде сценариев.

• Что за стандарт JPEG XL, его особенности и перспективы разобрал Аарон Грог в блоге DebugBear. В статье утверждается, что это лучший формат для изображений, но пользоваться пока не стоит :)

• Cloudflare публикует статью о несправедливом преимуществе Google в AI благодаря единому краулеру Googlebot, который используется как для индексации поиска, так и для обучения и генерации AI-контента (например, AI Overviews). Из-за доминирования Google в поиске (90% рынка в UK) издатели не могут заблокировать Googlebot без потери трафика, что позволяет Google бесплатно собирать контент для AI, в то время как конкуренты (ClaudeBot, GPTBot и др.) получают в 2–1700 раз меньше данных.

• Как создать многостраничную WebGL-галерею изображений с эффектами раскрытия по скроллу через шейдеры рассказано в статье Creative Hub Codrops. Автор использует интересную связку технологий для современного веб-проекта: GSAP (с ScrollTrigger) для анимаций, Three.js для WebGL-рендера, Astro как фреймворк для сборки и Barba.js для SPA-подобных переходов без перезагрузки.

• Любите рекламу? Тогда воспользуйтесь расширением, добавляющим рекламу даже на те сайты, где её нет!

• Красивая визуализация геномов бактериофагов (т.е. вирусов, пожирающих бактерии), доступна прямо в браузере. Основная цель проекта — позволить интерактивно просматривать, анализировать и изучать структуру фагового генома прямо в браузере, без необходимости скачивать сложные программы или иметь навыки программирования. Симпатично, но мало чего понятно.

• Ориентация карточек в интерфейсе — не просто визуальный стиль, а фундаментальное решение, которое влияет на восприятие, сканирование, плотность информации, адаптивность и пользовательское взаимодействие. Полезно не только дизайнерам, но и разработчикам, заботящимся о пользователях.

• Если вы забыли про хэш-деревья, то можно по одной статье восстановить или получить знания. Статья с юмором даёт полный гайд о применении их в реальной жизни.

• Вышел новый DSL язык программирования для создания музыки. Предлагаем новую парадигму программирования, пока не запантентовано: Emotion-Rhytm Paradigm!

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