Перевод статьи «Top 5 amazing tools for every web developer».
Все мы хотим работать максимально эффективно, вот почему мы разрабатываем программы, повышающие нашу (и не только нашу) продуктивность. Но помимо этого мы еще и используем инструменты, созданные другими разработчиками (создавали они их по тем же причинам, что и мы создаем свои).
В этой статье я хочу представить вам собственный список пяти лучших вспомогательных инструментов для веб-разработчиков. Этими инструментами я сам пользуюсь ежедневно. Список не отсортирован ни по какому принципу, все представленные инструменты одинаково потрясающие и очень сильно облегчают жизнь разработчика.
Lighthouse
Lighthouse это прекрасный инструмент с открытым исходным кодом, созданный Google. Он сообщает вам о важных аспектах ваших веб-страниц, таких как Seo (поисковая оптимизация), Performance (производительность), Accessibility (доступность), Best practises (лучшие подходы) и пр.
Особенность Lighthouse — возможность использовать этот инструмент в разных формах. Самый популярный вариант — использование официального расширения для Google Chrome. Но вы не привязаны именно к Chrome, есть и другие варианты:
- Node CLI (инструмент командной строки)
- веб-интерфейс
Следует учитывать, что при использовании веб-интерфейса вам не придется ничего устанавливать, однако вам будет доступен не весь функционал. При использовании расширения вы можете «эмулировать» дросселирование (троттлинг) процессора и скорости интернета, чтоб увидеть, как ваш сайт ведет себя на наименее производительных устройствах. Круто, правда?
Инструменты разработчика Chrome и Firefox
Лично я не слишком часто пользуюсь инструментами разработчика в Firefox, но считаю, что использовать оба варианта параллельно это отличная мысль, потому что каждый набор инструментов имеет свои особенности. Например, в Firefox есть потрясающий инструмент проверки доступности!
Совет по использованию инструментов разработчика Chrome
Если нажать Ctrl+Shift+P (когда инструменты разработчика открыты), вам откроется строка поиска, где можно набрать команду, которую вы хотите выполнить. Таким образом вы можете, например, быстро отключить JavaScript — без необходимости переходить в настройки Chrome или обыскивать checkbox в инструментах. Нужно лишь набрать слово disable!
Can I use
Сайт Can I use (англ. «можно ли использовать»), пожалуй, знают все разработчики. Он позволяет быстро проверить, насколько хорошо поддерживается то или иное свойство CSS или JavaScript API в большинстве популярных браузеров.
На картинке ниже представлены результаты поиска по JavaScript API. Мы видим, в каких версиях браузеров этот API доступен. Это вид просмотра по умолчанию, а есть еще два других.
Еще один вид просмотра — Usage relative. Он очень удобен, если вам надо собрать данные о том, какими браузерами пользуется ваша аудитория. На основе этих данных вы сможете понять, нужно ли вам что-то поменять или улучшить в функционале своего приложения, чтобы оно лучше всего работало на устройствах ваших пользователей.
Последний вид просмотра — Date relative. С его помощью вы можете увидеть, в какой версии браузера был добавлен тот или иной функционал.
Web Accessibility Evaluation Tool (WAVE, «инструмент оценки веб-доступности»)
WAVE это расширение для Chrome и Firefox. Когда вы кликаете по нему в вашем списке расширений, его интерфейс захватывает сайт, который вы просматриваете в данное время, и предоставляет вам оценку доступности этого сайта.
Вы увидите такие вещи как ошибки контрастности и доступности, а также имеющийся на сайте функционал для повышения доступности.
Figma
Figma это один из самых потрясающих инструментов, которые мне попадались в последнее время. Это инструмент дизайна и прототипирования пользовательского интерфейса. Он похож на такие инструменты как Adobe XD и Sketch, но Figma можно использовать в веб-версии (хотя можно и скачать десктопную), а это очень важно.
Этот инструмент обладает многими достоинствами, например, высокой производительностью. Вы можете пользоваться Figma совместно с коллегами, в режиме реального времени. А еще там есть бесплатный план — без ограничения функционала инструмента. К тому же, если вы студент, вы можете бесплатно получить и платную версию!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]