John Keith

Hi, I'm a developer that loves Ruby, Rails, Angular, and iOS.

Treehouse Badges for Octopress

When I came across Riley Hillard’s tutorial on making a Treehouse badges widget, I knew I had to have something like this on my site. While I considered using Riley’s fantastic ReportCard.js, it dawned on me that recreating the widget might be a great way to get more experience working with hashes, JSON and the like. After a bit of experimentation on Codepen, I had a functional piece of jQuery and a little CSS to give it a decent appearance (though really that’s mostly due to those spiffy looking badges).

I toyed with the idea of crafting a Liquid Tag that could be used anywhere in a Octopress blog, but decided on building it as widget for the sidebar instead. To make it a little more interesting, I did end up writing a Rake file to automatically add the widget’s files into your Octopress folder and add the proper configuration variables to _config.yml. If you are an Octopress/Treehouse fan then go check it out!