Web Development

Sloan, Geeks, and Rock and Roll

by Steven Garrity

Sloan PhotosIn 1996, I went to see Sloan and Thrush Hermit play on their One Chord to Another tour at “The Barn” at UPEI. It was one of the greatest concerts I’ve ever seen. When Sloan’s last album came out, I wrote about it here on Acts of Volition.

Now, seven years later, their new album, Action Pact has been released (today, August 19), I’ve had the honour of working on the redesign and redevelopment of the official Sloan website. Along with the rest of the team at silverorange, we’ve developed the new site with the fans in mind. Fans can post show reviews in the Tour History and post photos of the shows they’ve seen. The response has been great.

On the geeklier side, the site is valid XHTML strict with a completely table-free CSS-based layout (big ups to Daniel B. who did most of the design and CSS work). The site makes use of The silverorange Weblog Platform and the silverorange Photo Gallery System. As a result, it was easy for us to generate RSS feeds for the regularly updated content on the site, including the news (RSS) and recent photos (RSS).

Check out the new site at SloanMusic.com.

And so the line between work and life fades even more.

a

 

Micropayments Revisted, Again

by rob

BitPass (currently in beta), appears to be a working Internet micropayment system. This could be really exciting. It seems to work like a prepaid calling card. You buy chunks (smallest is 3USD) of BitPass money, and your micropayments are deducted from that. Spending is anonymous, and the system even deals with access control to the content.

Micropayments seem like a great idea in theory. It will be interesting to see how this pans out. I know that I would pay 15 cents every day to read my morning webcomics and news. At the risk of hyping propaganda I don’t fully understand, I think micropayments are great and have the potential to stimulate the flow of original content on the Internet.

 

Always use the form Label tag

by Steven Garrity

Late last year, a co-worker asked me why we weren’t using the <label> HTML form tag. I wasn’t sure, but it’s my job to know things like that. A little research revealed the answer: because I suck. From that point on, we’ve used the label tag wherever appropriate (some historical work hasn’t yet been updated, but it will be eventually).

If you ever find yourself writing (x)HTML forms, you should always use the label tag. In case you aren’t familiar with it (I thought I knew all there was to know about HTML, and I hadn’t even heard of it), here’s an example (try clicking on the text labels):




<form>
<div><input type=”radio” name=”options” id=”option1″ />
<label for=”option1″>Apples</label></div>
<div><input type=”radio” name=”options” id=”option2″ />
<label for=”option2″>Oranges</label></div>
<div><input type=”radio” name=”options” id=”option3″ />
<label for=”option3″>Papaya</label></div>
</form>

The label and corresponding input don’t have to be adjacent – they are associated with the for/id attributes. The label is then clickable just like the control and the browser does all the work for you – no messy JavaScript required.

It works in most every browser on the planet and the few that don’t support it (Safari being the most notable) ignore it gracefully. There are accessibility benefits and we all get clickable form labels that mirror the functionality of most operating system controls.

This tag has been around forever and smarter people than myself have been urging us all to use it for a long time. Since I was so late to the game, I thought I’d share, in case others like myself weren’t in the know.

 

The silverorange Labs weblog

by Steven Garrity

silverorange labs dudeRegular readers will know that I work at the web development firm, silverorange. Several of us have weblogs of our own (Acts of Volition, CEOBlues.com, and newrecruit.org). We’ve now setup a weblog and site for our side-projects called silverorange labs.

As the introductory post explains, the silverorange team will be posting info on our weblog platform (used to publish Acts of Volition and discussed here previously), our photo gallery system, and other tools and toys.

 

XUL: How I learned to love non-native GUIs

by Steven Garrity

I hate skins and I love native GUI widgets. Microsoft and Apple had a relatively strong set of user interface controls that people are familiar with. Yet loads of developers seem keen on reinventing these devices from scatch. Media players seem to be particularly bad at this. Microsoft’s own Windows Media Player and Apple’s own QuickTime Player both seem to throw out the entire GUI toolkit and start from scratch, building totally confusing (and totally x-Treme) interfaces.

A good user interface should get out of the way. Particularly an interface for an application that delivers content (show us the content, and get out of the way). If you want totally x-treme, you don’t upgrade your media player skin – you download Limp Biskit videos.

When the Mozilla project moved to create their own cross-platform GUI toolkit, many people who were concerned with the user experience cried foul (including myself in this January 2001 rant about skins, and this August 2002 update). The idea struck me as the result of developer-centric thinking and complete disregard to the end-user. A cross-platform GUI would make things much easier for the developers, and a bit easier for the minority of users who work on multiple operating systems, but it isn’t much good for Joe-Windows-User.

Here we are, three years later, and I think they may have been onto something. First, let me be clear that you should always use the available operating system native GUI widgets when you can. Chances are the alternatives you will develop will suck.

Mitch Kapor’s Open Source Application Foundation has chose to stick with native GUIs on their Chandler application. This is a smart decision. Most skinned application suck. Trillian would be a great instant messaging program if it weren’t for the over-skinning (that said, I do use Trillian as I find it to be the best of the worst).

Put the UI in my hands

Enter XUL (pronounced “zool”). XUL is the XML User-interface Language developed by the Mozilla project. It allows developers to define the user-interface of their application using a combination of “off-the-shelf” standards (primarily CSS and JavaScript). The end result is a relatively accessible architecture for interface design.

XUL does to the user-interface what View Source did to web development. Though I have the advantage of a web-development background (familiarity with the key technologies, like CSS), I can do things to a XUL-based app that I could not do on other applications. For example, I found some of the icons on the toolbar of the Mozilla Firebird browser to be poorly designed – so I replaced them (this was as easy as saving new PNG files and dropping them into a .JAR file). The search box was too narrow – so I made it wider (this was absurdly easy).

These may seem like insignificant examples, but it opens up a level of control over the application that is not possible with other design methods.

It’s about quality and consistency

Another key development that has softened my stance of Mozilla’s break from the OS native interface is quality and consistency. Microsoft has been squandering their lead. The quality and consistency of the Windows GUI has been deteriorating rather than improving. Microsoft has also devalued their native Windows interface by allowing it’s own applications, including their media player and the massively important Office suite, to shirk the standards.

XUL, meanwhile, has gotten much better. The software is constantly improving (and incorporating native OS widgets where appropriate – which is a nice touch). Performance is no longer an issue on newer hardware. Where XUL-based apps might have taken a performance hit compared to native Windows apps, the difference is insignificant on recent hardware.

The Mozilla Firebird browser project shows that XUL can be used to develop a quality interface.

Will the operating systems rise again?

I should note that Apple’s OS X may be an anomaly in that the quality has actually been improved over previous versions of the OS. Regardless of your opinion on the style of the OS, it is clearly well rendered. Microsoft is planning on following in Apple’s footsteps by having DirectX handle the desktop GUI in the same way Apple is using OpenGL. There is a chance here that Apple and Microsoft may leap ahead of other interface systems. However, I think it’s more likely that developers of XUL will tap into these improvements than be left behind.

Platform Freedom and Platform Friction

In 1997, Netscape’s Marc Andresen claimed that:

“[b]rowsers will reduce Windows to an unimportant collection of slightly buggy device drivers”

If anything, it is XUL that has the power to do this. I originally thought that the ability to develop applications that run on multiple operating systems with relative ease wasn’t much good, since the overwhelming majority of computer users are running only Microsoft Windows. However, after my recent stint on a Mac for a week and having switched from IE to Mozilla Firebird as my primary web browser, I’m starting to see something more significant going on.

A friend of mine pointed out that for the average novice Windows user to switch to an alternative operating system, they would also be forced to deal with an entire new set of applications. However, if Mozilla Firebird becomes your primary web browser and OpenOffice.org becomes your primary office suite, the platform friction is greatly reduced, as these applications are available on other operating systems. Web-based services and applications are another layer that can work well on any OS. Once you’ve got Johnny windows user into his Hotmail account, he doesn’t care if he’s running Windows 98, OS X, KDE, or Gnome.

But I still hate skins

I do still hate skins. I dream of a simple media player that uses native GUI controls. I hate that every new version of Microsoft Office includes redesigned menus and toolbars. However, in the accessibility of XUL, I see a small example of how the wall between developers and users can be torn down.

More info on XUL:

 

Online Petitions Don’t Work

by Steven Garrity

Today, Jeffrey Zeldman made a fine post about the lacking support for the PNG file format in Internet Explorer for Windows. He explains it very well (and links to a great demo page – but it won’t work in IE/Win) and links to a petition to encourage Microsoft to fix the situation.

Online petitions don’t work. No one cares. I know – I started a petition last year (embarrassed). Of course, it can’t hurt to sign the petition. I did. But so did “Bill Gates”.

This is an important need of the web development community being expressed by a prominent member of the community. Microsoft needs to respond. However, I expect that they will not. Each little issue like this erodes a little more from Microsoft’s (massive) foundation and will lead people towards alternatives (like the fine Mozilla Firebird browser).

It is good for Zeldman to bring attention to the issue, and a simple “we’re working on it” response from Microsoft would make a big difference in how the company is perceived. However, I expect it would take a call from a “real” reporter to get a quote from them. Let’s hope they surprise me.

 

Mozilla Firebird v0.6: I have a new default web browser

by Steven Garrity

I use a lot of web browsers. I have six different browsers installed on my primary computer, and maybe ten more on other testing machines.

Of all of these, there is one primary browser. When I click on a link in an email or instant message, my primary browser will open it.

Years ago, Netscape 4 was my primary browser. Then, along came Internet Explorer 4, which was dramatically better than Netscape 4. In early 1998, IE4 became my primary web browser. Since then, it has been all IE – including version 5, 5.5, and up until today, 6.

There are other great browsers. Mozilla has had a great browser since before version 1.0. I used it regularly (the standards compliant rendering engine was great for testing web development work). It wasn’t enough to get to switch over entirely, though.

Then along came Phoenix. The browser started as a lean off-shoot of the Mozilla project. It became a great browser very fast. I started using it more and more with the version 0.5 beta release a few months ago. I really got hooked on the joys of using open-source software when a feature request I made was answered by a developer with a patch that same day. Still, Phoenix was in the relatively early beta stages and had some key features missing, incomplete, or broken.

Phoenix has been renamed Mozilla Firebird. The Mozilla project has announced that they will be making Mozilla Firebird the primary Mozilla browser (which means Netscape 8 could be based on Firebird, if that even matters anymore). Today, with the release of beta 0.6, Phoenix-come-Firebird is stable enough that I have made it my primary web browser, and I will secretly install in on my parents computer.

screenshot of Mozilla Firebird default browser setting

I have a few recommendations for anyone trying out this browser. The core browser is kept as clean and simple as possible (about a 6MB download) and additional functionality is handled through a nice extensions system (as opposed to just pilling everyones favourite feature into the core).

 

The ultimate Weblogging system?

by Steven Garrity

User interface critic and man-about-New Zealand, Matthew Thomas has outlined his view of the The ultimate Weblogging system. We’ve run our system against his checklist.

Good points all around. We ran our weblogging system against his list – citing where we’ve met his requirements and where we have not. While we are missing a fair number, I think we’ve done very well considering that our system was not built with the intention to be marketed or used by others. For example, you can pretty quickly rule out a Blogger import system by asking the three eventual end-users of your system, “Does anyone here use Blogger?”.

Some of the points are things I hadn’t considered and will be implemented thanks to Thomas’ suggestion (RSS feeds for categories, in particular).

I would encourage those with weblogging systems intended for wider use run their own system against this checklist as we have done here.

Here’s my annotated version of Matthew Thomas’ list:
(Note: grey text is from Matthew Thomas’ original post, bold text is our own. When I say “nope”, I’m not disagreeing; I’m saying that we don’t meet that given requirement.)


  • Forward compatibility

    • License under the GPL (minimizing lock-in, architecture rot, and wasted development effort). (nope – we’re a bit tied down here due to our reliance on proprietary code)
    • Work with at least one Free database (e.g. mySQL). (nope, but PostgreSQL support may be coming)
    • In case of emergencies, allow entries to be exported to XML. (nope)
    • Use entirely non-crufty URIs. (check)
      • Give individual entries URIs (permalinks) of the form http://base/2003/05/02/oneMeaningfulWordFromTheTitle. (close, we have the word archives in there, though I think we’ve hit the mark – 6 for 6 on this list – down with linkrot! Also, we’re generating an automatic “shortname” for the URL based on the title, but it is human-editable in case the robot’s suggestion doesn’t work out.)
        • No irrelevant system-specific cruft (e.g. mt-static/, msgReader$, or weblog.cgi). (check)
        • No ? characters, so all entries get indexed by search engines. (check)
        • No irrelevant filetype-specific cruft (e.g. .html, .php, or .xml). (check)
        • Every entry is on its own page, not just an internal anchor on a daily/weekly archive (which makes search engines and statistics tools less useful). (check)
        • Net effect: Even with a stupidly worded inbound link (e.g. “I came across this”), a reader can tell a lot about an entry (host, date, and hint at subject) from glancing at its URI. (check)
        • Something Thomas didn’t mention: support for the old URLs of imported content – we’re handling the old ColdFusion based URLs from two years of Acts of Volition transparently.
      • Give daily archives URIs of the form http://base/2003/05/02/. (we don’ have daily archives)
      • Give monthly archives URIs of the form http://base/2003/05/. (close enough)
      • Give yearly archives URIs of the form http://base/2003/. (close enough)
      • Give category archives URIs of the form http://base/name-of-category/2003/05/, etc. (close enough)
      • Theory: URL as UI, Cool URIs don’t change.
      • Practice: Making clean URLs with Apache and PHP.
  • Metadata
    • Each entry has a title, a category string, contents, time posted (auto-generated), and one or more objects (e.g. images). (not quite)
    • Invite (but do not require) the author to provide a summary for any item longer than n words, for use in mobile editions and RSS feeds. (no, but we are generating relatively good automated summaries with a brief excerpt, and word count – human-written summaries coming soon)
    • Categories are faceted. I may categorize an entry by subject, by current location (integrating with GPS devices), by mood, and so on. (nope)
    • Each category facet can be hierarchical. (For example, an “interface design” subject category could be subdivided into “desktop application design”, “Web design”, “appliance design”, and “signage and artifact design”.) (we didn’t think this was necessary for our humble blog, but it is a good point)
    • Invite (but do not require) an author to subdivide a category whenever it collects more than n entries (rather than forcing them to be architecture astronauts specifying all their categories at the beginning). (nope)
    • An entry may have multiple values for each category facet. (For example, one post might be about both CSS specifications and buggy Web browsers.) (check)
    • Why does all this need to scale so deeply? Because when you’ve been keeping a Weblog for twenty or thirty years, and you can’t remember any semi-unique words you used in a particular entry, finding it will be horribly difficult, and you’ll need all the semantic help you can get. (interesting – Stuart Brand would be proud).
  • Syndication
    • Provide an RSS feed for the Weblog as a whole. (check)
    • Provide an RSS feed for any category. (great idea! – coming soon)
      • Because of the faceting, category feeds will need to be dynamically generated, but they should still send correct caching responses. (we are not caching)
    • Automatically ping Weblogs.com. (check)
    • Automatically convert Slashdotted entries to static pages, and switch back to dynamic generation once the traffic subsides. (oh, to be slashdotted… nope)
    • Integrate support for Creative Commons licenses. (not yet)
  • Management
    • Web interface. (check)
    • Native LinuxSTEP interface. (huh?)
    • Accept entries from software on any other platform or device, using the metaWeblog API. (not yet)
    • Accept entries sent by e-mail. (nope)
    • Make it easy to send entries from a mobile phone (e.g. by replicating the features of Textile). (nope)

  • Backward compatibility

    • Import entries from Blogger, Radio, Manila, Movable Type etc. (not automatically, but if you are a database wiz…)
    • Keep URLs the same for legacy entries, while still allowing control over their appearance. (check)
 

The Genius Box: quality educational streaming video

by Steven Garrity

During my recent spell as a Mac-user, a friend pointed me to an interesting talk by Apple’s VP of Software Technology and all-around Unix-guy, Bud Tribble. The talk was great, both in terms of content (the speaker was interesting) and delivery (the streaming media was smooth and of sufficient quality).

This video is one of many available online by University of Washington Television. Many of the videos consist of lectures by professors, guests from industry, or other special university events. This is a fantastic use of the medium. I’ve been soaking in the talks on politics and interaction design. I commend the University of Washington for this significant contribution to the public good.

A few recommended starting points (most are about an hour long):

The entire collection can be browsed by series or by title. Basic requirements: Windows Media player and a decent high-speed internet connection (works well on my DSL). Add a reply to this post if you find any particularly good talks.

I suspect the way in which the internet has been stealing time from television in my life is representative of a lot of web users. However, the passivity of television is sometimes the whole point. For example, when you can’t sleep or need to wind down before going to sleep after a busy day, sitting and watching something (as opposed to reading/writing) can sometimes be just what you need. After all, who doesn’t find a PhD presentation on interaction design relaxing?

With the continuous improvements in quality and reliability of streaming media, portable computers, and wireless networking, great content like this will soon become widely accessible. As software and hardware becomes cheaper, I can imagine universities eventually making video of most lectures available online for reference.