Еще 23 полезных сервиса для фронтендера: стилизация, коммиты и JavaScript

Автор пособия «Фронтенд — это не больно», ментор и разработчик Александр Беспоясов запустил в Twitter большой тред о полезных сервисах для разработчиков. Автор собрал все, чем пользуется сам и настоятельно рекомендует коллегам. Мы разделили подборку на три части. С первой можно ознакомиться по ссылке. Во второй стилизуем страницу, коммитим и пишем JavaScript.

Стилизация страницы

1. Can I Use

Помогает проверить браузерную поддержку свойства.

Бонус: CLI для инструмента, чтобы пользоваться им прямо из консоли.

2. Nth Tester

Позволяет проверить корректность работы селектораnth-child .

По словам автора, однажды он отрефакторил с помощью этого инструмента стили, уменьшив код в два раза.

3. Flexbox Playground

Визуализирует работу флекс-свойств.

Примечание: не переживайте, многие путают align-items и align-content.

4. Specificity Calc

Калькулятор специфичности селекторов.

5. HEX to RGB

Конвертер цветов между разными цветовыми схемами.

Примечание: обратно тоже работа. Особенно полезно, когда подрукой нет открытой Figma.

6. CSS Gradient

Конструктор CSS-градиентов.

7. Easings

Справочник по easing-функциям с примерами.

8. Cubic Bezier

Конструктор и редактор кривых Безье. 

9. CSS Patterns

Коллекция фоновых узоров на чистом CSS. Подойдет для демок, когда лень рисовать и искать картинки для фона.

10. CSS Shapes

Набор часто используемых фигур на чистом CSS.

11. CSS Triggers

Подскажет, какие свойства запускают layot, paint и composite.

Автор использует его для проверки, не рухнет ли браузер, если поменять какое-либо свойство.

Как закоммитить

1. Oh shit! Git

Подскажет, что делать, если допустили ошибку в гите.

2. Git Explorer

Справочник по командам и возможностям гита.

Пишем JavaScript

1. You Might Not Need JS

Набор фич, некоторые из которых можно сделать без JS.

2. HTML DOM

Набор нативных функций для работа с DOM-деревом.

Основные функции: выделение текста, блюр, загрузка стилей и так далее.

3. Does it Mutate

Подскажет, какие методы изменят массив, а какие нет.

4. Keycode Info

Подскажет код нажатой клавиши. Особенно полезно при работе с легаси-кодом, когда нужно определить нажатую клавишу.

5. Tmstmp

Переводит даты в таймштампы и обратно.

6. Generating Random Integers

Пример интеграции случайного целого с подробным объяснением работы.

7. Jest Mocking Strategies

Сайт с примерами, как можно в Jest что-то замокать.

8. Debounce/Throttle

Показывает разницу между debounce и throttle.

9. Anything to Anything Transformer

Конвертирует что угодно во что угодно. Например, React-компонент в SVG или HTML в PUG.

10. Regex 101

Редактор и тестер регулярных выражений с объяснениями каждого символа и примерами.