Push.js

Библиотека для удобной работы с push-уведомлениями. Push.js имеет хорошую документацию,а установка в проект занимает не более 10 минут. Познакомиться со всеми особенностями библиотеки можно по ссылке.

👉 @sWebDev

DgrmJS

DgrmJS - это редактор диаграмм, с прицелом на трансформацию в карту знаний.
Отличительные особенности:
простота и аскетичность,
работает на телефонах,
открытый исходный код.

👉 @sWebDev

WebGL - Morphing Ball

Проект анимированной сцены, реализованный на SCSS и Three.js.

👉 @sWebDev

Jest

Jest - это фреймворк для тестирования, созданный в Facebook и хорошо принятый сообществом React. Фреймворк является универсальной платформой для тестирования, адаптирующейся к любой библиотеке или фреймворку JavaScript.
Преимущество использования Jest заключается в том, что вам требуется нулевая или минимальная конфигурация для того чтобы начать писать тесты. Фреймворк имеет встроенную библиотеку утверждений и поддерживает использование мок функций или шпионов.

👉 @sWebDev

Vaporwave Sketchbook

Vaporwave Sketchbook - это генератор фигур, выполненный на CSS, SVG и GSAP.js.

👉 @sWebDev

Как создать экземпляр приложения Vue.js ?

Первый шаг при создании приложения на Vue.js - это создать экземпляр. Vue.js обладает специальной функцией для этого. Какой? Если забыли, то вернитесь к нашему посту за 07.11.

👉 @sWebDev

Адаптивное изображение замка

Проект адаптивного изображения замка, выполненный на SCSS и GSAP.js.

👉 @sWebDev

События маршрутизации Angular

Каждый раз, когда в Angular приложении осуществляется навигация, Router сервис инициирует ряд событий:

NavigationStart - начало навигации;
RoutesRecognized - завершение процесса парсинга URL и распознавания маршрутов;
RouteConfigLoadStart - инициируется непосредственно перед асинхронной загрузкой маршрутов;
RouteConfigLoadEnd - инициируется непосредственно после асинхронной загрузкой маршрутов;
NavigationEnd - завершение навигации;
NavigationCancel - навигация отклонена, возникает, когда guard возвращает false;
NavigationError - возникновение непредвиденной ошибки в процессе осуществления навигации.

Перечисленные выше события могут быть обработаны в любом компоненте или сервисе приложения. Чтобы определить для них обработчики, необходимо "подписаться" на свойство events сервиса Router.

👉 @sWebDev

Вертикальная прокрутка на GSAP.js

Вертикальная прокрутка, выполненная на SCSS и библиотеке GSAP.js.

👉 @sWebDev

Захват изображений и видео с react-webcam

Руководство по использованию react-webcam для простой и функциональной работы с веб-камерой.

👉 @sWebDev

Vuestic UI

Vuestic UI - фреймворк для работы с визуальной составляющей вашего сайта. Из особенностей:
полная совместимость с Vue.js;
наличие более 50 компонентов с большим набором функций;
гибкая настройка компонентов;
адаптивность и кроссбраузерность.

👉 @sWebDev

Hover-эффект с GSAP.js

По ссылке эффект наведения на кнопку, выполненный на SCSS, SVG и GSAP.js.

👉 @sWebDev

Руководство по использованию 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