To extend the White Paper Bible site, I asked Kerry Layton to design a calendar for the Advent season. You can view it here: http://www.whitepaperbible.org/advent.

Initially I was thinking Advent Sausage (http://lovelypackage.com/konecke-advent-sausage/), but I’m glad Kerry designed a beautiful, clean calendar. Kerry, btw, loves to design calendars and you can see some of his work over at Design Audit (http://www.designaudit.net).

I only had a few days to pull it together. Like everything else, it was a last minute idea. I wanted simple, feature Bible passages relevant to Advent, and a cool reveal animation.

So, I went on the hunt. First up, what in the world is Advent and what does that have to do with an Advent Calendar?! I’m not overly religious in the liturgical sense, so Wikipedia to the rescue.

Advent: http://en.wikipedia.org/wiki/Advent
Advent Calendar: http://en.wikipedia.org/wiki/Advent_calendar

To do the flip animation I new I wanted jQuery. I needed to both flip and resize the tile to display the passage. I found a bunch of stuff out there, but the one that really did the trick is the Flip! jQuery plugin found here: http://lab.smashup.it/flip/.

The recipe for the flip plus the scale I found over on the Work [at] Play blog: http://think.workatplay.com/content/workatplaycom-how-it-was-made-flip-and-scale-effect. Great stuff!

As I added the content, I either needed to add a scrollbar or let the content run. The scrollbar proved to be the best solution, so I went with my favorite, the jScrollPane plugin (http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html). Make sure to use the source on Google code (http://code.google.com/p/jscrollpane/) or the examples. The ZIP file is somewhat outdated. For adding mousescroll functionality, I use the same plugin posted with the jScrollPane examples, but the updated version at http://plugins.jquery.com/project/mousewheel.

I should also mention that this site is Ruby on Rails, and the advent calendar is really just a static html. The way I implemented this is using my Pages controller which serves up the less dynamic content on the site (like the About page). I added a route for /advent and then put all my advent specific assets (js, css, images) into public/advent to keep things a bit cleaner. I could probably keep the js all together with my core js files. Then in my view/advent.html I updated all the asset references to pull from the /advent sub dir. Merging static content into a Rails app isn’t really hard, it’s just that Rails developers like do know the right or approved way, and there doesn’t seem to be much consensus on that for static content. If you have a better way, let me know.

And that’s about it. Checkout the final result (well…final until I think of something to enhance it). http://www.whitepaperbible.org/advent.

Enjoy.

For the past year I’ve been working during my free time on a personal project called White Paper Bible (http://www.whitepaperbible.org) under the umbrella of my development company, Simply Profound (http://www.simplyprofound.com). Just launched is a micro-site promoting White Paper Bible and the companion iPhone app (http://app.whitepaperbible.org).

White Paper Bible is a personal Bible study tool that can be used as a daily devotional, a topical Bible, a Bible promises reference, and pretty much whatever a user can think to do with it. Users collect verses by whatever grouping is meaningful to them. One of my favorite features is the ability to stream a professional recording playlist of the entire user-created paper.

What’s with the name? A “white paper” is commonly defined as “an authoritative report or guide that often addresses problems and how to solve them; used to educate and help make decisions”. Well, that sums of the Bible for most Christians. And it works on other levels too, but I’ll leave that for you to discover.

For a quick overview of the tech bits, the site is built with Ruby on Rails and some jQuery love. I use Shadowbox.js for the paper “focus” feature that displays inline divs. The iPhone app is native Obj-C and talks to the site via JSON calls facilitated by HTTPRiot (http://labratrevenge.com/httpriot/). The site talks to the ESV Bible web service (http://www.esvapi.org) using a forked version of Geoffrey Dagley’s great ESV Bible gem (http://github.com/gdagley/esv_bible).

The iPhone app is not currently available in the App Store, but as soon as it is I’ll post a link here.