melonJS

Это игровой движок для 2D-игр. Подключая эту библиотеку к своему коду, вы получаете доступ ко всем фичам, таким как поддержка физики, столкновения, спрайты и другие, важные в действительно стоящих играх.

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

👉 @sWebDev

Mousetrap.js:

Эта библиотека нужна чтобы создавать действия при нажатие различных комбинации клавиш, что бывает очень полезно при создание функционального web-приложения, например текстового редактора или разработке приложение для ПК на JS.

Пример назначения клавиш:
Mousetrap.bind('4', function() { console.log('4'); });
Mousetrap.bind("?", function() { console.log('show shortcuts!'); });
Mousetrap.bind('esc', function() { console.log('escape'); }, 'keyup');

👉 @sWebDev

Peppermint.js

Библиотека Peppermint.js нужна для создания слайдов, она позволяет сделать его для тач устройств, с нуля это сделать достаточно сложно, поэтому если вам нужен слайдер для мобильных устройств, вам нужна эта библиотека.

Socket io

Эта библиотека нужна для работы с WebSocket.

Пример использования
// Подключаем блок для вывода текста
let text = document.getElementById("text")
// Подключаемся к серверу
let socket = io('https://localhost:3000');
// Отслеживаем подключение
socket.on('connect', function () {
// Выводим сообщение подключение
text.innerHTML = "Подключение прошло успешно<br>"
// Отслеживание сообщения от сервера со заголовком 'hello'
socket.on('hello', function (data) {
// Выводим сообщение от сервера
text.innerHTML += "Сервер: " + data + "<br>"
});
});

Video.js

Данная библиотека предназначена для работы с видео и аудио. Ее главное преимущество заключается в продвинутом плеере, который гораздо лучше стандартного браузерного.

SVG.JS

Библиотека используется для работы с SVG, в стандартном JS, она упрощает работу с SVG, не теряя в производительности, плюсом также является то, что библиотека простая и крайне быстрая.

SVG.js предоставляет более краткий и легко читаемый синтаксис.
const draw = SVG('drawing')
const rect = draw.rect(100, 100).fill('#f06')

Datalib

Datalib — это библиотека для работы с данными. Она включает в себя средства для загрузки данных, ведения статистики и использования шаблонов строк. Хотя изначально библиотека разрабатывалась для движка Vega и связанных с ним проектов, datalib – это полноценная независимая библиотека.
Ее можно использовать для создания приложений для управления данными как на стороне клиента (в браузере), так и сервера (например, в связке с node.js).

Vorlon.js

Vorlon.js – это open-source инструмент с поддержкой расширений, позволяющий удаленно вести отладку и тестирование javascript-кода.
Библиотека основывается на node.js и socket.io. Чтобы установить Vorlon.JS, нужно будет добавить всего лишь одну строку кода в ваше веб-приложение. Затем запустить сервер и открыть консоль Vorlon.JS. Инструмент позволяет одновременно подключиться к 50 устройствам.

Проверить работу кода на каждом из подключенных устройств можно в одно нажатие. Отладку можно проводить практически на любой платформе при помощи веб-интерфейса. Плагин также позволяет добавлять новые функции и подключать ресурсы.

👉 @sWebDev

Layzr.js

Маленькая, быстрая и независимая библиотека для ленивой загрузки. Она помогает ускорять загрузку страницы, так как с ней изображения будут подгружаться только, когда попадут в область видимости браузера.

Yako.js

Yako.js представляет собой миниатюрную библиотеку для построения графиков без использования DOM, разработанную для быстрого рендеринга как на клиентской, так и на серверной стороне. Библиотека предназначена для создания простеньких легких SVG-графиков, которые работают гораздо быстрее по сравнению с highcharts / flot / c3 / d3.

👉 @sWebDev

Wheelnav

Wheelnav.js — библиотека на основе SVG для создания анимированного навигационного меню. Она позволяет создавать округлые, табулированные и многие другие форматы меню навигации. Библиотека включает в себя предопределенные CSS-классы, а также поддерживает data-атрибуты HTML5.

👉 @sWebDev

Mo.js

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

В библиотеке есть декларативный API, который используется для установки значений различных свойств для компонентов, которые создаются. Поставляется с четырьмя различными встроенными модулями: HTML, Shape, ShapeSwirl и Burst. Модули burst и swirl могут быть использованы для всех видов взаимодействия пользователя с элементами на веб-сайте.

👉 @sWebDev

ProgressBar.js

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

👉 @sWebDev

Popmotion

В основном используется для анимации чисел, цветов и сложных строк. Основная функция анимации занимает около 5 Кб, а вся библиотека — около 12 Кб.

Подходит для двух видов анимации: кейфреймов и пружин. В первых можно указать точку перехода для анимации по кейфреймам. Пружинная имеет такие свойства, как жесткость, демпфирование, масса и скорость, чтобы сделать анимацию естественнее. Библиотека содержит множество вспомогательных функции angle, clamp, distance и snap, которые можно использовать для расчетов.

👉 @sWebDev

Lottie

Анализирует анимацию, созданную Adobe After Effects, которая была экспортирована как JSON с помощью плагина Bodymovin. На странице репозитория подробно объясняется процесс установки и принципы работы Lottie. Для управления анимацией доступно множество глобальных параметров. Например, можно запускать, останавливать и менять направление движения анимированных объектов.

👉 @sWebDev

ScrollReveal

Пригодится, если надо анимировать элементы, когда они прокручивают в область просмотра или из нее. В библиотеке можно контролировать ход анимации с помощью свойств delay, duration и interval. Также есть опции для управления вращением, масштабом и перемещением объектов.

👉 @sWebDev

Date-fns.

Это альтернатива библиотеки Moment.js. Предоставляет набор инструментов для синтаксического анализа, обработки и форматирования данных JavaScript.

Примеры:
import { format, formatDistance, formatRelative, subDays } from 'date-fns'

format(new Date(), "'Today is a' eeee")
//=> "Today is a Friday"

formatDistance(subDays(new Date(), 3), new Date(), { addSuffix: true })
//=> "3 days ago"

formatRelative(subDays(new Date(), 3), new Date())
//=> "last Friday at 7:26 p.m."

👉 @sWebDev

Vivus

Библиотека была создана специально для работы с SVG. Позволяет анимировать строки сразу, с задержкой или одну за другой, что дает больше возможностей при установке времени анимации.

Примечание: Vivus всегда анимирует элементы в том порядке, в котором они определены в SVG. Кроме того, они должны иметь обводку вместо заливки.

Чтобы создать приведенную выше анимацию, понадобилось всего шесть строк кода.

👉 @sWebDev

LitElement.

Библиотека для создания легких веб-компонентов. Использует подход к созданию шаблонов для веб-приложений lit-html для асинхронного рендеринга.

Пример создания шаблона:
import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
render() {
return html`<p>template content</p>`;
}
}

👉 @sWebDev

Typed.js

Используется для анимации набора текста. Все строки, которые нужно запрограммировать, можно передать в виде массива. В библиотеке реализован SEO-подход, в котором текст, который нужно «оживить», можно прочитать из HTML-блока div на веб-странице.

Поведение анимации настраивается с помощью набора параметров, таких как:
1. Скорость набора;
2. Скорость обратного интервала;
3. Задержка запуска;
4. Обратная задержка;
5. Количество циклов и так далее.

👉 @sWebDev