🦊 Angular Fox 🚀 — русскогорящие новости сообщества
3.97K subscribers
1.21K photos
7 videos
1.06K links
Как костыль на реактивно-лисьей тяге 🔥🦊

Нравится канал? Подпишись на меня!
👉 twitter.com/thekiba_ru
💖 twitter.com/thekiba_io
medium.com/@thekiba
github.com/thekiba

Чаты @angular_ru @angular_jobs
Download Telegram
Как создавать промпты для AI

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

Никита Борисов предложил структурированный подход к созданию промптов, который включает: объяснение контекста проекта, определение роли и ответственности AI, установку четких критериев успеха, обозначение технических ограничений.

👉 https://vc.ru/ai/1759281-kak-sozdavat-prompty-dlya-ai-kotorye-vydayut-zhelaemyi-rezultat
👍8👎7🔥4👏1
От налогового инспектора до ведущего инженера-программиста

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

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

👉 https://www.angularspace.com/from-a-tax-officer-to-a-lead-software-engineer/
👍5🔥4👎1👏1
Рецепты Typescript: выбор одного и только одного обязательного поля в объекте

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

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

Для разминки предлагаем подумать: как можно применить такой тип и при этом не нарушить лучшие практики?

👉 https://habr.com/ru/companies/cloud_ru/articles/868762/
👍4🔥3
Сохранение состояния компонента при переходе по маршруту

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

Статья рассказывает о применении RouteReuseStrategy для сохранения состояния компонентов.

👉 https://dev.to/this-is-angular/angular-lab-preserving-component-state-across-route-transitions-3f7j
👍13👏3🔥2
Улучшаем производительность с помощью NgOptimizedImage

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

Это напрямую влияет на метрики:

Largest Contentful Paint (LCP) — время, за которое загружается самый крупный контент, например, баннер. Высокий LCP ухудшает SEO и раздражает пользователей.

First Contentful Paint (FCP) — момент появления первого элемента на экране. Медленный FCP создает ощущение "зависания" сайта.

Статья посвящена использованию директивы NgOptimizedImage для оптимизации загрузки изображений.

👉 https://www.angularspace.com/boost-your-apps-performance-with-ngoptimizedimage
👍7👌1
Гибкость и контроль над данными: применение моков в разработке

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

Для решения этой проблемы в статье предлагается использовать MSW (Mock Service Worker), который позволяет реализовать работу с HTTP API и WebSocket прямо внутри приложения.

👉 https://habr.com/ru/companies/ntechlab/articles/869790/
🔥2👏1
TypeScript 5.8: erasableSyntaxOnly флаг

В следующем релизе TypeScript, вероятно, появится новый флаг, который будет запрещать конструкции, которые не являются "стираемыми" (erasable), такие как перечисления (enums), пространства имен (namespaces) и т.д.

Это новшество может быть связано с тем, что в Node.js 23.6.0 недавно появилась поддержка TypeScript, которая не поддерживает такие конструкции.

👉 https://www.totaltypescript.com/erasable-syntax-only
🔥12👍1
Создание пользовательских операторов RxJs

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

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

👉 https://www.angularspace.com/create-custom-rxjs-operators/
👍5🔥1
Введение в фикстуры Playwright

Устали от тонн моков и бесконечного дублирования в тестах? Знаете, что может сократить ваш код и сэкономить часы работы?

Фикстуры в Playwright — ваш секретный инструмент для чистых и эффективных тестов!

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

👉 https://habr.com/ru/companies/tbank/articles/877292/
🔥5👍3
Миграция крупного Angular-приложения на Standalone

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

Армен Варданян доказал — ДА! Его HR-система с 1000+ компонентов и множеством зависимостей теперь работает в разы быстрее и чище. И все это — всего за несколько часов.

Не верите, что такое возможно? Читайте статью и убедитесь сами: ваш проект тоже заслуживает апгрейда.

👉 https://www.angularspace.com/migrating-a-large-angular-application-to-standalone/
👍8🔥3
«Я делаю рефакторинг ежечасно» или как за пять минут улучшить приложение

Рефакторинг — это не про гигантские правки, а про микрошаги, которые делают ваш код чище, быстрее и устойчивее к ошибкам.

Хотите узнать, как избавиться от спагетти-кода и не выгореть?

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

А чтобы углубить свои знания, рекомендуем книгу Мартина Фаулера «Рефакторинг кода на JavaScript».

👉 https://habr.com/ru/companies/cloud_ru/articles/877762/
👍7🔥2
Внутри процесса архитектурного аудита

Компании часто сталкиваются с архитектурным коллапсом: замедление разработки, циклические зависимости, хрупкие тесты, монолит, который никто не понимает. Но это не приговор.

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

👉 https://www.angulararchitects.io/en/blog/inside-the-architecture-review-process-a-consultants-guide-to-better-software/
👍7🔥1
Улучшите пользовательский опыт вашего приложения с помощью (rx)resource

Представьте: пользователи больше не видят белый экран при загрузке, ошибки не остаются незамеченными, а данные всегда актуальны. Все это возможно с новым resource API в Angular 19.

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

👉 https://timdeschryver.dev/blog/improve-the-user-experience-of-your-application-using-rxresource
👍9🔥4
🚀 Документалка об Angular

Канал Honeypot, известный документальными историями о технологиях, представил новый фильм о невероятной истории Angular — фреймворке, который начинался как эксперимент внутри Google и прошел путь от непризнания до мировой популярности.

Вы увидите, как ошибки, инновации и упорство превратили Angular в современный гигант.

👉 https://youtu.be/cRC9DlH45lA
🔥22👍52
Как утекает память, если забыть отписаться от Observable

Ваше приложение внезапно крашится? Возможно, вы забыли отписаться.

Всего одна забытая подписка на Observable может привести к утечке памяти.

Читайте статью — узнайте, как находить и устранять такие проблемы за несколько минут.

👉 https://habr.com/ru/articles/879502/
👏6👍2
Миграция на строгий TypeScript

Знакомая ситуация: проект на TypeScript, а strict режим включить страшно? В крупных проектах часто сталкиваются с той же проблемой — годы разработки, море any типов и никаких проверок на null.

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

👉 https://habr.com/ru/companies/selectel/articles/879980/
👍3🔥2
Загрузка ресурсов

Мы уверены, что большинство уже знакомы с функцией resource().

Если же вы все еще сомневаетесь, попробуйте новый подход. Он упрощает работу с асинхронными данными в коде на основе сигналов.

Важно: Код, представленный в статье, носит исключительно демонстрационный характер и требует доработки.

👉 https://www.angularspace.com/loading-angular-resources-on-demand-a-progressive-guide-to-dynamic-data-fetching/
👍3👎1👏1
Исследуем режимы рендеринга маршрутов

Раньше мы вынуждены были выбирать: либо SSR для всего приложения, либо никак. Но что, если часть страниц приватные, а часть — публичные?

Теперь для каждого маршрута можно выбрать оптимальный режим — клиентский (CSR), серверный (SSR) или статическую генерацию (SSG).

Это позволяет создавать более гибкие и производительные приложения с точно настроенным рендерингом.

👉 https://dev.to/this-is-angular/exploring-routes-rendering-modes-in-angular-bjg
👍11🔥2👏1🤡1
Микрофронтенды с Angular и Native Federation

Вы когда-нибудь задумывались, как несколько команд могут работать над одним масштабным приложением, не мешая друг другу и сохраняя скорость релизов?

Микрофронтенды — секретное оружие enterprise-проектов. Они позволяют разбить монолит на автономные части, которые можно тестировать, деплоить и масштабировать независимо. Но Angular не поддерживает их из коробки. И тут на сцену выходит Native Federation.

👉 https://blog.angular.dev/micro-frontends-with-angular-and-native-federation-7623cfc5f413
🔥5👍2😁2👌1
Улучшение шаблонов Angular с помощью нетегированных шаблонных литералов

В версии 19.2.0-next.0 ввели поддержку шаблонных литералов, сделав шаблоны выразительнее.

Динамический контент, вычисляемые классы, сложные интерполяции, пайпы и даже генерация URL стали проще: теперь можно напрямую встраивать переменные в строку.

👉 https://medium.com/p/0baa5b4f8371
🔥10👍3👏1