✨Новый стандарт доступности

Реализация доступных компонентов по стандартам W3C требует значительных усилий и глубокой экспертизы.

Начиная с Angular 21, эту задачу упрощает официальный пакет @angular/aria — коллекция headless-директив, реализующих распространенные паттерны WAI-ARIA.

Директивы берут на себя обработку клавиатурных взаимодействий, управление ARIA-атрибутами, фокус-менеджмент и поддержку скринридеров. От вас требуется лишь HTML-структура, CSS-стили.

👉https://angular.love/angular-aria-a-new-standard-for-building-accessible-components

✨ Нативная защита от XSS

Недавняя XSS-уязвимость в Angular отличный повод вспомнить о современных нативных браузерных API, которые помогают защитить приложения от внедрения вредоносного кода.

Речь идет о связке технологий Sanitizer API и Trusted Types. Они органично дополняют друг друга: Sanitizer API позволяет безопасно создавать DOM-деревья, а Trusted Types гарантирует, что в небезопасные места DOM будет попадать только проверенный контент.

👉 https://habr.com/ru/companies/timeweb/articles/965142/

✨ Снапшот-тесты Angular-компонентов в Vitest

По умолчанию снапшот Angular-компонента в Vitest свалка из сотен тысяч строк внутренностей.

Чтобы получить читаемый снимок, нужно передавать в toMatchSnapshot() fixture.nativeElement. Но даже тогда в снапшот просачиваются Angular-специфичные артефакты.

Решение, подключить кастомные сериализаторы из jest-preset-angular прямо в vitest.config.ts через опцию snapshotSerializers.

👉 https://timdeschryver.dev/blog/improve-the-quality-of-your-angular-component-snapshots-with-vitest

✨ Новые возможности для <dialog>

В веб-стандартах продолжается тренд на перенос UI-логики из JavaScript в нативный HTML.

ToggleEvent.source: свойство доступное только для чтения, является экземпляром объекта Element, представляющим HTML-элемент управления поповером, который инициировал переключение.

Атрибут closedby: декларативно задает правила закрытия элемента <dialog>.

Эти нововведения позволяют управлять поведением элементов более декларативно, избавляя разработчиков от написания лишнего бойлерплейта для обработки базовых пользовательских сценариев.

👉 https://habr.com/ru/companies/timeweb/articles/984310

✨ Signal Forms

Недавний опрос показал интересную статистику, только 10% читателей уже внедрили Signal Forms в свои проекты. Похоже, многие пока не спешат использовать их, возможно, из-за того, что функция все еще находится на стадии эксперимента. Самое время это исправить.

Для Angular это одно из самых значимых обновлений последних лет.

Signal Forms предлагают легковесную и нативно реактивную альтернативу классическим формам, заменяя громоздкие абстракции на простой декларативный API, построенный поверх сигналов.

Например, схема данных теперь описывается простым способом через функцию form(). Появилось свойство errorsSummary, которое позволяет быстро понять, какие поля невалидны. А при создании кастомных контролов больше не нужно возиться с перегруженным ControlValueAccessor.

👉 https://blog.logrocket.com/angular-signal-forms/

✨ Dictionary Compression

Браузеры и серверы получили полноценную поддержку словарного сжатия, и результаты впечатляют. Бандл YouTube для повторных посетителей уменьшается на 90% по сравнению с обычным Brotli.

Идея проста, клиент и сервер договариваются об общем словаре, например, предыдущей версии бандла. Сжатый ответ содержит не исходные данные, а лишь ссылки на фрагменты словаря плюс изменившиеся байты, фактически эффективная доставка дельты.

👉 https://httptoolkit.com/blog/dictionary-compression-performance-zstd-brotli/

✨Agent Skills в Claude

Если вы используете Claude Code для работы с Angular и замечаете, что он генерирует устаревший код. Проблема в том, что модель обучена на коде определённого времени, а Angular развивается быстро.

Agent Skills решают эту проблему, предлагая структурированные инструкции, которые говорят, как именно писать код в вашем проекте. Чтобы не писать все с нуля, можно использовать уже готовые скиллы от создателя AnalogJS. А при создании собственных навыков важно быть кратким. Claude уже знает Angular, ему нужны только ваши специфичные решения.

👉 https://angular.love/agent-skills-in-claude-a-practical-guide-for-angular-developers

✨ Тысячи кликов в день

Туннельный синдром встречается у нескольких процентов населения, но среди людей с постоянной нагрузкой на кисти риск существенно выше.

Из-за длительной нагрузки в запястье возникает отек, который сдавливает срединный нерв. Типичные симптомы: покалывание, онемение, снижение чувствительности, ночные пробуждения из-за затекшей руки, снижение силы кисти.

Что можно сделать уже сейчас: перерыв каждые 40–60 минут, разминка для кистей, нормальная эргономика рабочего места. Первые симптомы сигнал идти к врачу, а не ждать, пока начнут выпадать предметы из рук.

👉 https://habr.com/ru/companies/smclinic/articles/1006952/

✨ Современный HTML и CSS

Сегодня разбираем пять нативных инструментов, которые заменят старые костыли.

Вот что стоит взять в работу прямо сейчас:

Элемент <search>: Семантическая разметка для областей поиска и фильтрации. Скринридеры корректно распознают его как поиск.

Атрибут inert: Инструмент для надежного отключения целых групп интерактивных элементов, который полностью исключает элементы из дерева доступности.

Новые viewport-единицы (dvh, svh, lvh и др.): Элегантное решение классической проблемы мобильной верстки, когда стандартный 100vh не учитывает динамически скрывающиеся панели интерфейса браузера.

Элемент <dialog>: Нативный тег для создания модальных окон, который должен прийти на замену бесконечным div. Плюс, поддержка атрибутов commandfor и command открывает возможность реализовать модалку вообще без JavaScript.

Свойство inset: Шорткат для одновременного задания top/right/bottom/left.

👉 https://habr.com/ru/companies/ruvds/articles/1006540/

✨ Рецепт пельменей получил оффер на фронтендера

Современные системы автоматизированного найма зачастую отдают приоритет совпадению ключевых слов, полностью игнорируя смысловой контекст.

Шуточное резюме, с рецептом варки пельменей, успешно прошло ИИ-скрининг и привело к реальному собеседованию с последующим предложением оффера на позицию frontend-разработчика.

А у вас были похожие истории со странными офферами? Делитесь в комментариях.

Кстати, у Angular есть свой чат для поиска работы @angular_jobs 👀

👉 https://habr.com/ru/news/1009356/

✨ Релиз Vite 8.0

Вышел стабильный релиз Vite 8. Главное изменение, переход на Rolldown, единый бандлер на Rust, который заменяет прежний дуэт esbuild + Rollup. Это самая значимая архитектурная переработка со времен Vite 2.

Основные моменты:

Скорость сборки. В бенчмарках Rolldown в 10–30 раз быстрее Rollup при сопоставимой производительности с esbuild.

Совместимость. Rolldown реализует тот же Plugin API, что и Rollup, поэтому большинство существующих плагинов работают без изменений.

Улучшенный DX. В Vite 8 интегрированы собственные Devtools для глубокого анализа проектов.

👉 https://main.vite.dev/blog/announcing-vite8

🚨 Осторожно: фейковые вакансии с вредоносным ПО!

Недавно злоумышленник разместил поддельное тестовое задание в @angular_jobs. Мы оперативно удалили вакансию, но попытки могут повториться, и эта ситуация, отличный повод напомнить всем о базовых правилах безопасности при поиске работы.

Запуская чужой код (даже обычный npm install) на своей рабочей машине, вы сильно рискуете. Это может привести к потере доступов к вашим аккаунтам, исходным кодам, SSH-ключам, сохраненным паролям, сессиям Telegram и криптокошелькам.

Чтобы обезопасить себя, всегда запускайте проекты от непроверенных источников только в изолированной среде.

Также профиль пользователя можно проверить через @oLolsBot. Нужно прислать его username или уникальный идентификатор. Если аккаунту всего несколько месяцев и он состоит в двух-трех чатах, это серьезный повод насторожиться.

Будьте бдительны.

✨ Безопасность в приложениях Angular

Angular предоставляет механизмы защиты из коробки, но проблемы начинаются там, где разработчик игнорирует векторы атак.

Статья выделяет несколько способов защиты:

XSS и санитизация.
Angular фильтрует опасный код, но методы DomSanitizer (bypassSecurityTrustHtml или bypassSecurityTrustUrl) сводят эту защиту к нулю.

Токены и авторизация.
localStorage удобен, но уязвим к XSS. HttpOnly-куки надежнее, но требуют настройки SameSite против CSRF.

CSP как последний рубеж.
Правильно настроенный Content Security Policy в большинстве случаев блокирует выполнение инжектированных скриптов даже при наличии XSS-уязвимости, существенно снижая риск ее эксплуатации.

Уязвимости фреймворка и npm.
Для снижения рисков необходимо обновлять зависимости, проводить аудит безопасности и отслеживать известные уязвимости.

👉 https://angular.love/security-in-angular-applications-what-every-developer-should-know

✨ Signal Forms продолжают улучшаться

Signal Forms в Angular все ближе к production-ready состоянию. В версии 21.2 команда Angular добавила несколько важных улучшений.

provideSignalFormsConfig: новый конфиг позволяет задавать CSS-классы для контролов в зависимости от их состояния.

focusBoundControl: метод для программного управления фокусом. Он особенно удобен в связке с errorSummary, теперь можно легко перевести фокус на первое невалидное поле при попытке отправки.

Директива [formRoot]: вешается на HTML-элемент <form>, автоматически связывает инстанс формы с шаблоном и берёт на себя обработку события submit.

Логика сабмита теперь описывается прямо внутри конфигурации формы через опции action и onInvalid.

👉 https://timdeschryver.dev/blog/angular-signal-forms-keeps-improving

✨ Angular Signal Forms: плавная миграция с Reactive Forms

Поскольку Reactive Forms никуда не исчезают и будут поддерживаться еще долго.

Чтобы не переписывать все разом, Angular предоставляет два инструмента совместимости, позволяющих использовать оба подхода.

SignalFormControl позволяет использовать контролы на основе сигналов внутри стандартных FormGroup или FormArray. А compatForm работает в обратную сторону, это версия функции form, которая принимает реактивные контролы как часть данных.

👉 https://www.angulararchitects.io/blog/migrating-to-angular-signal-forms-interop-with-reactive-forms/

✨ Переход с Moment.js на Temporal API

JavaScript наконец получает нормальный встроенный инструмент для работы с датами и временем. Temporal API новый стандарт, который закрывает пробелы старого Date API и решает проблемы, из-за которых разработчики годами тянули в проекты сторонние библиотеки.

В статье рассматриваются причины отказа от популярных библиотек прошлого и предлагаются практические рецепты для миграции на современный API.

👉 https://www.smashingmagazine.com/2026/03/moving-from-moment-to-temporal-api/

✨ Вышел TypeScript 6.0

В релизе добавили несколько полезных фич:

Умный вывод типов для методов без this. Теперь TS учитывает использование this при определении того, является ли функция контекстно-зависимой. Если this нигде в функции не используется, она больше не считается контекстно-зависимой. Компилятор не откладывает ее анализ на потом, а сразу использует как источник информации о типах.

Новый флаг --stableTypeOrdering. Приводит порядок типов в 6.0 к поведению 7.0, и помогает выявить расхождения при миграции.

Ряд настроек получил новые дефолты: strict - true, module - esnext, target - es2025 и не только, полный список в статье.

Поддержка новых стандартов и API: Temporal, RegExp.escape, Map.getOrInsert и другие stage 4 proposal'ы.

👉 https://devblogs.microsoft.com/typescript/announcing-typescript-6-0/

✨ Команда Angular выпустила официальные скиллы для AI-ассистентов

Теперь они умеют:
🚀 Создавать новые приложения через Angular CLI
🧩 Генерировать компоненты, сервисы и модули
⚡️ Работать с современной реактивностью: signals, linkedSignal, resource
🛠 Давать архитектурные рекомендации по формам, роутингу, SSR, DI, анимациям, Tailwind CSS, тестированию и доступности

👉 https://github.com/angular/skills

✨ Чистые функции в html шаблонах Angular

Начиная с Angular 21.2, в HTML-шаблонах можно использовать чистые JS-функции напрямую, без объявления методов в классе компонента.

Несмотря на удобство, фича остается дискуссионной. Классические подходы диктуют минимизацию логики в шаблонах для улучшения читаемости. Кроме того, остается открытым вопрос производительности.

Чтобы избежать пересоздания функций при каждом цикле change detection, компилятор применяет несколько оптимизаций:

Если стрелочная функция обращается только к своим собственным параметрам, она выносится в константу верхнего уровня и передается по всем местам использования.

Если стрелочная функция обращается к контексту шаблона, она сохраняется во вью и при необходимости читается из него.

👉 https://habr.com/ru/articles/1013922/

✨ 10 Web-API, заменяющих многие библиотеки JavaScript

Браузеры активно обрастают функционалом, делая многие привычные npm-зависимости неактуальными. Разработчики часто по инерции продолжают тянуть в проекты сторонние библиотеки, хотя нативные API уже отлично справляются с теми же задачами из коробки.

Отказ от лишних пакетов в пользу встроенных решений дает 0 КБ дополнительного веса в бандле.

👉 https://habr.com/ru/articles/1015134/