Полезные инструменты для веб-разработчика

1. Pesticide

pesticide.io

Небольшой chrome-плагин для отладки макетов и стилей. Помогает найти проблемные места верстки, подсвечивая контуры элементов разными цветами. Выполняет ту же функцию, что и встроенные в браузер инструменты разработчика(F12), но дает общую картину макета без лишних движений курсором мышки.

Создатель плагина Adam Morse, дизайнер из Лондона, уже известный нам по css фреймворку Tachyons, называл его всего лишь вспомогательным продуктом. Переключать пестициды оказалось для него намного быстрее, чем пользоваться стандартным инструментом.

Как по мне, действительно удобная штука.

2. Whatfont tool

www.chengyinliu.com/whatfont

Очень простой способ проверить шрифты на веб-страницах. Наводишь курсор - получаешь название. Поддерживает Typekit и Google Font API. Разработчик Chengyin Liu.

Вопрос выбора шрифтов для меня основной. Стараюсь опираться на системные шрифты. Это ускоряет сайт и помогает влиться в операционную систему читателя, позволяя сосредоточиться на контенте. Когда шрифты знакомые, то ничто не отвлекает от чтения.

В остальных случаях на помощь приходит Whatfont.

3. ColorHunt

colorhunt.co

Побочный продукт от еще одного дизайнера по имени Gal Shir. Сперва он придумал простую страничку на которой разместил с десяток основных палитр. Потом сделал Colorhunt общедоступным. Пользователи каждый день добавляют новые палитры и расшаривают их в соцсетях.

Пригодится тем, кому нужны свежие, незаезженные цветовые сочетания.

4. Web Developer Checklist

webdevchecklist.com

Создатели этого приложения Sayed Ibrahim Hashimi и Mads Kristensen собрали в одну кучу нужные тесты. Выкатывая проект в продакшн, легко упустить из виду мелочи. Проверить битые ссылки, валидность верстки, корректность использования полей в формах, заполненность Open Graph и метаданных.

Некоторые специфические вещи и в голову не придет потестить. Взять хоть онлайн-проверку цветовых контрастов. Оказывается есть и такое.

5. BuiltWith Technology Profiler

builtwith-technology

Основатель проекта Gary Brewer. Цель BuiltWith - помочь веб-разработчикам, исследователям и дизайнерам отслеживать, какие технологии используются другими веб-сайтами. Чтобы определиться, какую библиотеку, фреймворк или технологию использовать у себя.

BuiltWith расскажет о хостинге и веб-сервере, на котором работает сайт. Если подключены js-библиотеки и сервисы сбора статистики, то вы об этом непременно узнаете. Какую рассылку используют на сайте? Каким онлайн-чатом пользуются? Какие вордпрес плагины подключены? Какая в конце-концов версия PHP установлена?

Все это и остальное узнаете из этого приложения.

6. YMNNJ

youmightnotneedjquery.com

Это соращенный вариант фразы You might not need jQuery. Создатели Zack Bloom и Adam Schwartz предлагают не прикручивать jQuery ко всему подряд. Возможно, если ориентируетесь только на современные браузеры (после IE8), то они самостоятельно справятся с ванильным яваскриптом. Тем более, что от jQuery обычно требуется пара простых функций.

Так зачем тащить эту зависимость в проект? Подумайте, может в вашем конкретном случае jQuery и не нужен? По крайней мере, убедитесь, что понимаете для чего подключаете эту популярную библиотеку.

Комментариев:

Комментарии неавторизованных пользователей перед публикацией проходят премодерацию