✨ Восстановление позиции прокрутки
Когда вы просматриваете длинный список на сайте и переходите на другую страницу, затем часто хочется вернуться к списку. Некоторые сайты запоминают место, где вы остановились, позволяя легко вернуться к нужному месту.
В статье приведен простой пример, который показывает, почему эта функция важна и как ее реализовать.
👉 https://angular.love/en/angular-scroll-position-restoration
Когда вы просматриваете длинный список на сайте и переходите на другую страницу, затем часто хочется вернуться к списку. Некоторые сайты запоминают место, где вы остановились, позволяя легко вернуться к нужному месту.
В статье приведен простой пример, который показывает, почему эта функция важна и как ее реализовать.
👉 https://angular.love/en/angular-scroll-position-restoration
👍15👏2
✨ @let: за и против
Недавнее появление @let в Angular вызвало значительные споры в сообществе разработчиков.
Одни считают его ценным дополнением, другие — ненужным усложнением. Подробнее об этом читайте в статье.
👉 https://angular.love/en/angular-template-let-variable-hot-or-not
Недавнее появление @let в Angular вызвало значительные споры в сообществе разработчиков.
Одни считают его ценным дополнением, другие — ненужным усложнением. Подробнее об этом читайте в статье.
👉 https://angular.love/en/angular-template-let-variable-hot-or-not
👍7🔥3
✨ Управление состоянием URL с помощью NgRx Router Store
Иногда возникает необходимость сохранять состояние приложения в URL-адресе, чтобы пользователи могли добавлять его в закладки или делиться конкретными состояниями приложения.
NgRx Router Store позволяет легко связать состояние приложения с событиями роутера и получать данные из роутера.
👉 https://danywalls.com/handling-router-url-parameters-using-ngrx-router-store
Иногда возникает необходимость сохранять состояние приложения в URL-адресе, чтобы пользователи могли добавлять его в закладки или делиться конкретными состояниями приложения.
NgRx Router Store позволяет легко связать состояние приложения с событиями роутера и получать данные из роутера.
👉 https://danywalls.com/handling-router-url-parameters-using-ngrx-router-store
👍6❤2👏1🤮1
✨ Представляем Taiga UI v4
Работа над четвертой версией Тайги началась в декабре 2023 года, и за это время в нее было добавлено множество новых функций.
Никита Барсуков рассказал о ключевых обновлениях библиотеки, но их оказалось настолько много, что едва удалось уместить все в одну статью.
👉 https://habr.com/ru/companies/tbank/articles/834508/
Работа над четвертой версией Тайги началась в декабре 2023 года, и за это время в нее было добавлено множество новых функций.
Никита Барсуков рассказал о ключевых обновлениях библиотеки, но их оказалось настолько много, что едва удалось уместить все в одну статью.
👉 https://habr.com/ru/companies/tbank/articles/834508/
🔥36👍12💩9❤🔥4🤡2🌭1
✨ Type-safe фронтенд без проверок на null
Разобраться в множестве различных подходов к реактивности в фронтенд-приложениях бывает непросто.
В своей статье Никита Борисов сделал обзор основ моделирования реактивных приложений, на примере реализации типобезопасной реактивности в Angular приложении.
👉 https://dev.to/niko_doing_dev/frontend-made-fully-type-safe-and-without-null-checks-part-1-11lm
Разобраться в множестве различных подходов к реактивности в фронтенд-приложениях бывает непросто.
В своей статье Никита Борисов сделал обзор основ моделирования реактивных приложений, на примере реализации типобезопасной реактивности в Angular приложении.
👉 https://dev.to/niko_doing_dev/frontend-made-fully-type-safe-and-without-null-checks-part-1-11lm
👍8🔥2👏2
✨ Использование Signal и Model Inputs
Функции Signal и Model Inputs являются отличной альтернативой декораторам Input и Output, решая проблему обнаружения изменений без дополнительного кода.
Павел рассказал о новых методах и подготовил небольшое демо-приложение с двумя компонентами идентичной функциональности, но написанными классическим и новым способами.
👉 https://habr.com/ru/companies/tbank/articles/835662/
Функции Signal и Model Inputs являются отличной альтернативой декораторам Input и Output, решая проблему обнаружения изменений без дополнительного кода.
Павел рассказал о новых методах и подготовил небольшое демо-приложение с двумя компонентами идентичной функциональности, но написанными классическим и новым способами.
👉 https://habr.com/ru/companies/tbank/articles/835662/
👍4🔥2
✨ Обработка ошибок с помощью toSignal
Функция toSignal является мощным инструментом для преобразования Observable в реактивный сигнал. Однако важно учитывать нюанс, связанный с обработкой ошибок.
По умолчанию, когда Observable, связанный с сигналом, генерирует ошибку, toSignal будет распространять эту ошибку каждый раз, когда вы попытаетесь прочитать значение сигнала. Это может вызвать проблемы, если у вашего приложения есть глобальный обработчик ошибок.
👉 https://netbasal.com/handling-errors-with-tosignal-in-angular-6500511c0d6f
Функция toSignal является мощным инструментом для преобразования Observable в реактивный сигнал. Однако важно учитывать нюанс, связанный с обработкой ошибок.
По умолчанию, когда Observable, связанный с сигналом, генерирует ошибку, toSignal будет распространять эту ошибку каждый раз, когда вы попытаетесь прочитать значение сигнала. Это может вызвать проблемы, если у вашего приложения есть глобальный обработчик ошибок.
👉 https://netbasal.com/handling-errors-with-tosignal-in-angular-6500511c0d6f
👍4👏1
✨ Динамический рендеринг компонентов
Одним из способов оптимизации является уменьшение начального объема загружаемого кода и количества рендерящихся сущностей. В этом помогают динамические компоненты.
Даня подробно объяснил процесс их создания, предоставив примеры кода и пошаговое руководство.
👉 https://habr.com/ru/companies/tbank/articles/836036/
Одним из способов оптимизации является уменьшение начального объема загружаемого кода и количества рендерящихся сущностей. В этом помогают динамические компоненты.
Даня подробно объяснил процесс их создания, предоставив примеры кода и пошаговое руководство.
👉 https://habr.com/ru/companies/tbank/articles/836036/
👍12❤1🔥1
✨ Особенности Enums в TypeScript
Многим нравится Enums, но их реализация в TypeScript довольно странная, с множеством нюансов.
В статье рассматриваются их недостатки. Узнайте, почему числовые и строковые Enum ведут себя по-разному, как это может привести к неожиданным результатам, и почему строковые более предпочтительны.
👉 https://www.totaltypescript.com/why-i-dont-like-typescript-enums
Многим нравится Enums, но их реализация в TypeScript довольно странная, с множеством нюансов.
В статье рассматриваются их недостатки. Узнайте, почему числовые и строковые Enum ведут себя по-разному, как это может привести к неожиданным результатам, и почему строковые более предпочтительны.
👉 https://www.totaltypescript.com/why-i-dont-like-typescript-enums
👍11❤1👏1
✨ Использование isolatedModules в Angular 18.2
В Angular появилась поддержка isolatedModules из TypeScript, начиная с версии 18.2. Благодаря этому производительность при сборке может увеличиться до 10%.
В статье рассказывается, как вы можете воспользоваться этой функцией в своих проектах.
👉 https://blog.angular.dev/using-isolatedmodules-in-angular-18-2-68a7d3a6c03d
В Angular появилась поддержка isolatedModules из TypeScript, начиная с версии 18.2. Благодаря этому производительность при сборке может увеличиться до 10%.
В статье рассказывается, как вы можете воспользоваться этой функцией в своих проектах.
👉 https://blog.angular.dev/using-isolatedmodules-in-angular-18-2-68a7d3a6c03d
👍11❤1
✨ Другой взгляд на TypeScript
Если рассматривать систему типов как полноценный функциональный язык программирования, предназначенный для работы с множествами, становится проще понимать его более сложные функции.
В статье анализируются основные возможности TypeScript с точки зрения работы с множествами.
👉 https://www.rob.directory/blog/a-different-way-to-think-about-typescript
Если рассматривать систему типов как полноценный функциональный язык программирования, предназначенный для работы с множествами, становится проще понимать его более сложные функции.
В статье анализируются основные возможности TypeScript с точки зрения работы с множествами.
👉 https://www.rob.directory/blog/a-different-way-to-think-about-typescript
👍5👏2❤1
✨ Использование GitHub в качестве провайдера аутентификации
PocketBase значительно упрощает работу над сайд-проектами, где вы хотите быстро начать, не сталкиваясь со сложностями написания собственного бэкенда с нуля.
В статье объясняется, как его настроить для использования GitHub в качестве провайдера аутентификации для вашего Angular-приложения.
👉 https://dev.to/this-is-angular/using-github-as-an-authentication-provider-in-your-angular-app-with-pocketbase-3dcc
PocketBase значительно упрощает работу над сайд-проектами, где вы хотите быстро начать, не сталкиваясь со сложностями написания собственного бэкенда с нуля.
В статье объясняется, как его настроить для использования GitHub в качестве провайдера аутентификации для вашего Angular-приложения.
👉 https://dev.to/this-is-angular/using-github-as-an-authentication-provider-in-your-angular-app-with-pocketbase-3dcc
🔥7👍2❤1
✨ Сериализация сущностей с помощью декораторов на TypeScript
Иногда нужно сохранить объект в виде строки, например, для localStorage. Для простых объектов это легко сделать, но в случае сложных структур приходится вручную управлять процессом сериализации. Это увеличивает сложность кода и повышает риск ошибок.
Константин Харламов рассказал о том, как использовать декораторы в TypeScript для этой задачи.
👉 https://habr.com/ru/articles/836746/
Иногда нужно сохранить объект в виде строки, например, для localStorage. Для простых объектов это легко сделать, но в случае сложных структур приходится вручную управлять процессом сериализации. Это увеличивает сложность кода и повышает риск ошибок.
Константин Харламов рассказал о том, как использовать декораторы в TypeScript для этой задачи.
👉 https://habr.com/ru/articles/836746/
👍4👏4❤3
✨ Инструменты для тестирования доступности
Доступность (a11y) — это важный аспект разработки, который гарантирует, что веб-приложения могут быть использованы всеми, включая людей с ограниченными возможностями.
Автоматизированные инструменты тестирования, такие как lighthouse, помогают выявить основные проблемы с доступностью, но не могут заменить ручное тестирование, которое охватывает более широкие аспекты.
Надеемся вы попробуете некоторые из рекомендованных инструментов и выберете свой любимый.
👉 https://www.angulararchitects.io/en/blog/accessibility-testing-tools/
Доступность (a11y) — это важный аспект разработки, который гарантирует, что веб-приложения могут быть использованы всеми, включая людей с ограниченными возможностями.
Автоматизированные инструменты тестирования, такие как lighthouse, помогают выявить основные проблемы с доступностью, но не могут заменить ручное тестирование, которое охватывает более широкие аспекты.
Надеемся вы попробуете некоторые из рекомендованных инструментов и выберете свой любимый.
👉 https://www.angulararchitects.io/en/blog/accessibility-testing-tools/
👍3❤2
✨ Как создать NPM пакет
Хотите научиться публиковать свои пакеты на npm? Мы нашли пошаговое руководство, которое поможет вам разобраться во всех деталях этого процесса!
В нем рассмотрен каждый шаг, который вам нужно предпринять для публикации.
👉 https://www.totaltypescript.com/how-to-create-an-npm-package
Хотите научиться публиковать свои пакеты на npm? Мы нашли пошаговое руководство, которое поможет вам разобраться во всех деталях этого процесса!
В нем рассмотрен каждый шаг, который вам нужно предпринять для публикации.
👉 https://www.totaltypescript.com/how-to-create-an-npm-package
👍13🔥3❤2
✨ Анонс TypeScript 5.6 RC
Что нового с момента выхода бета-версии?
В бете языковая служба поднималась по уровням каталогов, пытаясь найти каждый возможный файл проекта с именем tsconfig.json. Поскольку это могло привести к открытию множества связанных проектов, это поведение было отменено.
BuiltinIterator был переименован в IteratorObject, и теперь имеет несколько подтипов, таких как ArrayIterator, MapIterator и т.д.
Для режима
👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-6-rc/
Что нового с момента выхода бета-версии?
В бете языковая служба поднималась по уровням каталогов, пытаясь найти каждый возможный файл проекта с именем tsconfig.json. Поскольку это могло привести к открытию множества связанных проектов, это поведение было отменено.
BuiltinIterator был переименован в IteratorObject, и теперь имеет несколько подтипов, таких как ArrayIterator, MapIterator и т.д.
Для режима
--build
был добавлен новый флаг --stopOnBuildErrors
. Это приближает поведение к предыдущим версиям TypeScript, так как начиная с версии TypeScript 5.6 компиляция всегда продолжалась даже при наличии ошибок.👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-6-rc/
👍2👏1
✨ Создание RAG-приложения
RAG — это метод, который объединяет извлечение информации с генерацией текста. Он используется для того, чтобы LLM могла обращаться к актуальной информации в базе данных и генерировать более точные и содержательные ответы.
В статье показано, как использовать Langchain, NestJS и Gemma 2 для создания RAG-приложения на основе книги по Angular.
👉 https://dev.to/railsstudent/build-a-rag-application-to-learn-angular-using-langchhtainjs-nestjs-htmx-and-gemma-2-5ggk
RAG — это метод, который объединяет извлечение информации с генерацией текста. Он используется для того, чтобы LLM могла обращаться к актуальной информации в базе данных и генерировать более точные и содержательные ответы.
В статье показано, как использовать Langchain, NestJS и Gemma 2 для создания RAG-приложения на основе книги по Angular.
👉 https://dev.to/railsstudent/build-a-rag-application-to-learn-angular-using-langchhtainjs-nestjs-htmx-and-gemma-2-5ggk
👍6🔥4
✨ Верстка: Быстро, Пиксель в Пиксель, Без Стресса
Если вы тратите слишком много времени на верстку, эта статья для вас.
Никита Борисов расскажет, как эффективно работать с Figma и значительно ускорить процесс.
👉 https://dev.to/niko_doing_dev/making-ui-layout-fast-pixel-perfect-without-stress-1n5m
Если вы тратите слишком много времени на верстку, эта статья для вас.
Никита Борисов расскажет, как эффективно работать с Figma и значительно ускорить процесс.
👉 https://dev.to/niko_doing_dev/making-ui-layout-fast-pixel-perfect-without-stress-1n5m
👍9🔥3👏3👎1👨💻1
✨ Как быстро поднять API backend на TypeScript
Если вы хотите развернуть бэкенд с помощью облачных сервисов Firebase.
В статье подробно описывается процесс его создания на TypeScript с использованием NestJS и Firebase, с конкретными примерами конфигурации и настройки проекта.
👉 https://habr.com/ru/articles/835124/
Если вы хотите развернуть бэкенд с помощью облачных сервисов Firebase.
В статье подробно описывается процесс его создания на TypeScript с использованием NestJS и Firebase, с конкретными примерами конфигурации и настройки проекта.
👉 https://habr.com/ru/articles/835124/
👍9👏1
✨ Настройка алиасов путей с помощью subpath imports
Subpath imports — это опция в Node.js, позволяющая задавать внутренние алиасы путей в коде. Поддержка subpath imports была добавлена в TypeScript, начиная с версии 5.4, однако на практике их настройка может быть достаточно сложной задачей.
Виталий Потапов поделился своим опытом их конфигурации.
👉 https://habr.com/ru/articles/840240/
Subpath imports — это опция в Node.js, позволяющая задавать внутренние алиасы путей в коде. Поддержка subpath imports была добавлена в TypeScript, начиная с версии 5.4, однако на практике их настройка может быть достаточно сложной задачей.
Виталий Потапов поделился своим опытом их конфигурации.
👉 https://habr.com/ru/articles/840240/
🔥3👍1