javascript

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

  • пятница, 13 марта 2026 г. в 00:00:13
https://habr.com/ru/articles/1009296/
Frontend Status: Привет! Свежий дайджест фронтенда и AI
Frontend Status: Привет! Свежий дайджест фронтенда и AI

Привет!

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

В этом выпуске — CodePen 2.0 и клон Loom на Next.js в видео; про AI: почему коллекция промптов не заменяет мышление, автоисследования на игровом PC и онбординг через Oncode. Безопасность в центре: Clinejection (4000 машин через GitHub-issue), как GitHub защищает агентские воркфлоу, укорочение срока жизни TLS-сертификатов, веб-агенты, сливающие данные пользователей, и 22 CVE в Firefox после проверки кодовой базы Claude. В CSS — все способы выбрать <html>, война z-index и подводный камень Anchor Positioning; в JS — когда пора переходить на Rust, разбор requestAnimationFrame и постмортем npm-червя Shai-Hulud. По фреймворкам: ретро-компоненты и cron-генератор в React, микрофронтенды в Angular 21. Веб-стандарты: обновление WCAG 3 и отчёт TC39 про ES2026. Браузеры: Chrome переходит на двухнедельные релизы, Edge предлагает атрибут focusgroup. Плюс VS Code 1.111 с инфраструктурой для Copilot-агентов, «убедительный дизайн» и усталость от токенов, TDD в эпоху AI, элемент <geolocation>, AT Protocol под капотом Bluesky и запуск Cursor-агентов из Telegram.

🎬 Видео

  • Выход Codepen 2.0: Крис Койер размышляет о пути сервиса. В этом выпуске CodePen Radio Крис Койер и Алекс обсуждают запуск CodePen 2.0, рассказывая о пути его разработки, необходимости создания расширяемой системы, важности пользовательского опыта, новом компиляторе и блоках, а также о потенциальной роли AI в улучшении платформы.

  • Clone Loom на Next.js В этом курсе мы создадим полноценный клон Loom с адаптивной потоковой передачей видео, записью экрана, AI-функциями и безопасным доступом, используя Mux, Next.js 15 и современные веб-технологии.

🤖 AI

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

🎨 CSS

  • Сколько существует способов выбрать <html> в CSS и зачем это вообще знать? Дэниел Шварц разбирает все варианты от очевидного html {} и привычного :root {} до экзотических :has(body), :not(* *) и даже голого & вне вложенности. Большинство выглядят курьёзно, но по дороге мы узнаем, чем отличается специфичность псевдоклассов, что :scope семантически точнее, чем :root для CSS-переменных, и вспомним Lobotomized Owl паттерн: :not(* > *).

  • Амит Шин разбирает, почему в крупных проектах z-index превращается в гонку вооружений между командами, и предлагает лечение: токенизация слоёв через CSS-переменные (--z-toast: 100, --z-overlay: 300). isolation:isolate учтён!

  • Крис Койер ошибался в CSS Anchor Positioning! Точнее, считал, что якорь и позиционируемый элемент могут находиться где угодно в DOM, но, оказывается, нет: якорь обязан быть полностью отрендерен раньше, а в идеале — быть сиблингом и стоять первым.

⚡ JS / TS

  • Теймур Гасанов строит быстрый инструмент сравнения скриншотов и упёрся в потолок JavaScript. После того как двухпроходный алгоритм дал 72–88% прироста на чистом TypeScript, дальше оптимизировать было нечего: паузы сборщика мусора, отсутствие SIMD и накладные расходы V8 стали непреодолимой стеной. Решение — переписать ядро на Rust!

  • Солидный справочный разбор requestAnimationFrame — почему setTimeout для анимаций ломает плавность, как rAF встраивается в цикл отрисовки браузера, примеры для React и Vue. Отдельно разбирается паттерн rAF -> setTimeout для улучшения INP: показываем обновление UI сразу, а тяжёлую работу откладываем на следующий кадр. В конце - сравнительная таблица всех scheduling API: rAF, requestIdleCallback, scheduler.yield, scheduler.postTask.

  • npm-червь: компания Trigger.dev опубликовала постмортем об атаке Shai-Hulud. В этом посте компания Trigger.dev подробно рассказывает, как стала жертвой атаки через npm-червя Shai-Hulud: от взлома машины инженера и 17-часовой разведки до 10 минут разрушительных действий в GitHub-репозиториях, а также делится опытом восстановления, техническими деталями работы вредоноса и ключевыми уроками по усилению безопасности.

⚛️ React

  • 8bitcn/ui: 50+ Ретро компонентов — проект с открытым исходным кодом, предлагающий набор 8-битных компонентов.

  • Компонент для создания выражений cron — бесплатный визуальный конструктор cron-выражений с открытым исходным кодом, поддерживающий форматы Unix и Quartz, с предпросмотром в реальном времени и доступный в виде React-компонента.

🅰️ Angular

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

🌎 Браузеры

🛠️ Инструменты

  • VS Code 1.111 — Copilot-агенты обрастают инфраструктурой — рекурсивный поиск *.instructions.md, agent-scoped chat hooks в frontmatter, новая команда /troubleshoot для дебага самого агента (сколько токенов, какие кастомизации загружены), OpenTelemetry-трейсинг чата. Из не-AI: Go to Definition на строки локализации %config.settingName% в package.json, корректный рендер CJK-пунктуации, vim-like foldedLine для cursorMove.

🎨 UI|UX и дизайн

📦 Разное

  • Крис Фердинанди всю карьеру ненавидел тесты — потому что тестировал реализацию вместо inputs/outputs, и писал тесты после кода, когда они уже ничего не давали. Переход на TDD (сначала тесты, потом код) и отказ от метрики code coverage полностью изменили картину, и теперь его Playwright-тесты ловят регрессии при рефакторинге, кроссбраузерные баги и неожиданные взаимодействия между компонентами раньше, чем он успевает об этом подумать. Кстати, TDD в эпоху AI-generated кода - крайне актуальная парадигма.

  • Крис Койер разбирает странную природу элемента <geolocation> — текст и иконку нельзя менять, часть CSS молча игнорируется, часть — ограничена капами, а часть применяется, но тогда кнопка просто перестаёт работать. Браузер впервые принудительно следит за тем, чтобы элемент нельзя было спрятать и обмануть пользователя.

  • Дэвид Бушелл разбирает AT Protocol (технологию под капотом Bluesky) и объясняет её преимущество: все данные хранятся на личном сервере пользователя (PDS), их можно перенести в любой момент, а один аккаунт работает сразу в нескольких приложениях (Bluesky, Leaflet, Tangled). Девид уже построил на этом своё приложение и по ходу объясняет, как устроена OAuth-авторизация через PDS и почему AT Protocol делает сценарий «убить сторонние приложения как Twitter» технически затруднительным.

  • Агенты Cursor через Telegram с помощью cursor-tg!

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