sábado, 1 de septiembre de 2012

Una Brujeria llamada Sublime Text



Para un mortal como yo, ver trabajar a Sublime Text 2 y darse cuenta de lo maravilloso que puede ser escribir varias lineas de codigo  con solo una linea de texto yo lo calificaria como brujeria =).

Jugando un poco pude generar un esquelo de una pagina web con esta simple linea de texto
html:5>div.row-fluid>h1#logo{titulo}+div.row>h2{titulo 2}+ul#menu_principal>li*5>a[href="link.html"]{seccion $}
a lo que sublime text me lo convirtio en

<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<title>Titulo Pagina</title>
</head>
<body>
<div class="row-fluid">
<h1 id="logo">titulo</h1>
<div class="row">
<h2>titulo 2</h2>
<ul id="menu_principal">
<li><a href="link.html">seccion 1</a></li>
<li><a href="link.html">seccion 2</a></li>
<li><a href="link.html">seccion 3</a></li>
<li><a href="link.html">seccion 4</a></li>
<li><a href="link.html">seccion 5</a></li>
</ul>
</div>
</div>
</body>

</html>

Cualquiera que escribe codigo sabe que esto es lo mejor que pueda existir,  pero realmente quien hace la magia es Zen Coding por que tambien es posible llevar esas funcionalidades a casi cualquier editor de codigo HTML, por ejemplo yo instale una extension para Dreamweaver que uno se puede descargar desde la sección de descargas de Zen Coding, al instalarlo en Dreamweaver es perfectamente igual hacerlo funcionar pero no existe una edición multiple como en Sublime Text 2.

Otra de las cosas mas maravillosas que encuentro en sublime text son los snippets que podemos integrar   , pero la cosa no para ahi si por ejemplo combinas Sublime Text 2 + Snippets + Bootstrap puedes armar un sitio web practicamente en minutos que por lo regular te tomaria un par de horas. para eso hay que descargar Sublime-twitter-bootstrap-snippets que son varios (no todos) los componentes de bootstrap.

Para quien no esta familiarizado con Bootstrap tendria que armar un sitio utilizando toda la documentacion, pero con Sublime text con solo escribir tbgrid:4 obtendriamos una grilla de 4 columnas

<div class="row">
<div class="span3">Column 1</div>
<div class="span3">Column 2</div>
<div class="span3">Column 3</div>
</div>
Otro ejemplo es utilizando el widget de acordion de bootstap bastaria escribir tbaccordion para generar el siguiente codigo

 <div class="accordion" id="accordion"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> Collapsible Group Item #2 </a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> Collapsible Group Item #3 </a> </div> <div id="collapseThree" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div>
 Esto es apenas de un dia de uso de Sublime Text 2 espero seguir encontrando nuevas funcionalidades de esta maravillosa aplicación y en unos dias hare un screencast esperando sea de utilidad.