Стилизация range slider

Стандартный input type="range" даёт неплохие возможности кастомизации, но для сложной логики работы или нестандартного дизайна лучше воспользоваться js-плагинами.

ion.rangeSlider - jQuery плагин простой в использовании и лёгкий в освоении
Плюсы
- Возможность настройки через дата атрибуты
- Несколько скинов
Минусы
- зависимость от jQuery
- максимум два ползунка

noUiSlider - это легкий слайдер с поддержкой мультитач и множеством функций. Он поддерживает нелинейные диапазоны, не требует внешних зависимостей, поддерживает клавиатуру и отлично работает в адаптивном дизайне.
Плюсы
- Отсутствие зависимостей
- Отличная документация
- Полный программный контроль
- Тонкая настройка всех параметров
Минусы
- Сложность в освоении

👉 @sWebDev

👉 @sWebDev

Автоматическая респонсивная гексагональная сетка, интересное решение для галереи, списка новостей или контактов.

👉 @sWebDev

Lazy load в том числе и нативный

Отложенная загрузка изображений значительно сокращает время показа страницы, существует множество библиотек для решения этой задачи, луче всего справляются те, что используют Intersection Observer. Так же создана и потихоньку внедряется в браузеры технология ленивой загрузки средствами самого браузера, но у него пока плохая поддержка.

lozad.js - работает без зависимостей, поддерживает <img>, <picture>, iframe, video, audio, background-image и т.д. Отличается простой настройкой, но немного запутанной документацией.

vanilla-lazyload - так же написан на чистом js, но имеет гораздо более богатый функционал, можно настроить все аспекты работы, отличная документация, примеры реализации и советы по использованию.

👉 @sWebDev

Интересные эффекты наведения реализованные на чистом css.

👉 @sWebDev

React Material-UI

React Material-UI — это набор компонентов React, которые реализуют концепцию Material Design от Google. Если учесть то, что у библиотеки Material-UI более 30 тысяч звёзд на GitHub, она, вероятно, является самой популярной библиотекой для React.

Стоит отметить качество и объем документации этой библиотеки. Вам нужно разобраться, как все работает, а чем больше функционала, тем больше проблем может возникнуть. Так что наличие обширной и хорошо продуманной документации очень важно.

👉 @sWebDev

Lodash

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

Вот несколько примеров функций, реализованных в lodash
для массивов:
difference - Создаем новый массив, как разницу, где из первого массива исключили все значения второго (А-Б)
first - Возвращает первый или несколько первых элементов массива
flatten - Извлекает, в виде массива, элементы из объектов, содержащихся в передаваемом массиве

для объектов:
assign - Дополняет объект отсутствующими (не просто undefined) свойствами из другого объекта
clone - Делает копию объекта (вложенные объекты копируются по ссылке)
cloneDeep - Глубокое копирование объекта (вложенные объекты копируются по содержанию)

👉 @sWebDev

React Spinner

Вам случалось слышать фразу «иногда меньше значит больше»? Эта библиотека — прекрасная иллюстрация данной фразы. React Spinner фокусируется не на общем виде вашего приложения и не на внутреннем дизайне его архитектуры. Вместо этого она заботится об одной-единственной вещи: индикаторах загрузки.

👉 @sWebDev

Chart.js

Chart.js - это бесплатная JavaScript-библиотека с открытым исходным кодом для визуализации данных, которая поддерживает 8 типов диаграмм: линейчатая, линейная, площадь, круговая, пузырьковая, радарная, полярная и разбросанная. И все эти диаграммы можно легко настроить и застилизовать под свои нужды.

👉 @sWebDev

Компоненты Ant-design

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

👉 @sWebDev

Moment.js

Moment - это библиотека JavaScript, которая помогает анализировать, проверять, манипулировать и отображать дату и время в JavaScript очень простым способом

Она позволяет отображать дату в соответствии с локализацией и в удобочитаемом формате. Вы можете использовать MomentJS внутри браузера, используя метод script. Он также доступен с Node.js и может быть установлен с помощью npm.

Примеры использования:

 moment().format('MMMM Do YYYY, HH:mm:ss');

вернет дату в заданном формате

 февраль 21. 2013, 18:48:48

 moment().add('days', 7).add('months', 1);

добавит к изначальной дате семь дней, а затем 1 месяц

👉 @sWebDev

React Bootstrap

Помните старую добрую библиотеку Bootstrap? Это была, собственно, смесь CSS и JS-файлов, позволявшая вам легко добавлять уже подготовленные UI-компоненты.
Так может ли быть лучшее сочетание, чем Bootstrap и React? Эта библиотека заполняет пробел между старым и новым подходом, добавляя мощь React к уже и так мощной библиотеке.

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

👉 @sWebDev

Numeral.js — библиотека для форматирования чисел

На создание библиотеки для удобного форматирования чисел программиста и веб-дизайнера Адама Дрэйпера вдохновила аналогичная библиотека для даты и времени — moment.js. Numeral.js позволяет задавать число знаков после запятой, символы-разделители для дробной части и групп разрядов, формат представления валют, процентов, времени, аббревиатуры для миллионов, миллиардов, мегабайтов и т.п. Кроме того, можно восстанавливать числовые значения из существующего строкового представления.

Пример обработки числа с помощью библиотеки:

 var number = numeral(1000);
 var string = number.format('0,0'); // '1,000'
 var value = number.value(); // 1000

👉 @sWebDev

Fabric React

Еще одна библиотека, созданная одним из крупных игроков рынка. Речь идет о Microsoft. Fabric React может помочь вам в создании Office-подобного пользовательского опыта. Это не значит, что вы будете копировать Office, просто у вас будет доступ к похожему поведению и графике.

Fabric React совместима с десктопами, устройствами Android и iOS, а также используется на таких сайтах как Office 365, OneNote, Azure DevOps и пр.

👉 @sWebDev

Bluebird

bluebird это библиотека, реализующая функционал промисов для javascript. Если в клиентскую сборку вы её вряд ли потащите, как никак 21Kb gzipped, то не использовать её на стороне сервера вы просто не имеете морального права. Bluebird всё ещё работает быстрее нативной реализации. Можете не верить на слово, а скачать репозиторий и запустить бенчмарки на последней версии Node.js (9.x.x). Подробней о преимуществах можно прочитать в кратком обзоре архитектурных принципов библиотеки.

👉 @sWebDev

GSAP.js или Greensock

Это библиотека JavaScript для создания высокопроизводительных анимаций. По сути, GSAP — манипулятор свойств объекта, который обновляет значения быстро и с высокой точностью. Анимацию можно останавливать, замедлять, ускорять, делать плавной. Имеет готовый набор функций, которые делают анимацию кроссбраузерной.

👉 @sWebDev

Gestalt

Библиотека компонентов Gestalt была разработана Pinterest на основе их внутреннего языка дизайна. Как и Material UI, и Ant-Design, Gestalt была создана для упрощения коммуникации между дизайнерами и разработчиками путем внедрения множества готовых компонентов.

👉 @sWebDev

Swiper.js

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

👉 @sWebDev

React Virtualized

React Virtualized предназначен для решения одной-единственной проблемы: эффективного рендеринга списков и табличных данных на странице. Я знаю, что вы думаете: «А что, так сложно отобразить таблицу? Или простой выпадающий список?» Но что, если в вашем выпадающем списке больше тысячи элементов, а в таблице — больше сотни столбцов?

👉 @sWebDev

Autosize.js

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

👉 @sWebDev