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

⚠️ Осторожно мошенники⚠️

Тут кто-то взял имя @kirjc поставил мою аватарку и имя и просит деньги в долг.

Это не я, не давайте и шлите в спам

upd: Говорят что от имени Лиса тоже присылают

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

(Добавил еще скрин в комменте)

Кто-то от моего имени и имени Кира клянчит битки — не ведитесь 👇

✨ Скрытие информации в Angular

Главная особенность SPA — это то, что весь код приложения грузится на клиент, это делает приложение отзывчивее, но при этом полностью открытым. SPA может раскрыть: конфигурацию системы, API запросы, явно прописанные данные (ключи, логины, пароли) и т.д.

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

👉 https://habr.com/ru/company/nspk/blog/597097/

✨ Angular Material Theming System: Полное руководство

В последних выпусках Angular Material был переработан API SASS для создания тем.

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

👉 https://indepth.dev/tutorials/angular/angular-material-theming-system-complete-guide

✨ Краткое руководство по Angular и GraphQL

За последние 5 лет GraphQL зарекомендовал себя как наиболее популярная альтернатива REST API. Он обеспечивает гибкий способ реализации API, который можно расширять, не ломая существующих клиентов.

В этом руководстве Holger Schmitz, на примере приложения по «Звездным войнам», показал как использовать GraphQL в Angular.

👉 https://developer.okta.com/blog/2021/10/22/angular-graphql

🦄 Новогодняя история телеграм-бота

Ребята из 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