Декораторы 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, и исходные файлы.

Состояния страницы

const getState = () => {
if (document.visibilityState === 'hidden') {
return 'hidden';
}
if (document.hasFocus()) {
return 'active';
}
return 'passive';
};

document.addEventListener('freeze', (event) => {
// The page is now frozen.
});

document.addEventListener('resume', (event) => {
// The page has been unfrozen.
});

Полифил: https://github.com/GoogleChromeLabs/page-lifecycle

​Состоялся релиз Storybook 6.1

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

В новой версии Storybook появились:
— быстрый поиск и навигация;
— асинхронные загрузки;
— строгий режим;
— и многое другое.

Подробнее обо всех изменениях и нововведениях можно прочитать в этой статье:
https://tprg.ru/JdI2

#фронтенд

Использование Effector в стеке React + TypeScript

Effector - стейт-менеджер с несколькими хранилищами для приложений Javascript (React/ React Native/Vue/Node.js)

#effector #state #react #typescript

К статье(rus)

package.json анатомия

В статье объясняются назначения полей и возможности package.json

#package_json

К статье(eng)

PWA и AMP: берем лучшее из обоих миров

https://blog.bitsrc.io/pwa-and-amp-getting-the-best-out-of-both-worlds-8dcc46b9ad99