Zen Coding – что это такое и с чем его едят?

Рубрики: Общее

Узнал с хабра о Zen Coding. Заинтересовался, что это такое. Какие-то непонятные символы, похожие на CSS и все радуются и благодарят автора(-ов), придумавшего(-их) Zen Coding… Погуглил. А теперь сам всем рекомендую. Эту идею действительно есть смысл продвигать в массы, чем я сейчас и займусь.

Итак, начнем. Чтобы лучше всего понять, рекомендую посмотреть видео.

Например. Открываем редактор, пишем там строчку:

div#content>h1+p

Жмем «Ctrl + ,» и строка разворачивается в код:

<div id="content">
<h1></h1>
<p></p>
</div>

Другими словами – мы коротко записываем выражение, жмем «секретную комбинацию» и получаем готовую болванку кода! Самый наглядный (и немного шокирующий пример) будет, если написать:

html:xt>div#header>div#logo+ul#nav>li.item-$*5>a

Жмём и получаем…

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml» xml:lang=»en»>
<head>
<title></title>
<meta http-equiv=»Content-Type» content=»text/html;charset=UTF-8″ />
</head>
<body>
<div id=»header»>
<div id=»logo»></div>
<ul id=»nav»>
<li class=»item-1″><a href=»"></a></li>
<li class=»item-2″><a href=»"></a></li>
<li class=»item-3″><a href=»"></a></li>
<li class=»item-4″><a href=»"></a></li>
<li class=»item-5″><a href=»"></a></li>
</ul>
</div>
</body>
</html>

Удивительно, правда? :) Zen Coding помогает сократить время написания кода… в разы! Поэтому рекомендуется к изучению. «Технология» новая, чтобы работала в вашем редакторе, понадобится скачать плагины.

Полный список плагинов есть тут: http://code.google.com/p/zen-coding/. Собственно, официальный сайт пока что не работает, поэтому и документацию Вы можете найти там же. Для каждого тега есть описание и его «короткий вариант». Например, простое «table+» даст нам:

<table>
<tr>
    <td></td>
</tr>
</table>

Здорово, правда?

Чтобы попробовать, без установки плагинов в редактор, авторы создали демо-приложение в веб вот здесь. Это же и официальный сайт, но он пока что не работает.

Отзывов (11) на «Zen Coding – что это такое и с чем его едят?»

Marinka пишет:
12.03.2010 в 7:25 пп

Преклоняюсь перед программерами от Бога

Канат Гайлимов пишет:
13.03.2010 в 10:53 дп

Да ну какая-то фигня. Тоже читал о нем на Хабре, но чет не впечатлило.

Номад Кочующий пишет:
13.03.2010 в 11:32 дп

Классная штука. Как всегда радуешь, полезными штучками.
Надо поискать такие штучки на Notepad++, Dreamweaver

Гитарист пишет:
13.03.2010 в 1:53 пп

Круто офигенно вообще на видео! А где это он пишет, в какой программе? И еще какие команды есть где можно бы глянуть?
У меня в их демо программе при нажатии на Ctrl + просто увеличивается масштаб и ничего не происходит.

DimoninG пишет:
13.03.2010 в 3:04 пп

Номад Кочующий и Гитарист: это плагины для редакторов. По ссылке из поста есть плагин для Notepad++ и других.

blogavod пишет:
13.03.2010 в 10:21 пп

Встречал уже ссылки в твиттере на эту фишку и не придал значения тогда. Щас прочитал и попробовал сам, понравилось. Спасибо, нужная вещь.

Трансфер Фактор пишет:
15.03.2010 в 11:14 дп

Спасибо, буду пробовать… :smile:

Zorya пишет:
27.03.2010 в 9:06 пп

хорошая новость! Протестируем. Спасибо за ссылку.

azovfan пишет:
27.03.2010 в 11:30 пп

штука прикольная, но… это ж надо думать, учить, привыкать… это б лет 10 назад, цены бы не было…
а счас я мышкой куски кода перетаскиваю – набрать уже и строчку лень… проще открыть нужный файл и перенести что нужно :wink:

Дмитрий пишет:
04.04.2010 в 9:33 дп

Очень удобно, это ж время можно сократить, почти вдвое.

Программист пишет:
05.04.2010 в 6:41 дп

Напоминает банальные сниппеты. Такое в Delphi было уже очень давно, кажется в 7-й версии появилось. Не знаю почему, но я так и не стал с этим работать. Максимум пару сокращений выучил, а остальное лень было.