Frontender Libs - обзор библиотек JS / CSS
8.49K subscribers
2.01K photos
729 videos
1 file
235 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Менеджер по рекламе: @Spiral_Yuri

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
Cleave.js

Вы когда-нибудь использовали поле формы, которое бы форматировало контент во время набора текста? Например, чтобы превратить 1234567890 в номер телефона с международным кодом: (123) 456-7890. Cleave.js – библиотека JavaScript, позволяющая добавить на сайт подобные функции.

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
Premonish

Premonish – библиотека JavaScript, которая анализирует движение курсора и предсказывает, с каким элементом пользователь будет взаимодействовать дальше. Это позволяет применить на сайте интересные триггеры анимации и помогает выделить некоторые призывы к действию.

👉 @sWebDev
Glimmer

Отличная библиотека, которая помогает при работе с компонентами пользовательского интерфейса и отрисовкой DOM. Она построена на базе Ember CLI и использует Git, Node.js, npm и Yarn. Если вы ищете инструмент для создания компонентов и хотите оптимизировать процесс работы с ними, обратите внимание на Glimmer.

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
Slick

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

👉 @sWebDev
Taffy DB

Taffy DB — небольшая библиотека, которая реализует почти полноценную базу данных полностью на JavaScript. Предназначена она, как думаю, уже понятно, для хранения любых типов данных (в том числе и обьектов, передаваемых в виде JSON), обеспечивает парадигму CRUD, что и позволяет отнести библиотеку к специализированным базам данных, а также предоставляет расширенные функции поиска, фильтрации и сортировки данных. Taffy DB значительно расширяет список доступных операций над коллекциями данных, упрощает вставку, выборку, обновление и удаление данных, поддерживает сортировку в различных форматах (традиционную для SQL DESC/ASC, в том числе и по нескольких полях сразу)

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
TweenJS

Эта часть пакета CreateJS невероятно эффективна для создания анимации на HTML и JavaScript.

👉 @sWebDev
Shave

Используя заданную максимальную высоту, этот плагин JavaScript обрезает оставшийся текст, чтобы он поместился в элементе HTML. При этом текст сохраняется в скрытом элементе <span>, т.е. вы его не потеряете.

👉 @sWebDev
StencilJS

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

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
Overlay Scrollbars

Плагин JavaScript, который скрывает собственные полосы прокрутки, заменяя их версиями с индивидуальным стилем.

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
iziModal

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

CopperLicht - это JavaScript-библиотека с открытым исходным кодом для создания игр и интерактивных 3D-приложений с использованием WebGL , разработанная Ambiera . [3] Цель библиотеки - предоставить API для облегчения разработки 3D-контента для Интернета. Предполагается, что он будет использоваться вместе с коммерческим редактором 3D мира CopperCube , но также может использоваться без него.

👉 @sWebDev
Microlight.js

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

👉 @sWebDev
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Parallax.js

Parallax.js реагирует на ориентацию вашего cмартфона, смещая слои в зависимости от их глубины в сцене. А если вы используете не смартфон, то parallax.js вместо этого будет учитывать позицию вашего курсора.

👉 @sWebDev
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
This media is not supported in your browser
VIEW IN TELEGRAM
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