At the moment I am working on a small iPhone web application. The main goal of creating this application is to check out the capabilities of my favorite phone. While working on this demo application, I wanted to store favorite information for every user. Since I don’t want to set up server side databases for just a small test web application. My first thought was the always hated cookie. But before doing that I wanted to look into the possibilities of the HTML5 database support. I knew that this was implemented in the latest Safari release. But didn’t know if it was in Safari on the iPhone. But you know what, it is!

I won’t go into all the details, but I setup a very simple demo page here: http://radikalfx.com/files/db.html. Visit that link with your iPhone or with Safari 4 to see how it works. The page lets you creating and dropping a table in your client side browser database. And you can insert, select and delete data in this table.

So how does it work
The first thing to do, is create a connection to the database. This can be done with some code like this:

function setupDatabase() {
  try {
    if (window.openDatabase) {
      var shortName = "testdb";
      var version = "1.0";
      var displayName = "Test Database";
      var maxSize = 65536;
      mydb = openDatabase(shortName, version, displayName, maxSize);
      dbReady = mydb != null;
    } else {
      writeStatus("No JavaScript database support!");
    }
  } catch(e) {
    dbReady = false;
    writeStatus("Exception while setting up database: " + e.message);
  }
}

The most important call in this code is the mydb = openDatabase(shortName, version, displayName, maxSize); which opens the database connection for you.

After this is done you can start transactions on this database in the following way:

mydb.transaction( function (transaction) {
  transaction.executeSql(query, data, dataHandler, errorHandler);
});

The transaction requires a query, the data added to the query. And a data handler object which is called when the transaction succeeded and a error handler for handling errors in the transaction.

For inserting data I created the following very basic data handler in my sample code:

function insertDataHandler(transaction, results) {
  writeStatus("Insert row with id: " + results.insertId);
}

Since this functionality is build with SQLite, you can use the documentation of SQLite to figure out what you can do with your queries and how they should be build up.

Since the application I am developing is just for the iPhone, I can safely use this functionality. Of course for normal web development it’s kinda tricky since most browsers don’t support it yet.

For more information on this technology you can also visit the Safari Programming Guide.

It doesn’t happen very often, but every once in a while all the major search engines decide on something together. A week ago something like this happened and they decided on supporting canonical links in pages.

Is this useful for you? That really depends on what you are doing on the web. But for example at my work this really helps a lot. At ilocal.nl we have different ways of linking to company detail pages. For example:
http://www.ilocal.nl/WebDisplayServlet?iqk1=466448876390121&iqf1=id&tid=DetailsDisplay
http://www.ilocal.nl/nl/restaurants/bistro-zilverzoen/290448876390948

Above links contain exactly the same information. The only difference is that the first one is the old URL that we used to use. And then we switched to the second URL for SEO improvement. But /WebDisplayServlet links still get a lot of traffic from pages linking to them.

Now what you can do with canonical links is when the first URL is requested, add the following HTML in the head of the page:

<link rel="canonical" href="http://www.ilocal.nl/nl/restaurants/bistro-zilverzoen/290448876390948"/>

This way all our friendly search crawlers can instantly recognize that it shouldn’t put this URL in it’s index, but use the canonical link. If the search engine then starts crawling the link provided here or if it’s using the data from this page, isn’t 100% clear to me. But if the page is accessed by the second URL then you should not put this canonical link in. So the crawler doesn’t try to look up a page that it’s already looking at.

One problem with this canonical link is that the content of the page should be the same or close to the same as the page that the crawler found the link on. But for ilocal what I would like to do is when a users searches for something. Then let the canonical link point to a static result page. For example if a user links to a search for “hotel zwembad” in “utrecht” (link). Let the canonical link, link to the rewritten results page for hotels in utrecht (link). But in the blog post on google about the canonical links it says the following:

Is it okay if the canonical is not an exact duplicate of the content?
We allow slight differences, e.g., in the sort order of a table of products. We also recognize that we may crawl the canonical and the duplicate pages at different points in time, so we may occasionally see different versions of your content. All of that is okay with us.

So right now I will not provide a canonical link on the results pages of ilocal.nl, but it would be nice to also have a way to specify some sort of parent URL which you want crawlers to use instead of all the URL which is cluttered with refinements by users and other nasty parameters. It’s a good thing that in the next release of ilocal.nl we will remove a lot of defaulted parameters and this might help a bit as well.

Every once in a while you are surfing the web and come across something that you really think, whoa. For me this is most of the time something cool in graphical design or user interaction. But a week ago I came across Yahoo Pipes and just at that moment I also had a good reason to use it.

Now the best way to start is to describe what Yahoo Pipes is. The description from the Yahoo Pipes website is:

Pipes is a free online service that lets you remix popular feed types and create data mashups using a visual editor. You can use Pipes to run your own web projects, or publish and share your own web services without ever having to write a line of code.

So a visual way to mashup different sources of data. So what you for example could do is combine Flickr, Facebook and Last.fm data into one nice tailored data feed and then you won’t have to combine all the sources of data in you web application. But you’ll be able to just do one JSON call and get all you data in the format that you want.

My use case
The reason I found this interesting is because I ran into a problem with the last.fm API. The problem is in the artist.getSimilar method. This method can be used to get a number of artist similar to the artist name provided. This works quite well when you look at the normal XML return value. But when you switch to the JSON output it doesn’t work correctly anymore. The reason for this, is that this method in XML returns a similarartists tag. This tag has a collection of child elements with the name artist. But the similarartists also has a attribute with the name artist. Probably in the last.fm implementation the switch between XML to JSON format is automatic. And in JSON all the child elements will be discarded. So basically rendering the JSON output of the artist.getSimilar method useless.

In Pipes
So I was interested to see whether Yahoo Pipes would be able to fix this problem by parsing the XML and then outputting the proper values. So I created an account, logged in and started dragging and dropping elements around. I created the following flow:

I used the following components to parse the last.fm XML and create a API call that would be usable in JSON.

URL Builder
The first call is a URL builder. This builder has a base URL which is that URL of the last.fm API. In the URL Builder you can add as many query parameters as you want. In order to make the parameters configurable you can hook in Text Input fields. For this functionality I added text input for the artist name and for the API key. This way other users can also use my generated pipe if they like to.

Fetch Data
The URL Builder is connected to the input of a Fetch Data block. What this block does is read in the information from the URL build by the URL Builder and parses it for you. In the “Path to item list” you can already select what exact data it should get from the XML feed. In my case I want all similarartist.artist.

But that still leaves me with the problem that the first Object is just the artist name. In outputting the data that’s really not nice and I want to get rid of that first one.

Split, Count, Simple Math & Tail
In order to get rid of the first item from this list I start of by splitting the output of the Fetch Data block. On the left output of the split I count the number of results. The total amount of items is then put into a Simple Math block. The simple math block then just subtracts 1 from the total count. The other part of the Split block is fed into the Tail block. What the Tail block does is that it outputs only the last items from the provided data. So in the Tail the (total amount – 1) is provided. Why they labeled this field “Emit after position” I don’t know. But I don’t think this is a very proper description.

Sub-element
The last step before outputting the data, is that I only output the item.name. This is because this is the only important element for me at this time and I don’t want to clutter the pipe output with a lot of data that I don’t have any use for.

After saving the Pipe you are then able to connect to the pipe. You can even provide that exact path to use. My pipe can by accessed over here:
http://pipes.yahoo.com/fruitmaster/getsimilarartists?artist=Justice&_render=JSON

Now I do have to say that not all is well in the land of Pipes. A few times the Yahoo online editor didn’t completely get what I was doing and wasn’t working as it should. This was easily resolved by reloading the page. But still it was kind of annoying. Also the documentation is sometimes kinda vague and the preview data in the editor also sometimes fails. But all in all, it’s a nice piece of software that Yahoo set up!