✨ Используем проекцию контента
Модальные диалоги часто применяются, когда требуется взаимодействие с пользователем.
В этой статье на их примере показано, как использовать проекцию контента для разработки по принципу DRY и строить диалоги гибко без излишней инженерии.
👉 https://medium.com/p/fb3064a608f
Модальные диалоги часто применяются, когда требуется взаимодействие с пользователем.
В этой статье на их примере показано, как использовать проекцию контента для разработки по принципу DRY и строить диалоги гибко без излишней инженерии.
👉 https://medium.com/p/fb3064a608f
👍9
✨ Осваиваем Utility Types
Для удобства в TypeScript есть Utility Types — с их помощью мы можем легко преобразовывать типы, извлекать, исключать, получать тип параметра или тип возвращаемого значения функции.
В статье разобраны 15 наиболее используемых утилит.
👉 https://medium.com/p/6cf121d4047c
Для удобства в TypeScript есть Utility Types — с их помощью мы можем легко преобразовывать типы, извлекать, исключать, получать тип параметра или тип возвращаемого значения функции.
В статье разобраны 15 наиболее используемых утилит.
👉 https://medium.com/p/6cf121d4047c
👍13🔥2
✨ Динамические переводы
Одним из распространенных подводных камней при использовании i18n является большой размер файлов перевода и невозможность разделить их для того, чтобы скрыть часть приложения от посторонних глаз.
В статье предложен способ реализации переводов, который может вам пригодиться.
👉 https://medium.com/p/5eeed8466696
Одним из распространенных подводных камней при использовании i18n является большой размер файлов перевода и невозможность разделить их для того, чтобы скрыть часть приложения от посторонних глаз.
В статье предложен способ реализации переводов, который может вам пригодиться.
👉 https://medium.com/p/5eeed8466696
👍7🔥2
✨ Создаем свои Pipes
Pipes — это простые функции, которые можно использовать в шаблонных выражениях для преобразования значений в другой формат отображения. В Angular есть несколько встроенных pipes, но мы можем создавать и собственные.
В этой статье мы изучим пользовательские pipes в Angular.
👉 https://medium.com/p/e54bb400e3ce
Pipes — это простые функции, которые можно использовать в шаблонных выражениях для преобразования значений в другой формат отображения. В Angular есть несколько встроенных pipes, но мы можем создавать и собственные.
В этой статье мы изучим пользовательские pipes в Angular.
👉 https://medium.com/p/e54bb400e3ce
👍4
✨ Создаем простой модальный диалог
Всплывающие окна стали распространенной особенностью веб-приложений. Не так давно для их создания мы полагались на библиотеки компонентов. С появлением HTML-элемента dialog, все может измениться.
В этой статье показывается, как создавать минималистичные диалоговые окна.
👉 https://medium.com/p/277ea7f96da1
Всплывающие окна стали распространенной особенностью веб-приложений. Не так давно для их создания мы полагались на библиотеки компонентов. С появлением HTML-элемента dialog, все может измениться.
В этой статье показывается, как создавать минималистичные диалоговые окна.
👉 https://medium.com/p/277ea7f96da1
👍7
✨ Руководство по миграции на новый Firebase API
Разработчики Firebase SDK проделали огромную работу, полностью переписав способ интеграции и использования библиотеки в приложениях. Теперь она стала более компактной и позволяет динамически импортировать модули, когда это необходимо.
Благодаря этим изменениям наши приложения могут быть более легковесными и работать быстрее.
👉 https://medium.com/p/c6d80c1260b2
Разработчики Firebase SDK проделали огромную работу, полностью переписав способ интеграции и использования библиотеки в приложениях. Теперь она стала более компактной и позволяет динамически импортировать модули, когда это необходимо.
Благодаря этим изменениям наши приложения могут быть более легковесными и работать быстрее.
👉 https://medium.com/p/c6d80c1260b2
👍6
✨ Настраиваем CI/CD
При работе с Git-репозиторием можно настроить сценарии, которые будут автоматически собирать, тестировать и развертывать приложение каждый раз, когда вносятся изменения.
В этой статье объяснена концепция непрерывной интеграции, на примере Angular и GitLab.
👉 https://medium.com/p/9e4ae887ff2b
При работе с Git-репозиторием можно настроить сценарии, которые будут автоматически собирать, тестировать и развертывать приложение каждый раз, когда вносятся изменения.
В этой статье объяснена концепция непрерывной интеграции, на примере Angular и GitLab.
👉 https://medium.com/p/9e4ae887ff2b
👍14🔥5
✨ Работаем с GraphQL в Angular
Apollo Angular — это сверхгибкий клиент GraphQL для Angular, позволяющий добавить его в уже существующее приложение и начать использовать GraphQL только для части пользовательского интерфейса.
В статье описан быстрый способ его настройки.
👉 https://medium.com/p/a6fccf5f3a0c
Apollo Angular — это сверхгибкий клиент GraphQL для Angular, позволяющий добавить его в уже существующее приложение и начать использовать GraphQL только для части пользовательского интерфейса.
В статье описан быстрый способ его настройки.
👉 https://medium.com/p/a6fccf5f3a0c
👍13😐3
✨ Учимся работать с inject
Функция inject — это еще один способ получить зависимость. С ней мы можем разрабатывать многократно используемые функции, которые используют преимущества системы инъекции зависимостей Angular.
В статье на примерах показано, почему функция inject такая замечательная.
👉 https://medium.com/p/ac281e7148d1
Функция inject — это еще один способ получить зависимость. С ней мы можем разрабатывать многократно используемые функции, которые используют преимущества системы инъекции зависимостей Angular.
В статье на примерах показано, почему функция inject такая замечательная.
👉 https://medium.com/p/ac281e7148d1
👍14🔥5💩1
✨ Используем React в Angular приложениях
Есть два сценария, которые могут потребовать использовать React в Angular приложении. Во-первых, в экосистеме React есть компонент, на разработку которого уйдут недели. Во-вторых, возможно вы приобрели компанию, использующую React, и необходимо интегрировать его в существующее приложение.
В этой статье показывается, как интегрировать React в обоих случаях.
👉 https://medium.com/p/1bb907ecac91
Есть два сценария, которые могут потребовать использовать React в Angular приложении. Во-первых, в экосистеме React есть компонент, на разработку которого уйдут недели. Во-вторых, возможно вы приобрели компанию, использующую React, и необходимо интегрировать его в существующее приложение.
В этой статье показывается, как интегрировать React в обоих случаях.
👉 https://medium.com/p/1bb907ecac91
🤮20👍9🤯4🤨2
✨ Оптимизация изображений с помощью директивы Angular Image
В мае 2022 года команды Aurora и Angular объявили о совместной работе над директивой изображений для Angular. Недавно эта директива была выпущена для предварительного просмотра разработчиками как часть Angular v14.2.
В этой статье рассказывается о том, как новая директива NgOptimizedImage, поддерживает оптимизацию изображений.
👉 https://developer.chrome.com/blog/angular-image-directive/
В мае 2022 года команды Aurora и Angular объявили о совместной работе над директивой изображений для Angular. Недавно эта директива была выпущена для предварительного просмотра разработчиками как часть Angular v14.2.
В этой статье рассказывается о том, как новая директива NgOptimizedImage, поддерживает оптимизацию изображений.
👉 https://developer.chrome.com/blog/angular-image-directive/
👍15🤩4🔥1😍1
✨ Использование Angular компонентов в Astro
Astro — это относительно новый веб-фреймворк, ориентированный на то, чтобы помочь вам создавать быстрые сайты, позволяя другим фреймворкам визуализировать свои компоненты.
В статье описывается способ создавать сайты, используя Astro с компонентами Angular.
👉 https://dev.to/brandontroberts/bringing-angular-components-to-astro-islands-52jp
Astro — это относительно новый веб-фреймворк, ориентированный на то, чтобы помочь вам создавать быстрые сайты, позволяя другим фреймворкам визуализировать свои компоненты.
В статье описывается способ создавать сайты, используя Astro с компонентами Angular.
👉 https://dev.to/brandontroberts/bringing-angular-components-to-astro-islands-52jp
👍7🔥4
✨ Умный подход к бесконечному скроллингу
Зачастую в веб-дизайне встречаются бесконечные прокрутки, если реализовывать их наивно, то это приведет к разрастанию DOM-дерева и проблемам с производительностью.
Михаил Кириченко рассказал, как подходить к построению интерфейсов, чтобы улучшить производительность при скроллинге.
👉 https://habr.com/ru/company/bimeister/blog/686096/
Зачастую в веб-дизайне встречаются бесконечные прокрутки, если реализовывать их наивно, то это приведет к разрастанию DOM-дерева и проблемам с производительностью.
Михаил Кириченко рассказал, как подходить к построению интерфейсов, чтобы улучшить производительность при скроллинге.
👉 https://habr.com/ru/company/bimeister/blog/686096/
👍15👏6
✨ Angular DI: использование Inject вместо конструктора
Как вы уже знаете, теперь мы можем использовать функцию inject() внутри компонентов.
Netanel Basal назвал причины, по которым он выбрал Inject вместо конструктора для инъекции зависимостей.
👉 https://medium.com/p/d0782d434fb1
Как вы уже знаете, теперь мы можем использовать функцию inject() внутри компонентов.
Netanel Basal назвал причины, по которым он выбрал Inject вместо конструктора для инъекции зависимостей.
👉 https://medium.com/p/d0782d434fb1
👍13👎2
✨ 18 техник оптимизации производительности
Несмотря на растущее число инструментов, помогающих оптимизировать производительность, работа с ней остается одним из самых сложных аспектов разработки.
Опираясь на свой многолетний опыт работы, Кристиан и Майкл обсуждают методы оптимизации Angular приложений.
👉 https://christianlydemann.com/18-performance-optimization-techniques-for-angular-applications-podcast-with-michael-hladky/
Несмотря на растущее число инструментов, помогающих оптимизировать производительность, работа с ней остается одним из самых сложных аспектов разработки.
Опираясь на свой многолетний опыт работы, Кристиан и Майкл обсуждают методы оптимизации Angular приложений.
👉 https://christianlydemann.com/18-performance-optimization-techniques-for-angular-applications-podcast-with-michael-hladky/
👍11🔥5👏2
✨ Создаем документацию
Документирование проектов — это задача, которую разработчики нередко упускают из виду. Часто приходится работать над кодом, который был написан другими, а документация могла бы сэкономить много времени.
Эта статья содержит советы и инструменты для начала документирования ваших проектов и улучшения опыта разработки.
👉 https://dev.to/this-is-angular/documenting-angular-projects-5ob
Документирование проектов — это задача, которую разработчики нередко упускают из виду. Часто приходится работать над кодом, который был написан другими, а документация могла бы сэкономить много времени.
Эта статья содержит советы и инструменты для начала документирования ваших проектов и улучшения опыта разработки.
👉 https://dev.to/this-is-angular/documenting-angular-projects-5ob
👍7🔥2
✨ Избегаем распространенных ловушек с ControlValueAccessors
Одним из самых больших преимуществ Angular является разнообразие инструментов и решений, которые предлагаются разработчикам из коробки. Одним из них является пакет
Но задумывались ли вы когда-нибудь, как именно это работает под капотом?
👉 https://medium.com/p/b8b81b366c19
Одним из самых больших преимуществ Angular является разнообразие инструментов и решений, которые предлагаются разработчикам из коробки. Одним из них является пакет
@angular/forms, который дает солидный опыт работы с любыми элементами управления пользовательского интерфейса.Но задумывались ли вы когда-нибудь, как именно это работает под капотом?
👉 https://medium.com/p/b8b81b366c19
🔥11👍4
✨ Создаем формы с автосохранением
Работа с формами в веб-приложениях имеет важнейшее значение, так как с их помощью мы взаимодействуем с пользователями.
В этой статье мы научимся создавать формы с автосохранением в Angular. В процессе изучим несколько операторов RxJS и различия между реактивным и шаблонным подходом.
👉 https://medium.com/p/1a396d17ed7d
Работа с формами в веб-приложениях имеет важнейшее значение, так как с их помощью мы взаимодействуем с пользователями.
В этой статье мы научимся создавать формы с автосохранением в Angular. В процессе изучим несколько операторов RxJS и различия между реактивным и шаблонным подходом.
👉 https://medium.com/p/1a396d17ed7d
👍11🤔3🔥1
✨ Паттерн стратегия в TypeScript
Паттерны проектирования важны для программистов, так как помогают писать более качественный код.
В этой статье описано, как реализовать и использовать паттерн стратегии, для решения реальных проблем в веб-проектах.
👉 https://medium.com/p/54eda9b40f09
Паттерны проектирования важны для программистов, так как помогают писать более качественный код.
В этой статье описано, как реализовать и использовать паттерн стратегии, для решения реальных проблем в веб-проектах.
👉 https://medium.com/p/54eda9b40f09
👍8🔥3❤1
✨ Строим архитектуру Angular-приложений
Часто оказывается, что нельзя легко и просто внести важную фичу или безопасно изменить часть приложения, так как она тесно связана с другой частью. К счастью, в Angular из коробки есть сущности, которые позволяют писать код структурированно.
Цель этой статьи – познакомиться с темой построения архитектуры.
👉 https://habr.com/ru/company/simbirsoft/blog/687712/
Часто оказывается, что нельзя легко и просто внести важную фичу или безопасно изменить часть приложения, так как она тесно связана с другой частью. К счастью, в Angular из коробки есть сущности, которые позволяют писать код структурированно.
Цель этой статьи – познакомиться с темой построения архитектуры.
👉 https://habr.com/ru/company/simbirsoft/blog/687712/
👍14👎1🔥1👏1