Project Twitter - Fun with Jquery
Recently it occurred to me that everybody's favourite micro-blogging / life-streaming / meta-water-cooler Twitter, could actually be quite a useful tool for doing some lightweight project tracking. So I decided to experiment a bit.
The logic is as follow: lots of my friends in web development-land have projects they're working on. They almost always post something to the effect of "has finished unit testing", "has finished design number two" or "only 2 more bugs til code lockdown". What if, like using @ for replies or hashtags you posted project updates in a standard form. That way you could poll the API for what everybody in your team had done, and how close they were to complete.
Idly I posted ~20% of experiment done to my feed. This is of course is all you need for this kind of rudimentary tracking. A marker ~, a percentage, and the name of a project. Then all you need is a way to get it all.
So I had a bit of a tinker around in the lab. Currently my go to tool for quick tinkering is Jquery (which is a useful Javascript framework that gives you good tools and fixes, while not letting you feel you're abandoning coding entirely). Jquery rather handily has JSON support, which essentially allows you to pull in offsite data in the form of a Javascript object. Ideal for pointing at the Twitter API, which can boot out JSON data for your own or the combined-with-friend's feed. This makes bashing together some code for this in Javascript pretty easy:
$.getJSON('http://twitter.com/statuses/friends_timeline/'+username+'.json?callback=?', function(data){
$('#project').append('<table><tr><th scope="col">Name</th><th scope="col">Project</th><th scope="col">Completed</th></tr></table><p>Updates from: <strong></strong></p>');
$.each(data, function(index, item){
if (item.text.match(/^\~\d?\d% of /)) {
$('#project table').append('<tr><th scope="col"><img src="'+ item.user.profile_image_url + '" alt="" >' + item.user.name + '</th><td>' + item.text.substring(8, item.text.lastIndexOf('done'))+ "</td><td>"+ item.text.substr(1, 2) +"%</td></tr>");
$('#project p strong').append(item.user.name+', ');
}
});
});
I'm not showing all the code here for space, but most of it is there. It assumes you're getting the username variable from somewhere, elsewhere in the script or a form field. The body of the script essentially grabs a feed and on successfully getting it does some parsing. It looks for ~xx% of with a crude regular expression and pulls all the appropriate tweets out into a table in the #project element (with some appropriate formatting like cutting them off at done). A quick way for showing what everybody posted about their projects in the last 24 hours on a webpage. You could, of course, do something clever with Adobe's AIR and turn it into a desktop app too.
Obviously this isn't full app, but it encapsulates one of the reasons why Twitter is so popular: it's the command line of the web. It's very easy to think of a concept that takes some regularly updated text content and implement it on top of twitter with minimal effort. It's also equally easy to push said idea out to other people if you want, as by its nature people will notice the change in how you use Twitter.
Course now it occurs to me that this kind of thing might be a fun tool to test out some WAI ARIA stuff with.