Zen HTML

31 августа 2008

Поиск наиболее комфортных средств разработки — это бесконечный путь. Мой путь начинался с Блокнота, потом были 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. К примеру:

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

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

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

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

  1. table+
  2. →
  3. <table>
  4. <tr>
  5. <td></td>
  6. </tr>
  7. </table>

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

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

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

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

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

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

Комментарии: добавить

FX Poster 31 августа 2008 / 3:11

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

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

pepelsbey 31 августа 2008 / 3:53

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

gmile 31 августа 2008 / 11:15

Это космос.

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

Глеб Арестов 31 августа 2008 / 11:16

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

William Kidd 31 августа 2008 / 12:01

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

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

ilya 31 августа 2008 / 12:20

Отличный contrib! Жду линка, потестить бандл!

fiskus_boulder 31 августа 2008 / 13:02

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

Octane 31 августа 2008 / 14:57

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

tyv 31 августа 2008 / 15:53

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

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

ELV1S 31 августа 2008 / 15:54

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

pepelsbey 31 августа 2008 / 16:15

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

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

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

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

pepelsbey 31 августа 2008 / 16:15

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

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

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

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

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

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

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

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

Александр 31 августа 2008 / 16:50

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

FX Poster 1 сентября 2008 / 0:25

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

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

FX Poster 1 сентября 2008 / 0:35

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

Egor 1 сентября 2008 / 1:15

Жаль, что в TopStyle нет UTF, приходится открывать Notepad++

pepelsbey 1 сентября 2008 / 1:17

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

Dmitry Baranovskiy 1 сентября 2008 / 5:48

Что же ты ⌘2 ⌘3 и ⌘4 перекрываешь? А как табы потом переключать?
И ещё одно, ты недооцениваешь дефолтный bundle.
! → все конд. комменты
div → div с id
script →
scriptsrc →
input →
mailto →
meta →
form →
table →

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

pepelsbey 1 сентября 2008 / 9:24

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

Vitaly Harisov 1 сентября 2008 / 9:39

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

Vitaly Harisov 1 сентября 2008 / 9:42

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

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

pepelsbey 1 сентября 2008 / 13:18

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

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

Zigzag 1 сентября 2008 / 16:49

Хм. А можно ли что-то подобное реализовать в NP++? Уверен, что можно, но как? Макросы?

pepelsbey 1 сентября 2008 / 22:21

Кажется Agat в своё время был фанатом NP++, стукнись к нему )

FX Poster 1 сентября 2008 / 23:04

Zigzag
Попробуй e text editor или intype. В notepad++ НОРМАЛЬНОГО аналога сниппетов не сделать...

Myx 2 сентября 2008 / 0:34

Zigzag :-Р

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

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

Dmitry Baranovskiy 2 сентября 2008 / 5:22

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

Dmitry Baranovskiy 2 сентября 2008 / 5:26

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

pepelsbey 2 сентября 2008 / 10:20

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

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

pepelsbey 2 сентября 2008 / 11:24

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

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

mongoose 2 сентября 2008 / 15:26

Спасибо. Теперь в e-text editor работать станет еще удобнее.

stolho 3 сентября 2008 / 12:23

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

Dmitry Baranovskiy 4 сентября 2008 / 9:09

Наш ответ Пепелсбею :D

ATimofeev 4 сентября 2008 / 18:23

Заинтриговал! Не томи, выкладывай бандлы =]

pepelsbey 4 сентября 2008 / 18:40

Думаю на выходных будет Zen CSS, а на неделе оба бандла, примерно так )

pepelsbey 5 сентября 2008 / 4:13

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

Oleg40a 8 сентября 2008 / 13:43

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

Vasily Polovnyov 8 сентября 2008 / 18:25

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

pepelsbey 8 сентября 2008 / 22:20

Oleg40a, посмотрите здесь — TextMate Basics Tutorial

stolho 9 сентября 2008 / 22:15


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

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

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

а не

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

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

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

Максим 12 сентября 2008 / 22:25

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

pepelsbey 12 сентября 2008 / 22:32

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

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

stolho 15 сентября 2008 / 12:53

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

pepelsbey 15 сентября 2008 / 13:09

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

Максим Покровский 17 сентября 2008 / 11:54

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

pepelsbey 17 сентября 2008 / 12:43

Максим — Ctrl + Shift + , — это работает и в дефолтном бангле и в моём.

Максим Покровский 17 сентября 2008 / 14:03

Я имел ввиду чтобы не выделять мышкой. Но вообщем я уже понял как. Ты направил мои мысли в правильной русло.

Ви 19 сентября 2008 / 17:22

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

KBA-KBA 29 сентября 2008 / 14:05

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

Максим Россомахин 11 октября 2008 / 13:49

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

Дмитрий 12 октября 2008 / 23:06

CP1251 и TexMate есть решение не идеальное, но рабочее.

GaN 13 октября 2008 / 16:51

ну так когда уже будет дзен СSS и выложены бандлы на общее обозрение?

smmurf 28 октября 2008 / 14:39

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

pepelsbey 28 октября 2008 / 15:57

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

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