🦊 Angular Fox 🚀 — русскогорящие новости сообщества

✨ Современный 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/

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

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

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

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

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

✨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

✨ Dictionary Compression

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

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

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

✨ Signal Forms

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

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

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

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

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

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

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

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

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

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

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

✨ Снапшот-тесты 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

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

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

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

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

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

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

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

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

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

🚨 Безопасность в Angular

Команда Angular выпустила патчи для двух уязвимостей в SSR.

SSRF и Header Injection: SSR некорректно доверял заголовкам Host и X-Forwarded-*. Это позволяло произвольно перенаправлять внутренние запросы.

Open Redirect через X-Forwarded-Prefix: логика нормализации URL удаляла только один ведущий слеш. Это позволяло атакующим проводить масштабные фишинговые атаки и SEO hijacking.

Помимо SSR-уязвимостей, была закрыта XSS-уязвимость в интернационализации (i18n).

Вектор атаки нестандартный. Атакующий не может эксплуатировать уязвимость напрямую. Он должен сначала получить доступ к файлу переводов. Тем не менее в реальных проектах с внешними переводчиками это вполне реалистичный сценарий.

👉 https://blog.angular.dev/security-advisory-addressing-recent-vulnerabilities-in-angular-c2656249b799

✨ Вышел Angular 21.2

Второй минорный релиз получился очень насыщенным.

Ключевые нововведения:

Теперь в шаблонах можно использовать стрелочные функции.

Для блоков управления потоком @switch добавлена строгая проверка типов с помощью @default never. Компилятор выдаст ошибку, если обработаны не все возможные значения.

Добавлен алиас ChangeDetectionStrategy.Eager взамен устаревшему Default. В следующем мажорном релизе дефолтной стратегией станет OnPush.

Signal Forms получили сразу несколько улучшений: директиву FormRoot для декларативной привязки формы и логики сабмита, утилита transformedValue для синхронизации значения с моделью, а также SignalFormControl для миграции с Reactive Forms.

В Resource API появился сигнал snapshot(), возвращающий объект со статусом и значением/ошибкой, а также resourceFromSnapshots() для преобразования снапшота обратно в Resource.

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

👉 https://blog.ninja-squad.com/2026/02/26/what-is-new-angular-21.2

✨ Память в JavaScript

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

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

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

✨ Избавляемся от утечек памяти

В Angular 21.1 появилась экспериментальная фича withExperimentalAutoCleanupInjectors. Решающая давнюю проблему утечек памяти, связанную с роутингом.

По умолчанию Angular не уничтожает инжекторы отсоединенных маршрутов, даже если они больше не хранятся в RouteReuseStrategy.

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

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

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

✨ Шпаргалка по поиску узких мест в Linux

Для эффективного анализа производительности недостаточно просто открыть top. Необходимо понимать, на каком уровне возникла деградация: приложения, ядро, файловая система, диски, сеть, CPU, память, аппаратный уровень.

Каждый уровень имеет свой набор инструментов. Диагностику стоит вести сверху вниз: от приложения к железу, последовательно исключая слои. Если на уровне приложения все чисто, идем глубже. Такой подход экономит время и исключает ложные версии.

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

✨ Новые реактивные формы в Angular

Астрологи объявили неделю Signal Forms, количество постов о формах увеличилось вдвое.

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

👉 https://habr.com/ru/companies/tbank/articles/1000906/

✨ Основы Signal Forms

Если Reactive Forms всегда ощущались как отдельный мир внутри Angular, то Signal Forms органичная часть сигнальной модели, которую команда последовательно развивает.

В статье разбираются ключевые аспекты: построение формы, подключение полей в шаблоне, встроенные и кастомные валидаторы, cross-field валидация, управление отправкой и сброс формы.

👉 https://angularexperts.io/blog/signal-forms-essentials

✨ A11Y как архитектурный фундамент UI

Спецификации WAI-ARIA и обеспечение доступности не просто чек-лист для адаптации продукта под пользователей с ограниченными возможностями, а строгая архитектурная система. Она позволяет проектировать компоненты интерфейса, опираясь на их поведение и функции, а не на внешний вид.

Переход к спецификациям и конкретным ролям (например, dialog, alert, alertdialog) избавляет команду от путаницы в терминах. Такой поведенческий подход естественно ложится на концепцию Headless UI: сложная логика инкапсулируется и полностью отделяется от визуального слоя.

👉 https://dev.to/artalar/a11y-is-ui-architecture-2ibn

✨ Signal inputs и setInput: не пропусти при миграции

С выходом Angular 17.1 появились signal inputs, а в 19-й версии они получили статус стабильных.

Автоматическая миграция через schematic кажется простой, но в ней есть неочевидный баг, который не выдает никаких ошибок и легко ускользает при code review.

👉 https://habr.com/ru/companies/skyeng/articles/996814/

✨ WebMCP

Google и Microsoft представили WebMCP. Стандарт, который позволяет веб-разработчикам регистрировать JavaScript-функции прямо в браузере как инструменты (tools) для ИИ-агентов.

Идеологически это наследник MCP от Anthropic, но перенесенный на клиентскую сторону.

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