🦊 Angular Fox 🚀 — русскогорящие новости сообщества
4.15K subscribers
1.42K 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 теперь можно использовать стрелочные функции прямо в шаблонах. Они работают как обычные, но с некоторыми ограничениями.

Поддерживаются только функции с неявным возвратом: (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
🔥18👍6🤨3🥰2👏2
Магия deepSignal

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

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

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

👉 https://medium.com/p/6b9e0d73eb9d
👍10🔥2🥰1
Signal Forms

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

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

👉 https://www.angularspace.com/signal-forms/
👍111🔥1
Новые 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/
👍19🔥5👾32
OnPush станет стратегией по умолчанию

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

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

👉 https://habr.com/ru/news/989852/
👍38🔥273👎2
Что, если вы уже решаете не ту проблему?

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

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

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

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

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

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

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

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

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

👉 https://habr.com/ru/articles/988796/
👍7🥴62🔥1
RxJS: интерактивный тренажер

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

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

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

👉 https://rxjs-course-avy.web.app/
🔥24👍17
Полезные IT-концепции: от ложной дихотомии до резиновой уточки

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

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

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

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

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

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

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

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

👉 https://habr.com/ru/articles/988380/
👍621🥴1🤣1😭1
Кастомная стилизация MatPaginator

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

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

👉 https://www.angularspace.com/angular-v20-custom-matpaginator-styling/
👍4
TuiControl — Современный подход к созданию форм-компонентов

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

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

👉 https://habr.com/ru/articles/991650/
👍255
Angular Skills

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

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

👉 https://github.com/analogjs/angular-skills
👍28👏8🔥6🤮2🦄1
Компилируем TypeScript в натив: хардкор и мясо

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

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

👉 https://habr.com/ru/companies/ncloudtech/articles/990666/
🤔6🔥21👍1
ANGULAR против REACT

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

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

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

👉 https://www.youtube.com/watch?v=a9W0eO9J0UE
👍23🔥86🤮1
State of JavaScript 2025

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

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

👉 https://2025.stateofjs.com/
👍20🔥6
Angular Signal Forms Config

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

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

👉 https://angularexperts.ch/blog/signal-forms-config
👍61
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/
👍13🔥61👀1
Как сделать программиста счастливее

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

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

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

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

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

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

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

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

👉 https://habr.com/ru/articles/994056/
👍65
Интересные 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/
👍7👎31🔥1
WebMCP

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

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

👉 https://habr.com/ru/articles/1000086/
🔥9🤮2🥴2👍1💩1🤡1
Signal inputs и setInput: не пропусти при миграции

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

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

👉 https://habr.com/ru/companies/skyeng/articles/996814/
👍81
A11Y как архитектурный фундамент UI

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

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

👉 https://dev.to/artalar/a11y-is-ui-architecture-2ibn
👍4🤡31🥰1😇1