• ноября 23, 2009

    Zen Coding v0.5

    Как, наверно, многие догадались по постам на Smashing Magazine, Ajaxian и Хабре, вышел Zen Coding v0.5. Видео, описывающие прелести нового ядра:

    Все видимые нововведения описаны на смашинге, посмотрим, что изменилось «под капотом»:

    • Новый формат описания аббревиатур. Никаких объектов, используются «человеческие» описания тэгов: 'img': '<img src="" alt=""/>'. Во время первого запуска парсер читает настройки и преобразовывает их в специальные объекты для быстрой работы. В данном случае важен синтаксис тэга: например, /> в конце определения означает, что тэг одиночный и не может содержать потомков.
    • Переменные. В настройках добавилась специальная секция variables, в которой определяются переменные, подставляемые в аббревиатуры. Переменные подставляются как ${variable}, но есть ряд предопределённых элементов, которые имеют особые значения: ${id}, ${class}, ${child}. Переменные нужны для того, чтобы можно было быстро менять некоторые стандарнтные значения в аббревиатурах и сниппетах (например, язык). В дальнейшем планируется задавать свои переменные для отдельных проектов.
    • Профили вывода. Можно настроить формат вывода генерируемого кода: выводить в HTML/XHTML диалекте, менять регистр тэгов и атрибутов, менять типы кавычек. Первые наброски документации: http://code.google.com/p/zen-coding/wiki/ZenCodingAPI
    • Сниппеты поддерживают атрибуты id и class. Это можно увидеть на видео в самом конце, в примере с Django блоком. В сниппете можно указать, куда должно подставляться значение атрибутов id и class — получаем, таким образом, легко расширяемые сниппеты.
    • Наследование. Аббревиатуры и сниппеты для конкретного языка могут наследоваться от других языков. Например, для XSL я указал, что его снипетты должны наследоваться от HTML — таким образом при редактировании XSL можно пользоваться стандартными HTML-аббревиатурами + добавлять специфичные для конкретного языка. Наследование задается через параметр extends, указывая через запятую языки: 
      'xsl': {
	'extends': 'css,html',
	'abbreviations': {
		...
	}
}
    • Улучшен API самой библиотеки. Из JS-версии удалил все зависимости от Eclipse, теперь код работает в любом стандартном JS окружении. Добавилось несколько вспомогательных функций для упрощения работы. Но API всё ещё очень далёк от идеала, буду его улучшать.
    • Все комментарии в коде переведены на английский язык.

    Буквально сегодня утром сделал объединил свою ветку разработки с транком, так что там теперь лежит последняя версия. Больше информации о Zen Coding (ну и на меня — красивого — посмотреть :)) можно увидеть в моём докладе на 404fest.

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

    Notepad++

    Все очень хотят поддержку этого редактора, но проблема в том, что у него нет возможности добавить расширения через скрипты. Единственный известный мне способ расширить NP++ — написать плагин на C++, используя API редактора. На сях я не пишу, приложения под винду никогда не создавал, поэтому нужна помощь человека, который в этом разбирается. В идеале: нужно написать мост WSH-C++, который позволит писать расширения на JavaScript для NP++. Как минимум: предоставить простой API на JavaScript специально для Zen Coding, который я буду дёргать и говорить, что нужно сделать (опять же, с помощью WSH).

    В TextMate не всё работает

    Да, в TextMate пока работает только разворачивание аббревиатур. Обёртывание аббревиатурами и выделение тэгов не работают — опять же, из-за ограничений API редактора. Но есть уже некоторые наброски решений этой проблемы (спасибо Антону Полещуку).

    Метки: , ,

    • 43 комментария

    1. Сергей
      23 ноября 2009

      Сергей, может быть будет время посмотреть на редактор e-texteditor? Не знаю обращали ли внимания на него или нет, у него неплохая поддержка сниппетов от Textmate, но превращать строку в несколько блоков он похоже не может. Мне очень нравится его требования к ресурсам, а также возможность редактирования сразу нескольких частей кода одновременно. Собственно вопрос — возможно ли реализовать то что есть в его среде? Спасибо.

    2. Александр
      23 ноября 2009

      Учитывая, что вы уже есть на гитхабе, было бы круто там разместить бандл для текстмейта. Это сильно облегчит его установку/обновление. Детали: http://blog.macromates.com/2008/bundles-and-github/.

    3. Zigzag
      23 ноября 2009

      Сергей, Вадим, браво! Ребята, вы просто взорвали застойный мир HTML и CSS, вынеся верстку на качественно новый уровень!

      NP++ да, жаль. Я сам все жду, когда кто-то для него сделает поддержку. Даже пытался найти помощника как-раз для написания редактора, но он так и не нашелся. =(

      А вам успехов!

    4. Сергей Комаров
      23 ноября 2009

      Спасибо за отличную работу!
      Отдельный респект за Seba & Paradox — Move On в видео)

    5. zolotoy
      23 ноября 2009

      Шум среди западных разработчиков поднялся сильный 🙂

    6. Сергей Чикуенок
      23 ноября 2009

      Всем спасибо за поддержку 🙂 Надеюсь, у проекта будет хорошее будущее

    7. Антон
      24 ноября 2009

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

    8. sashabe
      24 ноября 2009

      Как раз хотел спросить, чья песня) А обновленная версия для Коды будет?

    9. porcelanosa
      25 ноября 2009

      А как насчет NetBeans — сейчас пользуюсь предыдущей ограниченной версией — а будет ли под него писаться что нибудь? Спасибо!

    10. Сергей Чикуенок
      25 ноября 2009

      А обновленная версия для Коды будет?

      Кода и так сейчас в списке «full support», там особо нечего обновлять. Со временем, как только появятся новые фишки в ZC — да, там будет обновляться

      А как насчет NetBeans

      NB пока не позволяет писать скрипты для него. Нужен Java-программер, который сделает соответствующий плагин для него.

    11. Алексей
      25 ноября 2009

      Мне очень понравилось, хотя мой стиль кодинга немного другой.

    12. sashabe
      25 ноября 2009

      Да, я уже нашел, опробовал и безмерно радуюсь) Просто на странице на гуглкоде нет специальной ссылки на версию для Коды…

    13. ИнфоМастер
      26 ноября 2009

      А как на счет версии для smultron? Это возможно?

    14. Kristaps Karlsons
      26 ноября 2009

      Privet, Sergey!
      Ya paprobival vash skript na Aptana, i bil priyatna udiven! Ochenj izkij, ochenj udobnij.
      Long story short — ja pridumal, shto takuju shtuku nada tozhe v jQuery.

      Yesli yest vremya — mozhish zglinut na http://code.google.com/p/fluentzen/ (alpha state)

      Spasibo! 🙂

    15. Денис
      27 ноября 2009

      Привет!
      Большое спасибо вам, верстка страниц ускоряется в разы.
      Хорошо бы было, если бы можно сразу почти полностью написать код одним выражением, что–то вроде

      div#header>div#logo (если здесь еще сделать вложения, то +div#left будет также вложен, а хотелось бы, чтобы он был вложен в #header)+div#left

      Еще раз спасибо, желаю успехов и дальнейшего развития.

    16. Дима
      30 ноября 2009

      У меня версия 0.3 в Аптане (стэндэлон) не умеет оборачивать в аббревиатуры 🙁 Я туда пока переназначил комментирование строки. Было ли это в реале или это я криворучко? Если было, то исправлено ли это в версии 0.5 ?
      Спасибо.

    17. Дима
      30 ноября 2009

      Ой, я наверное ступил, потому что в 0.3 есть только обёртка в тег. Жаль сразу не могу опробовать, но всё равно большое спасибо!

    18. Дима
      1 декабря 2009

      Сергей, подскажите, пожалуйста, как сделать чтобы в html, после разворачивания аббревиатуры, курсор становился между начальным и конечным тегами, а не на атрибутах тега??? Очень замедляет процесс. В 0.3 такого не было и было очень удобно.
      Спасибо Вам ещё раз за Ваши труды! Вы очень многим облегчили работу и внесли тем самым огромный вклад в развитие кодинга.

    19. Дима
      1 декабря 2009

      И ещё, вещь типа: select#id>option*10 в развёрнутом виде выглядит как минимум не логично. Я так понимаю будет достаточно заменить значние option с инлайн на блочное?

    20. Алексей
      7 декабря 2009

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

      я говорю сейчас об AkelPad (http://akelpad.sourceforge.net/ru/index.php)

      на форуме уже создано множество JS-скриптов под него

      Сергей, Zen Coding Акелю явно не помешает 😉

    21. Евгений
      10 декабря 2009

      Предлагаю переименовать проект в Шумахер ибо скорости при верстке прибавилось существенно 🙂

      Теперь вопрос — при перезапуске Aptana, Дзен ) перестает работать, приходится наново добавлять в проект. Можно с этим что-то сделать?

      И второй вопрос не совсем в тему — после обновления студии до 2.0 перестала работать подсветка ошибок в css-коде?!

    22. Алексей Кириченко
      2 марта 2010

      Сергей! Спасибо большое! Хочу помочь вам чем могу для поддержки Notepad++ :о)
      * У него есть плагин nppExec:
      «With this NppExec plugin you can execute your commands or saved scripts without leaving Notepad++. It makes you triple your productivity!»
      http://sourceforge.net/projects/npp-plugins/files/NppExec/
      По-моему, звучит многообещающе… ;о)

      Ещё есть несколько сниппет-плагинов:
      * QuickText: «A fantastic generic snippet manager, which supports all the languages supported by Notepad++» http://sourceforge.net/projects/quicktext/
      * Snippets «Adds the possibility to add code snippets to the current document by selecting it from a simple list»

      И еще есть пара плагинов, которые работают с некими Exuberant Ctags (не знаю, что это, но вдруг пригодится):
      * CCompletion «It’s an autocompletion plugin, that also features two other similar functionalities: 1. find identifier and display it in secondary view; 2. go to identitifer For more information on usage, see the plugin help. The plugin uses Exuberant Ctags and can operate with all identifiers that Ctags recognizes»
      * Source Cookifier «A plugin which uses Exuberant Ctags to parse either only the currently activated source file or multiple files of so-called sessions. The results are shown and can be browsed in a treeview inside of a dockable window»

      Может быть, если вам не удастся реализовать функционал Дзен Кодинга через эти плагины, вы сможете связаться с их авторами и совместно что-то предпринять…

      Удачи!!

    23. Сергей Чикуенок
      2 марта 2010

      Да, я видел эти плагины. Они не подходят, так как в основном работают в одностороннем порядке, то есть могут что-то отдать в скрипт, но обратно получить не могут

    24. alexey.gopachenko
      2 марта 2010

      All IDEA-based JetBrains products now have special support for ZenCoding
      see http://blogs.jetbrains.com/webide/2010/03/zen-coding-support-in-webstormphpstorm/

    25. viczen
      2 марта 2010

      zencoding(HTML) for EditPlus v1.1
      http://www.vfresh.org/w3c/914

      and i suggest change «li*4» to «li4»
      it’ll type more easily

    26. Сергей Чикуенок
      2 марта 2010

      So, if i’ll write h2 i’ll receive two <h> tags? 🙂

    27. Алексей Кириченко
      3 марта 2010

      So, if i’ll write h2 i’ll receive two tags?
      No, we a have a limited number of tags ending with a digit, we know what digits there can be. So, we can parse li4 as 4 times li, h24 as 4 times h2 and h2 as just h2 🙂

      Obviously, li*4 is more intuitive.

    28. Алексей Кириченко
      3 марта 2010

      Кстати, под полем ввода я вижу синюю кнопочку «Powered by ZC» — а как этим тут воспользоваться? 🙂 Я нажимал Ctrl+, и ничего не происходило…

    29. viczen
      4 марта 2010

      Fortunately, tag does not exist.

      h4 ->
      h44 ->

      Of course,li*4 is more intuitive,but zencoding is for easily type.

      but there’s a trouble,we can’t sure tag will not build in HTML6….

      and i think this suggest can be a option for user.

      P.S. sorry for my terrible English,hehe.

    30. viczen
      4 марта 2010

      h4 -> <h4></h4>
      h44 -> <h4></h4><h4></h4><h4></h4><h4></h4>

    31. viczen
      4 марта 2010

      edited:

      Fortunately,<h> tag does not exist.

      h4 -> <h4></h4>
      h44 -> <h4></h4><h4></h4><h4></h4><h4></h4>

      Of course,li*4 is more intuitive,but zencoding is for easily type.

      but there’s a trouble,we can’t sure <h> will not build in HTML6….

      and i think this suggest can be a option for user.

      P.S. sorry for my terrible English,hehe.

    32. mihdan
      4 апреля 2010

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

    33. alx
      2 июня 2010

      Добавляю в файл my_zen_setting.js такой сниппет:
      ‘djb’: ‘{% block ${id} %}nt${child}|n{% endblock %}’
      Т.е. такой как в видео.

      При этом стока djb разворачивается в:
      {% block ${id} %}

      {% endblock %}

      Попытка развернуть djb#content вообще ни к чему не приводит.

      Использую Zen Coding for Aptana v0.6.0.1

    34. Сергей Чикуенок
      2 июня 2010

      Завёл тикет: http://code.google.com/p/zen-coding/issues/detail?id=190
      Посмотрю, как появится время. Кстати, можете попробовать developer preview, возможно, там баг исправлен: http://github.com/sergeche/zen-coding/downloads

    35. Сергей
      6 июня 2010

      Я установил плагин Zen Coding для Notepad++ но почему то когда пытаюсь сдельавтозамену путем нажатия хоткея Ctrl+Е появляется черный квадрат с буквами ENQ. Борюсь уже с этим 3 дня и ничего не могу сделать. Помогите настроить Notepad++ для работы с Zen Coding

    36. Сергей Чикуенок
      7 июня 2010

      Почитайте эту ветку, там вроде решили эту проблему: http://code.google.com/p/zen-coding/issues/detail?id=17

    37. ZenCoder:)
      14 июля 2010

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

    38. Сергей
      14 июля 2010

      ZenCoder, спасибо, помогло

    39. Александр
      14 мая 2011

      Очень понравилась цветовая схема на видеоролике, давно хочу завязать с тёмными. У неё есть название?

    40. Сергей
      21 августа 2011

      По поводу злосчастного Ctrl+E = ENQ

      ZenCoder, действительно помогло, элегантный способ обойти эту проблему сочетания клавиш, в отличие от того, что в большинстве случаев на форумах предлагается проделать.

      Просто удивительно, что у меня изначально всё было в порядке, а проблема выявилась уже позже, ни с того, ни с сего, хотя я ничего не менял в Notepad++.

      Однако, ZenCoder:), я думаю, вы имели в виду Опции > Настройки > вкладка «Общие» > область «Язык» > и в ней поменять временно на English > Закрыть > перезапустить программу и там же можно вернуть «Русский». Мне именно это и помогло. Если вы это и имели в виду, то это называется не «сменить язык ввода по умолчанию», а «сменить язык интерфейса программы».

    41. Паша
      2 февраля 2012

      Кто-нибудь сумел в Notepad++ повесить «Expand abbreviation» на клавишу «Tab»?

    42. Евгений
      14 апреля 2012

      Сергей, я тут ковыряюсь c Sublime Text 2 хочу на него пересесть, но одно удручает, мне не хватает возможности добавления своих сниппетов, в Zen Coding для eclipse все замечательно — добавил в настройках свой сниппет и хэв фан :), а в Sublime Text 2 я так понимаю без вмешательства вручную в код никак не получится?

    43. Вячеслав
      24 апреля 2012

      Такой вопрос как в zencodinge для comodo edit отредачить вставляемые свойства ЦСС и т.д.?
      спасибо заранее!