I'm in the middle of working on a small Rails app (mostly as a playground for the google maps API) and wanted to get those lovely relative dates that are so common these days. They're easy to do (distance_of_time_in_words) and I think they provide a bit of polish over showing some strftime'd date stamp. Additionally, relative times are timezone neutral (which happens to be important for what I'm working on).
One drawback to relative times is the added baggage when using Rails caching. "1 minute ago" is only valid if you plan on expiring your caches every minute (yuck!).
Well, I want to have my cake and eat it too!
Of the trifecta of web technologies (HTML, CSS, JS) HTML has already failed to provide the ability I need. My content needs to remain static for scaling reasons. This isn't really a problem of style either and that leaves only one alternative: Javascript.
new Date()
At first I thought I'd need to do some expert regexp'ing on Time#to_s, turn that into a hash of some sort and pass that data as json into a Javascript to parse the date. It turns out that the constructor for Date in javascript can take a string and automatically parse it into a happy object. Give it a shot in firebug:
new Date('Fri May 16 14:29:24 UTC 2008');
should snag you a fancy
Fri May 16 2008 10:29:24 GMT-0400 (EDT)
or something similar (since javascript automatically shows the output in your timezone). That, in my opinion, is pretty nice. Javascript will automatically create Date objects from the default time format in my views. Beautiful.
Now to turn them into relative dates. I checked the code in the Rails API first to see if there was any fancy magic going on behind the scenes. Turns out like most time and date related code there is just a bunch of division by standard time units. Ruby thinks of time in units of 'seconds', javascript uses milliseconds, but the math is pretty much same-same.
Shamelessly using the stolen math, I wrapped it all in a tiny Prototype-based class. You can see that class in my github.
In my application's main javascript file (where I stuff all my class loading)
document.observe("dom:loaded", function() {
$$('.relative_date').each(function(date) { new RelativeDate(date) });
});
That will, once the dom is loaded on a page, find anything with the class of 'relative_date' (feel free to insert use whatever class name you prefer, obviously) and create a new RelativeDate object.
In my views I have
%span.relative_date= @lodging.created_at
Which outputs plain old html of
<span class="relative_dates">Fri May 16 14:30:41 UTC 2008</span>
Which javascript remakes to
<span class="relative_date">about 4 hours</span>
Now I can cache wherever it makes sense to and still maintain relative dates.