🦊 Angular Fox 🚀 — русскогорящие новости сообщества
4.15K subscribers
1.41K photos
7 videos
1.27K links
Как костыль на реактивно-лисьей тяге 🔥🦊

Нравится канал? Подпишись на меня!
👉 twitter.com/thekiba_ru
💖 twitter.com/thekiba_io
medium.com/@thekiba
github.com/thekiba

Чаты @angular_ru @angular_jobs
Download Telegram
Безопасность в приложениях 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
👍73
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
👍10🔥31😱1
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/
👍6
Переход с Moment.js на Temporal API

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

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

👉 https://www.smashingmagazine.com/2026/03/moving-from-moment-to-temporal-api/
👍12🔥42
Вышел 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/
🔥14🍾5👍3
Команда Angular выпустила официальные скиллы для AI-ассистентов

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

👉 https://github.com/angular/skills
🔥37👍135
Чистые функции в html шаблонах Angular

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

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

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

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

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

👉 https://habr.com/ru/articles/1013922/
👎22🤔4👍31
10 Web-API, заменяющих многие библиотеки JavaScript

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

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

👉 https://habr.com/ru/articles/1015134/
👍13🤡6
Higher-Kinded Types в TypeScript

TypeScript предлагает крайне мощную систему типов, но одной ключевой возможности в ней до сих пор нет, нативной поддержки типов высшего рода (Higher-Kinded Types, HKT).

Эта концепция, знакомая по Haskell и Scala, дает возможность абстрагироваться не только над значениями типов, но и над самими конструкторами типов (Array<T>, Set<T>, Promise<T> и т.д.).

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

👉 https://habr.com/ru/articles/1015632/
👍51🔥1
DOOM на CSS

Недавно в сети появился проект с рендеринг DOOM полностью на CSS. Каждая стена, пол, бочка и монстр это <div>, спозиционированный в 3D-пространстве через CSS-трансформации.

Данные карты (вершины, линии, секторы) извлекаются из оригинального WAD-файла и передаются через CSS-переменные, а геометрия стен рассчитывается прямо в CSS. Проект наглядно показывает, насколько мощным стал современный CSS.

👉 https://nielsleenheer.com/articles/2026/css-is-doomed-rendering-doom-in-3d-with-css/
🤯14🔥4👍31
🚨 Axios взломан

Сегодня был скомпрометирован npm-аккаунт ведущего мейнтейнера и вручную опубликованы релизы axios@1.14.1 и axios@0.30.4.

Вредоносный код не был внедрен в сам axios. Вместо этого в package.json обеих версий была добавлена фиктивная зависимость plain-crypto-js@4.2.1, пакет, который нигде не импортируется в исходниках. Его единственная цель, выполнить postinstall-хук и скачать троян.

Это отличный повод наконец перейти на нативные решения.

Источник: новость первым принес канал @igor_katsuba. Спасибо за оперативность.

👉 https://www.stepsecurity.io/blog/axios-compromised-on-npm-malicious-versions-drop-remote-access-trojan
🤯22👍52
Google продал Angular Павлу Дурову

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

Что ждет фреймворк в ближайших релизах:

📦 Отказ от NPM. Из-за множественных уязвимостей в npm Angular теперь ставится только через официального бота.

💎 Angular Premium. В бесплатной версии ng serve ограничивает сборку до 10 компонентов и показывает рекламу каналов в консоли.

🤖 Новый ng new. Каждый новый проект по умолчанию создается как Mini App с TON-кошельком и авторизацией через Telegram Login.

⭐️ Новый ng build. Чтобы ускорить сборку, купите Angular Stars или пригласите 5 друзей-джуниоров по реферальной ссылке.

🎥 Новый формат логов. Все ошибки теперь приходят видеокружочками.

🔄 За Change Detection отвечают смарт-контракты. Компонент перерисовывается только после того, как валидаторы сети TON подтвердят изменение стейта.

👉 https://angular.dev/telegram
😁167🤡92🤣16💩5🔥4👎3🥱3🥰2
Signality

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

Библиотека вдохновлена VueUse, популярным набором утилит для Vue и следует той же философии компонуемых, реактивных решений, адаптированных под систему сигналов Angular.

Несмотря на то что первый релиз вышел под версией 0.1, количество уже реализованных функций впечатляет.

👉 https://signality.dev
👍16🤔5💩2🔥1
🎉 Taiga UI 5 уже здесь!

Команда Taiga UI выпустила мажорный релиз.

🆕 Что нового

Timeline - новый компонент временной шкалы для размещения событий на линейной оси.

Carousel - полностью переработан.

Expand, Accordion, InputPhoneInternational - вышли из статуса экспериментальных и теперь готовы к продакшену.

💎 Главные фишки релиза

Полная миграция на Signals: токены, пайпы и инпуты компонентов.

RTL-поддержка для Avatar, Switch, Pin, ThumbnailCard.

Иконки позволяют менять толщину линий и масштабируются со шрифтом.

addon-doc: новый дизайн, оглавление, отложенная подсветка синтаксиса.

addon-table: новый pipe tuiSorter.

Инфраструктура порталов переписана.

Поддержка BigInt.

⚙️ Требования

Убедитесь, что в вашем проекте есть: Angular 19+, Maskito v5+, @angular/animations больше не нужен, все анимации переписаны на CSS и Web Animations API.

🔄 Как мигрировать

ng update @taiga-ui/cdk


Полный список изменений в CHANGELOG.

👉 https://medium.com/p/fef85dde3fc7
🔥44🤨54👍3👎1
Как работают Signals

Хотя концепция сигналов кажется простой, мало кто может уверенно объяснить внутренний механизм.

Статья подробно разбирает, с иллюстрациями, push-pull алгоритм и основу мелкозернистой реактивности, которая автоматически распространяет изменения по графу зависимостей.

👉 https://willybrauner.com/journal/signal-the-push-pull-based-algorithm
🔥18👍6
ngxtension

Постоянно пишите одни и те же хелперы в новых проектах? Проект ngxtension собирает всю полезную рутину в одном месте.

Библиотека закрывает пробелы Angular. Как только фича появляется в самом фреймворке, из ngxtension ее аккуратно выпиливают.

Несмотря на то что ngxtension поставляется как единый пакет (чтобы его было удобно устанавливать), пайплайн сборки Angular корректно обрабатывает code-splitting и tree-shaking для всех точек входа, которые входят в состав ngxtension.

👉 https://ngxtension.dev/
10👍1
TypeScript врёт

Многие разработчики считают, что раз они описали интерфейс и TypeScript не ругается, все в порядке. Но TypeScript существует только на этапе компиляции. В рантайме его нет.

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

Решение: библиотеки для рантайм-валидации.

👉 https://habr.com/ru/articles/1020268/
💩30👍5😴1
Утечки памяти во фронтенде

Исследование показало, что 86 % открытых фронтенд-проектов содержат хотя бы один случай отсутствующей очистки ресурсов. Проблемы найдены в 430 из 500 репозиториев.

Среди 55 864 находок лидируют: setTimeout/setInterval без clearTimeout/clearInterval (43,9%), addEventListener без removeEventListener (19%), .subscribe() без .unsubscribe() или takeUntil (13,9%), useEffect без возврата cleanup-функции, requestAnimationFrame без cancelAnimationFrame и т.д.

👉 https://stackinsight.dev/blog/memory-leak-empirical-study/
🤯11👎51
Назад в прошлое

Если вы когда-нибудь скучали по скрипу 56k-модема.

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

👉 https://web-rewind.com/
🔥95👍1🙏1
Основные элементы экосистемы JavaScript

В 2026 году экосистема JavaScript делает ставку на нативную производительность и отказ от лишних зависимостей.

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

👉 https://habr.com/ru/articles/1021182/
👍10🔥4
Oxc Angular Compiler

VoidZero представила экспериментальный компилятор Oxc Angular Compiler, написанный на Rust с использованием ИИ-агентов. Он компилирует Angular-приложения до 20x быстрее по сравнению с текущими решениями.

Прирост производительности достигнут за счет изменения подхода к анализу кода. Стандартный компилятор Angular генерирует из HTML-шаблонов TypeScript-код, а затем использует TypeScript Compiler для глубокого семантического анализа и проверки типов. Oxc Angular Compiler выполняет трансформацию шаблонов нативно на Rust, снижая зависимость от семантического чекера TypeScript.

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

👉 https://voidzero.dev/posts/oxc-angular-compiler
🔥14🤡8🤔3🥰211👏1😁1🙏1