Christian Heilmann

Posts Tagged ‘trick’

Using HTML5 Storage to cache application interfaces

Thursday, August 26th, 2010

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.

TTMMHTM: Apollo 11 source code, Driving directions API, most expensive JavaScript ever,opening a banana the right way

Wednesday, July 22nd, 2009

Things that made me happy this morning:

Detecting and displaying the information of a logged-in twitter user

Monday, January 5th, 2009

Wouldn’t it be cool (and somehow creepy) to greet your visitors by their twitter name, and maybe ask them to tweet a post? It can be really easily done.

Check it out yourself: Hello Twitter Demo
Update: this is not working any longer. Twitter have discontinued this functionality because of the phishing opportunities it posed.

This page should show you your avatar, name, location and latest update when you are logged into twitter. If nothing show up you either are not logged in or already exceeded your API limit for the hour (if you have twhirl running, like me, that can happen fast)

This is actually very easy to do as a logged-in twitter user can be detected with a simple API call in a script node:


http://twitter.com/statuses/user_timeline.json?count=1&callback=yourcallback

All you need to do is provide a callback function that gets the data provided by the API and get the right information out. The demo does this by assembling a string:





Trying to think of a cool use for this that is not spooky :)

Conjuring YUI from thin air

Saturday, August 2nd, 2008

I love the YUI loader as it is a great way of including the YUI on the fly. The coolest bits about it is that it gets the YUI components from the CDN and knows the dependencies so I don’t have to. So if I need the YUI for something, I don’t need extra SCRIPT nodes a maintainer has to include, just my SCRIPT. However, what we still need is including the YUI loader itself.

Unless… you use the YAHOO_config listener. This thing is older than both YUI get and YUI Loader and is an object method that gets called every time a YUI component is loaded. So why not load the YUI Loader using this?

One problem is that the YUI Loader doesn’t call the config listener saying it is a loader, but saying it is the get utility. Another issue is that it does not work to execute the Loader immediately after it called itself “get”. The workaround is to use a timeout.

Wrap all of that inside the YAHOO_config object and you’ll conjure the YUI out of thin air. The following example loads YUI Dom, YUI Event and alerts “done” once all is ready. Check it out here


YAHOO_config = function(){
var s = document.createElement(‘script’);
s.setAttribute(‘type’,’text/javascript’);
s.setAttribute(‘src’,’http://yui.yahooapis.com/2.5.2/’+
‘build/yuiloader/yuiloader-beta-min.js’);
document.getElementsByTagName(‘head’)[0].appendChild(s);
return{
listener:function(o){
if(o.name === ‘get’){
window.setTimeout(YAHOO_config.ready,1);
}

},
ready:function(){
var loader = new YAHOO.util.YUILoader();
var dependencies = [‘yahoo’,’dom’,’event’];
loader.require(dependencies);
loader.loadOptional = true;
loader.insert({
onSuccess:function(){
console.log(‘done!’);
}

});
}

};
}();

Thanks to Alex Liu to get the setTimeout trick.