How I add gifs to my pull requests

Whenever I add a feature or bug fix to a project, I usually attach a screenshot. Screenshots don't always demo the full feature, so I started adding gifs, too.
Note: I use MacOS.

My problem was my Quicktime screen recordings would not save as a gif.

Using FFMPEG and gifsicle, I was able to convert my screen recordings into gifs. Even better, I can use my command-line to make the process quicker.

Install the tools

brew install ffmpeg

#dependency for gifsicle, only required for mountain-lion and above
brew cask install xquartz 

# runs the XQuartz installer (YOU NEED TO UPDATE THE PATH)
open /usr/local/Cellar/x-quartz/2.7.4/XQuartz.pkg 

brew install gifsicle

Recording the screen

On macOS, you can record your entire screen Shift-Command (⌘)-5.
The stop button will be in the menu bar.

Using the terminal

Assuming the file-name is screen-recording.mov, I open up iTerm2 and run the command:

cd ~/Desktop
ffmpeg -i screen-recording.mov -s 600x400 -pix_fmt rgb24 -r 20 -f gif - | gifsicle --optimize=3 --delay=3 > out.gif

Posting to Github

After the gif process finished, I will drag and drop the gif into my pull request.

Comments

I automated the command-line process by using Hazel.
I'll post a how to with the script at some other time.

Resources

OS X Screencast to animated GIF
How to record the screen on your Mac