Wow! This project really took me back a few years… and forward a few years as well.

The “back a few years” part is a reflection of how long it’s been since I worked on a major javascript/CSS (dynamic HTML) project. I had forgotten how frustrating it can be to debug javascript. When I was doing this nearly full-time earlier in the century (doesn’t that sound odd?), the frustration stemmed partly from trying to build to two totally different “document object models” (DOM)–Netscape’s and Internet Explorer’s. Because Microsoft trounced Netscape in the browser wars, the IE DOM won out, and today it’s pretty much the standard, as defined by the W3C. Developers who remember trying to build dynamic HTML that would work in both browsers are simply relieved that you no longer have to deal with the “Netscape 4 problem,” though some–like me–mourn the good ideas that went down with that model. Now, with Firefox and Safari ascendant and IE waving from the sidelines (anybody remember the Tortoise and the Hare story?), even Microsoft’s proprietary extensions to javascript will hopefully be abandoned by everyone who hasn’t already done so.

That’s the good news. Today, the frustration I felt programming javascript stemmed mostly from the fact that I hadn’t put together a good development toolkit for Safari. In other words, I needed some tools that could show the javascript errors clearly to help me debug them. Once I had these, I wasn’t trying to code in total darkness anymore.

The project took me forward a few years as well, since I got a clear glimpse of what life beyond browser-based HTML will be like a few years from now. I was skeptical at first, but because of both the explosion of Dashboard widgets since May 1 and the amazing usefulness of many of them, I’m now convinced that this new way of getting web information is the future. It’s really the next step beyond Sherlock, and in some ways is just an extension of RSS and an easy way of leveraging web services on your desktop. If I needed any confirmation for my gut feeling on this, Yahoo provided it this week by gobbling up Konfabulator (before Microsoft could get to them, I’m sure)! (More on that later…)

Building this widget also took me back by confirming what I had read about Dashboard widgets–namely, they are really just little web pages that use transparency and run outside of a web browser. They can do more than web pages can do if you get fancy with them, and Apple has added some spectacular animations to Dashboard to make them look cooler than anything a browser can do, but… bottom line… if you know HTML, javascript, CSS, and graphics, you can build a Dashboard widget!

Of course, to get started, I found a couple of good widgets to crib from. Heck, that’s how I learned HTML and javascript in the first place! One of the reasons the web took off like it did is that the underlying code for web pages is totally transparent. All you have to do is “show source”, and there’s the code for you to study. Creative types who like simple programming (Gee, isn’t that what a Mac user is?) were delighted with what they could do as web page design matured, and they’ll be similarly delighted with the widget model.

With widgets, you have to know how to look inside Mac OS X “packages,” but that’s easy enough to do. Right-click (Ctrl-click) on a widget in the Finder, and select “Show package contents.” Once inside the Contents folder, you’ll see that there are just a few little files–an HTML page, one or more javascript files, a Cascading Style Sheets (CSS) file, some graphics, and some widget-required plist (property list XML) files.

Before I started mucking around with those files, though, I read through Apple’s excellent documentation on the subject. Apple developers are lucky to have such great technical documentation at their disposal, so be sure to utilize it if you head down this path. A quick visit to Apple’s Developing Dashboard Widgets website will orient you much better than anything else

Here are quick links to the main documents I started with:

• “Introduction to Safari JavaScript Programming Topics“
• “Introduction to Dashboard Programming Guide.”

(Note: If you installed the Developer Tools that came with your Tiger discs, you’ve already got these documents on your Mac.) I strongly recommend you start by reading through this material. After that, just start ripping into the code!

And speaking of code to rip into, Apple has also provided a set of example widgets that demonstrate how various kinds of actions work. Here you’ll find standard javascript functions for many of the animated actions you want to program, as well as for functions like looking up and displaying information from elsewhere on the web. There are about a dozen of these example widgets, and you’ll find both a working widget as well as a folder with the code for each, so you don’t have to do the “Show Package Contents” thing. The examples are at the Dashboard Sample Code site from Apple. Note that Apple’s website includes updates to some of the examples that came with Tiger, as well as a new example–the SampleRSS widget–which in my case was very fortuitous.

One of the things I was most interested in trying out was the relatively new “AJAX” web programming method. (AJAX stands for Asynchronous Javascript with XML.) This is the web application model Google has employed so spectacularly on its new Maps site, as well as elsewhere. This model enables richer web applications by allowing web pages to download and display data without having to be reloaded.

A fairly common type of Dashboard widget is one that loads one or more RSS feeds, and this was, in fact, the goal of my project. I wanted to “asynchronously” load the RSS feed from Classic 45’s into my widget, without the widget itself having to be “reloaded.” Whenever my RSS feed is updated, I wanted the widget to just fetch and display it without the user having to do anything. AJAX programming makes this possible. (You can read more about AJAX starting with this essay.)

So off I went… It took about 2 weeks, working around everything else in my life… to get the widget ready for posting on Apple’s website. But what a blast I had! Along the way, I checked out some of the emerging widget development tools and actually ended up forking over a few bucks to the guy who developed Widgetarium. It’s still a young tool that I’m sure will get better, but I paid the shareware fee primarily because I loved the “Panel Maker” that’s built in. This utility makes creating slick widget background images child’s play. Yes, I could’ve done it from scratch in PageMaker, but this was so much easier! He’s since added an “Icon Maker” to the tool. Widgetarium has an embedded Safari WebKit engine that allows you to see and manipulate your widget in a transparent window similar to how it will look in Dashboard itself.

There are many other useful developer add-ons to Safari and widget development tools that are worth checking out, and I’m sure a year from now there will be even more and better ones.

Widgets are simply going to explode in numbers, so it’s great that Apple moved fast to improve Dashboard’s ability to manage them. If you haven’t upgraded, Tiger 10.4.2 includes a Widget Manager in Dashboard that’s a big improvement over the first version that shipped with Tiger.

When I finished my widget on July 6, there were about 700 widgets listed on Apple’s “widget download” site. When I checked just now, the total had climbed to 926! If that rate of growth continues, there will be almost 5,000 widgets a year from now. Nearly all of them are released as freeware, including many that are handy replacements for Mac software you would otherwise have to pay for.

For me, an example of the latter is the DoBeDo widget, which lets me enter to-do items that are synched with iCal. I can assign due dates, priorities, and a description for each item. The widget lets me easily view lists by calendar, and simply checking them off is the same as doing that in iCal. For me, what’s particularly great about this kind of app is that I can have a synchronized to-do list both at work and at home, thanks to my .Mac account. Before DoBeDo, I was using Burnout Menu, a menu item application I had paid for. Actually, I find DoBeDo to be much faster and more stable than Burnout Menu… and it’s free! (Burnout Menu does have a few tricks DoBeDo widget doesn’t, but they aren’t things I need.)

The appeal of widgets is one of the reasons Yahoo snapped up the rights to Konfabulator this week. Windows will need something to compete with Apple’s Dashboard, because widgets will clearly become a source of OS-envy as their popularity spreads. (Yes, Konfabulator did get ported from Mac OS X to Windows last year, but you still had to pay a license fee to use Konfabulator widgets.) Unfortunately for Yahoo, Konfabulator is not nearly as good as Apple’s Dashboard system. Why? The primary problem with Konfabulator is technical… rather than leveraging an existing javascript engine (WebKit), as Dashboard does, Konfabulator runs its own. Why try to maintain your own Javascript engine when everyone who would ever use Konfabulator already has one in the form of their favorite browser? As a result of this, Konfabulator can be a memory and processor hog, whereas Apple has carefully designed Dashboard so that widgets take up no processor cycles or memory when not in use. (Of course, if you’ve set your widget to continue working even when Dashboard is hidden, the widget will do just that.) John Gruber has an excellent article explaining this a lot better than I can on his Daring Fireball blog.

It’s really hard to explain what a Dashboard widget is to a Windows user without showing one. So one of the things I prepared with the launch of my new widget was a little QuickTime movie that shows the widget in action–scaled down, of course. Once I had all of this prepared and fully tested, I submitted information about it to Apple’s web site and also to MacUpdate. A couple of days later (it didn’t take as long as I thought it would), I was the proud owner a whole page on Apple’s Dashboard download site devoted to my new “Sizzling Classic 45’s” widget! Ah, fame.

You can also find this spanking new widget (along with other projects) at my .Mac site: Software Noodling. On Mars, of course, nothing is ever really finished, so I already have the first set of enhancements to the widget on the drawing boards: First, I want to make the widget roll up into a much smaller size when not in use, and Second, I want to let users listen to mp3 snippets from the Classic 45’s “Jukebox” by playing them within the widget itself.

*sigh* A Macintosh Software Noodler’s work is never done… So many cool programming toys, so little time!

Next: Building a Mac OS X “Theme” … stay tuned.