Últimamente se ha dado un montón de discusión a los preprocesadores. Estas herramientas increíblemente útiles hacen que la codificación sea más fácil, más rápida y más fácil de mantener, pero ciertamente no son para todos. Ya sea que se haya subido o no al carro del preprocesador, debe darle un aspecto nuevo a un favorito antiguo que lo ayude a reducir dramáticamente su tiempo de codificación sin reinventar su flujo de trabajo con compiladores y otras complicaciones: la codificación Zen.
Con la codificación Zen, puede escribir un poco y generar mucho, al igual que con un preprocesador como Jade o Haml, solo que se expande instantáneamente en el HTML de vainilla que le encanta. Para aquellos que son nuevos en el concepto, les mostraré cómo funciona la codificación Zen y le mostraré algunos de mis trucos favoritos, luego terminaré con un breve tutorial sobre cómo poner en marcha la codificación Zen en Sublime Text 2.
Codificación Zen vs. Preprocesadores
La codificación Zen ha existido durante varios años, por lo que muchos de ustedes que leen esto piensan que esta es una escuela demasiado antigua como para merecer una discusión en 2012, pero estoy dispuesto a apostar a que muchos de los nuevos programadores nunca la han dado. un disparo.
Comenzaré diciendo lo que no es Zen Coding: no es un preprocesador en la misma línea que LESS, Sass, Stylus, Jade, Haml y similares. Aunque hay similitudes. Como todos estos, Zen Coding tiene una sintaxis única que tiene como objetivo simplificar el proceso de codificación de HTML y CSS.
Sin embargo, a diferencia de esas otras herramientas, Zen Coding no agrega ninguna característica especial como variables o combinaciones, ni requiere ningún archivo adicional que deba ejecutarse a través de un compilador. La codificación Zen genera HTML y CSS inmediatamente, nadie tiene ninguna forma de saber que lo usaste mirando tu código.
Quizás un paralelo más cercano sea TextExpander, ¿una aplicación que se expande? Breves fragmentos de texto en los más grandes. Básicamente, la codificación Zen es como un conjunto gigante de macros de expansión de texto predefinidas construidas específicamente para los codificadores HTML y CSS.
¿Como funciona?
Suficiente explicación, vamos a saltar y explorar la sintaxis real detrás de la codificación Zen. Si está familiarizado con HTML, CSS y el concepto de DOM, estoy seguro de que lo recogerá de inmediato.
Comencemos con el lado HTML porque creo que ahí es donde se encuentra casi todos los beneficios reales. Como nuestro primer ejemplo básico, digamos que queremos crear un div simple con un ID de contenedor, así es como lo haríamos:
Si está familiarizado con Haml, verá inmediatamente que se utilizan aquí algunas de las mismas convenciones. Primero escribí el nombre del elemento que quería, en este caso un div, luego usé la sintaxis de CSS para insertar un hashtag para indicar que me estoy refiriendo a una ID. Finalmente, seguí el hashtag con el texto real que quería asignar al ID: "contenedor".
Como puede ver, casi me corto la mitad de la escritura requerida para este fragmento de código en particular. No tuve que molestarme con ningún paréntesis o comillas de inicio y cierre, en lugar de eso, la estructura se ha reducido al mínimo.
Podemos usar este conocimiento como un punto de partida para otros fragmentos similares. Por ejemplo, digamos que quiero crear un párrafo con una clase dada. La sintaxis es bastante parecida, solo que uso un punto para indicar una clase (de nuevo, igual que CSS).
Encadenamiento, hermanos y niños.
Guardar un puñado de personajes es pintoresco, pero ¿qué pasa si eres un desarrollador serio que puede escribir todo eso mientras duermes en el lapso de un segundo? ¿Es esta cosa de codificación Zen realmente va a ser tan útil?
La respuesta es un sí rotundo.? De hecho, mientras más compleja sea la estructura de su código, ¡más útil le resultará a Zen Coding! El verdadero poder radica aquí en la capacidad de encadenar diferentes elementos.
Como puede ver, es fácil crear hijos y hermanos con la sintaxis de codificación Zen. Siguiendo con el tema CSS, los hermanos están conectados con el? +? símbolo y los niños usan el?> var13 ->? símbolo.
Esto abre un enorme ahorro de tiempo y esfuerzo. Juegue con esto por unos minutos y su cerebro comenzará a pensar rápidamente en la estructura de los documentos HTML de esta manera. Antes de que te des cuenta, estarás escribiendo secuencias largas y avanzadas que se expanden en trozos de código agradables y gruesos.
Zen CSS
La codificación Zen no es solo para HTML, también te ayuda a codificar CSS. Para ser honesto, no uso este aspecto de la codificación Zen simplemente porque la mayoría de los editores de texto decentes tienen tan buen autocompletado de CSS que dedico muy poco tiempo a escribir las propiedades de forma manual (también, el autocompletado de CSS tiende a competir con y anular la codificación Zen). El mismo argumento podría decirse de HTML, pero aquí encuentro que la codificación Zen es mucho más rápida que la ruta de autocompletar.
Sin embargo, esta es toda mi opinión personal, es posible que descubras que te encanta el lado CSS de la codificación Zen. Aquí hay un ejemplo de cómo funciona:
Como puede ver, el lado de CSS usualmente implica que usted escriba las iniciales de la propiedad, seguidas de dos puntos y las iniciales del valor para asignar a la propiedad. Como puede imaginar, hay un montón de propiedades CSS compatibles, por lo que la memorización aquí es mucho más complicada que con el lado HTML. Asegúrese de revisar las hojas de trucos.
Mis macros HTML favoritas
La hoja de trucos de Zen Coding puede ser bastante abrumadora, dado que hay mucho en ella, así que para ayudarte a enganchar desde el principio, aquí están algunas de mis macros favoritas.
HTML5 Starter
¿Quieres comenzar un nuevo documento HTML con una pizarra limpia? Simplemente escriba? Html: 5? y vas a tener un buen comienzo.
Hojas de estilo incluyen
Una vez que inicie ese nuevo archivo HTML, querrá tirar en una hoja de estilo. Afortunadamente, puedes hacerlo en un santiamén.
JavaScript incluido
Una más para la parte principal de su documento. Una vez que hayas trabajado en la hoja de estilo, es hora de lanzar el JavaScript.
Etiquetas de anclaje
Una de mis primeras preguntas con respecto a la codificación Zen fue, ¿cómo funcionan los enlaces? Haml es realmente bastante incómodo cuando se trata de cualquier tipo de elementos y atributos en línea, así que me preocupaba que esto pudiera ser lo mismo.
Sin embargo, en lugar de crear un esquema complicado para insertar el texto del enlace y la URL, simplemente escribe? A? y la estructura central del ancla se crea y se prepara para que la complete. Probablemente podría ser un poco mejor, ¡pero al menos es fácil de recordar!
Multiplicar elementos
La codificación Zen tiene un útil truco multiplicador que facilita la creación de un cierto número de elementos específicos. Una vez más, el proceso es muy intuitivo, solo use el? *? símbolo y el número del elemento que te gustaría crear.
Número de incremento
Otro truco realmente genial que puede realizar al multiplicar elementos es incluir un número creciente en la clase o el valor de ID. Para ello, implementas el? $? símbolo.
¿Cómo hago este trabajo?
La codificación Zen es compatible con toneladas de editores de texto diferentes y, en ocasiones, incluso está incorporada, como es el caso de Espresso. Asegúrese de revisar la página de proyecto de Google de codificación Zen para descargar los complementos para su editor.
Cómo instalar codificación Zen en texto sublime 2
Definitivamente he sido mordido por el error de texto sublime. Simplemente amo este editor de texto y no puedo obtener suficiente de su extensibilidad y flexibilidad. Una manera rápida y fácil de mejorar Sublime Text 2 es agregar soporte de codificación Zen.
Para hacer esto, deberás obtener la descarga gratuita de Sublime Package Control de Will Bond. Este es un increíble administrador de paquetes que hace que encontrar e instalar complementos de texto Sublime sea increíblemente fácil.
Una vez que tengas eso instalado, presiona Comando + Shift + P (Comando = Control para la gente de PC) para que aparezca la Paleta de comandos y escriba la palabra "instalar". Debería ver un elemento que dice 'Control de paquete: instalar paquete', haga clic en entrar en esa opción.
A partir de aquí, escribe? Codificación Zen? y deberías ver el paquete. Simplemente presione enter nuevamente y el paquete se instalará (reinicie si no tiene efecto). Comience un nuevo documento HTML, escriba una abreviatura, presione la pestaña y observe la magia (asegúrese de que su sintaxis esté configurada en HTML o no funcionará).
El texto sublime ya es un editor fantástico y usarlo junto con la codificación Zen solo me hace sonreír. Es una combinación asesina que no querrá perderse.
¿Utilizas codificación Zen?
Para ser honesto, realmente extrañé el barco de Zen Coding cuando fue popular hace un par de años. Siempre me pareció que la integración de Espresso era un poco torpe y como ese era mi editor preferido, nunca la exploré más. Ahora que estoy en Sublime Text, me encanta la rapidez con la que puedo usar la codificación Zen para eliminar una estructura HTML compleja sin la molestia de las etiquetas, los retornos y demás.
¿Qué piensas? ¿Usas codificación Zen para tu HTML? ¿Prefieres usar un preprocesador para hacer algo similar? ¿Qué tal con tu CSS? ¿Crees que la codificación Zen es útil para escribir CSS o estás bien con la función de autocompletar?