HTML5 Wordle Tag Cloud

This is a direct port of my AS3 Wordle Tag Cloud to HTML5. Please read my old blog post for some background.

Some technical notes:

• Thanks to Canvas' RenderingContext2D.measureText(), I can calculate size of the words off browser's stage.
• Initially, I was using Canvas as rendering stage for the tag cloud. However, it demands extra work to make the words interactive. So I decided to use normal block text with CSS3's transform/rotate. The result is texts are searchable and out-of-the-box hyperlinks.
• The position checking process may cause browser hang momentarily if run through all of the words. I have split the process of each word into each RequestAnimationFrame to avoid the script hang.

However, there is still room to improve, for example, enhancing the intersection check and using any angle rotation...

There you go! Check out the live demo and source code.

Google App Engine for static websites

Nowadays, there are many options to host a static website (portfolios, generated weblogs, front-end demos, etc.) for free. One of the best ways is to push your static files to a Github's repo and publish them through Github Page.

A lesser known solution is to make use of Google App Engine (GAE). Actually, GAE is designed for building and publishing high-performance, highly scalable web applications written in Python, Java or the newly-introduced Go language. However, by tinkering with the set up and deployment process, I figured out that it is also great for hosting static website with no server side coding at all. Like Github Page, your static website will be served through http://[your-app].appspot.com or you can customize it with a (sub)domain.

The advantages of GAE over Github Page are: higher static files quota (known in GAE as blobstore, known in Github as repository size); allowed SSL; better performance (since GAE app is hosted with reserved thread and bandwidth); possible to supplement data and dynamic server-side scripting later.