December 2010


Here’s a YouTube playlist featuring the collected talks from the Labs Night Gaming events in both Mountain View and London. Together, they include plenty of tips, techniques, and inspiration to help you finish your Game On 2010 contest entry!

I’m somewhat embarrassed to say that, even though I have worked alongside several of the Add-On SDK developers for years (or “Jetpack developers” as we used to call them), I had never used that Add-On SDK (or “made a Jetpack”, as we used to call it). Until now!

F1 is great if you want to share links via Facebook or Twitter. But that’s not how I want to share links; I want to share them via this blog, or for stuff that’s not Mozilla/web/software/usability related, via my personal blog EvilBrainJono.net. For this site, I can use the WordPress Press This bookmarklet that takes the URL of your current page and turns it into a WordPress blog post. But EvilBrainJono.net is a mess of custom Python scripts I’ve been hacking at sporadically since 2004. Nobody’s writing add-ons to interface with that.

Yesterday I realized that I wanted a very simple “share this page on EvilBrainJono.net” add-on, and that it would be a perfect excuse to learn the Add-on SDK.

Add-on SDK 1.0b1 was recently released, so I downloaded that and then followed the tutorial.

The SDK gives you a command-line script to run that adds several commands to your shell environment – commands to run tests, build XPIs, and to “run”, which launches a Firefox instance with your add-on running on a throwaway profile. This makes the development cycle pretty quick as each time you make changes to your source, you just save, alt-tab to the command line, and do a “cfx run” to see your changes in action.

The tutorial holds your hand and walks you in very small steps through building your first add-on. The SDK launches a special documentation server, which lets you browse through the tutorial and documentation – including documentation for your own modules in development, automatically generated from your source code and readme files. The documentation server also provides full reference on all the built-in modules, which handle many common add-on tasks for you. If what you want to do is within the scope of the built-in modules, then writing an add-on requires little more than gluing modules together. I was able to implement my quick-blog add-on very quickly by using the widget and panel modules to make the UI, the tabs module to get the URL of the page to share, and the request module to send the data to my web server. Whenever I got stuck I referred to the examples bundled with the SDK; the Reddit example in particular showed me almost everything I needed to know.

The API is very clean and simple; everything works just the way I expected. It uses a terse, nested, functional idiom that will seem very familiar to you if you’ve ever written web pages with jQuery. The one part that took a little getting used to was using postMessage() to communicate between my add-on’s main.js and the content script running in my panel; and even that was very straightforward once I grasped what I needed to do.

Overall it was one of the nicest experiences I’ve ever had learning a new development environment / API. The batteries were included, the examples were relevant, the modify-run-debug cycle was quick, error messages were helpful, and within a couple hours of downloading the SDK, I had a usable feature. It’s at least an order of magnitude less work than learning the old way of writing extensions with XUL. If you’ve shied away from trying out earlier versions, 1.0b1 is a great time to give it a shot.

This add-on is not exactly something that anybody besides me is ever going to want to run; it’s hard-coded to work only with my admin account on my website and nothing else. But that’s part of the beauty of the Add-On SDK: It makes the cost of development so low that it becomes worthwhile to write a single-serving add-on to satisfy a very specific need.

(more…)

Hey, Game On 2010 contest participants — how are those HTML 5 games coming along? I can’t wait for January 2010 when I can finally see what you’ve made.

I’ve been doing some HTML 5 experimentation of my own. What I’m working on is not a game, but it is a graphical HTML 5 webapp that uses several tricks that may be of interest to game developers. It’s easier to show it in action than to tell you about it, so watch this video (hosted on Vimeo since WordPress won’t let me embed) for a preview of Pencilbox and an explanation of how it works.

Note: this is not a Mozilla project — this is a personal project I’ve been hacking on in my free time.

I’m not yet ready to put the app itself on a public webserver where you can play with it, nor have I set up a public code repository yet. (Like I said, it’s a side project, so I haven’t had time to work on the infrastructure stuff.) When I do have it set up properly, I’ll let you know. In the meantime, here’s a tarball of the source code, which is under a Mozilla tri-license. It may be of some interest if you wish to achieve a similar effect in your Game On 2010 submission and you want to see how I did it.

Happy hacking!

Jeremy Singer-Vine at Slate magazine has posted his own analysis based on Test Pilot’s Week-in-the-Life dataset!

He looked at tab use, and while his general conclusions are similar to what we found from the earlier tab study, his chart of tab use by demographics shows something interesting I’ve never seen before:

Jeremy rightly points out that the data behind this graph may not be the most reliable, due to the severe undersampling of women in the Test Pilot user base, as well as the fact that most Test Pilot users who submitted data did not fill out the optional demographic survey. It should be taken with a large grain of salt. Still, by suggesting that there might be significant differences in tab use patterns by age and sex, it points to what might be an interesting area for future experimentation.

This might be a good time to remind you that the deadline of the Open Data Competition is December 17. So there’s still time to do a visualization of your own and enter the contest!

Some commenters requested them, so here they are (PDF file).