15 интересных JavaScript и CSS библиотек за сентябрь 2017 года

interesting-libraries-september-2017

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

DisplayJS

displayjs

Крошечный фреймворк, упрощающий синхронизацию данных с DOM. Вместо того, чтобы вручную устанавливать и обновлять содержимое страницы, с помощью DisplayJS вы можете просто сопоставлять (мапить) переменные JavaScript с определенными элементами HTML, аналогично тому, как работают шаблоны React или Vue.js.

React Beautiful DnD

react-dnd

React библиотека от Atlassian для создания перетаскиваемых (drag-and-drop) компонентов. Библиотека предлагает чистый и мощный API, который прост в использовании, но при этом предлагает множество параметров настройки и элементов управления. Сгенерированные компоненты имеют плавные GPU анимации, которые выглядят вполне естественно при схватывании, перетаскивании или изменении порядка элементов.

r2

r2

Это обновленная версия популярной библиотеки request для Node.js. Он представляет собой более легковесное HTTP-клиентское решение, которое построено на нативном Fetch API и подогнано под Node.js. R2 имеет размер 16K в сжатом виде, для сравнения request  ~ 500 КБ.

Primer CSS

primer

CSS фреймворк, использующий внешний интерфейс GitHub. Он имеет 23 пакета, которые для упрощения установки разделены на 3 основных мета-пакета. Каждый пакет независим от версии и распространяется через npm, что позволяет легко включать только те модули, которые вам нужны.

Puppeteer

puppeteer

Puppeteer — это высокоуровневый API Node.js для работы с новой функцией headless Chrome. Это официальный проект Google, поддерживаемый командой Chrome DevTools. Подробнее об этом можно прочитать в статье Automating Google Chrome with Node.js, где рассмотрены некоторые из его функций.

Marko

marko

Новый JavaScript фреймворк в лучших традициях React и Vue.js. Он позволяет разбить приложение на автономные компоненты, и описывает, как изменяется вид приложения во времени и отзывчивость на действия пользователя. Марко автоматически обновляет DOM для отображения данных в вашем приложении.

redocx

redocx

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

fuzzysort

fuzzysort

JavaScript библиотека для построения интерфейсов неточного поиска аналогичных тем, которые вы можете увидеть в текстовых редакторах, таких как Sublime Text. Это позволяет пользователям находить то, что они ищут, даже если они делают опечатку. Библиотека вычисляет значение для каждой записи в зависимости от того, насколько близко она соответствует поисковому запросу.

Trowel

trowel

SASS расширение, которое предлагает новый способ записи scss-переменных. Он позволяет группировать несколько переменных в один объект, делая ваш scss более удобным для чтения и записи.

Vivify

vivify

Vivify — это библиотека анимации на CSS. Вам просто нужно добавить класс vivify к элементу, который вы хотите оживить. Вы также можете добавить класс infinite, чтобы анимация повторялась в цикле. Библиотека предлагает большой выбор из более чем 50 анимаций с различными эффектами и направлениями движения.

Tons of Checkboxes
checkbox

Коллекция чекбокс элементов на CSS. Содержит много разных стилей, включая Toggles, Switches, Circles и Squares. Каждый чекбокс имеет четыре размера от маленького до большого. Совместимость со всеми современными браузерами, включая IE9 +.

Push

push

Push — это самая быстрая JavaScript библиотека для управления десктопными уведомлениями. Он основан на мощном Notification API, но также выступает в качестве надежного кросс-браузерного решения, откатываясь до старых реализаций, если браузер пользователя не поддерживает новый API.

react-imgpro

react-impro

React компонент для обработки изображений. Он позволяет изменять изображение с помощью фильтров, а затем экспортировать его в формате base64. Он очень прост в использовании, вам просто нужно указать URL-адрес вашего изображения, фильтры, которые вы хотите применить, а также размер и формат вывода.

Lozad.js

lozad

Lozad — это библиотека на чистом JavaScript для отложенной загрузки изображений, iframe и других элементов HTML. Он основан на новом IntersectionObserver API, который позволяет ему контролировать положение элементов, не полагаясь на какие-либо внешние зависимости. Он очень легкий, всего 535 байт, уменьшенный и gzipped.

Semiotic

smiotic

Фреймворк для построения графиков, объединяющий React и D3. Он предлагает три типа систем (XYFrame, ORFrame, NetworkFrame), позволяющие создавать некоторые нетрадиционные графики. Способ отображения данных может быть дополнительно настроен путем изменения настроек систем координат или добавления собственных CSS стилей.

Вольный перевод статьи на tutorialzine.com