Emmet for HTML & CSS

[00:00:00]
>> Burke Holland: We're gonna get into some of my favorite productivity tricks next, and I would like to introduce you to this lamp. We are going to be building an application today, throughout all our exercises, that allows you to control the color of the lamp. We open this index file here, and, man, my comments are dark, they just look like text now.

[00:00:22]
So, one of the main productivity tricks that you need to know about inside of. Let me just turn this off for a second, inside of VS Code is something called Emmet. Emmet used to be called Zen Coding. If you've already heard of Emmet, I'm gonna show you some things maybe you didn't know that Emmet could do, it can do a couple of really cool things.

[00:00:44]
If you haven't heard of Emmet, it's just a way to write HTML faster, because we write a lot of HTML, and it's a little bit clumsy if you do it by hand. So we're sort of used to doing this, where you have a div, and you type div, and then you close the bracket, and then VS Code knows, and it gives you a closing div.

[00:01:02]
There's nothing wrong with this, except that opening and closing brackets sort of, what are these called? What's this? Is it a carrot? The carrots, are the carrots? Nobody knows. We'll call it a carrot. Opening and closing carrots is clunky because it's a shift action. So what you can do instead is, with Emmet you can just type div and hit Tab, and it gives you a div here.

[00:01:26]
You can do that for any HTML, if you wanted an anchor, anchor, and then you can see it's an abbreviation, Tab, now. You can also do IDs and classes. So you can do div, maybe it as a class of main, or an id of main, and it has a class of body.

[00:01:48]
Or, that's not a good class, that's a terrible class name, let's do app. And if we expand this, we get a div with an id of main, and a class of app. We can also use this to go down into elements. We could do a div, and inside of that is another div, and inside of that is another div, and inside of that is an anchor, and that's what we'll get here.

[00:02:12]
Now, you can also just leave out the div part, because Emmet is aware of the context that you're in. So, if you do this main.application, you will get a div with main and application. When I mean that it's aware, I mean that if we do an unordered list, and then inside of that we want a, say, three list items with the class of list item.

[00:02:34]
We can just do, list item, and I think we can do times 3, and then hit Tab, and that's what we get. So, you see, I didn't actually have to specify that was a list item, I just specified the class, and VS Code, or Emmet rather, knows that because you're inside a list item, or an unordered list rather, you want a list item.

[00:02:56]
So what we're gonna do here is just start to build out a page. Now, you can build out Boilerplate HTML by just hitting exclamation point and Tab, and then you get a whole HTML page. And you can Tab between the tab stops here, and we'll title this application, and we are gonna call it, I Love Lamp.

[00:03:18]
And now what I wanna do is just start building out this application a little bit. So, what I'm gonna do is just create some of this markup that we see here. And the way that I use Emmet is, I use it in spurts. So, I will do something like, we have a class of .has-text-centered, like this, if I can spell, and then I hit Tab.

[00:03:38]
And then I go inside of that, I have an image, and I need to set the source, like this, okay, and I'm done. And then I come down to the bottom, and I just sort of repeat that, and inside there's columns. So, this is how I normally use Emmet, is just in short sections.

[00:03:57]
Now, you can use Emmet to create a lot of HTML at one time, if you want to do that. So for instance, let's create now this second one down here, on step 2. And we're gonna put this inside the column's class here. So I'm gonna go ahead and save this.

[00:04:13]
And right here we've got two sections, we have two column elements, and then, inside of those column elements we have things. We have two blocks that occurred at the same level, we can create all this with Emmet. So what we're gonna do here is, we're gonna say we have a div that has a class of column, and it is 10, these are CSS classes.

[00:04:35]
And then inside of that, there's an input that has an id of colorInput, and it has a class of input, and it is large. Now, we need to go back up a level, cuz we went down a level, so we need to go back up a level. So we can do that with this character here.

[00:04:53]
Or, what we can do is group. So what I'm gonna do instead is, I'm gonna group these things together. So what this does is, says, this is a section, and then I'm gonna say, at the same level, I'm gonna have a new section. And I'm gonna put all of this stuff down here, inside that new section.

[00:05:07]
So that's a column. And then inside of that there is an anchor with an id of goButton, and it has a class of button, it is primary, and it is large. Large, there we go. And then, when I come to the end here, you can see that Emmet sort of goes away, so if I hit Tab, nothing happens.

[00:05:29]
Sometimes what you need to do is Ctrl+Spacebar to sort of bring Emmet back and say, I need you, I'm still here, and then you can see that it's back, and you hit Enter, and then it does all your expansions here. Just go ahead and pull all this out, we're good to go, so we put our HTML in here.

[00:05:49]
Now, one of the things that Visual Studio Code will do for you as you're typing, not just HTML, but also code is, it will format it for you, so it will move things around and make it all nice. Now, by default that's not happening, because I haven't formatted this document.

[00:06:08]
So, to do that, what I can do is say, Cmd+Shift+P, and save format document, and I'm gonna hit Enter, and then it's gonna format all of my HTML nice and pretty. And when I say pretty, I do mean pretty. So I've included a formatter for you, not just for HTML, but also for CSS and JavaScript called Prettier.

[00:06:28]
And you can see that it's running down here, at the bottom, says Prettier right there. Now, obviously you don't want to have to format your document every time, so what you want VS Code to do is format on save. And you can turn that on by toggling, I've include this toggle right here, which is an extension, and it's called Toggle Format on Save.

[00:06:49]
And if I hit that, it's now on, and you can see down there at the bottom it says, you can't see it, it went away. So it said, Format on Save is on very quickly there. So now every time I save, it'll format. This is a very handy extension, cuz a lot of times you'll be in a document, or a piece of code that you haven't worked in before, and your settings could be different than their format settings.

[00:07:11]
And so, if Prettier is turned on, and VS Code is formatting everything you write in, it's gonna reformat that whole code file. And then when you go to check it into GitHub, it's gonna tell you every single line in that file has changed. You're gonna check in, and someone's gonna call you very angry because you have injected two spaces into their four space world, and they're not gonna like that very much.

[00:07:30]
So, what you wanna be able to do is, quickly toggle off that formatting, and that's what the formatting toggle does for you, and that's included in the extension bundle there. I'm gonna go ahead and run this application
>> Burke Holland: So let's do that. I'm gonna open up the integrated terminal here, and we'll just say, npm start.

[00:07:50]
>> Burke Holland: And now we're running, and let's see here. Let's go back to our browser, and we'll say, localhost, localhost:3000, I think, yeah, there it goes, it's open. All right, so, it's looking pretty good, looks amazing. No, it's terrible. We need a CSS file. Just come back here and include one of those.

[00:08:15]
I'm gonna come up here and, somebody once tweeted, I think it was me, and it was like, ten years later and I'm still Googling how to include a CSS file. So, if you feel that way, it's okay, I do too. Every time I have to include one I forget what the syntax is.

[00:08:32]
Fortunately with VS Code we can just say the link, and then it will fill that our for us. I've included a CSS framework in here called Bulma. Anybody in here familiar with the Bulma CSS framework? Couple of folks. If you haven't seen Bulma, let me come back over here, you can check it out if you go to Bulma.io.

[00:08:54]
This is the Bulma CSS framework, and it is a really nice CSS framework, I'm a big fan, it's quite simple, it looks really good. That's the one that we're gonna be using today. I particularly like its grid system, and how easy it is to use, very declarative. So that's the CSS framework we'll be using.

[00:09:10]
I'm a fan, you should check that out if you haven't yet. All right, so what else do we need to do here? We need to add some styles to this page, that looks good. So I'm going to add a style tag here. Now, normally we would have an external CSS file, but for the sake of simplicity we'll put it all in line.

[00:09:28]
And what I wanna do is add a style to the HTML. And, what I wanna show you here is that Emmet works inside of CSS the same way that it works inside of HTML. So for instance, I wanna add a background image, what I can do is say, bgi, and hit Tab, and that gives me the URL, and then I'm just gonna say background.jpeg, there we go.

[00:09:50]
And then you can see, see how there's a preview in the left hand side here, of the image. That's an extension that I've given you, called image preview. And what's nice about that is that you know that you've got the right path because the image is showing up as an icon on the left hand side, that's why I like this extension.

[00:10:06]
Otherwise you have no way of knowing if you just entered the correct path or if it's wrong. Now, this background image, we want it to repeat. So we're gonna say bgr, repeat, no repeat, is fine. We want the size to be cover. We want a height of 100%.

[00:10:25]
So we could type that height 100%, or we could just type h, hit Tab, and then type 100%, or even better, we could say h, 100p, Tab, height: 100%. Same thing with min-height, we can do mh and get min-height, or we can do mh, and we want 1,400 pixels.

[00:10:45]
And because we want pixels, we don't need anything else, we'll just hit Tab, and we have pixels. So let's add a little bit more here. Let's add our style to the body, and we'll add one for the app wrapper that we don't have yet. So in the body what I wanna do is have a background color, and again, I'm just just typing, see, I didn't even have to, I'm just basically typing the characters that are in that string.

[00:11:12]
And I'm gonna, what we're gonna do here is, create a mask for the background image that's gonna fade it, and give it this nice, sort of soft, faded look. And, then we want a height of 100%. Almost got it. Let's try that again. Height, 100p, Tab, there we go.

[00:11:29]
And then for our app, what we want is, we're gonna go to max-width of 800 pixels. Oops, we got min-width. Let's try that again. Let's do max with maw800, there we go, max-width. All right, now, I've created this app container here, but what we need to do is, we need to get this code, and we need to wrap this inside of another element.

[00:11:59]
This is something that you'll do a lot. And the way that you normally do this is, you'll do this, you'll come up here, and you'll go, okay, I need all of this down to here, do I have it all? Is that the right closing div? Okay. And then you'll cut it.

[00:12:13]
And then you'll create a div, like this, and then you'll paste it in, like that, okay? There is a better way to do this. And it has a piece of functionality called balance inward, balance outward. And what it does is, it balances your selection to the closing tags, or at the tag level.

[00:12:35]
So what we're gonna do here is, just open the command palette and say, Emmet, and then we're gonna do balance outward like this. And as I do that, you can see it balances out and it gets the next complete tag. If we repeat that, it will just keep on going until, and see, now we've got the bottom, but then the next level tag there is the one above it, so if we run it again, now we have all of it.

[00:12:58]
So we've done it three times. Now, what I do is, I map this to a keyboard shortcut. So if we look at keyboard shortcuts, and we look for balance. Balance inward, I map it to Cmd+Shift, yeah, Cmd+Shift+Up and Cmd+Shift+Down, balance inward, balance outward. Balance outward is the one you'll use the most.

[00:13:22]
And so, what we can do is, we could just put our cursor anywhere inside of this thing, and now I can just say Cmd+Shift+Down, and I can do it until I've got the whole thing. And now I wanna wrap this with a div that has an id of app, so to do that, we can also use Emmet.

[00:13:39]
What I'm gonna do is, I'm gonna open the command palette, and I'm gonna say, Wrap with Abbreviation, here, and then I can enter an Emmet abbreviation up here, and boom, we're wrapped. And because we've got a formatter, I hit save, and everything gets popped into the right place.

[00:13:55]
Now guess what? I wrap this to a keyboard shortcut too. So let's look at keyboard shortcuts. And what I do is, I do Wrap with Abbreviation, and you can see it is mapped to Option+Shift+W. Now, be careful because Cmd+W closes the window, and I believe Cmd+Shift+W force closes the window, so that is a very close key combination, but it allows me to quickly and easily wrap things with abbreviations.

[00:14:23]
For instance, if we wanted to provide a link to the Bulma site here, and we were writing, let's just say, so now it's on the clipboard. So, and I've got, and I wanna do, link to the Bulma framework, I can highlight it, rapid abbreviation, hit A, Ctrl+V, boom, I got an anchor in.

[00:14:40]
So, once you learn these sorts of quick keyboard shortcuts and maneuvers that you make all the time, then you can automate them. So pay attention to the code that you're writing and the things that you're doing. If you find yourself doing that a lot, automate it away with some keyboard shortcuts, and remember that Emmet can do most of these things for you.

[00:14:59]
Here's another thing that Emmet can do. A lot of times we'll come up here and we'll say, this right here, actually this section, this needs to be a section element, it should not be a div. I messed that up, I needed it to be a section. So, yes, it needs to be section with the class of section.

[00:15:17]
And so, what we'll do is, we'll come here and we'll say section, but then you'll notice that we now have a problem, because we have to come down and rename the other div. So, there are two different ways to handle this situation. There is an auto rename extension, so if you look for auto rename, Auto Rename Tag, and you see, I've got it installed, but I don't have it enabled.

[00:15:44]
And the reason for that is that I've noticed that it doesn't work correctly all the time. Sometimes it renames the wrong tags, which I think is why it might have three stars. But it also has over two million downloads, so there's a lot of people using this. The other thing you can do, the one that I like a little bit more, is to just say, Emmet, and Update Tag here, right here.

[00:16:05]
And we're gonna say section, and then it updates it. I typed sectjoin or something. Anyway, it's just easier because you don't have to be right on the tag, you can be anywhere in there, and update tag, and then section, if you can spell section right. So that's a very, very useful tool as well to use in Emmet.

[00:16:29]
All right, we are almost done with this application. I just wanna add a few more things.
>> Burke Holland: Here on the logo, we have an image, but we haven't specified the size of this image. And we wanna specify the size of images because.
>> Burke Holland: Because, the browser when it loads the page, it doesn't know how big this image is, and therefore it doesn't know how much room to reserve on the page for it.

[00:17:02]
And the effect of that is that the page will jump around when the image arrives from the server, there will be no image there, image will arrive, page jumps, we don't want that. So what we wanna do is tell the browser how much room it needs to reserve for this image.

[00:17:17]
In order to do that, we have to add a width and height attribute to this image. There are a couple ways to do this. One of them is to just come over, find the image, look down here at the bottom, see the size, come back, and then say width, forgot what it was, I guess I should go back, look at it again.

[00:17:38]
There's an easier way. If you just put your cursor here in the tag and say Emmet, Update Image Size, it will automatically pull in the size of that image so that you don't have to do it yourself. Now here's what's crazy, this works on remote images too. So if you have a URL to an image, this will still work.

[00:18:01]
It also works on background images. So if we say Update Image Size, it now puts the width and the height of this image in the CSS. We don't actually want this, so I'm gonna go ahead and take this out. But that is Update Image Size, and you'll use that one quite a lot.

[00:18:19]
So let's check on our application, let's see what it look like now. I Love Lamp. Looking pretty good, a little rough, but getting better, we'll get there here in just a second. I also need to add some text to my button here, so let's do that. Where is my button?

[00:18:34]
We'll just call this go, and let's give this thing a class of container, which should, there we go. Getting better looking already.