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

RxJS

RxJS - это библиотека для реактивного программирования, которая позволит удобно организовать работу с событиями и асинхронным кодом, писать сложную логику декларативно. RxJS активно используется в фреймворке Angular, а также с Vue (Vue-rx) и лежит в основе реализации middleware для Redux (redux-observable) для React.

👉 @sWebDev

Underscore.js

Underscore.js предоставляет более 60 функций. Часть из них рассчитана на любителей map-reduce, другая — специальные вспомогательные функции для javascript. Библиотека умеет делегировать вызовы, если какая-то функциональность реализована разработчиками браузеров.

Примеры
// Первый элемент массива
_.first([5, 4, 3, 2, 1]); // => 5

// Последний элемент массива
_.last([5, 4, 3, 2, 1]); // => 1

// Убрать неугодные элементы
_.without([1, 2, 1, 0, 3, 1, 4], 0, 1); // => [2, 3, 4]

// Оставить только уникальные элементы
_.uniq([1, 2, 1, 3, 1, 4]); // => [1, 2, 3, 4]

👉 @sWebDev

Omniscient

Omniscient.js — это библиотека JS, которая обеспечивает абстракцию компонентов React для быстрого рендеринга сверху вниз, охватывающего неизменяемые данные.

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

👉 @sWebDev

fullPage.js

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

👉 @sWebDev

Gatsby.js

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

👉 @sWebDev

Masonry

Masonry - это потрясающая библиотека для создания сетки. Эта библиотека помогает размещать элементы раскладки в подходящих положениях в зависимости от доступного пространства по вертикали.

👉 @sWebDev

PrimeVue

Это универсальная, простая в использовании и производительная библиотека UI-компонентов для Vue. Она создана, чтобы помочь вам строить прекрасные пользовательские интерфейсы.

В этой библиотеке вы найдете больше 80 UI-компонентов с адаптивным дизайном и полной поддержкой WCAG (руководство по обеспечению доступности веб-контента). Благодаря последнему обновлению эта библиотека имеет полную поддержку Vue 3. В том же обновлении добавилось большое количество новых компонентов.

Одно из основных преимуществ PrimeVue — широкий спектр компонентов. Там есть все, от таблиц и пагинаторов до продуманных диаграмм, которые вы можете использовать при создании интерактивных Vue-приложений.

👉 @sWebDev