Zen Coding

1,180 views

Published on

Published in: Spiritual, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,180
On SlideShare
0
From Embeds
0
Number of Embeds
563
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Zen Coding

  1. 1. Zen Coding <ul><li>Набор инструментов для скоростной и удобной верстки </li></ul>Сергей Чикуёнок
  2. 2. Что такое Zen Coding <ul><li>Набор инструментов для работы с кодом </li></ul><ul><li>Написан на чистом JavaScript, портирван на Python </li></ul><ul><li>Поддерживаемые редакторы: Eclipse/Aptana , Coda, TextMate, Espresso (включен в базовую сборку), Gedit , TopStyle </li></ul><ul><li>http://code.google.com/p/zen-coding/ </li></ul>
  3. 3. Разворачивание аббревиатур — ключевой компонент Zen Coding Zen Coding
  4. 4. Expand Abbreviation <ul><li>div#header>cc:ie6+ul.nav>li*3>a </li></ul>
  5. 5. Expand Abbreviation <ul><li><div id=&quot;header&quot;> </li></ul><ul><ul><li><!--[if lte IE 6]> </li></ul></ul><ul><ul><li><![endif]--> </li></ul></ul><ul><ul><li><ul class=&quot;nav&quot;> </li></ul></ul><ul><ul><ul><li><li><a href=&quot;&quot;></a></li> </li></ul></ul></ul><ul><ul><ul><li><li><a href=&quot;&quot;></a></li> </li></ul></ul></ul><ul><ul><ul><li><li><a href=&quot;&quot;></a></li> </li></ul></ul></ul><ul><ul><li></ul> </li></ul></ul><ul><li></div> </li></ul>
  6. 6. Синтаксис <ul><li>E#id.class </li></ul><ul><li>div#header -> <div id=”header”></div> </li></ul><ul><li>p.date -> <p class=”date”></p> </li></ul><ul><li>div#head.one.two -> <div id=”head” class=”one two”></div> </li></ul>
  7. 7. Синтаксис <ul><li>E>E </li></ul><ul><li>head>link -> </li></ul><ul><li>table>tr>td -> </li></ul><ul><li>ul#name>li.item -> </li></ul><head> <link/></head> <link/></head> <ul><li><table><tr><td></td></tr></table> </li></ul><ul><li><table><tr><td></td></tr></table> </li></ul><ul><ul><li><table><tr><td></td></tr></table> </li></ul></ul><ul><li><table><tr><td></td></tr></table> </li></ul><ul><li><table><tr><td></td></tr></table> </li></ul><ul id=&quot;name&quot;><li class=&quot;item&quot;></li></ul> <ul id=&quot;name&quot;><li class=&quot;item&quot;></li></ul> <ul id=&quot;name&quot;><li class=&quot;item&quot;></li></ul>
  8. 8. Синтаксис <ul><li>E+E </li></ul><ul><li>p+p -> </li></ul><ul><li>div#name>p.one+p.two -> </li></ul><p></p><p></p> <div id=&quot;name&quot;>    <p class=&quot;one&quot;></p>    <p class=&quot;two&quot;></p></div>
  9. 9. Синтаксис <ul><li>E$*N </li></ul><ul><li>p.name-$*3 -> </li></ul><ul><li>select>option#item-$*3 -> </li></ul><p class=&quot;name-1&quot;></p><p class=&quot;name-2&quot;></p><p class=&quot;name-3&quot;></p> <select>    <option id=&quot;item-1&quot;></option>    <option id=&quot;item-2&quot;></option>    <option id=&quot;item-3&quot;></option></select>
  10. 10. Структурные элементы <ul><li>Тэги </li></ul><ul><li>Сниппеты — произвольный код </li></ul><ul><li>Все структурные элементы находятся в файле zen_settings.js (или zen_settings.py ) </li></ul>
  11. 11. Структура zen_settings <ul><li>var zen_settings = { </li></ul><ul><ul><li>// описания языков </li></ul></ul><ul><ul><li>‘ css ’: { </li></ul></ul><ul><ul><ul><li>... </li></ul></ul></ul><ul><ul><li>}, </li></ul></ul><ul><ul><li>‘ html ’: { </li></ul></ul><ul><ul><ul><li>‘ extends ’: ‘css’, </li></ul></ul></ul><ul><ul><ul><li>‘ snippets ’: { </li></ul></ul></ul><ul><ul><ul><ul><li>... </li></ul></ul></ul></ul><ul><ul><ul><li>}, </li></ul></ul></ul><ul><ul><ul><li>‘ abbreviations ’: { </li></ul></ul></ul><ul><ul><ul><ul><li>... </li></ul></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>} </li></ul>
  12. 12. Описание языка: сниппеты <ul><li>‘ snippets ’: { </li></ul><ul><ul><li>'cc:ie6': '<!--[if lte IE 6]> ${child} | <![endif]-->' </li></ul></ul><ul><li>} </li></ul>
  13. 13. Описание языка: аббревиатуры (тэги) <ul><li>‘ abbreviations ’: { </li></ul><ul><ul><li>'a:link': '<a href=&quot;http:// | &quot;></a>', </li></ul></ul><ul><ul><li>'img': '<img src=&quot;&quot; alt=&quot;&quot; />' </li></ul></ul><ul><li>} </li></ul>
  14. 14. Новое в версии 0.5 <ul><li>Упрощенный синтаксис настроек </li></ul><ul><li>Профили форматирования вывода </li></ul><ul><li>Новый ключевой компонент — контекстно-независимый поиск пар тэгов (html pair matcher). </li></ul><ul><li>Обёртывание аббревиатурами </li></ul>
  15. 15. Сниппеты принимают атрибуты ID и CLASS: <ul><li>‘ snippets ’: { </li></ul><ul><ul><li>'djb': '{% block ${id} %} ${child} | {% endblock %}' </li></ul></ul><ul><li>} </li></ul><ul><li>djb#content>div.page -> </li></ul>{% block content %} <div class=&quot;page&quot;></div>{% endblock %}
  16. 16. Профили форматирования <ul><li>Eclipse/Aptana: профиль определяется в зависимости от текущего редактора (HTML/XML) и доктайпа. </li></ul>
  17. 17. Профили форматирования <ul><li>div>img+br </li></ul>
  18. 18. Профили форматирования <ul><li>HTML </li></ul><ul><li><div><img src=&quot;&quot; alt=&quot;&quot;><br></div> </li></ul>
  19. 19. Профили форматирования <ul><li>XHTML </li></ul><ul><li><div><img src=&quot;&quot; alt=&quot;&quot; /><br /></div> </li></ul>
  20. 20. Профили форматирования <ul><li>XML </li></ul><ul><li><div> </li></ul><ul><li><img src=&quot;&quot; alt=&quot;&quot;/> </li></ul><ul><li><br/> </li></ul><ul><li></div> </li></ul>
  21. 21. Поиск пар тэгов <ul><li><p><em>Hello world</em></p> </li></ul><ul><li><p><em>Hello world</em></p> </li></ul>
  22. 22. Поиск пар тэгов <ul><li>Работает везде, где есть тэги: </li></ul><ul><li><?php </li></ul><ul><li>$str = '<table>'; </li></ul><ul><li>$str .= '<tr>'; </li></ul><ul><li>for ($i = 0; $i < 4; $i++) { </li></ul><ul><li>$str .= '<td>'.$i.'</td>'; </li></ul><ul><li>} </li></ul><ul><li>$str .= '</tr>'; </li></ul><ul><li>$str .= '</table>'; </li></ul><ul><li>?> </li></ul>
  23. 23. Wrap with abbreviation <ul><li><ul id=&quot;nav&quot;> </li></ul><ul><li><li></li> </li></ul><ul><li></ul> </li></ul><ul><li>+ </li></ul><ul><li>div#header>h1+div.wrap </li></ul>
  24. 24. Wrap with abbreviation <ul><li><div id=&quot;header&quot;> </li></ul><ul><li><h1></h1> </li></ul><ul><li><div class=&quot;wrap&quot;> </li></ul><ul><li><ul id=&quot;nav&quot;> </li></ul><ul><li><li></li> </li></ul><ul><li></ul> </li></ul><ul><li></div> </li></ul><ul><li></div> </li></ul>
  25. 25. Wrap with abbreviation <ul><li>item 1 </li></ul><ul><li>item 2 </li></ul><ul><li>item 3 </li></ul><ul><li>+ </li></ul><ul><li>div#header>ul#nav>li.item-$ * </li></ul>
  26. 26. Wrap with abbreviation <ul><li><div id=&quot;header&quot;> </li></ul><ul><li><ul id=&quot;nav&quot;> </li></ul><ul><li><li class=&quot;item-1&quot;> item 1 </li> </li></ul><ul><li><li class=&quot;item-2&quot;> item 2 </li> </li></ul><ul><li><li class=&quot;item-3&quot;> item 3 </li> </li></ul><ul><li></ul> </li></ul><ul><li></div> </li></ul>
  27. 27. Онлайн демонстрация <ul><li>http://www.zen-coding.ru/demo/ </li></ul><ul><li>плагин к editArea </li></ul>
  28. 28. Как работает Zen Coding Zen Coding
  29. 29. Архитектура Редактор Прослойка Zen Coding HTML Pair Matcher API текст текст текст
  30. 30. Парсинг аббревиатур <ul><li>Поиск аббревиатуры в текстовом потоке </li></ul><ul><li>Валидация аббревиатуры </li></ul><ul><li>Разбор аббревиатуры в дерево </li></ul><ul><li>Форматирование и вывод кода </li></ul>
  31. 31. Поиск аббревиатуры <ul><li>Hello world! div#header+ul>li </li></ul><ul><li>Посимвольный перебор влево: </li></ul><ul><li>function isAllowedChar ( ch ) { </li></ul><ul><li>var char_code = ch . charCodeAt ( 0 ), </li></ul><ul><li> special_chars = '#.>+*:$-_!@' ; </li></ul><ul><li>return ( char_code > 64 && char_code < 91 ) // uppercase letter </li></ul><ul><li>|| ( char_code > 96 && char_code < 123 ) // lowercase letter </li></ul><ul><li>|| ( char_code > 47 && char_code < 58 ) // number </li></ul><ul><li>|| special_chars . indexOf ( ch ) != -1 ; // special character </li></ul><ul><li>} </li></ul>перебор символов
  32. 32. Поиск аббревиатуры <ul><li>Проблема: <div>ul#nav>li</div> </li></ul><ul><li>< div>ul#nav>li </div> или <div> ul#nav>li </div> ? </li></ul><ul><li>При нахождении символа > проверяем его принадлежность тэгу — поиск влево до символа < , проверка по регулярному выражению, сравнение индексов. </li></ul>
  33. 33. Валидация аббревиатуры <ul><li>Валидация совмещена с разбором в дерево: </li></ul><ul><li>function parseIntoTree ( abbr ) { </li></ul><ul><li>... </li></ul><ul><li>var re = /([+>])?([a-z@!][a-z0-9:-]*)(#[w-$]+)?((?:.[w-$]+)*)(?:*(d+))?/ig </li></ul><ul><li>abbr = abbr . replace ( re , function ( str , operator , tag_name , id , class_name , multiplier ) { </li></ul><ul><li>... </li></ul><ul><li>return '' ; </li></ul><ul><li>}); </li></ul><ul><li> </li></ul><ul><li>return (! abbr ) ? tree : null ; </li></ul><ul><li>} </li></ul>
  34. 34. Разбор в дерево <ul><li>div+ul#nav>li*3>a </li></ul><ul><li>Все узлы дерева являются объектами классов Tag() и Snippet() . </li></ul>root div ul (id=”nav”) li (×3) a ( href=”” )
  35. 35. Форматирование и вывод и вывод <ul><li>root.toString(profile_name); </li></ul><ul><li>Все узлы форматируются и выводятся согласно настройкам профиля и типам тэгов (блочный, инлайн, пустой). </li></ul>
  36. 36. Поиск HTML-пар <ul><li>Поиск первого незакрытого тэга слева </li></ul><ul><li>Поиск первого неоткрытого тэга справа </li></ul><ul><li>Сохранение найденного результата в свойство last_match </li></ul><ul><li>Выбор диапазона в зависимости от позиции картетки (включаем только содержимое тэга или весь тэг) </li></ul><p> Lorem <span> ipsum </span> dolor <span> sit </span> amet. </p>
  37. 37. Поиск HTML-пар <ul><li>HTMLPairMatcher . last_match = { </li></ul><ul><li>opening_tag : { </li></ul><ul><li>name : 'ul' , </li></ul><ul><li>full_tag : '<ul id=&quot;nav&quot;>' , </li></ul><ul><li>start : 5 , </li></ul><ul><li>end : 19 , </li></ul><ul><li>unary : false , </li></ul><ul><li>type : 'tag' , </li></ul><ul><li>close_self : false </li></ul><ul><li>}, </li></ul><ul><li>closing_tag : { </li></ul><ul><li>... </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  38. 38. Поддержка редакторов <ul><li>У всех редакторов разный API </li></ul><ul><li>У некоторых редакторов (TextMate, Coda) односторонняя связь </li></ul><ul><li>Разворачивание аббревиатур по клавише Tab требует низкоуровневой поддержки редактора </li></ul>
  39. 39. EclipseMonkey <ul><li>Позволяет писать плагины для Eclipse на JavaScript </li></ul><ul><li>Использует движок Mozilla Rhino </li></ul><ul><ul><li>можно использовать Java-классы внутри JavaScript </li></ul></ul><ul><ul><li>позволяет обратиться к любому компоненту IDE </li></ul></ul><ul><ul><li>немного отличается от того, что используется в браузерах </li></ul></ul><ul><ul><li>нужно следить за типом объектов: String и java.lang.String — разные классы с разными характеристиками </li></ul></ul>
  40. 40. Вопросы? [email_address] http://chikuyonok.ru http://chikuyonok.ru http://chikuyonok.ru

×