Zen Coding

Download Zen Coding

Post on 19-Jan-2015

894 views

Category:

Spiritual

0 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

<ul><li> 1. Zen Coding </li></ul> <p> 2. Zen Coding </p> <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> <p> 3. Zen Coding Zen Coding 4. Expand Abbreviation </p> <ul><li>div#header&gt;cc:ie6+ul.nav&gt;li*3&gt;a </li></ul> <p> 5. Expand Abbreviation </p> <p> 6. </p> <ul><li>E#id.class </li></ul> <ul><li>div#header-&gt; </li></ul> <ul><li>p.date-&gt; </li></ul> <ul><li>div#head.one.two-&gt; </li></ul> <p> 7. </p> <ul><li>E&gt;E </li></ul> <ul><li>head&gt;link-&gt; </li></ul> <ul><li>table&gt;tr&gt;td-&gt; </li></ul> <ul><li>ul#name&gt;li.item-&gt; </li></ul> <p> 8. </p> <ul><li>E+E </li></ul> <ul><li>p+p-&gt; </li></ul> <ul><li>div#name&gt;p.one+p.two-&gt; </li></ul> <p> 9. </p> <ul><li>E$*N </li></ul> <ul><li>p.name-$*3-&gt; </li></ul> <ul><li>select&gt;option#item-$*3-&gt; </li></ul> <p> 10. </p> <ul><li> zen_settings.js(zen_settings.py ) </li></ul> <p> 11. zen_settings </p> <ul><li>varzen_settings= { </li></ul> <ul><li><ul><li>// </li></ul></li></ul> <ul><li><ul><li> css : { </li></ul></li></ul> <ul><li><ul><li><ul><li>... </li></ul></li></ul></li></ul> <ul><li><ul><li>}, </li></ul></li></ul> <ul><li><ul><li> html : { </li></ul></li></ul> <ul><li><ul><li><ul><li> extends : css, </li></ul></li></ul></li></ul> <ul><li><ul><li><ul><li> snippets : { </li></ul></li></ul></li></ul> <ul><li><ul><li><ul><li><ul><li>... </li></ul></li></ul></li></ul></li></ul> <ul><li><ul><li><ul><li>}, </li></ul></li></ul></li></ul> <ul><li><ul><li><ul><li> abbreviations : { </li></ul></li></ul></li></ul> <ul><li><ul><li><ul><li><ul><li>... </li></ul></li></ul></li></ul></li></ul> <ul><li><ul><li><ul><li>} </li></ul></li></ul></li></ul> <ul><li><ul><li>} </li></ul></li></ul> <ul><li>} </li></ul> <p> 12. : </p> <ul><li> snippets : { </li></ul> <ul><li><ul><li>'cc:ie6': '' </li></ul></li></ul> <ul><li>} </li></ul> <p> 13. : () </p> <ul><li> abbreviations : { </li></ul> <ul><li><ul><li>'a:link': '', </li></ul></li></ul> <ul><li><ul><li>'img': '' </li></ul></li></ul> <ul><li>} </li></ul> <p> 14. 0.5 </p> <ul><li> - (html pair matcher). </li></ul> <p> 15. ID CLASS: </p> <ul><li> snippets : { </li></ul> <ul><li><ul><li>'djb': '{% block${id}%} ${child} |{% endblock %}' </li></ul></li></ul> <ul><li>} </li></ul> <ul><li>djb#content&gt;div.page-&gt; </li></ul> <p>{% block content %} </p> <p>{% endblock %} 16. </p> <ul><li>Eclipse/Aptana: (HTML/XML) . </li></ul> <p> 17. </p> <ul><li>div&gt;img+br </li></ul> <p> 18. </p> <ul><li>HTML </li></ul> <ul><li><div><br /></div> </li></ul> <p> 19. </p> <ul><li>XHTML </li></ul> <ul><li><div><br /></div> </li></ul> <p> 20. </p> <ul><li>XML </li></ul> <ul><li><div> <ul><li><br /></li></ul></div> </li></ul> <p> 21. </p> <ul><li><p>Hello world</p> </li></ul> <ul><li><p>Hello world</p> </li></ul> <p> 22. </p> <ul><li> , : </li></ul> <p> 23. Wrap with abbreviation </p> <ul><li>+ </li></ul> <ul><li>div#header&gt;h1+div.wrap </li></ul> <p> 24. Wrap with abbreviation </p> <ul><li><div> </div> </li></ul> <p> 25. Wrap with abbreviation </p> <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&gt;ul#nav&gt;li.item-$ * </li></ul> <p> 26. Wrap with abbreviation </p> <ul><li><div> <ul><li> item 1 </li> </ul><ul><li> item 2 </li> </ul><ul><li> item 3 </li> </ul></div> </li></ul> <p> 27. </p> <ul><li>http://www.zen-coding.ru/demo/ </li></ul> <ul><li> editArea </li></ul> <p> 28. Zen Coding Zen Coding 29. Zen Coding HTML Pair Matcher API 30. </p> <p> 31. </p> <ul><li>Hello world! div#header+ul&gt;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 = '#.&gt;+*:$-_!@' ; </li></ul> <ul><li>return ( char_code &gt; 64 &amp;&amp; char_code &lt; 91 ) // uppercase letter </li></ul> <ul><li>|| ( char_code &gt; 96 &amp;&amp; char_code &lt; 123 ) // lowercase letter </li></ul> <ul><li>|| ( char_code &gt; 47 &amp;&amp; char_code &lt; 58 ) // number </li></ul> <ul><li>|| special_chars . indexOf ( ch ) != -1 ; // special character </li></ul> <ul><li>} </li></ul> <p> 32. </p> <ul><li>:<div>ul#nav&gt;li</div> </li></ul> <ul><li>&lt; div&gt;ul#nav&gt;li </li></ul> <div> ul#nav&gt;li </div> <p> ? </p> <ul><li> &gt; &lt; , , . </li></ul> <p> 33. </p> <ul><li> : </li></ul> <ul><li>function parseIntoTree ( abbr ) { </li></ul> <ul><li>... </li></ul> <ul><li>var re = /([+&gt;])?([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>return (! abbr ) ? tree : null ; </li></ul> <ul><li>} </li></ul> <p> 34. </p> <ul><li>div+ul#nav&gt;li*3&gt;a </li></ul> <ul><li> Tag()Snippet() . </li></ul> <p>root div ul(id=nav) li(3) a( href= ) 35. </p> <ul><li>root.toString(profile_name); </li></ul> <ul><li> (, , ). </li></ul> <p> 36. HTML- </p> <ul><li> last_match </li></ul> <ul><li> ( ) </li></ul> <p> Lorem ipsum dolor sit amet. </p> <p> 37. HTML- </p> <ul><li>HTMLPairMatcher . last_match = { </li></ul> <ul><li>opening_tag : { </li></ul> <ul><li>name : 'ul' , </li></ul> <ul><li>full_tag : '<ul><li>' , </li></ul></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> <p> 38. </p> <ul><li> API </li></ul> <ul><li> (TextMate, Coda) </li></ul> <ul><li> Tab </li></ul> <p> 39. EclipseMonkey </p> <ul><li> Eclipse JavaScript </li></ul> <ul><li> Mozilla Rhino </li></ul> <ul><li><ul><li> Java- JavaScript </li></ul></li></ul> <ul><li><ul><li> IDE </li></ul></li></ul> <ul><li><ul><li> , </li></ul></li></ul> <ul><li><ul><li> :String java.lang.String </li></ul></li></ul> <p> 40. ? [email_address] http://chikuyonok.ru http://chikuyonok.ru http://chikuyonok.ru </p>