React Desktop

Этот проект пытается подражать десктопному опыту в вебе.
Как видите, при помощи этой библиотеки вы можете идеально воспроизвести десктопный опыт, используя JavaScript. А это значит, что вы сможете создавать настоящие десктопные приложения, используя Electron.js или же просто добавлять интересные эффекты в ваши веб-приложения (эти примеры лучше всего работают в Chrome, так что используйте именно этот браузер для тестирования).

👉 @sWebDev

Device.js

Device будет полезен больше для изменения интерфейса страницы или приложения на различных устройствах. Например, можно сделать версию для Android несколько иной, чем версия под iOS. Или пойти дальше и заточить, например, телефонную портретную версию под интерфейс iOS или Android. Ещё очень часто возникает необходимость отображения ссылок на онлайн-маркеты в зависимости от устройства пользователя. Например, при заходе с устройств на Android отображать ссылку на Google Play, на iPhone и iPad — AppStore, на Windows — магазин Windows Phone и т.д. Device.js с этим справляется прекрасно.

👉 @sWebDev

Rebass

Это маленькая React библиотека UI-компонентов, благодаря которой можно создавать очень мощные наборы примитивных UI-элементов для тем на основе библиотеки Styled System.

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

2. Привыкнув к рабочему процессу и синтаксису, вы сможете реализовывать темы для своих приложений, причем они будут обладать потрясающим уровнем кастомизации и расширяемости. А лучше всего то, что система тем полностью совместима с Theme UI.

3. При создании этой библиотеки применялся подход mobile-first. Вы получите новейшую философию дизайна прямо из коробки.

4. Flexbox layout с примитивными компонентами Box и Flex, которые вы можете расширять.

👉 @sWebDev

Snap svg

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

👉 @sWebDev

Semantic UI React

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

Оригинальная версия библиотеки работала на основе HTML и CSS с небольшими вкраплениями JavaScript. Вы определяли свои HTML-элементы, задавали подготовленные CSS-классы и вызывали подходящую JavaScript-функцию.

Теперь, благодаря добавленной совместимости с React, вы при помощи JSX-кода напрямую определяете компоненты и связываете их с кодом React Component. То есть, вам не нужно волноваться о выборе правильного элемента и добавлять код: «реактивный» подход все это значительно упрощает.

👉 @sWebDev

Push.js

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

👉 @sWebDev

react-three-fiber

Это threejs для React в web и react-native.
Скорее всего, если вы видели действительно классную 3D-анимацию на сайте, вероятно, она была построена на three.js - react-three-fiber даёт вам возможность подключиться к React при создании 3D-сцен. Также стоит изучить Next.js + Tailwind.

👉 @sWebDev

Editor.js

Пригодится, если в вашем проекте возникает необходимость в текстовом редакторе, а Editor.js — это простая и привлекательная JS-библиотека. Её можно использовать в проектах, написанных на чистом JavaScript, и в проектах, основанных на каких-либо фреймворках, вроде React. Редактор позволяет форматировать текст, например — делать его полужирным или курсивным, поддерживает оформление заголовков и много чего ещё. Тому, кто хочет воспользоваться Editor.js, достаточно бегло просмотреть документацию, после чего у него будет общее понимание того, что нужно делать.

👉 @sWebDev

React Aria

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

Пример использования - useButton:
import { useButton } from '@react-aria/button';
function Button(props) {
let ref = React.useRef();
let { buttonProps } = useButton(props, ref);
return (
<button {...buttonProps} ref={ref}>
{props.children}
</button>
);
}
<Button onPress={() => alert('Button pressed!')}>Press me</Button>;

👉 @sWebDev

Howler.js

Вы, вероятно, пользовались в своих проектах HTML-элементами, предназначенными для работы со звуками и видеозаписями. Библиотека Howler.js направлена на решение различных задач, связанных со звуком. К ней подготовлена хорошая документация.

Вот фрагмент кода, демонстрирующий работу с этой библиотекой:
<script>
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
</script>

👉 @sWebDev

ReactPlayer

ReactPlayer - потрясающая библиотека, которая позволяет вставлять видео из основных источников (YouTube, Facebook, Twitch, SoundCloud и другие) и определять собственные элементы управления видео.

👉 @sWebDev

useClippy

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

👉 @sWebDev

Reveal.js

Вы когда-нибудь задумывались о том, что настанет день, когда вы сможете создавать презентации, используя JavaScript? В общем-то, этот день, благодаря замечательной библиотеке Reveal.js, уже настал.
Её, как и другие подобные библиотеки, можно установить в виде NPM-пакета, или можно просто скачать её материалы из GitHub-репозитория и подключить соответствующие .js и .css-файлы к странице.

👉 @sWebDev

React Query

React Query позволяет запрашивать данные из одной и той же конечной точки API (например, api/users/1) через несколько компонентов, не вызывая множественных сетевых запросов.

👉 @sWebDev

React Toastify

React Toastify позволяет добавлять причудливые уведомления из приложения (например, уведомление «Сообщение отправлено» в Gmail) в React приложение с помощью всего четырех дополнительных строк кода.

👉 @sWebDev

Ramda

Ramda — это клёвая JavaScript библиотека для функционального программирования, имеющая на данный момент 18 000 звёзд на GitHub. Одна из прекрасных сторон JavaScript — это то, что разработчики могут выбирать между функциональным и объектно-ориентированным программированием. У обоих подходов есть как плюсы, так и минусы, но, если вы предпочитаете именно функциональное, то стоит определённо обратить внимание на Ramda.

Её ключевые возможности:
Неизменяемость и отсутствие побочных эффектов в функциях.
Автоматическое каррирование функций.
Параметры упорядочены по функциям для удобства каррирования.

👉 @sWebDev

Hammer.js

Эта JavaScript библиотека, привносит в ваши веб-приложения мультисенсорные жесты. Она невелика, не имеет зависимостей и способна распознавать жесты, сделанные прикосновением, мышью или указателя (pointer events). По умолчанию она добавляет распознавание для касания, двойного касания, свайпа, нажатия и пр. Вы же можете задать свой собственный набор установок распознавания. Вот пример добавления событий зума и переворачивания:

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

👉 @sWebDev

Highlight.js

Эта библиотека предназначена для выделения синтаксиса. Работать она может и в браузере, и на сервере. Highlight.js способна распознавать практически любой код и имеет встроенную функцию автоматического определения языка.
Она осуществляет поиск программного кода между тегами <pre><code>, определяя используемый язык и выделяя синтаксис. Помимо этого, она поддерживает несколько цветовых схем. Вот пример с отрывком JavaScript кода и стандартной темой редакторов.

Highlight.js весьма полезна, к примеру, для тех, кто ведёт сайт или блог с большим количеством кода.

👉 @sWebDev

react-dnd

Крутой Drag&Drop для React.
Набор утилит, которые позволяют создавать сложные интерфейсы с перетаскиванием, сохраняя при этом отвязывание компонентов.

Отличительные особенности:
1. идеально подходит для таких приложений, как Trello и Storify, где перетаскивание отвечает за передачу данных между различными частями приложения;
2. построен поверх Drag&DropHTML5;

👉 @sWebDev

D3

D3 — это наиболее востребованная библиотека для визуализации данных. Она использует веб стандарты и помогает вам оживить данные с помощью HTML, SVG и CSS, используя возможности современных браузеров.

Освоение D3 может показаться нелёгким, но если вам хватит для этого терпения, то в дальнейшем вы сможете создавать с её помощью невероятное.

👉 @sWebDev