Leer een zenmeester te zijn in markup

De markup, of markup, verwijst naar markup- of tagging-talen zoals ze zijn HTML en CSS, en we weten allemaal hoe pijnlijk het is om labels een voor een te openen en te sluiten om een ​​websjabloon te maken ...

Hier zijn natuurlijk oplossingen voor, een daarvan is automatisch aanvullen met IDE's zoals Dreamweaver mierda blauwe griffioen vervelend als je geen plug-ins van hem koopt o Komodo bewerken heel zwaar... het punt is dat IDE's of code-editors die te vol zitten met opties, het werk vaak op onvoorstelbare manieren hinderen; dat is het geval van Dreamweaver die je vult met afvalcode wat je grafisch genereert en zwaar, duur en lelijk is. blauwe griffioen het is vooral vervelend omdat het gratis en gratis is, maar de helft van de opties is gereserveerd voor betalende gebruikers ... dat is niet leuk. En tot slot hebben we Komodo-bewerken, wat redelijk goed, krachtig en vol opties is, maar zwaar is (100mb in iddle) en het opzetten ervan vervelend is.

Het beste wapen van een webontwikkelaar of webdesigner zijn niet de IDE's in de stijl van een oorlogstank met duizend wapens erop, het is een eenvoudige teksteditor, enkele plug-ins en de mogelijkheid om te typen als een zieke persoon ... voeg de magie toe van Zen-codering en ze zullen het beste hulpmiddel voor het markeren in hun vingers hebben dat ooit is gemaakt (tenminste voor mij).

Maar ... wat is het verdomme Zen-codering?

Simpel, het is een speciale plug-in die dient als een drop-down abstractielaag voor HTML en CSS gemaakt in Javascript en beschikbaar voor veel van de beroemdste uitgevers (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, DreamweaverEnz.).

Aha, ik begrijp nog steeds geen verdomd idee wat je zegt ...

Dus ik laat je zien met een eenvoudig voorbeeld; Herinner je je het abstractie-dingetje nog? Nou, verander het in krimp, stel je voor dat je een regel HTML / CSS-code samengevouwen tot één regel kunt nemen en het als een gordijn openvouwen of terugvouwen ... Wil je zien hoe? Je moet er gewoon voor zorgen dat je twee dingen hebt om het te laten werken:

Hebben Zen-codering geïnstalleerd in uw editor.
Ken de opdrachten en syntaxis om het te gebruiken.

Oké, vingers naar de code:

html>head+body

Zie je die regel code? Dat is de syntaxis voor HTML, het is simpel:

Eerst zet je de naam van de tag (html), dan geef je aan welke tags er in die tag komen (>) en dan de naam van de tags die in die tag gaan (head en body). Het '+' teken geeft aan dat hoofd en lichaam twee verschillende labels zijn en dat geen van beide in de andere zit, het is alsof je zegt «samen maar niet gemengd«... Laten we dan eens kijken wat die regel code genereert als we op de magische toetsen drukken (in mijn geval CTRL + E):

Precies, 4 regels code in één, die op magische wijze verschijnen als je op de juiste toetsencombinatie drukt… en er kunnen er nog veel meer zijn; bijvoorbeeld:

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

Dezelfde syntaxis, maar we voegen iets anders toe ... als je wat CSS kent, zul je je realiseren dat we een ID, klassen en iets toevoegen dat je zeker niet wist; vermenigvuldigers ... wat is dit allemaal!? Fuck je brengt me in de war!

Rustig maar, dit is vrij eenvoudig, we vertelden het bovenstaande dat je in het lichaam een ​​tag «ul» invoert, niets vreemds, ik heb dit hierboven uitgelegd, dan kennen we een ID toe, dat als je CSS kent, je zult begrijpen dat deze worden geïdentificeerd met het teken '#', en binnen die ongeordende lijst (ul) voegen we vijf labels toe met de class (class) listilla, ik leg dit kort uit. In feite is het heel simpel, '#' geeft aan dat het een ID is, dan zegt 'li.listilla' dat we een label «li» moeten maken met de klasse listilla «li class = listilla» en dan zeggen we «herhaal dat de laatste vijf keer«. Wat ons als resultaat geeft:

Twaalf regels code geschreven op één regel en in veel minder tijd 😉

En dat kan ook met CSS, al zal ik het artikel niet verlengen door het voor de hand liggende (hieronder geef ik je een hele lijst met cheats voor Zen-codering).

Ik moet benadrukken dat dit niet werkt om een ​​miljoen honderdduizend regels in één te maken, oh nee, dit heeft een limiet en een manier om het te gebruiken. Als we bijvoorbeeld zoiets willen doen:

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

Wat zou ons dit in theorie moeten opleveren (kijk naar de gemarkeerde regel in de laatste afbeelding):

Het geeft ons dit:

Wat laat zien dat je hier ook geen magie mee kunt doen; Onthoud dat een zenmeester van de code nauwkeurig en snel moet zijn, en dingen verkeerd doen kost snelheid en tijd, daarom de juiste techniek om snel en met Zen-codering zou dit zijn:

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

Je vouwt uit en binnen de head-tag:

title+meta

Wat je de juiste code zou geven:

Hoewel de Zen-codering Het heeft nog veel meer dingen om je te laten zien en misschien is het niet de beste manier om een ​​andere opdrachtregel in head te schrijven, dus gebruiken we een ander commando, «uitbreiden met afkorting" in mijn geval ctrl + alt + e dat zal een kleine balk openen waar we Zen-code kunnen schrijven en zien hoe deze in realtime verschijnt. Wees voorzichtig, ik raad niet aan om alles hiermee te schrijven, maar te schrijven binnen de reeds gemaakte structuren, dat wil zeggen: maak eerst de grote structuren en daarna ga je ze met deze optie gedetailleerd maken.

En er zijn een groot aantal supercoole opdrachten binnen de Zen-codering, het punt is dat je ze onderzoekt als je ze eenmaal hebt geïnstalleerd en ze leert gebruiken; Met deze plug-in heb je geen automatische aanvulling of fragmenten voor css of html nodig, hiermee zul je je realiseren dat deze opties een totale verspilling van tijd zijn binnen deze twee programmeertalen 😉

En voor geïnteresseerden, hier is de officiële CheatSheet van de Zen-codering, je kunt het zien in ODF o PDF justo HIER