One of the things that gets me excited about the new features of browsers is the “HTML5” Web Storage module. I like it mostly because of its simplicity.

The Web Storage idea is to simplify storing of information for the user. I always hated using cookies because of all the domain issues. It was also a mess to check for them and then fall back to other things. Most of all people are paranoid about them and I know a lot of corporate computer users who have all cookies disabled.

Web Storage on the other hand is a simple object in the browser. You can set localStorage.foo to ‘bar’ and when you read out localStorage.foo next time you load the document it will be ‘bar’. That’s how easy it is. You can store 5MB of textual data which could be integers or strings. With JSON.stringify() you can easily store more complex information.

So I was wondering what you could use that for to get the most out of it and I realised that in a lot of cases I render simple HTML in PHP and then do some clever stuff in JavaScript to make it a different interface. If I wanted to retain the state of that interface I’d have to somehow store it in a DB so next time the user comes to the site, I re-render the last state of affairs.

With localStorage you could do that by simply caching the innerHTML of the main app (if you build it progressively):

You can check the source of the trick in this Gist on GitHub:

If you don’t get what I am doing here, check this quick screencast:

I’ll be using that a lot – it is terribly simple and yet powerful.

Just having spent a lot of time at the amazing open hack day in Bangalore, India I found that most of the questions about starting a hack using Yahoo technology revolved around a few issues:

• How do I access data on the web/from web services?
• How do I use YQL from JavaScript or PHP?
• How do I display information I received from YQL with PHP or JavaScript?
• How do I get the location of the user and how do I analyse content for geographical locations?
• How do I access oAuth authenticated information of Yahoo?
• How do I set up PHP and where can I see errors?

So, to avoid having to repeat myself again I put together The Hackday Toolbox which contains sample code that deals with all these issues.

The hackday toolbox contains:

• An introduction to installing and using PHP with MAMP/XAMPP and debugging it
• YQLGeo for all your geo and location needs
• Demos of querying YQL in JavaScript, YUI3 and PHP
• Demos to display YQL data
• Authenticated example to access the Yahoo Firehose
• Rendering Yahoo Geoplanet data as a map

You can download the Hackday Toolbox on GitHub or try the examples.

The toolbox is BSD licensed, so if you want to add Java/Ruby/Python/Heskell/Pascal/Logo/Fortran/6502 Assembly code examples, please do so.

I put my hack in a box…

I am right now in Atlanta, Georgia for the Georgia Tech University Hack and one of the hot technologies we want to have students hack on is geolocation. To this end, I have given a talk on geo hacking:

As a follow-up to the talk and to make it easier for students to build geo hacks rather than battling the different APIs, I’ve put together a small JavaScript library that fulfills a lot of geo hacking needs:

• Detecting the visitor’s location with the W3C geo API and with IP as a fallback
• Find geo location from text
• Find location from lat/lon pair
• Find locations in a certain web document (by URL)
• Get the location for a certain IP number

Check out the YQL Geo Library demo page and get the YQL Geo Library source on GitHub.

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.

• Calvin and Hobbes’ Snowmen of Horror in real life (thanks to @flocke)
• The Shiba Inu Puppy Cam is back
• The JavaScript unpacker and beautifier helps with your view-source issues, so does its CSS beautifier counterpart.
• A nice overview of Crayola colours 1903 – 2010 – seems like the amount of colours doubles every 28 years.
• TechCrunch finally started pimping bling, subsequently crashing the site that sells bling versions of your twitter name. I wait for the collectible plates and the Michael Arrington action figure with awesome sentences like “I have confidential Twitter documents”.
• RelFinder is a pretty awesome relationship finder and visualisation in dbpedia.
• Anonymous Geek is annoyed that people don’t put a date on their articles. He is right – I already mentioned the same in the developer evangelism handbook.