Выбор правильных рабочих инструментов облегчает жизнь любому мастеру. К вёрстке это правило тоже применимо. В этой статье я расскажу, как сделать свою рабочую жизнь проще, не отвлекаться на рутину и, заниматься тем, что действительно интересно.
Первое и основное — это редактор. После долгих, в несколько лет, сидений под разными редакторами, начиная от Notepad++ и заканчивая Eclipse, включая даже такие экзотические редакторы, как Xcode, я сделал свой выбор. Это был Sublime Text 2. Причин тут несколько:
- Скорость. Она поразительна. Файлы открываются так же быстро, как в Notepad++.
- Поддержка подсветки синтаксиса и стилизации интерфейса — сейчас у меня установлена тема «Soda Light» и цветовая тема «Espresso Soda».
- Возможность использовать плагины — сейчас установлены Emmet и CSS-Snippets.
- Поддержка табов — тут она реализована на 5+. Тут даже есть возможность разбивки рабочей области на 2 и более окна. Очень удобно переносить классы из HTML в. CSS.
- И ещё много разных мелких функций.
Следующий в списке — это файловый менеджер. Для Windows, на мой взгляд, самым интересным и мощным является WinSCP. К тому же, он бесплатный (большой плюс). Из ключевых особенностей стоит выделить следующие:
- FTP/SFTP-клиент.
- Возможность сохранять сессии, как в TotalCommander.
- Встроенный SSH-клиент.
- Одновременная работа с несколькими сессиями.
Быстрый просмотр PSD-файлов тоже является ключевым фактором, особенно когда файлов много, а открывать Photoshop нет ни времени, ни желания. Тут уже много лет вне конкуренции XnView. Он быстрый и, что самое главное, показывает без искажений.
Для компиляции LESS-файлов я использую WinLess. Причин тут несколько:
- Быстрый.
- При необходимости прячется в трей.
- Единственная программа, с которой мне удалось «поженить» свой допиленный Bootstrap
Clip2Net — позволяет быстро снимать скриншоты с экрана. Пожалуй, единственная программа, которая может сказать «Вася, ты не прав!». Из плюсов:
- Хранение снимков на сервере.
- Возможность быстро разрисовать снимок и писать комменты прямо на нём.
- Она бесплатная
Зоопарк браузеров. IE7+, Opera, Chrome, Safari, и, конечно же, Firefox. Для особых ценителей, установлен ещё IETester для IE6.
Firefox является браузером по умолчанию. Сколько уже раз я пытался с него перейти на Chrome, но каждый раз снова и снова я к нему возвращался. Сам по себе он ничем не выделяется, ещё и память жрёт, но у него есть много классных плагинов, без которой вёрстка была бы сущим наказанием:
- Firebug — инспектор html-элементов. Конечно, сейчас появился встроенный в браузер инспектор, но он всё же не торт.
- Html Validator — собственно валидирует вёрстку. Плюс в том, что делает он это хорошо. Минус — он до сих пор не показывает на панели, сколько ошибок, если макет свёрстан в HTML5.
- Web-developer — панель с настройками. Отключение картинок, скриптов, кеша, стилей, встроенный window resizer и ещё мно-о-о-ого чего.
- MeasureIt — линейка.
- ColorZilla — пипетка. Нет ничего лучше, когда надо взять такой цвет «вот как тут».
Дефакто, Photoshop.
С программной частью вроде как закончили. Теперь стоит перейти к самой вёрстке.
Используйте CSS-фреймворки. О вкусах не спорят, но мои два самых любимых — это HTML5 ★ Boilerplate и Bootstrap. Про них я говорил в прошлой статье.
Используйте LESS вместо CSS. Быстро и красиво. Весь код структурирован, и очень просто вносить изменения в уже существующие стили.
Используйте JS-фреймворки. Jquery — это очень весело и совсем не напряжно. Быстрый экскурс по нему сможет сократить время на написание скриптов в разы.
AngularJS — когда взаимодействие с интерфейсом является ключевым параметром. Если использовать только Jquery, то через пару версий вашего сайта файл со скриптами будет напоминать тарелку со спагетти — так же запутанно и длинно.
Храните ревизии на GitHub, и вашим рабочим местом сможет стать любая скамейка или кафе. Можно уже не бояться потерять то, что было написано непосильным трудом, а возможность создавать несколько версий или веток — это удобно и гибко. К тому же можно всегда просмотреть то, что было написано ещё в первой версии сайта.
Резюмируя
Возможно, что-то покажется не нужным или же, я, наоборот, что-то забыл, буду рад услышать в комментариях. В данном случае я описывал лишь те программы, которые использую в Windows, если будет интересно, напишу ещё, какие альтернативы использую под Mac.
Автор записи: Евгений Булгаков
