Навчіться бути дзен-майстром розмітки

Розмітка, або розмітка, стосується мов розмітки або позначення тегами, як вони є HTML і CSS, і всі ми знаємо, як боляче відкривати та закривати ярлики по черзі для створення веб-шаблону ...

Звичайно, для цього є рішення, одним із них є автозавершення з IDE Dreamweaver Mierda Блюгріфон дратує, якщо ти не купуєш у нього плагіни o Комодо редагувати дуже важко... справа в тому, що IDE або редактори коду, занадто завантажені опціями, часто в кінцевому підсумку заважають роботі немислимими способами; такий випадок з Dreamweaver це наповнює вас кодом сміття, що ви створюєте графічно, і є важким, дорогим і потворним. Блюгріфон це здебільшого дратує, бо це безкоштовно, безкоштовно, але половина опцій зарезервована для платних користувачів ... це не цікаво. І нарешті ми маємо Комодо-ред, який є цілком непоганим, потужним і повним можливостей, але є важким (100 Мб на холостому ходу), і його налаштування нудно.

Найкраща зброя веб-розробника або веб-дизайнера - це не IDE у стилі бойового танка з тисячею зброї зверху, це простий текстовий редактор, деякі плагіни та можливість друкувати як хвора людина ... до цього додати магію Дзен кодування і вони матимуть у пальцях найкращий інструмент для маркування, коли-небудь створений (принаймні для мене).

Але ... що за біса Дзен кодування?

Це просто, це спеціальний плагін, який служить випадаючим шаром абстракції для HTML та CSS, створених у Javascript і доступний багатьом найвідомішим видавцям (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, DreamweaverІ т.д.).

Ага, я досі не розумію біса, що ти кажеш ...

Тож я показую вам на простому прикладі; Пам’ятаєте, як випадає абстракція Ну, змініть його на усадку, уявіть, ви можете взяти рядок коду HTML / CSS, згорнутого в один рядок, і розгорнути його як завісу або скласти назад ... Хочете подивитися, як? Потрібно лише переконатися, що у вас є дві речі, щоб це працювало:

Мати Дзен кодування встановлений у вашому редакторі.
Знати команди та синтаксис для його використання.

Гаразд, пальці до коду:

html>head+body

Бачите цей рядок коду? Ну, це синтаксис для HTML, це просто:

Спочатку ви вводите ім'я тегу (html), потім ви вказуєте, які теги будуть знаходитися всередині цього тегу (>), а потім ім'я тегів, які входять всередину цього тегу (голова та тіло). Знак "+" означає, що голова і тіло - це дві різні мітки, і що жодна не міститься в одній, це все одно, що сказати «разом, але не змішані«... Тоді давайте подивимося, що цей рядок коду генерує при натисканні на магічні клавіші (у моєму випадку CTRL + E):

Власне, 4 рядки коду, складені в один, які чарівно з’являються при натисканні правильної комбінації клавіш ... і може бути набагато більше; наприклад:

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

Той самий синтаксис, але ми додаємо щось інше ... якщо ви знаєте якийсь CSS, ви зрозумієте, що ми додаємо ідентифікатор, класи та щось, чого ви, напевно, не знали; множники ... що це все!? Нахуй, ти мене бентежиш!

Заспокойтесь, це досить просто, ми сказали вище, що всередині тіла введіть тег «ul», нічого дивного, я пояснив це вище, тоді ми призначили ідентифікатор, що якщо ви знаєте CSS, ви зрозумієте, що вони ідентифікуються зі знаком '#', і всередині цього невпорядкованого списку (ul) ми додаємо п'ять міток з класом (класом) listilla, я коротко поясню це. Насправді це дуже просто, «#» означає, що це ідентифікатор, тоді «li.listilla» говорить, що ми повинні створити мітку «li» з класом «li class = listilla», а потім, ми говоримо «повторіть це останні п’ять разів«. Що дає нам в результаті:

Дванадцять рядків коду, написані в один рядок і значно менше часу time

І це також можна зробити за допомогою CSS, хоча я не буду продовжувати статтю, показуючи очевидне (нижче я передам вам цілий список чітів для Дзен кодування).

Я повинен наголосити, що це не працює, щоб створити мільйон сотень тисяч рядків в одному, о ні, це має обмеження та спосіб використовувати його. Якщо, наприклад, ми хочемо зробити щось подібне:

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

Що теоретично має дати нам це (подивіться на виділений рядок на останньому зображенні):

Це дасть нам таке:

Що свідчить про те, що з цим теж не можна робити магію; Пам’ятайте, що дзен-майстер коду повинен бути точним і швидким, а виконання неправильно зроблених дій вимагає швидкості та часу, отже, правильна техніка для написання швидко і з Дзен кодування буде це:

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

Ви розгортаєте і всередині тегу head:

title+meta

Що дасть вам правильний код:

Хоча Дзен кодування У ньому є ще багато речей, щоб показати вам, і, можливо, необхідність писати інший командний рядок всередині голови - не найкраще, тому ми використовуємо іншу команду, «розширити абревіатурою"у моєму випадку ctrl + alt + e що відкриє маленьку панель, де ми зможемо написати дзен-код і подивитися, як він з'являється в реальному часі. Будьте обережні, я не рекомендую писати все з цим, але писати всередині вже створених структур, тобто спочатку створіть великі структури, а потім ви деталізуєте в них цей параметр.

І всередині є безліч чудових команд Дзен кодування, річ у тому, що ви досліджуєте їх після того, як встановите їх і навчитеся ними користуватися; За допомогою цього плагіна вам не знадобиться автозаповнення або фрагменти для css або html, насправді, за цим ви зрозумієте, що ці параметри - це повна втрата часу в цих двох мовах програмування 😉

А для зацікавлених, ось офіційна таблиця шпаргалок Дзен кодування, Ви можете побачити це у форматі ODF o PDF справедливий ТУТ