“Emmet” la taquigrafía de los Front-End y Diseñadores Web
Quien maneja CSS todos los días es casi imposible que no conozca, o ya sea usuario de alguno de los multiples pre-procesadores que existen en el mercado para ahorrarnos varios tecleos. En Javascript también existen cosas similares, como lo son frameworks o coffescript (y similares), y para maquetar HTML rápidamente también existe HALM o Jade.
El problema con HTML, es que muchas veces el código está mezclado con lenguaje de programación back-end y/o códigos especiales de plantillas para plataformas MVC (por ejemplo WordPress). Por lo que usar uno de los pre-procesadores puede causar más problemas que beneficios. La buena noticia es que existe “Emmet”, que nos permite tener la velocidad de escritura de un front-end, pero dando como resultado un HTML estándar.
La manera de usa Emmet es simple, escribimos en una sola linea de código con la estructura de que queremos, y después con solo pulsar un “tab”, la estructura se transformara en código HTML normal.
Ejemplo, la siguiente linea en el dialecto de emmet:
html>head>title{Hola Mundo}^body>section#articles>div.post>p{Hola}
Se transforma en el siguiente HTML
<html> <head> <title>Hola Mundo</title> </head> <body> <section id="articles"> <div class="post"> <p>Hola</p> </div> </section> </body> </html>
Emmet es gratuito, solo requieres instalarlo como un plug-in más en tu editor preferido. Es compatible con los IDEs más populares, dígase: Sublime Text, Notepad++, Eclipse, Coda, Atom y un largo etcétera que podrás ver directamente en su sitio web.
Enlace: Emmet | Imagen: Matt Biddulph.
