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

Parsley

Вы хотите добавлять формы в свои проекты?

Если да, то Parsley может быть вам полезен. Это простая, но мощная библиотека JS, которую можно использовать для проверки форм.

Особенности и преимущества:
1. Интуитивно понятный DOM API принимает входные данные непосредственно из тегов HTML, не требуя написания JS.
2. Проверка динамической формы путем динамического обнаружения изменений формы.
3. 12+ встроенных валидаторов, валидатор Ajax и другие расширения.
4. Вы можете переопределить поведение Parsley по умолчанию и предложить интерфейс, ориентированный на пользовательский интерфейс и UX.
5. Бесплатный, с открытым исходным кодом и сверхнадежный, а также работает со многими браузерами.

👉 @sWebDev

Vuetify

Vuetify — UI-библиотека Vue с красивыми, сделанными вручную компонентами. Все компоненты соответствуют спецификациям Material Design: они модульные, адаптивные и производительные.

Благодаря использованию SASS-переменных вы сможете кастомизировать свои приложения, создавая уникальные и динамичные макеты и прекрасные стили компонентов.

Vuetify учитывает руководства по доступности, поддерживает все современные браузеры и совместима с Vue CLI 3. Она легко интегрируется и имеет множество UI-компонентов, пригодных для многократного использования (карусели, навигация, карточки).

Библиотека также предлагает базовые шаблоны для простого HTML, Webpack, NUXT, PWA, Electron, A La Carte и Apache Cordova.

👉 @sWebDev

Polymer

Библиотека JavaScript с открытым исходным кодом от Google — Polymer используется для создания веб-приложений с использованием компонентов.

Особенности и преимущества:
1. Предоставляет простой способ создания нестандартных элементов.
2. Поддерживает вычисляемые свойства.
3. Поддерживает как одностороннюю привязку данных, так и двустороннюю.
4. Хорошо работает с событиями жестов.

👉 @sWebDev

Chakra UI

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

Все компоненты отличаются доступностью (жесткое следование стандартам WAI-ARIA), тематичностью и пригодностью для компоновки. Они поддерживают адаптивные стили из коробки и совместимы с темным режимом.

Chakra UI также содержит набор компонентов макета, таких как CBox и CStack, которые упрощают стилизацию ваших компонентов. Кроме того, вы сможете автоматически импортировать компоненты Chakra UI с помощью плагина Webpack.

👉 @sWebDev

Vaadin web components

Достаточно новая, но многообещающая библиотека. Она содержит набор из 30 развивающихся open source веб-компонентов для создания пользовательского интерфейса мобильных и настольных веб-приложений для современных браузеров. Библиотека находится в активной разработке и определенно заслуживает внимания.

👉 @sWebDev