Новые фичи в вебе за 2020, которые вы могли пропустить:

— IntersectionObserver V2 (позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа viewport)
— Screen Wake Lock API (позволяет предотвратить затемнение или блокировку экрана устройствами, когда приложение должно продолжать работу)
— CSS :any-link селектор (стилизует каждый элемент <a>, <link>, <area>, в котором определен href)
— CSS content-visibility (указывает браузеру какую разметку не отрисовывать, для ускорения отрисовки видимой части контента)
— CSS ::marker (применяет стили к маркеру элемента списка, которые обычно содержит значок или номер)
— URL Scroll-To-Text Fragment (скролл к фрагменту текста на странице)
— Gap для Flexbox (пропуски, как в GRID)
— CSS Revert (откат стилей назад по каскаду на шаг)
— AVIF (новый формат картинок с очень хорошим сжатием и небольшой потерей качества)

#browser_api #css

К статье(eng)

Ленивая загрузка изображений с помощью Intersection Observer API и React

https://tara-ojo.medium.com/lazy-load-images-with-the-intersection-observer-api-and-react-4fd8ae19e195

Такая литература будет вечной

Структуры и алгоритмы обработки данных

Авторы: Павлов Л.А., Первова Н.В.

Год издания: 2020

Скачать книгу

#algorithms #русский

Обзор JavaScript Symbol

— iterator для итерации объектов
— hasInstance для настройки instanceof
— toPrimitive для преобразования объекта в примитив
— toStringTag для создания стандартного описания объекта
— species для создания производного объекта
— match, replace, search, split для создания регулярного выражения в форме объекта
— isConcatSpreadable для преобразования объекта в массив

#javascript #symbol

К статье(rus)

Декораторы JavaScript с нуля

Декоратор — это просто способ обернуть функцию другой функцией, чтобы расширить ее существующие возможности

#javascript #decorator

К статье(rus)

Полный видеокурс по React(10 часов) от freeCodeCamp

#react

Смотреть курс(eng)

Как тестировать React.useEffect

https://epicreact.dev/how-to-test-react-use-effect/

​Типичные ошибки джунов, использующих React

В материале приведены некоторые из ошибок, которые React-разработчики совершают на раннем этапе своего профессионального роста.

https://prglb.ru/2l1zu

#react #frameworks

7 особенностей JavaScript, которые нужно знать, прежде чем изучать React

https://medium.com/swlh/7-javascript-features-you-need-to-know-before-learning-react-e77c3b3481d8

Коллекция готовых хуков для Реакт

https://usehooks.com/

Прощай, Web-API

В статье рассматривается подход, при котором не надо реализовывать REST/GraphQL взаимодействие в своем приложении, а можно переиспользовать одну и ту же модель на клиенте и сервере. Такой подход становится возможным с набором библиотек layr

#javascript #api #architecture

К статье(eng)

10 инструментов ReactJS для прокачки скиллов веб-разработчика

https://prglb.ru/1sw4s

#react #tools

Плохо пахнующие компоненты React

https://antongunnarsson.com/react-component-code-smells/

Глубокое погружение в React Redux: управление состоянием в React с Redux

https://dev.to/senshiii/react-redux-deep-dive-state-management-in-react-with-redux-5299

​Дорожная карта React-разработчика

Хотите знать, как стать React-разработчиком в 2021? Держите дорожную карту, которая собрала must-have темы и инструменты:

https://tprg.ru/rMBs

#фронтенд #react

React – The Complete Guide with React Hook Redux 2020 in 4hr

FREE For 48 Hrs

Learn how to create high performance web app with react. Hooks, Redux, React Routing, useContext, Fireabase and more

https://coursevania.com/courses/react-the-complete-guide-with-react-hook-redux-2020-in-4hr/

CSS clip-path Editor

Полезный инструмент при создании clip-path фигур, который наглядно демонстрирует, как будет выглядеть элемент на странице. Можно воспользоваться готовыми пресетами или настроить по своему желанию, после чего просто скопировать готовый код в свой проект.

https://tprg.ru/sKF5

#фронтенд #css

React Свайпер

При перелистывании слайдов создаётся parallax-эффект. Анимация выполнена с помощью библиотеки ReactSpring, а для более удобного листания автор использует библиотеку ReactUseGesture.

Наборы иконок для веб-разработчиков

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

https://www.flaticon.com содержит полностью редактируемые векторные изображения.

https://jam-icons.com это набор из 896 иконок, сделанных вручную.

https://iconmonstr.com В коллекции Iconmonstr вы найдете больше четырех тысяч иконок.

http://www.entypo.com это набор svg-иконок. Иконки превосходны; если говорить о бесплатных, то они точно лучшие.

https://evil-icons.io/ это очень объемный набор, в котором вы найдете и SVG, и исходные файлы.