LOL Errors

Inspired by lolcommits which takes a snapshot everytime you git commit code. For fun, we decided to make something similar by taking animated snapshots each time an app error occurs and overlaying the error message on the snapshot. Right now it only supports OS X.

When we get an error.

We also get a poor, struggling developer tearing his/her hair out :-)

You’ll need ImageMagick and FFmpeg installed. If you use Homebrew, then it is as simple as:

brew install imagemagick
brew install ffmpeg

We can now install the gem by including it in the Gemfile in your app.

gem 'lolerrors', group: :development

Thats it! You are ready to take some funny snapshots of you fighting with your app. Resulting animations will be output in ~/lolerrors

You can check the code out here https://github.com/oozou/lolerrors.

We tried to convert the captured video MOV file to a GIF using FFmpeg and optimize it using ImageMagick. The file after optimization was still pretty large (~1 MB) compared to its MOV version(~150 KB). It apparently didn’t compress as much as it should have and additionally, it had some problems like the text overlay shaking on the animation.

Turns out that there is something to do with GIF animation type. The file converted by FFmpeg is an overlay animation, which is the simplest type of frame optimized animation which is the default when converting a movie file to a GIF. Each frame of animation only overlays new pixels currently displayed.

Unfortunately, since the nature of a captured movie file is not an overlay animation, this type of optimizing operation can go badly wrong. However, we can convert it to coalesced animation that fills it out completely and displays full pixels each frames.

(images from http://www.imagemagick.org/Usage/anim_basics)

This type of animation is easier for later operations. It makes the optimized GIF smaller and preserves the quality. We can convert it just by adding a command line argument -coalesce to ImageMagick’s utility command convert.

This is an example command to convert a GIF to be a coalesced animation and put some text over it.

convert path/to/original/file \
          -coalesce \
          -gravity South \
          -fill white \
          -stroke black \
          -strokewidth 2 \
          -pointsize 24 \
          -annotate +0+10 "some text" \
        path/to/new/file

The shaking text problem is now solved and the GIF can be optimized much smaller than before :-)