Zen HTML

Поиск наиболее комфортных средств разработки — это бесконечный путь. Мой путь начинался с Блокнота, потом были AceHTML, HomeSite, дальше года на три TopStyle Pro, который я до сих пор считаю лучшим инструментом для вёрстки на платформе Windows. Затем, с переходом на Mac OS X, я просто влюбился в редактор Coda, но, по причине его юности, стал искать дальше и, наконец, нашёл то, чем с удовольствием пользуюсь весь последний год — TextMate.

Но, каким бы удобным ни казался ваш редактор, самым узким местом в вопросе производительности являетесь вы сами. А именно — ваша скорость набора длинных HTML-конструкций. Для решения этой проблемы в качестве полумеры можно использовать библиотеку самых сложных элементов вроде DOCTYPE или тех, что указывают кодировку документа и подключают к нему фавиконки. Но остаются сложные табличные деревья или просто длинные имена элементов: <address>, <fieldset>, <textarea>, etc.

Поэтому сегодня я предлагаю вам первую часть обзора пакетов настройки (bundles), написанных для быстрой и комфортной работы с TextMate. Обзор представлен в виде двухминутного скринкаста:

Принцип работы с HTML-элементами в этом пакете состоит в том, что каждому элементу присваивается определённый псевдоним, который разворачивается в полный элемент с необходимыми атрибутами после нажатия клавиши Tab. К примеру:

tarea → <textarea cols="30" rows="10"></textarea>
fset → <fieldset></fieldset>
img → <img src="" alt=""/>

Следующий тип псевдонимов отвечает за вывод специфических элементов и строится по принципу псевдоним + двоеточие + специфический псевдоним:

input:text → <input type="text"/>
link:css → <link rel="stylesheet" type="text/css" href="style.css"/>
cc:ie → <!--[if IE]><![endif]-->

В случае, когда нам нужно вывести не просто HTML-элемент, а целое дерево, к элементу добавляется символ плюса:

table+
→
<table>
<tr>
    <td></td>
</tr>
</table>

Самые частоупотребимые атрибуты — id, class и style — повешены на горячие клавиши:

Cmd + 2 → class=""
Cmd + 3 → id=""
Cmd + 4 → style=""

Почему именно эти сочетания? — спросите вы. Всё просто — всмотритесь в изображённые на клавишах значки: # — это вполне себе id, а $ — вполне себе style, в то время как class просто находится поблизости.

Пакет содержит все нужные для современной вёрстки HTML-элементы, и вполне логично, что элементы вроде <font> в нём отсутствуют. Помимо коллекции элементов на все случаи жизни, в пакет входят шаблоны типовых HTML-документов: от HTML 4.01 Transitional до XHTML 1.1 Strict.

Следующая публикация в этой серии будет посвящена пакету Zen CSS, после чего оба пакета будут выложены в открытый доступ. В дальнейшем планируется их развитие и обновление.

Энергичная музыка, использованная в скринкасте — Skafandr «Непреодолимая дистанция».

Комментарии

55

M4V отдается как text/plain и, соответственно, не играется. :(

А где сам бандл? Или ты его выкладывать не будешь?

Добавил для m4v корректный mime-type. Спасибо )
А сам бандл, как я уже говорил в статье, будет выпущен в третьем посте этой серии, сразу после Zen CSS. Когда я буду окончательно готов показать его…

Да, скорость очень важна. Сам уже давно пользуюсь большим списком автозамен в TopStyle, но было бы интересно посмотреть и на ваш. Кстати, в нем есть еще такая вещь как библиотека быстрой вставки "Ctrl+Q" (вдруг кому-нибудь пригодится).

Ну и еще, каким бы инструментом кто не пользовался, знать все хоткеи - очень полезно, и плюс, конечно, слепая печать, чем быстрее, тем лучше :)

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

Я один пользуясь «Adobe Dreamweaver CS3» (а режиме «Code» естественно)? Не видел ни одного упоминания в темах типа «5 программ, которые я использую каждый день» в блогах веб-разработчиков о «Dreamweaver». Наверное все думают, что в нем только как в «MS Publisher» можно сайты визуально делать…

а ты питерских своих JetBrains специально игнорируешь? :)

p.s у тебя command+enter не работает

Для TopStyle случаем нет ли чего похожего?

Там есть список автозамен, я даже в своё время таскал с собой с системы на систему папочку User и reg-файл с настройками горячих клавиш и подсветки. Отыщу — могу выложить в качестве примера.

интересно эти сниппеты будут работать в e-texteditor'е?

Потенциально — да. Но во что это обернётся на практике в столкновении с особенностями Windows…

разумнее было бы потратить время на освоение слепой и быстрой печати

Так вроде всё в порядке со слепой печатью. Вопрос в том, что можно ещё быстрее — и вы тому свидетель. Ни одна супер-техника слепой печати не сможет обогнать подобные подстановки для всех случаев. Хотя бы потому, что клавиатура начнёт дымиться )

Я один пользуясь «Adobe Dreamweaver CS3»?

Боюсь, что да ) Хотя нет, знаю я ещё одного человека, который скорбил о закрытии Adobe GoLive…

а ты питерских своих JetBrains специально игнорируешь?

Не-не-не, Дэвид Блэйн… Ты предлагаешь мне использовать полевой комбайн для того, чтобы подровнять усы?

Как бы этот Textmate ещё научить понимать кодировку cp1251?

Боюсь, что никак ( Благо исчезает эта недо-кодировка. А на крайний случай у меня ещё осталась Coda ;)

Octane, чтобы понять, почему Adobe Dreamweaver не популярен в кругах разработчиков, достаточно посмотреть на его цену ;)

Насчет E-Texteditor - сниппеты абсолютно аналогичны текстмейтовским, так что проблем быть не должно. Хотя лично мне E не нравиться - я предпочитаю Intype, хотя его функциональность не дотягивает до E, но с ним как-то приятнее обращаться.

pepelsbey
Да не за что. :) Просто у меня квиктайм не стоит, а ставить влом было, вот и напоролся. :)

А сам бандл, как я уже говорил в статье, будет выпущен в третьем посте этой серии
Пропустил :)

По мне так лучше отсутствие win1251… В общем, как уже говорилось — идеального редактора не существует.

Что же ты ⌘2 ⌘3 и ⌘4 перекрываешь? А как табы потом переключать?
И ещё одно, ты недооцениваешь дефолтный bundle.

! → все конд. комменты
div → div с id
script →
scriptsrc →
input →
mailto →
meta →
form →
table →

Я её слегка подтачиваю напильником время от времени, но в целом доволен.

Дефолтные бандлы плохи тем, что их нужно изучать. А свои хороши тем, что делаешь именно то, что нужно. Ну а табы переключаю Alt + Cmd + →

Вадим, я предлагаю не изобретать свой Zen CSS, а использовать мой из IntelliJ Idea, который мы уже используем полгода как. Просто адаптировать его под TextMate, а оббревиатуры оставить теми же. Для большей совместимости.

а ты питерских своих JetBrains специально игнорируешь?
Не-не-не, Дэвид Блэйн… Ты предлагаешь мне использовать полевой комбайн для
того, чтобы подровнять усы?

Вадим, ты не прав. Ты же даже не пробовал плотно. Там есть очень много вкусного.

предлагаю не изобретать свой Zen CSS, а использовать мой из IntelliJ Idea

Он уже давно изобретён и успешно используется.
А совместимость… вроде на выходе один и тот же CSS?

Zigzag :-Р

Посмотрел видео - потекли слюнки. Стал ковыряться, нашел плагин к NP++
на сайте NP++ называется QuickText

В описании сказано, что можно можно создавать вручную теги автозаполнения. Сейчас буду разбираться (=

Я рад, что этот bundle не затронет твои привычки. Но он затронет привычки многих других пользователей, а это плохо. Изучать дефолтные бандлы — это очень полезное занятие, особенно если собираешься создать свой со схожей функциональностью.

Виталий, я предлагаю выставить на всеобщее обозрение наработки. Меня вот коллеги всё на IDEA пытаются пересадить, а я упираюсь. Может зря?

он затронет привычки многих других пользователей, а это плохо

Право предлагать свои банглы мне даёт ощущение, что дефолтные продуманы не очень хорошо. Точнее, сделаны без особого упора на эффективность.

Изучать дефолтные бандлы — это очень полезное занятие

Наверное, я всё-таки неудачно выразился. Дефолтные бандлы как раз хороши для того, чтобы их изучать и править под себя. Но когда понимаешь, что в них нет сквозной логики, то приходишь именно к этому — написанию своих, причём с нуля.

Там есть список автозамен, я даже в своё время таскал с собой с системы на систему папочку User и reg-файл с настройками горячих клавиш и подсветки. Отыщу — могу выложить в качестве примера.
Не нашли случайно?

stolho, пока не нашёл, но если и откопаю то вряд ли буду выкладывать в общий доступ — разве что в личном порядке. По-хорошему, там есть редактор подстановок и всё можно сделать по аналогии, хотя бы приближенно.

Как в textmate/e-texteditor осуществить этот трюк с преобразованием некоторого количества строк в li-элементы?

@Vitaly Harisov: также использую Idea для верстки. У неё есть один солидный плюс, в отличие от textmate -- кроссплатформенность. Может быть, все-таки поделитесь с миром своими наработками в этом плане?

stolho, пока не нашёл, но если и откопаю то вряд ли буду выкладывать в общий доступ — разве что в личном порядке. По-хорошему, там есть редактор подстановок и всё можно сделать по аналогии, хотя бы приближенно.

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

<ul>
<li></li>
<li></li>
</ul>

а не

<ul><li></li><li></li></ul>

Хочу попробывать e-texteditor. Если он почти как TextMate - то я думаю в разряд лучшего средства для верстки под Windows можно будет занести его.

А вообще очень хочется взглянуть на ваши бандлы =)

Мне нравится автоподстановка в RJ TextEd. Удобно, но не приторно. И запоминать сочетания не надо.

У подстановки есть большой минус. К примеру, пишу «ba…» и тут же получаю список: …attachment, …color, …repeat. И нужно либо тыкать в правильный пункт списка, либо продолжать набирать «background-c…» В итоге куча лишних действий.

HTML'ная подстановка может быть гораздо эффективнее из-за меньшего количества элементов, но опять же — не настолько быстрой.

Вопросец по поводу TextMate =)
Есть ли где-то у него подсветка открывающего и закрывающего тега? например кнопаешь на а он подсвечивает его закрывающий тег ?

Пока не встречал такого. Однако, он знает границы элемента — это видно по маркерам для сворачивания. Т.е. если свернуть элемент, будет понятно где он заканчивается. И вообще он довольно хорошо понимает код и умеет грамотно закрывать незакрытые теги по нажатию Cmd + Alt + .

У KomodoEdit подобное реализуется с помощью аббревиатур (единственное, что напрягает -- невозможность использовать в названиях символов а ля ":")

stolho, по умолчанию нет. но теоритически можно реализовать. (обозначть текущий тег как scope и повесить на него какой-нить цвет в схеме)
так реализована подсветка Trailing white space.

Не буду оригинален: ты молодец. А эту страницу я своим архаровцам покажу. У нас TextMate любят.

А этот редактор умеет различать, какой файл сейчас редактируется - html или xhtml, и можно ли это каким-то образом учесть при написании бандлов, чтобы, например, одиночные теги закрывались соответствующим образом?

К сожалению, встроенного механизма анализа DOCTYPE не предусмотрено, поэтому для того, чтобы одиночные элементы закрывались, используется переменная TM_XHTML, которая устанавливается здесь: Preferences > Advanced > Shell Variables > + > variable: TM_XHTML, value: /

Понимаю, не очень гибко, но это является одной из самых важных вещей, которую (если это возможно) стоит внедрить в мой бандл.

Огромное спасибо за вашу работу. Думаю что при помощи ваших бандлов получится не плохо сократить время разработки, без потери качества ;) Замечательная идея с применением + для сложных конструкций.

Есть пара мыслей, по поводу развития ваших бандлов, как созрею обязательно поделюсь.

Еще раз респект!