Naučte sa byť zenovým majstrom v označovaní

Označenie alebo označenie sa týka označovacích alebo označovacích jazykov v takom stave, v akom sú HTML a CSS, a všetci vieme, aké bolestivé je otvárať a zatvárať štítky jeden po druhom a vytvárať tak webovú šablónu ...

Samozrejme, existujú riešenia, jedným z nich je automatické dopĺňanie pomocou IDE Dreamweaver Mierda bluegriffon nepríjemné, ak si od neho nekúpite pluginy o Komodo upraviť veľmi ťažký... ide o to, že IDE alebo editori kódov príliš nabití voľbami často nakoniec bránia práci nepredstaviteľnými spôsobmi; taký je prípad Dreamweaver ktorý vás naplní odpadkovým kódom, čo generujete graficky, a je to ťažké, drahé a škaredé. bluegriffon je to väčšinou nepríjemné, pretože je to zadarmo, zadarmo, ale polovica možností je vyhradená pre platených používateľov ... to nie je sranda. A konečne máme Komodo-upraviť, čo je celkom dobré, výkonné a plné možností, ale je ťažké (100 MB v nečinnosti) a jeho nastavenie je zdĺhavé.

Najlepšou zbraňou webového vývojára alebo webdizajnéra nie sú IDE v štýle vojnového tanku s tisíckami zbraní navrchu, je to jednoduchý textový editor, niektoré doplnky a schopnosť písať ako chorý človek ... k tomu pridať kúzlo Zenové kódovanie a budú mať v prstoch najlepší nástroj na označovanie, aký bol kedy vytvorený (aspoň pre mňa).

Ale ... čo do pekla je Zenové kódovanie?

Jednoduché, je to špeciálny doplnok, ktorý slúži ako rozbaľovacia abstrakčná vrstva pre HTML a CSS vytvorené v Javascript a je k dispozícii mnohým z najslávnejších vydavateľov (poznámkový blok ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, DreamweaverAtď).

Aha, stále nechápem sakra predstavu, čo hovoríš ...

Ukážem vám teda jednoduchý príklad; Pamätáte si rozbaľovaciu abstrakciu? No, zmeňte to na zmenšenie, predstavte si, že môžete vziať riadok kódu HTML / CSS zbaleného do jedného riadku a rozvinúť ho ako oponu alebo ho zložiť dozadu ... Chcete vidieť, ako? Ak chcete, aby to fungovalo, musíte sa ubezpečiť, že máte dve veci:

Mať Zenové kódovanie nainštalovaný vo vašom editore.
Poznať príkazy a syntax, ktoré ich majú používať.

Dobre, prsty na kóde:

html>head+body

Vidíte ten riadok kódu? To je syntax pre HTML, je to jednoduché:

Najskôr vložíte názov značky (html), potom určíte, ktoré značky budú vo vnútri tejto značky (>), a potom názov značiek, ktoré budú vo vnútri tejto značky (hlava a telo). Znamienko „+“ označuje, že hlava a telo sú dva odlišné štítky a že ani jeden nie je obsiahnutý v druhom, je to ako povedať «spolu ale nemiesane«... Potom sa pozrime, čo tento riadok kódu vygeneruje pri stlačení magických kláves (v mojom prípade CTRL + E):

Presne, 4 riadky kódu do jedného, ​​ktoré sa magicky objavia, keď stlačíte správnu kombináciu klávesov ... a môže to byť oveľa viac; napríklad:

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

Rovnaká syntax, ale pridávame niečo iné ... ak poznáte nejaké CSS, uvedomíte si, že pridávame ID, triedy a niečo, čo ste určite nevedeli; multiplikátory ... čo to všetko je? Seru na to, mýliš ma!

Upokojte sa, je to dosť jednoduché, povedali sme vyššie uvedenému, že do tela zadajte značku «ul», nič zvláštne, vysvetlil som to vyššie, pridelili sme ID, takže ak poznáte CSS, pochopíte, že sú identifikované pomocou znak „#“ a do tohto neusporiadaného zoznamu (ul) pridáme päť štítkov s triedou (triedou) listilla, stručne to vysvetlím. V skutočnosti je to veľmi jednoduché, znak „#“ označuje, že ide o ID, potom súbor „li.listilla“ hovorí, že musíme vytvoriť štítok «li» s triedou «li class = listilla» a potom, «opakujte to posledných päťkrát«. Čo nám dáva výsledok:

Dvanásť riadkov kódu napísaných v jednom riadku a za oveľa kratší čas 😉

A to sa dá urobiť aj pomocou CSS, aj keď nebudem článok predlžovať ukazovaním zrejmého (nižšie vám odovzdám celý zoznam cheatov pre Zenové kódovanie).

Musím zdôrazniť, že to nefunguje, aby sa urobilo stotisíc stotisíc riadkov v jednom, ach nie, toto má svoj limit a spôsob, ako ho využiť. Ak napríklad chceme urobiť niečo také:

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

Čo by nám to teoreticky malo dať (pozrite sa na zvýraznený riadok na poslednom obrázku):

Poskytne nám toto:

Čo ukazuje, že ani s týmto sa nedá čarovať; Pamätajte, že zenový majster kódu musí byť presný a rýchly a vykonávanie nesprávne vykonaných vecí vám zaberá rýchlosť a čas, a preto je správna technika rýchleho a rýchleho zápisu Zenové kódovanie bolo by toto:

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

Rozbalíte a vnútri hlavovej značky:

title+meta

Čo by vám dalo správny kód:

Hoci Zenové kódovanie Je tu veľa ďalších vecí, ktoré vám môžeme ukázať, a možno to, že musíte napísať ďalší príkazový riadok do hlavy, nie je najlepšie, takže použijeme ďalší príkaz, «rozšíriť skratkou" v mojom prípade ctrl + alt + e čím sa otvorí malá lišta, kde môžeme napísať zenový kód a zistiť, ako sa javí v reálnom čase. Buďte opatrní, neodporúčam s tým písať všetko, ale písať v rámci štruktúr, ktoré už boli vytvorené, to znamená, že najskôr vytvorte veľké štruktúry a potom v nich pomocou tejto možnosti podrobne rozpíšete.

A v systéme je množstvo super cool príkazov Zenové kódovanie, vec spočíva v tom, že ich po inštalácii a naučení sa ich používania preskúmate; S týmto pluginom nebudete potrebovať automatické dopĺňanie alebo úryvky pre css alebo html, vlastne si uvedomíte, že tieto možnosti sú v týchto dvoch programovacích jazykoch úplnou stratou času 😉

A pre záujemcov je tu oficiálny CheatSheet spoločnosti Zenové kódovanie, môžete to vidieť vo formáte ODF o PDF doprava TU