Being able to correctly estimate time is a very important skill for speakers and people who record themselves on screencasts and the like. The media loves you when you can deliver a sound-bite of a certain length. So I thought it would be a fun thing to build a very simple game to test your sense of time.

So go and play Time yourself (source on GitHub). All you need to do is to accept the challenge and you get a message telling you how many seconds you should press your mouse or a key and it will tell you how many milliseconds you were off. Of course it then also gives you a chance to boast about your skills on Twitter using the #timeyourself hash tag.

Under the hood this is a demo for an upcoming event article for Smashing magazine and it uses the timeStamp of click and key events to measure how long you pressed the key or the mouse.

Enjoy!

I am right now in the US for my first week in Mozilla (back to back meetings and lots of discussions and interviews of awesome going on here) and when I got back to the hotel USA had all the Indiana Jones movies playing. Now, I always loved the travel sequences with the moving red line and map and the video of the plane on top (and its copy in Rocket Ranger on C64). As I had my trusty MBA on me I thought I give it a go to re-create the effect in HTML5 - and I did:

You can See the demo online and read the details on the Mozilla hacks blog: Syncing HTML5 video with Google Maps. The source is of course available on GitHub.

I was pretty amazed how easy it is to achieve the effect. Most of playing with HTML5 is simply letting yourself go and have a run for it rather than thinking of how hard it might be.

I was always fascinated by those ads that show you “hot contacts in {city}” not because of the hot contacts, but because they always changed to where I was at the time.

I was also quite interested in the fact that they were always a bit off (again, the city, not the contacts). As I like to find things out, here’s a demo of just how far the location of these ads can be off:

You can see your results by visiting the demo page and allowing it to get your location if you use a browser that supports the W3C geo location API.

Here’s how this works:

You can guess the location of a user by their IP and Rasmus Lerdorf wrote a nice API to do that at http://geoip.pidgets.com/. Using that, you can read the IP in PHP and call the API with cURL:

if ($_SERVER[‘HTTP_X_FORWARD_FOR’]) {

$ip = $_SERVER[‘HTTP_X_FORWARD_FOR’];

} else {

$ip = $_SERVER[‘REMOTE_ADDR’];

}

	
$url = ‘http://geoip.pidgets.com/?ip=’.$ip.’&format=json’;

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$output = curl_exec($ch);

curl_close($ch);

$data = json_decode($output);

$lat = $data->latitude;

$lon = $data->longitude;

This API is only a wrapper for the Maxmind API and for some reason rounds the latitude and longitude from time to time. You can get more accurate results using the Javascript Web Service of Maxmind directly:

The most detailed data can be obtained with the W3C Geo API though:

if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(function(position){

var lat = position.coords.latitude;

var lon = position.coords.longitude

});

}

And that is all there is to it :)

If you do a lot of research using web searches can be frustrating. Different search engines have different results, you need to open things in tabs and in general it can be pretty time consuming to find what you need.

To make this a bit easier I thought it’d be cool to have an interface that searches Yahoo, Google and Bing at the same time and thus I built GooHooBi:

As explained in the screen cast the thing under the hood of GooHooBi is YQL. Instead of fussing about with all the different search APIs all I did was to play with the YQL console and put together the following YQL statement:

select * from query.multi where queries=’

select Title,Description,Url,DisplayUrl

from microsoft.bing.web(20) where query=”cat”;

select title,clickurl,abstract,dispurl

from search.web(20) where query=”cat”;

select titleNoFormatting,url,content,visibleUrl

from google.search(20) where q=”cat”

‘

The query.multi table in YQL allows you to list a few queries which will be executed one after the other on the YQL server. The queries themselves I put together by using the different tables in the console and only selecting what I really need from each of them.

You can try this query in the YQL console and you can see the JSON output.

The rest is pretty easy. Cut this up into a parameterized string and do a cURL call:

$query = filter_input(INPUT_GET, ‘search’, FILTER_SANITIZE_SPECIAL_CHARS);


	
$queries[] = ‘select Title,Description,Url,DisplayUrl ‘.

‘from microsoft.bing.web(20) where query=”’.$query.’”’;

$queries[] = ‘select title,clickurl,abstract,dispurl ‘.

‘from search.web(20) where query = “’.$query.’”’;

$queries[] = ‘select titleNoFormatting,url,content,visibleUrl ‘.

‘from google.search(20) where q=”’.$query.’”’;

$url = “select * from query.multi where queries=’”.join($queries,’;’).”’”;

$api = ‘http://query.yahooapis.com/v1/public/yql?q=’.

urlencode($url).’&format=json&env=store’.

‘%3A%2F%2Fdatatables.org%2Falltableswithkeys&diagnostics=false’;

	
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $api);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$output = curl_exec($ch);

curl_close($ch);

$data = json_decode($output);

Then loop over the results and assemble the HTML output.

You can check the source code of GooHooBi.

• The HTML/JavaScript version JS source JS live.
• The PHP version PHP source PHP live
• The PHP “API” API source API live

In addition to this, here’s a half hour live coding screencast how to build something similar:

Building a search mashup with YQL using Google, Yahoo and Bing – live :) from Christian Heilmann on Vimeo.

The source of the code built in this screencast is also on GitHub.

As several people asked how I did the easier Flickr interface, I wrote up some step-by-step instructions, analyzing the issues and then taking the API to work around them.

Check out How to create an alternative Flickr interface – step by step.

This is one example where providing a good API can empower developers to remove barriers you might not be aware of for you. I hope to be able to show you more of those in the future.

The code examples are available and are licensed with BSD, so feel free to re-use them.