zen coding (EMMET) and live templates

ZEN CODING


"Zen Coding is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist."


or in simpler terms: it allows HTML to be typed faster

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>


You want to write this BY YOURSELF?
Booooooooring! 


table>thead>(tr*3>th)+tbody(tr*3>td)
+ TAB 
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Voila!




IT'S NOT REALLY COMPLICATED

(or Zen Coding basics)




element



span


+  TAB


becomes


<span></span>

ELEMENT with class



span.title


+  TAB 


becomes


<span class="title"></span>

ELEMENT WITH ID and CLASS



span#awesome.title


+  TAB 


 becomes


<span id="awesome" class="title"></span>

ELEMENT WITH attributes



form[method=post]


+  TAB 


 becomes


<form method="post" action=""></form>

YOU CAN OMIT TAG NAME IF IT'S DIV



.content


+  TAB 


 becomes


<div class="content">



OK, THAT WAS BORING


NOW THE FUN PART

TWO ELEMENTS - PARENT AND CHILD



div#product>h1.title


+  TAB 


 becomes


<div id="product">  <h1 class="title"></h1></div>

TWO ELEMENTS - SIBLINGS



div.first+div.second


+  TAB 


 becomes


<div class="first"></div><div class="second"></div>

N ELEMENTS



li*4


+  TAB 


 becomes


<li></li><li></li>
<li></li>
<li></li>



STILL BORED


I WANT COMPLICATED STUFF

GROUPING STUFF TOGETHER



ul>(li.menu-item*3)>span.title


+  TAB 


 becomes


<ul>  <li class="menu-item"><span class="title"></span></li>
  <li class="menu-item"><span class="title"></span></li>
  <li class="menu-item"><span class="title"></span></li>
</ul>

GROUPING MORE STUFF TOGETHER


table>(thead>tr>th*3)+(tbody>tr*2>td*3)+(tfoot>tr>td[colspan=2]+td)


+  TAB 


 becomes


. . .


<table>
  <thead>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td colspan="2"></td>
    <td></td>
  </tr>
  </tfoot>
</table>

ITEM NUMBERING (with zero padding)



ol>li.item$$*3


+  TAB 


 becomes


<ol>
  <li class="item01"></li>
  <li class="item02"></li>
  <li class="item03"></li>
</ol>

IT EVEN HAS TEXT SUPPORT



a.back[href="/"]{Click here to continue}


+  TAB 


 becomes


<a class="back" href="/">Click here to continue</a>





AND THAT WAS IT

JUST KIDDING

(but only two more things LEFT)

FILTERS - ESCAPING HTML



ul>li*3|e


+  TAB 


 becomes


&lt;ul&gt;
&lt;li&gt;&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;

FILTERS - ADDITIONAL COMMENTS

(adds comments around elements with IDs and classes)


h1#title+.body|c


+  TAB 


 becomes


<!-- #title -->
<h1 id="title"></h1>
<!-- /#title --><!-- .body -->
<div class="body"></div>
<!-- /.body -->

RUBYMINE SUPPORT?

SURE, NO PROBLEM




BAD NEWS!

NO HAML SUPPORT (yet)



NOW IT'S TIME FOR

LIVE TEMPLATES

also known as code snippets

HOW TO CREATE A SNIPPET IN RUBYMINE

(this example is based on Twitter Bootstrap 
but we use something similar in Webshop anyway)

1. Select code in rubymine that you want to use as snippet in the future

2. go to tools > Save as live template


ABBREVIATION - short text that will be expanded into your snippet if you press tab (or other defined key)

works similarly to zen coding, but you define what happens next

variables in live templates


<div class="control-group">
  <label class="control-label" for="$ID$">$LABEL$</label>
  <div class="controls">
    <input type="text" id="$ID$" name="$ID$">
  </div>
</div>

Variable names are defined by you - they have no special meaning
(THERE ARE TWO EXCEPTIONS TO THAT RULE)

they are placeholders for your data

rubymine will jump between them automatically until you finish edition 

you can go to the next one using either enter or tab key


expressions


SPECIAL FUNCTIONS THAT ARE BEING RUN ON VARIABLE 

FULL DESCRIPTION OF BUILTIN EXPRESSIONS IS AVAILABLE ON



http://tnij.org/live_templates

SPECIAL VARIABLES


$END$

DEFINES THE POSITION OF CURSOR AFTER YOU FINISH FILLING YOUR TEMPLATE



example:

return $END$;


AFTER YOU EXPAND YOUR LIVE TEMPLATE,
CURSOR WILL BE RIGHT BEFORE SEMICOLON

SPECIAL VARIABLES


$SELECTION$

USED IN SURROUNDING LIVE TEMPLATES (WRAPPERS FOR SELECTED TEXT)



EXAMPLE:

<div class="wrapper">$SELECTION$</div>


AFTER YOU EXPAND YOUR LIVE TEMPLATE, 
TEXT THAT WAS SELECTED BEFORE EXPANSION WILL BE IN DIV TAG

zen coding and live templates

By Michał Matyas

Made with Slides.com

zen coding and live templates

  • 849

More from Michał Matyas