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

✨ Интересные HTML и CSS фичи

Во фронтенде технологии меняются так быстро, что часть полезных фичей просто выпадает из поля зрения. Многие разработчики до сих пор не знают о некоторых нативных возможностях HTML и CSS, которые могут упростить код и избавить от костылей.

Что стоит вспомнить:

Атрибут form: связывает кнопку с формой, даже если она находится за ее пределами. Полезно для сложных layouts.

novalidate и formnovalidate: отключают встроенную валидацию браузера, при этом псевдоклассы :valid и :invalid продолжают работать для кастомных стилей.

Псевдокласс :lang(): стилизует элементы в зависимости от языка без дополнительных классов.

Свойство inset: короткая запись вместо top: 0; right: 0; bottom: 0; left: 0;. Одна строка против четырех.

Математические константы: pi, e, infinity, NaN внутри calc() для более сложных вычислений в стилях.

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

✨ Как сделать программиста счастливее

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

Она включает пять ключевых элементов:

Status: Ощущение профессиональной значимости.

Certainty: Понимание того, что происходит. Хаотичное изменение приоритетов и размытые требования создают фоновую тревогу.

Autonomy: Контроль над собственной работой.

Relatedness: Это среда без страха задать глупый вопрос или признать ошибку.

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

А какие вещи сделали бы вас счастливее на работе? Делитесь в комментариях.

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

✨ TypeScript 6.0 Beta

Microsoft выпустила бету TypeScript 6.0.

Уже следующая версия 7.0 будет полностью переписана на Go с поддержкой нативного кода и многопоточности. TypeScript 6.0 выступает мостом между 5.9 и 7.0, а большинство изменений направлены на подготовку к миграции на новую архитектуру.

Помимо подготовки к переезду на Go, релиз приносит свежие фичи: улучшенный вывод типов, новые дефолты в tsconfig.json, свежие типы из стандартов ECMAScript, поддержка Subpath Imports, флаг --stableTypeOrdering и многое другое.

Отдельная благодарность katsuba.dev за предоставленную новость.

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

✨Angular Signal Forms Config

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

Для настройки используется provideSignalFormsConfig. С его помощью можно включить классические CSS-классы состояния через константу NG_STATUS_CLASSES или настроить кастомные классы через динамические маппинги.

👉 https://angularexperts.ch/blog/signal-forms-config

✨ State of JavaScript 2025

TypeScript окончательно победил, и теперь это не просто надстройка, а стандарт индустрии. Благодаря поддержке в Deno, Bun и внедрению в стабильные версии Node.js, можно писать на TS практически нативно.

Параллельно с этим наступила эра Vite, его количество скачиваний официально превысило показатели webpack.

👉 https://2025.stateofjs.com/

✨ ANGULAR против REACT

В новом выпуске подкаста на канале КодАвтоматизации эксперт по Angular Олег Щёголев развеивает мифы об этом фреймворке и объясняет, почему он остается стандартом для крупных корпораций.

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

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

👉 https://www.youtube.com/watch?v=a9W0eO9J0UE

✨ Компилируем TypeScript в натив: хардкор и мясо

В рамках миграции UI крупного C++ проекта с Qt на TypeScript появился TSNative.

Кроссплатформенный AOT-компилятор, позволяющий выполнять подмножество TypeScript как нативный код через LLVM.

👉 https://habr.com/ru/companies/ncloudtech/articles/990666/

✨ Angular Skills

Набор навыков для разработки Angular с использованием ИИ.

Эти навыки предоставляют агентам, таким как Claude, Gemini, OpenCode и др., актуальные шаблоны Angular v20+, лучшие практики и примеры кода.

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

✨ TuiControl — Современный подход к созданию форм-компонентов

TuiControl — это абстрактный класс из библиотеки Taiga UI, который значительно упрощает разработку кастомных компонентов, интегрируемых с ngModel и FormControl.

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

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

✨ Кастомная стилизация MatPaginator

Эдуард Криванек обновил свою популярную статью о кастомизации пагинатора Angular Material для версии 20.

Основная идея: создать директиву, которая превращает стандартный MatPaginator в более визуально привлекательный компонент.

👉 https://www.angularspace.com/angular-v20-custom-matpaginator-styling/

✨ Полезные IT-концепции: от ложной дихотомии до резиновой уточки

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

Подборка наиболее актуальных:

Закон Конвея. Структура программного обеспечения неизбежно повторяет структуру коммуникаций в организации. Если команды бэкенда и фронтенда работают изолированно, интеграция будет костыльной.

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

Оверинжиниринг. Использование модных технологий там, где достаточно скрипта.

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

Догфудинг. Подход, при котором разработчики сами используют свой продукт.

А какие принципы или когнитивные искажения чаще всего встречаете в работе вы? Делитесь любимыми примерами в комментариях.

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

✨ RxJS: интерактивный тренажер

Нашел бесплатный курс из 30 интерактивных уроков по RxJS.

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

Автор активно дорабатывает тренажер и ждет обратной связи от сообщества.

👉 https://rxjs-course-avy.web.app/

✨ Что, если вы уже решаете не ту проблему?

НЖЯ (Нежелательное Явление) — инструмент из Теории ограничений Голдратта для эффективной формулировки проблем. Прежде чем тратить месяцы на решение, нужно убедиться, что вы решаете ту самую проблему, а не её симптом.

Семь правил НЖЯ:

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

2. Зона влияния.
Формулировка должна касаться области нашего контроля.

3. Объективность и измеримость.
Нужны конкретные цифры вместо оценочных суждений: плохо, долго, много.

4. Не путать с причиной.
Сначала фиксируем проблему, потом ищем причины.

5. Не содержит завуалированное решение.
Если формулировка замаскированное решение, у вас остается только один вариант действий.

6. Не содержит обвинение.
Проблема должна быть в системе, а не в конкретном человеке.

7. Очевидная негативность.
Должно быть сразу понятно, что это плохо.

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

✨ OnPush станет стратегией по умолчанию

Команда Angular планирует сделать ChangeDetectionStrategy.OnPush стандартной стратегией обнаружения изменений для компонентов. Это изменение связано с переходом на zoneless-архитектуру и давно запрашивалось сообществом.

ChangeDetectionStrategy.Default будет переименован в ChangeDetectionStrategy.Eager для большей ясности. Существующие кодовые базы будут автоматически мигрированы с явным указанием Eager, сохраняя текущее поведение. Изменения запланированы для Angular 22 в мае.

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

✨ Новые CSS-фичи, появившиеся к началу 2026 года

CSS достиг уровня, когда сложные вычисления и логика реализуются без препроцессоров и лишних JS-скриптов.

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

@function. Теперь можно объявлять собственные функции с аргументами и возвращать вычисленный результат.

Функция if(). Позволяет использовать условную логику. Работает в связке с media(), style() и supports().

sibling-index(). Возвращает порядковый номер элемента среди соседей.

interest-delay. Свойство добавляет задержку перед срабатыванием или отменой :hover, например, предотвращая случайное закрытие меню при движении курсора.

field-sizing: content. Позволяет инпутам и textarea автоматически подстраивать свой размер под введенный контент.

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

✨ Signal Forms

На angularspace давно не было новых статей, но вот свежий материал о Signal Forms. Той самой фиче, о которой все говорят с момента анонса.

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

👉 https://www.angularspace.com/signal-forms/

✨Магия deepSignal

Статья раскрывает, как утилита deepSignal решает проблему реактивности при работе с вложенным состоянием.

Утилита создает WritableSignal для конкретного свойства передаваемого сигнала, который реагирует только на изменения этого свойства, игнорируя остальные поля.

Это особенно полезно при работе с большими формами, позволяя обновлять только необходимые части без лишних перерасчетов.

👉 https://medium.com/p/6b9e0d73eb9d

✨ Angular получает поддержку стрелочных функций в шаблонах

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

Поддерживаются только функции с неявным возвратом: (a) => a + 1 разрешено, а (a) => { return a + 1 } нет.

Внутри стрелочных функций нельзя использовать pipe-операторы, но их можно передавать в pipe снаружи: (a, b) => a + b | test разрешено, а (a, b) => (a + b | тест) нет.

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

👉 https://github.com/angular/angular/commit/d9923b72a20972ba6bf728d78f1afac6936ade18

✨ Angular Three

Если вы увлекаетесь 3D, обратите внимание на Angular Three.

Это кастомный рендерер для Angular, который позволяет использовать THREE.js декларативно, прямо через шаблоны.

3D-сцены можно собирать так же привычно, как обычный интерфейс, но они рендерятся не в DOM, а напрямую в Canvas.

👉 https://angularthree.org/

✨ От хаоса к структуре

Недавно был представлен FEOD (Fractal Entity Oriental Design) — подход к структурированию фронтенд-приложений, который объединяет лучшее из Atomic Design, FSD и модульной архитектуры. Главная цель, убрать спорную терминологию и дать разработчикам конкретные ответы на вопрос, что и куда класть.

Суть FEOD: проект делится на App, Pages, Modules, Common, Global с четкими правилами импортов. Модули изолированы через публичные API, поддерживают вложенность любой глубины (фрактальность).

Структура изначально разрабатывалась под Vue, но сам принцип универсален. В контексте Angular можно обсудить адаптацию подхода и поделиться опытом.

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

Отдельное спасибо Денису Чернову за то, что запустил эту инициативу.

👉 https://habr.com/ru/companies/sportmaster_lab/articles/972410/