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

🦄 Новогодняя история телеграм-бота Ребята из Tinkoff написали небольшую игру по мотивам фильма «Один дома» на NestJS и поделились опытом её создания. Игроки будут две недели помогать Кевину программировать устройства в умном доме, чтобы разрушить планы грабителей. Если вам нравится решать головоломки, то вы точно сможете помочь Кевину! 👉 https://habr.com/ru/company/tinkoff/blog/596287/

✨ 5 удивительных возможностей Angular Angular отлично подходит для разработки корпоративного программного обеспечения с большой кодовой базой. А каждая большая кодовая база со временем ухудшается, обычно из-за того, что некоторые практики программирования со временем оказываются неприемлемыми. Radek Busa представил пять простых и аккуратных приемов для рефакторинга вашей кодовой базы. 👉 https://levelup.gitconnected.com/5-angular-features-you-might-not-have-known-about-d809babb51a4

✨ Советы по NgRx NgRx предоставляет возможность реализовать одну и ту же функциональность множеством разных способов. Некоторые из этих способов со временем превратились в лучшие практики, которые позволяют повысить качество кода, производительность и удобство сопровождения. Marko Stanimirović собрал список советов и лучших практик по использованию библиотек @ngrx/store и @ngrx/effects. 👉 https://dev.to/this-is-angular/ngrx-tips-i-needed-in-the-beginning-4hno

✨ Реактивные формы Давайте рассмотрим различные способы создания реактивных форм в Angular, сосредоточившись на цепочках зависимостей. Если FormControl управляет другим FormControl, который, в свою очередь, управляет третьим FormControl, все быстро становится беспорядочным. Stephan Rauh показал, как можно работать с формами неправильно и как делать это лучше. 👉 https://www.beyondjava.net/reactive-forms-validation-formulas

✨ Динамическая загрузка компонентов В Angular вы можете показывать различные компоненты или даже части шаблонов условно, используя встроенные директивы, такие как *ngIf. Использование *ngIf работает, когда количество условных изменений шаблона невелико, но что если представление имеет много изменений? После прохождения этого туториала у вас будет приложение на Angular, которое отображает уникальный контент для аутентифицированного пользователя. 👉 https://developer.okta.com/blog/2021/12/08/angular-dynamic-components

✨ Объяснение перегрузки функций в TypeScript Некоторые функции могут принимать переменное количество аргументов, аргументы разных типов и даже возвращать разные типы в зависимости от того, как вы вызываете функцию. В TypeScript есть механизм перегрузки функций, который позволяет определять функции, которые можно вызывать несколькими способами. Давайте посмотрим, как это работает. 👉 https://dmitripavlutin.com/typescript-function-overloading/

✨ Доклады и воркшопы с TSConf 2021 Каждый год конференция TSConf собирает самых интересных докладчиков, которые делятся своим опытом работы с TypeScript. В этом году говорили о безопасности, GraphQL, тонкостях конфигурации, приватных методах и многом другом. 👉 https://www.youtube.com/playlist?list=PL2z7rCjEG2kubUfEAHu-08-aK3Tyn9Zxe

✨ Продвинутый Typescript Typescript предлагает много замечательных возможностей, в нем постоянно появляются новые механизмы, которые делают ваш код более надежным и легким для рефакторинга. Kevin Kreuzer разобрал некоторые из продвинутых функций. Надеемся, они помогут вам в решении непростых задач. 👉 https://kevinkreuzer.medium.com/advanced-typescript-43331bb4a875

✨ Обнаружение изменений в Angular Механизм обнаружения изменений в Angular прекрасен. Он просто работает и вам практически никогда не приходится думать о нем. Однако, приложив немного усилий, можно его сломать. Вы когда-нибудь видели ошибку ExpressionChangedAfterItHasBeenCheckedError? Когда-нибудь запускали обнаружение изменений вручную? Что именно делает ChangeDetectionStrategy.OnPush? Давайте вместе разберемся с этими вопросами. 👉 https://www.beyondjava.net/zonejs

🦄 Пять причин для ИТ-компании полюбить опенсорс Мы почти каждый день пользуемся опенсорсом, который часто появляется как побочный продукт коммерческой разработки. Роман Седов на примерах опыта Taiga UI — библиотеки компонентов под Angular, которая долго развивалась внутри компании и недавно была выложена в опенсорс, показал как стремление не только брать от сообщества, но и отдавать, приносит ряд преимуществ организации. 👉 https://habr.com/ru/company/tinkoff/blog/593643/

✨ Ленивая загрузка компонента без маршрутизации Одна из самых востребованных функций в Angular — ленивая загрузка компонента, когда он вам нужен. Это очень простая процедура через маршрутизацию, которая хорошо документирована. Но что, если вы не хотите использовать маршрутизатор или хотите лениво загружать компонент программно через ваш код? 👉 https://www.wittyprogramming.dev/articles/lazy-load-component-angular-without-routing/

✨ Как оптимизировать код на 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

❄️ Генерируем бумажные снежинки Скоро начинаются праздники, а вместе с ними и украшение наших домов. По этому поводу Денис Пешехонов решил написать процедурный генератор лекала для вырезания из бумаги снежинок. И вот, что у него получилось. 👉 https://habr.com/ru/post/592659/

✨ Миграция на TypeScript TypeScript разработан для легкого постепенного внедрения в существующие проекты Javascript, особенно с большой кодовой базой, где переход на новый язык может оказаться невозможным. В этом посте Salem Hilal рассказал как в Etsy осуществляли миграцию, о некоторых интересных технических проблемах, которые возникли в результате, и о том, что потребовалось для обучения большой команды. 👉 https://habr.com/ru/company/skillfactory/blog/592311/

✨ 6 подводных камней TypeScript TypeScript предлагает ряд возможностей, которые помогают программистам писать более надежный код, но несмотря на это в нем встречаются и недочеты. Arnold Abraham рассказал о том какие подводные камни таит в себе типизация предлагаемая TypeScript и его неожиданном поведении. 👉 https://betterprogramming.pub/6-hidden-pitfalls-of-typescript-you-should-know-d7bae9cf4aa5

✨ Отслеживаем область взаимодействия с пользователем Иногда надо знать, с какой областью страницы взаимодействует пользователь. Например, когда вы делаете выпадающий список и хотите знать, когда его закрыть. Базовая реализация может отслеживать нажатия мыши и проверять, произошли ли они за пределами выпадающего списка. Но пользователь может использовать клавиатуру для навигации. В этой статье 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/