Luxon

Библиотека Luxon заявлена как мощное, современное и удобное средство для работы с датами и временем в JavaScript. Библиотеку создал Айзек Камброн (Isaac Cambron), входящий в команду разработчиков Moment с 2013 года.

👉 @sWebDev

reseter.css

Футуристическая альтернатива Normalize.css и CSS Resets. На картинке представлены различия с конкурирующими библиотеками.

👉 @sWebDev

Charts.css

CSS-фреймворк с открытым исходным кодом для визуализации данных помогает разработчикам интерфейсов превращать данные в красивые диаграммы и графики при помощи простых классов CSS.

👉 @sWebDev

AnyChart

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

Основные возможности
1. Более 80 типов графиков, включая обычные графики, биржевые графики, геовизуализации (карты), а также диаграммы Ганта и сетевые графики PERT.
2. Много вариантов, как можно загружать данные: XML, JSON, CSV, JS API, Google Sheets, HTML-таблицы.
3. Возможность «углубляться» в данные на графике (дрилдаун).
4. Технические индикаторы для технического анализа и аннотации (инструменты для рисования) «из коробки».
5. Исчерпывающие документация и описание API, отзывчивая поддержка.
6. Интеграция с Angular, Oracle APEX, React, Elasticsearch, Vue.js, Android, iOS и др. Для разработчиков приложений и дашбордов в Qlik есть специальный готовый экстеншн для Qlik Sense.
7. Множество готовых примеров графиков, диаграмм, дашбордов, а также собственная

react-dates

Эта библиотека от air-bnb предоставляет настраиваемые одинарные и двойные date-пикеры для React.

👉 @sWebDev

url-template

Эта небольшая библиотека помогает очень легко и быстро создавать url адреса по заданным шаблонам. Может пригодиться как в серверной части приложения, так и на фронтенде.

Пример использования:
var template = require('url-template');

var emailUrlTemplate = template.parse('/{email}/{folder}/{id}');
var emailUrl = emailUrlTemplate.expand({
email: 'user@domain',
folder: 'test',
id: 42
});

console.log(emailUrl);
// Returns '/user@domain/test/42'

👉 @sWebDev

sensitive-param-filter

Эта библиотека без дополнительных зависимостей реализует фильтрацию уязвимых параметров в объекте. С помощью неё можно не только удалять разные свойства в объекте, но и заменять их на указанные значения.

Пример использования:
const { SensitiveParamFilter } = require('@amaabca/sensitive-param-filter')
const paramFilter = new SensitiveParamFilter()
const rawObject = {
Authorization: 'Bearer somedatatoken',
body: {
info: '{ "amount": 28.64, "credit_card": "4242424242424242", "cvv": "123" }'
},
method: 'POST',
url: 'https://pay.example.com?user=bob.bobbington&password=asecurepassword1234'
}
const filteredObject = paramFilter.filter(rawObject)
// filteredObject = {
// Authorization: 'FILTERED',
// body: {
// info: '{ "amount": 28.64, "credit_card": "FILTERED", "cvv": "FILTERED" }'
// },
// method: 'POST',
// url: 'https://pay.example.com?user=bob.bobbington&password=FILTERED'
// }

react-themed

Эта библиотека предоставляет HOC, который позволяет добавлять темы в React компонент в качестве prop.

Пример использования:
import themed from 'react-themed'
import styles from './Button.css'

const Button = ({ theme, ...props }) => (
<button {...props} className={theme.button} />
)

export default themed(styles)(Button)

👉 @sWebDev

StoryBook

Разработку серверных частей приложений можно упростить с помощью специализированных фреймворков, таких, как Meteor и Firebase. React StoryBook — это библиотека, которая даёт те же возможности разработчикам клиентских частей приложений.

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

👉 @sWebDev

Blueprint

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

Эта библиотека была создана, преимущественно, для настольных приложений, однако, весьма высока вероятность добавления в неё функционала, необходимого для разработки мобильных проектов. Она, кроме того, отличается большой гибкостью, так как она может использоваться совместно с такими JS-фреймворками, как AngularJS, Vue.js и другие.

👉 @sWebDev

Spectacle

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

В библиотеке имеются готовые к использованию компоненты, такие, как <Slide> и <BlockQuote>. Это упрощает работу по созданию презентаций.

👉 @sWebDev

Elemental UI

Elemental UI — это весьма гибкий и эффективный фреймворк для разработки привлекательных пользовательских интерфейсов. Он предназначен для React и основан на CSS.

Этот фреймворк похож на Material UI, но он гораздо компактнее. Он спроектирован с учётом установки из npm и встраивания в проект с использованием Browserify или Webpack.

👉 @sWebDev

Mozaik

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

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

В Mozaik имеется множество стандартных тем, но разработчик ими не ограничен. Библиотека поддерживает позиционирование элементов на основе сетки, оптимизированное взаимодействие с серверной частью приложения, с её помощью можно, при необходимости, создавать множество панелей управления.

👉 @sWebDev

Superagent

Библиотека Superagent подходит для Node.js и для современных браузеров. Она предоставляет разработчику простое и понятное API, с которым удобно работать.

Для того чтобы выполнить HTTP-запрос средствами Superagent, достаточно вызвать подходящий метод объекта request:

 request
     .get('')
     .then(res => log(res))
     .catch(err => log(err))

Сильные стороны
1. Поддерживает плагины.
2. Поддаётся конфигурированию.
3. Имеет приятный интерфейс для выполнения HTTP-запросов.
4. Поддерживает объединение в цепочку нескольких вызовов для выполнения запросов.
5. Работает в среде Node.js и в браузерах.
6. Поддерживает индикацию прогресса для выгрузки и загрузки данных.
7. Поддерживает механизм chunked-transfer encoding.
8. Поддерживает коллбэки.

Слабые стороны
Имеет своеобразное API, не придерживающееся каких-либо стандартов.

👉 @sWebDev

react-select

Отличная альтернатива для компонента Select в React.js.

Представляет собой совершенно новый способ развития мощных компонентов React.js, которые работают из коробки, будучи полностью настраиваемыми.

Отличительные особенности:
1. гибкий подход к данным с настраиваемыми функциями;
2. расширяемый API с Emotion – JS-библиотека, предназначенная для написания CSS-стилей;
3. внедрение компонентов через API для полного контроля над поведением UI;
4. оption groups, поддержка портала, анимация и многое другое.

👉 @sWebDev

Element UI

Дизайн система насчитывает порядка 60 компонентов со всевозможными кастомизациями, так как стили библиотеки легко переопределяются. Библиотека использует препроцесcор SCSS с возможностью заменить глобальные переменные цветов, тем самым можно легко создать свою цветовую тему. Кстати говоря, все классы в библиотеке названы по БЭМу. Присутствует поддержка 24 колоночной структуры и локализации на русском, украинском и казахском языках.

👉 @sWebDev

react-helmet

Повторно используемый React-компонент, созданный для управления всеми изменениями в заголовке документа. Принимает и выводит простые HTML-теги – очень просто и React-friendly.

Отличительные особенности:
1. поддержка всех допустимых тегов: title, base, meta, link и т. д;
2. поддержка рендеринга на стороне сервера;
3. вложенные компоненты переопределяют повторяющиеся изменения заголовка.

👉 @sWebDev

Vue CLI

По умолчанию Vue CLI предлагает поддержку основных инструментов и технологий веб-разработки, таких как Babel, TypeScript, ESLint, PostCSS, PWA, Jest, Mocha, Cypress и Nightwatch. Это возможно благодаря расширяемой системе плагинов. Это означает, что сообщество может создавать и распространять повторно используемые плагины для общих нужд.

👉 @sWebDev

Flux

Софт для построения архитектуры приложения и пользовательских интерфейсов с однонаправленным потоком данных.

Отличительные особенности:
1. позволяет легко находить ошибки в сложном приложении;
2. быстрое время перезагрузки.

👉 @sWebDev

VuePress

Это генератор статических сайтов на основе Vue. Первоначально созданный как инструмент для написания технической документации, теперь это небольшая, компактная и мощная безголовая CMS. Начиная с версии 1.x, он предлагает отличные функции ведения блогов и мощную систему плагинов. Он поставляется с темой по умолчанию (с учетом технической документации), но вы также можете создавать собственные темы или использовать готовые опции сообщества.

👉 @sWebDev