Things You’ll Love About Firefox 3.6

To be honest Firefox 3.6 is a little lighter on Features than Firefox 3.5. It’s more about refining and improving than bells and whistles. Here are the things I feel are really noteworthy.

User Centric Features

UI Speed – Many things in the Firefox 3.6 UI have gotten faster. For example startup time has been improved thanks to various optimizations. My personal favorite is the awesomebar is now asynchronous, if you don’t know what that means, just trust me that it makes things feel faster if you have a slow hard drive like in a laptop.

JS/Video Speed Improvements – TraceMonkey, the fast JS engine has gotten some tweaks to improve performance even further. Seeking in <video/> is now much faster than it was in Firefox 3.5.

Focus – UI geeks will note that Firefox has had a few issues regarding focusing elements. Thanks to some refactoring it’s vastly simplified and improved.

Personas – Firefox has always supported theming, but it’s a complex process to build a theme and it’s prone to breaking as the UI evolves between versions. Personas is a light weight system to customize the look of the browser’s chrome.

Plugin Update Notification – A big cause of Firefox crashes, and security issues actually aren’t related to Firefox directly but plugins. Firefox can now notify you when you need to update a plugin helping you to keep your system as stable and secure as possible.

Full Screen For <video/> – Firefox can play native <video/> but thus far had no method to go full screen. Apple may want you to pay for “Pro” for full screen but with Firefox 3.6 you get it at no extra charge.

DLL Blacklist – To improve security/stability Firefox now has a DLL blacklist and can prevent other DLL’s from interfering with Firefox. This is Windows only at this time.

Opening Links In New Tab Position – When you opened a link in a new tab in previous versions it opened in a new tab on the far right, with lots of tabs open this created confusion as you may have several different tabs open on various things your doing. Now this will result in the new tab being created to the right of the current tab. If you don’t like this behavior you can set tabs.insertRelatedAfterCurrent to false. It takes a little getting used to, but it’s worth it.

For Developers

-moz-background-sizeThis is exactly what it sounds like. I’ve wanted to do this a few times in the past.

Poster frame for <video/>Poster frames are now supported for <video/>. It’s a small bit of polish but will hopefully benefit design and perhaps even SEO down the line.

Web Open Font Format (WOFF) – Imagine an open font format that supported compression and meta data. Now imagine that a lot of font foundries have expressed support for it. WOFF!

async attribute for <script/> – It’s simple enough, the async attribute is now supported. Those who care about performance have wanted this for a long time.

Using Files from Web ApplicationsThis is a huge step towards making web applications first class citizens. Hopefully we’ll see support for this in Google Docs at some point (one of the apps I think could best make use of this).

HTML5 Parser – Firefox 3.6 ships with an HTML5 parser, though it’s disabled for now by default. To enable set html5.enable to true.

Optimizing @font-face For Performance

You want to use @font-face, then you realize it’s got some downsides. First of all, it’s another http request, and we know that the golden rule of web performance is to keep http requests to a minimum. Secondly fonts aren’t even small files, they can be 50k+ in size. Lastly the lag of fonts loading last means you page seems to morph into it’s final form.

Here’s a cool little optimization. By using a data: url you can use the font inline by encoding in base64. For example:

@font-face {
    font-family: "My Font";
    src: url("data:font/opentype;base64,[base-encoded font here]");
}
 
body {
    font-family: "My Font", serif
}

You can see this in action here. This seems to work fine in Firefox 3.5, and Safari 4 (presumably any modern WebKit based browser). Other browsers will simply act as if they don’t support @font-face.

In practice I’d recommend putting it in a separate stylesheet rather than inline css so that your pages are smaller and css can be cached for subsequent page views.

Data url’s are part of Acid2, which most modern browsers either pass or plan to pass. If you use an Open Type font you’d get pretty decent compatibility (IE only supports Open Type). Using True Type you’d still get pretty good compatibility sans IE. Check the @font-face page on MDC for more details. Unlike images, browsers that support @font-face are likely to support data: url’s as well, making this a pretty good solution.

Special thanks to Open Font Library for having some nice free fonts with awesome licensing. This post was partially in response to a comment left the other day on my @font-face hacks blog post.

@font-face Hacks

I’m going to make a bold prediction on the night before a certain web browser is scheduled gets an upgrade. @font-face (MDC) will change web design, but not just for typography. As I suggested a few days ago, to use a font on the web it needs to sit on a webserver so the browser can download it, hence the website is “distributing” the font. Licensing for many fonts doesn’t currently permit this, making @font-face for fonts somewhat problematic and hard to use… at least today.

Cool Trick!

Rule #1 of Steve Souders popular book “High Performance Web Sites” is simply:

Make Fewer HTTP Requests

That said, @font-face can be essentially as an image sprite by creating your own font with the glyphs you want. Unlike image sprites they aren’t hacky in nature requiring tricky coordinates, nor are they obnoxiously memory intensive (and a drag on mobile devices). Firefox also loads fonts last, so you can be assured it won’t slow down the rest of your page. They also degrade nicely for devices that don’t support them.

Of course this changes webdesign to use simpler icons and pick 1 color per glyph… but there are some pretty interesting enhancements for example the ability to scale. Fonts are designed to resize much better than an image.

The other caveat is that this can make your markup slightly ugly. However it’s not so bad when your building something in JavaScript. Consider for example implementing Pac-Man. Rather than a dozen images, or some complex sprite you can simply move <em>p</em> around. You can have quite a few glyphs in 1 font file.

Of course you can also use <canvas/> or a data: url to embed images, but IE doesn’t support <canvas/> and only recently started supporting data:. IE has supported OpenType (not TrueType) fonts since IE 4.

I’d be curious if anyone actually implements this and how well it works in practice. It’s not a true replacement for image sprites, but for a few cases, such as simple icons, it could actually do the trick.

Um What?

This trick can also be engineered to work against the way the web traditionally works. For example, I could create a ROT13‘d font or any other encoding I imagined. This essentially lets you remap the way characters are on the page, and the way they appear. For example on the page may appear:

<span class="rot13font">rknzcyr@qbznva.gyq</span>
<small><strong>Note:</strong> Do not copy/paste my email address</small>

That looks like a totally invalid address, but with a ROT13 font, you’d know what it is… though if you copy/paste it you’re going to get the encoded version. (I could in theory course engineer some JS to ROT13 the string). This also could deter some spam bots, which lore says have found ways around JS munging.

Conclusion

Moral of the story: @font-face can be fun for more than just typography. Cult of Helvetica be damned… all you typography geeks.

Things You’ll Love About Firefox 3.5

For the upcoming Firefox 3.6 release: go here!

Firefox 3.5 is around the corner. For those who don’t pay attention to development here’s the big features worth checking out. There are lots more, but these are my favorites:

User Centric Features

Private Browsing – Officially it’s called “Private Browsing” but most know it as “porn mode”. Simply put once you turn on the feature nothing about your browsing is saved to your computer until you turn it off. No browser history, cookies, cache, no passwords, download list. Great for shared computers where you may not want the next person to know where you shopped, what you bought etc.

Faster JavaScript – Everyone is doing it. Firefox 3.5 now ships with TraceMonkey which uses a technique, called trace trees to add just-in-time native code compilation to SpiderMonkey, the JS engine in Firefox. Bottom line: faster JavaScript makes JavaScript powered sites like Gmail way faster.

Faster Awesomebar – The awesomebar is a fast way of browsing the web, but the UI can sometimes get a little sluggish. Some awesome work has been done to optimize it for better performance. Faster UI = better browsing experience.

Better Awesomebar – The Awesomebar got a few enhancements including autocomplete for tagging, which is extremely handy as well as editing tags on multiple bookmarks at the same time.

Undo Closed Window – We’ve all done it before. Now you can undo a closed window just like a closed tab.

Drag Tab To New Window – Previously you could drag/drop to reorder tabs. Now you can drag a tab off the tab bar to move it into its own window. This may sound trivial but it actually makes organizing tabs much easier.

Video/Audio – Firefox 3.5 supports the new HTML5 <video/> and <audio/> tags. Specifically it supports Vorbis in Ogg containers, as well as WAV with support for more formats expected in the future. I’ve discussed open video before and suggest learning more about how important this is there.

SSL Error Pages Suck Less – The error pages shown when there is an SSL error were pretty tough on users since they didn’t display anything helpful. The new error pages are a bit more helpful. The bug implementing the changes has tons of details on the changes.

Geolocation – Simply put a website can (if you allow it) gather information about your internet connection and using a location service (provided by Google by default) will calculate your location. No more needing to constantly type in your zip code, or city name to get local information. For privacy you need to explicitly allow it. Geolocation is in a word awesome.

New Icon – Well, it’s not really new. It’s “refreshed” I guess. It’s not a huge change, but it does look really sharp, especially in more modern operating systems that use larger icons like Mac OS X. Alex Faaborg has it on his blog in various sizes for you see.

Developer Centric Features

Web Workers – My personal favorite is web workers. Essentially its background processing in a separate thread for JavaScript. No more locking up the browser’s UI because you need to do some complicated JS calculations. I’ll leave it to the documentation linked above for examples. Very handy stuff.

@font-face – Designers have long been frustrated with the lack of font options on the web. They often resort to using images and flash as a way to expand their font options. With @font-face it’s now possible to use custom fonts and reference them via css. There is however the issue of licensing of fonts used on a webpage since the font file itself is accessible via a web browser.

Native JSON Enough said. Native JSON is fast. var obj = JSON.parse(someJS);

Cross Site xhrxmlHttpRequest() has ushered in a new era of JavaScript. It’s not however without some serious limitations. One of the most obvious limitations is that you can’t use it across hostnames. Until now.

There’s more cool toys, but these are my favorite.

Still not convinced of all the new stuff? Check out this demo, then look at the source behind it. It’s pretty impressive.