It is great to feel the good vibes at Mozilla HQ today as we launch Firefox 3.5! It is always an interesting ride to see a browser develop, and realize how complex and large the work is.
Congrats to the browser developers out there who are working hard to make the Web better. With final versions of Firefox 3.5, Safari 4, and Chrome 2 out in the wild…. things are picking up nicely.
The Firefox 3.5 release is exciting for me because it really benefits the developers. We get Open Video, @font-face, cross site XHR, Geo Location APIs, CSS Media Queries, Native JSON, Offline support, Web Workers, and so much more.
And, the world keeps moving. I have seen some very cool things in the nightly tree, and look forward to beign around as the team works on the next great Firefox.
Watch the downloads come in with this cool download tracker that uses Canvas and SVG, all thanks to Justin Scott. The stats so far show that if the current rate trends hold we will beat the Firefox 3.0 download day, which is a surprise to all.
Sean Martell has created a nice wallpaper and persona to commemorate!
Over the years we are have mentioned many Firefox, and Firebug plugins to aid us Web developers. Wouldn’t it be nice to subscribe to a bundle of these tools? The Firefox Add On team has now given us that ability with Add On Collections:
Today, we’re excited to introduce a new feature to our website that will expose the niche add-ons that can be hard to find, and gives users a more active role in helping outstanding add-ons bubble to the top. One thing we’ve learned as add-ons have grown in popularity over the years is that once a user finds an add-on they love, they become a fan for life. We see this all the time as people recommend add-ons to their friends and write great reviews.
You will notice the Web Developer collection that features:
Robert Nyman has a new Firebug extension called Firefinder.
The idea is to quickly text CSS selectors/XPath in a document to see what will match, or how many instances of a certain element there are (thinking certain type of heading, for instance).
It offers:
A quick way to filter HTML elements via CSS selector(s) or XPath
Highlight them in the document
List them in the Firebug panel in a collapsable list
Paul Rouget and Tristan Nitot are having a lot of obvious fun with Canvas and <video> these days. The latest goodness is a demo by Paul that shows real-time dynamic content injection.
Notice the Firefox logo in between the two phones with bright screens? That is injected into the world thanks to Canvas.
How did Paul do this? He told us:
Obviously, I use the <video/> tag.
But what you see is not the video element (display: none;), but a <canvas/> tag.
All the patterns you see on the top right are regular <img/>,
<video/> and <canvas/> elements. The play/pause button is
a <svg/> element
(position: absolute;) on the top of the main <canvas/> element.
A canvas element provides a method named drawImage which let you
inject the content of a DOM element in the canvas (like a screenshot). It works
with three kinds of elements: <img/>, <canvas/> and
<video/>.
When you click on the <svg/> button, the Javascript code launches the
main video. Then, the main javascript loop is executed each 10
milliseconds.
Here are key things that occur during the main loop:
first, the content of the video is injected in the main canvas. That’s why
the canvas element looks like a video element;
second, the position of the 2 brighter areas of the canvas are computed
(you have access to all pixels values);
third, the required transformation is computed (rotation, scale,
translation);
fourth, the content of the selected pattern is injected in the main canvas
following the transformation.
Kevin Decker has released FireDiff a very cool Firebug extension that tracks changes to the page and CSS.
Firediff implements a change monitor that records all of the changes made by firebug and the application itself to CSS and the DOM. This provides insight into the functionality of the application as well as provide a record of the changes that were required to debug and tweak the page’s display.
The release, which you can find here uses recent features of the latest Firebug 1.4 code. Early days!
FirePHP solves the problem of AJAX debugging by sending debug information along with the response. To avoid breaking the response content, the debug information is placed into special HTTP response headers. This works for all types of requests, not just AJAX requests, which means you can even debug requests for images that are dynamically generated by a PHP script. You can use FirePHP in your development environment, or use it to track down bugs that only appear on your production site.
There are a few CSS features that Microsoft pioneered and has had available to developers in Internet Explorer for a long time now. One of those features is the text-overflow property, which is now in CSS3 and has implementations in Safari, and Opera. Firefox still does not support this feature, but I have heard that it will in Firefox 3.1.
Here is a rundown of what the property does. When text overflows an element’s box, the text-overflow property helps leave a visual hint to the user that there is more text. When a value of ellipsis is used, three dots will be shown before the text is clipped by overflow: hidden.
Lorem ipsum dolor sit amet, c…
I wanted to be able to use this feature in all browsers, so I wrote a small jQuery plugin in order to support Firefox. To use, just call ellipsis() on a jQuery object. For example:
If you do any web development, chances are you know checkboxes and radio buttons can have two states: checked and unchecked. But in the case of checkboxes, you may want to indicate to the user that they are half-way between those states, for example when you have a master checkbox above many other checkboxes of singular items. This is now possible on Trunk (Firefox 3.2) thanks to the implementation of the HTML5 "indeterminate" DOM property. All it takes is a bit of script:
We've been watching over the last little while as the Humanized crew has leveraged their experience with Enso to create Ubiquity, an in-development command-line interface for the browser. But what about folks who aren't as enamored with their keyboard as they are with their mouse?
Aza Raskin has recently published an interesting video showing how Ubiquity could work with just a mouse. It centers around this little nib which is barely visible when text is selected:
Hover over it, and it becomes more opaque:
Click on it, and a side-panel appears with the applicable Ubiquity commands:
This code creates a protocol handler for www.example.com that makes mailto links direct the user to the www.example.com web application, inserting the link into the URL given replacing the %s value. The final argument is the title of the protocol handler to present to the user.
There are obviously security limitations around this:
Note: Web sites may only register protocol handlers for themselves. For security reasons, it's not possible for an extension or web site to register protocol handlers targeting other sites...The URL template supplied when registering must be of the same domain as the webpage attempting to perform the registration or the registration will fail. For example, http://example.com/homepage.html can register a protocol handler for http://example.com/handle_mailto/%s, but not for http://example.org/handle_mailto/%s.
The user will be prompted on whether they want to allow this protocol handler:
Now, when the user clicks on a link that has a registered protocol handler, they will be prompted on how to work with it:
Firefox 3.1 now includes support for the HTML 5 video and audio tags. A nice new article just went up on using these on the Mozilla Developer portal. Firefox 3.1 currently supports the Ogg format, but other formats are being discussed for future support.
var v = document.getElementsByTagName("video")[0];
v.play();
There are a whole slew of events that you can listen to as well (there are 22!), so that you can attach behavior and update your UI based on different media events:
I've been delving back into the gnarly world of XML on the web lately and surprised to see what's changed and what hasn't. Coming up to speed on what's new in this part of the Ajaxian world, I found a great article from IBM DeveloperWorks on what Firefox 3 brings to the table with XML. Some highlights:
"Firefox 3 introduces one huge improvement to basic XML parsing. In the past on Mozilla browsers, parsing an XML document was synchronous, blocking all operations on the document until it was fully loaded...To the user, this meant he starts to see how a Web page shaped up before the browser had completely processed the page; on the other hand, with XML documents the user saw nothing at all until it was completely parsed...In Firefox 3.0, construction of the XML content model is incremental, much as it is for HTML. This will make a big difference for practical use of XML on the Web."
This is a good thing, since it means using XML on the web should be much faster as it is incrementally displayed now rather than appearing all at once at the end.
Another nice new feature in Firefox 3 is improved XSLT support (XSLT is a standard way to transform one XML document into another one, such as into HTML to display in the browser):
"The biggest win for those looking to use XSLT in Firefox is support for EXSLT, a set of XSLT extensions developed and sanctioned by the XSLT community and supported in many other XSLT processors. Firefox 3.0 adds support for a large subset of EXSLT, starting with the node-set function, an important workaround for XSLT 1.0's most severe limitation. EXSLT is organized into modules, each of which defines several extension functions and elements."
Lots of new EXSLT modules are now supported (including regular expressions!), which should make writing XSLT stylesheets much easier and more productive.
Even though XML on the web hasn't had the best success, it's still an important tool in the Ajax developers toolchain, especially those aspects that are cross-browser. Most developers don't realize they can do XPath, XSLT, advanced XML, and more cross-browser; while you don't usually need this power, sometimes its the perfect tool to solve a tough problem.
Finally, one of the things that would have helped XML on the web gain more adoption would have been to make working with namespaces easier. I stumbled across a great editorial today that I didn't see reported on how this could have been done. For example, why didn't they just standardize on prefixes like 'svg:' instead of long URLs? Its probably too late (though the HTML 5 working group is leaning in some of these directions), but the ideas in here are good:
"The decision to identify XML namespaces with URIs was an architectural mistake that has caused much suffering for XML users and needless complexity for XML tools. Removing namespace URIs altogether and simply using namespace prefixes to identify namespaces would make it easier for people as well as software to read, write, and process XML."
Isn't it great that a browser point release these days adds so many features? We are starting to see this from Firefox, Opera, WebKit and others, and it is exciting!
The labs team got Geode out there, and quickly we have seen the addition of the W3C Geolocation API added to the Firefox core. I can test Where Are You with a native implementation.
@font-face
WebKit lead with their @font-face implementation, and getting browser #2 to support it is huge. Now you can load up a font using same-origin rules via simple CSS:
We now have lots of examples testing out the video and audio tags with support for both OGG Theora and OGG Vorbis.
This is something that the Web really needs to work out. The codec game is far from Open, and with native support we get to do cool things such as integrating media with canvas, svg, and plain old HTML. Take a video, add transparency, and skew it a little.... and add an overlay message.
XHR Updates
XHR Progress Notification
We’ve added a better way to get progress notifications for XML HTTP Requests. We’ve implemented the W3C Draft Spec on progress events. In Firefox 3 the events available on the XHR object were progress, uploadprogress, load, abort and error. For 3.1 we now support the loadstart, progress, load, abort and error events. (uploadprogress is also supported, but is deprecated.)
We’ve implemented the draft specification for access-control for cross-site requests. Web developers have long wanted to be able to get data from one site on another but same-origin restrictions on many types of requests prevent many developers from mashing up content. This new access control mechanism offers the ability for servers, content and web clients to cooperate to make a lot of new things possible on an opt-in basis. The spec is complex, and support is new, so if you’re interested reading the spec is probably the best thing to do. It contains examples and uses cases.
Fast JavaScript VM
An early version of TraceMonkey is here:
Beta 1 does include TraceMonkey, our super-fast JavaScript engine, but it’s not turned on by default. If you do want to turn it on, go to about:config, set javascript.options.jit.content to True, restart your browser and try it out.
This is an early beta, of course, so there will be issues. Please file bugs if you find sites that don’t work or cause crashes or hangs. The more testing we get, the better it will be when we turn it on.
Phew, good times for browsers == good times for Web developers.
UPDATE
More browser news, Flock 2.0 is out there, providing a very social browsing experience.
