Руководство по использованию Material UI AutoComplete в React

Material UI предоставляет уникальный набор компонентов и утилит, которые помогают разработчикам лучше работать с веб-приложениями. Одним из таких компонентов является компонент MUI <Autocomplete/>. В статье подробно познакомимся с этим компонентом и рассмотрим особенности его использования.

👉 @sWebDev

Howler.js

Библиотека Howler.js направлена на решение задач, связанных со звуком в вашем веб-приложении. Познакомиться с особенностями и функционалом можно по ссылке.

👉 @sWebDev

Fun with GSAP and 3D rotation

Анимированная 3D сцена, выполненная на GSAP.js.

👉 @sWebDev

Определяем завершения парсинга URL в Angular

При осуществлении в Angular приложении навигации сервисом инициируются разные события. Какое событие будет отвечать за завершение процесса парсинга URL и распознавание маршрутов? Сомневаетесь? Вернитесь к нашему посту за 14.11.

👉 @sWebDev

Dark Planet - ThreeJs

3D сцена планеты, выполненная с помощью библиотеки Three.js.

👉 @sWebDev

Предохранители React

Предохранители - это компоненты, отлавливающие ошибки JavaScript, сохраняющие их в журнале и показывающие резервный интерфейс.
Предохранитель включает в себя один из методов:
static getDerivedStateFromError() - рендеринг запасного интерфейса;
componentDidCatch() - журналирование ошибок.

Пример:

  class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
    static getDerivedStateFromError(error) {
      // Сброс состояния, следующий рендер покажет запасной UI.
      return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
      // Сохранить информацию об ошибке
      logErrorToMyService(error, errorInfo);
    }

    render() {
      if (this.state.hasError) {
        // Можно отрендерить запасной UI 
        return <h1>Что-то пошло не так.</h1>;
      }
      return this.props.children; 
    }
  }

👉 @sWebDev

Анимируем приложение React с Framer Motion

По ссылке краткая видео-инструкция с комментариями по созданию анимаций с использованием Framer Motion в React.

👉 @sWebDev

City 3D

Проект анимированного 3D города, выполненный с применением библиотеки Three JS.

👉 @sWebDev

V-wave

Библиотека V-wave позволяет легко добавлять анимированные эффекты при нажатии на элементы в веб-приложении. Подробный обзор доступен по ссылке.

👉 @sWebDev

Web Workers в Angular

Познакомимся с Web Workers и узнаем, как улучшить производительность приложения, используя данный функционал в Angular

👉 @sWebDev

Draft.js

Draft.js — инструмент для решения весьма узкого спектра задач, а именно — управление текстовым вводом и редактирование текста. В 2016 году библиотека была представлена инженерами Facebook для работы с текстом на React Conf.

👉 @sWebDev

Millennuim Falcon Adventure Ep1

Анимированная модель «Тысячелетнего сокола» из Star Wars, выполнено на библиотеке Three.Js.

👉 @sWebDev

7 малоизвестных функций в Angular

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

👉 @sWebDev

Bubblegum on hover

Эффект наведения, сделанный на SVG, SCSS и GSAP.js.

👉 @sWebDev

Какой метод в React рендерит запасной интерфейс?

Ошибка JavaScript не должна прерывать работу вашего React приложения. Хорошей практикой будет создать предохранитель, в котором мы сможем рендерить резервный интерфейс. Какой метод для этого использовать? Если забыли, то вернитесь к нашему посту 21.11.

👉 @sWebDev

Анимированная смена состояния в Angular

Angular имеет свой собственный механизм реализации анимаций, в основе которого лежит стандарт Web Animations API.

Подробно рассмотрим функцию transition(), которая является аналогом одноименного CSS-свойства и описывает при смене с какого на какое состояние должна срабатывать анимация. Первый параметр - строка с указанием изменяемых состояний, второй - параметры и (или) стили анимации, указываемые функциями animate() или style().

Если Angular анимация должна отрабатывать для двух состояний в обе стороны (например, с on на off и с off на on), можно использовать краткую запись:

    transition('initial <=> expanded', animate('0.3s'))

👉 @sWebDev

Lerna

Lerna — это инструмент для управления монорепозиториями и проектами JavaScript, состоящими из нескольких пакетов. Монорепозиториями бывает сложно управлять, поскольку последовательные сборки и публикация отдельных пакетов занимают много времени. Узнать все подробности можно по ссылке.

👉 @sWebDev

Устранение debounce и throttle в Vue

При создании веб-приложения одной из главных забот является производительность, особенно для тех сайтов, где присутствует много взаимодействия с пользователем. Ввод данных, прокрутка и изменение размера может повлечь то, что приложение перестанет отвечать на запросы из-за выполнения тяжелых вычислений. debounce и throttle - методы, которые могут замедлить работу обработчиков событий, ограничивая вызовы функций. В статье подробно изучим функционал debounce и throttle в приложении Vue.

👉 @sWebDev