API reference and packaging for PaintWeb
2 July 2009, 19:52
Hello everyone!
Since my last blog post I have completed the user interface polishing for PaintWeb: the Color Mixer and the Color Picker are both working fine now.
Today I have completed work on packaging. I also generated the complete API reference documentation from the source code.
You can go and play with the PaintWeb demo at the usual location.
For packaging I use a Makefile, YUICompressor,
jsdoc-toolkit, PHP and some bash scripts. First of all, I merge all the
JavaScript files into a single file. I also merge the XHTML interface layout inside the JavaScript - for this I use a
small PHP script which encodes the string using json_encode(). Once I have the hefty script, I use the
YUICompressor tool to make it a lot smaller.
For the PaintWeb interface stylesheet I use the YUICompressor in combination with a simple PHP script I wrote. The PHP script inlines the PNG images using data URIs. This helps a lot in reducing the number of elements being downloaded.
Here are the numbers, for those curious of the packaging results. Before packaging:
- 18 JavaScript files, 426.6 KB;
- Three JSON files, 33.9 KB;
- One XHTML file, 14.9 KB;
- One CSS file, 21.8 KB;
- 47 images (PNGs), 206.5 KB;
- A total of 70 files, 703.7 KB.
That's quite much. Here's what the current level of packaging gives us:
- Two JavaScript files, 130.7 KB - one of them, json2.js, is only 3 KB and is not always loaded;
- Three JSON files, 33.9 KB. The JSON files are left untouched, the configuration example stays the same - with all the comments in it. It's up to the integrator to choose what he/she does with the file (at the moment).
- One CSS file, 297.1 KB - with all the images inlined;
- A total of only 6 files, worth of 461.7 KB.
That's better, but there's room for more. You should always enable gzip compression on your Apache server. Here's what a properly configured server can give you:
- Two JavaScript files, 35 KB;
- Three JSON files, 8 KB;
- One CSS file, 99 KB;
- A total of six files, and only 142 KB.
That's much better now. To properly configure your server, make sure you enable gzip compression in your .htaccess file:
<IfModule mod_deflate.c>
<FilesMatch "\.(js|css|json|html)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
If you are curious how fast PaintWeb loads, I added a timer in the demo script - you can take a look in a JavaScript console in your Web browser. On my local system it takes less than a second, depending on the browser I use. Go ahead and try PaintWeb yourself. Also make sure you check out the API reference.
In the coming days I will be publishing guides on PaintWeb development, extensibility and general code overview. This means Moodle integration is ready to begin!