WebDEV
11.5K subscribers
1.29K photos
1.54K links
Сообщество веб-разработчиков.

На канале можно найти: видео-уроки, полезные статьи, новости из мира IT и веб-разработки.

Ссылка: @Portal_v_IT

Сотрудничество: @oleginc, @tatiana_inc
Download Telegram
React Vis — это библиотека, которая предлагает большую коллекцию диаграмм для приложений React. Её компоненты работают аналогично обычным компонентам React, к которым мы привыкли. Библиотека включает в себя линейные/комбинированные графики, гистограммы, тепловые карты, точечные диаграммы, контурные графики и многое другое. Она не требует каких-либо знаний по D3 или любой другой библиотеки data-vis. Библиотека предоставляет низкоуровневые модульные строительные компоненты, такие как оси X и Y.

Демо | GitHub

#js #library #react
Howler.js — это аудио библиотека для современного веба, которая по умолчанию использует Web Audio API, а в случае его отсутствия использует HTML5 Audio. Возможности howler.js: использует по умолчанию Web Audio API, фолбэк к HTML5 Audio, поддерживает множество файловых форматов, автоматическое кэшировнаие для Web Audio API, кэширование для HTML5 Audio, включение/отключение звука, регулировка звука, воспроизведение несколько звуков одновременно, плавное затухание звука, поддержка Web Audio 3D sound positioning, не использует внешних библиотек, только чистый Javascript, легковесная, весит всего 9kb (3kb в архиве).

Демо | GitHub

#js #library #audio
Sigma.js — это javascript-библиотека с открытым исходным кодом, не занимающая много дискового пространства, для построения схем с использованием HTML5 Canvas. Она предназначена для нанесения на веб-страницы статических или динамических, но непременно интерактивных карт сетевых сообществ с любым количеством узлов. Библиотека автономна, может расширяться за счёт дополнительных модулей (синтаксический анализатор GEFX и алгоритм расчёта разметки ForceAtlas2 уже включены), допускает последовательное применение jQuery-подобных приёмов. Широкие возможности адаптации на любой случай и масса примеров, подтверждающих универсальность Sigma.js.

Демо | GitHub

#js #library #html
Chroma.js — это небольшая библиотека, которая может помочь в управлении цветами. Послужной список для выполнения соответствующих задач бесконечен: позволяет манипулировать цветами, масштабировать цвета, управлять режимами и т.д.

Демо | GitHub

#js #library #colour
Emotion — это высокопроизводительная, легкая библиотека css-in-js. Ключевая идея очень проста. Вам не нужно жертвовать производительностью ради удобства разработчиков при написании CSS. Emotion минимизируют стоимость исполнения css-in-js, анализируя ваши стили с помощью babel и PostCSS. Ядро библиотеки в рантайме занимает 2,3кб и поддержка React — 4кб.

Демо | GitHub

#js #css #library
Gremlins.js — это библиотека хаотического тестирования веб-интерфейсов. С ее помощью можно проверить надежность веб-приложений путем развязывания орды недисциплинированных гремлинов. «Гремлинами» в библиотеке называются функции, которые способны устроить адский беспорядок на плохо спроектированной странице. Библиотечные «могваи» — это мирные сущности, главная задача которых – наблюдать за происходящим, сообщать о том, что они видят, поддерживать процесс тестирования. Есть здесь и «Гизмо». В библиотеке он играет роль механизма, останавливающего сеанс тестирования. Для того, чтобы воспользоваться библиотекой, запустив стандартную процедуру случайного тестирования, достаточно буквально пары строк кода или нескольких кликов мышью.

Демо | GitHub

#js #library #node
Granim.js — это небольшая JavaScript-библиотека, помогающая украсить интерфейс интерактивными орнаментами, основанными на градиентах. Это может быть стандартный круговой градиент, или динамический градиент, применяемый к фону картинки, или движущиеся градиенты в сочетании с масками.

Демо | GitHub

#js #library #animation
Fabric.js — мощная Javascript библиотека для работы с HTML5 <canvas>. Fabric включает в себя обектную модель, которой так не хватает при работе с <canvas>, а так же SVG парсер, интерактивный слой и множество других, незаменимых инструментов. Это полностью открытая библиотека с MIT лицензией и многими взносами разработчиков за последние несколько лет.

Демо | GitHub

#library #js #html
Luxon.js — новая библиотека для работы с датами от команды Moment.js. Казалось бы, зачем нужна еще одна библиотека для работы с датами и временем когда есть всем известная библиотека Moment?! Тем интереснее, что альтернатива предложена самой командой Moment.

Библиотека Luxon заявлена как мощное, современное и удобное средство для работы с датами и временем в JavaScript. Принципы Luxon: цепочки вызовов как в Moment; все типы иммутабельными; более ясный и очевидный API: для разных объектов — разные методы с четко определенными параметрами; Intl API для обеспечения интернационализации (откат к английскому варианту, если браузер не поддерживает Intl API); Intl API для обеспечения работы с временными зонами; более полная поддержка расчета длительности, встроенная поддержка работы с интервалами.

Демо | GitHub

#js #library #moment
Material UI — это библиотека, которая позволяет создавать приложения в стиле Google Material Design с использованием компонентов React. Она упрощает веб-разработку, создание привлекательных пользовательских интерфейсов и одностраничных приложений.

При использовании библиотеки material-ui в серверной системе рендеринга, разработчик должен применять одно и то же окружение и для сервера, и для клиента.

Демо | GitHub

#js #library #react
Typeahead.js — это гибкая JavaScript библиотека, которая позволяет создать поиск с использованием авто-заполнения. Библиотеку можно разбить на два компонента:

1. Typeahead — Отображение (интерфейс).
2. Bloodhound — Система подсказок.

Каждый из этих компонент можно использовать в отдельности.

Демо | GitHub

#js #library
Reveal.js — движок презентаций Хаким Эль-Хаттаба, привлекающий своей простотой, 3D-эффектами и специальным онлайн-сервисом для создания презентаций rvl.io.

Reveal.js состоит из одного javascript-файла и двух таблиц стилей. Первый стиль отвечает за основное оформление, а второй содержит в себе разметку стандартного шаблона, от которого вы можете отступать. Этот шаблон определяет внешний вид важных частей ваших презентаций: текст, изображения, ссылки. Шаблоны в Reveal.js можно без труда оформить под себя, так как таблицы стилей очень хорошо организованы. Переходы между слайдами, если вы захотите воспользоваться этим свойством, организуются посредством CSS 3D transitions.

Демо | GitHub

#library #js #html
Draft.js — это фреймворк редактора текста для в React, позволяющий просто и быстро редактировать тексты, без разницы это маленькая заметка или большая статья для блога.

В Draft.js, настраивается абсолютно все, разработчики создали систему блоков из которых вы можете создать удобный для вас инструмент редактирования текста.

Демо | GitHub

#library #js #react
Cube.js — это фреймворк с открытым исходным кодом для создания аналитических веб-приложений. Он в основном используется для создания внутренних инструментов бизнес-аналитики или для добавления аналитики, ориентированной на клиента, в существующее приложение.

Демо | GitHub

#library #js #analytics
Adonis.js — fullstack MVC фреймворк для Node․js‚ Adonis.js клон популярного фреймворка Laravel на основе PHP․

Adonis.js — оптимальный выбор для тех, кто создает серверные приложения, поскольку этот инструмент предлагает надежную платформу, поддерживаемую ORM. Кроме того, он позволяет быстро и просто создавать SQL-запросы. Другие базы данных работают не менее хорошо с Adonis. Поэтому, если вы используете аналогичный, но более сложный Laravel для этих целей, вам следует подумать о переходе на Adonis.

Демо | GitHub

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

Демо | GitHub

#library #js
Redux — это библиотека для JavaScript с открытым исходным кодом, предназначенная для управления состоянием приложения. Чаще всего используется в связке с React или Angular для разработки клиентской части. Содержит ряд инструментов, позволяющих значительно упростить передачу данных хранилища через контекст.

Демо | GitHub

#js #library #react #angular
🛠 Hover.css — библиотека с набором CSS3-эффектов при наведении, применяемых к ссылкам, кнопкам, логотипам, SVG, изображениям. Легко применить к своим собственным элементам, изменить или просто использовать для вдохновения. Доступно в CSS, Sass и LESS.

Все эффекты Hover.css используют один элемент (с помощью некоторых псевдоэлементов, где это необходимо), поэтому вы можете легко копировать и вставлять их.

🔍 Демо | 📂 GitHub

#js #library
🛠 Mo.js — это библиотека с открытым исходным кодом для создания motion графики на JavaScript . По сравнению с другими библиотеками, mo.js отличается своим подходом синтаксиса и структурой анимации кода. Декларативный API предоставляет вам полный контроль над анимацией, делая ее легко настраиваемой.

Библиотека предоставляет встроенные компоненты, такие как html, shape, swirl, burst и stagger. Использование mo.js на вашем сайте улучшит юзабилити, визуально обогатит ваш контент и точно создаст восхитительную анимацию.

🔍 Демо | 📂 GitHub

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

🔍 Демо | 📂 GitHub

#library #css