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

React Hook Form

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

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

👉 @sWebDev

React Belle

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

👉 @sWebDev

Mock Service Worker

MSW - это библиотека, которая позволяет имитировать как REST, так и GraphQL API; использует service workers для генерации реальных сетевых запросов.

Чем это круто?
Ты действительно можешь использовать MSW как часть рабочего процесса разработки независимо от выбора технологии, а не только во время тестирования!

Пример использования:
const worker = setupWorker(
rest.post('/login', (req, res, ctx) => {
const { username } = req.body
return res(
ctx.json({
username,
firstName: 'John'
})
)
}),
)

👉 @sWebDev

Как стать фронтенд разработчиком в 2021? 

Канал "На фронте - javascript, html, css" собрал для Вас подборку материалов, которая поможет Вам стать фронтенд разработчиком.

Как учится веб-разработке в 2021 году — план развития начинающего веб-разработчика в 2021. Что учить, в какой последовательности.

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

Шпаргалка по JS-методам для работы с DOM — поможет вам разобраться в метожах для работы с DOM

DevTools для «чайников» — руководство по использованию инструментов разработчика

Еще больше крутых и полезных материалов ищите на нашем канале.

Material Components Web

Material Components Web — это библиотека, которая разработана командой инженеров и UX-дизайнеров из Google. Входящие в неё компоненты позволяют организовать рабочий процесс, на выходе которого можно ожидать появления привлекательных и функциональных веб-проектов. Эта библиотека заменила библиотеку react-mdl (которая теперь признана устаревшей).

👉 @sWebDev