Типизированные формы в Angular https://link.medium.com/HHFkqz3bqsb #angular #angularForms #frontend #javascript

Использование SVG иконок с помощью Angular Material https://link.medium.com/unKJxSAcMsb #angular #angularMaterial #svgIcon #frontend #javascript

Настройка husky в проекте Angular. Миграция с 4 до 8 версии. https://link.medium.com/BW6ZpAP0lub #husky #git #angular #frontend

Новый цикл статей посвященный трем популярным реализациям Redux в Angular.

Из интересного:
- примеры трех реализаций redux: ngrx, ngxs и akita (+ пара слов о ngxs labs и elf);
- приложение выполнено с использованием микрофронтендов.

Демо можно глянуть на redux.fafn.ru.
Исходники https://github.com/Fafnur/angular-samples

Введение
https://medium.com/fafnur/redux-%D0%B2-angular-%D0%B2%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-591ba785e0fc
Генерация приложения с микрофронтендами
https://medium.com/fafnur/redux-%D0%B2-angular-%D0%B3%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D1%81-%D0%BC%D0%B8%D0%BA%D1%80%D0%BE%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4%D0%B0%D0%BC%D0%B8-5e03618e0cc8
Создание базовых классов
https://medium.com/fafnur/redux-%D0%B2-angular-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D1%85-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%B2-e905c4f6354d
Создание фейкового API для новостей
https://medium.com/fafnur/redux-%D0%B2-angular-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D1%84%D0%B5%D0%B9%D0%BA%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE-api-%D0%B4%D0%BB%D1%8F-%D0%BD%D0%BE%D0%B2%D0%BE%D1%81%D1%82%D0%B5%D0%B9-11be9cdbea0e
Создание UI компонентов для отображения новостей
https://medium.com/fafnur/redux-%D0%B2-angular-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-ui-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2-%D0%B4%D0%BB%D1%8F-%D0%BE%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%BE%D0%B2%D0%BE%D1%81%D1%82%D0%B5%D0%B9-51482a493016
Концепты и понятия в Redux
https://medium.com/fafnur/redux-%D0%B2-angular-%D0%BA%D0%BE%D0%BD%D1%86%D0%B5%D0%BF%D1%82%D1%8B-%D0%B8-%D0%BF%D0%BE%D0%BD%D1%8F%D1%82%D0%B8%D1%8F-%D0%B2-redux-34834a395265
Рекомендации по организации state
https://medium.com/fafnur/redux-%D0%B2-angular-%D1%80%D0%B5%D0%BA%D0%BE%D0%BC%D0%B5%D0%BD%D0%B4%D0%B0%D1%86%D0%B8%D0%B8-%D0%BF%D0%BE-%D0%BE%D1%80%D0%B3%D0%B0%D0%BD%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D0%B8-state-2f122e1b8cd
Ngrx в действии: создание и тестирование
https://medium.com/fafnur/redux-%D0%B2-angular-ngrx-%D0%B2-%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D0%B8-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B8-%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-82b0f12a0396
Использование Ngxs
https://medium.com/fafnur/redux-%D0%B2-angular-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-ngxs-8a5e330bc41e
Использование Akita
https://medium.com/fafnur/redux-%D0%B2-angular-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-akita-81456b166675
Сравнение разных реализаций redux. Ngrx vs Ngxs vs Akita
https://medium.com/fafnur/redux-%D0%B2-angular-%D1%81%D1%80%D0%B0%D0%B2%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%80%D0%B0%D0%B7%D0%BD%D1%8B%D1%85-%D1%80%D0%B5%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D0%B9-redux-ngrx-vs-ngxs-vs-akita-c756c2f2f4a4
Заключение
https://medium.com/fafnur/redux-%D0%B2-angular-%D0%B7%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-791a07dddc15

Бонусная статья, для предыдущего цикла статей - Redux в Angular.
В статье рассматривается создание аналогичного функционала с помощью стандартного сервиса Angular.
#angular #redux #javascript #frontend

https://medium.com/p/c93691e0074c

Обзорная статья на habr про последний цикл статей - Redux в Angular. Статья повторяет цикл статей, только приводит все это в сжатом виде.

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

https://habr.com/ru/post/706092/ #angular #redux #ngrx #ngxs #akita #elf #frontend #javascript

Создание иконок Material font и svg без Angular Material. https://link.medium.com/7w8DrkJa8Ab

Перевод Angular проекта на standalone компоненты
https://medium.com/fafnur/%D0%BF%D0%B5%D1%80%D0%B5%D1%85%D0%BE%D0%B4-angular-%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B0-%D0%BD%D0%B0-standalone-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B-be9003ae4c29

Новая статья на habr, посвященная Evercookie - https://habr.com/p/750856. В статье разбираются используемые механизмы кеширования, а также приводится реализация на Angular.

Статья про одну из моих головных болей на работе - это перенос блога. https://habr.com/ru/articles/754884/

Туториал о том, как подружить Angular и Contentful. https://habr.com/ru/articles/754928/

Миграция монорепозитория Nx на 17-ю версию. Исправление конфигов после обновления, а также изменение генераторов по умолчанию https://link.medium.com/x1QwHTcn9Db

Написал статью, посвященную сложной типизации на примере задачки из Yandex CUP 2023. Использование условных типов, обход диапозона значений, рекурсия и все это для генерации типа. https://habr.com/p/770646/

Написал подробное руководство обновления Angular до 17 версии с SSR и локализацией.
https://link.medium.com/NbY66vK4OEb

В качестве демонстрации можно посмотреть мой сайт с проектами - https://fafn.ru.

Мне потребовалось чуть меньше одного года, чтобы выпустить новый цикл статей, посвященный Angular 18.
Предлагаю вашему внимаю мой новый pet-проект Buy & Fly. Это сервис по поиску дешевых авиабилетов.
Планировалось выпустить все к выходу Angular 18, но видимо я чуток переоценил свои силы.

Приятного прочтения!

https://dev.to/fafnur/razrabotka-vieb-prilozhieniia-dlia-poiska-aviabilietov-na-angular-18-4clf

P.S. Так как медиум теперь не в части в рф, русскую часть я переношу на dev.to. На медиуме остается англоязычная часть, которую я планирую развивать в ближайшее время.

I translated the last series of articles on Angular for my foreign followers. All articles are identical except for the introduction. For those who haven’t checked out the course yet, happy reading!

https://medium.com/fafnur/developing-a-web-application-for-airline-ticket-search-using-angular-18-45f3e176b9a7

Вы создали новое Angular‑приложение, подключили популярный CSS‑фреймворк, но вместо ожидаемого вау‑эффекта столкнулись с проблемами: стили выглядят не так, как хотелось, валидация форм работает странно, а некоторые элементы вообще не реагируют на изменения состояния. Знакомо? Это типичная ситуация, когда CSS‑фреймворки интегрируются без учета особенностей Angular.

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

https://habr.com/ru/articles/870192/