Научете се да бъдете Дзен майстор на маркиране

Маркирането или маркирането се отнася до езици за маркиране или маркиране такива, каквито са HTML и CSS, и всички знаем колко болезнено е всичко това да отваряме и затваряме етикети един по един, за да създадем уеб шаблон ...

Разбира се, има решения за това, едно от тях е автоматично довършване с IDE Dreamweaver mierda Блугрифон досадно, ако не купувате приставки от него o Комодо редактиране много тежко... Въпросът е, че IDE или редакторите на кодове, прекалено натоварени с опции, често в крайна сметка пречат на работата по невъобразими начини; такъв е случаят с Dreamweaver който ви изпълва с код за боклук, това, което генерирате графично и е тежък, скъп и грозен. Блугрифон досадно е най-вече, защото е безплатно, безплатно, но половината от опциите са запазени за платени потребители ... това не е забавно. И накрая имаме Комодо-редактиране, който е доста добър, мощен и пълен с опции, но е тежък (100mb на празен ход) и настройването му е досадно.

Най-доброто оръжие на уеб разработчик или уеб дизайнер не е IDE в стила на военния резервоар с хиляда оръжия отгоре, това е прост текстов редактор, някои приставки и способността да пишете като болен човек ... към това добавете магията на Zen кодиране и те ще имат в пръстите си най-добрия инструмент за маркиране, създаван някога (поне за мен).

Но ... какво по дяволите е това Zen кодиране?

Просто, това е специален плъгин, който служи като падащ слой за абстракция за HTML и CSS, създаден в Javascript и достъпна за много от най-известните издатели (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, DreamweaverИ др.)

Аха, все още не разбирам дяволска идея какво казваш ...

Затова ви показвам с прост пример; Помните ли падащото абстракционно нещо? Е, променете го на свиване, представете си, че можете да вземете ред HTML / CSS код, свит в един ред и да го разгънете като завеса или да го сгънете обратно ... Искате ли да видите как? Трябва само да се уверите, че имате две неща, за да работи:

Имам Zen кодиране инсталиран във вашия редактор.
Познайте командите и синтаксиса, за да го използвате.

Добре, пръсти към кода:

html>head+body

Виждате ли този ред код? Ами това е синтаксисът за HTML, той е прост:

Първо поставяте името на маркера (html), след това посочвате кои маркери ще бъдат вътре в този етикет (>) и след това името на маркерите, които влизат в него (глава и тяло). Знакът „+“ показва, че главата и тялото са два различни етикета и че нито един от тях не се съдържа в другия, все едно да кажете «заедно, но не смесени«... Тогава нека видим какво генерира този ред код при натискане на магическите клавиши (в моя случай CTRL + E):

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

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

Същият синтаксис, но ние добавяме нещо друго ... ако знаете някакъв CSS, ще разберете, че добавяме идентификатор, класове и нещо, което със сигурност не сте знаели; умножители ... какво е всичко това?? Майната ми, че ме объркваш!

Споко, това е съвсем просто, казахме по-горе, че вътре в тялото въведете таг «ul», нищо странно, обясних това по-горе, след това назначихме идентификатор, че ако знаете CSS, ще разберете, че те се идентифицират с знакът "#" и вътре в този неподреден списък (ul) добавяме пет етикета с класа (клас) listilla, обяснявам накратко това. Всъщност е много просто, „#“ означава, че е ID, тогава „li.listilla“ казва, че трябва да създадем етикет «li» с класа «li class = listilla» и след това казваме «повторете това последно пет пъти«. Какво ни дава като резултат:

Дванадесет реда код, написани в един ред и за много по-малко време 😉

И това може да се направи и с CSS, въпреки че няма да удължавам статията, като показвам очевидното (по-долу ще ви предам цял списък с мами за Zen кодиране).

Трябва да подчертая, че това не работи, за да се направят милион сто хиляди линии в един, о, не, това има ограничение и начин да го използвам. Ако например искаме да направим нещо подобно:

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

Какво на теория трябва да ни даде това (вижте маркирания ред в последното изображение):

Ще ни даде това:

Което показва, че и с това не можете да правите магия; Не забравяйте, че Дзен майсторът на кода трябва да бъде точен и бърз, а правенето на грешно направени неща отнема скорост и време, следователно правилната техника за писане бързо и с Zen кодиране би било това:

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

Разгъвате и вътре в маркера на главата:

title+meta

Което ще ви даде правилния код:

Въпреки че Zen кодиране Има много повече неща, които да ви покаже и може би трябва да пишете друг команден ред в главата не е най-доброто, затова използваме друга команда, «разширяване със съкращение" в моя случай ctrl + alt + e това ще отвори малка лента, където можем да напишем Zen код и да видим как се появява в реално време. Внимавайте, не препоръчвам да пишете всичко с това, но пишете в рамките на вече създадени структури, искам да кажа, първо създайте големите структури и след това ще детайлизирате в тях с тази опция.

И има множество супер готини команди в Zen кодиране, работата е в това, че ги разследвате, след като ги инсталирате и се научите да ги използвате; С този плъгин няма да имате нужда от автоматично довършване или фрагменти за css или html, всъщност с това ще разберете, че тези опции са пълна загуба на време в рамките на тези два езика за програмиране 😉

А за заинтересованите, ето официалният CheatSheet на Zen кодиране, можете да го видите във формат ODF o PDF прав ТУК