Blog


Microformats in Firefox 3

I'm not sure if everyone has been following the recent Microformat work being done at Mozilla, but it's very cool - and exactly what the Microformat movement needs.

I was able to talk with Michael Kaply the night that he released Operator (Mozilla's, sponsored, Microformat extension). This extension is part of the new Mozilla Labs initiative that was just started (It's an attempt to sponsor and promote excellent-quality extensions, and other tools; a terrific idea).

We discussed Microformats in general - and both complained about the shoddy quality of most Microformat parsers. We agreed that in order for the Microformat initiative to move forward, a couple things had to be done:

  1. A standard for parsing Microformats had to be clearly defined.
  2. An excellent implementation of that standard needed to be implemented.
  3. And an important player needed to adopt the use of that tool.

The reason why I'm so excited, right now, is that this is actually happening. In Firefox 3, it's looking likely that there's going to be native handling of Microformats. This would include a defined API for handling Microformats (most likely on the extension level) on any given web page.

This is a huge step forward for the Microformat movement.

Thankfully, Michael has already started developing the solid Microformat Parser, with Andy Mitchell, that will go into Firefox 3. And since this is part of the overall Firefox 3 Content Handling Requirements, it's a big priority for inclusion.

So, what could this content-handling API mean for you, the Firefox extension developer? It means that you would be able to write quick-and-dirty JavaScript to handle matched Microformats - and it'd be blazingly fast.

For example, here's some pseudo-code (any final result will, most likely, be very very different):

Microformats.addHandler("hcard", function(card){
  var img = document.createElement("img");
  img.src = "hcard.gif";
  img.title = card.data.name + "'s Personal Information";
  card.container.appendChild( img );
});

When it becomes this easy to handle Microformats, it almost becomes harder to not support them in your extensions. I suspect that once this feature hits the big time, we'll see a flood of Microformat-supporting extensions. And this is great for extension developers, the Microformat movement, and, most of all, end users everywhere.

This is a great time to be getting into Microformats.

Tags: api, javascript, firefox, microformats, mozilla, operator

Scope of Microformats

I've been doing a lot of work with Microformats, recently, but have hit a stumbling block: scoping. According to the reltag specification, scoping is possible:

rel="tag" is specifically designed for "tagging" content, typically web pages (or portions thereof, like blog posts)
Source: reltag

For example, here's a chunk of code borrowed from ideaShrub:

<li class="shrub">
  <h2><a href="">...</a></h2>
  <div class="date">...</div>
  <p class="desc">...</p>
  <p>
    <img src=""/>
    <strong>Tags:</strong>
    <a href="" rel="tag">ideashrub</a>
    <a href="" rel="tag">documentation</a>
  </p>
  ...
</li>

For this block, the appropriate scope for the two tags is within the 'li' element - but how can I specify that? For all some application knows, the 'scope' of those tags is within the 'p' element - or maybe the tags are related to the page as a whole. Why isn't this specified anywhere? How should scoping be handled - am I missing something?

On the other hand, if you look at the hcard microformat, they seem to be a little bit clearer by saying that a card is wrapped in:

<div class="hcard">...</div>

Which makes sense. Maybe there needs to be some sort of generic 'object' or 'item' microformat - you could use reltag, xfn, and even hcard all together to describe the object at hand - it just needs a proper scoping wrapper to make it possible. Should I be looking at RDF for this sort of issue, or am I just overlooking something?

Tags: reltag, microformat, microformats, xhtml

Current Projects

jQuery JavaScript Library

jQuery

Comprehensive DOM, Event, Animation, and Ajax JavaScript Library.

Recent Projects

Pro JavaScript Techniques

JavaScript Book

The best techniques for professional JavaScript. Published by Apress.