Подборка из 25 готовых кнопок для проектов с эффектами на hover и active на чистом css
Все кнопки реализованы на codepen

https://dev.to/webdeasy/top-20-css-buttons-animations-f41

Современное тестирование React-приложений

Серия статей, посвященная лучшим практикам тестирования в React:

1️⃣ Modern React testing, part 1: best practices
https://blog.sapegin.me/all/react-testing-1-best-practices/

2️⃣ Modern React testing, part 2: Jest and Enzyme
https://blog.sapegin.me/all/react-testing-2-jest-and-enzyme/

3️⃣ Modern React testing, part 3: Jest and React Testing Library
https://blog.sapegin.me/all/react-testing-3-jest-and-react-testing-library/

9 проектов, сделав которые ты станешь FrontEnd мастером

Подборка из 9 различных проектов, каждый с отдельной темой и своей фреймворком или библиотекой JavaScript в качестве технологического стека, который вы можете создать и добавить в свое портфолио.

https://dev.to/simonholdorf/9-projects-you-can-do-to-become-a-frontend-master-in-2020-n2h

Шпаргалка по гридам - https://yoksel.github.io/grid-cheatsheet/

13 способов вертикального центрирования в 2020

1. Абсолютное позиционирование + margin: auto
2. top: 50% + translateY(-50%)
3. Таблицы + vertical-align: middle
4. Использование псевдоэлемента с height: 100% и vertical-align: middle
5. margin: auto внутри flex-контейнера
6. Использование псевдоэлементов с flex-grow: 1 внутри flex-контейнера
7. Выравнивание по осям внутри flex-контейнера (align-items: center или justify-content: center)
8. Выравнивание потомка flex-контейнера (align-self: center)
9. Выравнивание по осям внутри grid-контейнера
10. Выравнивание потомка grid-контейнера
11. Использование псевдоэлементов внутри grid-контейнера + указание размеров рядов в fr
12. Явное указание занимаемого ряда для потомка grid-контейнера (grid-row: 2/3)
13. margin: auto внутри grid-контейнера

Источник: https://www.youtube.com/watch?v=ngT6ZiInXDY

Шпаргалка верстальщику по BEM

Компоненты разложенные на составляющие согласно BEM методологии.

https://9elements.com/bem-cheat-sheet/#page-navigation

Порядок отрисовки в CSS
Как браузер решает, в каком порядке отрисовывать элементы при их наложении друг на друга 


https://abandonedwig.info/blog/2020/07/03/css-painting-order.html

Кастомные CSS-свойства не работают без фолбека
Браузер не знает валидно ли значение переменной до тех пор, пока она не объявлена, и к тому времени, как он дойдет до нее, уже отбрасывает все потенциальные фолбеки.

http://odinokun.com/2020-07-06-kastomnye-css-svojstva-ne-rabotayut-bez-folbeka.html