Transcripts
1. Class Introduction: Hi, there. I'm Rich Armstrong. I'm a designer, animator, and a coder. I've been coding for over 10 years, but I don't particularly like writing code. I write code to make things. The less time I spend coding, the better. So this clause is about using Emmet to speed up writing HTML and CSS. If you implement what we cover in this class, you could save days or weeks each year. That's a lot of time. We'll be covering things like HTML and CSS abbreviations, code wrapping, keyboard shortcuts, code traversing, and a couple of weird and wonderful hidden gems that Emmet has to offer. Emmet works in all major code editors and even in places like CodePen and JSFiddle, writing with Emmet is next level. If ninjas did actually write code, they use Emmet. So let's jump in.
2. // GETTING GOING: Hi there, I'm super stoked you're watching. I've structured this class into short videos so you can try for yourself after each video and so that you can easily find and watch videos again. The class is split up into the following sections. Getting going, CSS abbreviations, CSS shortcuts, HTML abbreviations, HTML shortcuts, more Emmet awesomeness, productivity with sublime and the final section, conclusion. In the class, I'll be doing everything in sublime text on a Mac but I will supply Windows shortcuts and information where possible.
3. Quick Theory: Here's the straightforward theory of Emmet. Step 1, write in HTML or CSS abbreviation. Step 2, expand the abbreviation into fully-formed HTML or CSS. Step 3, repeat. Doing this over and over will save you a bunch of time. So let's get into it.
4. Install Emmet: We need to install Emmet not code editor to get going. So visit EMMET. IO/Download and follow your IDEO code editors instructions. In the next video, I'm going to show you how to install Emmet in Sublime Text. Also, Emmet works and online code editors like CodePen and JSFiddle if you want to test dots, abbreviation expansion.
5. Emmet Installation in Sublime: In this video, I'm going to show you how to install Emmet in Sublime Text on a Mac. There's various ways of doing this, but I'm going to show you one really easy way. So you go to tools and we're going to install the package control, which allows us to install things from the Internet really easily. I'm going to click install package control, and after a while, I should get a confirmation dialog telling me that it's installed. Now, I can go to tools and use my command pellets, or I can press command shift P, and it brings up my command palette. This is a really powerful Sublime Text tool. Next, I'm going to type in, install. I could type package control install package, but I can just type Install and then press return or enter. From here, it's going to bring about a list of packages that we can install. I'm going to type an Emmet, an then just press enter, and from here it's going to install Emmet. Fantastic. I should get a little nurture telling me that Emmet has been installed. I can close that. Thank you very much. Now, let's just check if this is working. So this changes to HTML. If I type in div and I press tab, there we go. It expands. Fantastic. It's working.
6. // CSS ABBREVIATIONS: Let me show you the basics of using Emmet for CSS really quickly in this video. The first thing that I need to do is make sure that the syntax of the file I'm working on is actually CSS. We can see the syntax of the file at the bottom right. So this file is currently a plain text. I can click here to change it to CSS. I can also then change it using the Command Palette. So I could go to Tools, Command Pallet or use a keyboard shortcut, Command Shift P, and I could type in set syntax CSS. We could do the same for HTML, set syntax HTML. We can go set syntax CSS. Another way is we could just save this, so Command S, and we can save it as style.css. That should automatically set the syntax to CSS. So once we've got that out of the way, we can start writing some CSS. Now, let's just write some CSS for a body tag and I can press C, and Sublime automatically comes up with a bunch of options. I can press Enter, and just like that, that's a bit of image right there. If we don't want to press Enter, we can actually just press C and Tab, or we could press C and Control E to expand the abbreviation. Those are three different ways to actually expand abbreviations. But we can use this for any rule that we want. So margin, let's do that. What about padding? Let's do that. What about background? Let's do that. Pretty cool, right? What about bottom? What about border or border-right? What about border-top? Pretty cool, right? What about a border-radius, brds? Border-radius. Super-cool, right? I mean, this is powerful stuff and it's really, really easy to use. Just like that, I have a bunch of rules for my body tag already.
7. Abbreviations With Values: We know the basics, but let's get on to some more advanced stuff. Pos a tap, position: absolute, tac, text-align: center. What about m12, margin: 12 pixels. What about t100p? Tap, 100 percent That's some crazy stuff right there. What about c and ffo, color? What about cr, tap, rgb? What about cra? Rgb with an alpha channel. Now we can go something like, 200 tap, 125 tap, 123 tap. Now you can put on the opacity. That's some crazy cool stuff right there. What about if we wanted to do a boarder bd1? Boarder1 pixel? That's great. What about bd1-s, and then we put on the color value, ffo-tap-one pixel solid with the color. Check this out. C for color. Then we put on the color value, so ffo, which would be yellow. Then, we put in 0.3 tab. It puts in the rgba value right there. I mean, if you can't see how this is going to speed up your productivity, I don't know. What about something like m, which will be margin. Then we put in 12rem. What about p, and we put in something like 80em. Pretty cool. Man, this is crazy. This is just the start of CSS abbreviations. We can do crazy things with color, gradients, backgrounds. Amazing things.
8. What Is The Abbreviation?: How do I know what the abbreviation is? How do I know that shortcut? Do I have to learn them all? Well, what's really cool is that there's some proper syntax like pause, colon, a for position absolute and, sublime may come up with all of this rubbish. I'm just going to press escape. When I press tab here, position absolute. Now that is the correct way of doing it, but we can also go pause a, like so, or maybe even like PA, what would this do? Padding. Okay, but p would also do padding. Interesting. What's really going on here is that emmet using this thing called fuzzy search, it basically tries to guess or understand what you're writing, what you're going for. If you don't know what it is, type it out, test it. If I wanted to do something like a border-radius, I'd be like, boarder-radius or something like that. Border-style, that may be a good one. I don't know. What about the bdrs, border-radius. Okay. What about the bdr? What is bdr? Border rights. It's intuitive, which is really cool. Sometimes I have no idea what I'm actually needing to write, but I just write it and test it out. However, if you really need to, there is a cheat sheet online and there's a whole bunch of emmet documentation that you can go look at, you can go watch. If you use something a lot like you're dealing with a whole bunch of color kind of syntax or backgrounds or gradients, go research how to do that super well, and then retain it in your brain. Then you can use it like a pro.
9. Gradients: One of the coolest things that Emmet it has to offer is gradient syntax. This is really cool. You go LG for linear gradient and don't be fooled by Sublime. Yeah, just press Escape, and then brackets, and they're going to supply the direction. Let's go left, and they're going to supply the midpoint, which would be 10%. You don't even have to put this in. The first color, so we could say F zero, zero for red and then, black zero, zero, zero at the end. Then, I'm going to expand it. Whoa. It just wrote all of that for me. Thank you, Emmet. You rock. But now, you may be wondering, "Well, it's put all those values there for me, what happens if I want to change them? Would I have to change them three times?" No, check this out. Let's change that to white and you press Tab or Control E to expand again, and it changes it all for you. Fantastic. Let's go to the top line and maybe let's take out the 10%, press Tab. Voila. Amazing, right?
10. Multiple Rules: What happens if we want to write all of our rules at once? Pause A. Now, I don't want to just expand this and write another one, I want to write it all once. We can go plus t 0 plus b, 0 plus o, 0 plus r 0 tab. It's absolute and is positioned at the top, bottom, left, and right all at zero. We can also do something like M and we can say 12 and also plus p, and we can set this at eight and 12 percent, tab, Voila. Now, I'm going to go backwards until I have my position line here. If I want all of this on a single line because it's position and all of these values relate to each other, I can put pipe S and then expand, and just like that I have all of those rules that relate to one another on one line. That's a really cool feature of sublime, the other is single scored photos, which we'll get onto later, but this one's really helpful. In this instance, you've got pipe S and puts everything on a single line. That's really cool, you can do multiple rules at the same time and you can put all of your rules on a single line. Super rad.
11. Extra Info: Let's say we wanted a little bit more information for our rules. What we can do is just put a plus after an abbreviation, so bg+, expand that, and all of a sudden you've got all that you need for your background rule. Here we could write something like ffo, press Tab to get to the url, and we could provide a value, press Tabs, set its x position, so it's 12 pixels, Tab again, and we could set 40 pixels and "No Repeat." Fantastic really cool. What about border? bg+ tab border it changes to 10 pixels, tab solid. What about dash tab? And we can change this to red again. Or I think that might be yellow. That's really cool about getting more information into your rules you just got to put a plus after them. Obviously, some of these don't work. C plus, nothing much more there, but things like perhaps f+ what would that be? font. There we go. Really cool, right?
12. Vendor Prefixes: Let's tell a bit more about vendor prefixes. Most of the time properties that need vendor prefixes will get them applied by Emmet. So TRF transform, I'm just going to press escape here. So you see that it's not sublime doing it's sneaky thing. Tab, look at all that. Fantastic we can say, all typing whenever we want over there. What about TRS? You just press Tab transition, okay, or whatever we want over there, undo, what about text shadow? Tab text shadow. So emmet doesn't prefix that by itself. So, what we want to do here is we want to add a dash before hand, and then press, expand. Just like that no prefix all about properties for us. Thank you very much. So we could write something like the H offsets are 12 pixels tab, blur amounts. All right, you get the picture. So undo. If we wanted to just show one type of vendor prefix, we will type in the vendor prefix of W dash, and then we could expand, and I would just add web kit. If we wanted to add Opera, we would do it like so. Really cool. So just like that, we can start to add vendor prefixes to our rules. What's great is that if you're writing Sass or Less, which get compiled into CSS, it doesn't add vendor prefixes automatically. This makes reading and writing your code much easier and your compiler should handle the prefixes by themselves.
13. Cool Abbreviations: There are going to be a bunch of abbreviations and I'm not going to show them all to you. You've got to choose which ones you want to learn, which ones you want to research, but there are a couple that I find amazing. One of them is the important declaration, so check this out. We go P for padding 12 pixels and bang. We just expand that and we get an important declaration right there, or maybe we have M and we just want to make sure that it's important and then we can enter in the value. We can say 80 pixels. Pretty cool, right? What about, if we want to do a really quick transform scale, T-R, F for transform and then colon and S, and we press tab and just like that, we can scale the x and y value. I'm going to go 1.2 and I can press tab and I can go at 1.2, but that's the same, so I'm just going to remove it all and there we go. We have a vendor prefixed transform scale property. Next is something that I really don't enjoy doing and that's typing out a new font family. We can go at F, expand that and voila, we have a font face, but that's not super useful. We can still tab between font family and the source URL, but if I put plus after that and then expand it, wow, check at that. I now have a full on font-face declaration. I can type the font family, my cool font family and then I press tab and I can change the file name now so my font and press Tab, font-style, font-weight. That's super cool. Next is something that I also don't like to do a lot of, and that is my key frames. At K-F, expand. Wow. Look at that. It just wrote all of that for us. I'm going to call this my fade key frames press tab so I can change my from value to zero percent if I want to, and then I can press tab and type in opacity and set it to zero, press tab goes to two. Now I can set this to a 100 percent if I want. I'm then going to press tab again and type in op and expand that and then I'm going to set it to one. Just like that, we have all of our key frame setup full. Our fade animation.
14. // CSS SHORTCUTS: We've covered CSS abbreviations, but there's a bunch more things that Emmet offers us, especially in Sublime Text. We're going to cover these next.
15. Increment Decrement Number: One of the great things about Emits is the additional functionality that it offers. Say we've done a bit of CSS here, we've said 12 pixels, and I just want to edit this really quickly. I'm going to press Alt and use my keyboard arrows to go up or down. It increments it by 0.1 pixels. Fantastic. Now, if I press Command and Alt and go up and down, it increments it by 10 pixels, and if I press Control up or down, you'll see that that doesn't work. What we need to do is we need to go to System Preferences and go to Mission Control, and let's change Mission Control to off and Application Windows to off and now, when we go back to Sublime text and press Control up or down, it increments it by one. Really cool. We don't have to have to type out on the top of our keyboard, we can just use keyboard shortcuts. This also works in HTML.
16. Math On The Fly: Now as HTML and CSS developers, we have to do a lot of math, but sometimes our brain gets so an attribute not so good at math. Images are really cool. If we have something like width or height, we can do some calculations on the fly. 100 minus 47, Command Shift Y 53, just like that. What about plus 1,278? I don't know if you know that off hand. Command shift Y Voila. What about multiplied by two command shift Y Voila. What about minus 349? Command Shift Y. Pretty cool. What about minus 2,000? That should be pretty easy. Command Shift Y, really cool. You just add pixels after that. Really cool. Just doing math on the fly.
17. Reflect CSS Value: Say we've got some vendor-prefixed properties here and we change this to 0.4 and then we press "Ctrl + E" to expand and nothing happens because that does happen sometimes. What do we do? I thought this was meant to be productive? Now I got to change four lines of code. Calm down. All you got to press is "Cmd + Shift + R" and it reflects the values. Look at that. See you can even change this to, let's say ten. Cmd + Shift + R. Bang. Amazing.
18. Toggle Comments: So we haven't covered comments yet. So normally in subline text, you press command and forward slash. Just like that, your line is commented, but sometimes the comments don't work so well. So with Emmet, what we can do is go Alt, Shift, forward slash and a comment set 2. Often, a common set is better, it's more intelligent. So just like that, you can comment your code with Emmet or you could just use the default subline commenting.
19. CSS Preprocessors: Does emit work for preprocessors like Less and Sass, The answer is yes. If you don't know what a preprocessor is, don't worry, you can just skip this video. I'll get onto another class, another tutorial on what preprocessors are if you do know, check this out. I'm quickly going to install Sass. I'm going to go to my command palette and I'm going to say install package, search for SAS. Lets just install that. Fantastic. I'm then going to set my syntax to SAS and then I'm going to style a child element. We can say, let's style UC control E. Just like that, we can use emit for styling our Sass and Less style sheets.
20. // HTML ABBREVIATIONS: So we've covered using emmets to rapidly speedup writing CSS, now going to be the same thing for HTML. The first thing I need to do is change the syntax of my file. So I can either press Command Shift P in Sublime and type in HTML and set the syntax like so. Or I can click on plain text down here and select HTML. Or the final way that I can do this is just go command S. In this folder I can save it as index.html. Just like that, my syntax of set is HTML. Now using emmets to write HTML is a lot like writing CSS. So if I type p and I expand p, Control E or tab, it creates a paragraph tag. If I do div and I press tab, it, expands it to a div. If I wanted to create a div with a class, I could do this. some-class, much like CSS. When I expand that, it becomes a div with a class of some-class. Same thing with an ID, my-cool-div, check that out. I can also do the same thing with a span. For example. some-cool-span. That's really, really powerful. What's also really cool is that inside a ul, for example, if I press enter and I type li, which is also pretty cool. If I had to type in.some-class, this would normally become a div, but because it's inside a ul, it becomes an li. When I expand this, it becomes an li with a class of some-class, super powerful, super cool. This is just the basics of using emmet inside of HTML. There's still a lot to cover, but it's enough to get you excited.
21. Multiple Classes and IDs: Just like in our CSS files, we can have elements with multiple classes and an id. Check this out. If we wanted to write a ul with a bunch of classes on some class.red.amazing ul, and we expand this. You will see that it gets those three classes applied to it. If we want then to create a div with an id, with a bunch of classes on. We could write something like this. We don't have to write div, but I'm going to do it anyway div and I'm going to put some classes in. Then I'm also going to put an id on it. Something like header. Okay, so that's really cool. In one line, we've added an id, we've added three different classes, and we haven't done that much writing. Fantastic.
22. Tag Types: Some elements that we write in HTML have an attribute called type. So you recognize this from an input. So if we were to expand this, the type will be text. Now, you can also have a checkbox type or a password type, for example. So an easy way to do this with HTML is to go input, colon, and password. When you expand that, you get the type of password and it also gives you a name and ID attributes. This is pretty cool. So you can type in the name here, press "Tab", and then type in the ID. It's really, really handy. You could also say input, colon, and check box. Just like that, the type is checkbox. There is a name and an ID. Fantastic. You can also do this with an a tag, which would by default gives you an HREF as well. But, if you had to type in link after the colon, it would give you an HTTP address or if you had to type in mail and expand that, we can now have a mail to link, which is great if you want to click on a link and it opens up an email client.
23. HTML Attributes: Now what about attributes? Well, we've seen that the a tag when expanded has the href attribute, but what about other attributes? Just with an a tag, what about the target attribute? An emmet this is pretty easy. There's these square braces that we can then write target equals underscore blank, much like we do in CSS. When we expand that, we get an href and a target. Sometimes it may not be as quick, but it's certainly the same as CSS. Sometimes you can even copy across from your CSS file into your HTML file. Fantastic. If we wanted to have multiple attributes, perhaps like TD, and inside our TD we have a colspan, and we say colspan equals three, and then our rowspan equals two. Then if we want to, we could even put a title on there and say, "Hey there." Then when we expand this, just like that, we get all of those attributes all in one element. Fantastic, really cool, really helpful, and a lot like CSS.
24. Children, Multiplication and Incremental Numbers: How productive does Emmet really make us? I mean, if we wanted to write 1,000 list item elements, how would we do that? Based on what we've learned so far, we could write ul, expand that, press "Enter" li, expand that, write first elem and then we could go li, expand that. That's still takes a bit of time, I'm going to delete that. Now look at this, ul and then I'm going to do a greater than li, then I'm going to expand this. First of all, we're writing a parent's elements and the child elements. Now, let's undo that and multiply this by 10. Wow, look at that. We have 10 list item elements. Amazing. We could create 100 or 1,000. Now, what we can do is we can say, elem 1, we press "Tab" now and it automatically goes to the contents of list item number 2. We can go elem 2, and so on. That's really cool. Let's just undo this a little bit. Now, check this out. Inside of each list item, we could then put a span with an anchor tag. Bam, look at that, how flipping amazing is that? We can now fill in the href. If we're to go HTTP like that and type in taptapkaboom.com. Press "Tab" here and then goes to the contents of the a which we can say Website, press "A" it goes to the next href. This is amazing. Flipping cool. Now, this is even next level up. Let's just backtrack a bit here. We've gotten now URL, I'm going to create 10 list item elements in there. But now I want to close on this. So I'm going to go li.some-class.some-, and then it's going to put a number after that. When I expand this, look at that. It just put a whole bunch of numbers in there for me, I don't have to write them out. Check that out. Using this dollar sign, we can actually put in numbers. We can put in three numbers if we want, or two, or four, or whatever you want, or we could even go backwards. Check this out. At negative, and then when we expand this, it goes from the top to the bottom. Or we could even say negative five and so it goes to 14 to five. If we didn't want to start from the top number, we could remove this negative and just go from five, and when we expand that, it goes from five to 14. That is some crazy stuff right there. If your mind's not blown by that and you don't see how you can be more productive using Emmet, I don't know what's wrong with you.
25. Siblings And Groups: We've covered child elements now what about sibling elements? If we had a div, and we had "child1" like so, how would I get "child2?" If I had to go ".child2" expand that. "Child2" would be inside "child1" I want "child2" to be next to "child1" I want them to be siblings. How do we do this? Well, instead of using the greater than symbol, we just use the plus symbol. So when we expand that, we have "child1" and "child2." But now what happens if "child1" has a bunch of elements inside of that? So perhaps there's a 'ul' and there's an 'li' and there's three elements inside there, and I want an 'a tag' inside of those three elements and I press "Tab." Well, what happened? I don't want my "child2" to be repeated three times, I just wanted this to be one "child2." What we need to do here is, where it starts here, and say "child1," we start with a bracket, and then just before the plus, we close the bracket and we say, that is one group. We could put a group around the "child2" class, but we don't need to. At the end of the line we expand this, and just like that, we have "child1" with it's contents, which is amazing and we have "child2" with no contents, which is exactly what we wanted. Now we can start writing our HTML, HTTP, and then we press "Tab" and so on. Amazing.
26. Climb Up: Another way to work with siblings and children and hierarchy is to use the climb up method. If we have a div and inside of this div, we have an element with a class of C1. Inside of that element, we have another element with a class of C2 and inside of that one, we have another for class of C3. Inside of that one, we have another with a class of C4. When we expand this, we have a really nice hierarchy going on. But what happens if I don't want my C4 class element to be there? Well, what I can do here is instead of using this greater than symbol, I can use this little caret symbol, so that when I press expand, you'll see that the element with a class of C4 is now sitting next to the class of C2. If I undo this and I put another one of those in there and I expand, you'll see that the C4 class is now sitting at C1. It's basically saying, let's go up a level and let's go up a level, and hey, if we are to even do another one and expand that, it would be a sibling to the initial div tag. Pretty cool, right.
27. HTML Text: The next thing is, what about content? What about text? If we have to write an a tag and expand that, we would then have to write the h ref and then tab and then write the content. But there's a different way to do it. So A, we put these curly braces inside the curly braces, we then say content here, and then we expand that and content goes there. Now, if we want to say content here, and let's do something like that, multiplied by 10, we expand that contents here are one, all the way to 10. That's amazing. Just like that, you can write your content inside of your abbreviations. Fantastic.
28. Lorem Ipsum: Perhaps your job is to create this beautiful site, but it doesn't have any content yet, which should ring some alarm bells because how can you really design a site or develop the site there's no content? But sometimes you do have to do this, and sometimes it's actually great to do this. But you still don't have any content. So in HTML, how do we generate some Lorem ipsum? Well, these websites and plug-ins and all kinds of stuff, but check this out. Lorem200, expand voila, a whole bunch of Lorem ipsum. What about lorem10? Huh, just a little bit of Lorem ipsum. What about lorem2 Control E, Lorem ipsum, just two words. So just like that, you can generate a whole bunch of rubbish. It also works in CSS files, but I mostly use this inside of an HTML file. It's amazing.
29. Unknown Abbreviations: Up until now it's been peachy, there have been very little errors, things have been going smoothly. But what happens if you write a whole abbreviation and you try expand it and nothing works? Well, let's try this out. Hey, we have this cool element with the class of "hey" and we want to expand it. So we tap "tab" and it's not expanding is just actually using tab like it should be used. So we force them with "Control E", and then we realized that, Oh, actually that's not a class and that's created a "hey" elements that's a bit awkward. If things don't work with tab there's a good chance that there's an error. Perhaps you've written an attribute a little bit strangely, you've missed off a quote for example, and you expand it and nothing is working or even your control is not working. There's an issue. Fix it. If you're using something like react and you've got, "SomeCoolComponent," and you're pressing tab and it's not expanding, that's okay. You just press "Control E," and just like that, you have your custom components. If you press "Command Shift" and quote just like that, you can get it into a single tag. We'll cover this in the next section. If you press that shortcut again, "Command Shift" and quote, you can get the closing tag. There we go. That's what happens if you make mistakes or if you try to expand tag that doesn't exist in HTML by default.
30. Favorite Abbreviations: There are tons of abbreviations that you could learn or that you should learn or that you may want to learn, but if there's something that you particularly do often, go research it, learn it. Here's the website that you can find all of the abbreviations on. That being said, I am going to show you a few of my favorite ones. One of my favorite ones is a:mail. When you expand it, just like that, it says "mailto". Another one is link. When you expand, it just goes to "stylesheet". But if you go to link, click on CSS and you expand that, it puts your CSS file in there straight away. A lot of the time my CSS files are called style.css. This has fantastic. Now the final one is when you have to write your document tag and your head tag and your body tag and all that kind of stuff, which is really frustrating. Well now, you just write exclamation mark because that makes you angry. I don't know. Then you expand it, and just like that, all of that is written for you. Those are a couple of my favorite ones, I'd love to know what your favorite ones are.
31. BEM Naming: If you're into B-E-M or BEM naming conventions, then you're going to love this feature. If you're not into BEM naming conventions or you have no idea what it is, it's okay, you can just skip right through. I'll be doing a class on it later on. But using an Emmet filter, we can add all the BEM classes we need without having to do as much work. Check this out. If we write dot content dash block underscore big and expand that, so control E. I'll put it in default. But, if we had to do pipe BEM and this is a filter, control E. Check that content block, content block big. Let's undo this and let's write in dot underscore orange and then expand that content block big, content block orange are now classes on this div. Amazing. Let's undo that and inside of here, let's put an a class of avatar so, underscore, underscore avatar, and then expand all of that. Then just like that, that avatar class has a content dash block in front of it. It adheres to BEM naming conventions. Which is pretty sweet. This in my opinion is a double win because you're writing code that's really descriptive. It adheres to some convention and you're writing it quickly.
32. Adding It All Together: With EMMET, you could write an entire website by expanding one abbreviation, but this often takes way more time than it's worth. Don't get too caught up in writing long and complex abbreviations. Write it in manageable chunks. EMMET is meant to be productive not time-consuming. If you practice and you can write CSS and HTML really quickly, one thing EMMET does not replace is good planning. EMMET combined with good planning is the path of the true ninja. I'm being dead serious, it is the way.
33. // HTML SHORTCUTS: Expanding abbreviations is not all Emmet can do, there are a bunch of other things it can do for you in your HTML files. Most of them do require you to learn a new keyboard shortcut button, but I'm telling you it's worth it.
34. Balance Tags: If you've got a lot of hierarchy going on or your code is quite complex, one of the best things that you can do is balance your tags. Check this out. I'm going to press "Control J". Control J again, and you'll see that it selects the opening and the closing tag. When I press it again, it goes to the content area. If I press "Control D", it's going to keep on selecting outwards. Control D again, and you'll see it selects the parent A tags and then Control D, again, the parent li tags and so on. You'll see here that it selects the content between the opening and the closing ul tag. Control D, it selects the ul tags, Control D, same thing, same thing. When I press "Control J" again, it will take me inwards until it gets right to the most inner point. That's how you balance your braces. In Sublime, you can access this if you forget the keyboard shortcut via your control palette, so Command Shift P and you just type in balance. There we go. Balance inward, balance outward. It also gives you your keyboard shortcuts on the right-hand side. You can also go to Tools and Command Pallets if you don't know the keyboard shortcut for that. That's a really helpful way to navigate your code. It's quick, it's easy, and often helps me avoid confusing and really weird mistakes.
35. Split Join Tag: There are times when you need to split or join a tag. In react, for example, if you are to write image and then expand it, that wouldn't be a valid react tag. So what you'd have to do here is you then have to either write image like so, which is weird, or you'd have to close it on the opening tag. With Emmet around, all you need to do is press Command, Shift and quote. Just like that, it provides the closing tag. If you do it again, it will self-close.
36. Jump to Content Edit Point: This little shortcut is pretty cool when you're writing Emmet expressions. If we are to write input, text, and then we have to expand that, if I wanted to jump to id and then back to name before I'd written anything, I just press Control Alt and right, or left. Then I can jump between these two edit points. Really helpful. As soon as I write something and I jump backwards, I can't jump forwards anymore because I have already changed the content.
37. Select Next & Previous Item: We have a bunch of content and I want to quickly go to the next element. How do I do that? We'll Command Shift and greater than. Just like that, we can jump between our elements or if we want to go backwards, we're going to go less than pretty easy, right? It's really helpful.
38. Remove Tag: The default way to remove these tags, if we don't want to "li" anymore, would just be to click them, and maybe move a mouse, and then delete them. But there's a quicker way, "Command" and "Quote", no more tag. When you use this in conjunction with other shortcuts, life becomes simple.
39. Rename Tag: So we've done a bunch of coding, our site is ready, but we've made some mistakes, and now we need to change some of the tags. So one of the ways that we can do this, the default way, is just to go to the opening tag. Select the UL piece of text and then change it to OL. If we press "Enter" here, it gives us an undesired result. So let's just delete that and then we can go all the way to the closing tag and type in "OL". That is the default way. Now, look how quick this is. If I go "Command Shift K", it selects both the opening and the closing tag, and now I can just type in "UL" or "Div". Now, check this out. If we select all of these Li's and press "Command Shift L", or we go selections, split into lines, and then we press "Command" and "Left arrow". What's happening here is that we've selected all of the lines, and now we get to type on each line. So I'm going to press my "Right arrow", and then from here I'm going to press "Command Shift K" to rename my tags. Then, I can just change these two spans or A tags or whatever I want. Really powerful.
40. Goto Matching Pair: You may have a lot of content, and as you scroll down, you don't know where you are. Even though there's lines and sub-line text or some editors have a clearer way to distinguish which is a closing tag to your opening tag. A really easy way is just to click somewhere close to that opening tag or closing tag, and then go Control Shift T, and it goes to the start of that one, and then Control Shift T, and then, it goes to the end one. Control Shift T again, back to the opening. It finds its pair. Wouldn't this be great if all people could find their exact pair in the universe just with Control Shift T?
41. Wrap With Abbreviation: We've learnt how to specify the content of an abbreviation. When we expand this, you'll see that my Content 1, is the text inside the last child of that abbreviation, fantastic. But now what happens if we already have the content? Well, we could just press A and then expand that, but then the content wouldn't be inside that element. Let's undo, what we can do here is we select the content and then we're going to wrap it. So control W for wrap. Hey, we can put in an abbreviation here. So div or we could put a class name, my-class, or we could write an entire abbreviation so span and inside the span is my-class, and inside that one is an a tag, really cool. Press "Enter" and there we go. We've just wrapped our content with a whole bunch of tags. It doesn't just have to be the contents alone, we could wrap this whole element with an abbreviation. So control W and perhaps you just want to write em or maybe div.my-cool-class. Just like that, it indents it for us, fantastic. That's how we do wrapping, I'm not going to wrap for you.
42. Toggle Comment: Let's talk about commenting. In Sublime, if we press "Command" and "Slash" it comments out, if we press it again, it uncomments. In Emmet, if we press "ALT", "Shift", and "Slash", it does the exact same thing, so really easy to do that. But now let's talk about next level commenting. If we have a bunch of divs inside divs, and all of them have class names, slide.class-1 and inside of.class-2. Inside of that is.class-3 and inside of that is.class-4 and we expand that. We made a mistake, over there. We expand that. What happens is that, the opening tags are great because they tell you what class it is, but it never tells you what class it is when it closes. What we can do here is use a filter, you pipe and you press "C", and then you expand it. Then it puts comments in, and it tells you that, "Hey, we've just closed class 4, we've just closed class 3". This is really helpful when you have a really long page like URL, and inside of the URL you have lots of list items. Check that out. Now you're not really sure when your divs are closing and what divs it is, but now it tells you. Pretty cool.
43. Update Image Size: Now imagine we have an image tag and we've got this rich face image.Check it out. Rich face, that's me pulling a face. Yeah, now I've got this rich face small image that I want to put there instead of the rich face image.So we go back to our index.html and we changes to rich face small, and now I need to change my wisdom, eye height, which is always such a mission. How do I know how big that is, then I will check this out. You just go Control Shift I and [inaudible] width and height set to 300. It knows how big that images. Using this keyboard shortcut also works really well with the auto file name sublime plugin. You should check it out.
44. // MORE AWESOME EMMET THINGS: You have seen some of what Emmet can do in your HTML and CSS files, but there are few more things you should know about. The next couple of videos are going to be about showing you those things.
45. Encode Image To Data: This is going to blow your mind, it blew my mind. I've got this image, it's called icon.png, an amazing icon. Now, inside of Safari or some other browser, I've got it here. But, if we're going to Finder and we are to remove our icon.png, remove, and then we are to refresh, there will be a problem. We go back to our Finder, press Command Z, our icon comes back, we refresh, thank goodness, it's there again. If we go to Sublime Text now, to prevent this from happening, and for a bunch of other reasons, if we didn't want to rely on an actual file in our file system or on a server, what we could do is we could encode this. Pretty cool. But, normally this takes a little bit of thinking, you need a converter or whatever, but Emmet has this sorted. Check this out. Control Shift D, and just like that, it converts your image into plain text. I know it's a bit long, but it has its benefits. Let's now check this. We save it, let's go into our Finder and remove it. Goodbye. Then we go back to Safari, we refresh, check that out. We don't need an image anymore, we've got it all in text. How cool is that?
46. Merge lines: Sometimes, you've got content over multiple lines, either an HTML or CSS, and you want them to be all on a single line. So the easiest way to do this once you've really got your content is to select it. So in this case, I'm just going to select all and then you press "Command shift P" to get your palettes up. You then type merge or something similar. You press "Enter" and just like that, everything's in one line. It's the same with CSS. You've got a bunch of rules and you select them, command shift P, merge lines, just like that, everything's on a single line. Really helpful. Now, the other way to do this, if you can do a bit of fore thinking, is you write it like that. So you go ul dot my list, li multiplied by three. Then, you put a pipe because you want to filter it and you want it to be a single line. Then, you expand it and just like that, everything is in one line. Then you can say, " Hey, there." Press, "Tab". "How is it, Press "Tab" going?" Really cool, right? It's exactly the same with CSS.
47. The Command Palette: If you are like me or most other humans, you're probably forget these keyboard shortcuts. Luckily, in sublime text, it's really easy to find the shortcuts. You go to "Tools", "Command Pallets", or you could press "Command Shift P", if you remember that shortcut, and then from here you can see what all the Emmet commands do, so Emmet and there we go. All the commands are there with all the keyboard shortcuts on the right-hand side. Super, super handy.
48. Emmet Settings: Sometimes you may not really like what Emmet is doing. Well, I encourage you to go check out the settings. In Sublime Text it's pretty easy, you go Sublime Text, Preferences, and then you go to Package Settings, Emmet, and then check out the default settings. Then to change any of them, you have to open up your own settings file. We go to Package Settings, Emmet, and then Settings-User, and then what you can do is if you don't like something, you can just copy that and then put on these curly braces because it's adjacent object and then you just change that, save it. You may need to restart Sublime Text or your code editor before the setting start working. That's how you update your settings. Have a retreat default settings is a lot of comments in here that tell you exactly what's going on. Research online if you need any help trying to figure out what these mean.
49. Filters: Let's talk about filters. We've seen filters in action in the HTML and CSS abbreviation videos, but I'm going to show you how to do them and a few examples. What is a filter? Well, let's do an example first. So you've got a div, and you've got a ul, and you've got three li items inside of that. When you expand that, it puts them into multiple lines. But if you don't want that, and you want it all on one line, you put a pike and S. Now, this pike is the filter, and higher filtering it, is the S. Then you'd go control E and expand that, and everything would be on one line. Fantastic. Now, instead of S, you could write jade, and it would create some jade markup for you, like so. Or you can write haml, and it will create some haml markup for you. Really cool. Now, if your ul had a class in it, it's called My List. What's really cool here is that instead of haml, we could write c, which means that I want comments. When we expand this, we get this comments at the end of our elements with the class, and says, "Hey, we've just closed this tag." That's how you use filters. There's a whole lot more. Go check them out online.
50. // PRODUCTIVITY WITH SUBLIME: The next few videos show how to be a little bit more productive in Sublime Text, but it's certainly not all the ways. I also encourage you to research how to speed up all kinds of tasks, not just in your code editor.
51. Without a Mouse: Now, when you're typing and then using a mouse and then typing and then using a mouse, it gets really frustrating and it's not productive. Sometimes you don't even know where your mouse is, but you know where your little cursor is. Can we just not use the mouse at all. What about just using the keyboard? I'm going to show you a few things that will help you use the keyboard only. The keyboard shortcuts they really helpful to know. I know your minds probably exploding with all the other keyboard shortcuts that you should know, but these are really helpful, especially in Sublime. The first one I'd like to show you is using command. If you press "Command" and left or right, it jumps to the start or end of the line. If you use command and up or down, it jumps to the start or the end of the document. Let's go to the top of the document press "Command" and to the right, and we'll go to the end of that line. Now, when we press "Down" it goes to the end of that line. Down, down, down, down, and so on. Now, command to the left goes to the start of that line and if we go up, up, up, and no longer stays at the start of that line, but that's okay. Command left it goes to the start of that line. Really cool. Now, what does Alt do? Well, Alt and to the right, it jumps to the next word. That's pretty cool. Sometimes it does weird things like it doesn't quite jump to the next word and might jump to the next character if there's special characters. Like this Alt and to the left, we'll just jump to the start of li. To the left, we'll jump to the end of hay, and so on. What does shift do? Shift into the into the right Aha, it creates a selection. Really helpful if you want to copy and paste. So "Command C" for copy and then new line and paste. Now, there's a much easier way of copying and pasting. We can press "Command", "Shift" and to the left and it selects the entire line. Now, we can cut that, so Command X and now we can press "Command backspace" to remove the entire line and backspace again and there we go. No more line and we don't to have to press "Backspace" a 1000 times. If you want something in the middle of removing align completely and write a little bit by little bit, you can press "Alt" and "Backspace" and it won't remove things chunk by chunk, which is sometimes pretty cool. Now, if you want to select a word that you're in the middle of, you just press "Command D" and it selects that word and if you want to select the entire line, you press "Command L." That's really helpful for selecting entire lines, entire words. It's really quick. Super. Another way to do that is just by pressing "Alt." Alt into the right and to the right again. Then Alt shift right. Then you can select word to word to word instead of trying to select a little bit by little bit by little bit. You can start to see what command Alt and Shift do. They're really, really powerful. Sometimes we also use control in some of the shortcuts, but I'm not really showing you much of what control can do right now. One of the most useful things I'm going to show you now is if you have to select these three lines and then copy them and we have to go down to outcast UL, and we pasted them things don't look so nice. When you paste it from another area that has a different indentation, you can use "Command Shift V" and it basically paste in place, really, really useful. Another thing is, is that, what happens if you wanted to paste these things in a different order? Well, let's go up a few lines and let's copy hey, let's copy there, and let's copy how you. Then we go down here and then let's backspace, press "Tab" again, and then "Alt command V." What does this do? Well, check this out. It keeps the history of all your copies. Hey, we can start with how you press "Enter, " "Command Alt V," and then we can say there, how you there, and then Command Alt V and then we can say hey, or we could even paste a whole bunch of allies. Really cool. Those are some cool ways of copying and pasting. Now, what happens if you want to add a line quickly below or quickly above? "Command Shift Enter" one above. "Command Enter" one below. It's pretty much the same as just going enter. I really like "Command Shift Enter." The other thing which is really cool is when you have a bunch of text selected, you press "Tab," it's going to indent them and if you press "Shift" tab, it's going to un-indent them. Super-helpful rather than doing it line by line. The last thing I want to show you here is that if you're writing a piece of text, so let's say you've just written like href. You press "Equals," you don't have to press two sets of quotes. You just press it once and your cursor is in the middle of those two quotes. Really helpful. You can then write something. Another great example of this is if I had to select "How" and then I had to press "Shift" and quote, and I we'll wrap that word with quotes. Or I would wrap this with brackets or with brackets. Really, really cool. Those are a couple of shortcuts that I use in Sublime. There are a ton more. If you're really wanting to know if something can be done to speed up the process, do some research. It probably will be available or someone will have created a plug-in that enables you to do that.
52. Split Into Lines: One of the coolest things I find about Sublime Text is the ability to split a bunch of text into lines. I'm going to press Command A, select all of them, and then I go to Selection, Split into Lines, but we could use the keyboard shortcut, so Command Shift O, and all of a sudden, we have a bunch of lines selected. If we start back spacing here, hey, we can write a bunch of stuff, but that's not too useful. If I press Command and left, it goes to the start of each of those lines. From here, I can do something like div and expand. I can then select the closing tag, cut that, press Command and to the right, and then, paste that. It's doing it for every single line. It's really, really powerful.
53. Tab Navigation: When you've got a bunch of tabs open, it's really frustrating to just go with your mouse, and then click, and then click, and then click. There's a couple of ways to go about doing this. It mimics Google Chrome really nicely, so you could press Command one, two, three to navigate between your different tabs. Sometimes, you have so many tabs open that you don't know which tab you're on or which tab you want to go to. You could just press Control Tab and it will cycle between your tabs or Control Alt Tab and it'll cycle the other way, or if you wanted to be really intentional about which way you went, Command Alt right, Command Alt left. There are three ways to navigate between your tabs. I usually just use Control Tab, or if I've got a few tabs open, Command one, two, three. Super easy, super simple.
54. Emoji Picker: When you're writing things like, "Oh my, I love unicorns", you just need to put an emoji in there, right? How do we do that? Well, on a Mac, it's really easy. You go Control, Command, and Space. Just like that, you can search unicorn, there we go. Then, we just put the unicorn in there. Fantastic. If when you do that, your screen looks like this, then you just press this little button on the right-hand side here and it becomes this little pop-up. The next time you use that, you to go Control, Command, and Space, and then, your emoji picker comes up. Super handy for emojis. Yeah.
55. // CONCLUSION: Now you feel like Near right? Matrix dial or some world class hacker center since you're like Mr. Hacker, or Mr. Near or Mrs. Near Trinity, whoever you think you are. I have a challenge for you and a question. The challenge is, I want you to write a websites in a single abbreviation and post that expression in your project gallery. Everybody else can copy, paste it and expanded and voila, they should have a website. Then the question is, please tell us, what should we doing with all the extra time you'll save once you start using Emmet. Those your two things that I want you to do now. Have fun with them. That's the end of the class. They are however, many more ways to speed up your productivity, especially when you're coding and especially when you're in sublime text. If you've enjoyed the class, please review it and share with anyone you think will benefit from it. If you'd like to stay in touch, check out my website and follow me on social media. I'm @TAPTAPKABOOM on most platforms. Okay. See you soon. Bye.
Rich From TapTapKaboom, Multi-hyphenate Artist
