Introducing gisty

gisty logo

Over the years I’ve come to save snippets of code that solve my problems from my projects or the various places on the internet. Doing so has allowed me to be able to quickly reference a block of code from months or years ago. Not only does this save me time, but allows me to continuously update how I’m writing code and apply best practices in a consistent manner.

When I first started doing this I tried Evernote, but the lack of syntax highlighting was a deal breaker for me. I then started trying the plethora of snippet managers out there and they all had their own issues. From not syncing to not being cross platform - I struggled to find a good solution.

I eventually found a web based GitHub gist editor / manager, which worked perfectly, especially since I find myself using my Chromebook more and more. The only downside to this way was that the meta data was in its own database, but that was easily overlooked - at least at the time.

The great thing about a snippet manager that syncs to GitHub is that there are tons of integrations to it. From Sublime Text plugins to simply being able to use git to pull in, your snippets or gist’s are everywhere you need them.

Then it happened - the service was retiring and the new version seemed to not work the same way. This was understandable, the developer was standing up all of infrastructure to run the application and needed to make a few bucks. The problem for myself was that it seemed at the time to no longer synced the way I wanted.

So I figured while waiting for hurricane Irma to pass, I’d write up a quick replacement application for myself. After writing most of it, I thought to share it for those in similar situations. I also used this time to address many of the things that I found useful that I did not find in other gist managers.

Introducing gisty~

gisty~ is a GitHub gist interface, with lots of filters, a search, and is not very chatty with the GitHub API.

If your looking to start saving your code snippets you can check out www.gistyapp.com. It’s free, open source, and all of your snippets are stored in GitHub so your code snippets integrate into anything that GitHub gists already does.

Screen shot

Building it

gisty~ is a single page application. It’s written in JavaScript using the Backbone stack, Marionette and Bootstrap CSS framework. I chose these not because they are the latest and greatest, but because I have experience with them and could quickly turn out an application. It also goes without saying that I heavily use the GitHub API to communicate the gists back and forth.

Additionally, I didn’t want anything to do with identity management - it’s not my strong point and I really don’t enjoy doing it. To mitigate this and allow it to be an open source application I decided to use user generated GitHub API keys. This allows the credentials to reside on the local machine and never, ever pass to any of the developers of gisty~.

The next piece that I really wanted, was not to have a database to maintain for meta data - tags, descriptions, etc. To achieve this, data is saved in the GitHub gist’s description block and the user can choose the pattern that works best for them. For example, to use the tagging feature put a double hashtag in front of a word in the description and they’ll show up.

Example: ##tag or ##JavaScript

The cool thing about this is that you can access all the information of the gist from your favorite integrations.

Finally, the whole thing is hosted on GitHub pages and even deployed through its system, making updates as simple as a pull request.

Setup

First you’ll need a GitHub account.

Then to start using this gisty~ you’ll need to generate a GitHub API key and enter it the first time at the prompt.

You can create a key here on your GitHub account. Then select generate new token, then generate a new key for ‘gists’, copy the key and then use it to connect gisty to you repo.

Then your done. If you already have gists in GitHub they will automatically show up, because GitHub is gisty’s backend.

Overall

gisty~ is a great tool to easily manage your code snippets - even on a Chromebook. Keep in mind that gisty~ is a work in progress, so bugs can creep in now and then. They usually don’t, but it’s a possibility. Also, if you do find a bug you can help the project by filing an issue here, or patching it through a pull request.