This weekend I made my OVER 9000 pull request to Rails, that features a demo of the functionality in GIF format. I’ve had a number of people ask the same question “what is your GIF workflow?”. For the detail oriented of you in the crowd, here it is.

The Content

I filmed my screen using Screen Flow, which I used to do all my work on UT on Rails, it’s not free at $99, but does editing, exporting, and managed to completely displace Final Cut Pro from my workflow. I recommend it. Another user suggests using quicktime which can do screen recording for free.

I took the video and then cropped it down to 560x315 and exported using H.264, this produced a teensy 619kb .mov file.

The GIF

Once I had a video I opened it up in Photoshop and used Save for Web to save as a .GIF. You can do this, or I’ve since learned that there is a free way to do this using FFMPEG and Image Magick that actually produces a smaller file. First install FFMPEG:

$ brew install ffmpeg

Then navigate to the correct directory, and assuming your file is named ScreenFlow.mov you can run this to produce a GIF:

$ ffmpeg -i ScreenFlow.mov -pix_fmt rgb24 output.gif

You’ll notice the output.gif is huge-normous, tipping the scales at over 100mb. To cut this down to size you can use image magick:

$ brew install imagemagick

Then run:

$ convert -layers Optimize output.gif output_optimized.gif

Thanks to this poster on super user for the shorthand. Here is a shell script to do that same thing, and if you’re looking for more vibrant results this user had some helpful tips.

Now you just need to post your amazing creation.

Posting

Now we’ve got a GIF sitting pretty around 182kb or so, but we need to put it into our PR somehow. You could drag and drop it into Github or you can upload it somewhere publicly accessible for re-use later. Use your favorite cloud storage service here, I like Cloud App. The service allows you to drag files to your menubar and share them. Make sure you’ve got the direct link (it should end in a .gif).

Once you’ve done that just add it as a markdown image ![title goes here](url goes here) and put it in your pull request, so this:

![Path Helper Demo](https://f.cl.ly/items/3C121F3E0P0A2o092I0w/output_optimized.gif)

Becomes this:

Path Helper Demo

Enjoy

Submit your PR, kick back relax and enjoy the GIF you’ve bestowed upon humanity. Remember with great GIF power comes great GIF responsibility. Don’t post useless or unnecessary GIFs just because you can. Remember that maintaining a project is tough enough without having to look at looping cats all day long. So only add them when they truly benefit the conversation and when it is tasteful. If no-one abuses this functionality, then Github won’t have reason to disable gif support.

Thanks for sticking around, hope you learned something. Now go out and contribute to open source so you can feel like this: