Chop

When we heard that Matt, our lead engineer, was speaking at the RailsConf 2011 in May, we knew that having him build an app on stage was a match made in Backbone.js. We were ready to launch Chop, and it seemed perfect to have Matt construct the app live using Backbone.js then announce it to the Rails community.

Matt didn’t waste any time, throwing on his headphones and hammering out a preso within the week leading up to the May conference. We were his willing guinea pigs as he practiced his presentation over and over again. His hard work definitely paid off …

Pain in the Butt

We’ve all used code review tools before. But they can be expensive and a pain in the butt. It’s just not easy to give quick, one-off feedback on code.

When reading code, we’ve come across something that stirs up such a strong emotional response that we immediately want to share it. Sometimes it’s a line of pure crap and we want to tweet a snarky remark. Or we can’t figure out what the hell a certain function does in jQuery, which means we need some contextual notes wrapped in a URL just so we can shoot it out on the jQuery IRC channel.

We figured there had to be an easier way.

After all, good feedback makes us happy and makes us better, stronger. We already had the technology to give quick feedback on websites with our app Bounce . All we needed to do was figure out how to do the same for code.

Chopping it Up

As boss as it would have been to have Matt build Chop from the ground up during the presentation, we actually worked out the app beforehand. We wanted the app to be something you’d actually want to use.

That meant making it sexy and simple to use not bulky and unsightly. Like everything else we do, we started with some sketches:

We thought through what Chop had to be. Chop had to allow you to chop up some code, chop up your team, and chop up bad code. Of course, it had to be wrapped in sexy, elegant colors — black and red. Because if we didn’t want to use it then you wouldn't want to use it either.

And that got us a simpler way to review code.

Sharpening the Blade

To chop up code, we needed a blade, which is a variable height div element that gets wider as it gets larger.

We made the actual element very wide and used a background image that is the largest the blade can get.

The height of the element depends on how much of the background image is shown when the blade is on screen. The background image of the blade is widest at the bottom. The more the image is shown, the wider the blade. And that creates a desired contrast between chopping up a couple of lines of code versus 10 to 20 lines.

Getting Chopped

When we launched Chop live during Matt’s talk on May 19, the response was phenomenal and not just because Matt was able to slip in a Ke$ha reference or two. Okay, maybe because of that too.

Nevertheless, we had more new Twitter followers and page visits than any of Chop’s predecessor feedback apps. And it didn’t take long before users let us know what we had missed …

@ncdegroot "I expect you are using Ruby, but maybe you can be gracious and add a Python tab? Somewhere at the end of the line?"

Our first thought after reading that and other messages asking for more languages was — "Duh!" We didn’t waste any time to style up a way to choose more languages, adding Python, SQL, and several others the following week.

And others noticed:

Now it’s your turn … Chop it up!

Chop Chop!

Check out our other feeder apps: Axe, Bounce, Clue, Reel, Spur, and Strike.