I recently found out about malo, a ultra small CSS grid layout library. When I say ultra small, I mean ultra small, 0.25k compressed! It supports various numbers of columns and page widths, and most impressively, nested columns. So if you need a CSS column library that works in all browsers, check it out. Its not as complete as Blueprint, but then, I think Blueprint has lost its way and tries to do far too much.

I have recently been experimenting with writing travel related web apps for the iphone. Its all great. Some of the HTML5 stuff in the new version of iPhone Safari is great (local databases etc..). However, one thing has been bothering me. I cant use Google Maps as I would like to. Ok, I can include links to the google maps site that open in the native google maps application, but this is not optimal because:

• It takes the user out of my web application
• Does not allow me to integrate the maps with my application. I.e. add many markers. Do something when a marker is clicked.

So this got me thinking, would it be possible to do a ‘lite’ version of the javascript maps API for the iPhone? Before the newest version of mobile Safari, this would not have been possible. Fundamentally you cant drag the map! However, with the new version Apple introduced a javascript API for sensing single and double finger drag events. 

So, I went about knocking up a very basic test version (try it on your iphone, tinyurl: http://tinyurl.com/3g5tg4). Is buggy, basic and sub-optimal, but proves it could work nicely. Try zooming with the double finger pinch action! 

I also tried the new webkit CSS transforms to allow free zooming and rotation, however they are buggy and slow on the iphone! Oh well! Anyway, maybe we can have google maps lite on the iphone?

I am a big fan of the google maps on the iphone. I particularly like the way that the little pins drop from above and bounce. I wanted to find a way to do this in the standard google maps, and after a little hacking, I have found a way. Sadly though, the technique detailed here works only with the current version of maps. This is because it interfaces directly with the compressed google code, where the function and variable names are randomised (obscured) with each version increase. Thus, to make this work you need to specify the current version number (2.123) in the map file include.

Anyway, to cut a long story short, I figured, that as you can make markers bounce after you drag them, it should be possible to make them bounce in other situations. I was looking for an function named ‘bounce’ or similar, but it was a bit harder than that! After tracing the flow through the obscured maps code (!) I found that you can drop a marker from above using the following code:

 

// Make bouncable
if (!marker.Xa)
{
marker.Xa = true;
marker.qo(false);
}
marker.Pa = height; // Current height
marker.ri = height; // Max height
marker.av = 1; // Direction (+ = down)
marker.tc(); // Go baby!


Here is a demo. The markers also ‘hop’ when you move the mouse over them. In the source code there are three functions,  dropMarker, hilightMarker and dehilightMarker. Check them out!

Please, please, please google can we make a publicly available ‘bounce’ function?

On a recent trip to Dublin I was rather taken by the buttons they have on their pedestrian crossings (yes I know, I am sad):

Compare this to the overly engineered UK equivalent:

Is it me, or is the main function of this device to have its button pushed? Why then does the UK version have a really, really small button that protected by a raised ring to make it even more difficult to push? I love the simplicity of the Irish version. Its main purpose is to be a button, therefore the button is huge and easy to push. Lovely.

Today and Tuesday I have given myself the day off. What a concept. I plan to do no work whatsoever, not even touch my blog (damn! failed already). I am now off to do something I have not done for a long time, read a book! Luxury…

Amazon S3 is a great service for hosting large media files for your site. At World Reviewer we are soon going to be rolling out our own video hosting for tour operator’s videos. Video hosting has been an interesting little project, and S3 has really made it easier for us (not to mention cheaper).

S3 by default hosts files in the US, but it is possible to host content in Europe. One thing we noticed early on, was that videos did not always stream as smoothly when hosted on the American servers and viewed in the UK (and we assume other European countries). Because of this we wanted to offer “geo-targeting”, where we can host the files twice, once in America and once in Europe and choose the best based on the user’s location. Of course, this means we have to pay for storage twice, but typically bandwidth will be the most expensive element of you bill, so a few more cents for extra storage might not be a problem. Well thats how it is for us, you mileage may vary!

It would be great if S3 had geo-targeting by default, but it does not, so how can we offer it?

Actually its quite simple. Basically we will set up two S3 buckets, say “us.media.worldreviewer.com” and “eu.media.worldreviewer.com” being the American and European buckets respectivly. We then decide between the two bucket urls based on the users location.

Geo-coding of IP addresses is very easy and free (well at least down to the country level). There are a variety of webservices (like hostip) however, we wanted something that could run locally, to cut down the delay. Maxmind offer a free PHP IP to country database called GEO lite (they also sell licenses for a more accurate version, but this is good enough for us). You need to download both the data file (GeoIP.dat) and the PHP library file (geoip.php) from that page. Once you have them you can get the country code for any IP address like this:


geoip_country_code_by_addr('212.140.189.10'); //returns 'GB'


Easy! Now all we need to do is map European countries to the European bucket url and all others to the American url. This function in this file does just that. Useage:


$bucket = '.media.worldreviewer.com';
$bucket = getAmazonS3LocalServer().$bucket;


You can then pass the bucket to your HTML layer to load the media files from the right place. The GeoIP lookup is quite quick, but you are probably better off storing the result in the user’s session, so that you only have to look it up when the visitor first views a video.

Here is a list of my favourite bars / cafes to sip a coffee and get some coding done:

•  Sejuce
• Tin Drums in Seven Dials and Kemp Town
• The Hampton
• The Earth and Stars
• Komedia Cafe

Hmmm… Where shall I try next?

Stopped by the Earth and Stars yesterday for a coffee and an afternoon of work. Great coffee and cheaper than most places (£1.50). Free WiFi provided by looseconnection.com, seemed fast and no hassle connecting. Music was good (funky and not too mainstream), not too loud for working.  Staff were friendly. I could not see any power points though, maybe I was not looking hard enough? Bar working rating: 8/10 Update: There are two power points and they dont mind you using them! Bar working rating: 9/10  

Woohoo! Due to heavy use of my browser’s refresh button, and a decent dose of luck, I managed to get a ticket to BarCamp Brighton. Woohoo! Now, I had better knock up a talk in two days!