Webdesign & Entwicklung

Code faster using Sublime Text and Gists

If you develop websites or software, you now that procedures and code fragments may be reused from time to time. As a developer you should always try to avoid those repetitions.

The first step is independent of what editor you use, or what kind of thing you develop. The first step should always be, to rethink your code. If you repeat parts of your code over and over, you should always ask yourself if that part shouldn't be better put in a method or function.

The more repetitions you have, the more inflated your code is, the more difficult it is to maintain it. If you then have to change something, you may need to this not only one time but again and again. And if you miss just one part, that may have uncertain consequences.

Well, okay… Sometimes you just repeat yourself. If you want to or not. For example when you start a new project. You need that html5 template, that javascript function or your personal css-template.

Because of this, the smart developer has a collection of those templates called snippets.

Snippets

You can organize your snippets in various ways. As a simple text file anywhere on your hard drive or dropbox folder. Using an application doing the work for you. And Sublime Text by itself has a snippet functionality included.

Sublime Text Snippets

Those snippets have a huge advantage, you can set shortcuts or use autocomplete to insert them. And you can use placeholders within snippets which are reachable via the tab key.

The big disadvantage: These snippets are stored in your Sublime Text user directory. You don't really have an overview. And it's hard work to sync them.

But I want my snippets to be available anywhere and regardless of what editor I use.

GitHub Snippets

GitHub has an own system for snippets, called Gists. If you have a GitHub account you can create and manage gists.

After trying several methods I sticked with Gists.

The biggest advantage: I can use them anywhere. I do only need a browser and access to the web. Simply login to GitHub and here they are.

And beside my own Gists I can also have a look at public Gists of other users. So if I need a snippet to solve a certain problem, I can just perform a search and (may) get a more or less long list of solutions. As known from GitHub I can star Gists or fork them to create my own version.

If I don't want to share mit snippet with others, I can create a private one. Nobody will be able to access it.

Sublime Text Gists

As we know, there is a Sublime Text Plugin for every possible scenario. Yes, you heard right! For EVERY scenario, don't argue with me! ;)

So there is a plugin for Gists: https://github.com/condemil/Gist

You need GitHub account (of course) otherwise you cannot create Gists. To use the plugin, you have to create an Access Token which is described in the README of the plugin step by step.

Setup

After you created your Token, you just have to add it to your Sublime Text Settings. Just go to: Sublime Text > Preferences > Package Settings > Gist > Settings User. And insert your Token:

{
    "token": "1234567890"
}

Using the plugin

You can use the plugin sublimelike via shortcut or cmd+shift+p. Just enter gist and you'll get a list of functions. Here you can create Gists (public and private), add Gists as new file or insert them into the currently open file.

If you choose Insert Gist you'll see a list of you own Gists and those you stared. You can limit the list by starting to type and/or you can navigation with the arrow-keys.

Creation of Gists

You can create Gists right from Sublime Text or via web. I prefer sublime text.

I always try to name my Gists clearly. For that I use a simple syntax: I start with the code language, like this:
[html], [sh], [scss] that way I can quickly see the kind of code and limit my search to a certain language.

Share

Sharing it great! Because of that, most of my Gists are public. Maybe you have some interesting Gists on your own. Post a link in the comments if you like or share them via Twitter.