No, I am better than that! » AJAX

Adding a “Latest Tweet” widget to your site

Rick Osborne — Tue, 12 May 2009 16:05:16 +0000

Let’s face it: where Ben Nadel goes, many will follow. Including me. When he redesigned his site last weekend, he made his latest Twitter tweet a prominent feature above the fold. I thought that was a good idea, so I set about doing it for mine. Here’s a quick and simple way to do it that’ll take you less than 15 minutes.

I’ve done mine with an AJAX gateway so that it is added asynchronously to the page after it finishes loading. However, you’ll see that it would be easy enough to include inline using the same framework. You want to use a gateway not just because of cross-site AJAX issues, but also because you want to rate-limit how often you hit the Twitter API.

The gateway does two things: (1) fetch and cache your latest tweets, and (2) filter them to exclude tweets that wouldn’t make sense on your site. Here’s a very simplified version of the gateway code:












  
  if(structKeyExists(application, "twitter-latest")) twit = application["twitter-latest"];
  else {
    twit = structNew();
    twit.lastUpdate    = createDate(1970,1,1);
    twit.lastTweet     = "";
    twit.lastTweetDate = "";
    twit.lastTweetID   = "";
    application["twitter-latest"] = twit;
  }
  needUpdate = true;
  if(structKeyExists(twit, "lastUpdate") and isDate(twit.lastUpdate) and (dateAdd("h", timeoutHours, twit.lastUpdate) gte now()) and structKeyExists(twit, "lastTweet") and isSimpleValue(twit.lastTweet) and (twit.lastTweet neq ""))
    needUpdate = false;
  
  
    
      
      
      if (cfhttp.statusCode contains "200") {
        tweets = xmlParse(cfhttp.fileContent);
        statuses = xmlSearch(tweets, "/statuses/status");
        if (isArray(statuses)) {
          for(i = arrayLen(statuses); i gte 1; i = i - 1) {
            status = statuses[i];
            if (not (structKeyExists(status, "in_reply_to_user_id") and isNumeric(status["in_reply_to_user_id"].xmlText))) {
              twit.lastTweet     = xmlFormat(status.text.xmlText);
              twit.lastTweetID   = xmlFormat(status.id.xmlText);
              twit.lastTweetDate = xmlFormat(status.created_at.xmlText);
              twit.lastUpdate    = now();
            }
          } // for i
        } // if statuses
      } // if 200
      
    
    
  


  #twit.lastTweet#

I’ve single-threaded the bulk of the code, as well as done something that many consider evil: a try/catch without any error-handling. However, what useful thing would you do if you encountered an error?

My filter logic is straightforward: don’t show replies. If I’m replying to someone, it probably wouldn’t mean anything to a random visitor on my website, so why bother showing it?

The AJAX code to add this to your site is even simpler. I used jQuery, as I’ve already got it in place on my site, but the vanilla JavaScript version wouldn’t be much longer.

The replace() regular expressions do a passable job of auto-linking URLs, Twitter user names, and hash tags. The URL regex is especially fragile, but since most URLs posted on Twitter are shortened, it’s good enough. You could add in more error-checking logic for when Twitter goes down, maybe hiding the Twitter box altogether in such cases.

When is a TR not a table row?

Rick Osborne — Fri, 13 Apr 2007 20:12:47 +0000

The answer is: “it depends on which browser you ask”. I ran into a quirk in IE6 while debugging some AJAX-related code this afternoon, and I figured I’d share it. I had some JavaScript code that did something like this:

var t = document.createElement('TABLE');
var tb = document.createElement('TBODY');
var tr = document.createElement('TR');
// create table cells with just numbers in them
for (var i = 0; i < 5; i++) {
	var td = document.createElement('TD');
	td.appendChild(document.createTextNode(i));
	tr.appendChild(td);
} // for i
// ... lots of other magic happens here ...
// later, upgrade those cells to links
for (var i = 0; i < 5; i++) {
	var a = document.createElement('A');
	a.href = 'foo.cfm?i=' + i;
	while (tr.cells[i].childNodes.length > 0)
		a.appendChild(tr.cells[i].firstChild);
	tr.cells[i].appendChild(a);
} // for i
// add the completed row to the table body
tb.appendChild(tr);
// add the table body to the table
t.appendChild(tb);

This worked wonderfully in Firefox and IE7. But when I flipped over to IE6, it broke hard. It would get past the line setting the href for the link, but the while loop would never execute.

I generally try to wait until the last second to add new elements to the DOM, on the theory that modifying them before they are part of the DOM won’t cause the browser to re-render them or even notice them. On a whim, I moved the last two appendChild lines up above the second for loop. Sure enough, IE6 got unbustified.

Apparently, the tr element wasn’t being promoted to being an actual table row until I added it to a table. Before then, it was just an element that happened to have tr for its name. Thus, it didn’t receive the cells magic until after its promotion.

Tricky, tricky.

Light dawns on marble head

Rick Osborne — Mon, 26 Mar 2007 21:34:19 +0000

Ever had one of those weeks where everything seems to be doom and gloom and you are cranky and snarky but you don’t know why? Then, out of the blue, everything just comes together and you have a moment of perfect clarity?

Today was epiphany-central for me. No less than a half-dozen conversational threads over the last month ran full-steam into one another in one staggering blast of “hey! you! pay attention!”. Do you see how many tags/categories apply to this post? It brings everything together for me.

I have an idea for an app. A killer app. It would take a while to build, and box, and sell … but it would soooo be worth it. Financially, professionally, and mentally.

And the weird thing is that I am in a strong position to do it. I’ve had other ideas that I’ve thought “man, I wish I was better at ThingXYZ, because that’s all I’m missing”. But for this one … I don’t have that excuse. I could actually make it work, from start to finish. I’d just have to commit. That’s not a little scary, I must admit.

The irony here is that I was just this morning ranting to an audience about how bummed out it makes me that there are so few shining stars in the ColdFusion development community. That is, not many are taking initiative to forge new paths instead of just taking what is handed to them, and challenging the idea of what you can and cannot do with ColdFusion. I’m not looking to be a shining star, but not taking an opportunity to do something this new and this cool … would be profoundly hypocritical.

My first inclination is to talk about it. Obviously, by nature, I’m not a secretive person. But for this … I need to talk to some people and see if I’d screw myself over. Granted, I was kindof talking out loud on #coldfusion on IRC when it hit me, so it’s certainly not a perfect secret. But, better safe than sorry from here on out. If I can talk about it, I’ll be a blogging fool for the next 3-6 months.

Wish me luck.

Clarification: I am not saying the CF community is a bunch of dolts, nor am I saying that there are no big names. Sean C, Ray C, Mark D, and a bunch of other folks are doing some really great work. That previous statement was just an oversimplification of a very long discussion.