3.1 Emmet

Emmet or previously known as Zen Coding is a shorthand method to type in HTML or CSS code. It has indeed become an essential toolkit for any web developer because it not only enhances our productivity but it is definitely very much fun. So to get started with Emmet, check out emmet.io which consists of essential documentation, downloads, and other team and contribution, explanations. The documentation is a website you should definitely go through because it consists of short videos as well as explanations and short hands on how to use them. And depending on the text editor you use, you will have to either install some sort of plugin or package to go with that specific text editor. Now in Sublime Text, we will be installing the Emmet package using the Sublime Package Control. So if you are not aware of this, do go ahead and install package control first. And after you install package control, you will see that under the packages, if you list it out, you will find that we have Emmet. And I have also went ahead to install Emmet CSS Snippet. So firstly, let's get started with Emmet. We will use both HTML shorthand as well at the CSS shorthands. So let's start with a very simple use case. I'll start with a div, which is a very common HTML tag, and then press tab, and there you go, the div will expand. Now bear in mind that we need to have the syntax set to HTML for this to work. So for example, you, if you are in a C programming language file and then you press div and expand, well obviously nothing will happen. The other thing to note is that if you have a space after whatever shorthand you're typing, and then you try to tab, well it will be be the normal tab and it will not evoke the Emmet command. Great. So, let's get started. Some of the tags can also be shorthanded, for example, blockquote. So, let's say, we have a div and inside that, we have a paragraph, and inside the paragraph, we have a hyperlink in terms of an anchor tag. Now, when you do a tab, there you go. So all the tags are done and that they are also, in according to the inheritance that we defined. Let's try this one again. So you have ul and under that you have a li, a very common inheritance. Why don't we also try say siblings? So, let's say inside a div tag, you have a header one and also, you have header two, and you also have a paragraph. So this is how siblings work with a plus sign. Now if you want to bubble up the DOM trees, so in this case you can have div then let say a child, but let say the black code will be not in the sibling of child but it will bubble up to be in the same level as the div. Let's try this once again. So let's say you have a div and inside that you have section, and inside that you have a paragraph but you want this block code to be, that's right, in the same hierarchy as div. In that case, as you noticed, I use two caret symbols. So caret is a way how you can bubble up the DOM tree. Now many times, inside an unordered list, we do not want to have just one list item but maybe we want to have ten list item. Emmet can also do that. And there you go, all the list items are here. Now the cool thing about Emmet is, you can also use the tab to kind of toggle across all the list items and of course the last one will give you the tab itself. Now this proves to be immensely useful. So let's try it again. Let say you have about five of them. And the first one is apple, tab, banana, tab, pineapple, tab. So it will, basically, tab you to the right position to insert our next content. Next, let's try out some grouping of objects. So, let's say, we have a div and inside that we have header. And inside the header, we have an unordered list with five list items. Along with that, we also have two paragraphs. Now notice how I have, kind of, made this grouped up. So let's see what happens when we expand this. And there you go, the unordered list and the list items underneath where inside a group. And then the two paragraphs were siblings along with the unordered list. All right, so let's explore some ids and classes. So far, we just explored plain tags. So let's say we have class of just container. Yes, it will automatically expand it to a class of container. Now what if you want, say, two classes. So let's say one is sugar and one is spicy. That's right, you just need to .sugar and .spicy. How about an idea as well? So .sugar.spicy#warning. That's right. You can also do id, hash and then warning. Now let's extend this concept of adding class and ids to other tags. So for example, we have a container and inside that we have an unordered list of say class people. And each of the list items has class of say person and it will be five of them. Sorry, I should include a dot of person so that it is a class person and when I tab, there you go. Class people, class person, it's all done up for you. Next, let's try out some attributes. So let's say you have an anchor tag, but we also, usually, include title inside the anchor tag. So we can include the attribute inside this square brackets, and then we say, Title. Now when we tab, it will be included along with the href. Let's try it once again. So container, and inside the container, I have an image tag. It has a title of picture and it also has an alt txt of picture. And there you go, when expanded along with the default source attribute, it will also include alt and title attributes. Finally, let's explore automatic numbering in Emmet. So let's say we have an unordered list, and inside the list item, there's a class call item. But oftentimes, we want to have this item attached with a number which is automatically incremented. So in this case, we can put a dollar sign. Let's explore this. So there you go, you will see instead of the dollar sign, you see number 1. Obviously, this is not that effective. But what if I times it by 10. And there you see how much it saves our time by having not only the classes denoted but also automatic numbering. Of course you can go ahead and change the formatting to dash and then you will have a dash and then the number. Or sometimes you can also have triple dollar sign and let's see what that gives us. That's right, it will give us a three-digit number instead of a single digit number. Finally, how do we insert values within a tag? So for example, we have the same container. And here, we have a header one. But of course, that header one has a value inside, so that will be title. And you also have a paragraph. So that will be paragraph. And now when I expand, guess what? Within the h1 tags, the title will be there and so will be the paragraph. Now, as you notice here, oftentimes, when we place this paragraph, we need to put in some dummy text. Well, Emmet can also do that, so let's try it. So inside the container, I have a paragraph, and this paragraph has some text. And I'll just input lorem for that. And there you go. Once the lorem is expanded, it will give us of paragraph of text. Now, just for simplicity, if you do lorem, it will expand it. If you do lorem10, there'll be ten words. If you do lorem2, that's right, it will be two words. Finally, it is useful to note that when I just have a class name like this, it will automatically assume that it is a div. Similarly, if you have an unordered list, why don't we try with ordered list this time? And instead of putting in li every time, you can just put, say, an id, and let's just call it pink, and there are 5 of them. Yes, it will automatically expand to the list items, even though we did not specify the li. Similar thing goes with the table as well so let's say we have a class of say bold and then we have 10 of them, so there you go there are 10 rows of the table. Similarly, if you have an em tag and then you put a class of warning, and when you expand it, it will assume immediately that it is a span class. Same goes for paragraph, if you put a warning, it will assume that it is a span class. So, do go ahead and save those extra four characters typing in span or extra two characters typing in li. Great. So that was a little bit about HTML. I hope this makes you very excited to code HTML and it will definitely give you a lot of fast hand. Let's try some style.css, some CSS coding. Margin is a very common one. So if we do m10 pixel, it will give you 10 pixel directly. So, is it off just one value, what if we have two values? What if we have three values? And you get the picture on how to do for four values. Now instead of just the usual pixel sign which happens by default, we might want percentage or ems as well. Well in this case, for percentage, you just use a p symbol. Very easy. And likewise, for em you just use e. And that will expand to em. Now I've been doing this so far with em, you can also do exactly the same thing with padding or p. And of course if you do 10, p10p it will become percentage, and if you do p10, say e, It will become 10em. Next, let's try out colors. So now if you say c, it will denote color, then if you put a hash sign and let's say 7, let's see what happens. There you go, it will expand to the same three-digit number. Similarly, if you do, hash, and then let's say, 78, let's see what happens. It will expand to the six-digit hex number, and it will be repeating three times. Lastly, let's talk a little bit about vendor prefixes. So, first, you put in dash and then property, and then dash, and then tab. That will give you, immediately, all the prefixed vendor properties. And, of course, you can go ahead and type in the value. Emmet gives us a very handy way to perform calculations right in our text editor. So let's say 500 divided by 10. When we do Shift+Cmd+Y, that's right, it will give you the answer. Let's try it once again. 45 divided by 6.7, Shift+Cmd+Y, 6.72. Next, let's fire up some margin once again. Let's say 10em, and you often want to fine tune this number, but you always have to like go here and then make it 12 or make it 13. Now let's have a shorthand method to increase and decrease it. So in this case, watch what happens when we do Option+Cmd+Up. That's right, it will increase in the number of 10s. You can also go minus. Now, what happens if we do just option up? That's right, it will go through the decimal points. I find these two really handy to go ahead and fine tune it. Next, let's try to select the either tag attribute or value very easily. For that, we do Shift+Cmd+dot, and notice here, it will traverse to the next tags very easily. And when we do say comma, it will just go backwards. Now notice here when we have a class or an id, or rather an attribute, we, when we do the next one which is in terms of dot, it was selected the entire class. So in this way, we can easily go ahead and kind of replace it. So once again, do remember it is Shif+Cmd+dot, and then Shift+Cmd+comma. Finally, Emmet also allows us to customize it. So let's firstly look at the structure of Emmet. So if we go and say browse package, it will open up this folder, and we will choose the folder called Emmet. And inside here, let's go inside the folder Emmit once again. And here you will find this file called snippets.json, let's open this up. This consists of a lot of expansions and snippets that we are already using. So let's go through some of them. So, let's say HTML, these are some of my favorite. So, look at this one, exclamation mark three times. Let's try that out, and there you go, the entire doc type is there. Or one of my favorite is the one with, is this one, which is HTML:5, so let's try what that brings. The HTML:5, the entire document structure is done for us. So do go ahead and try a lot of them. Now the cool thing about snippets.json is that we can add on our own values. For that, let's go to once again preferences. And this time, we will go to Package Searching > Emmet, and then Settings Default. Now, insight settings are default, if you search for say snippets, you'll come across this tiny little item here. This is just as an example so let's try that out. Now, right now, when I do example and then tab, well nothing happens it just defaults back to the tabbing function. Now let's uncomment this part. And as you can see, if we do example and tab, it should expand to this. And now when we do example and tab, there you go, it expanded right as the snippets here defined it. All right, but by general practice or rather good practice, we should not be changing the Emmet's default setting. So when we go to package settings and we go Emmet, there are two types of setting. One is by the default that comes with the package and then there is the settings user. So we should not change the default. Because let's say we are upgrading Sublime Text, this default will get overwritten. So it's good to have it all in the settings user. And of course, if you open it, it will be all blank. So let's do exactly the same, structure as Emmet, the default one, so we will have it as a JSON structure. All right, so for now it is example. So why don't we try something different? Now the cool thing about using the Emmet snippets is that inside here, we can include the Emmet shorthand. So for example, we have something called hex. And inside here, we have just a very simple ordered list. And we have a list item of six of them. So, we do hex and tab and there you go, it is expanded into six list items. So do go ahead and try your own custom snippets. So be sure to use Emmet in your daily workflow. Either you are coding HTML or CSS, I guarantee it will be not only fun but also enhance your productivity.