- How to customize the Firefox Web Console output
- Web Console improvements, episode 30
- Three years with Mozilla, and counting
- The Browser Console is replacing the Error Console
- Web Console improvements and the new Browser Console
Article published on: 2 July 2009, 12: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
single file. I also merge the XHTML interface layout inside the
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!
Send me a comment
Any comments are welcome! No field is required, except the message itself. If you want me to reply, include your email address.
Comments will not be displayed in this page! This form only sends your message to me.