5 лучших инструментов и библиотек для Angular

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

👉 @sWebDev

Navigation Button Interaction

Анимированный вариант выравнивания текста, выполненный с помощью GSAP.js и SCSS.

👉 @sWebDev

Внедрение ReCAPTCHA в React приложение

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

👉 @sWebDev

Eartho

Eartho - библиотека для создания удобной аутентификации в веб-приложении. Поддерживает использование в связке с Vue, React, Angular и другими популярными фреймворками.

👉 @sWebDev

Музыкальный плеер на Vue.js

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

👉 @sWebDev

Создание рефов в React

Рефы создаются с помощью React.createRef() и прикрепляются к React-элементам через ref атрибут. Обычно рефы присваиваются свойству экземпляра класса в конструкторе, чтобы на них можно было ссылаться из любой части компонента.

  class MyComponent extends React.Component {
        constructor(props) {
         super(props);
         this.myRef = React.createRef();
        }
        render() {
          return <div ref={this.myRef} />;
        }
     }

👉 @sWebDev

Symbiote.js

Symbiote.js — это библиотека, специально созданная для мета-приложений. Как следует из названия, Symbiote - это про симбиоз. Для того, чтобы симбиоз стал возможен, разработчики следовали принципу максимального приближения к веб-платформе и её нативным API, при сохранении достаточного уровня удобства. Библиотека изначально предназначена для создания приложений со слабосвязанной архитектурой, которая упрощает интеграцию в широкий набор сред и окружений.

👉 @sWebDev

Magic Dust - GSAP

Анимированный эффект движения мышкой, выполненный с помощью библиотеки GSAP.js.

👉 @sWebDev

Двустороннее связывание в полях формы Angular

Механизм двустороннего связывания (angular two way binding) используется, когда необходимо отобразить свойство в шаблоне (одностороннее связывание) и обновить его при изменении значения (возникновение события) без перезагрузки страницы.

Для двустороннего связывания в полях формы используется встроенная в Angular директива NgModel.

<input type="text" [(ngModel)]="contactPerson" />. При изменении поля его значение помещается в свойство contactPerson. Важно помнить, что данная директива может использоваться только с полями формы.

👉 @sWebDev

Next.js VS Nuxt.js: полное руководство

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

👉 @sWebDev

Feed the World!

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

👉 @sWebDev

Scroll Reval

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

👉 @sWebDev

Изучаем новые API React Router

Обзор новых API React Router. Рассмотрим: данные роута, навигацию и обработку ошибок.

👉 @sWebDev

Пончик-тогл

Пончик-переключатель, выполненный с применением библиотеки Greensock.

👉 @sWebDev

5 продвинутых шаблонов React на пальцах

Как и любой React-разработчик, вы наверняка задавались одним из следующих вопросов:
Как создать переиспользуемый компонент, подходящий для разных случаев?
Как создать компонент с простым API, упрощающим его использование?
Как создать расширяемый компонент в плане UI и функциональности?
Популярность этих вопросов привела к разработке сообществом React продвинутых шаблонов. В статье мы рассмотрим пять таких шаблонов.

👉 @sWebDev

React Query

React Query — это библиотека для управления асинхронными данными в приложениях React. Это помогает с такими задачами, как выборка, кэширование и обновление данных. Узнать все подробности можно по ссылке.

👉 @sWebDev

Дополни таблицу умножения

Необычная игра, выполненная на React. Смысл заключается в заполнении пустых клеток таблицы умножения. Мы можем настроить размер таблицы и сложность игры.

👉 @sWebDev

Route Guard для доступа к дочернему маршруту Angular

Вам необходим Route Guard, который будет разрешать или запрещать доступ к дочернему маршруту. Какой это guard?

👉 @sWebDev

Как создать реф в React?

Какую функцию нужно использовать для создания рефа в React?

👉 @sWebDev