✨ 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/
✨ Как оптимизировать код на Angular
Уменьшение размера кода имеет решающее значение для производительности. Удалить ненужный код из основного пакета поможет механизм ленивой загрузки, в сочетании с анализаторами пакетов.
Lakin Mohapatra поделился тем как он оптимизировал беспорядочную кодовую базу на Angular и сократил время загрузки страницы в 10 раз.
👉 https://lakin-mohapatra.medium.com/how-i-optimized-messy-angular-codebase-and-reduced-page-load-time-by-20x-faster-d3711dd28e14
Уменьшение размера кода имеет решающее значение для производительности. Удалить ненужный код из основного пакета поможет механизм ленивой загрузки, в сочетании с анализаторами пакетов.
Lakin Mohapatra поделился тем как он оптимизировал беспорядочную кодовую базу на Angular и сократил время загрузки страницы в 10 раз.
👉 https://lakin-mohapatra.medium.com/how-i-optimized-messy-angular-codebase-and-reduced-page-load-time-by-20x-faster-d3711dd28e14
✨ Ленивая загрузка компонента без маршрутизации
Одна из самых востребованных функций в Angular — ленивая загрузка компонента, когда он вам нужен. Это очень простая процедура через маршрутизацию, которая хорошо документирована. Но что, если вы не хотите использовать маршрутизатор или хотите лениво загружать компонент программно через ваш код?
👉 https://www.wittyprogramming.dev/articles/lazy-load-component-angular-without-routing/
Одна из самых востребованных функций в Angular — ленивая загрузка компонента, когда он вам нужен. Это очень простая процедура через маршрутизацию, которая хорошо документирована. Но что, если вы не хотите использовать маршрутизатор или хотите лениво загружать компонент программно через ваш код?
👉 https://www.wittyprogramming.dev/articles/lazy-load-component-angular-without-routing/
🦄 Пять причин для ИТ-компании полюбить опенсорс
Мы почти каждый день пользуемся опенсорсом, который часто появляется как побочный продукт коммерческой разработки.
Роман Седов на примерах опыта Taiga UI — библиотеки компонентов под Angular, которая долго развивалась внутри компании и недавно была выложена в опенсорс, показал как стремление не только брать от сообщества, но и отдавать, приносит ряд преимуществ организации.
👉 https://habr.com/ru/company/tinkoff/blog/593643/
Мы почти каждый день пользуемся опенсорсом, который часто появляется как побочный продукт коммерческой разработки.
Роман Седов на примерах опыта Taiga UI — библиотеки компонентов под Angular, которая долго развивалась внутри компании и недавно была выложена в опенсорс, показал как стремление не только брать от сообщества, но и отдавать, приносит ряд преимуществ организации.
👉 https://habr.com/ru/company/tinkoff/blog/593643/
✨ Обнаружение изменений в Angular
Механизм обнаружения изменений в Angular прекрасен. Он просто работает и вам практически никогда не приходится думать о нем. Однако, приложив немного усилий, можно его сломать.
Вы когда-нибудь видели ошибку ExpressionChangedAfterItHasBeenCheckedError? Когда-нибудь запускали обнаружение изменений вручную? Что именно делает ChangeDetectionStrategy.OnPush?
Давайте вместе разберемся с этими вопросами.
👉 https://www.beyondjava.net/zonejs
Механизм обнаружения изменений в Angular прекрасен. Он просто работает и вам практически никогда не приходится думать о нем. Однако, приложив немного усилий, можно его сломать.
Вы когда-нибудь видели ошибку ExpressionChangedAfterItHasBeenCheckedError? Когда-нибудь запускали обнаружение изменений вручную? Что именно делает ChangeDetectionStrategy.OnPush?
Давайте вместе разберемся с этими вопросами.
👉 https://www.beyondjava.net/zonejs
✨ Продвинутый Typescript
Typescript предлагает много замечательных возможностей, в нем постоянно появляются новые механизмы, которые делают ваш код более надежным и легким для рефакторинга.
Kevin Kreuzer разобрал некоторые из продвинутых функций. Надеемся, они помогут вам в решении непростых задач.
👉 https://kevinkreuzer.medium.com/advanced-typescript-43331bb4a875
Typescript предлагает много замечательных возможностей, в нем постоянно появляются новые механизмы, которые делают ваш код более надежным и легким для рефакторинга.
Kevin Kreuzer разобрал некоторые из продвинутых функций. Надеемся, они помогут вам в решении непростых задач.
👉 https://kevinkreuzer.medium.com/advanced-typescript-43331bb4a875
✨ Доклады и воркшопы с TSConf 2021
Каждый год конференция TSConf собирает самых интересных докладчиков, которые делятся своим опытом работы с TypeScript.
В этом году говорили о безопасности, GraphQL, тонкостях конфигурации, приватных методах и многом другом.
👉 https://www.youtube.com/playlist?list=PL2z7rCjEG2kubUfEAHu-08-aK3Tyn9Zxe
Каждый год конференция TSConf собирает самых интересных докладчиков, которые делятся своим опытом работы с TypeScript.
В этом году говорили о безопасности, GraphQL, тонкостях конфигурации, приватных методах и многом другом.
👉 https://www.youtube.com/playlist?list=PL2z7rCjEG2kubUfEAHu-08-aK3Tyn9Zxe
✨ Объяснение перегрузки функций в TypeScript
Некоторые функции могут принимать переменное количество аргументов, аргументы разных типов и даже возвращать разные типы в зависимости от того, как вы вызываете функцию.
В TypeScript есть механизм перегрузки функций, который позволяет определять функции, которые можно вызывать несколькими способами.
Давайте посмотрим, как это работает.
👉 https://dmitripavlutin.com/typescript-function-overloading/
Некоторые функции могут принимать переменное количество аргументов, аргументы разных типов и даже возвращать разные типы в зависимости от того, как вы вызываете функцию.
В TypeScript есть механизм перегрузки функций, который позволяет определять функции, которые можно вызывать несколькими способами.
Давайте посмотрим, как это работает.
👉 https://dmitripavlutin.com/typescript-function-overloading/