Learn to be a Zen master of markup

The markup, or markup, refers to markup or tagging languages ​​as they are HTML and CSS, and we all know how painful all this is to open and close labels one by one to create a web template ...

Of course there are solutions for this, one of them is autocompletion with IDE's like Dreamweaver mierda bluegriffon annoying if you don't buy plugins from him o komodo edit very heavy… The point is that IDE's or code editors too loaded with options often end up hindering the work in unimaginable ways; such is the case of Dreamweaver that fills you with garbage code what you generate graphically and is heavy, expensive and ugly. bluegriffon it's mostly annoying because it's free, free, but half of the options are reserved for paid users ... that's not fun. And finally we have komodo-edit, which is quite good, powerful and full of options but it is heavy (100mb in iddle) and setting it up is tedious.

The best weapon of a web developer or web designer is not the IDE's in the style of war tank with a thousand weapons on top, it is a simple text editor, some plugins and the ability to type like a sick person ... to that add the magic of zen coding and they will have in their fingers the best tool for marking ever created (at least for me).

But ... what the hell is the zen coding?

Simple, it's a special plugin that serves as a drop-down abstraction layer for HTML and CSS created in javascript and available to many of the most famous publishers (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, Etc.).

Aha, I still don't understand a damn idea what you're saying ...

So I show you with a simple example; Remember the drop-down abstraction thing? Well, change it to shrinkage, imagine you can take a line of HTML / CSS code collapsed into one line and unfold it like a curtain or fold it back ... Want to see how? You just have to make sure you have two things to make it work:

Having zen coding installed in your editor.
Know the commands and syntax to use it.

Okay, fingers to the code:

html>head+body

See that line of code? Well that's the syntax for HTML, it's simple:

First you put the name of the tag (html) then you indicate which tags are going to be inside that tag (>) and then the name of the tags that go inside that tag (head and body). The '+' sign indicates that head and body are two different labels and that neither is contained within the other, it's like saying «together but not mixed«… Then, let's see what that line of code generates when pressing the magic keys (in my case CTRL + E):

Exactly, 4 lines of code made into one, that magically appear when you press the correct key combination… and there can be many more; for example:

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

Same syntax, but we add something else… if you know something about CSS you will realize that we are adding an ID, classes and, something that you surely did not know; multipliers… what's all this !? Fuck you confuse me!

Calm down, this is quite simple, we told the above that inside body enter a tag «ul», nothing strange, I explained this above, then, we assign an ID, that if you know CSS you will understand that these are identified with the sign '#', and inside that unordered list (ul) we add five labels with the class (class) listilla, I briefly explain this. In fact it is very simple, '#' denotes that it is an ID, then 'li.listilla' says that we have to create a label «li» with the class listilla «li class = listilla» and then, we say «repeat that last five times«. What gives us as a result:

Twelve lines of code written in a single line and in much less time 😉

And that can also be done with CSS, although I will not lengthen the article by showing the obvious (below I will pass you a whole list of cheats for zen coding).

I have to emphasize that this does not work to make a zillion hundred thousand lines in one, oh no, this has a limit and a way to use it. If for example we want to do something like this:

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

What in theory should give us this (look at the highlighted line in the last image):

It will give us this:

Which shows that you can't do magic with this either; Remember that a Zen master of the code must be precise and fast, and doing things wrongly done takes speed and time, therefore, the correct technique to write quickly and with zen coding would be this:

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

You expand and inside the head tag:

title+meta

Which would give you the correct code:

Although the zen coding It has many more things to show you and maybe having to write another command line inside head is not the best, so we use another command, «expand with abbreviation" in my case ctrl + alt + e which will open a small bar where we can write Zen code and see how it appears in real time. Be careful, I do not recommend writing everything with this but writing within the structures already created, I mean, first create the large structures and then you will detail within them with this option.

And there are a multitude of super cool commands within the zen coding, the thing is that you investigate them once you install them and learn to use them; With this plugin you will not need autocompletion or snippets for css or html, in fact, with this you will realize that these options are a total waste of time within these two programming languages ​​😉

And for those interested, here is the official CheatSheet of the zen coding, you can see it in format ODF o PDF fair HERE