Skip navigation.

Blog

Skip the blog side panel.

API reference and packaging for PaintWeb

Article published on: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!

Published in: apache, api, documentation, gsoc2009, makefile, moodle, paintweb, performance, yui.