The Gist of my code snippets workflow

Code in a code editor

Having a system for managing code snippets is an important part of web development that helps improve organization, efficiency, and reduce data loss.

It’s important to note that there are countless ways of managing source code, as well as types of source code to manage. For the sake of this article, I’ll share some of my workflow for managing and using code snippets efficiently.

Code snippets are reusable chunks of code that can range from a single line of code that performs a specific task, to an entire library or framework. Because snippets can be reused, it’s a good idea to have a system in place where you don’t have to continually rewrite the same bits of code over and over.

My code snippets workflow in a nutshell

The basic requirements that I wanted my workflow to accomplish were these:

  1. The source code needs to live in a single place online that is accessible from just about any device that has an internet connection.
  2. Ideally it would be version controlled and editable both locally and remotely.
  3. It can be quickly and easily inserted into my code editor as I’m coding.
  4. It can be embedded into a website with customizable syntax highlighting to match the site.

As I mentioned before, there are numerous ways to do any of these things. To keep things on point, I’m only going to share the basics of my workflow. Feel free to use any of these ideas to construct a system that better suits your needs.

Web-based source code hosting

Example GitHub Gist code snippet

I currently use two different web-based services for hosting source code—Bitbucket and GitHub. I use Bitbucket for my private code repositories because, unlike GitHub, they offer them free of charge—while GitHub is where I store my public repositories.

Both services offer options for snippets, but I prefer GitHub’s Gists because they can be shared and embedded on websites. For those of you who aren’t familiar with them, you can learn more about Gists here.

Because these are online services, they are able to be accessed from almost any location and device that has a web browser and internet connection. I hardly ever edit code on my phone, as an example, but it’s nice to know that I have that option.

Editing and version control

Since Gists are part of GitHub, they are actually Git repositories, which means they are version controlled automatically. Every time an edit is made to a Gist, a new version is saved, which allows access to every single revision ever made. This comes in handy if something goes awry and you need to restore a previous working version.

Just as Gists can be accessed remotely over the web on many kinds of devices, they can also be accessed directly within a local code editor.

Accessing, creating, deleting, and editing Gists locally

Using the Atom Gist plugin to insert code snippets
Using the Atom Gist plugin to insert code snippets

For those times when you’re working on a project and need to pull in a particular code snippet, you could open your code repository online to copy and paste the snippet, but that’s not very convenient. It’s much faster and more efficient if you don’t have to leave your code editor at all, which can easily be accomplished by using a Gist plugin.

For almost a year now, I’ve been using GitHub’s Atom editor and the Atom Gist plugin. Prior to that, I was using a similar Sublime Text Gist plugin.

Both plugins work really well and allow for the online Gists to be inserted directly into the code you’re currently writing. In addition, these plugins also feature the ability to create public and private Gists, edit existing snippets, and delete snippets directly within the code editor.

Since Gists can be shared and embedded on the web, I thought it would be nice to be able to customize their appearance to match the colors of the website they’re embedded in.

Embedding Gists into websites and customizing their syntax highlighting

See the Pen Custom Embedded Gist Syntax Highlighting by Michael Guerra (@msguerra74) on CodePen.

In the example above, you can toggle between the default Gist styling and a customized variation. You can also click on the SCSS tab to see some of the classes I edited to make this work.

Every Gist automatically generates embed code which makes it easy to add them to any website. All you have to do is visit the Gist online to copy the embed code and paste it wherever you want it to appear within your site’s HTML.

By default, Gists come styled with nice syntax highlighting already. If the colors aren’t exactly what you’re looking for, there are ways to customize them via CSS.

From what I can tell, there isn’t a specific way of knowing how to re-style Gists aside from inspecting the code with you browser’s developer tools. You’ll need to find out which CSS classes control the parts of the Gist you’re wanting to customize.

Once you figure out the classes you want to edit, you can add them into your own stylesheet and override their properties. In my experience, I had to add !important CSS declarations to each of the class overrides in order for them to work properly. I normally don’t like using such specificity, but occasionally find it necessary when altering third-party code. Once things are setup, you will have a customized code snippet that can be embedded online, edited from almost anywhere, and backed up via version control.

Finally, if you ever decide to modify the snippets, they will be instantly updated in every location the code is shared or embedded. This way, all of your code snippets are managed within a single location.

In conclusion

Hopefully you found some of these ideas useful, or can at least use them as a starting point for creating your own workflow. I realize this was a fairly quick overview, so if anyone has additional thoughts or suggestions, feel free to share them in the comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *