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,

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 – 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=, 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 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, 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!


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

  1. Cool, good work – that book was writen in part by BTs own Michael ( Mahemoff.

  2. David, I saw this site and thought it was great, but only just now realised it was yourself and cool to know it was inspired by Art and Science of JS. Great job!

    Robbie also had a hand in the book, reviewed my Firebug chapter.

  3. Gwen says:

    Thanks , I’ve just been looking for information approximately this subject for ages and yours is the best I’ve discovered so far.
    However, what concerning the conclusion?
    Are you certain concerning the source?

  4. Appreciate this post. Let me try it out.

  5. I don’t drop many remarks, however i did some searching and wound up here They may forget what you said, but they will never forget how you made them feel. – Carl W. Buechner | Davids Computer Life. And I do have a couple of questions for you if it’s allright.
    Is it only me or does it give the impression like
    a few of these remarks appear as if they are left by brain dead individuals?
    😛 And, if you are writing at additional places, I would like
    to follow everything new you have to post. Could you make a list of all of your public sites like
    your linkedin profile, Facebook page or twitter feed?

  6. You actually make it seem so easy along with your presentation but I find this matter to be really one thing that I feel I’d never understand. It kind of feels too complex and extremely huge for me. I am having a look ahead on your subsequent publish, I’ll attempt to get the hang
    of it!

  7. That, plus the added benefits and customization abilities that come with your own wordpress blog for example, makes the paid option a no-brainer for anyone that can afford it.
    You can create a blog with a unique name ( and website.
    With the correct theme, you can accommodate all the nifty little widgets and codes, and may also mean better search engine rankings and tons of
    fresh traffic every day.

  8. Oh my goodness! Incredible article dude! Thank you, However I
    am going through issues with your RSS. I don’t understand the reason why I cannot subscribe to it. Is there anybody else getting similar RSS problems? Anyone who knows the answer can you kindly respond? Thanx!!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: