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

visx

Если ты когда-либо использовал популярную библиотеку диаграмм, такую как Recharts или Charts.js, ты знаешь, что на удивление легко достичь пределов того, что библиотека может сделать для тебя.

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

👉 @sWebDev

Onsen UI

Компоненты Onsen UI доступны в React благодаря привязкам и позволяют создавать гибридные мобильные приложения на базе React и фреймворка Onsen UI. Вклад в этот проект внесли более 80 разработчиков, на GitHub у него около 5.6 тысяч звёзд. Всё это позволяет говорить о том, что на Onsen UI стоит, как минимум, обратить внимание при выборе библиотеки для разработки пользовательского интерфейса.

👉 @sWebDev

React Window

React Window используется для рендеринга длинных списков. Представьте, что у вас есть список из 1 000 элементов. На экране отображаются только десять, но ваш код пытается визуализировать 1000 элементов одновременно.

Это может привести к серьезным задержкам в вашем приложении. Данная библиотека очень популярна и является обязательным инструментом в вашем арсенале.

Использование React Window

 import { FixedSizeList as List } from 'react-window';
 
 const Row = ({ index, style }) => <div style={style}> Name is {names[index]}</div>
 
 const LongList = () => (
   <List
     height={150}
     itemCount={1000}
     itemSize={35}
     width={300}
   >
     {Row}
   </List>
 );

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

👉 @sWebDev

Deep Equal

Это известная библиотека, которую можно использовать для сравнения. Это очень удобно. Ведь в JavaScript, несмотря на то, что два объекта могут иметь одинаковые значения, они считаются разными, поскольку указывают на разные области памяти.

Если мы используем Deep Equal, то это повышает производительность в 46 раз. Ниже приведен пример того, как мы можем это сделать.

var equal = require('deep-equal');

const user1 = {
name:'faisal'
}
const user2 ={
name:'faisal'
}

const deepEqual = equal(user1 , user2); // true -> exactly what we wanted!

👉 @sWebDev

React LazyLoad

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

React LazyLoad - это библиотека, специально созданная для этой цели. Вы просто оборачиваете свой компонент, а эта библиотека позаботится обо всем остальном.

Преимущества
1. Повышенная производительность
2. Поддерживает рендеринг на стороне сервера

Пример использования
import React from 'react';
import LazyLoad from 'react-lazyload';

const ImageList = () => {

return <div>
<LazyLoad> <img src ='image1.png' /> <LazyLoad>
<LazyLoad> <img src ='image2.png' /> <LazyLoad>
<LazyLoad> <img src ='image3.png' /> <LazyLoad>
<LazyLoad> <img src ='image4.png' /> <LazyLoad>
<LazyLoad> <img src ='image5.png' /> <LazyLoad>
</div>
}

👉 @sWebDev

Webix UI Library

Это одна из самых функциональных и высокопроизводительных библиотек.

Webix специализируется исключительно на бизнес-приложениях. Это библиотека подобна универсальному швейцарскому ножу, который умеет практически все. Webix содержит 100+ UI виджетов, из которых можно собрать абсолютно любое бизнес-приложение. На момент написания статьи, в комплект Webix входило 8 высокоуровневых виджетов — SAP приложений: File Manager, Document Manager, User Manager, Chat-Messenger, Task Manager (Kanban), Pivot, Spreadsheet, SQL Query.

👉 @sWebDev

Почему вы выполняете рендеринг (Why Did You Render)

Ненужный рендеринг может навредить производительности ваших React-приложений. Но иногда мы делаем это, даже не подозревая.

Этот замечательный пакет, Why Did You Render, помогает нам найти проблемы с производительностью и решить их. Вы просто включаете его в любом компоненте, и он сообщает вам, почему именно происходит рендеринг.

Ниже представлен компонент с возникающими проблемами рендеринга.

 import React, {useState} from 'react'

 const WhyDidYouRenderDemo = () => {
     console.log('render')
    
     const [user , setUser] = useState({})
     const updateUser = () => setUser({name: 'faisal'})

     return (
      <>
         <div > User is : {user.name}</div>
         <button onClick={updateUser}> Update </button>
      </>
     )
 }
 export default WhyDidYouRenderDemo

После включения эта библиотека запишет в консоль результат с картинки.

DHTMLX

DHTMLX предлагает JavaScript библиотеки и UI компоненты c богатой функциональностью для построения интерактивных веб-интерфейсов, используемых в различных сферах бизнеса.

На данный момент линейка продуктов компании включает следующие решения: Suite с 20+ UI компонентами, Gantt и Scheduler для управления проектами с помощью диаграммы Ганта и планировщика событий, Diagram для наглядной визуализации данных, Spreadsheet для работы с динамическими таблицами наподобие Excel, а также Pivot, Rich Text Editor и Vault для удобной загрузки файлов.

Кроме того, команда разработчиков DHTMLX планирует вскоре выпустить Kanban, который можно будет интегрировать с DHTMLX Gantt для еще более эффективного управления проектами.

👉 @sWebDev