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

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

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

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