I Call Shenanigans!

Zoho’s recent blog post about why they used JavaScript and not Flash when building their offline version of Zoho Writer has led to some interesting but somewhat predictable responses [1] & [2]. I could have fallen into a predictable (but not necessarily interesting) response myself, but didn’t. Until I saw Ryan Stewart post the following:

I don’t think it’s an accident that Zoho and Buzzword have such different design goals or that Flex applications generally tend to look more sophisticated than Ajax applications.

That quote (and the post) seem to suggest that AJAX webapps are less usable, less sophisticated and, generally, not as pretty as their Flex counterparts. Likely not Ryan’s intent and I did say “seem to suggest” right? I usually don’t define usability based on how an application looks, but on how productive I am using the application or how easy I can learn the application. Unfortunately, some applications try to get by on looks alone. I try to see the inner beauty.

Animating with Canvas

<canvas> has been supported on most browsers (and emulated on others) for a while now. Web developers have done some pretty cool stuff with <canvas> – from niffty reflections to very cool charting [1] & [2] to UIs. Recently, I have noticed a few examples of using <canvas> to create animations. The results are pretty amazing and don’t seem to kill my CPU in the process:

  • John Resig’s processing demos [1] & [2] (I hope these get published soon)
  • Canvas Animation Kit Experiment [blog] & [demo]

And now we are getting 3D canvas too (Firefox and Opera). Sweet.

What’s it going to take to get this simple bitmap buffer into Internet Explorer?

Thoughts on STEEL – A Convenience JS Library for Thunderbird

Joey Minta has put together some API ideas for STEEL, a FUEL-like library for Thunderbird. I share David Ascher’s feelings that such a library would be a fantastic way to simplify Thunderbird extension development and get more people building Thunderbird extensions.

Personally, I’d like to see if we could move some FUEL interfaces into the toolkit level instead of duplicating the code for each application. Also, we could look at making a simple, general base interface for some things (like Window) and then override the base interface as needed (think BrowserWindow and MailWindow).

Add your thoughts to the newsgroup post and/or the wiki page.

New Datasources for XUL Templating [Part 2]

XUL, the XML-based UI language used in Mozilla products, has supported templating for a while now. Unfortunately, the only datasources you could use to drive the templates were RDF-based datasources. This has been a hurdle for some, including me, to really dive into XUL templates.

Back in July, I posted about support for using XML datasources with XUL templates. Recently, Laurent Jouanneau and Neil Deakin landed support for using SQLite-based (mozStorage) datasources. The SQL templates are a little harder to test/demo than the XML ones, but you can get a demo working fairly easily using XUL Explorer (use 0.8 just to be safe).

Laurent added some test cases to the bug. We can take those, add a manifest file and use them from XUL Explorer. Here is a storage-templates.zip archive of the test cases with a simple manifest added. Steps to get the mozStorage template tests working:

  1. Download and unzip somewhere
  2. Startup XUL Explorer
  3. Open the ‘Options’ dialog/sheet
  4. Use the ‘Manifest’ section to add the path to the unzipped manifest file
  5. Open one of the mozStorage XUL test files
  6. Preview the XUL to see it work

Here’s what a simple example looks like:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <description>template + storage</description>
    <description>Should display all 11 products</description>
            <column flex="1"/>
            <column flex="3"/>
            <column flex="2"/>
            <column flex="1"/>
        <rows datasources="chrome://data/content/tests.sqlite" ref="?" querytype="storage">
            <query>select product_id, label, price, cat_id from products</query>
                <row uri="?">
                    <label value="?product_id"/>
                    <label value="?label"/>
                    <label value="?price"/>
                    <label value="?cat_id"/>


Here’s what that looks like when previewed in XUL Explorer:

The “dynamic parameters” demo is sorta neat too. It lets you pass a value in to dynamically effect the template query and rebuilds the XUL. Here’s what it looks like:

XUL Explorer – 0.8 Sneaks Out

Yeah, its been awhile since I released XUL Explorer 0.7 and at the time there was a bad editor bug in Mozilla trunk, so I released using an older version of XULRunner. However, the bug has been fixed, so I made some small tweaks & fixes and will release XUL Explorer 0.8 using a XULRunner 1.9b2 pre-release.

Besides the editor bug fix, I wanted to use XUL Explorer to demo some of the new features that landed, including the cool new XML and SQL based XUL templates.

Download from here.

Update: See this post for XUL templating examples using SQL (mozStorage).

Prism Tricks #1

Here’s a simple way to extend a web application with Prism: Create a simple mashup by adding a sidebar.

Prism supports a simple sidebar that can display a secondary web application. Just enable the sidebar in the configuration and load content into the sidebar using some scripting. Here’s the example:




function startup() {
  host.sidebar.add("Chat", "http://talkgadget.google.com/talkgadget/popout");
  host.sidebar.visible = true;

Take those to files and make a bundle, name it sidebar.webapp and open it using Prism. On Windows and Mac, you should be able to double-click the webapp bundle. On Linux (or from a terminal) use:
prism -webapp [path-to-bundle]

You should see Google Docs loaded with Google Talk in the sidebar! Something like this:


Prism 0.8 – Now for Mac & Linux

Over at Mozilla Labs, we’ve released Prism 0.8 for Mac and Linux. We also took the opportunity to release a refreshed Prism 0.8 for Windows too. Why? you may ask. While getting the Mac and Linux versions ready, we received lots of feedback and bug reports from users. We were able to fix a few of the painful bugs, so a refreshed Windows release seemed appropriate. Some of the fixes include:

  • Bug 401021 – Shortcut with spaces in web application name doesn’t work
  • Bug 401244 – Blank name field causes silent failure
  • Bug 391429 – Editor caret is hidden in XULRunner applications

That last bug (391429) was a XULRunner bug, not only Prism. It was the reason that the cursor/caret was not visible when using rich editing in GMail and other rich editing web applications. Thanks to Songbird’s Matt Crocker for fixing that one!

NOTE: For Windows users who want to install the refresh – Uninstall and reinstall, just to be safe. As long as you reinstall into the same folder location, all your shortcuts will continue to work.

As the Labs post shows, we have some nice features in the pipeline. We also want to know what web applications you’re using with Prism (and how we could make those apps better).

Thanks to everyone who is downloading and trying it out. Keep the feedback coming.

OpenKomodo is Open for Business

ActiveState is ready to start rocking the OpenKomodo project. They have everything ready to go:

All they need now is YOU! Head over and get involved. You can also start thinking about SnapDragon, the full-featured web development tool integrated with Firefox:

Komodo Snapdragon is an idea, a desire, a mission! Web development with Firefox benefits from excellent developer tools such as Firebug, but it needs more. We invite you to help define the future of Komodo Snapdragon. Join the Open Komodo community today and help shape the future!

Great mission! I look forward to SnapDragon planning and development.