✨ Оптимизируем изображения в Angular

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

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

Однако есть хорошие новости: Angular предлагает директиву ngOptimizedImage, которая облегчает работу.

👉 https://www.danywalls.com/how-to-optimize-images-in-angular-using-ngoptimizedimage-directive

✨ Ключевое слово Infer в TypeScript

Infer — это мощный инструмент для извлечения информации о типе.

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

👉 https://claritydev.net/blog/typescript-infer-keyword-unlocking-type-information

✨ Что нового в Angular

Недавно состоялась конференция Google I/O, где одно из выступлений было посвящено Angular.

Узнайте о новых возможностях, которые появятся в 18-й версии.

👉 https://www.youtube.com/watch?v=srP2P6j4Cqw

🎉 Angular 18 уже доступен!

Сегодня мы рады поделиться следующим этапом в развитии Angular.

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

Основные нововведения этого релиза:

• Экспериментальная поддержка zoneless
• Angular.dev используется в качестве основной документации
• Material 3, deferrable views, control flow теперь стабильны
• Улучшения в SSR

👉 https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe

🎉 Улучшение логики перенаправления маршрутов

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

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

👉 https://netbasal.com/enhancing-angulars-route-redirection-logic-introducing-redirectfunction-245a45add387

🎉 RxJS для самых маленьких

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

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

👉 https://habr.com/ru/articles/816755/

🎉 Что нового в Angular 18

Если вы пропустили анонс нового Angular в формате статьи, то у нас отличные новости.

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

👉 https://youtu.be/DK8M-ZFjaMw

🦄 Декомпозиция — ваша суперсила

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

Александр Инкин на примере сложной задачи показал, как подойти к её решению с учётом будущей поддержки и расширения возможностей.

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

🎉 Обзор Angular 18

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

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

👉 https://dev.to/this-is-angular/whatnew-in-angular-18-60j

🎉 Новый @let синтаксис

Развитие Angular продолжается, и в нем появляются новые интересные функции. Одной из последних новинок является синтаксис @let, который недавно был добавлен и скоро станет доступен.

Этот синтаксис значительно улучшает объявление переменных в шаблонах и управление потоком данных.

👉 https://netbasal.com/exploring-angulars-new-let-syntax-enhancing-template-variable-declarations-40487b022b44

✨ Как использовать Base64 Placeholders с NgOptimizedImage

Мы уже рассказывали о директиве NgOptimizedImage. В версии 17.2 в ней появилась возможность передавать placeholder в формате base64, который отображается во время загрузки изображения.

Он применяется в качестве background-image с эффектом размытия, пока загружается основное изображение. Главное, не забывайте, что placeholder должен быть меньше 4 КБ для оптимальной производительности.

👉 https://netbasal.com/how-to-use-base64-placeholders-with-angulars-ngoptimizedimage-directive-cee9ebfe649f

Раньше меня звали Киба, но теперь все зовут @kyouma и работаю над TON.

Вы попали в самый правдивый канал про всё на свете, включая TON и не только. В Tontech мы создаем различные утилиты для разработчиков, такие как TON Connect и Blueprint, проводим аудиты, разрабатываем стандарты, занимаемся консалтингом для различных команд и бирж, и стараемся сделать всем жизнь в TON лучше.

Я лиса, а не мышь, и этот канал может быть для хамяков, а может и не быть. Поэтому вас могут сожрать, если вы не будете достаточно осторожны!

Писать буду правдиво и технически. Задавайте любые вопросы, буду рад ответить. Что-то интересное придумаю, поэтому подписывайтесь!

Сделал личный канал. Если хотите, то можете подписаться

✨ Используем DI

При работе с Angular мы часто сталкиваемся с ситуациями, когда нам нужно передать данные от родительского компонента к дочернему. Обычно это делается с помощью @Input.

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

В статье показано, как можно использовать новые Signal Inputs и Dependency Injection.

👉 https://justangular.com/blog/providing-inputs-in-di

✨ Советы по дизайн-системе

Если вы разрабатываете компоненты системы дизайна в Angular.

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

👉 https://justangular.com/blog/read-this-if-you-are-building-design-system-components-in-angular

✨ Вставляем HTTP-заголовки

Когда мы работаем с запросами в Angular к внешнему API, иногда нам нужно добавить или отправить заголовки.

Лучший вариант— использовать для этого перехватчики. Давайте рассмотрим, как это сделать.

👉 https://www.danywalls.com/how-to-add-http-headers-to-requests-with-functional-interceptors-in-angular

✨ Standalone в Angular

Если вы пропустили standalone компоненты в Angular 14 или хотите мигрировать с модулей.

В статье рассматриваются шаги по созданию standalone компонента и даются рекомендации по миграции существующего приложения.

👉 https://habr.com/ru/articles/820051/

✨ Защита от бесконечных циклов обнаружения изменений

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

👉 https://justangular.com/blog/protect-your-app-from-infinite-change-detection

✨ Опыт миграции на standalone-компоненты

Если вы выбираете между модулями и standalone-компонентами.

Антон Горелов поделился своим опытом применения обоих подходов. Он подробно рассмотрел как автоматический, так и ручной методы миграции, подчеркнув их особенности и подходящие случаи применения.

👉 https://habr.com/ru/companies/selectel/articles/820593/