Научите да будете зен мајстор маркупа

Ознака или маркуп односи се на језике за означавање или означавање какви јесу ХТМЛ и ЦСС, и сви знамо колико је све ово болно отварати и затварати налепнице једну по једну за стварање веб шаблона ...

Наравно да постоје решења за ово, једно од њих је аутоматско довршавање са ИДЕ-овима Дреамвеавер миерда Блуегриффон досадно ако од њега не купите додатке o Комодо едит веома тешко... поента је у томе што ИДЕ-ови или уређивачи кода преоптерећени опцијама често на крају ометају посао на незамисливе начине; такав је случај са Дреамвеавер који вас пуни кодом за смеће оно што графички генеришете и тежак је, скуп и ружан. Блуегриффон углавном је досадно јер је бесплатно, бесплатно, али половина опција резервисана је за кориснике који плаћају ... то није забавно. И коначно имамо Комодо-уреди, који је прилично добар, моћан и пун могућности, али је тежак (100 МБ у празном ходу), а подешавање је заморно.

Најбоље оружје веб програмера или веб дизајнера нису ИДЕ у стилу ратног тенка са хиљаду оружја на врху, то је једноставан уређивач текста, неки додаци и могућност куцања попут болесне особе ... томе додаје магија Зен Цодинг и у прстима ће имати најбољи алат за обележавање који је икада створен (барем за мене).

Али ... шта је додјавола Зен Цодинг?

Једноставно, то је посебан додатак који служи као падајући слој апстракције за ХТМЛ и ЦСС креиране у Јавасцрипт и доступан многим најпознатијим издавачима (нотепад ++, Комодо-едит, Гедит, Кате, Блуефисх, Геани, Дреамвеавер, Итд).

Аха, још увек не разумем проклету идеју шта говориш ...

Показаћу вам једноставним примером; Сећате ли се падајуће апстракције? Па, промените га у скупљање, замислите да можете узети ред ХТМЛ / ЦСС кода сажет у један ред и расклопити га попут завесе или преклопити ... Желите ли да видите како? Само морате бити сигурни да имате две ствари да бисте то успели:

Имати Зен Цодинг инсталиран у вашем уређивачу.
Знајте наредбе и синтаксу да бисте их користили.

Ок, прсти до кода:

html>head+body

Видиш ту линију кода? Па то је синтакса за ХТМЛ, она је једноставна:

Прво ставите име ознаке (хтмл), затим назначите које ће ознаке бити унутар те ознаке (>), а затим име ознака које иду унутар те ознаке (глава и тело). Знак '+' означава да су глава и тело две различите ознаке и да ниједна није садржана у другој, то је као да кажете «заједно али не и мешовито«... Затим, да видимо шта тај ред кода генерише притиском на магичне тастере (у мом случају ЦТРЛ + Е.):

Тачно, 4 линије кода направљене у једну, које се магично појављују када притиснете тачну комбинацију тастера ... а може бити и много више; на пример:

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

Иста синтакса, али додајемо и нешто друго ... ако знате неки ЦСС схватићете да додајемо ИД, класе и нешто што сигурно нисте знали; мултипликатори ... шта је све ово!? Јеби ме што ме збуњујеш!

Смири се, ово је прилично једноставно, горе смо рекли да у тело уносимо ознаку «ул», ништа чудно, објаснио сам ово горе, онда додељујемо ИД, да ако знате ЦСС разумећете да су они идентификовани знаком '#', а унутар те неуређене листе (ул) додајемо пет етикета са листом класе (класе), укратко ово објашњавам. У ствари је врло једноставно, „#“ означава да је то ИД, онда „ли.листилла“ каже да морамо створити ознаку „ли“ са класом „ли класа = листилла“, а затим, кажемо „поновите то последњих пет пута«. Шта нам даје као резултат:

Дванаест редова кода написано у једном реду и за много мање времена 😉

А то се може урадити и са ЦСС-ом, мада нећу продужавати чланак показујући очигледно (у наставку ћу вам додати читав списак варалица за Зен Цодинг).

Морам да нагласим да ово не успева да се створи милион стотина хиљада линија у једном, о не, ово има ограничење и начин да се користи. Ако на пример желимо да урадимо нешто попут овога:

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

Шта би у теорији требало да нам да ово (погледајте истакнуту линију на последњој слици):

Даће нам ово:

Што показује да ни са овим не можете да правите магију; Имајте на уму да Зен мајстор кода мора бити прецизан и брз, а чињење погрешно урађених ствари одузима брзину и време, стога исправна техника писања брзо и са Зен Цодинг би било ово:

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

Проширујете и унутар ознаке главе:

title+meta

Који би вам дао тачан код:

Иако Зен Цодинг Има још много ствари да вам покаже, а можда и писање друге командне линије у главу није најбоље, па користимо другу команду, «проширити скраћеницом" у мом случају цтрл + алт + е која ће отворити малу траку у коју можемо да напишемо Зен код и видимо како се он појављује у реалном времену. Будите опрезни, не препоручујем да све пишете са овим, већ да пишете у већ створеним структурама, то јест, прво створите велике структуре, а затим ћете детаљно детаљно описати ову опцију.

А у систему постоји мноштво супер цоол команди Зен Цодинг, ствар је у томе што их истражујете након што их инсталирате и научите да их користите; Са овим додатком неће вам требати аутоматско довршавање или исечци за цсс или хтмл, заправо, са овим ћете схватити да су ове опције тотално губљење времена у ова два програмска језика 😉

А за оне који су заинтересовани, ево службеног ЦхеатСхеет-а Зен Цодинг, можете га видети у формату ОДФ o пдф поштено ОВДЕ