Реализация кнопки "TOP" (прокрутка вверх) на чистом CSS

В примере показано, как с помощью position: sticky, scroll-behavior: smooth
и нативного поведения якорей реализовать кнопку, возвращающую в начало страницы без использования JS

https://moderncss.dev/pure-css-smooth-scroll-back-to-top/

Круглый прогрессбар на JavaScript | Circle progress bar

В сегодняшнем выпуске JS-фич мы сделаем круглый прогресс бар на чистом JavaScript с использованием SVG графики.

https://youtu.be/amrIqeOXQW0

CSS Scroll Shadows
Генератор теней для индикации доступной прокрутки 

https://css-scroll-shadows.now.sh/

Форма кредитной карты

Форма кредитной карты с гладкими и приятными микровзаимодействиями. Включает форматирование чисел, проверку и автоматическое определение типа карты. Она построена на Vue.js, а также полностью адаптивная.

https://github.com/muhammederdem/vue-interactive-paycard

https://codepen.io/JavaScriptJunkie/pen/YzzNGeR

Навигация в стиле Stripe

Уникальность этой навигации заключается в том, что контейнер popover трансформируется под содержимое. В этом переходе есть элегантность по сравнению с традиционным поведением открытия и закрытия нового поповера.

https://lokeshdhakar.com/dev-201-stripe.coms-main-navigation/

Подборка из 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