Aprèn a ser un mestre Zen de l'markup

El markup o marcat, es refereix als llenguatges de marques o etiquetatge com ho són HTML i CSS, I tots sabem el dolorós que és tot això de caminar obrint i tancant etiquetes una per una per poder crear alguna plantilla web ...

És clar que hi ha solucions per això, una d'elles és l'autocompletat amb IDE 's com Dreamweaver merda Grifó blau enutjós si no li compres connectors o Komodo edit bé pesat... la qüestió és que, els IDE 'so editors de codi massa carregats d'opcions acaben moltes vegades entorpint la feina de maneres inimaginables; tal és el cas de Dreamweaver que t'omple de codi escombraries el que generis gràficament i és pesat, car i lleig. Grifó blau és mes que tot enutjós perquè és lliure, gratuït, però la meitat de les opcions estan reservades als usuaris pagaments ... això no és divertit. I finalment tenim a Komodo-edit, Que és bastant bo, potent i ple d'opcions però és pesat (100MB en iddle) i configurar-és empipador.

La millor arma d'un desenvolupador web o d'un dissenyador web no són els IDE 'sa l'estil tanc de guerra amb mil armes a sobre, és un senzill editor de text, alguns plugins i la capacitat d'teclejar com un malalt ... a això agregunele la màgia de Zen Coding i tindran en els seus dits la millor eina per al marcat mai creada (a l'almenys per a mi).

Però ... Què diables és el Zen Coding?

Simple, és un plugin especial que serveix com a capa d'abstracció desplegable per a HTML i CSS creat en Javascript i dispobible per a molts dels editors més famosos (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, DreamweaverEtc.).

Ajá, segueixo sense entendre ni Pepina idea del que dius ...

Llavors t'ho mostro amb un exemple simple; Recordes el d'abstracció desplegable? Bé, canvia-ho per contracció, imagina que pots prendre una línia de codi HTML / CSS contret en una línia i desplegar-com una cortina o tornar-lo a plegar ... Vols veure com? Només has d'assegurar de tenir dues coses perquè funcioni:

Tenir Zen Coding instal·lat en el teu editor.
Conèixer els comandaments i la sintaxi per usar-lo.

Bé, dits a el codi:

html>head+body

Veuen aquesta línia de codi? doncs aquesta és la sintaxi per a HTML, és simple:

Primer poses el nom de l'etiqueta (html) després li indiques que etiquetes estaran dins d'aquesta etiqueta (>) i després el nom de les etiquetes que van dins d'aquesta etiqueta (head i body). El signe de '+' indica que head i body són dues etiquetes diferents i que cap està continguda dins de l'altra, és com dir-li «juntes però tampoc gaire«... llavors, veiem que ens genera aquesta línia de codi a l'pressionar les tecles màgiques (en el meu cas CTRL + E):

Exacte, 4 línies de codi fetes en una sola, que apareixen màgicament a l'utilitzar la combinació de tecles correcta ... i poden ser moltes més; per exemple:

html>head+body>ul#lista_ordenada>li.listilla*5

Mateixa sintaxi, però li afegim una mica més ... si coneixes una mica de CSS t'adonaràs que estem agregant un ID, classes i, una cosa que segur no coneixies; multiplicadors ... ¿Quina és tot això !? ¡Fotre em confons!

Calma, això és bastant senzill, a l'anterior li vam dir que dins de body ingressi una etiqueta «ul», res estrany, això ho vaig explicar a dalt, després, li assignem un ID, que si saps CSS entendràs que aquests s'identifiquen amb el signe '#', i dins d'aquesta llista desordenada (ul) afegim XNUMX etiquetes amb la classe (class) espavilats, els explico breument això. De fet és molt simple, '#' denota que és un ID, després 'li.listilla' diu que cal crear una etiqueta «li» amb la classe espavilats «li class = espavilats» i després, li diem «repeteix això últim cinc vegades«. El que ens dóna com a resultat:

Dotze línies de codi escrites en una sola línia i en molt menys temps 😉

I això es pot fer també amb CSS, encara que no alargaré l'article mostrant que és obvi (baix els passaré una llista sencera de cheats per Zen Coding).

He de destacar que això no funciona per fer chorrocientasmil línies en una sola, oh no, això té un límit i una manera d'usar-se. Si per exemple volem fer alguna cosa com això:

html>head>title+meta+body>ul#lista_ordenada>li.listilla*5

Què, en teoria hauria de donar-nos això (fixar-se en la línia ressaltada de la darrera imatge):

Ens va donar això:

El que demostra que tampoc es pot fer màgia amb això; recordin que un mestre Zen de el codi ha de ser precís i ràpid, i fer coses mal fetes treu velocitat i temps, per la qual cosa, la tècnica correcta per escriure ràpid i amb Zen Coding seria aquesta:

html>head>body>ul#lista_ordenada>li.listilla*5

Expandeixes i dins de l'etiqueta head:

title+meta

La qual cosa et donaria el codi correcte:

Tot i que el Zen Coding té moltes més coses per mostrar-te i potser haver d'escriure dins head altra línia d'ordres no sigui el millor, per la qual cosa fem servir un altre ordre, «expand with abreviation»En el meu cas ctrl + alt + i que ens obrirà una petita barra a on podrem anar creant programes Zen i veure com apareix en temps real. Ull, no recomano escriure tot amb això sinó escriure dins de les estructures ja creades, o sigui, crea primer les estructures grans i després vas detallant dins d'elles amb aquesta opció.

I hi ha una multitud d'ordres súper interessants dins de l' Zen Coding, La cosa és que els investiguis una vegada que els instal i els aprenguis a fer servir; amb aquest connector no et caldrà autocompletat ni snippets per css o html, de fet, amb això et donaràs compte que aquestes opcions són una total pèrdua de temps dins d'aquests dos llenguatges de programació 😉

I per als interessats, aquí els deixo la CheatSheet oficial de l' Zen Coding, Poden veure-la en format ODF o PDF just AQUÍ