Веб-разработка

индекс

236,88

Zen coding — пишем HTML/CSS быстрее

Добрый день смотрим сразу как это работает:

Zen Coding
chikuyonok — Сергей Чикуёнок
pepelsbey — Вадим Макеев

Этот способ ускоренного написания HTML и CSS кода разрабатывается Сергеем Чикуёнком, который «знает толк в извращениях».

HTML код пишется на CSS манеру:
div#content>h1+p

Нажимаем нехитрое комбо на клавиатуре (Ctrl+,) и получаем результат:
<div id="content">
<h1></h1>
<p></p>
</div>

Первоначальная концепция была предложена Вадимом Макеевым в статье Zen Coding 2.0. Концепт в апреле 2009 года. Затем Сергей Чикуёнок, занимался развитием этого проекта и сейчас он обрел зрелые формы и очертания.

Попробовать можно все на демо-странице
Сайт Zen Coding скоро заработает.

Скачиваем плагины с полной поддержкой:

Aptana (cross-platform);
Coda, via TEA for Coda (Mac);
Espresso, via TEA for Espresso (Mac);

И частичной поддержка:

TextMate (Mac, и может работать с E-text для Windows);
TopStyle;
Sublime Text;
GEdit;
editArea online редактор;
Dreamweaver
UltraEdit
Visual Studio

Статья «Zen Coding: A Speedy Way To Write HTML/CSS Code» взята с smashingmagazine.com, кому интересно там есть продолжение с примерами, но я думаю из видео итак многое понятно.

P.S. По поводу частичная не частичная поддержка, пишите в комментариях.

Update (выдержки из комментариев):
pepelsbey
Кстати, у проекта есть официальный твиттер: @zen_coding

batonius
Все тоже, плюс есть предпросмотр результата в процессе набора.
www.emacswiki.org/emacs/ZenCoding
А вот демка

crizis
Описание функций на русском

Ваш Николай из Компании M2

+119

23 ноября 2009, 09:04

226

sonyblack

комментарии (172)

–5

bediary 23 ноября 2009, 09:17 #

спасибо. но меня и обычный html не напрягает, а тут еще изучать что-то

+10

sonyblack 23 ноября 2009, 09:25 # ↑

это ведь css-подобный синтаксис, тут учить то нечего.
Мне вот надо список с ссылками для меню, я набираю «ul>li*5>a» и жму Ctrl+,

Скажем скорость повышается раз так в 10 =)

–1

XAMelleOH 23 ноября 2009, 23:58 # ↑

Да, но не всегда скорость важна… если работаете на время :)

verd 23 ноября 2009, 09:22 #

Хорошая вещь, установлена у меня в аптане. Жаль нет под легковесный notepad++

sonyblack 23 ноября 2009, 10:01 # ↑

habrahabr.ru/blogs/webdev/56396/
В этом топике что-то об этом обсуждали

RUQ 23 ноября 2009, 10:10 # ↑

Подскажите пожалуйста как поставить в Аптане, наверное или scripts или plugin.

SergeyGerasimov 23 ноября 2009, 14:17 # ↑

Скачиваете файлы скрипта, распаковываете и кладете в папку с проектом (в директорию scripts или monkey). Проект в IDE просто обновляете, ничего перезагружать не нужно.

vorbiz 23 ноября 2009, 09:23 #

Класс, гениально. Подскажите, а для vim подобное планируется?

sonyblack 23 ноября 2009, 09:26 # ↑

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

vorbiz 23 ноября 2009, 09:42 # ↑

Не актуально, я нашёл :) github.com/rstacruz/sparkup

Alinaki 23 ноября 2009, 13:06 # ↑

Спасибо! Уже курю :)

EtherCrow 23 ноября 2009, 16:15 # ↑

для vim есть snipMate — смотреть, радоваться

vorbiz 23 ноября 2009, 17:51 # ↑

Это не совсем то, на самом деле. И для этого дела я использую NERDSnippets.

metrofun 8 марта 2010, 22:25 # ↑

Вот www.vim.org/scripts/script.php?script_id=2981

Tails 23 ноября 2009, 09:24 #

Очень круто :) Даже жаль, что я сейчас не занимаюсь вебом)

sonyblack 23 ноября 2009, 09:30 # ↑

Расскажите знакомым, пусть порадуются)

Tails 23 ноября 2009, 09:38 # ↑

Ага, расскажу в группе)

hunterxp 23 ноября 2009, 09:35 #

А функция «ролл-бэка» есть? То есть, классическое написание кода свернуть в «аббревиатуру».

sonyblack 23 ноября 2009, 09:57 # ↑

Тут цель написание html, если написали что-то не так, то просто Команд+Z и исправляем. Преобразовывать весь код — это надо Haml & Saas, всякие вкусные плюшки там.

egor_bulychev 23 ноября 2009, 09:49 #

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

sonyblack 23 ноября 2009, 09:50 # ↑

Само написание html подвергается критике уже очень давно.
Haml и Saas не просто так появились
haml.hamptoncatlin.com/

egor_bulychev 23 ноября 2009, 10:07 # ↑

интересный проекты. но жаль ничего подобного не смогу использовать со своим EditPlus.

но все равно считаю это «Масло масленое»
пишем на одном языке после нажатия Ctrl+, появился html и уже приходится работаться с html
да это на самом начальном этапе может и ускорить работу, но у меня для этого есть обычный начальный шаблон.

хотя признаюсь конструкция ul>li*5>a очень прикольная :)

sonyblack 23 ноября 2009, 10:13 # ↑

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

smmurf 23 ноября 2009, 17:16 # ↑

Думаю, что подразумевают не начинающего разработчика, а начальный этап разработки :-)

Paxa 23 ноября 2009, 14:48 # ↑

Может вы имели ввиду sass (http://sass-lang.com/)?

sonyblack 23 ноября 2009, 14:51 # ↑

Очепятка, простите.

НЛО прилетело и опубликовало эту надпись здесь

–2

egor_bulychev 23 ноября 2009, 14:46 # ↑

а чем простые автозамены не устраивают?
b — <b></b>
a — <a href=""></a>

хотя это дело вкуса. каждому свое.

hazg 18 февраля 2010, 20:26 # ↑

Никто не мешает использовать zen для «простых автозамен». В чем проблема?

dohlik 23 ноября 2009, 10:01 #

А при чем тут Ваша «Компания М2»?

ЗЫ. Кстати, сам Сергей вроде как на Хабре зарегистрирован, интересно, почему он об этом не написал еще…

–1

sonyblack 23 ноября 2009, 10:03 # ↑

Ну вдруг кому-нибудь пригодится
Сергей написал на smashingmagazine.com, быть может он на хабре не очень сидит.

pepelsbey 23 ноября 2009, 11:56 # ↑

chikuyonok

olegkrasnov 23 ноября 2009, 12:34 # ↑

Ребята, вы волшебники. Идея офигенная.

olegkrasnov 23 ноября 2009, 12:45 # ↑

Ещё бы одну фичу добавить в современныех хтмл-редакторы — удаление тегов без удаления вложенных.
Типа: text ставим курсор на span, жмём кнопку и получаем text. Хотя может такое и есть где-то.

chikuyonok 23 ноября 2009, 13:30 # ↑

Как раз собирался в следующей версии такую штуку сделать

olegkrasnov 23 ноября 2009, 13:57 # ↑

Упс. За теги забыл совсем. Хабр их пожрал. А с отступами там будет порядок?

И ещё бы пару кнопок, чтобы отступы править. Выделил блок, сдвинул всё вправо или влево.

Такой онлайн редактор для любой цмски будет золото.

chikuyonok 23 ноября 2009, 14:04 # ↑

А с отступами там будет порядок?

Это одна из сложностей, которая не позволяет сделать это быстро :)

И ещё бы пару кнопок, чтобы отступы править. Выделил блок, сдвинул всё вправо или влево.

Этим должен заниматься непосредственно редактор, сам ZC в это не вмешивается. У меня есть планы написать совсем простой редактор, который будет работать в <textarea>. Чтобы без проблем встраивать на сайты и не утяжелять страницу.

–1

olegkrasnov 23 ноября 2009, 15:15 # ↑

Может стоит из спаркапа позаимствовать такую плюшку? ul#menu>li.item>a{Пункт $}

И его "<" тоже добавляет гибкости, правда затрудняет читаемость.

chikuyonok 23 ноября 2009, 15:27 # ↑

Ни я, ни Вадим не хотим превращать ZC в новый язык программирования. Какие-то работы по улучшению синтаксиса планируются, но в спаркапе явный перебор. Сначала подумать, какой HTML-код нужно получить, потом подумать, какая аббревиатура должна быть для него.

Тем более в спаркапе возникла концептуальная проблема из-за символа '<': существующие тэги (например <div>) будут заглатываться парсером. Поэтому там все аббревиатуры нужно писать с новой строки. В ZC такой проблемы нет: тэги отделяются от аббревиатуры.

olegkrasnov 25 ноября 2009, 07:31 # ↑

Всё-таки tag{some text} иногда было бы полезно имхо.

А «<» можно заменить тем же плюсом:
a>b+c:
<a>
<b></b>
<c></c>
</a>

a>b++c:
<a>
<b></b>
</a>
<c></c>

И скобки не нужны.

dshster 23 ноября 2009, 11:07 #

Что-то не получается запустить в NetBeans, а вот в gedit работает отлично! :-)

dals 23 ноября 2009, 13:48 # ↑

Какая версия NetBeans и что именно не получается? :)
Сам пользую ZenCoding, начиная с NB 6.5, работает отлично.

chikuyonok 23 ноября 2009, 14:01 # ↑

В NetBeans есть только сниппеты, самого механизма разворачивания аббревиатур пока нет

alexbaum 23 ноября 2009, 15:53 # ↑

И за сниппеты большое спасибо. Ем почти год и нахваливаю :)

xvoland 23 ноября 2009, 23:02 # ↑

подскажите или укажите, как это прикрутить… буду благодарен

alexbaum 24 ноября 2009, 09:28 # ↑

Вот к Версии 6.5 code.google.com/p/zen-coding/wiki/NetBeansZenHTML

Я к 6.8 бета прикрутил так:

Скачать с http://code.google.com/p/zen-coding/downloads/ файл NetBeans.Zen.HTML.1.2.zip
Распаковать папку «config» в ~/.netbeans/6.8beta
Перезапустить Netbeans

«Настройки» на Яндекс.Фотках

Способ 2.
Импортировать настройки — «Сервис» -> «Настройки» -> «Импортировать»

«Выберите настройки для импорта» на Яндекс.Фотках

dals 23 ноября 2009, 16:24 # ↑

Хм. Да, соглашусь. Вероятно, недопонял вопрос от dshster.

SamDark 23 ноября 2009, 18:08 # ↑

Для NetBeans оно немного специфичное у меня получилось. Особенности тут описаны: code.google.com/p/zen-coding/wiki/NetBeansZenHTML

pepelsbey 23 ноября 2009, 11:58 #

> разрабатывается Сергеем Чикуёнок

Мужские фамилии в русском языке всегда склоняются.
Так что «Сергеем Чикуёнком», хоть и непростая фамилия )

sonyblack 23 ноября 2009, 12:19 # ↑

Извините, спасибо что подсказали, сейчас исправлю

sonyblack 23 ноября 2009, 12:26 # ↑

Я думаю вас тоже надо вписать в пост, вы ведь наверно одну из главных рлей занимали последние пол года?
Можете рассказать?

pepelsbey 23 ноября 2009, 14:57 # ↑

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

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

Кстати, у проекта есть официальный твиттер: @zen_coding

MihallicA 23 ноября 2009, 14:22 # ↑

Не всегда, например, Долгих, Широких
Но в этом случае вы правы, конечно

anaheim2by 23 ноября 2009, 15:12 # ↑

>> Мужские фамилии в русском языке всегда склоняются.

Нет, не всегда верно. Если фамилия на "-ых" (Бесчастных), то в таком случае, фамилия не склоняется ;)

pepelsbey 23 ноября 2009, 15:28 # ↑

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

iNight 23 ноября 2009, 12:06 #

Недавно посмотрел вот это, думаю тут это будет актуально
Моя бабушка кодит в 40 раз быстрее тебя — 1
Моя бабушка кодит в 40 раз быстрее тебя — 2
Моя бабушка кодит в 40 раз быстрее тебя — 3

xvoland 24 ноября 2009, 04:43 # ↑

Ага, самое оно =) под него есть снипеты и Zen coding

kolpeex 23 ноября 2009, 13:04 #

Странно, что пост ещё не на главной.

sonyblack 23 ноября 2009, 13:06 # ↑

Дак да, обидно как-то даже

НЛО прилетело и опубликовало эту надпись здесь

sonyblack 23 ноября 2009, 13:22 # ↑

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

НЛО прилетело и опубликовало эту надпись здесь

sonyblack 23 ноября 2009, 13:38 # ↑

Большое спасибо, поправил ссылку, пишите если что еще заметите.

Aurum 23 ноября 2009, 14:28 # ↑

Представляете, я понял что вы из Перми по фразе — «дак да» :-)

sonyblack 23 ноября 2009, 14:32 # ↑

Ох)
а вы не из таго Аурума, который занимается дизайном интерьеров?

Aurum 23 ноября 2009, 14:39 # ↑

Не от туда.

Aurum 23 ноября 2009, 14:40 # ↑

Дак нет ;-)

moooV 23 ноября 2009, 13:51 #

Отлично!
Кстати, а нельзя еще сделать под Kate/Kwrite?

НЛО прилетело и опубликовало эту надпись здесь

Jama 23 ноября 2009, 15:34 # ↑

Проблема в горячей клавише.
Найдите в файле __init__.py строчку:

action_group.add_action_with_accel(complete_action,
«E»)

И замените «E» на незанятую горячей клавишей букву.

Jama 23 ноября 2009, 15:41 # ↑

По крайней мере, у меня после этого заработало. Конфликтовало с горячей клавишей другого расширения. Gedit 2.28.2

НЛО прилетело и опубликовало эту надпись здесь

Jama 23 ноября 2009, 15:54 # ↑

Кстати да. Есть баг. Если перед выражением, которое нужно развернуть, есть табы — не работает.

yellow_duck 23 ноября 2009, 13:54 #

Меня как-то не попер Zen Coding, а вот Zen HTML и Zen CSS уже год пользуюсь.

Скажите, Николай. Кто вас учил тэги к постам ставить? Какое, нахер, отношение ваша компание имеет к Zen Coding'у? Лучше бы все редакторы перечилсили, а не пиарились за чужой счет.

LDZ 23 ноября 2009, 13:58 #

Вать Машу! Это, как минимум, гениально!
После просмотра видео все сомнения в этом улетучились мгновенно

yellow_duck 23 ноября 2009, 14:00 #

Chikey 23 ноября 2009, 14:12 #

думал haml клон, аннет. Прикольная вещь

caIIIa 23 ноября 2009, 14:13 #

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

pepelsbey 23 ноября 2009, 15:09 # ↑

Для каждого элемента шорткат не напишешь.
А тут — полный доступ к HTML и CSS.

–2

caIIIa 23 ноября 2009, 15:14 # ↑

На глаз не могу вспомнить больше 10 тегов, которыми пользовался в 90% случаев последние 3 года минимум, для них достаточно хоткеев

по-вашему это будет:
⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩
нгнмвбдткпвдпсптгм

pepelsbey 23 ноября 2009, 15:27 # ↑

Ок, сколько движений нужно, чтобы написать в вашем редакторе открывающий и закрывающий элемент <blockqoute> и поставить курсор между тегами?

У меня ровно три клавиши: bq + tab.

И это демонстрация самого базового принципа, без ID'шников, без классов, без селекторов повтора.

caIIIa 23 ноября 2009, 15:37 # ↑

Ну, скажем, я редко сталкиваюсь с этим тегом, вот только что попробовал

pepelsbey 23 ноября 2009, 15:40 # ↑

Понимаю, всё зависит от тематики сайтов.
Но те же таблицы?

table+ делает полноценную таблицу, как и dl+, ul+, ol+ делают списки.

caIIIa 23 ноября 2009, 15:48 # ↑

Ctrl+T делает полноценную таблицу
Ctrl+U делает полноценный список

А вообще, спор, скажем так, о том «кто как кое что делает» :D — это же личное
Парсер съел, черт побери, предыдущий комментарий.

Не могу отвечать чаще, чем раз в 5 минут, к сожалению :)

pepelsbey 23 ноября 2009, 15:51 # ↑

Ладно, каждый **чит как он хочет, если я правильно вас понял ;)
Согласен.

Я начал писать первую версию плагинов для Zen Coding тогда, когда у меня начали кончаться горячие клавиши. И я пришёл к тому, что они мне практически не нужны.

В общем, миру-мир, но вы попробуйте ;)

pepelsbey 23 ноября 2009, 15:27 # ↑

Примера со стрелочками категорически не понял.

Chizh 23 ноября 2009, 14:16 #

А поддержка Notepad++ планируется?

sonyblack 23 ноября 2009, 14:25 # ↑

habrahabr.ru/blogs/webdev/56396/
В этом топике обсуждали, можно связаться с автором, узнать как успехи.

batonius 23 ноября 2009, 14:34 #

'Course, there is an emacs mode to do that. © xkcd.com/378/

www.emacswiki.org/emacs/ZenCoding
А вот демка www.youtube.com/watch?v=u2r8JfJJgy8
Все тоже, плюс есть предпросмотр результата в процессе набора.

nayjest 23 ноября 2009, 14:35 #

AWESOME!
Вот бы еще более полную поддержку этого счастья в NetBeans

Кстати, никто не хочет написать плагины под DreamWeaver или emEditor?

НЛО прилетело и опубликовало эту надпись здесь

zolotoy 23 ноября 2009, 14:47 # ↑

Под Dreamweaver уже есть zen-coding.googlecode.com/files/Zen.Coding-Dreamweaver.v0.3.zip

nayjest 23 ноября 2009, 15:33 # ↑

Спасибо! Буду смотреть

petrouv 23 ноября 2009, 16:03 # ↑

А какие сочетания клавиш на маке?

zolotoy 23 ноября 2009, 16:15 # ↑

сочетания клавиш нужно самому настроить в Edit > Keyboard Shortcuts для Commands>Expand Abbreviation

petrouv 23 ноября 2009, 16:28 # ↑

А у меня не работает.
Пишу div>a, [выделяю,] выбираю мышкой меню Expand Abbreviation — ничего не происходит.
CS4, mac os leopard

petrouv 23 ноября 2009, 16:46 # ↑

На пустом документе действительно работает

НЛО прилетело и опубликовало эту надпись здесь

zolotoy 23 ноября 2009, 17:01 # ↑

у вас тоже CS4 на Mac OS Leopard?

НЛО прилетело и опубликовало эту надпись здесь

zolotoy 23 ноября 2009, 20:59 # ↑

новерное нужно парсить только выделеный диапазон

H0ak1N 23 ноября 2009, 14:41 #

Всё-таки я консерватор.

pepelsbey 23 ноября 2009, 15:08 # ↑

Особенность этой штуки состоит в том, что она не мешает писать код как обычно.
Можно пользоваться совсем базовыми вещами, вроде html:5 (получаем шаблон документа) или bga:f (background-attachment:fixed) — даже это дико сокращает время набора кода.

–2

caIIIa 23 ноября 2009, 15:20 # ↑

А почему не bg-a:f

Высосано из пальца, во всех более-менее профессиональных вещах есть автоподстановка и пр…

pepelsbey 23 ноября 2009, 15:24 # ↑

Все автоподстановки тупы как дрова.
Пример:

Хочу я написать в CSS-коде «width».
Пишу «w» — предлагает первый вариант «widows», пишу «wi», пишу «wid»…
Т.е. все автоподстановки работают по алфавиту, а не по принципу частотности употребления.

А в Zen Coding? «w + tab»

–2

caIIIa 23 ноября 2009, 15:29 # ↑

Подстановщики, бесспорно, тупы, но можно и промотать и написать на две буквы больше, что в конечном итоге даст ту же самую скорость

А теперь представьте строчку такой вышеприведенной белиберды, в которой, например, неверна одна буква — вот что в таком случае делать

pepelsbey 23 ноября 2009, 15:35 # ↑

Если для вас строчка p+p или ul>li выглядит тупой, наверное вы много верстали под IE6 ;)

Естественно, что все начали демонстрировать приёмы высшего пилотажа и пытаться написать весь сайт одной строкой. Но это чушь и блажь. Главный плюс Zen Coding'а как раз в этих маленьких помощниках, которые облегчают скорость набора кода.

Честно говоря, я сам больше пользуюсь и радуюсь сокращениями для CSS, поскольку HTML код пишется два-три раза, а потом начинается длинная возня со стилями. И если я не помню сколько там параметров у text-shadow, я просто пишу tsh+ и радуюсь жизни: text-shadow:0 0 0 #000

–2

caIIIa 23 ноября 2009, 15:43 # ↑

Не переводите тему, что будет при опечатке — вот вся ваша скорость устремляется в минус бесконечность в попытке понять, что же неправильно набрано

pepelsbey 23 ноября 2009, 15:49 # ↑

Ок.

Каков шанс ошибиться в комбинации table+ или ul+li? Близкий к нулевому.

А вот, например, каков шанс написать backgronud-attachment:fiksed? Довольно большой. А благодаря Zen Coding вам не нужно запоминать точное написание, поскольку bga:f и всё.

Так что ваша критика про опечатки обернулась в мою сторону.

–2

caIIIa 23 ноября 2009, 15:57 # ↑

Набрав 4 первые буквы «back» мне был выдан выпадающий список с перечислением свойств, где background-attachment был второй сверху, я нажал кнопку «вниз», потом «enter» — свойство дописалось целиком, выдав выпадающий список значений

По поводу width… widows — меня тоже это бесило — я залез в папку с редактором и увидел, что определения лежат в текстовых файлах, поменял порядок и всё…

Опять спор о курице и яйце :)

chikuyonok 23 ноября 2009, 15:59 # ↑

undo → исправляем опечатку → expand abbreviation
И да, как правильно заметил Вадим: люди реально начинают воспринимать ZC как новый язык разметки и просить расширить его так, чтобы действительно можно было написать сайт одной строкой. Лично я не пишу больше 4 элементов подряд в аббревиатуре.

Я, кстати, тоже сначала скептически относился к ZC, но распробовав теперь не могу слезть с него. Мне теперь ни code complete, ни автозакрытие тэгов не нужны. Сособенно с учетом того, что 60% своего времени я трачу на работу с HTML/CSS/XML/XSL

pepelsbey 23 ноября 2009, 14:59 #

Кстати, а вот и Zen Coding для UltraEdit: www.ultraedit.com/forums/viewtopic.php?f=52&t=8819

plsc_Rover 23 ноября 2009, 15:05 #

А есть что-нибудь подобное для Visual Studio?

chikuyonok 23 ноября 2009, 15:13 # ↑

twitter.com/zen_coding/status/5674758009

plsc_Rover 23 ноября 2009, 18:37 # ↑

Спасибо! :)

mendizabal 23 ноября 2009, 15:28 #

Не, ну это, как бы, просто шикарно. Теперь таблицы будут писаться одной строкой.

invah 23 ноября 2009, 15:53 #

в Homesite это было реализованно еще очень давно, странно только что когда их купила macromedia, а в последствиии adobe никто это в дримвивер не встроил

crizis 23 ноября 2009, 16:13 #

Протестировал на Coda — ОХРЕНИТЕЛЬНО!
Огромное спасибо.

sonyblack 23 ноября 2009, 16:34 # ↑

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

crizis 23 ноября 2009, 16:39 # ↑

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

Кстати, мне кажется стоит дать в посте ссылку на русское описание инструкций, которые работают в этом плагине: code.google.com/p/zen-coding/wiki/ZenHTMLElementsRu

sonyblack 23 ноября 2009, 16:45 # ↑

Добавил ваш материал

vazilla 23 ноября 2009, 16:51 #

А есть планы по порту Zen Codingа для Intellij Idea / RubyMine?

sonyblack 23 ноября 2009, 16:54 # ↑

С рельсами я бы советовал юзать Haml. Сразу писать и править на нем очень удобно, читабильность на высоте. Переучиватся не долго

nicity 23 ноября 2009, 20:44 # ↑

Да, как только зачиним youtrack.jetbrains.net/issue/WI-626

norlin 23 ноября 2009, 17:00 #

Охренительно!
Только вот написано плагин для Coda с полной поддержкой — а у меня не получается с CSS, работает только с HTML :(

chikuyonok 23 ноября 2009, 17:55 # ↑

Я CSS пока отключил. От там бы в виде хака: сниппеты HTML наследовались от CSS, поэтому казалось, что все работает. Пока несколько человек не написало, что по аббревиатуре 'p' получали padding вместо <p> :)

К сожалению, пока не знаем способа, как определить текущую зону редактирования (HTML, CSS, JS) в Coda, поэтому работает только HTML

norlin 23 ноября 2009, 18:01 # ↑

Может быть, для начала смотреть на тип файла, либо на выбранный в Коде синтаксис? (чисто теоретические предположения, не знаю, можно ли это реализовать)

chikuyonok 23 ноября 2009, 18:07 # ↑

Проблема в том, что на одной странице может быть и CSS, и HTML, и JS. А с типами файлов — да, попробую что-нибудь сделать с этим

norlin 23 ноября 2009, 18:08 # ↑

Ну я предложил для начала. Чтобы хоть как-то было :)

egorinsk 23 ноября 2009, 19:11 # ↑

Добавьте pa = padding и ma = margin.

aquality 23 ноября 2009, 17:15 #

Что за редактор на видео?

chikuyonok 23 ноября 2009, 17:52 # ↑

Espresso

McAndrews 23 ноября 2009, 17:36 #

Есть возможность использовать Zen coding в Eclipse без Aptana, для этого нужно:
1) установить плагин Eclipse Monkey (update).
2) скачать Zen.Coding-Aptana с сайта Zen Coding.
3) создать папку «scripts» в корневой директории проекта и разархивировать в неё JS-скрипты из Zen.Coding-Aptana.
далее:
div#content>h1+p ^(Alt+E)

egorinsk 23 ноября 2009, 18:35 #

Юзаю шорткаты в Scite, правда, штуки вроде ul#id>li не работают, но зато есть сокращения для css, html, php и еще чего-то, сам не помню чего :) И не надо запускать тяжеленную ИДУ.

–2

juicy 23 ноября 2009, 20:01 #

Подскажите пожалуйста, а что за редактор на видео?

sonyblack 23 ноября 2009, 20:50 # ↑

Espresso

Yeah 23 ноября 2009, 21:07 #

Вдохновился и написал подобное для своей любимой IDE: Nusphere PHPEd.
Можно взять тут: pastebin.com/f5c18ce49
Для использование кидаем скрипт в любую директорию, прописываем в Tools новую команду: @php@ -q %path_to_file%

Для использования пишем, выделяем выполняем команду.

pepelsbey 25 ноября 2009, 02:46 # ↑

А не хотите официально поддерживать скрипт в рамках Zen Coding и выложить его на Google Code?

Yeah 25 ноября 2009, 11:56 # ↑

Готов участвовать. Только такие возможности, как в скринкасте мой плагин пока не предоставляет. Некоторые и невозможны из-за ограничений самой IDE.

pepelsbey 25 ноября 2009, 12:39 # ↑

Напишите мне о том, что в итоге поддерживается — у нас там есть несколько проектов, которые частично воспроизводят функциональность, но и это уже что-то. Почта в профиле.

LDZ 23 ноября 2009, 22:22 #

Скажите, пожалуйста.
Я что-то не так делаю, или у всех в Coda работают не все функции так, как на видео?

Например, такой синтаксис:

item 1
item 2
item 3

при попытке обернуть в ul>li ломает код, т.к. открывается окно, где подразумевается введение только одного тега, например li. При введении ul>li он ломает код, эта строка не преобразовывается, а тупо вставляется в исходном виде.

Второе, не критично, но очень часто код получается inline, без переносов и табуляции.

Третье — нет быстрого перемещения между точками ввода текста, например внутри href="" и текста ссылки. Или я не нашел? В меню нет, сам пробовал разные комбинации, не работает.

chikuyonok 24 ноября 2009, 09:52 # ↑

при попытке обернуть в ul>li ломает код, т.к. открывается окно, где подразумевается введение только одного тега, например li. При введении ul>li он ломает код, эта строка не преобразовывается, а тупо вставляется в исходном виде.

Можете написать, как именно ломается код (какой получаемый результат)? И если вы хотели обернуть каждую строку в <li>l, то правильный синтаксис — ul>li* (звёздочка на конце)

Второе, не критично, но очень часто код получается inline, без переносов и табуляции.

На какой именно аббревиатуре так получается? Не форматируются инлайн-элементы (иногда это правильно, иногда — нет), работаю в этом направлении

Третье — нет быстрого перемещения между точками ввода текста, например внутри href="" и текста ссылки. Или я не нашел? В меню нет, сам пробовал разные комбинации, не работает.

Перемещается по клавише Tab

chikuyonok 24 ноября 2009, 09:55 # ↑

Вру — перемещение по Tab в Coda не работает :( Работаем над этим

LDZ 24 ноября 2009, 22:49 # ↑

Даже если использовать предложенный Вами синтаксис: ul>li*

Не работают у меня здесь html-теги почему-то.
Часть кода хаб сжирает.

В общем, каждая строчка оборачивается в конструкцию (использую елочки):

«ul»li*>item 1«/ul»

Т.е. строка вставляется как есть, без обработки.

chikuyonok 26 ноября 2009, 01:01 # ↑

напишите мне на serge.che@gmail.com — попробуем решить проблему, не разводя тут флейма

ezik 23 ноября 2009, 23:49 #

Espresso на сочетание Ctrl+, выдает такое:

Exception Message: <class 'xml.parsers.expat.ExpatError'>: not well-formed (invalid token): line 2586, column 11

Method Trace:
NSExceptionHandlerExceptionRaiser (in ExceptionHandling) + 185
objc_exception_throw (in libobjc.A.dylib) + 40
-[NSException raise] (in CoreFoundation) + 17
PyObjCErr_ToObjCWithGILState (in _objc.so) + 63
signature_to_ffi_return_type (in _objc.so) + 2562
ffi_prep_cif_machdep (in _objc.so) + 358
-[EKActionMenuController performMenuItemAction:] (in Espresso) + 240
-[NSApplication sendAction:to:from:] (in AppKit) + 112
-[NSMenu performActionForItemAtIndex:] (in AppKit) + 493
-[NSCarbonMenuImpl performActionWithHighlightingForItemAtIndex:] (in AppKit) + 220
-[NSMenu performKeyEquivalent:] (in AppKit) + 866
-[NSApplication _handleKeyEquivalent:] (in AppKit) + 492
-[ESApplication _handleKeyEquivalent:] (in Espresso) + 56
-[NSApplication sendEvent:] (in AppKit) + 3997
-[NSApplication run] (in AppKit) + 867
NSApplicationMain (in AppKit) + 574
start (in Espresso) + 54
0x2

ezik 24 ноября 2009, 00:15 # ↑

Все. Починил полной переустановкой программы.

–2

rushter 24 ноября 2009, 01:41 #

Иногда привыкание к такому методу написания может привести к плохим последствиям, например когда под рукой не окажется такого софта :)

anotherpit 24 ноября 2009, 03:00 #

а под intype портируемо?

–3

tarya 24 ноября 2009, 11:11 #

Неужели кто-то кодит еще руками.

NecroProger 24 ноября 2009, 11:14 # ↑

Нет, за нас теперь всё делают машины xD

NecroProger 24 ноября 2009, 11:22 #

Хм… а как записать код вида

<div class='wrapper'>

<div class='head'>

<div id='hello'>

</div>
<div class='bodydiv'>
</div>
</div>
? (естественно речь идёт об одной аббривиатуре)

NecroProger 24 ноября 2009, 11:24 # ↑

Ой, вот так вот:

<div class='wrapper'>
<div class='head'>
<div id='hello'></div>
</div>
<div class='bodydiv'>
</div>
</div>

koldarev 24 ноября 2009, 13:08 # ↑

В 2 шага:
— div.wrapper>div.head>div#hello
— div.bodydiv

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

NecroProger 24 ноября 2009, 13:19 # ↑

естественно речь идёт об одной аббривиатуре
В несколько неинтересно :)
Я так понимаю, Zen-Coding сделан для упрощения ввода, а не для того, чтоб разметку страницы одним выражением зафигачить.
Я просто понял так, что основную разметку написать сразу в одно выражение… это и есть упращение ввода…
В данном случае просто не хватает каких-нибудь «группирующих скобок»…

NecroProger 24 ноября 2009, 13:22 # ↑

Что-то я по клавишам не попадаю o_O

естественно речь идёт об одной аббривиатуре
В несколько неинтересно :)

Здесь я хотел написать вот так:

естественно речь идёт об одной аббривиатуре
А несколько — неинтересно :)

НЛО прилетело и опубликовало эту надпись здесь

koldarev 24 ноября 2009, 16:13 # ↑

Очевидно, что вместо

<div class='wrapper'>
    <div class='head'>
        <div id='hello'></div>
    </div>
    <div class='bodydiv'></div>
</div>

получится

<div class='wrapper'>
    <div class='head'>
        <div id='hello'></div>
        <div class='bodydiv'></div>
    </div>
</div>

НЛО прилетело и опубликовало эту надпись здесь

koldarev 24 ноября 2009, 16:41 # ↑

Использование скобок, по-моему, — интересная возможность. Но это похоже на упрощение одного за счёт усложнения другого ,) А это вряд ли вписывается в концепцию Zen-Coding'а (к разработке не имею никакого отношения, поэтому не мне судить; да и использую не так давно — довольствовался сниппетами Expression Web'а).

webwin 24 ноября 2009, 13:19 #

table>tr*5>td*3
Магия, а не кодирование )
Спасибо. Жаль что NetBeans не поддерживает

–1

Cosss 24 ноября 2009, 17:49 #

Скажите, а для дримвивера когда-нибудь допилят нормальный экстеншен? То что сейчас есть не юзабельно :(

gbezyuk 24 ноября 2009, 20:52 #

Просто супер. Громадное спасибо Сергею.

ArCH 28 ноября 2009, 02:12 #

Простите конечно, что я не про крутость метода и прочее, но всё же я спрошу это…

А что за трек играет в видео??? Очень уж он хороший!

Buran 13 января 2011, 19:15 # ↑

Seba + Paradox — Move On

mocksoul 21 марта 2011, 01:13 # ↑

Откройте для себя dnb, да)

romy4 25 февраля 2010, 14:42 #

textarea в линуховой мозиле что-то не хочет работать

alexbaum 2 ноября 2010, 16:51 #

Теперь и в Netbeans github.com/lorenzos/ZenCodingNetBeansPlugin#readme

mocksoul 21 марта 2011, 01:17 #

Как бы ни хотелось раскритиковать, но готов признать — идея использовать «а-ля css» селекторы для генерации html хороша со всех сторон. Тут и реально быстро можно набирать простенький html. И не забыть сами селекторы)

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