Выпустил новый цикл статей - "Сайт визитка на Angular".
В цикле 15 статей, которые посвящены полноценной разработке приложения на Angular, с добавлением SSR, пререндера и SEO оптимизацией.
#angular #nx #universal #ngrx #material #uikit #frontend #webdevelopment #javanoscript

Ссылки на все статьи:

Введение
https://medium.com/fafnur/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-%D0%B2%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-9bc18c25fe37

Создание приложения
https://medium.com/fafnur/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-angular-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-a113021c70d3

Создание core библиотек
https://medium.com/fafnur/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-core-%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA-8fbe0a7f9608

Создание UI KIT
https://medium.com/fafnur/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-ui-kit-75c02751900e

Реализация модуля товаров
https://medium.com/fafnur/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8C-%D1%82%D0%BE%D0%B2%D0%B0%D1%80%D0%BE%D0%B2-659cd5599e93

Реализация модуля корзины
https://medium.com/fafnur/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8C-%D0%BA%D0%BE%D1%80%D0%B7%D0%B8%D0%BD%D1%8B-1644d9cc493d

Реализация модуля заказа
https://medium.com/fafnur/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8C-%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%B7%D0%B0%D0%BA%D0%B0%D0%B7%D0%B0-f2f0051ab82

Реализация модуля чата
https://medium.com/fafnur/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8C-%D1%87%D0%B0%D1%82%D0%B0-e0fad0d09778

Страницы ошибок
https://medium.com/fafnur/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B-%D0%BE%D1%88%D0%B8%D0%B1%D0%BE%D0%BA-cc71d573f7ca

Локализация
https://medium.com/fafnur/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%BB%D0%BE%D0%BA%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D0%B8-4eb6ce8b2aac

Настройка SEO
https://medium.com/fafnur/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-seo-69d1a329cd41

Настройка SSR
https://medium.com/fafnur/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-ssr-e7d61b03c24e

Тестирование
https://medium.com/fafnur/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-unit-%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-801760969790

Заключение
https://medium.com/fafnur/%D1%81%D0%B0%D0%B9%D1%82-%D0%B2%D0%B8%D0%B7%D0%B8%D1%82%D0%BA%D0%B0-%D0%BD%D0%B0-angular-%D0%B7%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-1c5b9dec26fc

Обзорная статья на habr про цикл статей - Сайт визитка на Angular. https://habr.com/ru/post/658787/ #angular #universal #nx #frontend #webdevelopment

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

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

Настройка 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 #javanoscript #frontend

https://medium.com/p/c93691e0074c

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

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

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

Создание иконок Material font и noscript без 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