They may forget what you said, but they will never forget how you made them feel. – Carl W. Buechner

Last week I decided I was going to have a quiet weekend, so before I left the office on friday I took a look at our communial bookshelf and picked up a new book. This time it was the turn of “The art and science of javascript“. The book is pretty good,  it piqued my interest in the subject. I’ve written a bit of javascript in the past, all client side validation, prettyness, nothing great. I certainly hadnt done any real AJAX. The thing with calling it AJAX is that it suggests its some sort of framework, AJAX sounds scary. Its not, to be honest “AJAX” is actually so, so simple. Take a look at the wikipedia page… just jump straight to the code example, http://en.wikipedia.org/wiki/AJAX.

In the back of the book there is a mash-up of flickr and google maps. I decided to do a mashup of twitter and google maps. Im well aware of twittervision, but the problem with it is that its the public-time line, not your friends, sooo… i decided to mash-up your friends updates with google maps in a twittervision style.

Heres how I got on (abridged):

Iteration 1 : Get one thing working. Got api key from google maps, displayed a simple map

Iteration 2: Put the parts together. I put some ajax code (like that on the wikipedia page) and tried to get the results of calling the endpoint – http://twitter.com/statuses/friends_timeline.json. It didnt work.. then i realised i needed to provide http basic auth credentials.. still didnt work. (I should note i used firebug to debug the javascript.. best tool out there)

Then i realised… cross site scripting problems. Basically this means you cant go from one website to another and get data, through the browser. IE and firefox will thing you are trying to be naughty and stop you. There are several work arounds

Iteration 3: Keep the pace by keeping it working. One work around is to send the request not from website a to website b,  but from website a, to website a… which then sends it to website b on the server side and returns the response to the client. I wrote an 8 line c# http server so if you submitted a request to http://localhost/proxy.html?url=http://twitter.com/statuses/friends_timeline.json, it will proxy the request. That worked fine. So i linked the twitter data with the google maps data and everything worked

Iteration 4: Refactor, refactor . I wanted to get rid of the server side proxy as I wanted it totally client side. Enter this little gem Twitter Undocumented Hacks (!!!!) . The bit i used was the Dynamic script tag.

Let me explain how this works. Its another work around to the cross-site-scripting problem. You dynamically (i.e get javascript, when the page loads, to) write a javascript <script> tag, with a url of http://twitter.com/statuses/user_timeline/ 816092.json?callback=statusCallback (statusCallback being the name of a javascript function you’ve already written), this then returns you some data to the fucntion specified, this data is in json format.. you can the do what you please with it. I iterated over it and displayed it on the google map, with pauses.

 subnote: JSON, when dealing in javascript is the weapon of choice, xml is tricky to play with in javascript, its more like string manipluation.

Iteration 5: Polish. Theres a few notations in twitters that people use, one is L:Whereami, e.g. l:canning town, london. So, i wrote some logic in javascript to parse this out, and if its there, display the twiiter as that location on the map, if not, default to the location they put in when they registered on twitter. The google geocoding (turning words and letters into lat/long co-ordinates) does all the hardwork.

Anyways, check it out http://www.simplewebphone.com/YouTwit.html, as soon as the page loads you’ll be asked for your twitter credentials, type them in and see what you think.

Over the next few weeks ill see how I can jazz it up!