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

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

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

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

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

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

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

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

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

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

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

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

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

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

✨ Память в JavaScript

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

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

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

✨ Вышел 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

🚨 Безопасность в 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

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

Реализация доступных компонентов по стандартам 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