✨ Введение в дженерики для новичков

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

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

👉 https://dev.to/this-is-learning/a-gentle-introduction-to-generics-in-typescript-3ap3

✨ Повышаем гибкость компонентов с помощью Fallback Content в ng-content

Многие давно мечтали о функции, повышающей гибкость и надежность компонентов, и в Angular 18.0.0-next.2 появился фоллбэк для ng-content.

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

👉 https://netbasal.com/enhancing-angular-component-flexibility-with-fallback-content-in-ng-content-50637eea7dd5

✨ Angular и Wiz лучше вместе

Вы знаете Angular как веб-фреймворк от Google, но на самом деле у Google есть еще один веб-фреймворк: Wiz. Wiz — это внутренний высокопроизводительный фреймворк, который используется в некоторых из самых популярных продуктов Google.

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

👉 https://blog.angular.io/angular-and-wiz-are-better-together-91e633d8cd5a

✨ Мастер-класс по стилям в Angular

Правильная работа со стилями играет важную роль, в разработке веб-приложений.

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

👉 https://angular.love/en/angular-styles-masterclass-2/

✨ Пошаговая аутентификация с помощью Angular и NestJS

В этом посте рассматривается добавление пошаговой проверки подлинности, с защитой маршрутов с помощью Okta Angular SDK, а также NestJS.

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

👉 https://dev.to/oktadev/add-step-up-authentication-using-angular-and-nestjs-1apn

✨ 10 Utility Types для проектов

Utility Types значительно упрощают процесс разработки, улучшая качество кода и сокращая количество ошибок.

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

👉 https://dev.to/antonzo/10-sustom-utility-types-for-typescript-projects-48pe

✨ Исключения для any

Использование any справедливо считается вредным в большинстве сценариев. Даже существуют правила ESLint, запрещающие его использование.

Тем не менее, есть несколько особых случаев, когда any может пригодиться.

👉 https://www.totaltypescript.com/any-considered-harmful

✨ Signals standard proposal

Обычно мы считаем, что сигналы — это функция веб-фреймворков, но скоро это может измениться. Есть шанс, что сигналы станут частью JavaScript.

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

👉 https://github.com/proposal-signals/proposal-signals

✨ Успешная работа с сигналами

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

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

👉 https://www.angulararchitects.io/en/blog/successful-with-signals-in-angular-3-effective-rules-for-your-architecture/

✨Angular прикроет вас, когда дело дойдет до XSS

Межсайтовый скриптинг (XSS) — это уязвимость, которая позволяет злоумышленнику внедрить вредоносный код в веб-приложение. На протяжении многих лет она входит в список OWASP Top 10 наиболее критичных рисков безопасности.

Если вы впервые слышите об XSS, то эта статья поможет вам защитить ваши приложения.

👉 https://timdeschryver.dev/blog/angular-has-your-back-when-it-comes-to-xss

✨ Типизируем process.env

Распространенная проблема в TypeScript заключается в том, что process.env не дает автозаполнения для переменных окружения, которые есть в вашей системе.

В статье даны пара советов, для строгого определения типов process.env.

👉 https://www.totaltypescript.com/how-to-strongly-type-process-env

✨ Тестирование сигналов с помощью Angular Testing Library

Наверняка вы задавались вопросом, как сигналы повлияют на ваши тесты. Но если вы используете Angular Testing Library, то вам повезло.

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

👉 https://timdeschryver.dev/blog/testing-signals-with-angular-testing-library

✨ Пробуем Analog SFC

Не так давно вышел Analog 1.0 и представил сообществу Angular стабильный мета-фреймворк, но самым большим вопросом к нему стали Single File Components (SFC).

Этот формат файлов и API является экспериментальным, поэтому команда разработчиков будем рада, если вы попробуете SFC и оставите свои отзывы.

👉 https://dev.to/analogjs/bridging-analog-to-angular-with-esbuild-and-vite-472j

✨ Тестирование анимации в Angular

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

Однако не менее важно обеспечить надежность и корректность этих анимаций.

👉 https://dev.to/this-is-angular/testing-animations-in-angular-a-comprehensive-guide-4nhp

✨ Статический анализ мультиязычности c помощью ngx-translate-lint

Если в вашем приложении есть мультиязычность и вы для нее используете пакет ngx-translate.

То вам пригодится небольшая заметка о инструменте для проверки ключей с помощью regexp.

👉 https://habr.com/ru/companies/lanit/articles/805655/

✨ Паттерны для эффектов

Суть эффектов можно понять за несколько секунд, но в реальном коде они могут оказаться сложнее в использовании, что приводит к неожиданному поведению или ошибкам.

В статье рассмотрены основы использования effect, некоторые советы и трюки, которые помогут улучшить их поведение.

👉 https://dev.to/this-is-angular/efficient-angular-effects-patterns-4396

✨ Обобщенные фабрики тайпгардов в TypeScript

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

В статье рассматриваются проблемы, связанные с использованием тайпгардов и один из способов их решения — создание обобщенных фабрик.

👉 https://habr.com/ru/companies/tinkoff/articles/808655/

✨ Изучаем AbortSignal

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

Интерфейс AbortSignal, появившийся в современных веб-браузерах, предоставляет возможность изящно прервать асинхронные операции.

В этой статье рассказывается о двух малоизвестных статических методах AbortSignal.timeout() и AbortSignal.any().

👉 https://netbasal.com/harnessing-control-exploring-javascripts-abortsignal-timeout-and-any-methods-f479992a9615

✨ Event Dispatch в Angular

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

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

Подобный подход можно реализовать с помощью Angular preboot. Но вместо того чтобы воскрешать preboot, команда Angular решила использовать сотрудничество с Wiz, применив библиотеку JSAction.

👉 https://blog.angular.io/event-dispatch-in-angular-89d868d2351c

✨ Unified Control State Change Events

Одной из функций, представленных в Angular 18.0.0-next.3, является добавление нового свойства под названием events для AbstractControl.

Это свойство представляет Observable, который отслеживает различные изменения в форме.

👉 https://netbasal.com/unified-control-state-change-events-in-angular-7e83c0504c8b

✨Оптимизируем размер сборки

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

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

👉 https://angular.love/en/how-to-optimize-your-angular-bundle-size/