Zen Coding 1.1

6 ноября 2008

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

  • Zen HTML, версия 1.1 (zip, 100 КБ)
  • Zen CSS, версия 1.1 (zip, 144 КБ)

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

Общие

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

Zen HTML

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

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

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

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

  1. ul+2 →
  2. <ul>
  3. <li>|</li>
  4. <li>|</li>
  5. </ul>
  1. select+3 →
  2. <select>
  3. <option>|</option>
  4. <option>|</option>
  5. <option>|</option>
  6. </select>

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

Zen CSS

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

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

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

Chupa 6 ноября 2008 / 11:13

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

smmurf 6 ноября 2008 / 12:53

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

pepelsbey 6 ноября 2008 / 14:49

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

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

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

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

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

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

Pchelobej 6 ноября 2008 / 15:08

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

pepelsbey 6 ноября 2008 / 15:12

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

smmurf 6 ноября 2008 / 15:17

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

stolho 6 ноября 2008 / 16:06

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

Chupa 6 ноября 2008 / 17:10

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

pepelsbey 6 ноября 2008 / 17:18

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

  1. Preferences > Advanced > Shell Variables > + > Variable: TM_XHTML, Value: /
Alex Mauzon 6 ноября 2008 / 17:57

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

pepelsbey 6 ноября 2008 / 18:01

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

~ZORRO~ 9 ноября 2008 / 14:21

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

ATimofeev 10 ноября 2008 / 14:51

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

pepelsbey 10 ноября 2008 / 15:02

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

Chupa 13 ноября 2008 / 11:31

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

Вадим Макишвили 13 ноября 2008 / 13:17

Вадим, предлагаю взглянуть на "плюс" после имени тега, как не неудобство.
table+
table+2
Приходится нажимать Shift

А может быть сделать
table1
table2
?

pepelsbey 13 ноября 2008 / 14:22

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

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

~ZORRO~ 13 ноября 2008 / 15:07

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

pepelsbey 13 ноября 2008 / 15:10

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

Вадим Макишвили 13 ноября 2008 / 19:13

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

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

pepelsbey 13 ноября 2008 / 19:31

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

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

~ZORRO~ 13 ноября 2008 / 23:29

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

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