amdavidson

Speedy "Dynamic" Elements on a Static Page

posted on 2012-02-29 at 09:23 AM - amd.im/kIER

Moving to a custom static site generator killed my old solution for Twitter and Pinboard integration.

To mitigate this I came up with the following javascript that would pull the information from publicly accessible JSON feeds and integrate it on the client side:

$(document).ready(function() {

     // using jquery built in get json method with twitter api, return only one result
     $.getJSON('http://api.twitter.com/1/statuses/user_timeline.json?screen_name=amdavidson&count=1&callback=?', function(data)      {{

         // get the date and make it pretty
         var date = Zepto.timeago(data[0].created_at.substring(3,11) +
           data[0].created_at.substring(25,30) +
           data[0].created_at.substring(10,19) +
           data[0].created_at.substring(19,25));

         // result returned
         var tweet = data[0].text;

         // process links and @replies
         tweet = tweet.replace(/(\b(https?):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, function(url) {
             return '<a href="'+url+'">'+url+'</a>';
         }).replace(/@([_a-z0-9]+)/ig, function(reply) {
             return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
         });

         // output the result
         $("#tweet").html('"'+tweet+'"');
         $("#tweet-date").html(date);

         // display the twitter block
         $("#twitter").css('display', 'block');
     });

    // using jquery built in get json method with pinboard api,
   $.getJSON('http://feeds.pinboard.in/json/v1/u:amdavidson?format=json&cb=?', function(data)      {

         // get the title.
         title = data[0].d;

         // get the url.
         url = data[0].u;

         // get the description.
         description = data[0].n;

         // get the date and make it pretty.
         date = Zepto.timeago(data[0].dt);

         // output the result
         $("#pin-title").html(title);
         $("#pin-description").html(description);
         $("#pin-link").attr('href', url);
         $("#pin-date").html(date);

         $("#pinboard").css('display', 'block');
     });

});

Unfortunately, this was very slow, especially for Pinboard. Adding 1-1.5 seconds to my page loads. In an effort to alleviate this I started caching the JSON files on my server with these cron jobs, not wanting to put too much additional load on my server, I only pull them every half hour.

0,30 * * * * /usr/bin/curl -s -o
pinboard.json
'http://feeds.pinboard.in/json/v1/u:amdavidson?format=json&count=1'
0,30 * * * * /usr/bin/curl -s -o
twitter.json
'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=amdavidson&count=1'

Then changed the .getJSON lines to this:

$.getJSON('/dynamic/twitter.json', function(data) {

//and

$.getJSON('/dynamic/pinboard.json', function(data) {

Enjoy the faster page load times.

Spring's Coming Early

posted on 2012-02-24 at 10:19 AM - amd.im/q8GS

Backpacking in Pt. Reyes

posted on 2012-02-20 at 08:47 PM - amd.im/gWWC

Slopes and Santas

posted on 2012-02-06 at 09:22 AM - amd.im/gAeN

A Bicycle for Bicycles

posted on 2012-02-01 at 08:40 PM - amd.im/1CXB

about

amdavidson.com is a simple blog run by Andrew Davidson, a manufacturing engineer with a blogging habit. He sometimes posts 140 character tidbits, shares photos, and saves links. You can also see posts dating back to 2005.

Search