Alamin na maging isang Zen master ng markup

Ang markup, o markup, ay tumutukoy sa markup o pag-tag ng mga wika tulad ng mga ito HTML at CSS, at alam nating lahat kung gaano kasakit ang lahat ng ito upang buksan at isara ang mga label nang isa-isa upang lumikha ng isang template ng web ...

Siyempre may mga solusyon para dito, ang isa sa mga ito ay ang autocompliment na may kagaya ng IDE Dreamweaver mierda bluegriffon nakakainis kung hindi ka bibili ng mga plugin sa kanya o Komodo i-edit sobrang bigat... ang punto ay ang mga editor ng IDE o code na masyadong puno ng mga pagpipilian na madalas na nagtatapos sa paghadlang sa trabaho sa hindi maiisip na mga paraan; ganyan ang kaso ng Dreamweaver pinupunan ka ng basura code kung ano ang nabubuo mo nang grapiko at mabigat, mahal at pangit. bluegriffon karamihan ay nakakainis dahil libre, libre, ngunit ang kalahati ng mga pagpipilian ay nakalaan para sa mga bayad na gumagamit ... hindi masaya iyon. At sa wakas mayroon tayo komodo-edit, na kung saan ay mahusay, malakas at puno ng mga pagpipilian ngunit ito ay mabigat (100mb iddle) at pagse-set up ito ay nakakapagod.

Ang pinakamahusay na sandata ng isang developer ng web o taga-disenyo ng web ay hindi ang IDE sa istilo ng tanke ng giyera na may isang libong sandata sa itaas, ito ay isang simpleng text editor, ilang mga plugin at ang kakayahang mag-type tulad ng isang taong may sakit ... doon idagdag ang mahika ng zen coding at magkakaroon sila sa kanilang mga daliri ng pinakamahusay na tool para sa pagmamarka na nilikha (kahit papaano para sa akin).

Ngunit ... kung ano ang impyerno zen coding?

Simple, ito ay isang espesyal na plugin na nagsisilbing isang drop-down na layer ng abstraction para sa HTML at CSS na nilikha sa Javascript at magagamit sa marami sa mga pinakatanyag na publisher (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, atbp.).

Aha, hindi ko pa rin maintindihan ang isang sumpain na ideya kung ano ang sinasabi mo ...

Kaya't ipinapakita ko sa iyo ng isang simpleng halimbawa; Naaalala ang drop-down na bagay na abstraction? Kaya, palitan ito sa pag-urong, isiping maaari kang kumuha ng isang linya ng HTML / CSS code na gumuho sa isang linya at ibukad ito tulad ng isang kurtina o tiklupin ito pabalik ... Nais mong makita kung paano? Tiyakin mo lamang na mayroon kang dalawang bagay upang maisagawa ito:

Mayroon zen coding naka-install sa iyong editor.
Alamin ang mga utos at syntax upang magamit ito.

Okay, mga daliri sa code:

html>head+body

Tingnan ang linya ng code na iyon? Sa gayon iyon ang syntax para sa HTML, simple lamang ito:

Una mong inilagay ang pangalan ng tag (html) pagkatapos ay ipahiwatig mo kung aling mga tag ang nasa loob ng tag na iyon (>) at pagkatapos ang pangalan ng mga tag na pumapasok sa loob ng tag na iyon (ulo at katawan). Ang tanda na '+' ay nagpapahiwatig na ang ulo at katawan ay dalawang magkakaibang label at na ang alinman ay hindi nakapaloob sa loob ng isa pa, tulad ng pagsasabi «magkasama ngunit hindi halo-halong«… Kung gayon, tingnan natin kung ano ang nabubuo ng linya ng code na iyon kapag pinindot ang mga magic key (sa aking kaso CTRL + E):

Eksakto, 4 na linya ng code na ginawang isa, na mahiwagang lilitaw kapag pinindot mo ang tamang kombinasyon ng key ... at maaaring marami pa; Halimbawa:

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

Parehong syntax, ngunit nagdagdag kami ng iba pa ... kung alam mo ang ilang CSS malalaman mo na nagdaragdag kami ng isang ID, mga klase at, isang bagay na tiyak na hindi mo alam; multiplier ... ano ang lahat ng ito!? Fuck malito mo ako!

Huminahon, ito ay medyo simple, sinabi namin sa itaas na sa loob ng katawan ipasok ang isang tag «ul», walang kakaiba, ipinaliwanag ko ito sa itaas, kung gayon, nagtatalaga kami ng isang ID, na kung alam mo ang CSS mauunawaan mo na ang mga ito ay nakilala kasama ng palatandaan '#', at sa loob ng hindi naayos na listahan (ul) nagdagdag kami ng limang mga label sa klase ng klase (klase) na listilla, maikling ipinaliwanag ko ito. Sa katunayan ito ay napaka-simple, ang '#' ay nangangahulugang ito ay isang ID, pagkatapos ay sinabi ng 'li.listilla' na kailangan naming lumikha ng isang label na «li» kasama ang klase ng listilla «li class = listilla» at pagkatapos, sinasabi namin «ulitin ang huling limang beses«. Ano ang nagbibigay sa amin bilang isang resulta:

Labindalawang linya ng code na nakasulat sa isang solong linya at sa mas kaunting oras 😉

At magagawa rin iyon sa CSS, kahit na hindi ko pahabain ang artikulo sa pamamagitan ng pagpapakita ng halata (sa ibaba ay ipapasa ko sa iyo ang isang buong listahan ng mga cheats para sa zen coding).

Kailangan kong bigyang-diin na hindi ito gumagana upang makagawa ng isang milyong daang libong mga linya sa isa, oh hindi, may hangganan ito at isang paraan upang magamit ito. Kung halimbawa nais naming gumawa ng isang bagay tulad nito:

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

Ano sa teorya ang dapat bigyan sa atin nito (tingnan ang naka-highlight na linya sa huling imahe):

Ibibigay ito sa atin:

Alin ang nagpapakita na hindi ka rin makakagawa ng mahika dito; Tandaan na ang isang master ng Zen ng code ay dapat na tumpak at mabilis, at ang paggawa ng mga maling bagay na nagawa ay nangangailangan ng oras at bilis, samakatuwid, ang tamang pamamaraan upang sumulat nang mabilis at may zen coding ay ito:

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

Palawakin mo at sa loob ng head tag:

title+meta

Alin ang magbibigay sa iyo ng tamang code:

Kahit na ang mga zen coding Marami pa itong mga bagay na maipapakita sa iyo at marahil ang pagsulat ng isa pang linya ng utos sa loob ng ulo ay hindi pinakamahusay, kaya gumagamit kami ng isa pang utos, «palawakin na may pagpapaikli"sa kaso ko ctrl + alt + e magbubukas iyon ng isang maliit na bar kung saan maaari naming isulat ang Zen code at makita kung paano ito lilitaw sa real time. Mag-ingat, hindi ko inirerekumenda ang pagsusulat ng lahat ng ito kasama nito ngunit ang pagsusulat sa loob ng mga istrukturang nalikha na, iyon ay, lumikha muna ng malalaking istraktura at pagkatapos ay idetalye mo sa loob ng mga ito ang pagpipiliang ito.

At mayroong isang bilang ng mga sobrang cool na mga utos sa loob ng zen coding, ang bagay ay iyong siyasatin ang mga ito sa sandaling nai-install mo ang mga ito at natutunan na gamitin ang mga ito; Sa plugin na ito hindi mo kakailanganin ang autocompletion o mga snippet para sa CSS o html, sa katunayan, sa ito ay mapagtanto mo na ang mga pagpipiliang ito ay isang kabuuang pag-aaksaya ng oras sa loob ng dalawang wikang ito sa pag-program

At para sa mga interesado, narito ang opisyal na CheatSheet ng zen coding, makikita mo ito sa format ODF o PDF makatarungan DITO