Lessons: 34Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.8 Sexy Code Snippet Management With Gists

Today, I want to show you what I refer to as "sexy code snippet management." By taking advantage of Gists and version control, we can achieve a great deal of flexibility.


The current version of Sublime Text Gist is now configured to use GitHub Access Tokens. This is a more secure way of authenticating an app to connect to your GitHub account. See the links below for more information about how to configure the Gist plugin with Access Tokens.

Related Links

4.8 Sexy Code Snippet Management With Gists

Today I wanna show you what I call sexy code snippet management with Gist and Sublime Text Two. So a couple days ago, I was thinking about my current tool for managing code snippets and that's called Code Box, which is a native Mac app. Now there's certainly nothing specifically wrong with this app. It does the job, but for some reason, I just couldn't make myself use it. I couldn't get my fingers around the keyboard shortcuts, it just didn't feel right to me. Not to mention there's no version control, it just wasn't the best solution for what I needed. So next I took a look at using GitHub and for those unfamiliar, a Gist is simply a way to have version control. But for something much smaller, maybe a file or a snippet. So from that perspective, it's a great way to store your code snippets. So let's say, I wanna search for something like detect ie. You can see all of the snippets that are saved. One of the most popular is by James Padolsey and here we can see the snippet, as well as any forks and revisions that he's made. So this is really helpful, but my problem was as great as this is, I need a very quick and easy way to access my coach snippets. So when I'm working in Sublime Text, if I wanna pull in that detect ie script, I want to be able to do it as quickly as possible. Maybe bring up a short cut or something like that and I wasn't sure how to do it. So as a result, I never really got into using just specifically for my code snippets. But I've discovered a plugin for Sublime Text that makes it possible to use just entirely for your code snippets and we'll take a look at how to use that today. So I'm gonna go into Sublime Text and I'm gonna pull up package control, so I'm going to pull up the command pallet with Shift+Cmd+P and I'm going to install a new package. And I'll hit Return and I'm gonna look for Gist. And there we can see it show up, so I will hit Enter and that is now going to install the package. So the next step is we need to give it the credentials for our GitHub account. Now here's what I recommend, if you're like me, you will still use Gist all the time for sharing code on Twitter or Facebook or your website and I do not want that to be cluttered with my code snippet repository. So what I would do instead is create a new account and you can go to Sign up for GitHub account. Add your credentials here with the understanding that this account is exclusively for maintaining your code snippets. So once you've done that, you should now have a username and password and the next step is to set up the credentials with the Gist plugin. So, I'll come back to Sublime Text. I'll go to Preferences > Browse Packages. I'm gonna open up this new Gist folder and we'll come to the .sublime settings file. And here you can add your username and password. So I have created a test account for this demo, nettuts-testing and the password is nettuts11. And I will delete this account when I'm done with the video. So now I will click save and I'm gonna restart Sublime Text, just for good measure. It's probably not necessary though and now we're ready to get started. So once again, if I type Shft+Cmd+P and I type Gist, you now see that we have the ability to open a Gist, create a private or public and we can even edit them. So, let's try this out. I'm gonna begin by going back to Chrome and I'm will visit gist.github.com and my username. Click Return and you can see that we have not Public Gist. So let's go ahead and create one. I'm going to paste this code snippet in here and it's simply a starting a template and we reference jQuery. So I'm going to select the code that I want to add to the Gist, type Shift+Cmd+P on the mac and I will type Create Public and there it is, Create Public Gist or we can use the shortcut here. Now you can see that we can give it a description and this is where we need to be clever. We need an easy way to sort them and because Gist doesn't have categories and things of that nature, we're going to precede every snippet with the name of the language that it corresponds to. So in this case, I will type HTML and I will say, Starting Template and hit Return. We don't need a file name, so I will hit Return again and now that Gist has been created. And we can verify that by coming back, reloading the page and now we can see we have this new Gist. So let's come back to a blank file and I'll close this out and now we want to pull in that snippet that we created. So I type Shift+Cmd+P, I'll type gist to open a Gist or again, I can press Ctrl+Cmd+G on the Mac. Type that and now it's going to pull in every Gist that I have available. In this case, we only have one, so I will hit Enter and that's immediately pasted in. Now what you'll see here though, is it's not pasting it into the file we're working in. So at this point, you could select all, come back to your file and paste it in. This is now a file that is connected to that record. So for example, let's say, we want to update this Gist and we're going to link to a style sheet. That way our starting template always has a link to the base style sheet. So I'm going to select all once again, Shift+Cmd+P. I'll type Gist and now you see we have a handful of new ones. We can open it in the browser or we can update the file, so I will use that one. Now that's been updated. So if you wanna view this in the browser, we can come back, Refresh, check it out. Now you can see that's been updated. Or directly from the file, I can say, gistbrowser, there it is. And now that will open that snippet within the browser and we can even view the revisions, which is really neat. So let's create a handful more for this demo. I'm gonna paste in, this is a cool, modern way that we can use pub sub using JavaScript's new bind technique. Now it's not across the browser just yet, you would need IE9, but it's still a very clever way that I got from Paul Irish. So I will select this, Shift+Cmd+P > Create Public Gist. We'll call this JavaScript, so that we can filter it and we'll call it Sexy PubSub. No file name and that's been created, as easy as that. So I will close that and let's do a couple more. This is a new way that we can use image replacement without using text indent to form a box way off the screen. It's, it's fairly clever. So I'm gonna add that too. Create Public Gist. This one is CSS and we'll call it Image Replacement. And lastly, we'll do one last one. This would be a jQuery version of using PubSub. So once again, Create Public Gist > JavaScript and we'll call it jQuery PupSub. So the reason why we're using these prefixes is now, whenever I need to add a new snippet, I do Shift+Cmd+P > Open Gist. And now you see if has all of them and I can filter that down. So If I only want my JavaScript snippets, I can type that and now I can filter that down much more easy than if I just had a lot of random headings. So I want to pull in jQuery PubSub, we're all set. So this is the method that I'm going to be using from now on using GiHhub provides built in version control. The plugin makes it incredibly simple to work with and then you have that bonus where if somebody wants access to all of your snippets. And working on Nettuts, I get this all the time, people saying can you send me a link to all of your snippets so that I can use them. I can simply open a browser, go to my account and then I can simply give them a link to this and now they have access to every single code snippet that I use in my projects. Lastly, because we are using GitHub to store all of our code snippets. We have access to thousands, upon thousands, upon thousands of existing snippets that we can import into our projects. So for example, let's come back to that detect ie script by James Padolsey. If we want to use this in our projects, we don't have to copy and paste it and create a new Gist. I can simply click on Fork. And now if we come back to My Gists, you'll see that we have this new snippet. And let me just rename it, so I'll hit Edit. And we'll give it a description of JavaScript: Detect IE. Click Save. And as easy as that, we have a new code snippet. So I will come back to Sublime Text. Shift+Cmd+P > Open Gist. Filter to JavaScript > Detect IE and now that's in our projects. Incredibly simple.

Back to the top