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

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

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

1. Can I Use

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

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

Can I Use

2. Nth Tester

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

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

Nth Tester

3. Flexbox Playground

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

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

Flexbox Playground

4. Specificity Calc

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

Specificity Calc

5. HEX to RGB

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

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

HEX to RGB

6. CSS Gradient

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

CSS Gradient

7. Easings

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

Easings

8. Cubic Bezier

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

Cubic Bezier

9. CSS Patterns

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

CSS Patterns

10. CSS Shapes

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

CSS Shapes

11. CSS Triggers

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

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

CSS Triggers

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

1. Oh shit! Git

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

Oh shit! Git

2. Git Explorer

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

Git Explorer

Пишем JavaScript

1. You Might Not Need JS

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

You Might Not Need JS

2. HTML DOM

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

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

HTML DOM

3. Does it Mutate

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

Does it Mutate

4. Keycode Info

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

Keycode Info

5. Tmstmp

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

Tmstmp

6. Generating Random Integers

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

Generating Random Integers

7. Jest Mocking Strategies

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

Jest Mocking Strategies

8. Debounce/Throttle

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

Debounce/Throttle

9. Anything to Anything Transformer

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

Anything to Anything Transformer

10. Regex 101

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

Regex 101