Articles for November 2009

5 Years of Firefox Cake at the Firefox Developer day in Tokyo, Japan

Firefox is five years old. We thought that we would celebrate that by talking about how the web has changed over the last five years and Firefox’s role in those changes.

Where We’re At

2009 has been an interesting year. We’re at a crossroads for the Internet. In the next 12 months or so we’re likely to see regulation of the Internet in the United States – possibly for good, possibly for bad. We’ve seen increased interest in the browser space with the entrace of Google with their minimalist Chrome browser. Mozilla put a vastly improved rendering engine into the hands of hundreds of millions of users with the release of Firefox 3.5. The EU is working with Microsoft to implement a ballot to make users aware of browser choice. No one could possibly say that things are boring right now. And this has only been over the last year.

But what has changed over the last five years? What are the main themes? We’ve picked a few to talk about and we hope that it helps put things into perspective for the next five.

The Rise of the Modern Browser

One thing that’s become obvious over the last five years is the wide gap that’s emerging between the field of modern browsers – Firefox, Safari, Opera and Chrome – with the world’s most popular browser – IE. The modern browser is built for the future of web applications – super fast JavaScript, modern CSS, HTML5, support for the various web-apps standards, downloadable font support, offline application support, raw graphics through canvas and WebGL, native video, advanced XHR capabilities mixed with new security tools and network capabilities.

Over the last five years we’ve been setting ourselves up for the next five. The web is moving faster, not slower, and modern browsers are set to handle it.

In this sense we’ve done our jobs at Mozilla. We were first on the scene with fast JavaScript, CORS, mixing HTML and SVG, WebGL is based on Canvas3D work we pioneered, we’re scripting hardware with geolocation and orientation. We’re helping to standardize and implement some new CSS capabilities that are being developed in other browsers, we’re leading the web towards a modern font system and giving web authors and users more security tools. Our job is to help keep the web rich and moving forward – this is a huge part of our public benefit mission. This is the opportunity that Firefox’s five years have offered us.

The browsers that are on the horizon aren’t just incremental changes – they represent the pieces to build the next generation web – rich with standards-based graphics, new JavaScript libraries and full blown applications.

Standards Won

Firefox’s growth on the web has had another important effect – bringing standards to the forefront of development. Very early in the Mozilla project almost half of the web’s HTML pages started using DOCTYPE in order to opt-in to standards mode for many web browsers. Developers signaled that they wanted to use a standards-based method for development.

That’s important. It set up the current frame for development on the web that we have today. It allowed Apple to take KHTML and turn it into Safari which then allowed Chrome to pick up that work and enter the market and render a standards-based web. Now we don’t have just one or two browsers, but many, and a lot of that has to do with the way that early web developers approached development.

Standards matter, and they should continue to matter. When they do those individual human beings we like to call users benefit with greater choice and fast innovation.

Customizing Your Experience

Led by Firefox’s add-ons system there’s been an explosion in the number of people who are customizing their experiences – both in browsers and on the web. Anywhere from one third to one half of Firefox users have some kind of add-on installed.

The web is unique, and was built to be hacked. No other widely-deployed system in the world delivers itself as source code like the web does. And this transparency has made it possible for the distributed innovation that we’re seeing in Firefox and on the web. People patching new UI into their favorite web sites, mashing up data from multiple sources or radically changing the feel of the browser itself – this is a source for inspiration for browser vendors and web site operators alike. For the first time individual people have the ability to take an active part in the future of their computing experience.

It’s also worth noting that Gecko and Firefox are unique in this space. The highly modular nature of Gecko mixed with the fact that Firefox itself is written in HTML and XUL (another UI-focused markup language) means that it’s the only browser that’s hackable like the web is. Every other browser is built as a monolithic desktop application from the last millennium. This natural advantage not only means that Firefox has the widest array of add-ons and developers, but is also a source of inspiration for most of the rest of the market.

RSS and Data

In the last five years one of the big changes we’ve seen is web sites offering up data and feeds. Feeds in particular have reached the point where even non-technical people know what they are and how to use them. The ubiquitous RSS icon, which was originally created for the Firefox browser and given away by Mozilla, now exists on millions of web sites offering users the ability to get updates on their terms.

But we’ve gone far beyond just simple feeds. Advanced APIs are now appearing for web sites so you can integrate native applications, build a Firefox extension or be able to pull your data out of a web site.

And we’ve also moved from the promise of XML to the reality of JSON as the data format of choice.

Video

It’s important to remember that Youtube didn’t exist when Firefox was launched. At that time your only options were native QuickTime, Windows Media or Real Player. (Anyone remember Real Player?)

In the last few years we’ve seen Youtube become one of the largest sites of the Internet, the launch of Hulu, and sites like Netflix offering premium on-demand video right over the Internet to web browsers and devices alike. We’ve also seen millions of people create their own videos and publish them to the web.

We’ve also seen the launch of open video and native video support in browsers to bring the creativity and hackability of the web to currently closed video platforms.

Users as Creators

The rise of the web is a story of anyone being able to create a web site. But that’s still a largely technical exercise, even with tools. What we have seen, thanks to tools like WordPress and blogger, is the growth of weblogs, feeds and data which make it possible for anyone with a web browser to become a publisher or journalist.

And it has moved well beyond just text. People with low-cost tools are making movies and posting them. Remix culture is alive and well, creating comentary and new and exciting creations – all in the hands of pretty normal people.

Mobile

The iPhone taught us that you could build a decent browser for mobile phones and that data was important. Phones, really just in the last five years or so, have shown us that access to data plans that look like what you can get to your house can unleash developer and user creativity.

In the last five years at Mozilla we’ve also made the commitment to build a browser for mobile devices. We’re still in an early pre-1.0 beta stage, but that browser is already getting excellent reviews.

So what about the next five years?

Mozilla has been at the heart of many of the issues of the Internet over the last five years. We’ve vastly improved the browsing experience for hundreds of millions of people around the world. We’ve managed to keep Microsoft honest and forced them to release newer versions of their browsers. Firefox’s presence was a large factor in Apple being able to ship a browser to its user base as the Mac came back to the market. We’ve made it possible for third party browser vendors like Google to enter the market. We’ve proven that people care about improving their experiences on the web. We’ve given over 330 million people the taste of what it’s like to use an open source product. And we’ve overseen the technical growth of the web through direct action and standardization.

It’s hard to beat that, but we’re going to try. We’ll continue to make competitive browser releases and improve people’s experiences on the web. We’ll continue to innovate on behalf of developers and bring those improvements to the standards space. And we’ll continue to grow our amazing global community of users, developers and activists.

Over the next five years everyone can expect that the browser should take part in a few new areas – to act as the user agent it should be. Issues around data, privacy and identity loom large. You will see the values of Mozilla’s public benefit mission reflected in our product choices in these areas to make users safer and help them understand what it means to share data with web sites.

Expect to see big changes in the video space. HTML5-based video and open video codecs are starting to appear on the web as web developers make individual choices to support a standards-based, royalty-free approach. Expect to see changes in the expectations around the licensing of codecs.

And over the next five years mobile will play an increasingly important role in our lives, and in the future of the web. The decisions of users, carriers, governments and the people who build phones will have far-reaching effects on this new extension to the Internet and how people will access information for decades to come.

Mozilla has a unique place on the Internet. Driven to help improve it as part of our mission expect us to express opinions on decisions that affect its future. We act both through direct action but also through indirect action – sometimes our effects are as important as our actions. We will continue to protect users and we’ll continue to do everything they can to make it possible for the next set of people to come along and build the next great web site.

It’s been a great five years. Let’s make it another five and keep the web moving forward for the benefit of everyone.

Firefox 3.6 includes many CSS improvements. In this post we’re going to show you how to use CSS gradients.

If you are running the latest beta of Firefox 3.6, you should check out our interactive demo and take a look at the corresponding code. Use the radio buttons to switch different style options on or off.

Backgrounds with CSS Gradients

Using CSS gradients in a background allows you to display smooth transitions between two or more specified colors without having to use images. This in turn reduces download time and bandwidth use, looks better while zooming, and lets you create a more flexible layout.

Firefox 3.6 supports two kinds of CSS gradients: linear (-moz-linear-gradient) and radial (-moz-radial-gradient).

Linear Gradients

To create a linear gradient, you’ll need to set a starting point and a direction (or angle) for the gradient and to define the color stops.

 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

Starting Point. The starting point works just like background position. You can set the horizontal and the vertical positions as a percentage, in pixels, or using left/center/right for horizontal, and top/center/bottom for vertical. Positions start from the top left corner. If you don’t specify the horizontal or the vertical position, it will default to center.

For example, here’s a linear gradient that starts at the center (horizontal) and top (vertical), and goes from blue to white:

  .linear_gradient_square {
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    background: -moz-linear-gradient(top, blue, white);
  }

One that starts left (horizontal) and center (vertical):

    background: -moz-linear-gradient(left, blue, white);

And a gradient starting left (horizontal) and top (vertical):

    background: -moz-linear-gradient(left top, blue, white);

Angle. As you can see above, if you don’t specify an angle, it is defined automatically based on the start position. If you would like more control over the direction of the gradient, you can set the angle as well.

For example, the following gradients have the same starting point of left center, but the one on the right hand-side also has an angle of 20 degrees.

    background: -moz-linear-gradient(left 20deg, black, white);

When specifying the angle, remember that is it the angle between a horizontal line and the gradient line, going counter-clockwise. So using 0deg will generate a left to right horizontal gradient, while 90deg will create a vertical gradient from the bottom to the top.

    background: -moz-linear-gradient(<angle>, red, white);

Color Stops. In addition to start position and angle, you should specify color stops. Color stops are points along the gradient line that will have the specified color at the specified location (set as a percentage or length). The number of color stops is unlimited. If you use a percentage for the location, 0% represents the starting point, and 100% is the ending point, but values above and below those can be used to achieve the desired effect.

Here’s a simple example with three color stops. Because no point is specified for the first and last colors, they will default to 0% and 100%.

    background: -moz-linear-gradient(top, blue, white 80%, orange);

Colors will be evenly spaced if no position is specified.

    background: -moz-linear-gradient(left, red, orange, yellow, green, blue);

Transparency. Gradients also support transparency. This can be useful, for example, when stacking multiple backgrounds. Here’s a combination of two backgrounds: one image and one linear gradient from white to transparent white.

.multibackground_transparent {
    background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
}

Radial Gradients

The syntax for radial gradients is very similar to that of linear gradients:

 -moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

In addition to the start position, the direction, and the colors, which you have already seen in linear gradients, radial gradients allow you to specify the gradient’s shape (circle or ellipse) and size (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover).

Color stops. Just like with linear gradients, you should define color stops along the gradient line. The following circles have the same color stops, but the gradient on the left defaults to evenly spaced colors, while the one on the right has a specific position for each color.

 background: -moz-radial-gradient(red, yellow, #1E90FF);
 background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

Shape. Here you can see the difference between the two possible shapes, a circle (on the left) and an ellipse (on the right), both with a bottom left starting point:

 .radial_gradient_circle {
    background: -moz-radial-gradient(bottom left, circle, red, yellow, #1E90FF);
}
 .radial_gradient_ellipse {
    background: -moz-radial-gradient(bottom left, ellipse, red, yellow, #1E90FF);
}

Size. The different options for size (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover) refer to the point used to define the size of the circle or ellipse.

Example: closest-side vs. farthest corner for an ellipse.
The following two ellipses have different sizes. The one on the left is set by the distance from the start point (center) to the closest-side, while the one on the right is determined by the distance from the start point to the farthest corner.

  background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
  background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

Example: closest-side vs. farthest-side for a circle.
The size of the circle on the left is determined by the distance between the start point (the center) and the closest side, while the one on the right is the distance between the start point and the farthest side.

 background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
 background: -moz-radial-gradient(circle farthest-side, red, yellow 10%, #1E90FF 50%, white);

Example: contained circle.
Here you can see the default circle on the left, and the version of the same gradient but contained on the right.

 background: -moz-radial-gradient(red, yellow, #1E90FF);
 background: -moz-radial-gradient(contain, red, yellow, #1E90FF);

Repeating Gradients

If you would like to repeat a gradient, you should use -moz-repeating-linear-gradient and -moz-repeating-radial-gradient.

In the examples below, four color stops are specified in each case, and are repeated indefinitely.

 .repeating_radial_gradient_example {
    background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}
 .repeating_linear_gradient_example {
     background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
}

Demo

Check out our interactive demo of linear and radial gradients for more examples.

Note that the gradient syntax has changed between Firefox 3.6 beta 1 and beta 2, so if you used gradients with beta 1, you may need to update your code.

Two weeks ago we announced the launch of the Mozilla Developer Network. We also asked for your help through this short survey for Web developers. The questions were meant to understand who you are, what you’re interested in, and what resources would be most useful to you on MDN. We’re happy to report that we have received over 3,600 responses so far, so thank you!

Here’s a Sneak Peek at the Data:

HTML/CSS/Javascript are the winning combination, PHP is a close 4th. After that, technology choices are quite fragmented.

The most popular tools for development are a collection of Firefox add-ons, including Firebug and Web developer, and… text editors! Each developer has a favorite, from vi or emacs to TextMate or Notepad++.

Either Web developers live mostly in the US and in France, or this is where the most active Mozilla developer outreach is happening. We think it’s the latter, for France we call it the “Paul and Tristan effect”!

What Are We Missing?

Please help us get more responses from around the world so we can understand the needs of Web developers everywhere.

We would also love to get more participants who are working in corporate environments, especially on intranets. And we’d like to hear more from those of you who are working (willingly or not) with proprietary technologies.

How Can You Help?

We’d like to get 5,000 responses before we close the survey, so help us spread the word to other Web developers: tweet about it and send the survey link to your friends!

Once we have enough responses, we’ll publish the results on this blog. You can also follow the latest Mozilla Developer Network updates on Twitter at @mozhacks.

This is a re-post from Rob Cambell’s personal weblog. Firebug 1.5 is the first release that will work with the upcoming Firefox 3.6 and also also works with Firefox 3.5. It’s currently in beta and will be available before the release of Firefox 3.6.

As of this minute, Firebug 1.5 is sitting comfortably in its third beta and available for download. This version is shaping up to be our best release yet and initial reports have been very positive regarding its stability, UI improvements and new features. So let’s take a look at some of the new features.

Improved Net Panel accuracy

One of the problems with Firebug’s Net panel in the past has been inaccurate timings. Because Firebug is entirely written in JavaScript some network and UI activity could block Firebug during long operations and cause the timings displayed there to be less than accurate. This has finally been corrected with the landing of a new service called the http-activity-distributor. For more details on the implementation and use of the newly-improved Net panel, see Honza’s blog post on the topic.

New Break Functionality

In Firebug 1.4, we introduced the concept of “break-on-next” to the Script panel. This was a “pause” button sitting between the inspect icon and the Console tab. In 1.5, we’ve extended this concept to the Console, HTML and Net panels to allow more exciting types of breaks.

In the Console, we’ve replaced the mini-menu Break-on-Errors option with the pause button. The reasons for this possibly contentious change was it made for a more consistent use of menus and the break button. Now, to enable Break on Errors, select the Console panel and hit the pause button. You’ll see that familiar glow to indicate that it’s waiting for an error. Now whenever an error occurs on the page, you’ll be dropped into the script panel at the line where the error occurred.

The HTML panel’s break button is a little different. This is the Break-on-Mutation feature. When this is enabled, whenever a bit of JavaScript modifies an HTML element, you’ll be taken to the Script panel and the modifying code while be highlighted. Related to this, you should be able to see modified HTML occurring in real-time in the HTML panel with affected elements and attributes being highlighted as they change in the page.

Finally in the Net panel, the break button acts as a Break-on-XHR button. This is intended to help debug AJAX apps by allowing you to halt the debugger during an XmlHttpRequest send. As in the other break types, you’ll be transported to the script panel when an XHR object fires off its request and you’ll be given the option to copy the message.

John Barton and Honza have written a great interactive demo page describing these new features on getfirebug.com.

Mixed Development

• We made a few tweaks to the UI in this version. We replaced the “Off” label with a single “power” button (or window close button on Mac) as promised during the last release.
• Kevin Decker added the search panel originally intended for version 1.4 with some nice options.
• Persist option on Console and Net Panel. Save your data!
• Improvements to the Inspector.
• Still more to come. Between now and final release we plan on hunting down a few more bugs to make this even more stable. Feel free to download and give it a try.

A few weeks ago, we launched a new survey for Web developers. We wanted to learn more about what you are interested in to build the Mozilla Developer Network tailored to your needs.

Thanks to your help in spreading the word about the survey, we surpassed our goal of 5,000 responses!  The survey is now closed and we’re processing the data. We’ll post results here on the hacks blog and tweet about them on @mozhacks in the next few weeks.

Given the positive feedback about this initiative, we’re planning to repeat the survey on a regular basis to show trends in the Web developer world over time. For example: what tools and technologies are most popular at a give time around the world? The next iteration should be coming in a few months, and we’ll ask for your help again to make sure the participation is as broad as possible.

Thanks for joining this effort, and stay tuned for the results!

Robert O’Callahan has been posting updates in his weblog about changes that we’re going to be making that are web-facing. It’s worth summarizing two here for web developers.

Removing the media element ‘load’ event.

Yesterday I checked in a patch that removes support for the ‘load’ event on <video> and <audio> elements. We simply never fire it. Also, the networkState attribute is now never NETWORK_LOADED. When we’ve read to the end of the media resource, networkState changes to NETWORK_IDLE. We plan to ship this change for Firefox 3.6.

This API has been removed based on consensus from everyone who are doing HTML5 video implementations and there are lots of other options for events that Robert goes over in his post.

Changing our CSS Gradient Syntax

We landed support for a form of CSS gradients on trunk a while ago, but we got considerable feedback that our syntax — which was an incremental improvement of Webkit’s syntax, which basically exposes a standard gradient API in the most direct possible way — sucked. A bunch of people on www-style got talking and Tab Atkins produced a much better proposal. Since we haven’t shipped our syntax anywhere yet, dropping it and implementing Tab’s syntax instead was a no-brainer. So Zack Weinberg, David Baron and I did that (using a -moz prefix of course), and today it landed on trunk. It should land on the Firefox 3.6 branch shortly. It’s unfortunate to land something new like this after the last beta, but in this case, it seems like the right thing to do instead of shipping CSS gradient syntax that we know nobody wants.

We’ve never shipped the “bad” CSS gradient syntax in a final release, but it is in our first beta. We’ll be updating it before we make our final release of 3.6. Stay turned for the new syntax on hacks.

A short post on this topic.

Alexander Limi has a post describing a simple way that web sites could improve their performance: by putting images, css and other static resources in a .zip file for downloading. He’s asking for feedback on the topic. If the feedback is good we’re likely to try and get this implemented for Firefox 3.7.

If you’re a web developer and you have a comment, please put it in his weblog post. Thanks! (Comments are closed here.)