The <Video> Tag

Brendan Eich, the Canada-loving technical leader of the Mozilla project, has written a piece on The Open Web and Its Adversaries and given a presentation on The Open Web. In addition to a general overview of what it means to have an open web, the post mentions work that Opera and Mozilla are doing with the WHAT working group to create new HTML tags for <audio> and <video>.

The basic idea (still in the early stages, I gather), is to create <audio> and <video> tags that would allow audio/video playback in the browsers without relying on a proprietary plugin (like Flash, in the case of YouTube). Browsers implementing the tags would be able to use any video format, but all browsers would support a base format of Ogg Theora and Ogg Vorbis.

Theora and Vorbis video and audio compression formats that are free, open-source, and unencumbered by patents. I’ve written before about the importance open formats for media.

If Firefox and Opera were able to leverage their combined corner of the market share and force Microsoft to implement such a setup in Internet Explorer (or if they did so eagerly on their own), it would be a great step forward for media on the web.

 

Scaling Images in Firefox 3

After making the post about smooth corners in Firefox 3 yesterday, I began to wonder what other smoothnesses (which should be a word) the next version of Firefox might have in store.

As I mentioned yesterday, the Cairo graphics library will power the rendering of web pages in Firefox. Functions such as resizing an image, are now performed by this new library.

In current web browsers, if you have an image that is 100 pixels by 100 pixels, but you tell the browser to resize it to 85×85px (by specifying the height and width in the HTML <img> tag), the results were ugly. The browser would resize the image, but not with any of the smoothness that you would see if you had resized the image in an application like Photoshop or the Gimp.

Now, in Firefox 3.0 Alpha 1, resizing an image like this actually produces a smoothly size image. This isn’t something I would recommend doing, but it is another nice example the improvements coming in the Firefox rendering engine.

Here’s an example of a PNG image version of the Firefox logo. There is only one source image used for all of these variations. This source image is 128 pixels by 128 pixels. The top row shows how Firefox 2 resizes the image, and the bottom row shows how it’s done in Firefox 3.0 Alpha 1.

Firefox image resizing comparison

I had the good fortune of meeting Carl Worth, a lead Cairo developer, a few years ago in Boston. He was a gentlemen and was more enthusiastic about tessellation than anyone I’ve ever met. It’s nice to see his hard work will be helping to improve such a widely adopted application as Firefox.

When a developer of a mapping application was considering a lower-quality view to make his maps render faster, Carl suggested that if Cairo was too slow, then it should be fixed, not worked-around. I understand that they’ve since made good progress on performance.

 

Cairo Corners in Firefox 3

The latest alpha releases of Firefox 3 use a library called “Cairo” for much of the graphics work (note: I don’t understand exactly what that means, but it doesn’t matter).

Thanks to this new graphics infrastructure, boxes with corners rounded by the pre-CSS 3 property border-radius are rendered with beautiful anti-aliasing (currently accessible as the non-standard -moz-border-radius and soon -webkit-border-radius). Stated more simply, rounded boxes are prettier.

Here’s a quick comparison of a box with CSS rounded-corners rendered in Firefox 3.0 Alpha 1 versus Firefox 2.0:

Firefox rounded corner comparison

The difference is subtle, especially with lighter colours like these, but this example represents a significant improvement in the abilities and quality of rendering in Firefox.

Also note that Firefox 3 probably won’t be released until the second half of 2007 (that’s not based on anything official – just a guess).

 

Distributed Punch in the Face System

Suggestion for a distributed open-source system to fight badness:

The system allows you to enter the name/location of a person who needs to be punched in the face, somewhere in the world (a known spammer, for example).

Then, you see if there is anyone near you that needs to be punched in the face. Punch them.

I’m not sure if it will scale.

 

Tango Theme for Firefox

Garrett LeSage and a group of other good people have completed a nice upgrade of the Tango theme for Firefox 2. The theme brings the icons from the Tango Desktop Project to Firefox along with many improvements in making Firefox look and feel more like a native application on Linux.

Tango theme for Firefox 2 preview

There are also a series of “sub-themes” as well. The Gnome sub-theme matches with the default Gnome icon theme, Tangerine matches with the Ubuntu theme, and Industrial for the old Industrial Gnome theme.

Highly recommended for those using Firefox on Linux. There are rumblings of an update for the Tango theme for Thunderbird 2 as well.

 

Firefox 2

Since you are on the internet right now (admit it, you are), you are probably aware that Firefox 2 has been released. My congratulations to all involved. While I was much less involved in the visual design this time around, it was still a pleasure to have been involved at all.

The Mozilla.com website has been updated as well. This website update was something that I was much more involved with than the actual browser update. The design itself was done by the Nobox Marketing Group (get it?) with the implementation handled by our team at silverorange and the good people at Mozilla.

My favourite new feature in Firefox 2 (after the spell checking and recently-closed tabs, that is): Try entering a math formula into the Google search box (I’d recommend 57 * 4 / pi). Notice that the solution to your formula is instantly displayed in the suggested results. Thanks to Paul Kim for pointing out this gem.

 

Gaim Needs You

Gaim dude

The fabulous instant messaging client, Gaim, could use your help. That is, you’re a talented and generous web designer.

With the impending release of Gaim 2.0.0, the Gaim website is in need of an update to be as slick as the application it represents. If you are a web designer that is interested in helping create a new, better Gaim website, please let me know.

There may be some budget available, but we’re really looking for people to contribute sans-monetary-compensation. That said, if you’re worth it and can’t afford to volunteer, but are still interested, let me know.

I’d love to do it myself, but I’m too fabulous busy doing other stuff.

 

Selecting Columns and Rows in HTML Tables with Firefox

Col 1 Col 2 Col 3 Col 4
Row A 1A 2A 3A 4A
Row B 1B 2B 3B 4B
Row C 1C 2C 3C 4C
Row D 1D 2D 3D 4D

A random tip, because I find it so handy on rare occasions:

You can select columns, rows, or blocks of cells in HTML tables in Firefox (or any Gecko-powered browser) by holding down “Control” and
selecting with the mouse. Handy for copy+pasting data from tables in websites.

Try it out in the table to the right.