15 интересных библиотек JavaScript и CSS

0
6131
views

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

Currency

currency

Currency.js это легковесная библиотека JavaScript для работы с валютами. Она решает проблемы плавающей точкой в JavaScript и позволяет вам выполнять все основные арифметические операции не беспокоясь о точности дробей. Она работает с разными видами вводных данных: строчными, числовыми, десятичными и денежными единицами.

Lass

lass

Вы можете воспользоваться Lass для поддержки пакетов заготовок программного кода для Node.js. Ее действительно легко устанавливать, стоит только ввести

run npm install -g lass

в вашем терминале. Lass предлагает большое разнообразие функций, таких как тестирование юнитов при помощи ava, автоматическое формирование кода при помощи prettier, автоматическую инициализацию git, автоматическую разметку форматирования и проверку кода на ошибки с помощью remark.

Fastify

fastify

Fastify это современные фреймворк Node.js, чьи создатели вдохновлялись такими проектами как Hapi и Express. Помимо того что это один из самых быстрых фреймворков (benchmarks), Fastify также очень дружественен к разработчику, полностью асинхронен и расширяем благодаря его хукам, плагинам и декораторам.

Draggable

draggable

Draggable это легковесная, модульная драг-и-дроп библиотека от Shopify. Она предлагает развитый функционал перетягивания с быстрым переупорядочиванием DOM, чистый API и доступную разметку. Она поставляется с дополнительными модулями, которые можно включить, чтобы добавить такие функции как сортировка и подкачка, а также другие утилиты.

Mousetrap

mousetrap

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

src2png

src2png

С помощью этой библиотеки вы можете превратить ваш исходный код в изображения с подсветкой синтаксиса. Src2png посылает сигнал «старт» на Poi dev server, запускает экземпляр Headless Chrome через Puppeteer, а затем выводит изображение с обрезкой пробелов и сохраняет скриншот.

Stencil

stencil

Stencil это простой компиллятор веб-компонентов, который сочетает лучшие концепции самых популярных фреймворков. Он использует TypeScript, JSX, виртуальный DOM, неактивное связывание данных и асинхронный конвейер рендеринга (сходный с React Fiber) для генерации веб-компонентов.

Words To Numbers

Words to numbers

Words To Numbers это интересная библиотека JavaScript для распознавания и конвертирования слов в числа. Если переданная строка является числом, она возвращает ее числовое значение, в противном случае возвращает начальную строку со всеми случаями замены чисел. Есть возможность сопоставления нечеткого текста с использованием расстояния Jaro для нахождения наилучшего совпадения, даже если строка содержит опечатку.

Mail for Good

Mail for Good

Mail for Good это приложение с открытым исходным кодом для управления кампаниями рассылки. Используется для рассылки электронных писем через AWS Simple Email Service от Amazon. Приложение предлагает много возможностей, например рассылку е-мейлов неограниченного размера, импортирование е-мейлов в формат CSV, создание шаблонов, отслеживание показателя отказов и др.

Devices.css

devices

Библиотека, которая с помощью чистого CSS отображает современные мобильные устройства. Включает некоторые из самых популярных девайсов, например iPhone X, Google Pixel 2 XL и Samsung Galaxy S8. Дизайны отличаются хорошим качеством и элегантностью и могут быть использованы для лэндингов или скриншотов страниц.

AR.js

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

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

SentinelJS

sentinel

Это маленькая библиотека JavaScript, позволяющая вам создать функцию наблюдения, которая уведомит вас, когда к DOM добавляется узел, совпадающий с данным правилом CSS. Библиотека использует динамически определяемые правила CSS-анимации (@keyframes), которые добавляются к событиям animationstart браузера при добавлении нового узла DOM.

Luma.GL

luma

Luma.GL это фреймворк WebGL2 для визуализации и вычисления данных с использованием графического процессора. Он предлагает простой способ использования высокой производительности WebGL для отображения больших наборов данных. Существует также deck.gl, библиотека с более высокоуровневым API, под капотом управляемым Luma.GL.

Zoomove

zoomove

Это плагин jQuery, позволяющий вам динамически увеличивать картинки при наведении мыши. Он прост в установке и использовании и имеет много настроек, с помощью которых можно установить url изображения, размер увеличения и вид указателя курсора. Плагин совместим с Chrome 42+, Firefox 41+, Safari 9+, Opera 29+ и IE 9+.

Scrollanim

Это легковесная библиотека CSS3 и JavaScript для создания анимации при прокручивании. Она бесплатна, имеет открытый исходный код и проста в использовании. Scrollanim использует Animate.css и имеет большое количество встроенныхCSS3-анимаций, из которых вы можете выбирать, например, bounceIn, bounceOut, fadeIn, fadeOut и другие.

***
Подписывайтесь на наш канал в Telegram!


frontend logo

Хочешь проверить свои знания по фронтенду?

Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!

×

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here