RAPaul.com

A Behavioural World

Or at least a behavioural twitter world,

http://abehaviouralworld.rapaul.com/ is a little project just launched which attempts to distill behaviours from twitter. Given my recent rapture in the world of BDD, the behaviours we are distilling are those that match the scenario format.

Given ...
When ...
Then ...

If you look carefully at the page source, you will notice a large portion of it is dedicated to an HTML comment containing the list of features and the breakdown into scenarios. To keep things easily accessible, each time I thought of a scenario I added it to the page, once completed, it was marked with [Done].

For example, starting with the most important feature:

  Feature 1)
  In order to see how BDD syntax is being used on twitter
  As a BDD zealot
  I want to see tweets that contain 'given', 'when' & 'then', in that order.

I then broke this feature down into scenarios:

  [Done]
  Given the search returns more than matching 10 tweets
  When the user views the page
  Then the 10 most recent tweets should be displayed

  ...

Each time a scenario was satisfied, I marked it with [Done]. Not all scenarios ended up being all that important, the following scenario is still pending.

  Given the search returns no matching tweets
  When the user views the page
  Then instead of showing any tweets a message should be shown

In fact, if we attempt to tie this scenario back into the vision of the website (distilling behaviours in twitter), then we realise it adds no value. If no one is tweeting about behaviours, then it is highly unlike that anyone will be visiting our behaviour distillery.

There are a couple of features (3 & 4) in the source which haven’t yet been implemented.

  Feature 3)
  In order to emphasis the given/when/then syntax
  As a BDD zealot
  I want to see give/when/then highlighted in the displayed tweets

  Feature 4)
  In order to encourage BDD syntax usage on twitter
  As a BDD zealot
  I want to be able to tweet from this page using a BDD template

If anyone would like to work on these features, or even just break down some useful scenarios, please feel free to fork the code on github, provide me with a diff or add a comment (note at the time of writing github looks to be having some caching issues on the ‘Source’ tab).

What no executable scenarios?
Oops, nope. I’m yet to get into the world of writing executable scenarios in Javascript. If someone has some knowledge in this area, please feel free to fork the github repository and start automating the scenarios from the page source.

PS: This idea was partially inspired by a tweet by soulnafein which read:
My girlfriend is taking the mickey out of me because recently I started explaining things using the Scenario format (Given When Then) :-)

Tags: bdd, features, javascript, scenarios, twitter

The making of Rockin’ Robin

This post details the making of Rockin’ Robin, a client side mashup between last.fm and twitter.  If you missed my introduction to Rockin’ Robin, you can read the post here. Or you can try it out @ http://robin.rapaul.com/

Querying

What makes this mashup special is that the entire mashup runs client side, all requests to the last.fm and twitter services are made in the user’s browser.  Being a purely in-browser mashup there are some restrictions as to what requests can be made, specifically current browsers do not support cross-site requests for regular XmlHttpRequests (XHR).  While this is a proposed feature for upcoming browsers, we need a solution that works with current browsers.

Enter dojo.io.script.get(), Dojo’s workaround for cross-domain requests.  The general gist of this hack is that it adds a script block to the page with the src attribute set to the query URL, the server then returns the JSON data as the content of the script block, this technique is known as JSONP.  Fortunately Dojo hides the complexity of this hack behind a similar interface to the regular request (dojo.xhrGet()).

Last.fm

Accessing last.fm’s API requires a registration key, which can bet set up on http://www.last.fm/api This page also details all the available API methods broken down into areas.  For the Rockin’ Robin mashup we are concerned with finding the most recently scrobbled tracks which are accessible via the user.getRecentTracks method.  Below is a code snippet for making the request to load the data from the last.fm API.

The data returned by this request includes that meta information for the last 5 tracks submitted to the user’s last.fm profile.  This information includes the artist, album (including cover art links), track name as well as when the track was played.  This information is used to build up the recent track HTML as shown below.

Twitter

The next step is to query twitter for tweets that contain the keyword artist and title combination.  Twitter’s API can be viewed at http://apiwiki.twitter.com/Search+API+Documentation.  No registration key is required, simply make a call to their public search API, e.g.  http://search.twitter.com/search.json?q=MGMT+Kids

It is now simply a matter of extracting the required data to build the elements to add to the page.

Building the HTML

Dojo provides a handy method for setting attributes on nodes (attr), the API was designed for existing nodes, however it can be used by passing in a newly created node. Here we use dojo.query to return a nodelist which gives access to the attr function then returns the first item (the node we just created).

I’ve heard from @amatix that a Builder equivalent is slated for a post 1.2 release of Dojo which will hopefully do away with the above build function and make element creation tasks simpler.

Bookmarking Support

To allow users to bookmark and link to their Rockin’ Robin page, the username is stored in the URL hash. This is a two stage process, the first is to append the username to the URL, e.g. http://robin.rapaul.com/#GexNZ The below snippet strips off any existing hash and adds ‘#username’ to URL.

The username also needs to be extacted from the URL when the page is first loaded.  The username is then used to populate the username text box and kick off the mashup.

That wraps up the major technical details of Rockin’ Robin, you can browse the full source on github.

Tags: dojo, dojotoolkit, javascript, json, jsonp, last.fm, mashup, rockin' robin, social, twitter, web