✨ Мне этот Chrome DevTools теперь абсолютно понятен
Если вы открываете DevTools только ради console.log() или инспектирования элементов, вы используете лишь малую часть возможностей.
Узнайте про полезные мелочи: от обращения к выбранным элементам через $0 и monitorEvents() для отслеживания событий до профилирования Web Vitals.
👉https://habr.com/ru/companies/timeweb/articles/976266/
Если вы открываете DevTools только ради console.log() или инспектирования элементов, вы используете лишь малую часть возможностей.
Узнайте про полезные мелочи: от обращения к выбранным элементам через $0 и monitorEvents() для отслеживания событий до профилирования Web Vitals.
👉https://habr.com/ru/companies/timeweb/articles/976266/
👍20🔥4
✨ Русскоязычный перевод документации
В официальной документации Angular появилась ссылка на русскоязычный перевод. Теперь тем, кому удобнее читать документацию на русском, не нужно искать перевод отдельно.
А если вы заметите неточности или ошибки в переводе, всегда можно внести свой вклад и помочь сделать документацию еще лучше (issues открыты).
👉 https://github.com/misha98857/angular-docs.ru
В официальной документации Angular появилась ссылка на русскоязычный перевод. Теперь тем, кому удобнее читать документацию на русском, не нужно искать перевод отдельно.
А если вы заметите неточности или ошибки в переводе, всегда можно внести свой вклад и помочь сделать документацию еще лучше (issues открыты).
👉 https://github.com/misha98857/angular-docs.ru
👍18🔥11❤4🤡2
✨ JavaScript-фреймворки: тренды на 2026
Райан Карниато, автор SolidJS, опубликовал свой ежегодный обзор JavaScript-фреймворков с взглядом в 2026 год.
Он разобрал, как фреймворки смещаются в сторону AI-first, async-first и изоморфной архитектуры.
👉 https://dev.to/this-is-learning/javanoscript-frameworks-heading-into-2026-2hel
Райан Карниато, автор SolidJS, опубликовал свой ежегодный обзор JavaScript-фреймворков с взглядом в 2026 год.
Он разобрал, как фреймворки смещаются в сторону AI-first, async-first и изоморфной архитектуры.
👉 https://dev.to/this-is-learning/javanoscript-frameworks-heading-into-2026-2hel
👍7💩5🤮1🥴1
✨ Signal Forms Guide
Если вы уже изучили официальную документацию по Signal Forms и даже прошли туториал, но все равно хочется больше материалов по теме.
Появилось интерактивное руководство, которое помогает закрепить базу.
👉 https://signal-forms.guide/guides/core-concepts
Если вы уже изучили официальную документацию по Signal Forms и даже прошли туториал, но все равно хочется больше материалов по теме.
Появилось интерактивное руководство, которое помогает закрепить базу.
👉 https://signal-forms.guide/guides/core-concepts
👍7🔥4
✨ Управление фокусом в Signal Forms
В новом Angular 21.1.0 Signal Forms получили метод
Метод работает интуитивно. Вызываешь его на состоянии поля, и автоматически находится связанный контрол и устанавливает на него фокус. Также поддерживается работа с кастомными контролами. И если контрол реализует свой метод
👉 https://medium.com/p/43ef2b1b34e6
В новом Angular 21.1.0 Signal Forms получили метод
focusBoundControl(), который позволяет программно устанавливать фокус на поля формы. Это решает типичные задачи: переход к первому полю с ошибкой после валидации, автофокус на следующий шаг в многошаговых формах или реализация клавиатурных шорткатов.Метод работает интуитивно. Вызываешь его на состоянии поля, и автоматически находится связанный контрол и устанавливает на него фокус. Также поддерживается работа с кастомными контролами. И если контрол реализует свой метод
focus(), то он будет вызван.👉 https://medium.com/p/43ef2b1b34e6
🔥25👍6❤3
✨ Что нового в Angular 21.1?
Недавно команда Angular выпустила минорные обновления с важными улучшениями.
Ключевые изменения коснулись Signal Forms, которые продолжают развиваться и приближаются к production-ready состоянию.
Signal Forms: директива [field] переименована в [formField] из-за возможных коллизий имен.
Появилась автоматическая установка CSS-классов на основе состояния полей через provideSignalFormsConfig(). Теперь можно настроить классы типа is-invalid для интеграции с Bootstrap или Tailwind.
Роутер: новая функция isActive() возвращает computed signal для отслеживания активного URL.
Экспериментальная интеграция с браузерным Navigation API.
Другие улучшения:
И это лишь малая часть из множества обновлений.
👉 https://blog.ninja-squad.com/2026/01/15/what-is-new-angular-21.1
Недавно команда Angular выпустила минорные обновления с важными улучшениями.
Ключевые изменения коснулись Signal Forms, которые продолжают развиваться и приближаются к production-ready состоянию.
Signal Forms: директива [field] переименована в [formField] из-за возможных коллизий имен.
Появилась автоматическая установка CSS-классов на основе состояния полей через provideSignalFormsConfig(). Теперь можно настроить классы типа is-invalid для интеграции с Bootstrap или Tailwind.
Роутер: новая функция isActive() возвращает computed signal для отслеживания активного URL.
Экспериментальная интеграция с браузерным Navigation API.
Другие улучшения:
@switch теперь поддерживает множественные @case для одного блока контента, в шаблонах работает spread-оператор, добавлена утилита provideStabilityDebugging() для отладки проблем с гидратацией в SSR.И это лишь малая часть из множества обновлений.
👉 https://blog.ninja-squad.com/2026/01/15/what-is-new-angular-21.1
🔥22👍4
✨ От хаоса к структуре
Недавно был представлен 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/
Недавно был представлен 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/
🔥10👍5❤2👎1
✨ Angular Three
Если вы увлекаетесь 3D, обратите внимание на Angular Three.
Это кастомный рендерер для Angular, который позволяет использовать THREE.js декларативно, прямо через шаблоны.
3D-сцены можно собирать так же привычно, как обычный интерфейс, но они рендерятся не в DOM, а напрямую в Canvas.
👉 https://angularthree.org/
Если вы увлекаетесь 3D, обратите внимание на Angular Three.
Это кастомный рендерер для Angular, который позволяет использовать THREE.js декларативно, прямо через шаблоны.
3D-сцены можно собирать так же привычно, как обычный интерфейс, но они рендерятся не в DOM, а напрямую в Canvas.
👉 https://angularthree.org/
🔥24👍8👎1
✨ Angular получает поддержку стрелочных функций в шаблонах
В Angular теперь можно использовать стрелочные функции прямо в шаблонах. Они работают как обычные, но с некоторыми ограничениями.
Поддерживаются только функции с неявным возвратом:
Внутри стрелочных функций нельзя использовать pipe-операторы, но их можно передавать в pipe снаружи:
Чтобы избежать пересоздания функций при каждой проверке изменений, компилятор применяет оптимизации.
👉 https://github.com/angular/angular/commit/d9923b72a20972ba6bf728d78f1afac6936ade18
В 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
🔥16👍6🤨3👏2🥰1
✨Магия deepSignal
Статья раскрывает, как утилита deepSignal решает проблему реактивности при работе с вложенным состоянием.
Утилита создает WritableSignal для конкретного свойства передаваемого сигнала, который реагирует только на изменения этого свойства, игнорируя остальные поля.
Это особенно полезно при работе с большими формами, позволяя обновлять только необходимые части без лишних перерасчетов.
👉 https://medium.com/p/6b9e0d73eb9d
Статья раскрывает, как утилита deepSignal решает проблему реактивности при работе с вложенным состоянием.
Утилита создает WritableSignal для конкретного свойства передаваемого сигнала, который реагирует только на изменения этого свойства, игнорируя остальные поля.
Это особенно полезно при работе с большими формами, позволяя обновлять только необходимые части без лишних перерасчетов.
👉 https://medium.com/p/6b9e0d73eb9d
👍9🔥2🥰1
✨ Signal Forms
На angularspace давно не было новых статей, но вот свежий материал о Signal Forms. Той самой фиче, о которой все говорят с момента анонса.
Хотя концепция уже многим знакома, стоит взглянуть на конкретику работы с экспериментальным API.
👉 https://www.angularspace.com/signal-forms/
На angularspace давно не было новых статей, но вот свежий материал о Signal Forms. Той самой фиче, о которой все говорят с момента анонса.
Хотя концепция уже многим знакома, стоит взглянуть на конкретику работы с экспериментальным API.
👉 https://www.angularspace.com/signal-forms/
👍9❤1🔥1
✨ Новые CSS-фичи, появившиеся к началу 2026 года
CSS достиг уровня, когда сложные вычисления и логика реализуются без препроцессоров и лишних JS-скриптов.
Ключевые нововведения:
Функция
👉 https://habr.com/ru/companies/ruvds/articles/984548/
CSS достиг уровня, когда сложные вычисления и логика реализуются без препроцессоров и лишних JS-скриптов.
Ключевые нововведения:
@function. Теперь можно объявлять собственные функции с аргументами и возвращать вычисленный результат.Функция
if(). Позволяет использовать условную логику. Работает в связке с media(), style() и supports().sibling-index(). Возвращает порядковый номер элемента среди соседей. interest-delay. Свойство добавляет задержку перед срабатыванием или отменой :hover, например, предотвращая случайное закрытие меню при движении курсора.field-sizing: content. Позволяет инпутам и textarea автоматически подстраивать свой размер под введенный контент.👉 https://habr.com/ru/companies/ruvds/articles/984548/
👍16🔥5👾3❤2
✨ OnPush станет стратегией по умолчанию
Команда Angular планирует сделать ChangeDetectionStrategy.OnPush стандартной стратегией обнаружения изменений для компонентов. Это изменение связано с переходом на zoneless-архитектуру и давно запрашивалось сообществом.
ChangeDetectionStrategy.Default будет переименован в ChangeDetectionStrategy.Eager для большей ясности. Существующие кодовые базы будут автоматически мигрированы с явным указанием Eager, сохраняя текущее поведение. Изменения запланированы для Angular 22 в мае.
👉 https://habr.com/ru/news/989852/
Команда Angular планирует сделать ChangeDetectionStrategy.OnPush стандартной стратегией обнаружения изменений для компонентов. Это изменение связано с переходом на zoneless-архитектуру и давно запрашивалось сообществом.
ChangeDetectionStrategy.Default будет переименован в ChangeDetectionStrategy.Eager для большей ясности. Существующие кодовые базы будут автоматически мигрированы с явным указанием Eager, сохраняя текущее поведение. Изменения запланированы для Angular 22 в мае.
👉 https://habr.com/ru/news/989852/
👍34🔥24❤3👎2
✨ Что, если вы уже решаете не ту проблему?
НЖЯ (Нежелательное Явление) — инструмент из Теории ограничений Голдратта для эффективной формулировки проблем. Прежде чем тратить месяцы на решение, нужно убедиться, что вы решаете ту самую проблему, а не её симптом.
Семь правил НЖЯ:
1. Регулярность повторения.
Проблема должна быть системной и повторяться регулярно, а не быть разовым инцидентом.
2. Зона влияния.
Формулировка должна касаться области нашего контроля.
3. Объективность и измеримость.
Нужны конкретные цифры вместо оценочных суждений: плохо, долго, много.
4. Не путать с причиной.
Сначала фиксируем проблему, потом ищем причины.
5. Не содержит завуалированное решение.
Если формулировка замаскированное решение, у вас остается только один вариант действий.
6. Не содержит обвинение.
Проблема должна быть в системе, а не в конкретном человеке.
7. Очевидная негативность.
Должно быть сразу понятно, что это плохо.
👉 https://habr.com/ru/articles/988796/
НЖЯ (Нежелательное Явление) — инструмент из Теории ограничений Голдратта для эффективной формулировки проблем. Прежде чем тратить месяцы на решение, нужно убедиться, что вы решаете ту самую проблему, а не её симптом.
Семь правил НЖЯ:
1. Регулярность повторения.
Проблема должна быть системной и повторяться регулярно, а не быть разовым инцидентом.
2. Зона влияния.
Формулировка должна касаться области нашего контроля.
3. Объективность и измеримость.
Нужны конкретные цифры вместо оценочных суждений: плохо, долго, много.
4. Не путать с причиной.
Сначала фиксируем проблему, потом ищем причины.
5. Не содержит завуалированное решение.
Если формулировка замаскированное решение, у вас остается только один вариант действий.
6. Не содержит обвинение.
Проблема должна быть в системе, а не в конкретном человеке.
7. Очевидная негативность.
Должно быть сразу понятно, что это плохо.
👉 https://habr.com/ru/articles/988796/
👍6🥴5❤1🔥1
✨ RxJS: интерактивный тренажер
Нашел бесплатный курс из 30 интерактивных уроков по RxJS.
Материал охватывает базовые и продвинутые операторы, управление состоянием, а также карточки для проверки знаний.
Автор активно дорабатывает тренажер и ждет обратной связи от сообщества.
👉 https://rxjs-course-avy.web.app/
Нашел бесплатный курс из 30 интерактивных уроков по RxJS.
Материал охватывает базовые и продвинутые операторы, управление состоянием, а также карточки для проверки знаний.
Автор активно дорабатывает тренажер и ждет обратной связи от сообщества.
👉 https://rxjs-course-avy.web.app/
🔥18👍17