ComicJuice Comic Mash-up

Already described this site on my blog (with video clip), but here's some more technical details.

The site in question, ComicJuice.com is a comic mash up tool: visitors build comic strips with panels and bubbles, based on images on the web. A lot of effort has gone into elegance and usability, as well as the use of recent technologies online. Because of this, Internet Explorer is not supported.

The site is built on Drupal 5 and features loads of custom code (mostly JavaScript) to make the comic creation and viewing work. Noticable is the use of <canvas> for the (procedural) speech bubbles. The modules used are all quite simple. Aside from core, there is Views, Tagadelic, Pathauto and Akismet. The theme is a heavily modified Garland, with almost all the images replaced and some layout changes in the content.

I used jQuery 1.1 and Interface as the base (with the jQuery 1.0 compatibility plug-in for Drupal core), I basically just started building out all the different behaviours until it slowly came together. First I built the bubble model, made it resizable, added the sliders, etc. Debugging tools like Firebug were a life saver here for figuring out browser quirks.

Now, while I wasn't expecting a walk in the park, implementing great UIs in the browser today turned out to be a lot harder than I had thought it would. The lack of specialized form controls means that things like sliders require a lot of work to look even recognizable, let alone sexy. And if that wasn't bad enough, there is the CSS model to deal with as well. In my experience, CSS, while great for laying out textual content on a page, is inadequate for UI widgets.

The relationships you can express with CSS are too simple, so you either have to build complex tag structures, or code JavaScript to do your layout manually. Neither is a good option. Another tricky point is ensuring proper logical containment of your elements and widgets, while still retaining the right visual stacking order and z-index (e.g. for the draggable handles). For some things, I just had to resort to extra layers with manual JS-based positioning.

The specific thing that caught me was how low-level the jQuery Interface plug-in is. Each widget is 'behaviour only': you need to supply all the HTML and most of the CSS for it to work. Forget about standard sliding doors slider widgets or one-liner resizables. If we are to move towards more advanced UIs, such widgets need to be abstracted away into self-contained blocks.

Ideally, in the future we will see small widgets move from HTML/CSS to becoming mini-<canvas>es, making an end to having to provide a bunch of empty divs for each widget.

The <canvas> coding posed some challenges too though. In theory there are 3 browsers that support it, but in practice they each have quirks that make even basic things very annoying to do. For example, Safari does not let you do multiple operations (e.g. outline and fill) on the same shape in one go, while Opera insists on connecting circles with whatever you were drawing before. Firefox has the best canvas so far, but even with all supported features, there is not enough to do serious vector graphics work. Text measurement and drawing is missing, image drawing and rotation, etc. Another thing that would really open up possibilities is if it were possible to fetch the canvas contents as e.g. a PNG bytestream.

Conclusion: this was a very educative and interesting experiment, that mostly succeeded in delivering on its goals. Another great example of Drupal saving you time by letting you focus on the 'meat' of your project (in this case, comics) while already having everything else.