Sexy Code Snippet Management With Gists
videos

Sexy Code Snippet Management With Gists

on Mar 6th 2012 with 95 comments
Tutorial Details

Final Product What You'll Be Creating

I’ve always struggled to find the perfect code snippet management tool…until now (and it’s free). I’ll show you my preferred workflow, using GitHub Gists and Sublime Text 2.

View at 720p for optimal viewing.

Summary

So that’s the system I prefer these days; do you have a better method?

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://baylorrae.com Baylor Rae’

    Thanks for sharing, I’m really liking the idea of using gists for snippet management.

    I’m not entirely sure the Sublime GitHub repo is the same package you used in the video, but if it is you can use “Copy Gist to Clipboard” instead of “Open Gist in Editor”.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Yeah – I must be using a different plugin. I just setup the first one I found. Maybe Sublime GitHub is better?

    • Robert

      I’m pretty sure they are two different plugins. You would want to have two separate plugins because you would be using two github accounts, one for your projects (allowing you to push and fetch as you normally would) and one for your snippets through gist.

    • Nicolas

      Works well, thanks !

    • deshiknaves

      Yes, that plugin is definitely better. I didn’t like the idea of having the username and password in a plain text file. And copy to clipboard is a lot quicker. Thanks.

  • http://pressedweb.com Cory

    Very cool!

  • http://vadim.sikora.name Vadim

    Well, it’s definitely worth checking out, but for now I can’t see how this is of any help in day to day actual projects. I mean, you use snippets for speed of development, and this method is just too much work, even if you use all the shortcuts, and even “Cope Gist to Clipboard” as mentioned above, it will never beat something like typing two or three letters and hitting tab and having whole snippet expanded where it has to be and just continuing work.

    Or am I missing the point here?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Right – I’d still use ST2 for simple snippets — for example, importing jQuery via a CDN or something. But for more intricate snippets, I like the version control method more.

    • http://logixstudios.com Brian

      The point for this is to be able to grab chunks of code that you probably wouldn’t need to save as snippets. Personally I think both have their place.

      I love Sublime Text Snippets because of the placeholders and tab markers you can use to insert and quickly modify the code, but for code that doesn’t really require any modification, I think the gist repo is the way to go, especially if you work with teams who all use the same code, it definately makes getting, and maintaining it across platforms and work places easier.

      I work from home and from an office, while I do have ST2 setup to sync my packages with dropbox it’s still kind of a pain. I’d rather have the repo for code I know my co-workers will use as well. Or that I could easily access if I was on a computer without my dropbox/ST2 combo.

  • http://www.alexwatson.co.uk Alex

    Thank you for this Jeffrey. Sublime Text 2 is awesome!

  • Levani

    How to do the same using Aptana Studio 3?

    • http://@ariepd Ariê

      And Eclipse or Notepad++ (Windows)

  • http://sobolev.us Vladimir Sobolev

    Useful plugin, thanks for sharing! What you thinking about using some kind of shared Git account for team development?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      That’s cool too!

      I was actually just informed that there’s some Github ToS rule that says you can only have one free account…I’ll need to check with them on that.

      • DeeFi

        Wouldn’t it be mush nicer to directly manage ST2 Snippets with Gist too.

        Save each Gist locally as ST2-Snippet and you have all benefits like Shortcuts.

        One problem i think is the workflow of updating a snippet you have to update the gist and afterwards save it as snippet to. But like this, you can move all your snippets to gist

      • Eric Windham

        Jeffrey, did you get any more clarification on the ‘only one free account’ subject?

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Still waiting. It’s in their ToS…but I’m thinking that this really isn’t a big deal.

      • Sergey

        As far as I understand they allow you to create as much “Organization” accounts as you need with your free membership, but not “User” accounts..

  • Nelson

    Amazing plugin!

  • http://wpgrafie.de/ Dominik

    Thanks for the idea. It’s worth a try.

    I will also use “Sublime GitHub”. It has a neat copy-to-clipboard function and you can work with a token instead of username/password in plaintext.

  • Jake

    That is a pretty epic workflow. There should really be a Insert Gist command so that you can insert the snippet into your current document at your cursor location.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      I agree. Maybe I’ll track down the author of the plugin and ask if he can add it. :)

      • http://pressedweb.com Cory

        Please update this post if you do happen to get either plugin developer to implement this functionality.

        Seems like a no-brainer. I wonder why they didn’t implement it before… Maybe it’s too hard.

    • http://www.schreiber-freunde.de Philipp

      100% agreed. If the author of the plugin adds this, I will use it daily!

    • http://wecreativeagency.com Rob Edwards

      +1 for insert command!

    • dlazic88

      Here you go guys, I forked the original plugin and added an insert command. See the documentation for usage instructions.
      https://github.com/dlazic88/Gist

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Fantastic! Works great.

      • http://centerdrive.ca Todd Smith-Salter

        Awesome dude! Thanks for the update!

      • http://www.josebrowne.com Jose Browne

        Saw that your code merged with the original repo!.. Good Job m8!

  • wburningham

    You mentioned in your video that this is useful because you would be able to share your snippets with followers. What will your gist/snippet dedicated username be so we can follow you?

  • http://www.webmaskine.com Pachito Marco Calabrese

    This is sexy! I do like sublime text!

  • http://www.novainspire.com alex

    very nice tutorial. make our life easier.
    wonder textmate gonna similar gist package thing? that would be good to..

    Al

  • http://roberttilt.name Robert Tilt

    This is fantastic, thanks!

  • http://brandonb.ca Brandon

    I scrolled all the way down to the “Add a Comment” in this article just to say how awesome you guys have made my coding routines improve! First by getting me away from Dreamweaver (which btw, gives me the shivers now), moving to ST2 and and utilizing Package Manager with Fetch! This is yet another awesome article and I make sure I bookmark everything you guys put out :)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Brandon!

  • Michael

    Ok.. this is all kinds of awesome!!

  • Alan

    Maybe an off topic question, but I need to ask what is a Pub Sub? Do you have any link to a screencast or written tut for that subject? Thanks!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      The Observer Pattern. Think of it as a way to subscribe to when specific actions occur. So I could say, “I want to listen for when results are returned from some AJAX request.” Then, when the AJAX request completes, a part of the code announces (or publishes) this event.

    • http://www.jeffrey-way.com Jeffrey Way
      • Alan

        Oh yeah I do remember using the jquery’s .ajaxComplete method I think its about that. Thanks Jeffrey!

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Of course, with jQuery AJAX events, you’d likely take advantage of deferreds.

  • Paul

    This is the best snippet solution that I have been looking for… Thanks Jeffery!!

  • Avelansh

    You really are a fan of sublime text editor Jeffrey, ain’t that so ? ^^

  • Fily

    As always, your tutorials are awesome!

  • http://twitter.com/jitendravyas Jitendra Vyas

    This Gist + Sublime combo is very cool. We can also upload HTML, CSS snippet from http://dabblet.com/ to Gist account.

  • osos

    Thank you for this useful post jeffery ..

  • vaff

    Is there a way to import all your Codebox snippets into gist ?

  • Konstantin

    Here is plugin version fo Coda: https://github.com/kmorey/gist.codaplugin

    • http://glitchtank.com/ Rob Iacobelli

      Thanks! I was hoping I’d find this in the comments! I just can’t get into Sublime2 ! ( Sorry for the blasphemy jeff ;) ) I’m not sure why but I ‘m much happier in coda or text mate so thanks for keeping up to date with hipster snippet tricks

  • http://www.craigcoles.co.uk Craig Coles

    Is there a windows version of this?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Yes – ST2 is available for every OS, I believe.

    • Vinay Aggarwal

      Of Course it is available for windows and linux as well and it works perfectly. I use it every day on windows and linux. It’s a the coolest editor I’ve ever used.

      Thank you Jeffery Way. Since i joined the web industry you are always been a good instructor to me. :)

  • http://michaelcullum.com Unknown Bliss

    Do you have a link to the account you use for all your snippets?

  • http://virtuemagz.com/ Hassan

    for Vim user this plugin should help http://www.vim.org/scripts/script.php?script_id=2423

  • http://iakshay.net Akshay

    Hi Jeff,
    The use of gists for version control in snippets is perfect, but I don’t see this of any practical unless the gists can be directly inserted into current document. May the developer can work on this.

    I guess this is something ideal for you, since it will allow you to have your snippets open to public. Which would be great for the readers.

    I still prefer Sublime Text Snippets, its certainly gives us more flexibility. And I won’t mind copy pasting gists to my snippets because I don’t need to update them that regularly. IMHO, the whole purpose of snippets is lost if they are updated every now and then.

    Thanks!

    • deshiknaves

      Check the other plugin mention at the top of plugins. It copies it straight into the clipboard.

      • deshiknaves

        I meant ‘comments’

    • http://jasoncalleiro.com Jason Calleiro

      Agreed, While I think the workflow is great, I think the thing it is missing is the ability to pop the snippet right in to the doc.

    • http://fedesilva.com Federico

      Yes, I agree. It’s a nice plugin but kind of useless if you need to: open a new document, copy the text from there, close the document without saving it and then paste it to your actual code.

      It’s not practical at all.

  • http://www.attilakerekes.com Attila Kerekes

    Sublime 2 is a nice toy, but some of us will always need a full IDE for “big PHP projects”. This would be some nice feature for PhpStorm. And Jeff, you should give more tipps for PhpStorm/WebStorm!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Envato houses one of the largest RoR applications in the world (if not *the*), and I don’t think a single one of the developers uses an IDE — it’s all Vim, TextMate, or ST2.

      • http://www.attilakerekes.com Attila Kerekes

        I believe you, it is possible, and maybe it is more fun, and believe me i like Sublime 2 very much, but i will prefer my favorite IDE for work projects. It is much faster for me this way, there are a lot of small features, that will just give me some speed boost all the time. (i did use vim for a long time, and i liked it, and i still use it for quick tasks…)

  • Simon

    It will be nice if you cold make a 5 min or 10 min video of sublime text 2 where you explain all the plugins that are good etc.

  • zennit

    Love this! Thanks for the tip.

    I love browsing the popular github repos using

    https://github.com/explore

    Or doing a search and checking out repos with lots of watchers

    Is there anyway to list all popular watched/forked gists?

  • http://docraptor.com Tyler

    Nice solution, Jeffrey. Using public gists for storing your own code snippets would also have the added benefit of helping others out.

  • http://www.wimbledon-it.co.uk Bjoern

    Awesome tut! Very nice for snippets.
    Just adding that, i needed to restart ST2 to get the username and pass recognised!(Windows)

  • Mike L

    Just wanted to chime in here, but ever time you mispronounced (compared to how I pronounce it) i cringe. I was under the understanding that it was pronounce with the true G sound, like Github.

    But after doing a dictionary search i can see that it is pronounced “jist”. I dont think ill ever pronounce it that way tho.

  • http://buznik.net/ Shu

    Wow!
    Fantastic tutorial :)

    It’s all like new world for me)
    Getting out of the dark)

  • https://nicolas.perriault.net/ NiKo

    This. Is. Awesome.

    Thank you so much for this.

  • Viktor Jackson

    Super cool stuff. Recommended this to all my Sublime Text using friends. I’m a vimist myself, had the Gist.vim plugin for quite a while now, but only used it for sharing code with others, didn’t realise it also had the ability to list my Gists. Didn’t even think to check for such a feature until I saw this video, so thanks Jeff!

  • http://@ariepd Ariê

    I installed Sublime Text for using Gist, I will really like to plugin for eclipse or notepad++..

    Anybody know?

  • http://www.sebastianscaramuzza.com/ Sebastian Scaramuzza

    Another Great Article!!

    Finally I Found the ultimate Snippet Manager for Me!! :)

    But there’s something strange on GitHub. If you create a public Git if you change your mind you won’t be able to make it private again (and Viceversa)…. isn’t it so annoying?

  • Potado

    In Soviet Russia, Sublime Text 2 plugin downloads you!

  • Scott

    Very handt, thanks!
    I’m curious to know more about that image replacement snippet you mentioned – do you have a link for it?

    • Scott

      Ignore that, just answered my own question, it’s part of the HTML5 boilerplate.
      Move on, nothing to see here…

  • Devin Dombrowski

    An Issue this package creates (at least it did for me) is a keyboard shortcut conflict with Command+Control+g. I really like having that as the quick multiple-select shortcut. This, of course, could be dealt with by remapping the short cut to new keys in “Key Bindings – User”

    Just something to keep in mind.

  • http://anarinfo.com/ Anaradam

    Nice videos. This tutorial is more helpful and info. Thanks for sharing with us.

  • Ryan Bosinger

    That’s great. I was wondering if I could incorporate Gists into Sublime Text but then I just didn’t try. Randomly I came across this! Thanks!

  • http://www.justinscarpetti.com Justin Scarpetti

    I wish there was just a Gist app. They have a GitHub app, now they need a Gist app!

  • http://palimadra.tumblr.com Pali Madra

    @Jeffry thank you for sharing this.

    I would vote up the request of @wburningham and push for tutsplus to have a separate account on gist for sharing snippets.

  • http://vultur.ca Guillaume Savard

    Wow thank you Jeffrey, this is one awesome tutorial I also wanted an easy way to manage my snippets with a simple shortcuts, sometimes I don’t want to get out of the “flow of production” and hate to have to click “New snippet” and then editing, and then saving, this way it’s 1 more productive and 2 easy to share with coworker and friends!

    thanks!

  • http://www.petrchutny.cz Petr Chutný

    Thanks Jeffery! Again, very valuable video.

  • http://www.mustknowtech.blogspot.com Anurag Kumar

    I liked this video so much and i am great fan of sublime text 2 and gist.
    But i found one problem in updating file.
    Problem is:
    For ex- You open a file from your computer(local file) in sublime text2,make some changes in it.Then press Ctrl+Shift+P to open command pallete and then type gist,you will find that their is no option to update.

    If you still wants to update any file ,then step 1 will be to pull that file from gist using Ctrl+Shift+G,then
    clicking on that file(which provided you have already created).Then copy contents of local file to pulled in file and then update it

    I just wanted to inform developer to remove this problem as simply updating local files is best,rather than to
    first pull file,copy local file and paste it in connected file and then updating.

  • http://imedia-ventures.com Will

    Great tutorial. I’ve been doing webMethods middleware development for 10 years which is mostly graphical drag and drop so typing all this code for HTML/JS is a pain. The nice thing with Gist integration is that you can share your code not just hoard your own snippets :)

  • http://rainydaymedia.net Ed

    I use Alfred app to with the Powerpack, and the clipboard/snippet feature. I’ve set it double tap on the control button to bring up my clipboard and then start typing the snippet I’m looking for.

    The gist, solution would be ideal if you’re not able always code from your own computer.

Newer Comments →