Zen coding15min

Zen Coding
@15min

2012 .03.30 : Stu dy me eti ng @ clw it inc .

What is Zen-Coding

Zen Coding is an editor plugin for high-speed
HTML, XML, XSL (or any other structured code
format) coding and editing.
( http://code.google.com/p/zen-coding/ )

Aptana TextMate Notepad++ Emacs

Eclipse Coda Dreamweaver Vim

and more ...

Uh...

Yes, I know.
It is CSS style
intelligent
code snippets.

http://www.flickr.com/photos/lentzstudios/3884839779/

How to SpeedUp
Expand Abbreviation
i.e. snippets

How to SpeedUp
Expand Abbreviation Update <img> Size

Wrap with Merge Lines
Abbreviation
Remove Tag
Balance Tag
Inward/Outward Split/Join Tag

Go to Next/Previous Toggle Comment
Edit Point

(1) Expand Abbreviation
div#page>div.logo+ul#navigation>li*5>a

<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
</ul>
</div>

(2) Wrap with Abbreviation
<div>
<p|>Hello world</p>
</div>
abbreviation
“ div.wrap “

<div>
<div class=”wrap”>
<p>Hello world</p>
</div>
</div>

<div>
<p>Hel|lo world</p>
</div>
abbreviation
“ div.wrap “

<div>
<p><div class=”wrap”>Hello world</div></p>
</div>

<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>

(3) Balance Tag
Inward/Out ward
<div>
<ul id=”nav”>
<li><a href=””>|About us</a></li>
</ul>
</div>
inward?

<div>
<ul id=”nav”>
</ul>
</div>

(3) Balance Tag
Inward/Out ward
<div>
<ul id=”nav”>
<li><a href=””>|About us</a></li>
</ul>
</div>
out ward?

<div>
<ul id=”nav”>
</ul>
</div>

(3) Balance Tag
Inward/Out ward
<div>
<ul id=”nav”>
|<li><a href=””>About us</a></li>
</ul>
</div>
inward?

<div>
<ul id=”nav”>
</ul>
</div>

(3) Balance Tag
Inward/Out ward
<div>
<ul id=”nav”>
|<li><a href=””>About us</a></li>
</ul>
</div>
out ward?

<div>
<ul id=”nav”>
</ul>
</div>

(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>

Edit point
Jump!
<div>
|
<div>
|
</div>
|
</div>

Edit point
<div> Jump!
|
<div>
|
</div>
|
</div>

(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 world</p></div>
</div>

(7) Remove Tag
<div>
<p|>Hello world</p>
</div>
</div> remove
<div>
|
</div>
</div>
remove

<div>
|
</div>

(8) Split/Join Tag
<div>
<div |class=”wrap”>
<p>Hello world</p>
</div>
</div>
Join
<div>
<div |class=”wrap”/>
</div>
Split
<div>
</div>
</div>

(9) Toggle Comment
<div>
<p>Hel|lo world</p>
</div>
</div>

<div>

</div>
</div>

(9) Toggle Comment
<div>
<p>Hello world</p>
</div>
</div>

<div>

</div>

Let’s start
High Speed Coding!

thank you

http://twitter.com/kiyohara
http://facebook.com/tomokazu.kiyohara

Zen coding15min

More Related Content

More from Tomokazu Kiyohara (8)

Zen coding15min

Editor's Notes