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

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

​​Если вы кодите на JavaScript и любите активный профессиональный кач — приходите на интенсив по тестированию на React от GeekBrains.
Научитесь быстро находить и устранять ошибки с помощью инструментов Jest, Mocha и Cypress. Два дня практики вместе с опытным экспертом — скучно не будет.
В финале получите сертификат, а видеозапись занятий и учебные методички останутся у вас навсегда.

Одно условие: вход только для тех, кто уже знаком с программированием. Пароль — «async/await-синтаксис». Шутка.
Но это и правда интенсив для продвинутых. Для участия вам нужно знать командную строку и основы JavaScript. А новичков GeekBrains обучают на множестве других бесплатных интенсивах и полноценных курсах.

19 декабря, в субботу → первое занятие. Записывайтесь по ссылке

React-Tensorflow — библиотека React хуков, написанная на Typescript для использования моделей Tensorflow в вашем приложении

https://github.com/joshuaellis/react-tensorflow

Taming the State in React

Автор: Robin Wieruch
Год издания: 2018

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

#react #redux #english

Новые улучшения JSX в React 17

https://blog.bitsrc.io/new-jsx-enhancements-in-react-17-e5f64acbea89

Fullstack React

Автор: Anthony Accomazzo, Nate Murray, Ari Lerner, Clay
Allsopp, David Guttman, and Tyler McGinnis
Год издания: 2020

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

#react #english

Обновление до React 17 и Webpack 5

https://blog.bitsrc.io/upgrading-to-react-17-and-webpack-5-89eef0f41ae5

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

https://habr.com/ru/company/domclick/blog/532016/

Читайте, как создавать формы в React при помощи KendoReact Form.

Читать статью

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

https://nuancesprog.ru/p/10874

@nuancesprog #статьи #Next

​Оптимизация изображений в соответствии с ограничениями сети и устройств в React

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

О том, как улучшить опыт взаимодействия пользователя с сайтом при нестабильном подключении или слабом девайсе — читайте в этой статье:

https://tprg.ru/OlBz

#фронтенд #react

CSS Paint API: предсказуемая случайность

https://jakearchibald.com/2020/css-paint-predictably-random/

React Hooks — useMemo + React.memo

#react

К видеоуроку(rus)

8 удобных React хуков

— useTimeout - имплементация setTimeout
— usePrevious - для хранения свойств с прошлого состояния
— useClickInside - для определения клика внутри элемента
— useClickOutside - для клика вне компонента
— useFetch - как обертка над fetch
— useInterval - имплементация setInterval
— useComponentDidMount - для выполнения кода после mount компонента
— useComponentWillUnmount - для выполнения кода на unmount компонента

#react

К статье(eng)

Разбор вопросов для собеседования по хукам React.

Читать статью

Что выбрать в качестве библиотеки компонентов для React-проекта

https://habr.com/ru/post/535136/

Делаем схему выбора мест в кинозале на React: о canvas, красивом дизайне и оптимизации

https://habr.com/ru/company/tinkoff/blog/535046/