StackExchange Flair

For a while, the flair on my site has included my stats from Stack Overflow, Server Fault, and Super User. In my article on it, I mentioned I used the <iframe> but I stopped that a few months ago and switched to getting the JSON data for my accounts directly and parsing that. I did this because it was orders of magnitude faster than loading via the <iframe>.

For those who attended my DevDays talks, they would recognize that code as it is the same as I used in my demos.

Then recently, an email arrived:

image

Damn, my jQuery magic was about to end, so what could I do but change? When I started looking at the new flair, I noticed that Stack Overflow wanted me to hotlink the image—that is, have my visitors get it from their server—but the performance for pulling the image was still poor compared to my own website (or so Firebug told me). So how could I improve this?

What I did was use wget—a Linux tool (I’m hosted on a Linux box)—for downloading files, and put that in a schedule to once a day download my Stack Exchange flair and store it on my website. That means it gets served faster. As my numbers won’t change heavily day to day (I’m not Skeet), once a day is enough—a good balance between keeping it fresh and making it cacheable.

The only downside is that my flair usage stats on Stack Exchange will likely drop, but I don’t really care about that.

The wget command is:

wget http://stackexchange.com/users/flair/1c5ab06b9a844e49b817e7eeb31977e0.png -O <path>/files/stackexchange.png