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

react-content-loader

Набор компонентов для легкого создания skeleton loadings (как загрузка карты в Facebook).

Отличительные особенности:
1. Plug and play: поставляется с большим количеством пресетов для использования.
2. DIY: можно использовать данный софт, чтобы создавать собственные загрузчики.
3. Поддержка React Native: тот же API с теми же мощными функциями.
4. Легковесный: менее 2 КБ и 0 зависимостей для веб-версии.

👉 @sWebDev

Voca

Эту библиотеку можно эффективно использовать для управления строками. Она уже давно поддерживается и на данный момент имеет рейтинг 2 800 звёзд. С её помощью можно изменять регистр, делать обрезку, растягивать текст, латинизировать его, сокращать и прочее
Другие её возможности включают:
1. Полноценный набор функций для управления, обрезки, форматирования, смещение и запроса строк.
2. Понятная документация с возможностью поиска.
3. Поддержка множества сред — Chrome, Firefox, Node.js и пр.
4. 100% охват кода и отсутствие зависимостей.

👉 @sWebDev

​🐙 Фронтендеры - золото для охотников за головами.

Оклады от 250к, работа на удаленке, рабочий MacBook - от всего этого новичка отделяет только отсутствие знаний.

Вот карта в мир фронтедеров:

1. Веб-верстка
Узнай основы HTML и CSS, разберись с Flexbox, научись пользоваться Git.

2. Javascript
Выучи синтаксис языка Javascript, разберись с EventLoop, моделью DOM, ООП и типизацией, научись работать со сборщиками (Webpack, Gulp).

3. React и другие JS фреймворки
Выучи React, познакомься с Angular и Vue.

4. Архитектура приложений и бекенд
Научись работать с базами данных, разберись как работает Node.js.

5. Подготовка к собеседованию
Составь грамотное резюме и сопроводительное письмо, подготовься к собеседованию.

Специализация Frontend-разработчик ускорит твой путь, опытные преподаватели с бэкграундом в Яндексе, RSSchool, The Makers проведут тебя по каждому пункту, разложат все по полочкам, а ты разработаешь

5 реальных проектов для своего портфолио:
- Сайт-визитка
- Верстка лендинга по макету
- Слайдер на JavaScript
- Канбан-доска на React

и легко войдешь в мир IT

PARTNER - промокод на скидку 50%

gatsby-image

Является компонентом React и специально разработана для работы с запросами к Gatsby GraphQL. Он сочетает в себе возможности обработки изображений с передовыми методами оптимизированной загрузки изображений.

Отличительные особенности:
1. сайты с Gatsby не требуют серверов, поэтому вы можете разместить весь сайт на CDN за небольшую плату;
2. возможность извлекать данные из любого источника (Markdownфайлы, CMS-ки: Contentfulили WordPress и RESTAPI);
3. преимущества статических сайтов без каких-либо ограничений.

👉 @sWebDev

Каких звёзд нужно запереть и не выпускать?

Сбер решил, что запереть нужно Филиппа Киркорова: смотрим прямой эфир в канале Сбера

Immutable.js

Работа с неизменяемыми структурами данных даёт такие весомые преимущества, как упрощение разработки приложений, отсутствие защитного копирования и продвинутая мемоизация.
В Immutable.js вам доступны такие неизменяемые структуры данных, как List, Stack, Map, Set.

👉 @sWebDev

Leaflet

Leaflet прекрасно показывает себя, когда дело касается создания интерактивных карт, адаптированных под мобильные устройства. Она является общедоступной, чрезвычайно легковесной и имеет весь необходимый функционал.
Эта библиотека по умолчанию работает на всех основных мобильных и десктопных платформах, может быть расширена плагинами, имеет отличную документацию и простой API. Вот пример в тандеме с OpenStreetMap:

👉 @sWebDev

Three.js

Three.js – это библиотека JavaScript, содержащая набор готовых классов для создания и отображения интерактивной 3D графики в WebGL.

Three.js для WebGL — это то же самое, что jQuery для JavaScript. Библиотека предлагает декларативный синтаксис, и абстрагирует от головных болей связанных с 3D в браузере. Давайте проведем общий обзор и посмотрим, как начать работу, если вы новичок в мире 3D.

👉 @sWebDev

Paper.js

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

Следующий код создает четырехугольник в PaperScript.
<script type="text/paperscript" canvas="quad">
var path = new Path();
path.strokeColor = 'black';
var pointOne = new Point(100, 20);
var pointTwo = new Point(-100, 100);
var pointThree = new Point(300, 30);
path.moveTo(pointOne);
path.lineTo(pointOne + pointTwo);
path.lineTo(pointTwo + pointThree);
path.lineTo(pointOne + pointThree);
path.closed = true;
</script>

👉 @sWebDev

Axios

Это JavaScript-библиотека для выполнения либо HTTP-запросов в Node.js, либо XMLHttpRequests в браузере. Она поддерживает промисы. Одна из особенностей, которая делает её лучше fetch() — автоматические преобразования JSON-данных.

Пример использования
const url = 'https://api.spotify.com/v1/artists/ID'
axios.get(url)
.then(response => console.log(response));

👉 @sWebDev

React Grommet

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

👉 @sWebDev