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

✨ Отслеживаем область взаимодействия с пользователем

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

В этой статье Alex Inkin, на примере выпадающего меню, рассказывает о подходе, который используется в библиотеке компонентов Taiga UI.

👉 https://indepth.dev/posts/1479/tracking-user-interaction-area

✨ Как поддерживать IE11 на Angular 13

Angular 13 полностью отказался от поддержки IE11. Вы можете оставаться на Angular 12, но это не лучший вариант в долгосрочной перспективе.

Mark Thompson предложил несколько способов поддержки своих пользователей при обновлении версии Angular.

👉 https://dev.to/bitovi/how-to-support-ie11-users-as-you-move-to-angular-13-179j

🚀 Quiz приложение на Angular и Strapi

Создаем Quiz приложение, которое будет использовать Strapi в качестве бэкенда. Strapi автоматически создаст API и предоставит панель администратора, для добавления контента. Это значительно сократит время создания сервера.

Следуя этому руководству, вы узнаете, как настроить Strapi и использовать его вместе с Angular.

👉 https://strapi.io/blog/build-a-quiz-app-using-a-strapi-api-with-angular

🎉 NgRuAir #19 Angular 13 обзор

Сегодня 25.11 в 20.00 по Москве состоится 19 выпуск NgRuAir.

В этом выпуске мы обсудим фичи Angular 13, и фичи предстоящего Angular 14.

👉 https://youtu.be/dcWD7sx9aLU

✨ 5 лучших плагинов ESLint для TypeScript

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

В этой статье Eugene Obrezkov @ghaiklor рассказал обо всех плагинах, которые он использует каждый день для разработки на TypeScript. Надеемся они повысят вашу продуктивность в работе с TypeScript.

👉 https://blog.ghaiklor.com/2021/07/21/top-5-eslint-plugins-for-typescript-development/

✨ Создаем Observable

Ben Lesh, наиболее известный своим участием в написании RxJS, постарался помочь людям понять, что такое observable. Развеял кодом волшебство вокруг него, а @qmzik перевел.

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

✨ Настраиваем проект на TypeScript

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

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

👉 https://blog.ghaiklor.com/2021/02/26/how-to-setup-typescript-projects-in-2021/

✨ Современный CSS в Angular

В Angular v13 удалили поддержку IE11 — это позволило Angular применять современные стили, такие как CSS Grid, переменные CSS, calc() и многое другое.

В этой статье рассматриваются новые возможности в стилизации, которые влияют на то, как мы определяем стили в новых приложениях Angular.

Какая новая возможность вам больше всего понравилась?

👉 https://blog.angular.io/the-new-state-of-css-in-angular-bec011715ee6

🦄 Индикатор загрузки на Angular

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

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

И помните, в мире грустит один котенок Вадим Макеев, когда вы игнорируете семантику и забываете про доступность.

👉 https://habr.com/ru/company/tinkoff/blog/589735/

✨ Template Literal Types в TypeScript

Template Literal Types динамически определяет новые литеральные типы со всеми возможными комбинациями. Таким образом, вы можете быстро создавать типы из других. Typescript также поставляется с утилитами для работы со строками, которые помогают преобразовать строковые литералы.

В этой статье рассматривается, как их использовать и случаи их применения.

👉 https://betterprogramming.pub/mastering-typescript-template-literal-types-f4131a94ffb1

💳 E-Commerce сайт на Angular

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

В этом руководстве рассказывается, как создать сайт электронной коммерции с помощью Angular. Сайт будет использовать Commerce Layer в качестве headless e-commerce API и Paypal для обработки платежей.

👉https://www.smashingmagazine.com/2021/07/ecommerce-angular11-headless-paypal/

⚡️ Мощь дженериков в TypeScript

Все еще не освоили дженерики? Тогда вам будет полезно узнать о их параметризации, научиться с помощью них типизировать переменные, функции и методы, а также классы. Узнать, как можно ограничить типы и при необходимости помочь TypeScript с выведением типов, использовав Type Guard.

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

👉 https://habr.com/ru/company/tinkoff/blog/588655/

🔍 Поиск по адресу с помощью Angular и Google Maps

Google Maps одно из самых известных приложений. Начиная с 9-й версии Angular, оно доступно в виде компонента, но все равно часто приходится обращаться к Google Maps API.

Kevin Kreuzer облегчил нам жизнь и показал, как реализовать карту Google с поисковой строкой и автозаполнением адреса.

👉 https://kevinkreuzer.medium.com/how-to-implement-an-address-search-with-angular-and-google-maps-32a2df09f8e9

🚀 Делаем телеграф c RxJS и Angular

Изучите RxJS, внедрение зависимостей, и директивы Angular в увлекательном упражнении по воссозданию аналогового телеграфа с азбукой Морзе.

Давайте вместе создадим работающую демонстрацию, которая выглядит и звучит великолепно. Поехали!

👉 https://indepth.dev/posts/1481/rxjs-telegraph

🚀 Познаем реактивность

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

👉 https://habr.com/ru/company/timeweb/blog/586450/

✨ Легкий старт в создании библиотеки компонентов

В вашей компании может быть свой уникальный дизайн, а возможности стилизации существующих UI библиотек не подходить. В таком случае имеет смысл создать свою библиотеку компонентов.

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

Kevin Kreuzer ответил на все эти вопросы.

👉 https://kevinkreuzer.medium.com/angular-component-library-best-practices-a8318bae6257

🎉 Мы создали канал с анонсами тех.стримов

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

👋 Если вам важно держать руку на пульсе технологий, подписывайтесь.

👉 https://t.me/techStreamsRu

🔥 Роль микрофронтендов в будущем Angular

Многие продукты в процессе роста сталкиваются с рядом проблем, связанных с масштабированием. На стороне сервера используются микросервисы для разделения приложений, но как быть с фронтендом? Здесь приходят на помощь микрофронтенды.

Давайте вместе выясним, в чем их преимущества и почему Angular превосходно подходит для микрофронтендов.

👉 https://itnext.io/how-micro-frontend-changes-the-future-of-angular-bb4deb2cfdad

🤔 Интерфейс или тип?

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

В статье Todd Motto показывает основные различия между типами и интерфейсами в TypeScript, помогая принять более взвешенное решение.

👉 https://ultimatecourses.com/blog/typescript-interfaces-vs-types

🎉 Новая версия Angular 13 уже доступна

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

Что интересного:
— Улучшена скорость сборки
— Ускорение тестов и дебага
— View Engine не доступен
— Новый Angular Package Format
— Улучшен a11y в Angular Material
— IE11 теперь не поддерживается
— RxJS 7.4 по умолчанию
— TypeScript 4.4

Чтобы обновиться, выполните следующую команду:
ng update

👉 http://goo.gle/angular-v13