Бесконечная прокрутка в Angular
________________________
Вы наверняка знакомы с бесконечной прокруткой, если вам когда-либо приходилось перемещаться по длинным спискам в веб-приложении. Частое решение проблемы предоставления длинного списка вашим потребителям в нужное время — это бесконечная прокрутка. В этой статье мы будем использовать пакет ngx-infinite-scroll, чтобы добавить бесконечную прокрутку в Angular.
В этом руководстве рассказывается, как быстро и легко создать бесконечный прокручиваемый компонент с помощью мощного npx-infinite-scrollпакета. Кроме того, мы рассмотрим все важные атрибуты и настройки событий, чтобы повысить гибкость вашего приложения.
https://shly.link/ZY2ep
________________________
Вы наверняка знакомы с бесконечной прокруткой, если вам когда-либо приходилось перемещаться по длинным спискам в веб-приложении. Частое решение проблемы предоставления длинного списка вашим потребителям в нужное время — это бесконечная прокрутка. В этой статье мы будем использовать пакет ngx-infinite-scroll, чтобы добавить бесконечную прокрутку в Angular.
В этом руководстве рассказывается, как быстро и легко создать бесконечный прокручиваемый компонент с помощью мощного npx-infinite-scrollпакета. Кроме того, мы рассмотрим все важные атрибуты и настройки событий, чтобы повысить гибкость вашего приложения.
https://shly.link/ZY2ep
Angular: перезагрузка/обновление компонента или всего приложения и повторное использование логики в нескольких компонентах
________________________________
Существует большая разница между перезагрузкой одного компонента и перезагрузкой всего приложения. Мы увидим, как оба могут быть достигнуты.
https://shly.link/dfU0A
________________________________
Существует большая разница между перезагрузкой одного компонента и перезагрузкой всего приложения. Мы увидим, как оба могут быть достигнуты.
https://shly.link/dfU0A
Medium
Angular: Reload/Refresh a Component or Entire Application & Reuse Logic Across Multiple Components
An Angular tutorial on how to reload/refresh a single component or the entire application and reuse the logic across multiple components.
Идеальный шаблон чистой архитектуры для проектов TypeScript
____________________________
Руководство по созданию шаблона проекта TypeScript на основе слоев в соответствии с принципами чистой архитектуры.
В этом руководстве я объясняю свой подход к созданию шаблона проекта TypeScript, реализующего принципы чистой архитектуры. Это, вероятно, будет работать для любого типа приложений, которые вы можете себе представить, включая SPA (одностраничные приложения) с Angular, React, Vue или другими фреймворками, такими как React Native или Electron. В принципе, если он использует TypeScript, он будет работать.
https://shly.link/0QDTW
____________________________
Руководство по созданию шаблона проекта TypeScript на основе слоев в соответствии с принципами чистой архитектуры.
В этом руководстве я объясняю свой подход к созданию шаблона проекта TypeScript, реализующего принципы чистой архитектуры. Это, вероятно, будет работать для любого типа приложений, которые вы можете себе представить, включая SPA (одностраничные приложения) с Angular, React, Vue или другими фреймворками, такими как React Native или Electron. В принципе, если он использует TypeScript, он будет работать.
https://shly.link/0QDTW
Angular Управление состоянием URL-адресов с помощью параметров запроса или параметров маршрута
______________________________
В этом сообщении блога объясняется процесс сохранения состояния с использованием URL-адреса браузера. В Angular есть несколько разных способов управления состоянием.
—Угловые сервисы
—Библиотека управления состоянием, такая как NgRx, Akita, Elf и т. д.
Но в некоторых случаях вы можете захотеть поделиться URL-адресом и позволить другим увидеть точный список элементов (в том же порядке и с применением фильтров). Например, когда вы ищете рейс на веб-сайте Travel и находите выгодные предложения на определенные даты, когда вы делитесь URL-адресом со своим другом, для них будет загружаться веб-страница с выбором по умолчанию. Но с управлением состоянием URL-адреса все изменения обновляются в URL-адресе, и любой, кто использует URL-адрес, увидит тот же выбор.
https://shly.link/dev1ovM
______________________________
В этом сообщении блога объясняется процесс сохранения состояния с использованием URL-адреса браузера. В Angular есть несколько разных способов управления состоянием.
—Угловые сервисы
—Библиотека управления состоянием, такая как NgRx, Akita, Elf и т. д.
Но в некоторых случаях вы можете захотеть поделиться URL-адресом и позволить другим увидеть точный список элементов (в том же порядке и с применением фильтров). Например, когда вы ищете рейс на веб-сайте Travel и находите выгодные предложения на определенные даты, когда вы делитесь URL-адресом со своим другом, для них будет загружаться веб-страница с выбором по умолчанию. Но с управлением состоянием URL-адреса все изменения обновляются в URL-адресе, и любой, кто использует URL-адрес, увидит тот же выбор.
https://shly.link/dev1ovM
DEV Community
Angular URL State management with Query Params or Route Params
This blog post explains the process to maintain state using browser URL. In Angular there are couple...
Как создавать собственные каналы в Angular, что такое чистые и нечистые каналы и как использовать чистые каналы для повышения производительности приложения.
https://shly.link/9pHWV
https://shly.link/9pHWV
VueUse — библиотека, которая делает Vue 3 достойным обновления
__________________________________
VueUse — это набор из более чем 200 основных служебных функций для взаимодействия с различными API, такими как браузер, состояние, сеть, анимация, время и многое другое.
https://shly.link/mdmhXQe
__________________________________
VueUse — это набор из более чем 200 основных служебных функций для взаимодействия с различными API, такими как браузер, состояние, сеть, анимация, время и многое другое.
https://shly.link/mdmhXQe
Medium
VueUse - The library that makes Vue 3 worth the upgrade
Composition API promotes a much better paradigm of sharing code between components. Explicit dependencies and namespacing by design enable…
15 революционных инструментов в экосистеме Vue 3
_____________________________
Экосистема Vue.js развивалась за последние несколько лет, особенно с учетом того, что Vue 3 стала версией по умолчанию с понедельника, 7 февраля 2022 года . Этот пост будет посвящен главным образом инструментам, которые вращаются вокруг экосистемы Vue 3.
https://shly.link/uMgtw
_____________________________
Экосистема Vue.js развивалась за последние несколько лет, особенно с учетом того, что Vue 3 стала версией по умолчанию с понедельника, 7 февраля 2022 года . Этот пост будет посвящен главным образом инструментам, которые вращаются вокруг экосистемы Vue 3.
https://shly.link/uMgtw
Стандарты и лучшие практики Angular
______________________________
В этой статье описаны некоторые из стандартов и лучших практик Angular, которые я мог использовать и испытать при разработке приложений.
https://shly.link/mdmy9PL
______________________________
В этой статье описаны некоторые из стандартов и лучших практик Angular, которые я мог использовать и испытать при разработке приложений.
https://shly.link/mdmy9PL
Medium
Angular Standards And Best Practices
Angular is a TypeScript-based free and open-source web application framework. It is a complete rewrite of AngularJS.
Как я нашел идеальный стек для освоения HTML и CSS — Vue без сборки
______________________________
Отказ от ответственности: это не чисто техническая статья с подробным руководством. Это история о: проблеме принятия решений, логике мышления и случайных жизненных событиях, влияющих на нас. В любом случае, вы также найдете всю необходимую техническую информацию.
https://shly.link/devM8xd
______________________________
Отказ от ответственности: это не чисто техническая статья с подробным руководством. Это история о: проблеме принятия решений, логике мышления и случайных жизненных событиях, влияющих на нас. В любом случае, вы также найдете всю необходимую техническую информацию.
https://shly.link/devM8xd
Использование Angular NgOptimizedImage для реализации лучших практик загрузки изображений
______________________________
Директива NgOptimizedImageв Angular отвечает за реализацию лучших практик производительности при загрузке изображений. Она доступна в Angular v14.2.0. Директива помечена как автономная и может быть импортирована в автономные компоненты и модули.
https://shly.link/CLoWH
______________________________
Директива NgOptimizedImageв Angular отвечает за реализацию лучших практик производительности при загрузке изображений. Она доступна в Angular v14.2.0. Директива помечена как автономная и может быть импортирована в автономные компоненты и модули.
https://shly.link/CLoWH
"Javascript developer. Professional" - это хардкорный онлайн-курс для web-разработчиков по продвинутым возможностям JS и его фреймворков.
Справитесь ли вы с уровнем курса? Покажет вступительный тест.
📍Пройдите тестирование, чтобы:
● оценить свои навыки
● получить доступ к демо-занятиям курса
● занять место по специальной цене
● получить доступ в закрытое сообщество JS-разработчиков
👉 Пройти полное тестирование: https://otus.pw/kPF2/
Справитесь ли вы с уровнем курса? Покажет вступительный тест.
📍Пройдите тестирование, чтобы:
● оценить свои навыки
● получить доступ к демо-занятиям курса
● занять место по специальной цене
● получить доступ в закрытое сообщество JS-разработчиков
👉 Пройти полное тестирование: https://otus.pw/kPF2/
Многоразовая каскадная анимация с Angular Animation
__________
Вы когда-нибудь думали о том, как сделать пользовательский опыт лучше, когда у нас есть список карточек!?
Сегодня я покажу, как мы можем сделать это с помощью «каскадной» анимации карты и получить красивую страницу карты, используя возможности Angular Animations !
Итак, сначала давайте немного поговорим об Angular Animations!
https://shly.link/devbGdt
__________
Вы когда-нибудь думали о том, как сделать пользовательский опыт лучше, когда у нас есть список карточек!?
Сегодня я покажу, как мы можем сделать это с помощью «каскадной» анимации карты и получить красивую страницу карты, используя возможности Angular Animations !
Итак, сначала давайте немного поговорим об Angular Animations!
https://shly.link/devbGdt
Типы директив в Angular
_________________
В этой статье мы узнаем о типах директив в angular.
https://shly.link/gD1J0
_________________
В этой статье мы узнаем о типах директив в angular.
https://shly.link/gD1J0
Полное руководство по Vue 3 Composition API
_________________
API-интерфейс Composition — это дополнение к платформе Vue, созданное для устранения ограничений API-интерфейса Options, используемого в Vue 2. API-интерфейс Composition предоставляет способ управления реактивностью в приложении без ущерба для организации и удобочитаемости кода. В качестве альтернативы Options API предлагает больше преимуществ. С Composition API вы можете реструктурировать данные, методы, вычисляемые и наблюдаемые данные в более четкую структуру.
В этой статье вы познакомитесь с Composition API и сравните его с API опций. В конце этой записи в блоге вы получите базовые знания об API композиции и его преимуществах по сравнению с API опций.
https://shly.link/vr7t6
_________________
API-интерфейс Composition — это дополнение к платформе Vue, созданное для устранения ограничений API-интерфейса Options, используемого в Vue 2. API-интерфейс Composition предоставляет способ управления реактивностью в приложении без ущерба для организации и удобочитаемости кода. В качестве альтернативы Options API предлагает больше преимуществ. С Composition API вы можете реструктурировать данные, методы, вычисляемые и наблюдаемые данные в более четкую структуру.
В этой статье вы познакомитесь с Composition API и сравните его с API опций. В конце этой записи в блоге вы получите базовые знания об API композиции и его преимуществах по сравнению с API опций.
https://shly.link/vr7t6
Как строить диаграммы в Angular с помощью Chart.js
______________
Чтобы использовать charts.js в Angular, в большинстве руководств предлагается использовать библиотеку вместе с библиотекой ng2-charts, которая поставляется со стандартной директивой базовых диаграмм, помогающей создавать различные диаграммы. Проблема такого подхода в том, что оба пакета иногда строятся по-разному и не обновляются одновременно. Поэтому каждая версия chart.js имеет определенную версию ng2-chart, с которой она может работать.
Реализовать функции в Angular легко с помощью пакетов, но иногда работа с пакетами, которые зависят друг от друга в Angular, может быть очень сложной из-за различий в версиях пакетов. У меня возникли трудности, когда я попытался построить диаграммы в приложении Angular с помощью пакета chart.js и ng2-charts. В конце концов мне пришлось реализовать диаграммы без использования пакета ng2. В результате эта статья покажет вам простой способ построения диаграмм в Angular с помощью chart.js без установки пакета ng2-chart.
https://shly.link/o6WsU
______________
Чтобы использовать charts.js в Angular, в большинстве руководств предлагается использовать библиотеку вместе с библиотекой ng2-charts, которая поставляется со стандартной директивой базовых диаграмм, помогающей создавать различные диаграммы. Проблема такого подхода в том, что оба пакета иногда строятся по-разному и не обновляются одновременно. Поэтому каждая версия chart.js имеет определенную версию ng2-chart, с которой она может работать.
Реализовать функции в Angular легко с помощью пакетов, но иногда работа с пакетами, которые зависят друг от друга в Angular, может быть очень сложной из-за различий в версиях пакетов. У меня возникли трудности, когда я попытался построить диаграммы в приложении Angular с помощью пакета chart.js и ng2-charts. В конце концов мне пришлось реализовать диаграммы без использования пакета ng2. В результате эта статья покажет вам простой способ построения диаграмм в Angular с помощью chart.js без установки пакета ng2-chart.
https://shly.link/o6WsU
Sweetcode.io
How to Build Charts in Angular Using Chart.js
It can be difficult build charts in angular using chart.js without installing the ng2-chart package. This article guides you through it.
Использование React в приложениях Angular
___________
Два сценария требуют использования React в приложении Angular. Во-первых, в экосистеме React есть компонент, на разработку которого у нас уйдут недели, например, компонент Timeline . Во-вторых, возможно, мы приобрели компанию, которая использует React, и нам нужно интегрировать ее в наше существующее приложение.
В этой статье я покажу, как интегрировать React в обоих случаях. Начнем с самого простого случая, когда мы должны использовать компонент React.
https://shly.link/zDWYj
___________
Два сценария требуют использования React в приложении Angular. Во-первых, в экосистеме React есть компонент, на разработку которого у нас уйдут недели, например, компонент Timeline . Во-вторых, возможно, мы приобрели компанию, которая использует React, и нам нужно интегрировать ее в наше существующее приложение.
В этой статье я покажу, как интегрировать React в обоих случаях. Начнем с самого простого случая, когда мы должны использовать компонент React.
https://shly.link/zDWYj
Что нужно освоить Fullstack-разработчику JavaScript? Начните изучать необходимые технологии на открытых уроках практического онлайн-курса «JavaScript Developer. Professional» от OTUS.
1 сентября в 20:00 — «Обзор технологий для построения API».
Рассмотрим несколько протоколов клиент-серверных приложений и на примере посмотрим на их сильные и слабые стороны.
Регистрация - https://otus.pw/zL3v/
15 сентября в 20:00 — «Кодогенерация Typescript».
Научимся писать программы, которые пишут код на Typescript за нас, а также попробуем в действии несколько библиотек и приобретем навык чтения абстрактного синтаксического дерева.
Регистрация - https://otus.pw/H5JG/
Не упустите возможность попробовать обучение на курсе познакомиться с преподавателем. Ведет занятие Арсений Высоцкий, тимлид в международной компании с опытом более 10 лет в веб-разработке.
‼️ Для участия нужно пройти вступительный тест и зарегистрироваться: https://otus.pw/FG2U/
1 сентября в 20:00 — «Обзор технологий для построения API».
Рассмотрим несколько протоколов клиент-серверных приложений и на примере посмотрим на их сильные и слабые стороны.
Регистрация - https://otus.pw/zL3v/
15 сентября в 20:00 — «Кодогенерация Typescript».
Научимся писать программы, которые пишут код на Typescript за нас, а также попробуем в действии несколько библиотек и приобретем навык чтения абстрактного синтаксического дерева.
Регистрация - https://otus.pw/H5JG/
Не упустите возможность попробовать обучение на курсе познакомиться с преподавателем. Ведет занятие Арсений Высоцкий, тимлид в международной компании с опытом более 10 лет в веб-разработке.
‼️ Для участия нужно пройти вступительный тест и зарегистрироваться: https://otus.pw/FG2U/
Как создать ввод OTP в Vue 3
________________
Ввод OTP — один из самых забавных компонентов, которые вы можете использовать в своем приложении. Они делают сухой процесс заполнения еще одной формы немного более увлекательным.
https://shly.link/V6AnU
________________
Ввод OTP — один из самых забавных компонентов, которые вы можете использовать в своем приложении. Они делают сухой процесс заполнения еще одной формы немного более увлекательным.
https://shly.link/V6AnU
Что такое PortalVue и как мы можем использовать его в качестве слота
____________
PortalVue может быть действительно полезной функцией и может сделать ваш проект более динамичным.
https://shly.link/LsTRp
____________
PortalVue может быть действительно полезной функцией и может сделать ваш проект более динамичным.
https://shly.link/LsTRp
GitHub
GitHub - LinusBorg/portal-vue: A feature-rich Portal Plugin for Vue 3, for rendering DOM outside of a component, anywhere in your…
A feature-rich Portal Plugin for Vue 3, for rendering DOM outside of a component, anywhere in your app or the entire document. (Vue 2 version: v2.portal-vue.linusb.org) - LinusBorg/portal-vue
Видеоплеер Angular с Ngx-Videogular
_________________
В цифровом мире видеоплееры HTML5 в настоящее время являются наиболее широко используемым типом видеоплееров. Благодаря высокой совместимости и адаптивности эти видеоплееры помогают вещателям расширить аудиторию своих потоков. Чтобы получить контент из видео CDN или онлайн-видеоплеера, на котором размещена потоковая передача, видеопроигрыватели HTML5 используют протокол HTTPS Live Streaming (HLS), созданный специально для потоковой передачи.
Видеопроигрыватель HTML5 предоставляет вещателям помощь, необходимую им для эффективного охвата значительной аудитории. Из-за этого он вскоре приобрел популярность и остается предпочтительным выбором телевещателей.
Ngx-Videogular — это надежный мультимедийный фреймворк, управляемый Angular. Разработка видеопроигрывателей веб-сайтов HTML5 для приложений Angular особенно хорошо использует эту медиа-инфраструктуру. Как следует из названия, Ngx-Videogular — это медиа-фреймворк, созданный в Angular.
С помощью нескольких тегов и атрибутов, добавленных в ваш HTML-код, вы можете создать собственный видеоплеер с помощью Ngx-Videogular, который в основном опирается на стандарты HTML5.
https://shly.link/7giku
_________________
В цифровом мире видеоплееры HTML5 в настоящее время являются наиболее широко используемым типом видеоплееров. Благодаря высокой совместимости и адаптивности эти видеоплееры помогают вещателям расширить аудиторию своих потоков. Чтобы получить контент из видео CDN или онлайн-видеоплеера, на котором размещена потоковая передача, видеопроигрыватели HTML5 используют протокол HTTPS Live Streaming (HLS), созданный специально для потоковой передачи.
Видеопроигрыватель HTML5 предоставляет вещателям помощь, необходимую им для эффективного охвата значительной аудитории. Из-за этого он вскоре приобрел популярность и остается предпочтительным выбором телевещателей.
Ngx-Videogular — это надежный мультимедийный фреймворк, управляемый Angular. Разработка видеопроигрывателей веб-сайтов HTML5 для приложений Angular особенно хорошо использует эту медиа-инфраструктуру. Как следует из названия, Ngx-Videogular — это медиа-фреймворк, созданный в Angular.
С помощью нескольких тегов и атрибутов, добавленных в ваш HTML-код, вы можете создать собственный видеоплеер с помощью Ngx-Videogular, который в основном опирается на стандарты HTML5.
https://shly.link/7giku