La mayoría de nosotros ya estamos familiarizados con la popular utilidad de codificación Zen. Para aquellos que no lo son, convierte el proceso de creación de marcas complejas en un selector similar a CSS. Esto le puede ahorrar una cantidad extraordinaria de tiempo; Sin embargo, tiene algunos inconvenientes. Por suerte, otra herramienta, Sparkup, inspirada en la codificación Zen, soluciona estos problemas y aumenta su productividad aún más.!
Considere el siguiente marcado:
Este es un marcado bastante común que creará para cada nuevo sitio web. Suponiendo que no lo hayas guardado como un fragmento, se puede volver a crear fácilmente en segundos, con la codificación Zen..
#contenedor> nav> ul> li * 4
ids
y clases
con el #
y .
selectores. >
Para filtrar hacia abajo el árbol y crear elementos infantiles.. *
símbolo. +
símbolo para crear hermanos. Desafortunadamente, hay algunos problemas que tengo con Zen Coding.
ul> li * 4
selector, no conozco una manera de filtrar de nuevo a la ul
, y luego crear un elemento hermano. internalHTML
a un elemento. ¿No sería genial si pudiera escribir, ul> li algún texto aquí
? lengüeta
entre paradas, después de expandir. Afortunadamente, una utilidad, inspirada en la codificación Zen, corrige cada uno de los problemas mencionados anteriormente. Es compatible con versiones posteriores, lo que significa que todo su conocimiento sobre codificación Zen se transferirá sin problemas.
En el momento de escribir este artículo, Sparkup está disponible para TextMate, Vim y para uso general, a través de la línea de comandos. Es bastante trivial de instalar. Para obtener más información, consulte el screencast anterior.
Con Sparkup, podemos viajar por el árbol..
ul> li * 3> a < < + #contents
Observe cómo estamos usando el <
para viajar de vuelta por el árbol. De la etiqueta de anclaje, uno <
nos llevará al elemento de la lista, y otro nos llevará de vuelta a la lista desordenada, momento en el cual podemos crear un hermano con el +
símbolo. Muy útil!
Mediante el uso de llaves, podemos asignar valores, o internalHTML
A los elementos que creamos. Esta característica era muy necesaria.
ul> li> p Mi texto aquí
Mi texto aqui
Con Sparkup, podemos lengüeta sobre las paradas necesarias, para que podamos insertar manualmente nuestros atributos / valores lo más rápido posible. Con MacVim, como se muestra en el screencast, puedes usar Control + N
y Control + P
para cambiar entre las paradas.
De esta manera, en lugar de tener que recurrir a numerosas pulsaciones de teclas direccionales, un solo comando lo llevará a donde necesita estar. Consulte el screencast para un ejemplo.
¿Entonces, qué piensas? Vas a hacer el cambio?