Реализация колонок в Angular с использованием Angular CDK https://link.medium.com/wz23jux1Enb #angular #grid #angularCdk #bootstrap #frontend #webdevelopment #javascript

https://habr.com/ru/post/652453/ #nx #frontend #webdevelopment

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

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

Введение
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 #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.