Lær at være en Zen-mester i markup

Markeringen eller markeringen henviser til markering eller tagging af sprog, som de er HTML og CSS, og vi ved alle, hvor smertefuldt alt dette er at åbne og lukke etiketter en efter en for at oprette en webskabelon ...

Selvfølgelig er der løsninger til dette, en af ​​dem er autofuldførelse med IDE-lignende Dreamweaver mierda bluegriffon irriterende, hvis du ikke køber plugins fra ham o Komodo redigering meget tung... pointen er, at IDE'er eller kodeditorer, der er for fyldt med muligheder, ofte ender med at arbejde på utænkelige måder; sådan er tilfældet med Dreamweaver der fylder dig med affaldskode, hvad du genererer grafisk og er tung, dyr og grim. bluegriffon det er for det meste irriterende, fordi det er gratis, gratis, men halvdelen af ​​mulighederne er forbeholdt betalte brugere ... det er ikke sjovt. Og endelig har vi det Komodo-redigering, hvilket er ret godt, kraftfuldt og fuld af muligheder, men det er tungt (100 MB i larm), og det er kedeligt at opsætte det.

Det bedste våben hos en webudvikler eller webdesigner er ikke IDE'erne i stil med krigstank med tusind våben på toppen, det er en simpel teksteditor, nogle plugins og evnen til at skrive som en syg person ... til det tilføj magien ved Zen-kodning og de vil have i deres fingre det bedste værktøj til mærkning, der nogensinde er oprettet (i det mindste for mig).

Men ... hvad fanden er det? Zen-kodning?

Enkelt, det er et specielt plugin, der fungerer som et drop-down abstraktionslag til HTML og CSS oprettet i Javascript og tilgængelig for mange af de mest berømte udgivere (notesblok ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, Etc.).

Aha, jeg forstår stadig ikke en forbandet idé, hvad du siger ...

Så jeg viser dig med et simpelt eksempel; Husk drop-down abstraktion ting? Nå, skift det til krympning, forestil dig at du kan tage en linje med HTML / CSS-kode, der er foldet sammen i en linje og folde den ud som et gardin eller folde den tilbage ... Vil du se hvordan? Du skal bare sørge for at have to ting for at få det til at fungere:

Har Zen-kodning installeret i din editor.
Kend kommandoerne og syntaksen for at bruge den.

Okay, fingre til koden:

html>head+body

Ser du den kodelinje? Nå det er syntaksen for HTML, det er simpelt:

Først sætter du navnet på koden (html), derefter angiver du, hvilke koder der skal være inde i koden (>), og derefter navnet på de koder, der kommer inden i koden (hoved og krop). '+' Tegnet angiver, at hoved og krop er to forskellige etiketter, og at ingen af ​​dem er indeholdt i den anden, det er som at sige «sammen men ikke blandet«... Lad os så se, hvad den kodelinje genererer, når vi trykker på de magiske taster (i mit tilfælde CTRL + E.):

Præcis 4 linjer kode lavet til en, der magisk vises, når du trykker på den rigtige tastekombination ... og der kan være mange flere; for eksempel:

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

Samme syntaks, men vi tilføjer noget andet ... hvis du ved noget om CSS, vil du indse, at vi tilføjer et ID, klasser og noget, som du helt sikkert ikke vidste; multiplikatorer ... hvad er alt dette!? Fuck du forvirrer mig!

Slap af, dette er ret simpelt, vi fortalte ovenstående, at inden i kroppen indtastes et tag «ul», ikke noget underligt, jeg forklarede dette ovenfor, så tildeler vi et ID, at hvis du kender CSS, vil du forstå, at disse er identificeret med tegnet '#', og inden i den uordnede liste (ul) tilføjer vi fem etiketter med klasse (klasse) listilla, jeg forklarer kort dette. Faktisk er det meget simpelt, '#' angiver, at det er et ID, så siger 'li.listilla', at vi skal oprette en etiket «li» med klasselistenilla «li klasse = listilla» og derefter siger vi «gentag det sidste fem gange«. Hvad giver os som et resultat:

Tolv linjer kode skrevet i en enkelt linje og på meget kortere tid 😉

Og det kan også gøres med CSS, selvom jeg ikke vil forlænge artiklen ved at vise det åbenlyse (nedenfor vil jeg give dig en hel liste over snyderi til Zen-kodning).

Jeg er nødt til at understrege, at dette ikke virker til at lave en zillion hundrede tusind linjer i en, åh nej, dette har en grænse og en måde at blive brugt på. Hvis vi for eksempel vil gøre noget som dette:

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

Hvad i teorien skal give os dette (se på den fremhævede linje i det sidste billede):

Det vil give os dette:

Hvilket viser, at du heller ikke kan trylle med dette; Husk, at en Zen-mester i koden skal være præcis og hurtig, og at gøre ting forkert gjort tager hastighed og tid, derfor er den korrekte teknik til at skrive hurtigt og med Zen-kodning ville være dette:

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

Du udvider og inde i hovedmærket:

title+meta

Hvilket ville give dig den rigtige kode:

Selvom Zen-kodning Det har mange flere ting at vise dig, og måske er det ikke det bedste at skulle skrive en anden kommandolinje inde i hovedet, så vi bruger en anden kommando, «udvid med forkortelse" i mit tilfælde ctrl + alt + e som åbner en lille bjælke, hvor vi kan skrive Zen-kode og se, hvordan den ser ud i realtid. Vær forsigtig, jeg anbefaler ikke at skrive alt sammen med dette, men at skrive inden for de strukturer, der allerede er oprettet, jeg mener, først oprette de store strukturer, og derefter vil du detaljer i dem med denne mulighed.

Og der er et væld af super seje kommandoer inden for Zen-kodning, sagen er, at du undersøger dem, når du først har installeret dem og lærer at bruge dem; Med dette plugin har du ikke brug for autofuldførelse eller uddrag til css eller html, faktisk med dette vil du indse, at disse muligheder er et totalt spild af tid inden for disse to programmeringssprog 😉

Og for de interesserede er her det officielle CheatSheet af Zen-kodning, kan du se det i format ODF o PDF Justo HER