Zen HTML

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

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

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

Zen HTML — флэш-плеер, Zen HTML — оригинальное видео (H.264, 6.3 МБ).

Принцип работы с 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 + .

А как сделать в бандлах, что бы при редактировании открывающего тега, автоматически менялся и закрывающийся. Посмотреть можно на видео: http://www.vimeo.com/1663309

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

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

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

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

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

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

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

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

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

Ваш комментарий
Правила форматирования
Разрешённые теги: ссылка — <a href="">, цитата — <blockquote>, фрагмент кода — <code>, усиление — <strong>, выделение — <em>, удалённый текст — <del>. Многострочные примеры кода для лучшего отображения рекомендуется обрамлять тегом [source], внутри него конвертация HTML-кода в текст происходит автоматически.