Zen Coding 2.0. Концепт

На текущем этапе развития пакеты расширений Zen Coding для редактора TextMate зашли в тупик.

Можно конечно развить поддержку HTML 5, предусмотреть все свойства из CSS 3, реализовать ещё большее количество ежедневно необходимых шаблонов. И это будет сделано, но во вторую очередь. В первую очередь, я планирую серьёзно изменить способ набора HTML-кода и методику хранения библиотеки шаблонов в пакетах. Ну, и конечно улучшить логичность и интуитивность всех сокращений и сочетаний клавиш. Но обо всём попорядку.

Главная проблема текущей реализации Zen Coding состоит в ограничениях, которые накладывает внутренний механизм работы бандлов в TextMate:

Самым логичным выходом из данной ситуации, на мой взгляд, является написание какой-то отдельной обёртки, которая будет содержать в себе библиотеку всех элементов, вызываться по клавише Tab, анализировать контекст применения и уже делать всё, что нужно, невзирая на ограничения встроенных в TextMate механизмов.

Что же планируется сделать:

Zen HTML

Очевидно, что самым удобным синтаксисом для работы HTML-деревом является CSS-синтаксис. Самым ярким примером его использования является механизм CSS Query широко распространённый в современных JS-фреймворках. В них на всю катушку использются не только все селекторы выборки из CSS 3, но и другие кастомные штуки вроде :even, :not, :enabled и другие. И хорошо было бы использовать этот механизм выборки не только в CSS и JS, но и при написании HTML-кода.

Проанализировав типичные ситуации, возникающие при написании HTML, я пришёл к следующей группе базовых селекторов и их псевдонимов:

Базовые селекторы атрибутов id и class:

div#name → <div id="name"></div>
div.name → <div class="name"></div> 
div.one.two → <div class="one two"></div> 
div#name.name → <div id="name" class="name"></div> 

Базовые селекторы E>E и E+E и их сочетания:

bq>p →
<blockquote>
   <p></p>
</blockquote>
p+p →
<p></p>
<p></p>
ul>li+li →
<ul>
   <li></li>
   <li></li>
</ul>

Псевдонимы базовых — E*N и E+:

p*2 →
<p></p>
<p></p>
ul>li*2 →
<ul>
   <li></li>
   <li></li>
</ul>
dl+ →
<dl>
   <dt></dt>
   <dd></dd>
</dl>

По сути, селектор E+ не является точным указанием на структуру желаемого дерева, скорее это псевдоним к шаблону, то есть псевдоним dl+ равносилен dl>dt+dd, а table+ равносилен table>tr>td. Помимо этого, стоит понимать разницу между базовым селектором E+E и псевдонимом E+ — в первом случае это обозначение следования друг за другом, а во втором это признак разворачиваемого шаблона.

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

Чуть более сложный пример:

div#page>h3.title+ul>li.item*3>a →
<div id="page">
   <h3 class="title"></h3>
   <ul class="menu">
      <li class="item"><a href="#"></a></li>
      <li class="item"><a href="#"></a></li>
      <li class="item"><a href="#"></a></li>
   </ul>
</div>

Вряд ли подобные конструкции будут использоваться слишком часто, но сам принцип формирования отдельных элементов при помощи CSS-синтаксиса видится мне наиболее удачным решением.

Zen CSS

Этот пакет ожидают менее серьёзные изменения. Основные усилия будут направлены на следующее:

Список актуальных свойств был составлен при помощи фильтрации полного списка существующих в CSS 3 свойств. В итоге из 255 наименований осталось только 131 свойство, для каждого из которых был придуман короткий псевдоним mt → margin-top, а также набор шаблонов f+ → font:1em Arial,sans-serif.

Помимо этого, актуальные свойства были разделены на группы и отсортированы в два этапа: порядок следования групп и порядок следования свойств в группе. Всего получилось восемь групп:

  1. Позиционирование
  2. Поведение и свойства блока
  3. Размерность блока
  4. Цветовое оформление
  5. Специальные типы содержимого
  6. Текст
  7. Визуальные свойства
  8. Печать

Логика группировки основывается на двух главных принципах:

Внутри блоков логика «от глобального к частному» сохраняется, но начинает работать ещё один механизм, сортирующий подобные свойства в таком порядке, в котором их принято упоминать в сокращённой записи:

font:bold italic small-caps 1em sans-serif;
font-weight:bold;
font-style:italic;
font-variant:small-caps;
font-size:1em;
font-family:sans-serif;

Тоже самое и со свойствами, относящимися к четырём сторонам объекта: за основу взят принцип TRouBLe или Top Right Bottom Left, который используется в сокращённой записи:

#box {
   position:absolute;
   top:1px;
   right:2px;
   bottom:3px;
   left:4px;
   padding:1px 2px 3px 4px;
   padding-top:1px;
   padding-right:2px;
   padding-bottom:3px;
   padding-left:4px;
   }

В состав пакета Zen Coding планируется включить скрипт, который будет автоматически сортировать выделенные группы свойств согласно упомянутому алгоритму. Это позволит не только легко научиться новому порядку сортировки, но и привести в порядок существующий или чужой код.

Также планируется отдельная публикация с теоритическими выкладками по поводу группировки и сортировки CSS-свойств. Возможно, в составе обновлённой версии статьи «CSS-менеджмент».

Алло, таланты!

Сейчас я продемонстрировал вам концепцию будущих пакетов Zen Coding. Для дальнейших шагов по её реализации осталось только найти соавтора или соавторов, которые согласны не только помочь мне реализовать эту функциональность, но и, возможно, заняться поддержкой, развитием и портированием пакетов для других редакторов. Большая часть алгоритмов написана, остальная дописывается и ждёт своего часа, чтобы быть реализованной в пакетах Zen Coding не только для TextMate, но и для всех редкторов, что поддерживают плагины: Coda, Espresso, IntelliJ IDEA и многих других.

Если вы используете TextMate, знаете на хорошем уровне какой-нибудь скриптовый язык вроде Python, Ruby, Perl или даже PHP, и хотите написать что-нибудь такое или портировать Zen Coding для своего любимого редактора — смелее, пишите мне: pepelsbey@gmail.com.

Проект по-прежнему планируется держать на Google Code, но помимо этого будет открыт отдельный сайт с документацией и примерами — zen-coding.ru

Как обычно, с интересом жду ваших мнений по поводу озвученной концепции развития пакетов Zen Coding.

Комментарии

68

По идее, стандартные бандлы работают по тому же принципу и не должно.
К тому же, в какой именно момент? Обработать по табу средней сложности регексп и вытащить кое-что из списка в 200 элементов…

Шикарно!!! Спасибо за уже имеющуюся версию.
Что мне сейчас не хватает:
ZenHTML
добавить бы label с input. Т.е. что бы например label+ ->
И курсор перемещен в for и одновременно изменяется id input.
Еще я не понял почему одиночные теги не закрыты, если я использую html:sx
ZenCSS
Пока могу вспомнить, что не хватает наиболее часто используемых сетов в ff
например :

ff:se
ff:ss
ff:h -> Helvetica, Tahoma ...

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

Еще я не понял почему одиночные теги не закрыты, если я использую html:sx

Всё потому, что TextMate пока не умеет отличать XHTML от HTML и ему об этом нужно специально говорить при помощи переменной TM_XHTML, которая задаётся здесь: Preferences > Advanced > Shell Variables > + > TM_XHTML = /
После этого все одиночные теги начнут закрываться.

За идеи — спасибо.

Aptana – это вроде же eclipse

Для меня что первый, что второй — глубоко в них не закапывался.

А какой там механизм плагинов/скриптования?

Там используется AptanaMonkey (бывший EclipseMonkey), в качестве языка скриптования используется JavaScript, в последних версиях еще и Ruby.

Кстати, а TextMate умеет долбиться в интернет? Это я к тому, что можно намутить сервис (не обязательно только для Zen Coding, есть еще кое-какие идеи).

Знаю питон, готов помочь.
Люблю Коду, но очень не хватает там Zen Coding'а.
Для идеи думаю коллеги из Яндекса помогут.

В «Чуть более сложном примере» несоответствие:

ul>li.item*3>a

против

<li><a href="#" class="item"></a></li>

(класс применился не к «li», а к «a»)

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

В «Чуть более сложном примере» несоответствие

Спасибо :) Регекспы по разбору этого синтаксиса в моей голове иногда сбоят…

Кстати, а TextMate умеет долбиться в интернет?

TextMate может всё, что можно исполнить и получить в Unix'е. Так что, по идее, препятствий нет.

Знаю питон, готов помочь.
Люблю Коду, но очень не хватает там Zen Coding'а.

Хорошее сочетание ) Я тоже очень люблю Coda, вплоть до того, что готов отказаться от TextMate, если в ней будет Zen Coding. В общем, я напишу тебе некоторые мысли.

И у меня есть несколько идей, которые можно было бы в него включить

С интересом жду результатов твоих экспериментов. Если и правда получится внедрить Zen Coding на редакторах с поддержкой плагинов, пусть даже только на Mac OS, это будет счастье.

С удовольствием бы сам реализовал что-то подобное для InType (некоторые мысли уже были), но пока его возможности этого не позволяют, хотя запланированы очень мощные механизмы. А все остальное для виндовс слишком тяжело и неповоротливо, чтобы работать с удовольствием :-) Пока в InType приходится брать количеством...
А, кстати, разве средства IntelliJIDEA позволят сделать что-то подобное?

разве средства IntelliJIDEA позволят сделать что-то подобное?

К IDEA можно написать плагин, а там внутри JAVA и широкий простор для деятельности )

Я вместе с вами радуюсь. Волею судеб приходится работать с Идеей сейчас.

Вадим. С удовольствием взялся бы за реализацию на NP++. Давно сам пытаюсь подобное там реализовать. Но мне нужна будет помощь программиста, чтобы допилить существующие плагины. Чуть позже свяжусь с тобой.

не понял про огранечения :(
т.к. не понял что ты в итоге хочешь получить
свяжусь с тобой и поробуем убрать эти ограничения :)

Органичения — это набор переменных в TextMate-бандлах. К примеру:

TM_CURRENT_WORD

Строка h3+p>a.link, при курсоре в конце неё, вернёт link по разделителю «.» и чтобы получить из неё элементы, нужно её парсить из переменной

TM_CURRENT_LINE

Ну или вариант с одиночными элементами, чтобы их закрывать автоматически, нужно иметь переменную окружения TM_XHTML, которую очень муторно снимать/ставить в настройках. А обёртка могла бы анализировать DOCTYPE и принимать решения самостоятельно. В любом случае, хранить HTML-элементы в списке внутри скрипта значительно удобнее, чем делать на каждый из них.

Я тоже всеми руками за Zen HTML и ZenCSS в Cod'е и также, наверное, отказался бы от Текстмейта в ее пользу. Да и что греха таить – на некоторых проектах только ей и получается пользоваться.

Вот только индустрия написания плагинов под Коду как-то не сильно развита. По крайней мере не все так интуитивно, как в Текстмейте. Если бы смог помочь – с радостью бы помог.

Да, полноценного бандл-редактора для Коды нет, но есть какие-то решения и даже удачные плагины. Только в этом надо серьёзно разобраться. Только одно останавливает от перехода к этому редактору — очень сильно привык к скорости набора кода в TextMate (

А имеет ли смысл кроме атрибутов id и class реализовать в Zen Coding другие атрибуты например для элементов форм? Например для полей input добавлять name каким-либо образом? Так, чтобы в результате развернуть готовую для заполнения форму. Думаю понятно что я имел в виду. Идея безусловно понравилась, буду ждать развития. К сожалению сам помочь ничем не могу.

А как насчет плагина для E-texteditor под виндовоз, который является аналогом Textmate. Будет ли zen-coding 2.0 нормально работать под Е-texteditorom или разработан плагин специально для него? Так как думаю большая часть аудитории всеравно сидят на windows, включая и меня. И очень бы хотелось что бы E-texteditor поддерживал zen-coding 2.0 также хорошо как это будет делать textmate.

N.b.
А как насчет редактора dreamweaver? Для него что-нибудь планируется?

Вопрос исключительно в возможностях E-editor'а — если возможность написать плагин есть, то вполне вероятно, что и до него дойдёт очередь. К примеру, для Aptana скрипт работает на JS, для TextMate уже есть прототип скрипта на Python, а что может E-editor? Всё тоже самое можно сказать относительно Dreamweawer'а. Если есть заинтересованность — предлагайте )

Вадим, у меня не работает конструкция ul>li*2 → и подобные, в чём может быть проблема?

Дело в том, что сложные псевдонимы работают только в ветке 2.x, работой над которой занимаете Сергей Чикуёнок (все они доступны на Google Code). Последняя версия ветки 1.x — 1.3 работает только с простыми псевдонимами.

по поводу версии 1.3 зен кодинга..
почему-то структуры вида bd+, bdb+ и подобные выводят примерно такое border-bottom:x} solid #000; при этом фокус кидает сразу на цвет... ( че-т не то..

и все таки bb bt и др было писать приятнее чем bdb bdt =)

Igor10k, там ошибка в синтаксисе шаблона. Новую версию я залью сегодня вечером, наверное вместе с релизом версии 1.3 здесь же.

Насчёт b vs. bd — ну, не сложно же набирать bg ;) Но в целом согласен, это чуть сложнее… но гораздо более последовательно по отношению к свойствам t-op, r-ight, b-ottom, l-eft.

pepelsbey, понятно )
я вот хотел еще спросить как можно выйти из сниппета? )
то есть допустим набираешь div -> span -> и получается span
сейчас я обычно тыкаю на стрелках вправо-влево что прерывает сниппет и позволяет использовать следующий, но эт не оч удобно как-то ) хотя уже привык в принципе, но все равно интересно есть ли другой способ )

кстати, еще в 1.3 версии не понравилось что div сразу вставляет два переноса строки между тегами... не оч удобно ) чтоб привести к такому виду в 1.2 достаточно было набрать div -> и тыкнуть "enter".. а в 1.3 чтоб привести к виду одной строчки приходится тыкать "backspace", потом "fn"+"backspace".. короч неудобно )

а ваще большое спасибо за бандл.. 1.2 версию с большим удовольствием юзаю )

Скажите, пожалуйста, как установить zen coding на aptana 2. В какую папку его нужно забросить?

Сам концепт -- просто AWESOME.
Только мне не повезло с редакторами, которые я использую :(
Для NetBeans я так понимаю, то что есть на данный момент -- далеко не предел мечтаний.
А под EmEditor(очень мощный, быстрый, удобный "блокнот" с пагинами, платный, 40$) и DreamWeaver вроде-бы никто еще даже не пытался это реализовать...

A как в DreamWeaver с CSS работать? Ставлю в стилях например ta (text align) жму Expand Abbreviation и вместо text-align:; появляется <ta></ta>

Вадим, как дела с сайтом zen-coding.ru?

Zen Coding - классная вещь! Было бы здорово, если бы собрать всю информацию по нему в одном месте. Подробные инструкции по установке и по работе..

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

Ney, пришло очень чёткое понимание, что полноценный сайт с документацией и примерами нужен. Вот такие дела с zen-coding.ru. Не обещаю его к концу года, но в самом начале — шансы есть.

Дмитрий, боюсь, что я не эксперт по плагину для Dreamweawer'а. У него есть автор и вопросы лучше задавать ему.

Для Notepad++ нужно писать транслятор на C++, который будет получать доступ к Windows Scripting Host и на нём исполнять JS. В общем, ищем мастера.

На официальном сайте NP++ находится запрос о реализации Zen Coding

pepelsbey, не могли бы Вы добавить на английском чего не хватает для реализации ZC, эту информацию обязательно прочитает автор Notepad++

Для Notepad++ нужно писать транслятор на C++, который будет получать доступ к Windows Scripting Host и на нём исполнять JS. В общем, ищем мастера.

кстати, существует плагин NppJavaScript для notepad++ может он поможет?

привет, еще такое предложение.

Многие правила CSS идут сразу со значением #000.
На мой взгляд лучше по умолчанию ставить только решетку, а с допиской :0 ставить #000

Т.е.
c=color:#;
c:0=color:#000;

Имхо, всё же значения по умолчанию чуть удобнее. Они выставляются из понимания «весь текст чёрный, весь фон белый» и, к примеру, в TextMate цифровое значение выделяется, а решётка нет. Так что сразу можно вводить.

Идея классная. Токма нету плагина под Coda такого, очень плачевно, однако!

Спасибо огромное за проделанную работу! Пользуемся уже около года, это действительно ускоритель вёрстки :)

Интересует поддержка Aptana 3...

Спасибо! благодаря вам узнал о такой штуке, нарадоваться не могу, но столкнулся с проблемкой.
хоткеи Zen Coding в NP++ - глобальные, работают даже когда нотпад не активен, свернут даже и соответственно перекрывают действия.
Можно сделать их локальными в пределах np++?

Сегодня начал пользоваться "Zend Coding - Python" на Notepad++. Я как в сказке, одно удовольствие! Спасибо.

Thank you for zen-coding. Made my and many others lives much easier.

Maybe a dumb question but anyway are the 2.0 concepts implemented in the latest version of zen-coding on google code?

Вадим, в случаем не в курсе, возможно ли Zen Coding под Sublime Text 2 каким-то образом научить разворачивать CSS-аббревиатуры инлайново в атрибуте style?

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