Zen Coding                                                @15min2012 .03.30 : Stu dy me eti ng @ clw it inc .
What is Zen-CodingZen Coding is an editor plugin for high-speedHTML, XML, XSL (or any other structured codeformat) coding ...
Uh...Yes, I know.It is CSS styleintelligentcode snippets.                          http://www.flickr.com/photos/lentzstudi...
Right!
Right!But, not only
How to SpeedUpExpand Abbreviation            i.e. snippets
How to SpeedUpExpand Abbreviation   Update <img> SizeWrap with             Merge LinesAbbreviation                      Re...
(1) Expand Abbreviationdiv#page>div.logo+ul#navigation>li*5>a<div id="page">    <div class="logo"></div>    <ul id="naviga...
(2) Wrap with Abbreviation<div>    <p|>Hello world</p></div>                             abbreviation                     ...
(2) Wrap with Abbreviation<div>    <p>Hel|lo world</p></div>                                   abbreviation               ...
(2) Wrap with Abbreviation<div>    About us    Cat|alog    Contacts</div>                            abbreviation         ...
(3) Balance Tag             Inward/Out ward<div>    <ul id=”nav”>        <li><a href=””>|About us</a></li>        <li><a h...
(3) Balance Tag             Inward/Out ward<div>    <ul id=”nav”>        <li><a href=””>|About us</a></li>        <li><a h...
(3) Balance Tag             Inward/Out ward<div>    <ul id=”nav”>        |<li><a href=””>About us</a></li>        <li><a h...
(3) Balance Tag             Inward/Out ward<div>    <ul id=”nav”>        |<li><a href=””>About us</a></li>        <li><a h...
(4) Go To Next/Previous              Edit point<div>    <div>|<span title=”|”>|</span>|</div>    <p class=”title”>Lorem ip...
(4) Go To Next/Previous              Edit point         Jump!<div>    <div>|<span title=”|”>|</span>|</div>    <p class=”t...
(4) Go To Next/Previous              Edit point                      Jump!<div>    <div>|<span title=”|”>|</span>|</div>  ...
(4) Go To Next/Previous              Edit point                         Jump!<div>    <div>|<span title=”|”>|</span>|</div...
(4) Go To Next/Previous              Edit point                                Jump!<div>    <div>|<span title=”|”>|</span...
(4) Go To Next/Previous              Edit point<div>                                     Jump!    <div>|<span title=”|”>|<...
(4) Go To Next/Previous              Edit point<div>    <div>|<span title=”|”>|</span>|</div>    <p class=”title”>Lorem ip...
(5) Update <img> Size<img src=”logo.jpg”><img src=”logo.jpg” width=”96” height=”96”>
(6) Merge Lines<div>    <div class=”wrap”>|        <p>Hello world</p>    </div></div><div>    <div class=”wrap”><p>Hello w...
(7) Remove Tag<div>    <div class=”wrap”>        <p|>Hello world</p>    </div></div>                        remove<div>   ...
(8) Split/Join Tag<div>    <div |class=”wrap”>        <p>Hello world</p>    </div></div>                             Join<...
(9) Toggle Comment<div>    <div class=”wrap”>        <p>Hel|lo world</p>    </div></div><div>    <div class=”wrap”>       ...
(9) Toggle Comment<div>    <div |class=”wrap”>        <p>Hello world</p>    </div></div><div>    <!-- <div |class=”wrap”> ...
demo
Let’s startHigh Speed Coding!
thank you                   http://twitter.com/kiyohara       http://facebook.com/tomokazu.kiyohara
Upcoming SlideShare
Loading in …5
×

Zen coding15min

1,112 views
1,053 views

Published on

Zen Coding introduction ( High speed coding tech )

Published in: Technology, Spiritual
2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

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

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Zen coding15min

    1. 1. Zen Coding @15min2012 .03.30 : Stu dy me eti ng @ clw it inc .
    2. 2. What is Zen-CodingZen Coding is an editor plugin for high-speedHTML, XML, XSL (or any other structured codeformat) coding and editing.( http://code.google.com/p/zen-coding/ )Aptana TextMate Notepad++ EmacsEclipse Coda Dreamweaver Vim and more ...
    3. 3. Uh...Yes, I know.It is CSS styleintelligentcode snippets. http://www.flickr.com/photos/lentzstudios/3884839779/
    4. 4. Right!
    5. 5. Right!But, not only
    6. 6. How to SpeedUpExpand Abbreviation i.e. snippets
    7. 7. How to SpeedUpExpand Abbreviation Update <img> SizeWrap with Merge LinesAbbreviation Remove TagBalance TagInward/Outward Split/Join TagGo to Next/Previous Toggle CommentEdit Point
    8. 8. (1) Expand Abbreviationdiv#page>div.logo+ul#navigation>li*5>a<div id="page">    <div class="logo"></div>    <ul id="navigation">        <li><a href=""></a></li>        <li><a href=""></a></li>        <li><a href=""></a></li>        <li><a href=""></a></li>        <li><a href=""></a></li>    </ul></div>
    9. 9. (2) Wrap with Abbreviation<div> <p|>Hello world</p></div> abbreviation “ div.wrap “<div> <div class=”wrap”> <p>Hello world</p> </div></div>
    10. 10. (2) Wrap with Abbreviation<div> <p>Hel|lo world</p></div> abbreviation “ div.wrap “<div> <p><div class=”wrap”>Hello world</div></p></div>
    11. 11. (2) Wrap with Abbreviation<div> About us Cat|alog Contacts</div> abbreviation “ ul#nav>li*>a “<div> <ul id=”nav”> <li><a href=””>About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div>
    12. 12. (3) Balance Tag Inward/Out ward<div> <ul id=”nav”> <li><a href=””>|About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div> inward?<div> <ul id=”nav”> <li><a href=””>About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div>
    13. 13. (3) Balance Tag Inward/Out ward<div> <ul id=”nav”> <li><a href=””>|About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div> out ward?<div> <ul id=”nav”> <li><a href=””>About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div>
    14. 14. (3) Balance Tag Inward/Out ward<div> <ul id=”nav”> |<li><a href=””>About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div> inward?<div> <ul id=”nav”> <li><a href=””>About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div>
    15. 15. (3) Balance Tag Inward/Out ward<div> <ul id=”nav”> |<li><a href=””>About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div> out ward?<div> <ul id=”nav”> <li><a href=””>About us</a></li> <li><a href=””>Catalog</a></li> <li><a href=””>Contacts</a></li> </ul></div>
    16. 16. (4) Go To Next/Previous Edit point<div> <div>|<span title=”|”>|</span>|</div> <p class=”title”>Lorem ipsum <a href=”|”>dolor</a> sit amet.</p> | <div> | </div> |</div>
    17. 17. (4) Go To Next/Previous Edit point Jump!<div> <div>|<span title=”|”>|</span>|</div> <p class=”title”>Lorem ipsum <a href=”|”>dolor</a> sit amet.</p> | <div> | </div> |</div>
    18. 18. (4) Go To Next/Previous Edit point Jump!<div> <div>|<span title=”|”>|</span>|</div> <p class=”title”>Lorem ipsum <a href=”|”>dolor</a> sit amet.</p> | <div> | </div> |</div>
    19. 19. (4) Go To Next/Previous Edit point Jump!<div> <div>|<span title=”|”>|</span>|</div> <p class=”title”>Lorem ipsum <a href=”|”>dolor</a> sit amet.</p> | <div> | </div> |</div>
    20. 20. (4) Go To Next/Previous Edit point Jump!<div> <div>|<span title=”|”>|</span>|</div> <p class=”title”>Lorem ipsum <a href=”|”>dolor</a> sit amet.</p> | <div> | </div> |</div>
    21. 21. (4) Go To Next/Previous Edit point<div> Jump! <div>|<span title=”|”>|</span>|</div> <p class=”title”>Lorem ipsum <a href=”|”>dolor</a> sit amet.</p> | <div> | </div> |</div>
    22. 22. (4) Go To Next/Previous Edit point<div> <div>|<span title=”|”>|</span>|</div> <p class=”title”>Lorem ipsum <a href=”|”>dolor</a> sit amet.</p> | <div> | </div> |</div>
    23. 23. (5) Update <img> Size<img src=”logo.jpg”><img src=”logo.jpg” width=”96” height=”96”>
    24. 24. (6) Merge Lines<div> <div class=”wrap”>| <p>Hello world</p> </div></div><div> <div class=”wrap”><p>Hello world</p></div></div>
    25. 25. (7) Remove Tag<div> <div class=”wrap”> <p|>Hello world</p> </div></div> remove<div> <div class=”wrap”> | </div></div> remove<div> |</div>
    26. 26. (8) Split/Join Tag<div> <div |class=”wrap”> <p>Hello world</p> </div></div> Join<div> <div |class=”wrap”/></div> Split<div> <div |class=”wrap”> </div></div>
    27. 27. (9) Toggle Comment<div> <div class=”wrap”> <p>Hel|lo world</p> </div></div><div> <div class=”wrap”> <!-- <p>Hel|lo world</p> --> </div></div>
    28. 28. (9) Toggle Comment<div> <div |class=”wrap”> <p>Hello world</p> </div></div><div> <!-- <div |class=”wrap”> <p>Hello world</p> </div> --></div>
    29. 29. demo
    30. 30. Let’s startHigh Speed Coding!
    31. 31. thank you http://twitter.com/kiyohara http://facebook.com/tomokazu.kiyohara

    ×