Consejo rápido Marcado aún más rápido con Sparkup

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.!


Prefiero un video tutorial?


Espera ... ¿Qué es la codificación Zen??

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
  • Objetivo ids y clases con el # y . selectores.
  • Utilizar el > Para filtrar hacia abajo el árbol y crear elementos infantiles..
  • Solicite múltiples elementos utilizando el * símbolo.
  • Utilizar el + símbolo para crear hermanos.

Margen de mejora

Desafortunadamente, hay algunos problemas que tengo con Zen Coding.

  • Que yo sepa, no hay una manera fácil de viajar de regreso por el árbol. Por ejemplo, si creo un ul> li * 4 selector, no conozco una manera de filtrar de nuevo a la ul, y luego crear un elemento hermano.
  • No hay una manera de asignar internalHTML a un elemento. ¿No sería genial si pudiera escribir, ul> li algún texto aquí?
  • No creo que haya una manera de 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.


Disponibilidad

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.


Subir al arbol

Con Sparkup, podemos viajar por el árbol..

La sintaxis
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!

La salida
  

Añadir texto a los elementos

Mediante el uso de llaves, podemos asignar valores, o internalHTML A los elementos que creamos. Esta característica era muy necesaria.

La sintaxis
ul> li> p Mi texto aquí
La salida
 
  • Mi texto aqui


Lengüeta Paradas

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?