Friday, December 11, 2009

Playing around with JavaScript, Tag Clouds, Delicious

This is a post about an usage of a Cumulus Tag Cloud for delicious user I wrote. After providing a delicious name the application fetches your tags plus their frequency of usage for the corresponding delicious user. It can be found here.
Here an example screenshot.
image
This is done solely client side (no connection to my server, okay but delicious of course) by combining several JavaScript libraries (jquery, jquery URLEncode plugin, swfobject) and a flash tag cloud component.
1. The tags for a user are fetched from delicious. The same origin policy is bypassed with a little old trick (*):
var script = document.createElement('script');
script.setAttribute('src', 'http://feeds.delicious.com/v2/json/tags/' + user + '?callback=doTagCloud');
document.getElementsByTagName('head')[0].appendChild(script);

This trick inserts a script element in the head section of a html page. In html it will something like that:
<script type="text/javascript" src="'http://feeds.delicious.com/v2/json/tags/{user}?callback=doTagCloud"></script>

By providing a callback the actually loaded JavaScript code has the form:

doTagCloud({".net":1,"\\todo":1,"\"design":1, […]});
the function doTagCloud is called with the filled in tags.
2. The tags are sorted, pruned and rendered with the computed relative font weights.
swfobject.embedSWF("flash/tagcloud.swf", "tagCloud", "400", "500",
"7.0.0", false, flashvars, params, attributes);
 

(*) I am no big fan of the same origin policy since it does not actually prevent serious cross scripting attacks but on the other hand it hinders developing advanced client side mash ups without data proxies.