Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:28Length:1.7 hours
Speedy workflows with atom.io
  • Overview
  • Transcript

4.1 Snippets

Previously we used multiple cursors and incremental search to manipulate existing text on the page. But right now we want to focus on creating a command that allows us to set up boiler plate code and this concept is known as a snippet. Usually when you create HTML, we have to create a tag and open it up and be sure to close it as well. In this case, we'll create an h1. We'll say hello, and then we'll make sure to close out. And then below, we'll create an unordered list. We'll close it out, and then we'll create two list items. In this process is kind of slow, a better way of doing this would using a snippet. So let's do this again, for h1 we can type h1 then Tab. Now we can type hello in the middle and below we'll type ul. And we have an unordered list and then we'll type li and then we can do li again. And that was a lot faster and a lot less painless. But at the same time, it's pretty simple. And technically, this is more of markup completion rather than a snippet. Because if we type something in like hello, we get a tag for hello. And this might be cool if you're writing Web components but we're going to want to do a lot more advanced stuff with our snippets. To see the power of the snippet, let's go into another JS file. You can really use any blank JavaScript file for this example. When writing JavaScript, you spend a lot of time logging things out to the console. So we will type console.log and then whatever we need. And this doesn't really take a lot of time but it can be pretty tedious. So to increase our productivity, we can just type in log and then hit Tab. In this case, log is the command that allows us to generate out the rest for console.log. The same thing works for warn, so if we type warn and hit Tab we now have consoled out warn. And as you would expect, the same thing works for error. But still, at the same time, this is pretty simple. Another good command is the IFFY. In JavaScript, functions control scope, so most of the time you'll see a lot of JavaScript files wrapped in a function. And this function is anonymous, so it doesn't have a name. And to be invoked, it has to have these two parentheses to invoke it immediately. But this is bad syntax in JavaScript, so we have to wrap it in these parentheses. And below this we're going to have to use strict mode. Because strict mode allows us to get away from some weirdness in JavaScript. And writing this over and over again, also is very tedious. And to speed this up we could type IFFY, and this is immediately invoked function expression. Now if we hit Tab, the same code gets typed out there for us. So by taking these commonly done and tedious coding tasks into snippets, we can save a lot of time. However, the base snippets that are provided by Adam aren't really gonna provide everything that you wanna do. So in the next lesson, we're gonna cover writing our own custom snippets.

Back to the top