This is a talk I gave two days ago in the Sunnyvale office of Yahoo explaining how I built some of the sites you might have seen like Keywordfinder, GeoMaker, GooHooBi or UK House Prices.

There is actually no magic to it – I am not a superhuman developer. The main trick to build products like that really fast is to use building blocks that work, separate concerns of the application (APIs for the backend returning HTML, JavaScript for behaviour and Ajax and CSS for look and feel).

Without further ado, here is the slide deck for you to go through:

The audio recording

The audio of the talk is available on archive.org

The preview in the slides

One new demo I built for the talk was Flickr Collector which allows you to quickly collect photos from flickr and get the source code for them easily add them to blog posts and articles.

The source codes

• Flickr Collector Source Code on GitHub
• CSS charts on GitHub
• GooHooBi on GitHub (and as a live build screencast)
• Geomaker on GitHub

The talk was filmed and will be available on the YUI Theater soon.

As part of a larger article, I am currently building some tools that use geographical information. The first one is a pure JavaScript solution to link locations in a text to Google Maps and to show a small map under the text. You can see it in action by clicking the screenshot below.

All you need to do to use the script is get your own Google Maps key and embed the script in the page you want to analyse, giving it the ID of the main text element as a parameter:

You can customise the look and feel by writing your own CSS for the generated HTML and setting the addmap.config.width and addmap.config.height properties to resize the map.

Under the hood here is what happens:

• The script grabs the innerHTML of the element and runs it through the open YQL table of Yahoo Placemaker.
• It then takes the data, assembles the HTML and puts together the URI for the map
• The map gets displayed using the Google static map API

The code of addmap.js is available on GitHub.

• Confessions of a book pirate is the first account I’ve ever read of someone from the OCR scanning and book pirating scene. It is amazing how fast those guys are.
• App.itize.us is a good blog triaging the “must have” apps for your iPhone.
• Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 is a tutorial about exactly that.
• Product-recommendation startup Directed Edge now has a free API
• The Cabinet Office blog is praising the apps released based on data.gov.uk, including my uk-house-prices.com
• In case you thought three wolf moon shirts can’t be beat – I give you Fonz socks (also check the favicon of win).
• Google Reader now allows you to subscribe to any web page – even those without a feed!
• I give you the Internet
• In case you missed it – the Guardian’s World Government Data lists all the data available from different governments in one place
• Michael van Daniker has a wonderful browser stats visualization from 2002 up to now. Looks familiar :)

Things that made me happy this morning:

• What love means to a 4-8 year old contains some wonderful quotes
• Windows 3.11 in DHTML – gee all the pain and suffering comes back to me now.
• What everybody needs to know about SVG right now is a good primer on open, XML based vector goodness.
• Home decor for absolute geeks has a lot of things full of win
• Every time I travel, I see kids with Trunkis in London – I want one in my size!
• Tomorrow is a Mozilla Labs Meetup in Mountain view and tonight Douglas Crockford is talking about the history of JavaScript – I’ll be at both.
• Sergey Brin’s homepage at Stanford does not only feature an awesome image applet – no, it also shows that he stayed in the Gates building :)
• Today I will earn my Coffee drinking badge

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 :)