2 July 2009, 19:52
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
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:
- 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:
- 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:
- 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>
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!