Skip navigation.

Blog

Skip the blog side panel.

API reference and packaging for PaintWeb

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!

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.