Me entere de esta tecnología a mas de un año de su salida, aun así no todos lo conocen, emmet, única en su especie, amenos que este mal informado, pero es la única herramienta de este tipo que conozco.
Para ser preciso, emmet, con tan solo escribir unas palabras claves, puede generar lineas de código que ocupamos normalmente como lo es la estructura semántica de html5, sabemos que todas las paginas tienen un encabezado, un cuerpo, una pie de pagina, que necesita tener cierto lenguaje y cierto "charset" en el caso de latinoamerica es "UTF-8", y esto es muy tedioso de escribir una, y otra, y otra vez. Con emmet esto.. SE ACABO!
the essential toolkit for web-developers
Con ese subtitulo aparece en su pagina principal, y bien lo describe. Todos los que desarrollamos en Html o en CSS deberíamos conocer y tener ya instalado Emmet ya que es una herramienta que aunque no existia hace poco se volverá cada vez mas esencial, como el control remoto, antes de su existencia la TV funcionaba manualmente, con unas perillas que a mas de uno, actualmente, les parecerán muy extrañas, ahora hay Pantallas que no cuentan siquiera con un botón de encendido pues con el control remoto no hay necesidad siquiera de pararnos a prenderla, claro, hay que ver también lo que fomenta este tipo de tecnologías, la pereza principalmente.
Al final de este post sabremos:
- Como es que funciona.
- Que tanto podemos hacer con él.
- Como instalarlo.
COMO ES QUE EMMET FUNCIONA?
Es muy simple, escribimos una palabra clave y presionamos Tab (la tecla con las flechas apuntando a lados opuestos) y por arte de magia emmet generará las lineas de código que tanto odiamos teclear.
Para mostrarles mejor como funciona:
Paso 1: tecleamos la palabra clave"html:5" (en este caso) y presionar TAB
Paso 2: Asombrarnos con lo efectivo que es emmet
Como ven es extremadamente fácil de usar, después de un tiempo de dedicación para aprender las abreviaciones, esta herramienta puede llegar a ser un monstruo de 8 tentáculos y garras a la hora de teclear código.
QUE TANTO PODEMOS HACER CON EMMET?
Existen abreviaciones para nuestro código.
Primero nos encontramos con las Abreviaciones de HTML donde podemos ver desde abreviaciones de sintaxis hasta de elementos y de Lorem ipsum, aquí están todos los ejemplos :
Abreviaciones de sintaxis (aquí podemos ver mas afondo todas las posibilidades de sinaxis: Link):
exactamente como el primero pero aparte podemos hacer mas cosas por ejemplo para crear una lista escribimos algo como div>ul>li y con esa linea podemos producir
<div>
<ul>
<li></li>
</ul>
</div>
exactamente como el primero pero aparte podemos hacer mas cosas por ejemplo para crear una lista escribimos algo como div>ul>li y con esa linea podemos producir
<div>
<ul>
<li></li>
</ul>
</div>
otra cosa que me gustaría compartirles de aquí es el generado de Lorem Ipsum,con el simple hecho de escribir tendremos p*4>lorem 4 párrafos de texto generado totalmente GRATIS sin el costoso "buscar en la web" (entiéndase el sarcasmo por favor) y bueno esto en HTML.
Ahora le toca al CSS solo que es un poco mas complejo, así que solo dejare el link para que puedan leerlo ustedes mismos Emmet, abreviaciones CSS.
Pero eso no es todo, sino que también tiene una serie de acciones y configuraciones, algunas con su grado de dificultad pero otras demasiado sencillas, así como unas útiles y algunas otras que aun no encuentro el uso adecuado ni el momento de usarlo. También hay que mencionar que las abreviaciones son configurables y podemos agregar las nuestras propias.
ME LLEVO 10, NO LOS EMPAQUE, COMO SE INSTALA!?
Antes de que algo mas pase les dejare el link de la pagina, no vaya a ser que en este preciso momento un asteroide o un misil militar venga y vuele mi casa en pedasitos, en ese caso yo ya les abría puesto el hipervinculo hacia la pagina oficial de emmet:
Antes de instalarlo debemos comprobar que emmet tenga soporte para nuestro editor de código favorito, en mi caso y el que recomiendo es sublime text, pero bueno, entonces quedamos en que entrabamos a la pagina
Podemos leer y husmear cuanto se nos de la gana, pero
al terminar entraos en el área de Download.
Aquí vemos todos los editores con los que tiene soporte, confirmamos que este,
le damos click y nos dará instrucciones de instalación personalizada de cada editor
Si tienen alguna duda sobre la instalación de alguno de ellos no duden en escribir abajo del post, todas las preguntas son respondidas.
No hay comentarios.:
Publicar un comentario