DataURI and Dynamic CSS
=======================

Read the related article at http://brajeshwar.com/2010/dynamic-css-and-datauri-to-the-rescue/

How this thing works
--------------------

Every page has some icons to be shown. The default placeholder icon is
inserted using a simple CSS rule and then after page load some simple
JS code gets the IDs of the actual images to be displayed (from the
special attribute `imgID`) and then constructs a link to a handler
which generates a CSS file with Data-URIs embedded in it so that we
can download all the required images with a single HTTP call and
insert them seamlessly into an HTML file.

Example:

Say the markup is like this -

    <li class="img img_500" imgID="500">Foo</li>
    <li class="img img_600" imgID="600">Bar</li>

The JS code extracts the "imgID" from the li and constructs a query
like the one below and inserts it into the DOM inside a link tag -

     stylesheets/logos.css?i=500|600

Then, the special handler generates a CSS file by reading the actual images and base64 encoding them.
The CSS file is loaded into the DOM and the new images show up instantly.

Limitations
-----------

We are currently limited by the maximum number of characters allowed
in an URL, though some clever form of encoding the data might help.

Running the sample app
----------------------

$ sudo easy_install flask
$ python app.py
$ open http://127.0.0.1:5000/

Authors
-------

Baishampayan Ghose http://freegeek.in
Brajeshwar Oinam http://brajeshwar.com
Prajwalit Bhopale http://prajwalit.com
Sidhant Godiwala http://sidhantgodiwala.wordpress.com