Using Emmet

[00:00:00]
>> Steve Kinney: Now we're gonna do the interactive part of the show. So we talked a little bit about conveniences in JavaScript. The other place where conveniences are nice is HTML, because that's tedious, also, where there is HTML, there's usually JSX, right? So, what we're gonna talk about next, which is Emmet abbreviations apply to both HTML as well as JSX depending on what you're doing.

[00:00:31]
So in that little playground,there's just an empty HTML file, that's not it. I'm gonna pay will do index, in the playground. Dope, so, Emmet abbreviations are built in, there's nothing you theoretically need to know, they are basically a way to write a bunch of HTML very easily. And the way that it works is effectively you write what is basically, a CSS selector, right?

[00:01:02]
And that CSS selector ich, will go ahead and generate a bunch of HTML for you. So if I did something like div and then the childhood div is a ul, and then in there I want li*3, great. I can even tab and fill it out real quick, I can also do something like div, we'll do something similar, div>ul>li*3, and we'll say,
>> Steve Kinney: The 3 in that case, was just one of them, I got look at the syntax for that one in a second, but like theoretically, you can scaffold out.

[00:01:52]
The other thing you can do is div modal>h2 and a paragraph, right? And it'll put the class on there for you. If you did a pound sign, it would be an ID, yeah.
>> Speaker 2: And Emmett just comes with,
>> Steve Kinney: Just it's built in, it's built in by default, you have it for free.

[00:02:17]
And so, yeah, there's a bunch of things again, like header+main+footer will get you like the 3 in a row. The other one that's super useful sometimes, is HTML5 gets you roughly the skeleton of an HTML file. You can also do script and it will, put the attributes in there.

[00:02:49]
It is close enough to CSS selectors that it will do the trick for you. Let me actually, I can do it with the classes too, so I can do a ul>li.item*5 and they'll all get the right class, right? Especially nice if you're doing a bunch of Tailwind or something like that, you need to have a bunch of classes on a whole bunch of little ones, and they're like, Taiwan's just use multiple cursors to change this stuff, you're like, I'm not living like that.

[00:03:22]
Trying to think, what else is kind of fun.
>> Steve Kinney: So we could do something like div.wrapper.
>> Steve Kinney: And then there we'll have div.title.
>> Steve Kinney: Right, and I'll put the text in there for me as well, right, which is technically not CSS. That's where I was CSS each, and get you some of that boilerplate super, super fast as well.

[00:04:05]
What other things are fun?
>> Steve Kinney: I'm gonna paste this one in here because it's a little more complicated, but we'll talk about it. Which is you can group them, right? Which is like, okay, I wanna head over with an h1 and then next to that, I want a main with 3 sections in it, and after that, I wanna foot it with a paragraph.

[00:04:25]
And you can kinda see that it will begin to, well, that was just that Copilot being a fancy hero.
>> Speaker 2: I think it's because I pasted it in.
>> Steve Kinney: But you can start to set up different sections at that point, to be honest with you, I would do these individually, I'm never gonna remember this.

[00:04:44]
That's why I didn't remember it to begin with, but it is nice, you can kind of scaffold out things very quickly. Try and think, if there's any, there would be some challenges for you in a second. The ability to trim white space, like putting comments, there's all sorts of little things that are like, I don't do this anymore, but someone's gonna be really happy about this.

[00:05:09]
Form.search>input.field. No, up, here's the thing when you're typing in front of people, is you make dumb mistakes sometimes. Anyway, you can do lots of fun and crazy stuff, I have never wanted BEM CSS syntax even when it was popular, so whatever. But you can do the attribute, you can do the child's, you can do siblings, and a lot of that is useful, but I usually do it in much smaller pieces, the moment you are writing a very long, very complicated Emmet thing.

[00:05:52]
You could have written 3 small ones and copied and pasted them, or, like, multi cursed your way out of this. So breaking it apart, but if there is very few opportunities in this workshop to have a hands on challenge.