Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Firefox 1.5 developer highlights

Firefox 1.5 Beta 1 is out, and is the most exciting browser release in a very long time. It comes with the Gecko 1.8 rendering engine, which includes a ton of interesting new features. New in this version (unless you’ve been tinkering with the Deer Park series):

  • SVG
  • Canvas
  • CSS3 Columns
  • JavaScript 1.6

Let’s take a look at these in turn.

SVG

The Mozilla SVG project has been quietly chugging along for years now, but until quite recently you needed to download an entirely separate build of Mozilla to try it out. Firefox 1.5 is the first Firefox release to include it and opens up a whole new world of vector graphics to web developers. The Croczilla Examples page is a great place to start—be sure to try the interactive demos near the bottom. There’s more about Mozilla’s SVG support on the Mozilla Developer Centre.

Canvas

The <canvas> element introduces a modern 2D drawing API to client-side development, with the promise of a 3D API in the future. It was invented by Apple for use in Dashboard widgets, then written up as a specification by the WHATWG to facilitate compatible implementations in other browsers.

The potential for innovation with <canvas> is enormous. Demos are pretty thin on the ground at the moment, but this interactive demo by Darin Fisher hints at the things to come. The Canvas shell is handy for playing with the API. Devmo has the beginnings of a great Canvas tutorial. This thing (originally a Safari 1.3 demo) is pretty too.

The ability for Firefox extensions to render web pages to images using <canvas> should lead to some very cool new extensions in the future.

CSS3 Columns

The ability to create auto-flowing columns (famously achieved on IHT.com using terrifyingly hairy JavaScript) has long been desired for the web—among other things it’s a neat way of keeping line widths comfortably readable. The CSS3 Multi-column layout module enables this ability, and Gecko 1.8 implements parts of it in the form of the -moz-column-count, -moz-column-width and -moz-column-gap properties—the -moz- prefix is W3C approved syntax for vendor-specific CSS extensions. You can see columns in action on Robert O’Callahan’s blog (Robert implemented column support in Gecko). Devmo’s column documentation has further details.

JavaScript 1.6

According to New in JavaScript 1.6, the new features are E4X support, Array extras and “Array and String generics”. I can’t find anything detailing what the latter means, but the first two are pretty interesting. E4X (aka ECMAScript for XML) is a relatively new specification which promotes XML to a native data type. It lets you do things like this:


var x = <foo><bar>baz</bar></foo>;
alert(x.bar);
x.monkey = "good";
alert(x.toXMLString());

for each (var child in x) {
  alert(x.toXMLString());
}

(Example excerpted from Aaron’s post to the Greasemonkey mailing list.)

It isn’t available within script tags by default: you have to explicitly turn it on with <script type="text/javascript;e4x=1">, presumably to preserve backwards compatibility with existing pages.

Array extras consist of some new methods on the Array class, the most interesting of which are every(), forEach(), map(), filter() and some(). Each of these takes a function reference (i.e. a callback) as an argument and applies it to each item in the array in some manner. Fans of functional programming techniques will welcome these, and they can easily be enabled in older browsers by conditionally modifying Array.prototype. WebReference.com has a tutorial covering the new array methods.

If anyone knows what “Array and String generics” are, please leave a comment!

The above are just the highlights of Firefox 1.5 from a web developer’s perspective. The improvements for regular users are also notable, including re-orderable tabs, caching of browser state for lightning-fast back and forward and lots of cosmetic (and performance) improvements for the Mac version. An unofficial changelog is available courtesy of the Burning Edge.

Exciting times indeed.

Posted 11th September 2005 at 1:46 pm

This is Firefox 1.5 developer highlights by Simon Willison, posted on 11th September 2005.

Tagged , , , , ,

View blog reactions

Next: More fun with the monkey

Previous: Change of e-mail address

26 comments

  1. Canvas sounds cool - maybe we'll finally see the extension I have long wanted to complete my web developer / design student collection - screenshots, full length screenshots, a huge time saver if you do a lot of web page critiquing and analysing - especially when you consider that with canvas you can 'draw' on the page - imagine annotating a web page and saving out an image for inclusion in research docs.

    Jon B - 11th September 2005 15:14 - #

  2. It's only a 0.4 release, but there is a Firefox extension that already exists called Screen Grab that uses a Java applet to take a few different types of screenshots of the webpage, including full length screenshots.

    David W - 11th September 2005 16:37 - #

  3. Canvas support is all well and good, but it's crippled by the non-resolution of bug 291218. There's no way for (Javascript-only) extensions to get access to the image data of the rendered canvas. This means no way to save thumbnails of rendered web pages, no way to draw things and then publish them with the Atom API, etc. etc. etc.

    PLEASE VOTE FOR THIS BUG! There are so many insanely cool things we could do with canvas if the image data were available to Javascript extensions!

    Mark - 11th September 2005 17:01 - #

  4. For Array and String generics I found the following description from erik's weblog a bit helpful:

    "Array and String generics means that some of the methods that are available on Array.prototype and String.prototype are now also available as static methods of Array and String where the first argument passed is an object that has the same inteface. For strings it is not that useful because strings are immutable and all objects have a built in toString method already. But for array like structures it is really nice, allowing you to apply for example filter to a NodeList."

    http://erik.eae.net/archives/2005/09/09/23.05.56/

    Chris - 11th September 2005 17:01 - #

  5. Firefox's SVG support (like Opera's) is still pretty broken. It is certainly not on a par with Adobe's SVG plugin.

    Aside from actually displaying "real-world" SVG samples correctly, the latter has the advantage of being cross-browser. Its disadvantages (such as they are) flow from its only supporting SVG loaded via an <object> element. Inline SVG is not supported.

    Anyway, here are some samples from my blog of SVG figures displayed incorrectly by Firefox's native SVG renderer.

    More examples are here, here, here, here and here. In each case, you can find a GIF file which shows what the figure should look like. All browsers (except Safari) will fall back to the GIF figure if you disable both Adobe's plugin and the browser's native SVG support. With Adobe's plugin installed, you'll see the fonts display correctly and the SVG figure sized appropriately to whatever the current text-size of the browser window is (hit the text-zoom feature to watch the figure rescale along with the text).

    Jacques Distler - 11th September 2005 19:50 - #

  6. I was going to say "read my blog" but Chris beat me to it. Basically it means that you can do things like these:

    Array.map(documeng.getElementsByTagName("*"), function (el) { 
   return el.tagName;
});

Array.filter("abc123", function (c) {
   return c >= '0' && c <= '9';
});

String.toUpperCase({});

    I've yet to come up with a scenario where the String generics are useful.

    Erik Arvidsson - 11th September 2005 21:59 - #

  7. I'm not convinced by canvas, IE has had 2D and 3D drawing API's and the ability to redirect HTML to an image since IE4, no-one used them, the use cases aren't really there, it's just gimicky effects, and single threaded javascript is way too slow, and bad an authoring environment for creating anything but toys.

    Jim Ley - 11th September 2005 23:39 - #

  8. I've written an simple graph calculator using html, javascript and canvas. Check it out: http://user.tninet.se/~gft623w/simplegraphcalc/ some text is in swedish, but you'll probably figure it out.

    Arvid Jakobsson - 11th September 2005 23:58 - #

  9. I'm excited that SVG is finally back in (after the snubbing of Adobe's plug-in in 2000 or 2001 or whenever it was). I am experiencing the same problems Jacques Distler reports (especially the substitution of scrollbars for scaling when showing SVG in a viewport).

    If we're going to be soliciting vites for bugs, I suggest 288276 (width + height), 119490 (fonts), and 216462 (declarative animation).

    Damian Cugley - 12th September 2005 11:50 - #

  10. Jim: I agree that canvas support may be "toy-ish" for web pages themselves (although if it presents a pseudo-standard to replace Flash, it can't be all bad). But I have three or four ideas for kick-ass extensions (or Greasemonkey scripts, if a future version of Greasemonkey makes the APIs available) -- but all of them require access to the underlying rendered image data. Thus my interest in bug 291218.

    Mark - 12th September 2005 17:59 - #

  11. Jim: One example of the use of Canvas: Graphs and statisical data. This genrally has to be done server side using a Graphics Lib, but now the data can be sent directly to the browser for rendering (either as a graph, for example, or, if no support for canvas, a table of data) Personally, I cant wait to see all the online games that will start appearing overnight using canvas...

    Ben Davies - 13th September 2005 15:59 - #

  12. Jim: There's non need to use a Canvas to draw a graph with no refresh. You can use the data: uri scheme (rfc 2397) to generate some images on the fly. I used it a lot in Neja, the JavaScript demo I entered at the Assembly'05 ( warning, it needs Flash ... to replay the MP3 )

    Mathieu 'P01' HENRI - 13th September 2005 16:16 - #

  13. I meant Ben, not Jim. U__U

    Mathieu 'P01' HENRI - 13th September 2005 16:30 - #

  14. Russian translation available now.

    Maksim Rossomachin - 14th September 2005 18:45 - #

  15. WHY WHY WHY are they including CSS3 Columns support? Did they learn NOTHING from Netscape 4? CSS3 Columns aren't even slated for the "Last Call for Comments" stage until 2007!* Not only that, but it's going to be a "vendor-specific CSS extension."

    I thought you were better than that, Firefox!

    *source: http://www.w3.org/Style/CSS/current-work

    Jay - 14th September 2005 21:17 - #

  16. Jay, that's a pretty uninformed position.

    In almost all standards efforts, experimental implementations are valuable in discovering the shortcomings of current designs and informing better resulting standards. Mozilla's decision to support an implementation as vendor specific is dandy. It's clearly not cross-browser, so there's no danger that people will develop Firefox-specific designs without fallbacks.

    Indeed, the W3C doesn't even make recommendations "final" until there are several implementations of Candidate Recommendations. Standards developed in a vacuum net results like, uh, XLink, XHTML 2.0, and XForms. I'll take informed recs, thanks.

    Jeremy Dunck - 14th September 2005 23:59 - #

  17. Jay seems to have joined what I've noticed is a growing group of people - Internet Explorer fans who take every opportunity to disparage the competition. I remember Chris Beach ranting about the "hypocritical" Firefox for implementing the "proprietary" -moz-opacity that mirrored the CSS 3 Color specification while simultaneously praising Internet Explorer for its proprietary filters.

    I've noticed that this type of ignorant fanboy has become far more common over the last few months. There's an obvious link with Internet Explorer 7 development, my guess is they were always there, but have had to keep quiet because of an embarrassing lack of progress. Now there's progress, they are all coming out of the woodwork.

    Jim - 15th September 2005 04:05 - #

  18. This posting has been translated into Russian and published at: http://www.webmascon.com/topics/technologies/14a.a sp

    webmascon - 15th September 2005 05:49 - #

  19. Now that is progress. But, why use vendor-specific properties when there is a more or less stable draft for multi-column layouts? Seems questionable to me, too. Never ever using proprietary properties [...].

    Jens Meiert - 16th September 2005 11:00 - #

  20. Jens: using vender-specific properties for things like Mozilla's column support is actively recommended by the W3C - precisely because the CSS3 columns specification is still a working draft, which means it could change at any time. If Mozilla were to support the column-count property (resulting in web page authers using it on their sites) and then the meaning of column-count change all of those sites would contain incorrect code. If authors just use -moz-column-count it doesn't cause problems if the spec is updated.

    Simon Willison - 16th September 2005 12:25 - #

  21. Don't forget about the new DHTML accessibility features that IBM contributed to Firefox 1.5. These features have the promise to keep DHTML and AJAX from making sites inaccessible: http://www-306.ibm.com/able/news/firefox.html http://www.mozilla.org/access/dhtml/ http://ue.corp.yahoo.com/natek/accessibility/da11y -developers-guide.pdf

    Adam Platti - 26th September 2005 19:35 - #

  23. I'm curious: What can be done in <canvas> that can't be done in SVG? Certainly SVG is a better candidate for graphs and statistical data? Consider transforming raw XML into SVG using XSLT, check out this link

    Jeff Schiller - 28th September 2005 19:39 - #

  24. Jeff: The only thing I can come up with is creating images from web pages. Canvas is meant to be a postscript-style interface while svg is a dom-like interface. Canvas works now and is faster.

    CSS3 Columns: Actually the javascript hacks for iht are pretty mild. The major hack is that the entire story is a single block of text. Stealing the basic technique, I implemented columns on http://nique.net because I wanted to retain the newspaper feel. I took out the major restrictions (single block, font size, no images, only 3 columns) because they offended my aesthetics. This, of course, makes my js hairy while keeping the markup clean while iht's markup is hairy and their js is comparatively clean. ;]

    grayrest - 2nd October 2005 04:20 - #

  25. Simon Willison wrote:

    using vender-specific properties for things like Mozilla's column support is actively recommended by the W3C

    AFAIK, the spec allows it, but it does not recommend it, actually.

    Jens Meiert - 7th October 2005 10:46 - #

  26. Jens, the CSS spec recommends a way to do extensions if you're doing an extension. The CSS working group also recommends that when implementing features from specs which are not in Release Candidate stage yet implementors use a vendor prefix. Similarly, a vendor prefix is indicated if the implementation is significantly different from the spec (eg very buggy).

    Boris - 8th December 2005 05:17 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2005/09/11/firefox15

A django site