Some writing by Trek

I recently launched rqst.me, a url shortener service as an excuse to play with Heroku, Twitter’s API, and OAuth. Three cheers all around for a great afternoon and some amazing products! Taking a break from my current project, I’m adding some caching to be a kind Heroku citizen and need to work around the fact that twitter avatars don’t have a static url. If I cache a page with some HTML in it like this:

<img src='http://s3.amazonaws.com/twitter_production/profile_images/60358524/n2203865_44697472_3398_normal.jpg'>

That image will 404 as soon as the user changes their avatar. Twitter wants you to make a public API request each time to get the current image. Obviously, if this happens at the server level I can’t use page caching. I’m getting around this limitation it by delivering the following html to the page instead

<img alt="twitter user:1291711" class="tw-avatar" height="48" src="/images/default_profile_bigger.png" width="48">

where default_profile_bigger.png is a local copy of twitter’s default avatar. I’m then using a little jquery to make an API request (using JSONP) and replacing the src attribute with the current image

$(document).ready(function(){
  var avatar = $('.tw-avatar');
  var twitterId = avatar.attr('alt').split(':')[1]
  $.getJSON('http://www.twitter.com/users/show/'+ twitterId + '.json?callback=?', {},
        function(data){
          avatar.attr('src', data.profile_image_url)
        }
  )
});