🦊 Angular Fox 🚀 — русскогорящие новости сообщества

✨ Создаем плавную прокрутку в Angular

Представим, что у нас есть панель навигации для разделов страницы и нам надо реализовать прокрутку к нужному разделу. Стандартным решением было бы использование якорей, но можно применить директивы.

Давайте посмотрим, как мы можем реализовать эту функциональность с их помощью.

👉 https://medium.com/p/a657e0ea9699

✨ Решаем головоломки на TypeScript

Вы любите головоломки? В большинстве случаев достаточно базовых возможностей TypeScript, но иногда приходится описывать нестандартные типы и тогда приходится решать головоломки. К счастью, в TS есть все необходимые инструменты для этого.

В статье показаны несколько интересных приемов, для тех кто не любит использовать any.

👉 https://habr.com/ru/post/655705/

✨ Оптимизируем приложения Angular

Пришло время проверки производительности ваших приложений, прежде чем они замедлятся.

В статье приведены способы, помогающие определить узкие места компонентов, а затем оптимизировать их и сделать ваши приложения быстрыми.

👉 https://medium.com/p/1e0f70008098

🔥 Будущие диагностики в Angular

Команда Angular представила список идей для диагностик. Вы можете проголосовать за понравившиеся и если у вас есть идея для расширенной диагностики, которой нет списке, можно подать запрос на ее разработку.

Возможно, в долгосрочной перспективе будет реализована поддержка сторонних диагностик, авторами которых является сообщество.

👉 https://medium.com/p/53e2fa19ece9

🔥 Proposal типов в JavaScript

Команда TypeScript предложила добавить в JavaScript синтаксис типов, который движки будут полностью игнорировать, но который могут использовать такие инструменты, как TypeScript, Flow и другие. Это позволит сохранить проверку типов и при этом устранить необходимость в шаге сборки.

Команда считает, что в этом proposal есть большой потенциал, и в этом месяце они выносят его на рассмотрение TC39.

👉 https://devblogs.microsoft.com/typescript/a-proposal-for-type-syntax-in-javascript/

✨ Делаем интернационализацию

Обычно все переводы загружаются сразу, но неизвестно будет ли пользователь пользоваться всеми доступными функциями. Так зачем же загружать переводы с самого начала для модулей, которые еще не загружены?

В этой статье вы узнаете, как адаптировать ваше приложение к нескольким языкам модульным способом, на основе библиотеки ngx/translate.

👉 https://medium.com/p/d8c13a67117b

✨ Реализуем скелетоны

Скелетоны — это элементы-заполнители, которые отображаются перед загрузкой содержимого веб-страницы. Скелетоны передают визуальное впечатление о функции, что дает им преимущество перед спиннерами.

Netanel Basal поделился минимальной реализацией скелетонов с помощью структурных директив.

👉 https://medium.com/p/7490ffdecc1b

✨ Шпаргалка по уязвимостям

Обеспечение безопасности приложений — непростое занятие. Приложения состоят из логики на стороне сервера и клиента, хранения данных, API и т.д. Учитывая все компоненты, которые необходимо защитить, создание безопасного приложения может показаться сложной задачей.

К счастью, большинство уязвимостей имеют одни и те же корни. Изучив причины их возникновения и способы их обнаружения, можно научиться защищать свои приложения.

👉 https://medium.com/p/a3b36f22a0fd

✨ Dependency Injection в Angular

Внедрение зависимостей — это паттерн проектирования, в котором мы запрашиваем зависимости у внешних ресурсов, а не создаем их. Это уникальная особенность Angular, которая помогает разработчикам избежать ненужных хлопот в их коде.

В этой небольшой статье Chameera Dulanga рассказал о особенностях DI в Angular.

👉 https://medium.com/p/181009608a91

✨ Отлаживаем Angular приложения

При знакомстве с новым фреймворком или библиотекой важно знать, как отладить его, если что-то пошло не так. В Angular есть множество полезных инструментов, которые помогут вам эффективно отлаживать ваше приложение.

Walter Kuppens рассказал о нескольких способах отладки. Надеемся, они окажутся полезными в ваших поисках ошибок.

👉 https://www.thisdot.co/blog/debugging-strategies-for-angular-applications

✨ Используем RxJS в Lit

Lit создан на основе стандартов Web Components и добавляет реактивность, декларативные шаблоны и несколько продуманных функций, сокращающих количество шаблонов и облегчающих работу.

В этой статье мы узнаем, как использовать RxJS с Lit и как они хорошо работают вместе.

👉 https://medium.com/p/ace3d13f3c24

✨ Создаем веб-компоненты с помощью Lit

Веб-компоненты позволяют создавать многократно используемые элементы, которые могут использоваться с любым фреймворком или вообще без него.
Однако создавать их с нуля проблематично, но мы можем делать быстрые и легкие веб-компоненты с помощью Lit.

Netanel Basal показал, как использовать веб-компонент совместно с популярными фреймворками.

👉 https://medium.com/p/3c640a8ba46

✨ Осваиваем CI/CD

Деплой вручную — рутинная задача, которая отнимает много времени и чревата ошибками. Сегодня эта практика является антипаттерном. К счастью, современные инструменты позволяют выпускать новые версии вашего приложения легко и просто.

Bobby Galli показал, как создать дружественный CI/CD процесс, опубликовать библиотеку в npm и развернуть приложение на GitHub Pages.

👉 https://medium.com/p/be9a1485d22b

✨ Меняем параметры функции на деструктуризацию

Функции в JavaScript могут быть разными, но в первую очередь это контракт. Когда мы определяем функцию, мы определяем контракт между вызывающей стороной и исполнителем.

JeB Barabanov рассказал, как контракты имеют тенденцию меняться со временем и как это может отразиться на вашем коде.

👉 https://medium.com/p/d320cf0932df

✨ Создаем динамические компоненты

В Angular 13 упростили API для создания динамических компонентов, теперь не нужно беспокоиться о создании фабрики, инжектировать вспомогательные зависимости, также устарели классы ComponentFactory и ComponentFactoryResolver.

Анастасия Анисимова рассказала как выглядит новый процесс динамического добавления компонентов.

👉 https://habr.com/ru/company/skyeng/blog/652855/

✨ Поднимаем свой уровень в Angular

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

Ivano Di Gese попытался обобщить лучшие практики, чтобы ускорить ваш прогресс в освоении Angular.

👉 https://medium.com/p/9c50dccb26a8

✨ Используем GraphQL с Angular

GraphQL с каждым днем становится все более востребованным. К счастью в экосистеме Angular есть Apollo Angular, который не требует сложной настройки. Вы можете сразу приступить к созданию приложения.

В этом посте Walter Kuppens показал, как легко можно подключиться к PokeAPI используя Apollo Angular.

👉 https://www.thisdot.co/blog/connecting-to-pokeapi-with-angular-and-apollo-client

✨ Разбираем верстку в Angular

Из-за отсутствия примеров в документации Angular Material, некоторые разработчики начинают изобретать собственные решения для создания сеток и лейаутов, хотя все это можно реализовать средствами Angular CDK.

Александр Серенко на примере макета с тремя вариантами отображения, рассмотрел нюансы верстки в Angular.

👉 https://medium.com/p/bd4f15ebbf54

✨ Перехватываем HTTP запросы

Перехватчики позволяют выполнять операции над запросами на пути к серверу и обратно, это делает их идеальным местом для добавления заголовков, кэширования и обработки ошибок.

В этой статье рассмотрены различные способы обработки неудачных HTTP запросов с помощью RxJS.

👉 https://dev.to/this-is-angular/angular-error-interceptor-12bg

✨ Понимание RxJS в Angular

Одна из самых частых жалоб об Angular, на самом деле относится не к Angular, а скорее к RxJS. Многие говорят, что его слишком сложно изучать.

Sam Redmond написал краткое руководством, которое поможет вам понять, как Observables работают в экосистеме Angular. Как только вы поймете RxJS, вы сможете использовать его где угодно.

👉 https://sam-redmond.com/understanding-rxjs-with-angular-40eefeae5c02