11 инструментов, которые значительно ускорят написание кода

() translation by (you can also view the original English article)

Не правда-ли название говорит само за себя? Есть огромное количество различных инструментов и техник, которые могут значительно ускорить написание кода. Во время выполнения определённых действий, ускорение процесса на несколько секунд, в результате сэкономит вам значительное количество времени в течении месяца. Я познакомлю вас с одиннадцатью инструментами, которые мне приглянулись.

1. Zen Coding

Объединим мощь и специфичность CSS селекторов с HTML разметкой и в результате мы получим Zen Coding. Конечно, я не единственный у кого отвисла челюсть от удивления, когда я увидел, как вот это:

1	div#container>div#contents>ul#nav>li*4

...конвертируется в это:

1	<div id="container">
2	<div id="contents">
3	<ul id="nav">
4	<li></li>
5	<li></li>
6	<li></li>
7	<li></li>
8	</ul>
9	</div>
10	</div>

За последний год проекту Zen Coding уделялось значительное внимание, также добавилась поддержка набора различных редакторов, включая Espresso, Vim, Netbeans, TextMate и Komodo Edit.

"Zen Coding плагин для редактора, для быстрого написание HTML, XML, XSL (или любой другой структурированный формат кода), программирования и редактирования. Сердце плагина мощный движок аббревиатур, который позволяет развернуть выражение - похожее на CSS селектор в HTML коде"

Альтернативы

Sparkup

2. Разделение окон

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

Замечательный редактор Vim предлагает невероятный уровень различных комбинаций окон. Используйте :sp и :vsp для создания нового окна в командном (normal) режиме.

Альтернативы

3. Социальное программирование

Последнюю пару лет, идея социальных сетей для программирования, начала набирать популярность, а почему нет? Если людям нравится делиться фотографиями на Flickr, тоже самое будет работать и с кодом. С такими сайтами, как недавно купленный Envato, Snipplr, или Github, или Forrst, вы не только можете управлять сниппетами для их дальнейшего использования, но также воспользоваться множеством мозгов других программистов, получая обратные отзывы сообщества, касательно ваших техник написания кода и какие подходы вы выбираете.

Envato недавно приобрёл популярный Snipplr.com

Очередной сайт - социальная сеть? Да, это правда, но я должен признать: это весело, к тому же поучительно!

4. Инструменты для управления кодом

Github, Snipplr и Forrest просто великолепны, однако они могут требовать время, до того как вы зайдёте на них, в случае если вам нужно повторно использовать определённый кусочек кода (предполагаем он не является частью бандла). В качестве решения, предлагаю вам установить, одно из доступных в интернете, приложений для управления кодом.

Лично я, как пользователь Mac, предпочитаю платное приложение Snippets.

С этим инструментом, во время работы с кодом, я могу просто нажать, на Mac, Command + F12, чтобы внести необходимый сниппет в мой проект. Гораздо больше, он добавляет "Export to Snipplr/Snipt/Pastie" функционал, что на деле оказывается, невероятно полезным.

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

Профессиональная хитрость

Если хотите синхронизировать сниппеты между другими компьютерами, с помощью Dropbox, можно создать символическую ссылку.

Шаг 1: Откройте ~/Library/ApplicationSupport/Snippets.
Шаг 2: Скопируйте всю папку в Dropbox.
Шаг 3: Создайте символическую ссылку. В терминале, напишите: ln -s ~/Dropbox/Snippets ~/Library/ApplicationSupport/Snippets.
Шаг 4: Повторите это на всех ваших компьютерах.

Какие сниппеты мне стоит сохранять?

Какие угодно! Если вам приходится писать блок кода больше одного раза, сохраните его. Давайте посмотрим на очевидного кандидата; когда вы создаёте веб-сайт, как часто вам приходится печатать три строки кода для создания закруглённых уголков, для современных браузеров?

#box {
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
}

Это занимает десять секунд, в случае если вы печатаете это каждый раз. Трата времени! Создайте сниппет, и уменьшите время потраченное на работу с кодом на 90%.

Альтернативы

Snippley: я пользовался этим инструментом, до недавнего времени.
Code Collector Pro: для Mac
Snippet App

5. Выберите подходящий редактор

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

На каком языке вы программируете
Ваша операционная система
Тип интерфейса, который вы предпочитаете
Умение пользоваться командной строкой (или отсутствие данного навыка)

В качестве примера, кто-то, кто в основном создаёт HTML темы для такого сайта, как ThemeForest вряд-ли будет использовать полнофункциональную IDE, такую, как Aptana. Она совсем необязательна и медленная. Однако, тоже самое не будет правдой, для разработчика на стороне сервера.

Вопросы, которые стоит задать перед тем как решать насчёт редактора

Насколько важна скорость? Должен-ли редактор открываться практически мгновенно?
Нужны-ли мне встроенные инструменты для отладки?
Есть-ли в этом редакторе функционал бандлов?
Насколько легко запомнить горячие клавиши?
Доступны-ли мои любимые плагины (такие как Zen Coding) в данном редакторе?
Понадобится-ли мне встроенные логи Git?
Устраивает меня или нет, графический интерфейс (GUI)?
Мне больше нравится скорость вместо визуальных элементов...или Vim вместо Coda?

Когда я задал эти вопросы себе, я решил, что скорость и производительность важны прежде всего. Тем самым на данный момент я использую Sublime 2 и Vim. Vim довольно сложно освоить вначале, но он предоставляет невероятный уровень гибкости и скорость, сложность изучения связанна с тем, что даже обход страницы требует подобия языка. Для больших проектов, которые требуют отладки, я использую Netbeans.

6. Использование бандлов (Bundles)

Бандлы: изучите их...используйте их. Редакторы, такие как TextMate -- и, впоследствии E текстовые редакторы -- популяризировали бандлы; однако, они широко доступны от редактора к редактору.

Что такого хорошего в них?

Как часто вы замечали за собой, что вы пишете тот же самый кусок разметки снова и снова, будь-то новый функционал или какая-либо структура jQuery плагина. Сколько времени вы тратите каждый раз во время этого процесса? Тут нам на помощь и приходят бандлы.

К примеру, скачав TextMate CodeIgniter бандл, мы можем воспользоваться большим набором методов и сниппетов. Запомните - мало печатать всегда хорошо!

С установленным бандлом, нам остаётся лишь нажать подходящую клавишу, после чего tab (в большинстве редакторов). Далее вы получите необходимый код. Что отличает бандл от сниппета, так это то что вы можете задать несколько позиций для табов, что позволит ещё больше ускорить процесс программирования.

Пользователи Vim: если вам не хватает функции TextMate бандлов, обратите внимание на плагин SnipMate.

7. Используйте препроцессор

Инструменты такие, как LESS.js и Sass могут ускорить написание кода. Что касается, какой из них выбрать: они оба замечательные. На сегодняшний день я отдаю предпочтение Sass, так как фреймворк Compass создан на нём и предоставляет набор полезных функций. Также мне кажется, это препроцессор, который используют крутые ребята. :)

Как это работает?

Эти инструменты позволяет использовать возможности, которые вы всегда хотели видеть в CSS, такие, как переменные и функции.

/*
Variables!
*/
@primary_color: green;

/*
Mix-ins are like functions for commonly used operations,
such as apply borders. We create variables by prepending
the @ symbol.
*/
.rounded(@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

#container {
/* References the variable we created above. */
	background: @primary_color;

/* Calls the .rounded mix-in (function) that we created, and overrides the default value. */
	.rounded(20px); 

/* Nested selectors inherit their parent's selector as well. This allows for shorter code. */
	a {
		color: red;
	}
}

Профессиональная хитрость: хотите сделать, чтобы браузер обновлял страницу каждый раз когда вы делаете изменение в файле (очень полезная функция), используйте метод watch. Поместите следующий код в нижней части вашего проекта. Конечно предполагается, что LESS.js уже установлен.

1	less.env = 'development';
2	less.watch();

Начните работу с LESS.js (видео и статья)

LESS компилятор

Многие могут поспорить, что небезопасно использовать решения основанные на JavaScript. Ничего страшного; в сети доступно множество различных компиляторов. Пожалуй лучшее, что мне удалось найти, называется LESS.app.

После того, как скачаете его (оно бесплатное), перетащите ваш проект в приложение, которое будет отслеживать (watch) все .LESS файлы. Можете продолжать работу над проектом, как обычно. Каждый раз, во время сохранения изменений, будет запускаться компилятор, который генерирует/обновляет автоматически созданный style.css файл. Когда закончите работу над приложением, вам остаётся лишь изменить, соответствующим образом, ссылку со style.less на style.css. Всё просто! Теперь нет причин не воспользоваться возможностями LESS - только если уже используете другое решение, такое как Sass.

Взгляните на нашу мини-серию, чтобы узнать как работать с Sass.

8. Прототипируйте на ранней стадии с Firebug

Вам уже знаком рабочий процесс: пишете немного JavaScript, переключаетесь к браузеру, обновляете страницу, получаете ошибку, возвращаетесь к редактору...исправляете и повторяете. Мы все делаем это, но иногда есть более эффективные альтернативы - ранее прототипирование с инструментом на подобии Firebug. Работая непосредственно в браузере, вы избегаете совершения лишних действий.

Чертовски талантливый Dave Ward рекомендует эту хитрость и даже создал скринкаст с демонстрацией.

Посетите веб-сайт Dave'а для получения скринкаста в хорошем качестве.

9. Используйте Prefixr

Инструменты на вроде Compass или даже TextMate бандл, могут значительно помочь - я использую их часто. Но для большинства проектов, они могут быть недоступны. В результате нам приходится снова и снова копировать и вставлять кусочки кода.

Я создал Prefixr, чтобы он делал всю эту утомительную работу за меня. Просто скопируйте в таблицу стилей, нажмите Prefixize (или Control + Enter) и Prefixr отфильтрует свойства CSS3 и динамически обновит их.

Не можете вспомнить предоставляет-ли Opera версию префиксов, к скажем, свойству transition (o-transition)? Не волнуйтесь; это уже есть в Prefixr!

С Prefixr, вы пишите ваши таблицы стилей только с официальной рекомендованной W3C разметкой. Когда код готов к отправке на сервер, запустите Prefixr для файла со стилями и всё будет сделано!

Узнайте больше о Prefixr.

10. Найдите редактор, который предоставляет мульти-выделение

Я сразу должен предупредить вас, что лишь в нескольких редакторах, есть возможность мулти-выделения. Редактор, который я на данный момент использую, Sublime 2, один из них. Также данный редактор доступен для Windows и пользователей Mac.

Так что же такое мульти-выделение? Что же, редакторы, на подобии TextMate предоставляют возможность множественного вертикального выделения, что здорово. Но, с мульти-выделением, вы можете поставить несколько курсоров на странице. Тем самым значительно уменьшится потребность в регулярных выражениях, а также продвинутого поиска и замены.

11. Не изобретайте колесо

Когда я только начинал работать в данной области, мне часто доводилось слышать "Не изобретай колесо". Речь идёт не об изобретении, а о понимании как колесо работает, каковы его функции. Как только для вас будет ясно как функционирует колесо, данный тезис является сущей правдой: не повторяйся (Don't Repeat Yourself).

Создание нового кода для каждого нового проекта, очень времязатратно.

Если вы хотите заканчивать новые проекты, как можно быстрее (кто этого не хочет), сохранить себе время и воспользоваться различными уровнями абстракции доступными в сети. Вот список тех, которые мне больше всего нравятся:

HTML5 Boilerplate - не важно, если вы решите использовать данный шаблон полностью или лишь некоторые его части. Просто используйте его! Также хорошей идеей будет разделение кода, данного шаблона на сниппеты, для повторного использования! Посмотрите официальный гайд о Boilerplate на Nettuts+
CodeIgniter (PHP фреймворк) - для приложений на PHP, CodeIgniter является отличным выбором. Отличная поддержка сообщества. В случае если вы привыкли воспринимать информацию визуально, наша серия CodeIgniter с нуля, также окажется очень полезной. :)
960 (CSS фреймворк) - если у вас есть потребность использовать сетку, оба фреймворка 960 и Blueprint CSS помогут вам в этом. Они превращают часы работы в процесс, который будет занимать пару минут и если вас беспокоит конечный размер CSS файла, не стоит волноваться. Это смешной аргумент. Давайте мы научим вас использовать 960!
jQuery (JavaScript библиотека) - следует-ли мне давать какие-либо объяснения, касательно данного пункта? Избавьте себя от головной боли и начните работу с этой библиотекой (по крайней мере, если вы не разработали свою библиотеку с подобным функционалом).

Заключение

Я познакомил вас со своими любимыми инструментами. Какие ресурсы и инструменты помогают вам писать код быстрее?