🔥 Роль микрофронтендов в будущем Angular
Многие продукты в процессе роста сталкиваются с рядом проблем, связанных с масштабированием. На стороне сервера используются микросервисы для разделения приложений, но как быть с фронтендом? Здесь приходят на помощь микрофронтенды.
Давайте вместе выясним, в чем их преимущества и почему Angular превосходно подходит для микрофронтендов.
👉 https://itnext.io/how-micro-frontend-changes-the-future-of-angular-bb4deb2cfdad
Многие продукты в процессе роста сталкиваются с рядом проблем, связанных с масштабированием. На стороне сервера используются микросервисы для разделения приложений, но как быть с фронтендом? Здесь приходят на помощь микрофронтенды.
Давайте вместе выясним, в чем их преимущества и почему Angular превосходно подходит для микрофронтендов.
👉 https://itnext.io/how-micro-frontend-changes-the-future-of-angular-bb4deb2cfdad
🎉 Мы создали канал с анонсами тех.стримов
Каждый день проходит множество трансляций, за которыми не уследить. На нашем новом канале публикуются самые интересные из них, чтобы вы ничего не пропустили.
👋 Если вам важно держать руку на пульсе технологий, подписывайтесь.
👉 https://t.me/techStreamsRu
Каждый день проходит множество трансляций, за которыми не уследить. На нашем новом канале публикуются самые интересные из них, чтобы вы ничего не пропустили.
👋 Если вам важно держать руку на пульсе технологий, подписывайтесь.
👉 https://t.me/techStreamsRu
✨ Легкий старт в создании библиотеки компонентов
В вашей компании может быть свой уникальный дизайн, а возможности стилизации существующих UI библиотек не подходить. В таком случае имеет смысл создать свою библиотеку компонентов.
С чего начать? Каков наилучший способ тестирования? Как ее документировать? Как продемонстрировать компоненты дизайнерам и заинтересованным лицам?
Kevin Kreuzer ответил на все эти вопросы.
👉 https://kevinkreuzer.medium.com/angular-component-library-best-practices-a8318bae6257
В вашей компании может быть свой уникальный дизайн, а возможности стилизации существующих UI библиотек не подходить. В таком случае имеет смысл создать свою библиотеку компонентов.
С чего начать? Каков наилучший способ тестирования? Как ее документировать? Как продемонстрировать компоненты дизайнерам и заинтересованным лицам?
Kevin Kreuzer ответил на все эти вопросы.
👉 https://kevinkreuzer.medium.com/angular-component-library-best-practices-a8318bae6257
🚀 Познаем реактивность
Дмитрий Карловский, большой любитель реактивности, разобрал различные аспекты её реализации, вытащил на поверхность подводные камни, и показал как реактивность решает или наоборот усугубляет проблемы в программировании.
👉 https://habr.com/ru/company/timeweb/blog/586450/
Дмитрий Карловский, большой любитель реактивности, разобрал различные аспекты её реализации, вытащил на поверхность подводные камни, и показал как реактивность решает или наоборот усугубляет проблемы в программировании.
👉 https://habr.com/ru/company/timeweb/blog/586450/
🚀 Делаем телеграф c RxJS и Angular
Изучите RxJS, внедрение зависимостей, и директивы Angular в увлекательном упражнении по воссозданию аналогового телеграфа с азбукой Морзе.
Давайте вместе создадим работающую демонстрацию, которая выглядит и звучит великолепно. Поехали!
👉 https://indepth.dev/posts/1481/rxjs-telegraph
Изучите RxJS, внедрение зависимостей, и директивы Angular в увлекательном упражнении по воссозданию аналогового телеграфа с азбукой Морзе.
Давайте вместе создадим работающую демонстрацию, которая выглядит и звучит великолепно. Поехали!
👉 https://indepth.dev/posts/1481/rxjs-telegraph
🔍 Поиск по адресу с помощью 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
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
⚡️ Мощь дженериков в TypeScript
Все еще не освоили дженерики? Тогда вам будет полезно узнать о их параметризации, научиться с помощью них типизировать переменные, функции и методы, а также классы. Узнать, как можно ограничить типы и при необходимости помочь TypeScript с выведением типов, использовав Type Guard.
Статья дает основные знания, которые помогут уверенно использовать обобщенные типы.
👉 https://habr.com/ru/company/tinkoff/blog/588655/
Все еще не освоили дженерики? Тогда вам будет полезно узнать о их параметризации, научиться с помощью них типизировать переменные, функции и методы, а также классы. Узнать, как можно ограничить типы и при необходимости помочь TypeScript с выведением типов, использовав Type Guard.
Статья дает основные знания, которые помогут уверенно использовать обобщенные типы.
👉 https://habr.com/ru/company/tinkoff/blog/588655/
🤩2
💳 E-Commerce сайт на Angular
Все больше покупок совершается в Интернете. Это делает разработку интернет-магазина, для владельцев бизнеса, крайне важным делом.
В этом руководстве рассказывается, как создать сайт электронной коммерции с помощью Angular. Сайт будет использовать Commerce Layer в качестве headless e-commerce API и Paypal для обработки платежей.
👉https://www.smashingmagazine.com/2021/07/ecommerce-angular11-headless-paypal/
Все больше покупок совершается в Интернете. Это делает разработку интернет-магазина, для владельцев бизнеса, крайне важным делом.
В этом руководстве рассказывается, как создать сайт электронной коммерции с помощью Angular. Сайт будет использовать Commerce Layer в качестве headless e-commerce API и Paypal для обработки платежей.
👉https://www.smashingmagazine.com/2021/07/ecommerce-angular11-headless-paypal/
✨ Template Literal Types в TypeScript
Template Literal Types динамически определяет новые литеральные типы со всеми возможными комбинациями. Таким образом, вы можете быстро создавать типы из других. Typescript также поставляется с утилитами для работы со строками, которые помогают преобразовать строковые литералы.
В этой статье рассматривается, как их использовать и случаи их применения.
👉 https://betterprogramming.pub/mastering-typescript-template-literal-types-f4131a94ffb1
Template Literal Types динамически определяет новые литеральные типы со всеми возможными комбинациями. Таким образом, вы можете быстро создавать типы из других. Typescript также поставляется с утилитами для работы со строками, которые помогают преобразовать строковые литералы.
В этой статье рассматривается, как их использовать и случаи их применения.
👉 https://betterprogramming.pub/mastering-typescript-template-literal-types-f4131a94ffb1
🦄 Индикатор загрузки на Angular
Представьте, к вам поступила задача, сверстать индикатор загрузки. Казалось бы простая задача. Что в ней может пойти не так?
Барсуков Никита рассказал о возможных проблемах и предложил свое видение того, как можно решить эту задачу не нарушая семантики верстки и не игнорируя доступность.
И помните, в мире грустит одинкотенок Вадим Макеев, когда вы игнорируете семантику и забываете про доступность.
👉 https://habr.com/ru/company/tinkoff/blog/589735/
Представьте, к вам поступила задача, сверстать индикатор загрузки. Казалось бы простая задача. Что в ней может пойти не так?
Барсуков Никита рассказал о возможных проблемах и предложил свое видение того, как можно решить эту задачу не нарушая семантики верстки и не игнорируя доступность.
И помните, в мире грустит один
👉 https://habr.com/ru/company/tinkoff/blog/589735/
✨ Современный CSS в Angular
В Angular v13 удалили поддержку IE11 — это позволило Angular применять современные стили, такие как CSS Grid, переменные CSS, calc() и многое другое.
В этой статье рассматриваются новые возможности в стилизации, которые влияют на то, как мы определяем стили в новых приложениях Angular.
Какая новая возможность вам больше всего понравилась?
👉 https://blog.angular.io/the-new-state-of-css-in-angular-bec011715ee6
В Angular v13 удалили поддержку IE11 — это позволило Angular применять современные стили, такие как CSS Grid, переменные CSS, calc() и многое другое.
В этой статье рассматриваются новые возможности в стилизации, которые влияют на то, как мы определяем стили в новых приложениях Angular.
Какая новая возможность вам больше всего понравилась?
👉 https://blog.angular.io/the-new-state-of-css-in-angular-bec011715ee6
✨ Настраиваем проект на TypeScript
Порой трудно настроить правильную конфигурацию для TypeScript проектов, так как несмотря на повсеместное использование TypeScript, в нем еще остаются вещи, которые можно улучшить.
В этой статье рассматривается конфигурация TypeScript и что к нему можно добавить, чтобы получить превосходную инфраструктуру разработки.
👉 https://blog.ghaiklor.com/2021/02/26/how-to-setup-typescript-projects-in-2021/
Порой трудно настроить правильную конфигурацию для TypeScript проектов, так как несмотря на повсеместное использование TypeScript, в нем еще остаются вещи, которые можно улучшить.
В этой статье рассматривается конфигурация TypeScript и что к нему можно добавить, чтобы получить превосходную инфраструктуру разработки.
👉 https://blog.ghaiklor.com/2021/02/26/how-to-setup-typescript-projects-in-2021/
✨ Создаем Observable
Ben Lesh, наиболее известный своим участием в написании RxJS, постарался помочь людям понять, что такое observable. Развеял кодом волшебство вокруг него, а @qmzik перевел.
👉 https://habr.com/ru/post/568064/
Ben Lesh, наиболее известный своим участием в написании RxJS, постарался помочь людям понять, что такое observable. Развеял кодом волшебство вокруг него, а @qmzik перевел.
👉 https://habr.com/ru/post/568064/
👍1
✨ 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/
ESLint — отличный инструмент и позволяет создавать собственные плагины, но к сожалению, ESLint из коробки не предназначен для проверки TypeScript.
В этой статье Eugene Obrezkov @ghaiklor рассказал обо всех плагинах, которые он использует каждый день для разработки на TypeScript. Надеемся они повысят вашу продуктивность в работе с TypeScript.
👉 https://blog.ghaiklor.com/2021/07/21/top-5-eslint-plugins-for-typescript-development/
🎉 NgRuAir #19 Angular 13 обзор
Сегодня 25.11 в 20.00 по Москве состоится 19 выпуск NgRuAir.
В этом выпуске мы обсудим фичи Angular 13, и фичи предстоящего Angular 14.
👉 https://youtu.be/dcWD7sx9aLU
Сегодня 25.11 в 20.00 по Москве состоится 19 выпуск NgRuAir.
В этом выпуске мы обсудим фичи Angular 13, и фичи предстоящего Angular 14.
👉 https://youtu.be/dcWD7sx9aLU
🚀 Quiz приложение на Angular и Strapi
Создаем Quiz приложение, которое будет использовать Strapi в качестве бэкенда. Strapi автоматически создаст API и предоставит панель администратора, для добавления контента. Это значительно сократит время создания сервера.
Следуя этому руководству, вы узнаете, как настроить Strapi и использовать его вместе с Angular.
👉 https://strapi.io/blog/build-a-quiz-app-using-a-strapi-api-with-angular
Создаем Quiz приложение, которое будет использовать Strapi в качестве бэкенда. Strapi автоматически создаст API и предоставит панель администратора, для добавления контента. Это значительно сократит время создания сервера.
Следуя этому руководству, вы узнаете, как настроить Strapi и использовать его вместе с Angular.
👉 https://strapi.io/blog/build-a-quiz-app-using-a-strapi-api-with-angular
✨ Как поддерживать 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
Angular 13 полностью отказался от поддержки IE11. Вы можете оставаться на Angular 12, но это не лучший вариант в долгосрочной перспективе.
Mark Thompson предложил несколько способов поддержки своих пользователей при обновлении версии Angular.
👉 https://dev.to/bitovi/how-to-support-ie11-users-as-you-move-to-angular-13-179j
✨ Отслеживаем область взаимодействия с пользователем
Иногда надо знать, с какой областью страницы взаимодействует пользователь. Например, когда вы делаете выпадающий список и хотите знать, когда его закрыть. Базовая реализация может отслеживать нажатия мыши и проверять, произошли ли они за пределами выпадающего списка. Но пользователь может использовать клавиатуру для навигации.
В этой статье Alex Inkin, на примере выпадающего меню, рассказывает о подходе, который используется в библиотеке компонентов Taiga UI.
👉 https://indepth.dev/posts/1479/tracking-user-interaction-area
Иногда надо знать, с какой областью страницы взаимодействует пользователь. Например, когда вы делаете выпадающий список и хотите знать, когда его закрыть. Базовая реализация может отслеживать нажатия мыши и проверять, произошли ли они за пределами выпадающего списка. Но пользователь может использовать клавиатуру для навигации.
В этой статье Alex Inkin, на примере выпадающего меню, рассказывает о подходе, который используется в библиотеке компонентов Taiga UI.
👉 https://indepth.dev/posts/1479/tracking-user-interaction-area
✨ 6 подводных камней TypeScript
TypeScript предлагает ряд возможностей, которые помогают программистам писать более надежный код, но несмотря на это в нем встречаются и недочеты.
Arnold Abraham рассказал о том какие подводные камни таит в себе типизация предлагаемая TypeScript и его неожиданном поведении.
👉 https://betterprogramming.pub/6-hidden-pitfalls-of-typescript-you-should-know-d7bae9cf4aa5
TypeScript предлагает ряд возможностей, которые помогают программистам писать более надежный код, но несмотря на это в нем встречаются и недочеты.
Arnold Abraham рассказал о том какие подводные камни таит в себе типизация предлагаемая TypeScript и его неожиданном поведении.
👉 https://betterprogramming.pub/6-hidden-pitfalls-of-typescript-you-should-know-d7bae9cf4aa5
✨ Миграция на TypeScript
TypeScript разработан для легкого постепенного внедрения в существующие проекты Javascript, особенно с большой кодовой базой, где переход на новый язык может оказаться невозможным.
В этом посте Salem Hilal рассказал как в Etsy осуществляли миграцию, о некоторых интересных технических проблемах, которые возникли в результате, и о том, что потребовалось для обучения большой команды.
👉 https://habr.com/ru/company/skillfactory/blog/592311/
TypeScript разработан для легкого постепенного внедрения в существующие проекты Javascript, особенно с большой кодовой базой, где переход на новый язык может оказаться невозможным.
В этом посте Salem Hilal рассказал как в Etsy осуществляли миграцию, о некоторых интересных технических проблемах, которые возникли в результате, и о том, что потребовалось для обучения большой команды.
👉 https://habr.com/ru/company/skillfactory/blog/592311/
❄️ Генерируем бумажные снежинки
Скоро начинаются праздники, а вместе с ними и украшение наших домов. По этому поводу Денис Пешехонов решил написать процедурный генератор лекала для вырезания из бумаги снежинок.
И вот, что у него получилось.
👉 https://habr.com/ru/post/592659/
Скоро начинаются праздники, а вместе с ними и украшение наших домов. По этому поводу Денис Пешехонов решил написать процедурный генератор лекала для вырезания из бумаги снежинок.
И вот, что у него получилось.
👉 https://habr.com/ru/post/592659/