React Router v5: полное руководство

https://www.sitepoint.com/react-router-complete-guide/

Всем привет!

Вчера задумался о переходе с Redux на Redux Toolkit (если это можно назвать переходом). Конечно, был бы это мой выбор - я бы весь проект на MobX перевел, но...имеем, что имеем.
Если кто не в курсе, что такое Toolkit, то вот вам короткие видео, где наглядно показывают разницу от Redux
Часть 1
Часть 2

Кстати, кто уже использует Tollkit - напишите в комментария, достаточно вам встроенного в него thunk или в каких-то случаях приходится Redux Saga использовать?

#redux

🦉 Использование фреймворка Nightwatch.js для автоматизации тестирования

Пошаговое руководство к Nightwatch.js для автоматизации браузерного тестирования: https://prglb.ru/37xla

#testing #javascript

Лучшие практики с React Hooks

https://blog.bitsrc.io/best-practices-with-react-hooks-69d7e4af69a7

Повышаем квалификацию с лучшими инструментами для web-разработки на React

Полезная подборка инструментов и библиотек для работы с React: https://prglb.ru/v5uf

#react #tools

24 современных сниппетов ES6 для решения практических задач JavaScript

https://medium.com/swlh/24-modern-es6-code-snippets-to-solve-practical-js-problems-3609f301859e

Jack Franklin, разработчик Chrome Dev Tools и Puppeteer, делится советами по организации большого приложения на React.js

— Сборщики
— Организация структуры директорий
— Организация кода React.js компонентов
— Организация Redux actions, reducers с помощью подхода Ducks
— Тесты

#react #redux

К статье(eng)

Ленивая загрузка вашего приложения на React

https://www.telerik.com/blogs/lazy-loading-your-react-app

React Hook Form vs Formik

Подробное сравнение двух библиотек для работы с формами в React-приложениях: https://prglb.ru/2di74

#react #library

Эффективное тестирование верстки

Как эффективно и правильно тестировать верстку и писать для неё тесты, чтобы они были полезны, а дедлайны не горели.

https://prglb.ru/cnon

Техника ворона: на шаг ближе к Container Queries

https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/

#codepen дня
#css #3d #transform

Сегодня в топ попал довольно необычный пример. Он сложен с математической точки зрения, но довольно прост с точки зрения кода. И это — взгляд изнутри на трёхмерный куб. Без WebGL.

Объём CSS-кода минимален для того, чтобы понять, как работают 3D-преобразования и перспектива. JS-код в свою очередь даёт элементарные понятия о взаимодействии с камерой. Не думаю, что кто-то сделает это проще и меньше.

Практической пользы у этого примера, в общем, нет, но полученные знания пригодятся всем, кто интересуется 3D-эффектами с минимальными усилиями.

https://codepen.io/ge1doot/pen/yLJwBrm

Новые фичи в вебе за 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/