Zen Coding 1.1

6 ноября ’08

Первая порция исправлений ошибок и некоторых новых возможностей пакетов Zen CSS и Zen HTML для TextMate доступна на странице проекта Zen Coding.

Итак, список изменений:

Общие

Модули языков переименованы в соответствии с рекомендациями по именованию: сначала название языка, потом пакета — HTML Zen, CSS Zen. Теперь языки будет удобнее выбирать из списка, но на самих названиях пакетов это не отразилось. Кстати, эти пакеты могу включаться сочетаниями клавиш: Zen HTML — Cmd + Alt + H, Zen CSS — Cmd + Alt + C.
Меню пакетов приведено в порядок: все элементы рассортированы по группам, а в корневом узле содержится версия пакета.

Zen HTML

Для элементов <div> и <span> введены модификаторы, которые разворачивают их с атрибутами id или class:

div# → <div id="|"></div>
span@ → <span class="|"></span>

Расположения курсора сначала позволяет ввести id или class элемента, а после нажатия клавиши Tab, перейти внутрь. Обозначения модификаторов соответствуют горячим клавишам для вставки этих атрибутов: Cmd + # и Cmd + @.

Также для элементов <ul>, <ol>, <select> и <tr>, в дополнение к модификатору +, были введены числовые модификаторы количества детей в развёрнутом состоянии:

ul+2 →
<ul>
   <li>|</li>
   <li>|</li>
</ul>

select+3 →
<select>
   <option>|</option>
   <option>|</option>
   <option>|</option>
</select>

К сожалению, на данном этапе развития пакетов, все значения прописываются вручную, поэтому предусмотрено разворачивание максимум 5-ти детей. Комбинация ul+6 уже не сработает.

Zen CSS

Исправлена ошибка с разворачиванием фигурных скобок, которая отменяла срабатывание первой комбинации. Эта ошибка заметна на скринкасте, в момент описания фона для <body>.
Автоматическая подстановка точки с запятой после двоеточия теперь реализована умнее — через smartTypingPairs.
Клавиша Tab после точки с запятой в конце правила теперь создаёт новую строку в блоке правил.
Псевдоним bgi теперь разворачивается по умолчанию с шаблоном значения background-image:url(../i/|);, потому как особых альтернатив нет, а значение none выводится с помощью bgi:n.

Дальше — больше.

Спасибо.
Немного напрягает, что в CSS после свойства и значения нет пробела, например display:block;. Тебя это не напрягает?
Если я у себя все это подредактировал и сейчас залью твой новый бандл, то слетит все мое?

Да, несколько интересных моментов есть -)
А вы разрешаете использовать ваши идеи при реализации аналогичного функционала для других редакторов? Или есть какие-то "лицензионные ограничения"?
Понравилась возможность указывать необходимость id и class сразу в шоткате. Пока для себя я, например, разворачивал div с указанным id, который был выделен полностью и, соответственно, его можно было сразу удалить. Надо попробовать ваш способ - может окажется удобнее.
А в TextMate не сработал бандл, который разворачивает следующий пункт после закрывающего тега в списках? Мне такой подход все-таки кажется удобнее, пользуюсь им в InType. Можно его добавить для многих тегов, которые часто используются в последовательностях - для td, tr и dd, например.

Немного напрягает, что в CSS после свойства и значения нет пробела

Меня это не может напрягать, ибо это моё решение. Но, судя по всему, придётся-таки сделать переменную окружения вроде TM_CSS_SPACE, которая будет отвечать за пробел после двоеточия.

есть какие-то "лицензионные ограничения"?

Укажете авторство идеи где-нибудь в комментариях — хорошо, не укажете — не беда. Исключительно ваше дело )

А в TextMate не сработал бандл, который разворачивает следующий пункт после закрывающего тега в списках?

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

Эх, вот бы было воистину круто как-то адаптировать это дело под inType. Пока на Мак никак нет возможности пересесть.

Если кто-то возьмётся за написание подобного для InType, я буду только за.

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

Под e-TextEditor кто-нить тестил уже?

Заметил такую штуку: непарные тэги вставляются без косой черты в конце.
Большинство, я думаю, все-таки в xhtml верстает.

Для XHTML-вывода одиночных элементов нужно сделать вот так:

Preferences > Advanced > Shell Variables > + > Variable: TM_XHTML, Value: /

Я, кажется, в прошлый раз забыл сказать "Большое Спасибо" :)
Говорю в этот.
И еще раз: Большое Спасибо!

Пожалуйста, Алекс :) Рад, что тебе понравилось.

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

Вадим, я в полном восторге от твоего труда, который сложно переоценить =]. С твоими бандлами TextMate превратился в эталон удобства!
З.Ы. А почему img→ возвращает не закрытый img src? Ай-ай-ай =]

ATimofeev, это дело настраиваемо, смотри предыдущий ответ.

Coda, кстати, начала понимать бандлы TextMate. Никто не пробовал эти?

Вадим, предлагаю взглянуть на "плюс" после имени тега, как не неудобство.

table+
table+2

Приходится нажимать Shift
А может быть сделать

table1
table2

Chupa, Coda Plug-in Creator не видит ни одной команды внутри этих бандлов, так что пока без вариантов. Да и вообще, похоже, что Coda пошла по более сложному пути, без какого-то внутреннего языка описания плагинов — только те, на которых в принципе можно писать под Mac OS X. Так что придётся заняться серьёзным программированием…

Вадим, на подходе версия 1.2, где всё решено несколько иначе. Но если говорить об этом, то мне совсем не по душе нынешняя симферопольская концепция, которая не подразумевает разделителей. Я пытаюсь сделать мета-язык написания кода максимально интуитивно понятным, чему очень помогают разделители. К тому же, я не оставляю задумку написать весь бандл единой командой, которая будет обрабатывать код по принципу CSS Query.

pepelsbey, я за использую e-texteditor. В нем есть некоторые проблемы (что естественно). Возможно у тебя будет время чтобы эти моменты поправить? Если да, то скажи и я оглашу их. А на нет и суда нет =) Спасибо.

К сожалению, ни разу не работал в E, поэтому сходу помочь не смогу. Но думаю, что среди читателей могут найтись знатоки, так что пожалуйста — расскажи.

Я пытаюсь сделать мета-язык написания кода максимально интуитивно понятным, чему очень помогают разделители.

А разве эти темплейты не предназначены в первую очередь для того, чтобы сократить количество набираемых руками символов? Введение дополнительных разделитей увеличивает это количество. Разве нет?

Темплейты — это некий баланс между краткостью и вменяемостью ;) Поэтому и спорим, поэтому и сложно придумать что-то действительно удобное.

А если гнаться за краткостью, нужно кодировать команды комбинациями из трёх случайных символов в диапазонах aA-zZ, 0-9 ;) — а потом просто их заучивать.

В общем в e-texteditor проблемы небольшие. Для XHTML-вывода одиночных элементов там к сожалению нету переключения никакого, поэтому если это не требует действительно много времени, то возможно ли попросту добавить закрывающий слэш? Ничего более умного я предложить не могу, но может быть ещё у кого-нибудь будут идеи. В принципе проблема небольшая конечно, можно и самому все поправить. Другой вопрос когда апдейты выходят, то приходится снова перебирать вручную.
Ещё одна проблема - при наборе css сокращение вида ta:c (дальше tab) которое должно вывести text-align:center; превратится в ta:color:#fff; Т.е. там где для вывода свойства используется одна буква (b, w, h, ...), то при наборе некоторых свойств придется их атрибуты дописывать вручную, т.к. "e" воспринимает одну букву за сокращение для свойства. Моя идея может быть вывод правила зависит от регистра? Тогда при соответствующих изменениях в сниппетах при наборе ta:C выведется то что нужно.

Написал корявенько, но думаю в общих чертах понятно. Если нет - попробую более детально описать. Спасибо.

Если кому-то еще это может быть полезным, есть набор снипетов для InType.
http://code.google.com/p/html-intype-bundle-improved/
В общем это не порт Zen Coding'а, а самостоятельный пакет, сделанный с учетом некоторых принципов, использованных здесь.

Да — читал про него, но руки не дошли попробовать.
Навскидку: очень сомнительными показались горячие клавиши к style, id и class.

Сейчас, кстати, зреет концепция Zen Coding 2.0 с HTML5, CSS3 и большей продуманностью.

Мне они кажутся удобными за счет расположения. К цифровому ряду дальше нужно тянуться :-) Впрочем, я попробую, наверное, пока для себя использовать ваши комбинации клавиш, и если привыкну, то обновлю пакет. Потому что в первую очередь обращают внимание именно на них :-)

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

Одна знакомая буква там есть. Class — это точка. Просто как в CSS. Стиль — это «;» — она ведь есть почти после каждого правила. А id — просто потому что рядом.
Но, возможно, предложенные вами проще запоминаются. Я попробую.