Перевод статьи «50 Developer tools to make your life a little easier».
В этой статье вы найдете пятьдесят с лишком приложений, расширений Chrome, веб-приложений и прочих вещей, которые, как мы надеемся, пригодятся вам в вашей программистской жизни.
1. Whatruns
Бесплатное расширение браузера, помогающее выяснять, какие технологии используются на любом сайте.
2. Sizzy
Браузер для разработчиков. Хватить зря терять время: ускорьте свой рабочий процесс.
3. Log Rocket
LogRocket позволяет вам воспроизвести, что пользователи делают на вашем сайте. Это помогает быстрее находить баги и решать возникающие проблемы.
4. Sentry
Платформа для мониторинга приложений Sentry поможет каждому разработчику диагностировать, исправить и оптимизировать производительность его кода.
5. Can I Use?
На сайте «Can I use» (англ. «Могу ли я использовать?») вы найдете постоянно обновляющиеся таблицы с указанием поддержки десктопных и мобильных браузеров для веб-технологий фронтенда.
6. Prettier
Инструмент форматирования кода. Поддерживает много языков, интегрируется в большинстве редакторов. Опций в Prettier немного, но инструмент очень полезный.
7. CSS Scan
Попрощайтесь с «Inspect Element»: благодаря CSS Scan вы сможете просматривать CSS любого элемента непосредственно при наведении курсора и копировать все правила в один клик.
8. Bundlephobia
На этом сайте вы сможете найти стоимость добавления npm-пакетов в вашу сборку.
9. Cypress
Быстрое, простое и надежное тестирование для всего, что запускается в браузере.
10. Unminify
Бесплатный инструмент для «разминимизирования» (распаковки) JavaScript, CSS, HTML, XML и JSON-кода. Код при этом получается читаемым и красивым.
11. RegEx 101
Бесплатный отладчик регулярных выражений с пояснениями в режиме реального времени, системой обнаружения ошибок и подсветкой.
12. Clear Cache
Очищает ваш кэш и данные браузинга в один клик.
13. Window Resizer
Меняет размер окна браузера для моделирования различных разрешений экрана.
14. Wappalyzer
Wappalyzer это утилита для определения технологий, используемых на сайтах. С ее помощью можно определить систему управления контентом, платформу ecommerce, веб-фреймворки, программное обеспечение сервера, инструменты аналитики и многое другое из того, что используется на сайте.
15. MDN
Это сайт с документацией открытых веб-технологий, включая HTML, CSS и API веб-сайтов и прогрессивных веб-приложений.
16. Axe
Это стандарт в тестировании доступности. Им пользуются в Microsoft, Google и командах разработчиков по всему миру. В общем, Axe — ведущий набор инструментов, когда дело касается цифровой доступности.
17. Git Graph
Git Graph — это расширение для Visual Studio Code. С его помощью вы можете просматривать схему своего репозитория и с легкостью осуществлять различные действия с ним. При этом вид схемы можно настроить по своему вкусу!
18. Kontrast — WCAG Contrast Checker
Расширение браузера, позволяющее быстро проверить, насколько контрастен ваш текст или фон и насколько они соответствуют требованиям WCAG 2.1.
19. Octotree
Расширение браузера для более удобного просмотра кода на GitHub.
20. Postwoman
Веб-альтернатива Postman. Помогает быстрее создавать запросы, а значит — экономить ценное время для собственно разработки.
21. Responsively App
Создавайте отзывчивые веб-приложения в пять раз быстрее! Это просто мастхэв для всех фронтенд-разработчиков.
22. FullStory
Простая в использовании программа помогает определять, когда, где и каким образом трудности, испытываемые пользователем, влияют на удержание пользователя на сайте.
23. gitignore.io
Создает файлы .gitignore для ваших проектов.
24. 1Loc
206 любимых утилит JavaScript Utilities в одной строке кода!
25. Does it mutate?
26. Keycode
Нажмите любую клавишу и получите keycode события на JavaScript.
27. Worth It: Modern JS edition
Этот инструмент анализирует страницу, чтобы определить, насколько меньше JavaScript загружается в современных браузерах благодаря использованию шаблона module/nomodule.
28. npmview
Веб-приложение для просмотра файлов в npm-пакетах.
29. CSS to JS
Преобразует код в разных направлениях (CSS — в JS Objects и JSX props, JS Objects — в CSS и JSX props, JSX props — в CSS и JS Objects).
30. All Characters
Страница, где показаны всевозможные символы и их HTML-код.
31. Shape Catcher
Инструмент, помогающий искать символы Unicode. Например, с его помощью можно найти какой-нибудь символ, названия которого вы не знаете. Все, что вам нужно знать, это очертания этого символа!
32. Mocky
Не ждите, пока будет готов бэкенд! Генерируйте настраиваемые ответы API при помощи Mocky и начинайте работать над своим приложением безотлагательно.
33. Explain Shell
Введите строку скрипта (набор команд, например, найденный где-то в интернете), и получите пояснение каждого аргумента.
34. Base64 Image
Конвертируйте свои изображения в Base64.
35. Open Graph Check
Когда вы продвигаете свой контент в Facebook и прочих социальных сетях, «привлекательность для клика» имеет большое значение. Оптимизированное превью, заточенное на целевую аудиторию, заметно улучшает показатели кликов. Opengraphcheck.com поможет вам создать такое превью, причем совершенно бесплатно!
36. Brotli pro
Brotli — опенсорсный алгоритм сжатия от Google, выпущенный в 20015 году как альтернатива GZIP.
37. Responsive Breakpoints
На этом сайте можно легко генерировать оптимальные разрешения отзывчивых изображений.
38. Is my host fast yet?
Реальные задержки ответов сервера (Time to First Byte), с которыми сталкиваются реальные пользователи веба.
39. Check My Links
Этот инструмент исследует вашу страницу в поисках битых ссылок.
40. JSON Web Token
Шифрует или дешифрует JWT.
41. Git Kraken
Легендарный клиент Git для Windows, Mac и Linux.
42. BEM Cheat Sheet
Когда выбираешь подходящее имя для класса, легко впасть в отчаяние. Даже самые опытные CSS-разработчики не всегда могут сходу найти хорошее имя. Этот инструмент поможет вам не заблудиться в BEM: он предлагает имена для самых распространенных веб-компонентов.
43. Can I Email
44. CSS Grid Generator
Вы задаете количество столбцов и строк, а программа генерирует для вас CSS grid! А еще можно путем перетаскивания создавать div-ы внутри сетки.
45. Screen size map
Сайт, позволяющий наглядно увидеть разницу в размерах экранов разных устройств.
46. Who can use?
Этот сайт посвящен вопросам контрастности цветов (с позиции доступности для людей с различными проблемами со зрением).
47. Will it CORS?
Скажите этой волшебной CORS-машине, что вам нужно, и она скажет, что именно вам нужно сделать.
48. extractCSS
Извлечение CSS из HTML.
49. Metatags
При помощи Meta Tags вы можете редактировать свой контент и экспериментировать с ним, а в превью наблюдать за тем, как как ваша веб-страница будет выглядеть в Google, Facebook, Twitter и др.!
50. Shieldfy
Автоматически выявляет и исправляет проблемы безопасности и уязвимости в коде до того, как этот код попадет в продакшен.
51. YAML Checker
YAML Checker предоставляет простой и быстрый способ проверить YAML. Проверка происходит по мере ввода текста, а замечать ошибки помогает отличная подсветка синтаксиса.
52. Polypane
Все инструменты, необходимые для создания прекрасных отзывчивых и доступных сайтов и приложений — в одном браузере.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
А ссылки?