Naučite biti zen majstor markupa

Oznaka ili markup odnosi se na jezike za označavanje ili označavanje kakvi jesu HTML i CSS, i svi znamo koliko je bolno otvarati i zatvarati naljepnice jednu po jednu za stvaranje web predloška ...

Naravno, za to postoje rješenja, jedno od njih je automatsko dovršavanje s IDE-ima Dreamweaver sranje bluegriffon dosadno ako ne kupujete dodatke od njega o Komodo uredi jako tesko... poanta je u tome što IDE-ovi ili uređivači koda preopterećeni opcijama često na kraju ometaju posao na nezamislive načine; takav je slučaj Dreamweaver koji vas puni kodom za smeće ono što grafički generirate i težak je, skup i ružan. bluegriffon uglavnom je dosadno jer je besplatno, besplatno, ali polovina opcija rezervirana je za plaćene korisnike ... to nije zabavno. I konačno jesmo Komodo-uredi, koji je prilično dobar, moćan i pun mogućnosti, ali je težak (100 MB u praznom hodu) i postavljanje je zamorno.

Najbolje oružje web programera ili web dizajnera nisu IDE-ovi u stilu ratnog tenka s tisuću oružja na vrhu, to je jednostavan uređivač teksta, neki dodaci i mogućnost kucanja poput bolesne osobe ... tome dodaje magija Zen kodiranje i u prstima će imati najbolji alat za označavanje ikad stvoren (bar za mene).

Ali ... koji je to vrag Zen kodiranje?

Jednostavno, to je poseban dodatak koji služi kao padajući sloj apstrakcije za HTML i CSS kreirane u Javascript i dostupan mnogim najpoznatijim izdavačima (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, itd.).

Aha, još uvijek ne razumijem prokletu ideju šta govoriš ...

Pokazaću vam na jednostavnom primjeru; Sjećate se padajuće apstrakcije? Pa, promijenite ga u skupljanje, zamislite da možete uzeti red HTML / CSS koda sažet u jedan redak i razviti ga poput zavjese ili preklopiti natrag ... Želite li vidjeti kako? Samo morate biti sigurni da imate dvije stvari da bi to uspjelo:

tener Zen kodiranje instaliran u vašem uređivaču.
Znajte naredbe i sintaksu da biste ih koristili.

Ok, prsti na kodu:

html>head+body

Vidite tu liniju koda? Pa to je sintaksa za HTML, ona je jednostavna:

Prvo stavite ime oznake (html), zatim naznačite koje će oznake biti unutar te oznake (>), a zatim ime oznaka koje idu unutar te oznake (glava i tijelo). Znak '+' označava da su glava i tijelo dvije različite oznake i da nijedna nije sadržana u drugoj, to je kao da kažete «zajedno, ali ne i miješano«... Onda, hajde da vidimo šta ta linija koda generira pritiskom na čarobne tastere (u mom slučaju CTRL + E):

Tačno, 4 retka koda pretvorena u jedan, koji se magično pojavljuju kada pritisnete ispravnu kombinaciju tastera ... a može ih biti i mnogo više; na primjer:

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

Ista sintaksa, ali dodajemo još nešto ... ako znate nešto o CSS-u shvatit ćete da dodajemo ID, klase i nešto što sigurno niste znali; multiplikatori ... šta je sve ovo!? Jebi me, zbunjuješ me!

Smiri se, ovo je vrlo jednostavno, gore smo rekli da unutar tijela unesite oznaku «ul», ništa čudno, objasnio sam ovo gore, zatim dodijeljujemo ID, da ako znate CSS shvatit ćete da su oni identificirani sa znakom '#', a unutar te nesređene liste (ul) dodajemo pet oznaka s listom klase (klase), ukratko to objašnjavam. Zapravo je vrlo jednostavno, '#' označava da je to ID, onda 'li.listilla' kaže da moramo stvoriti oznaku "li" s klasom smarty "li class = smarty", a zatim kažemo "ponovite to posljednjih pet puta«. Šta nam daje kao rezultat:

Dvanaest linija koda napisano u jednom retku i za mnogo manje vremena 😉

A to se može učiniti i sa CSS-om, iako neću produžiti članak pokazujući očigledno (u nastavku ću vam poslati čitav spisak varalica za Zen kodiranje).

Moram naglasiti da ovo ne uspijeva napraviti milijardu stotina hiljada redaka u jednom, oh ne, ovo ima ograničenje i način na koji se koristi Ako na primjer želimo učiniti nešto poput ovoga:

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

Šta bi nam u teoriji trebalo dati ovo (pogledajte istaknutu liniju na posljednjoj slici):

To će nam dati ovo:

Što pokazuje da ni s ovim ne možete raditi magiju; Imajte na umu da Zen majstor koda mora biti precizan i brz, a činjenje pogrešno urađenih stvari oduzima brzinu i vrijeme, stoga ispravna tehnika pisanja brzo i sa Zen kodiranje bi bilo ovo:

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

Proširite i unutar oznake glave:

title+meta

Što bi vam dalo tačan kod:

Iako Zen kodiranje Ima još mnogo stvari da vam pokaže, a možda i pisanje druge naredbene linije u glavu nije najbolje, pa koristimo drugu naredbu, «proširiti skraćenicom" u mom slučaju ctrl + alt + e to će otvoriti malu traku u koju možemo napisati Zen kod i vidjeti kako se on pojavljuje u stvarnom vremenu. Budite oprezni, ne preporučujem da sve pišete s ovim, već da pišete u već stvorenim strukturama, tj. Prvo stvorite velike strukture, a zatim ćete detaljno detaljno opisati ovu opciju.

A u sustavu postoji mnoštvo super cool naredbi Zen kodiranje, stvar je u tome što ih istražujete nakon što ih instalirate i naučite ih koristiti; S ovim dodatkom neće vam trebati automatsko dovršavanje ili isječci za css ili html, zapravo, s tim ćete shvatiti da su ove opcije totalno gubljenje vremena unutar ova dva programska jezika

A za zainteresirane, evo službenog CheatSheet-a Zen kodiranje, možete ga vidjeti u formatu ODF o PDF fer OVDE