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

✨ Как использовать 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

🎉 Новый @let синтаксис Развитие Angular продолжается, и в нем появляются новые интересные функции. Одной из последних новинок является синтаксис @let, который недавно был добавлен и скоро станет доступен. Этот синтаксис значительно улучшает объявление переменных в шаблонах и управление потоком данных. 👉 https://netbasal.com/exploring-angulars-new-let-syntax-enhancing-template-variable-declarations-40487b022b44

🎉 Обзор Angular 18 Мы уже рассказывали о ключевых нововведениях в Angular, а теперь хотим поделиться примерами новых возможностей. Оставайтесь с нами, чтобы быть в курсе всех новостей и подробных обзоров. 👉 https://dev.to/this-is-angular/whatnew-in-angular-18-60j

🦄 Декомпозиция — ваша суперсила Декомпозиция предполагает выявление частей решения, которые могут функционировать автономно, не влияя на остальные. Александр Инкин на примере сложной задачи показал, как подойти к её решению с учётом будущей поддержки и расширения возможностей. 👉 https://habr.com/ru/companies/tinkoff/articles/817755/

🎉 Что нового в Angular 18 Если вы пропустили анонс нового Angular в формате статьи, то у нас отличные новости. Команда также выпустила видео, в котором подробно объясняются изменения. 👉 https://youtu.be/DK8M-ZFjaMw

Если вы не знаете кто такой @thekiba, то не переходите в его канал Пост будет скоро удален, не торопитесь 🔨

🎉 RxJS для самых маленьких RxJS предлагает мощные операторы для создания, комбинирования и обработки потоков данных. Однако новичкам бывает сложно разобраться в теме потоков. В статье рассмотрены ключевые аспекты, которые будут полезны тем, кто только начинает изучать RxJS. 👉 https://habr.com/ru/articles/816755/

🎉 Улучшение логики перенаправления маршрутов В недавнем обновлении Angular значительно улучшил возможности маршрутизации, представив гибкий подход к перенаправлению маршрутов с помощью RedirectFunction. Она позволяет определять перенаправления с помощью функции, которая может возвращать либо строку, либо дерево UrlTree, обеспечивая расширенный контроль и универсальность логики маршрутизации. 👉 https://netbasal.com/enhancing-angulars-route-redirection-logic-introducing-redirectfunction-245a45add387

🎉 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 Недавно состоялась конференция Google I/O, где одно из выступлений было посвящено Angular. Узнайте о новых возможностях, которые появятся в 18-й версии. 👉 https://www.youtube.com/watch?v=srP2P6j4Cqw

✨ Ключевое слово Infer в TypeScript Infer — это мощный инструмент для извлечения информации о типе. В статье рассказывается, как он может быть полезно для тех, кто хочет использовать весь потенциал TypeScript. 👉 https://claritydev.net/blog/typescript-infer-keyword-unlocking-type-information

✨ Оптимизируем изображения в Angular Создание приложения ориентированного на показ изображений может показаться простым, но знаете ли вы, как убедиться, что оно работает оптимально? В таких приложениях необходимо знать о ленивой загрузке, приоритизации, использовании CDN, учитывать показатели Core Web Vita и т.д. Однако есть хорошие новости: Angular предлагает директиву ngOptimizedImage, которая облегчает работу. 👉 https://www.danywalls.com/how-to-optimize-images-in-angular-using-ngoptimizedimage-directive

✨ Управляем состоянием в Angular Многие компании используют Angular для создания корпоративных приложений, которые настолько велики, что должны управлять большим количеством данных. В статье реализуется корзина для магазина, которая отслеживает выбранные товары, промежуточный итог, скидку, общую сумму и промокод. 👉 https://dev.to/railsstudent/signal-in-a-service-for-state-management-in-angular-4469

✨ Бесплатная книга Манфред Штайер выпустил второе издание своей бесплатной электронной книги Modern Angular. В ней 14 глав, которые показывают, как пользоваться новыми возможностями Angular. 👉 https://www.angulararchitects.io/en/ebooks/modern-angular/

✨ Упрощение логики на клиенте Клиенту часто требуются представления данных, отличные от тех, что приходят с сервера, и это может приводить к сложным преобразованиям, разбросанным по всей логике пользовательского интерфейса. Чтобы решить эту проблему, в статье вводится класс View Model для каждой сущности. Такая инкапсуляция упрощает работу с данными и гарантирует, что пользовательский интерфейс получит только то, что ему нужно. 👉 https://netbasal.com/simplifying-client-side-logic-the-strategic-use-of-view-models-db0ae0363be4

✨ Создаем табло реального времени Традиционно, чтобы получить новые данные, страница должна отправить запрос на сервер. С помощью Server-Sent Events, сервер может отправлять новые данные на страницу в любое время, но это одностороннее соединение, поэтому вы не можете отправлять события от клиента к серверу. В статье, на примере спортивного табло, на котором отображается результат игры, приводится базовая реализация SSE с помощью NestJS. 👉 https://dev.to/this-is-angular/building-real-time-boards-with-angular-and-nestjs-using-server-sent-events-3k9j

✨ Обновляем Angular Поскольку выход Angular 18 уже не за горами (запланирован на 20 мая 2024 года), пришло время обновить свой Angular. В статье показано, как обновить Angular, включая пакеты сторонних разработчиков. 👉 https://www.angulararchitects.io/en/blog/angular-17-update-control-flow-app-builder-migration/

✨ Умелое использование сигналов Новые сигналы в Angular — это простой реактивный строительный блок. Однако, как часто бывает, дьявол кроется в деталях. В статье даны три совета, которые помогут использовать сигналы более эффективно. 👉 https://www.angulararchitects.io/en/blog/skillfully-using-signals-in-angular-selected-hints-for-professional-use/

✨ Signal Store и NGXS С момента появления сигналов в Angular появились способы для создания новых API на их основе, включая стейт менеджеры. В статье описывается, как объединение NGXS с Signal Store дает новые возможности по управлению состоянием. 👉 https://angular.love/en/signal-store-ngxs-elevating-flexibility-in-state-management/

✨ Как использовать оператор satisfies В TypeScript оператор satisfies был введен в версии 4.9, как эффективный способ обеспечения безопасности типов. В статье объясняется, как обстояли дела до его появления, и почему он может быть полезен. 👉 https://www.freecodecamp.org/news/typescript-satisfies-operator/