✨ Перехватываем HTTP запросы
Перехватчики позволяют выполнять операции над запросами на пути к серверу и обратно, это делает их идеальным местом для добавления заголовков, кэширования и обработки ошибок.
В этой статье рассмотрены различные способы обработки неудачных HTTP запросов с помощью RxJS.
👉 https://dev.to/this-is-angular/angular-error-interceptor-12bg
Перехватчики позволяют выполнять операции над запросами на пути к серверу и обратно, это делает их идеальным местом для добавления заголовков, кэширования и обработки ошибок.
В этой статье рассмотрены различные способы обработки неудачных HTTP запросов с помощью RxJS.
👉 https://dev.to/this-is-angular/angular-error-interceptor-12bg
👍6❤1
✨ Разбираем верстку в Angular
Из-за отсутствия примеров в документации Angular Material, некоторые разработчики начинают изобретать собственные решения для создания сеток и лейаутов, хотя все это можно реализовать средствами Angular CDK.
Александр Серенко на примере макета с тремя вариантами отображения, рассмотрел нюансы верстки в Angular.
👉 https://medium.com/p/bd4f15ebbf54
Из-за отсутствия примеров в документации Angular Material, некоторые разработчики начинают изобретать собственные решения для создания сеток и лейаутов, хотя все это можно реализовать средствами Angular CDK.
Александр Серенко на примере макета с тремя вариантами отображения, рассмотрел нюансы верстки в Angular.
👉 https://medium.com/p/bd4f15ebbf54
👍14🔥5👏1
✨ Используем GraphQL с Angular
GraphQL с каждым днем становится все более востребованным. К счастью в экосистеме Angular есть Apollo Angular, который не требует сложной настройки. Вы можете сразу приступить к созданию приложения.
В этом посте Walter Kuppens показал, как легко можно подключиться к PokeAPI используя Apollo Angular.
👉 https://www.thisdot.co/blog/connecting-to-pokeapi-with-angular-and-apollo-client
GraphQL с каждым днем становится все более востребованным. К счастью в экосистеме Angular есть Apollo Angular, который не требует сложной настройки. Вы можете сразу приступить к созданию приложения.
В этом посте Walter Kuppens показал, как легко можно подключиться к PokeAPI используя Apollo Angular.
👉 https://www.thisdot.co/blog/connecting-to-pokeapi-with-angular-and-apollo-client
👍7🔥2
✨ Поднимаем свой уровень в Angular
Начать программировать на Angular легко, можно делать небольшие приложения всего за несколько дней обучения. Но чтобы освоить
его на хорошем уровне, нужно потратить намного больше времени.
Ivano Di Gese попытался обобщить лучшие практики, чтобы ускорить ваш прогресс в освоении Angular.
👉 https://medium.com/p/9c50dccb26a8
Начать программировать на Angular легко, можно делать небольшие приложения всего за несколько дней обучения. Но чтобы освоить
его на хорошем уровне, нужно потратить намного больше времени.
Ivano Di Gese попытался обобщить лучшие практики, чтобы ускорить ваш прогресс в освоении Angular.
👉 https://medium.com/p/9c50dccb26a8
👍9
✨ Создаем динамические компоненты
В Angular 13 упростили API для создания динамических компонентов, теперь не нужно беспокоиться о создании фабрики, инжектировать вспомогательные зависимости, также устарели классы ComponentFactory и ComponentFactoryResolver.
Анастасия Анисимова рассказала как выглядит новый процесс динамического добавления компонентов.
👉 https://habr.com/ru/company/skyeng/blog/652855/
В Angular 13 упростили API для создания динамических компонентов, теперь не нужно беспокоиться о создании фабрики, инжектировать вспомогательные зависимости, также устарели классы ComponentFactory и ComponentFactoryResolver.
Анастасия Анисимова рассказала как выглядит новый процесс динамического добавления компонентов.
👉 https://habr.com/ru/company/skyeng/blog/652855/
👍23❤4
✨ Меняем параметры функции на деструктуризацию
Функции в JavaScript могут быть разными, но в первую очередь это контракт. Когда мы определяем функцию, мы определяем контракт между вызывающей стороной и исполнителем.
JeB Barabanov рассказал, как контракты имеют тенденцию меняться со временем и как это может отразиться на вашем коде.
👉 https://medium.com/p/d320cf0932df
Функции в JavaScript могут быть разными, но в первую очередь это контракт. Когда мы определяем функцию, мы определяем контракт между вызывающей стороной и исполнителем.
JeB Barabanov рассказал, как контракты имеют тенденцию меняться со временем и как это может отразиться на вашем коде.
👉 https://medium.com/p/d320cf0932df
👍5
✨ Осваиваем CI/CD
Деплой вручную — рутинная задача, которая отнимает много времени и чревата ошибками. Сегодня эта практика является антипаттерном. К счастью, современные инструменты позволяют выпускать новые версии вашего приложения легко и просто.
Bobby Galli показал, как создать дружественный CI/CD процесс, опубликовать библиотеку в npm и развернуть приложение на GitHub Pages.
👉 https://medium.com/p/be9a1485d22b
Деплой вручную — рутинная задача, которая отнимает много времени и чревата ошибками. Сегодня эта практика является антипаттерном. К счастью, современные инструменты позволяют выпускать новые версии вашего приложения легко и просто.
Bobby Galli показал, как создать дружественный CI/CD процесс, опубликовать библиотеку в npm и развернуть приложение на GitHub Pages.
👉 https://medium.com/p/be9a1485d22b
👍8🔥4
✨ Создаем веб-компоненты с помощью Lit
Веб-компоненты позволяют создавать многократно используемые элементы, которые могут использоваться с любым фреймворком или вообще без него.
Однако создавать их с нуля проблематично, но мы можем делать быстрые и легкие веб-компоненты с помощью Lit.
Netanel Basal показал, как использовать веб-компонент совместно с популярными фреймворками.
👉 https://medium.com/p/3c640a8ba46
Веб-компоненты позволяют создавать многократно используемые элементы, которые могут использоваться с любым фреймворком или вообще без него.
Однако создавать их с нуля проблематично, но мы можем делать быстрые и легкие веб-компоненты с помощью Lit.
Netanel Basal показал, как использовать веб-компонент совместно с популярными фреймворками.
👉 https://medium.com/p/3c640a8ba46
🔥7👍3
✨ Используем RxJS в Lit
Lit создан на основе стандартов Web Components и добавляет реактивность, декларативные шаблоны и несколько продуманных функций, сокращающих количество шаблонов и облегчающих работу.
В этой статье мы узнаем, как использовать RxJS с Lit и как они хорошо работают вместе.
👉 https://medium.com/p/ace3d13f3c24
Lit создан на основе стандартов Web Components и добавляет реактивность, декларативные шаблоны и несколько продуманных функций, сокращающих количество шаблонов и облегчающих работу.
В этой статье мы узнаем, как использовать RxJS с Lit и как они хорошо работают вместе.
👉 https://medium.com/p/ace3d13f3c24
👍8
✨ Отлаживаем Angular приложения
При знакомстве с новым фреймворком или библиотекой важно знать, как отладить его, если что-то пошло не так. В Angular есть множество полезных инструментов, которые помогут вам эффективно отлаживать ваше приложение.
Walter Kuppens рассказал о нескольких способах отладки. Надеемся, они окажутся полезными в ваших поисках ошибок.
👉 https://www.thisdot.co/blog/debugging-strategies-for-angular-applications
При знакомстве с новым фреймворком или библиотекой важно знать, как отладить его, если что-то пошло не так. В Angular есть множество полезных инструментов, которые помогут вам эффективно отлаживать ваше приложение.
Walter Kuppens рассказал о нескольких способах отладки. Надеемся, они окажутся полезными в ваших поисках ошибок.
👉 https://www.thisdot.co/blog/debugging-strategies-for-angular-applications
👍11
✨ Dependency Injection в Angular
Внедрение зависимостей — это паттерн проектирования, в котором мы запрашиваем зависимости у внешних ресурсов, а не создаем их. Это уникальная особенность Angular, которая помогает разработчикам избежать ненужных хлопот в их коде.
В этой небольшой статье Chameera Dulanga рассказал о особенностях DI в Angular.
👉 https://medium.com/p/181009608a91
Внедрение зависимостей — это паттерн проектирования, в котором мы запрашиваем зависимости у внешних ресурсов, а не создаем их. Это уникальная особенность Angular, которая помогает разработчикам избежать ненужных хлопот в их коде.
В этой небольшой статье Chameera Dulanga рассказал о особенностях DI в Angular.
👉 https://medium.com/p/181009608a91
👍14
✨ Шпаргалка по уязвимостям
Обеспечение безопасности приложений — непростое занятие. Приложения состоят из логики на стороне сервера и клиента, хранения данных, API и т.д. Учитывая все компоненты, которые необходимо защитить, создание безопасного приложения может показаться сложной задачей.
К счастью, большинство уязвимостей имеют одни и те же корни. Изучив причины их возникновения и способы их обнаружения, можно научиться защищать свои приложения.
👉 https://medium.com/p/a3b36f22a0fd
Обеспечение безопасности приложений — непростое занятие. Приложения состоят из логики на стороне сервера и клиента, хранения данных, API и т.д. Учитывая все компоненты, которые необходимо защитить, создание безопасного приложения может показаться сложной задачей.
К счастью, большинство уязвимостей имеют одни и те же корни. Изучив причины их возникновения и способы их обнаружения, можно научиться защищать свои приложения.
👉 https://medium.com/p/a3b36f22a0fd
🔥10👍3
✨ Реализуем скелетоны
Скелетоны — это элементы-заполнители, которые отображаются перед загрузкой содержимого веб-страницы. Скелетоны передают визуальное впечатление о функции, что дает им преимущество перед спиннерами.
Netanel Basal поделился минимальной реализацией скелетонов с помощью структурных директив.
👉 https://medium.com/p/7490ffdecc1b
Скелетоны — это элементы-заполнители, которые отображаются перед загрузкой содержимого веб-страницы. Скелетоны передают визуальное впечатление о функции, что дает им преимущество перед спиннерами.
Netanel Basal поделился минимальной реализацией скелетонов с помощью структурных директив.
👉 https://medium.com/p/7490ffdecc1b
👍8🔥2
✨ Делаем интернационализацию
Обычно все переводы загружаются сразу, но неизвестно будет ли пользователь пользоваться всеми доступными функциями. Так зачем же загружать переводы с самого начала для модулей, которые еще не загружены?
В этой статье вы узнаете, как адаптировать ваше приложение к нескольким языкам модульным способом, на основе библиотеки ngx/translate.
👉 https://medium.com/p/d8c13a67117b
Обычно все переводы загружаются сразу, но неизвестно будет ли пользователь пользоваться всеми доступными функциями. Так зачем же загружать переводы с самого начала для модулей, которые еще не загружены?
В этой статье вы узнаете, как адаптировать ваше приложение к нескольким языкам модульным способом, на основе библиотеки ngx/translate.
👉 https://medium.com/p/d8c13a67117b
👍8🔥1
🔥 Proposal типов в JavaScript
Команда TypeScript предложила добавить в JavaScript синтаксис типов, который движки будут полностью игнорировать, но который могут использовать такие инструменты, как TypeScript, Flow и другие. Это позволит сохранить проверку типов и при этом устранить необходимость в шаге сборки.
Команда считает, что в этом proposal есть большой потенциал, и в этом месяце они выносят его на рассмотрение TC39.
👉 https://devblogs.microsoft.com/typescript/a-proposal-for-type-syntax-in-javascript/
Команда TypeScript предложила добавить в JavaScript синтаксис типов, который движки будут полностью игнорировать, но который могут использовать такие инструменты, как TypeScript, Flow и другие. Это позволит сохранить проверку типов и при этом устранить необходимость в шаге сборки.
Команда считает, что в этом proposal есть большой потенциал, и в этом месяце они выносят его на рассмотрение TC39.
👉 https://devblogs.microsoft.com/typescript/a-proposal-for-type-syntax-in-javascript/
🔥15👍9
🔥 Будущие диагностики в Angular
Команда Angular представила список идей для диагностик. Вы можете проголосовать за понравившиеся и если у вас есть идея для расширенной диагностики, которой нет списке, можно подать запрос на ее разработку.
Возможно, в долгосрочной перспективе будет реализована поддержка сторонних диагностик, авторами которых является сообщество.
👉 https://medium.com/p/53e2fa19ece9
Команда Angular представила список идей для диагностик. Вы можете проголосовать за понравившиеся и если у вас есть идея для расширенной диагностики, которой нет списке, можно подать запрос на ее разработку.
Возможно, в долгосрочной перспективе будет реализована поддержка сторонних диагностик, авторами которых является сообщество.
👉 https://medium.com/p/53e2fa19ece9
🔥7👍4
✨ Оптимизируем приложения Angular
Пришло время проверки производительности ваших приложений, прежде чем они замедлятся.
В статье приведены способы, помогающие определить узкие места компонентов, а затем оптимизировать их и сделать ваши приложения быстрыми.
👉 https://medium.com/p/1e0f70008098
Пришло время проверки производительности ваших приложений, прежде чем они замедлятся.
В статье приведены способы, помогающие определить узкие места компонентов, а затем оптимизировать их и сделать ваши приложения быстрыми.
👉 https://medium.com/p/1e0f70008098
👍15👎3
✨ Решаем головоломки на TypeScript
Вы любите головоломки? В большинстве случаев достаточно базовых возможностей TypeScript, но иногда приходится описывать нестандартные типы и тогда приходится решать головоломки. К счастью, в TS есть все необходимые инструменты для этого.
В статье показаны несколько интересных приемов, для тех кто не любит использовать any.
👉 https://habr.com/ru/post/655705/
Вы любите головоломки? В большинстве случаев достаточно базовых возможностей TypeScript, но иногда приходится описывать нестандартные типы и тогда приходится решать головоломки. К счастью, в TS есть все необходимые инструменты для этого.
В статье показаны несколько интересных приемов, для тех кто не любит использовать any.
👉 https://habr.com/ru/post/655705/
👍7
✨ Создаем плавную прокрутку в Angular
Представим, что у нас есть панель навигации для разделов страницы и нам надо реализовать прокрутку к нужному разделу. Стандартным решением было бы использование якорей, но можно применить директивы.
Давайте посмотрим, как мы можем реализовать эту функциональность с их помощью.
👉 https://medium.com/p/a657e0ea9699
Представим, что у нас есть панель навигации для разделов страницы и нам надо реализовать прокрутку к нужному разделу. Стандартным решением было бы использование якорей, но можно применить директивы.
Давайте посмотрим, как мы можем реализовать эту функциональность с их помощью.
👉 https://medium.com/p/a657e0ea9699
👍10🔥2
✨ SSR на Angular с помощью Nx
Nx — это умная, быстрая и расширяемая система сборки, которая разработана в Nrwl на основе опыта работы в Google.
В этой статье мы добавим SSR в приложение Angular в рабочем пространстве Nx, используя Angular Universal, который обеспечит рендеринг приложения на сервере.
👉 https://medium.com/p/14e2414ca532
Nx — это умная, быстрая и расширяемая система сборки, которая разработана в Nrwl на основе опыта работы в Google.
В этой статье мы добавим SSR в приложение Angular в рабочем пространстве Nx, используя Angular Universal, который обеспечит рендеринг приложения на сервере.
👉 https://medium.com/p/14e2414ca532
🔥9👍1🤯1💩1
✨ Делаем компоненты общего назначения
Вы наверное замечали, что со временем требования к компонентам растут, и в результате их сложность увеличивается, а сопровождаемость снижается. Мы мечтаем о многократном использовании, но на деле разрабатываем компоненты для конкретного случая, и в результате они не могут быть использованы повторно.
Ryan Hoffnan рассказал, как мы можем создавать универсальные компоненты, которые легко читать и поддерживать.
👉 https://medium.com/p/33cecd7a7139
Вы наверное замечали, что со временем требования к компонентам растут, и в результате их сложность увеличивается, а сопровождаемость снижается. Мы мечтаем о многократном использовании, но на деле разрабатываем компоненты для конкретного случая, и в результате они не могут быть использованы повторно.
Ryan Hoffnan рассказал, как мы можем создавать универсальные компоненты, которые легко читать и поддерживать.
👉 https://medium.com/p/33cecd7a7139
👍3👎3🔥1