Working with files on the web has been a challenge for a long time, and when things like various File APIs have surfaced, it has made me really happy! Now on to the latest edition: ArchiveAPI, giving the ability to work with archive files.
Introducing Bleeding Edge
Before I start talking about the ArchiveAPI, I wanted to introduce the new Bleeding Edge category here on Mozilla Hacks. What this means is that we cover technologies/features/APIs that haven’t been released in an official version of Firefox, or any other web browser, yet. It covers things that, in most cases, have their first initial implementation in Firefox Nightly or Firefox Aurora.
The goal is to have these features shipped, but given feedback from you, dear developers, or any other findings during this phase might result in changes to them before they are released.
So, feel more than welcome to try them out! Either you have a headstart on knowing what’s coming, or you have the possibility of affecting the future of features for developers on the web. Win-win! :-)
What it is
As part of our WebAPI initiative at Mozilla to make the web an even more powerful platform, I was lucky to talk to Andrea Marchesini, the Lead Developer of the ArchiveAPI. Basically, it allows you to read the content of archive files, e.g. ZIP files, directly in web browsers.
Basically, we have an ArchiveReader object and when it successfully manages to read the contents of an archive file, we can iterate over them, read out file data, show previews of each file’s content etc.
var archiveFile = new ArchiveReader(archiveFileReference),
fileNames = archiveFile.getFilenames();
When you trigger an action/method on this file, like getFilenames, you will have two handlers: onsuccess and onerror. Like this:
fileNames.onerror = function () {
console.log("Error reading filenames");
};
fileNames.onsuccess = function (request) {
// Get list of files in the archive
var result = this.result;
// Iterate over those files
for (var i=0, l=result.length; i<l; i++) {
file = archiveFile.getFile(result[i]);
file.onerror = function () {
console.log("Error accessing file");
};
file.onsuccess = function () {
// Read out data for that file, such as name, type and size
var currentFile = this.result;
console.log(currentFile.name);
}
}
}
(If you’ve opted in to HTML5 video on YouTube you will get that, otherwise it will fallback to Flash)
Feedback
I hope you find this interesting, and one more step forward for the web as a platform! Please let us know what you think in a comment here.
Additionally, there’s a poll/questionnaire you can take with regards to the asynchronous nature of ArchiveAPI. It’s available in Feedback on potential ArchiveReader APIs.
In Firefox, we offer various content in our about:home page – the start page for many Firefox users – to make people aware of new features and possibilities. As you might have seen recently, we have some animations with the Android robot and Firefox, highlighting that Firefox is available on Android. For you developers out there, we’d like to talk more about how these animations were made.
Make sure to interact with the Android robot by moving the mouse over him!
Please note that these about:home snippets have been created specifically for in-product use in Firefox, and one vital factor there is to keep them as compact as possible. This means that there is, for instance, -moz specific CSS prefixes without fallbacks for other web browsers (since that has never been the target), because the goal was to make them optimal in a closed and controlled environment.
Making them work in other web browsers is easily tended to, though, by adding necessary CSS prefixes.
Introducing Mozilla Hacks on GitHub
Since we have a number of demos, code testing and using APIs examples, we wanted to have a more unified approach both to how we share these with you, but also making it as easy as possible to fork, play and build on top of the code we share.
Bruce MacFarlane is the lead programmer at Particle for this project with the Android/Firefox about:home snippets, and helped develop the creative abstracts into actual animation. In this interview, with Mozilla’s Barry Munsterteiger, he goes through aspects of the process of creating these animations:
Thanks for helping us with the animations again, it looks like you really had some fun with these. Can you walk us through the process on how these were made?
Of course! Probably the best place to start is with the creation of the Android character in CSS. This was done as a separate piece and at a scale large enough so we could use it in a number of different animation scenarios, just adjusting it’s scale to whichever size worked best in a particular setup.
To use as a reference we were given an image of the green Android character. This image was added to the html file as an overlay at a low opacity as we were building so we could make sure we were matching our css design as close as possible.
Before we began, we had to consider the sort of movements the android would (or could) make during it’s animation, then adjust our layout accordingly. The easiest way to break this task down was to list out what could move on it’s own separate from the other parts of the android and then set up a container div for each that we knew we could apply the animation to:!
The entire Android in x/y/z space
Head (possibly)
Arms able to move and rotate individually – Legs able to move and rotate individually – Eyes able to blink
Do you have any new coding tricks that you employed on this round?
When running a long animation with many moving parts sometimes I find it helpful to set an animation duration a little longer than the entire length of the sequence on all the individual parts. The benefit of this is avoiding animation delays of varying lengths, and just working with percentages.
So say the entire animation duration is ten seconds, then moving the android across the screen at two seconds within the sequence for a length of one second would mean moving the #android element starting at 20% and completing at 30%, then have the Android wave from 30% to 35%, etc.
What were the biggest challenges with these animations? and how did you get around these challenges?
In looking over the animation specifications another issue we discovered early on was trying to figure out how to best handle how to have the Android rotate to it’s side. The problem being we can’t curve elements back into Z space, so if we just rotated the Android on it’s Y axis (the Androids profile) we would just be looking at a flat 2d rendering which would all together disappear when rotated 90 degrees towards us. The solution turned out to be a little complex.
Since the body was supposed to be cylindrical we didn’t have to worry about how that would animate since it’s profile would look the same wether from the front or the side. For the rest of the body (antennas, arms, and legs) we moved those elements into a separate container from the body that would be able to move on the Y axis. When this containing element was rotated, we had to do a counter rotation on all the items within tricking the eye into believing these elements had depth in each direction. To handle the eyes, during the rotation they are animated to the side within a container that has it’s overflow set to hidden.
Once the heavy lifting of setting up the Android was complete, the rest was relatively easy.
How do you see animation progressing as more and more developers pick up these techniques?
The real interesting thing is going to the blurring of the line between WebGL and CSS.
It is far more commonplace to build WebApps that have a native app feel through the use of transitions and views that typical web experiences didn’t have a couple years ago.
Firefox 17 has recently hit the Aurora channel, and with it comes a number of improvements to the built-in web developer tools.
HTML Editing
This is one of the most-requested features for our tools, and we’re happy with the solution we have for you. With the Style panel in the Page Inspector, you can easily manipulate the styles on the page. When you’re working on a layout, however, you sometimes need to manipulate the DOM of the page as well. The new “Markup panel” lets you do just that.
The new Markup Panel
To open the Markup panel, open the Page Inspector and click on the button that looks like an outline and appears right next to the “breadcrumbs” in the toolbar. In the screenshot above, that button is the third from the left. You can also press alt-M (ctrl-M on Mac) to open the Markup Panel.
As before, you can choose elements to inspect in the Style panel by clicking on them in the Markup panel. You can also right-click on the elements in the Markup panel to access a couple of handy features (copy HTML, delete the node).
What’s new in this version of the Markup panel? Previously, you could double click on an attribute value to change that value. Now you can double click almost anywhere to change anything. Double click on text to change the text. Likewise for the tag itself. See that space just before the closing “>” of a tag? Double click there and you can add new attributes.
You’ll also find that keyboard navigation for getting around and editing the DOM is easy to work with. You can use the tab key to move around within a tag and the arrow keys to move between nodes.
Note: the screenshot above shows the Markup panel with a dark theme. The plan is to replace this with a light theme before the feature is released.
More to love in the Web Console
The Web Console remains a favorite tool among web developers, and we’re happy to have even more improvements for you in this release.
Updated Web Console theme
The most visible change in the Web Console is the refreshed toolbar. The Web Console now has an appearance in line with the rest of the Firefox developer tools.
The screenshot above also shows off another improvement: better autocompletion. We’ve found and fixed some cases (like string objects) where the Web Console wasn’t giving as much help as it could.
Another important change to note: the Web Console comes with a helper function called $. Previously, that function was an alias for document.getElementById. In conjunction with other browser consoles, we’re changing it to be document.querySelector which is far more useful. To get the behavior you had before, just add a # at the beginning of the argument you pass in (for example, $("#myElementID")). You can continue to use $$ as an alias for document.querySelectorAll. If you’re using jQuery, the $ helper function will be replaced by jQuery, so this change won’t affect you.
Want to be able to see the Web Console’s text a bit more clearly? You can now zoom the Web Console using the same controls you use to zoom the browser window (ctrl-+, ctrl– and ctrl-0 to reset on Windows/Linux. Use cmd-+, cmd– and cmd-0 on Mac).
Using the built-in console.log function is a very handy way to add tracing to your web application. Now, if you send an object to console.log, you can now click on that object in the output area of the Web Console in order to inspect it.
Also in the screenshot above, you’ll see the “More Tools” button in the Developer Toolbar at the bottom of the window. That button gives you quick access to the rest of the developer tools. (Sharp-eyed readers might notice a mysterious “JSTerm” button on my Developer Toolbar. That’s Paul Rouget’s JSTerm add-on, which is really nice to use. Check it out!)
Page Inspector Visual Update
We’ve been listening to feedback from web designers since the Page Inspector made its debut on the Aurora channel last November. We found that the appearance of the dark “veil” over everything but the selected element was striking, but also making it harder for designers to see styling changes they made in the context of their overall design. We added options to turn off the page dimming a few months ago, but in this update we’ve got a lighter approach:
Updated highlighting in the Page Inspector
Instead of darkening the whole page, we highlight the selected element using a subtle dashed line and the useful node toolbar. Even better, when you move your cursor to the Style panel to try out style changes, the highlighting fades away entirely so that you can focus entirely on the styling.
Debugger Improvements
The Latest Debugger
The Debugger has had tons of improvements, some visible and some not, since it hit Aurora three months ago. One of the visible changes that you can see in the screenshot above: search across all scripts! Just go to the find box and start your search with “!” (exclamation point) and you’ll rapidly find matches across all of the scripts in the area just below the toolbar.
If you want more space to look at your code, there’s a new button in the toolbar (the second button on the left in the screenshot) that will close the two side panels to give your code all of the room it needs.
Finally, we’ve got more keyboard shortcuts to make using the Debugger quicker than ever:
alt-shift-P (Windows), ctrl-shift-P (Mac) to focus the search box
alt-shift-T (Windows), ctrl-shift-T (Mac) to do a string (token) search
All of these changes are available today on the Aurora channel and are scheduled for release later in the year. I think you’ll find that Aurora works quite well, so give it a try and let us know what you think via the Feedback button!
A new version of Firefox Aurora is released every six weeks. Every release includes important features for web developers like you, such as security improvements and support for new HTML5 and CSS3 features.
Aurora 17 brings significant improvements to standards support:
The :dir(...)pseudo-class of Selectors Level 4, which allows you to easily style content differently based on text direction. This is more powerful than the attribute selector [dir=...], which only matched the value of the attribute and could not take inheritance or other factors into account. This will make it easier for you to write stylesheets friendly to both left-to-right and right-to-left languages.
The new @supports pseudo-class, which allows you to test support for specific CSS properties and values. This helps you fall back gracefully when a feature is not supported. The pseudo-class is unprefixed, but is only available behind a preference (layout.css.supports-rule.enable) because the specification is still young. Other vendors are in the procress of implementing this specification as well, so we expect it to move forward quickly towards the CR status. Wide support will greatly ease feature direction in the future.
The WheelEvent event of DOM Events Level 3. This is an important step towards DOM compatibility, and especially event compatibility. Until now, browsers implemented two non-interoperable wheel events, MouseWheelEvent and MouseScrollEvent. This move toward WheelEvent will lead to better interoperability once all other browsers support it. Support for the associated onwheel attribute has also been implemented.
CSS Animations are now calculated asynchronously, resulting in significant performance improvements.
Experimentally, Gecko now supports the inputmode attribute of the HTML <input> element. The supported values different from those defined by the WhatWG, but the draft is still young and discussions are ongoing.
Two big changes related to SVG: support for the FillPaint attribute and support for the StrokePaint attribute. More importantly, SVG display lists have been implemented.
JavaScript improvements through continued implementation of Harmony, the experimental EcmaScript 6 draft. Maps and Sets are now iterable, and the new string methods startsWith(), endsWith(), and contains() are now supported.
Aurora 17 also brings two major security-related changes:
Support for the sandbox attribute of the <iframe> element. This lets you manage the security risk of embedding content in a page. For example, you could grant full privileges to an <iframe> that contains content you control, but fewer rights to an <iframe> that uses content from a third party, like an advertising service.
New handling of certain dialogs. In particular, prompt, alert, and confirm dialogs can no longer be launched from onunload, onbeforeunload, or onpagehide. Though there are some legitimate uses of this type of behavior, many Web sites were abusing it to prevent users from leaving a page.
On the media side, we continue to improve our implementation of the Opus codec. For example, we now support multiple channels audio. These improvements are especially important due to upcoming real-time communication features.
As with all recent Firefox releases, Aurora includes improvements to our developer tools:
A new Markup panel in the Page Inspector, allowing you to easily edit the DOM.
Improvements that make the Web Console, Debugger and Developer Toolbar faster and easier to use.
This is an especially strong release in terms of user interface improvements.
Numerous improvements have been made to Mac OS integration:
When available, Firefox now uses the Notification Center (in Mac OS Mountain Lion) instead of Growl to send notifications.
The background color of the tab bar now changes when inactive, just like other native Mac OS applications.
Light windows now have a new light color, matching the Mac OS theme.
Users will also see improvements when copying images to other programs. Until now, copying from the content area to a program like Photoshop caused transparency information to be lost. This is no longer the case!
Still on the user experience side, the look of location bar results has been greatly improved. Additionally, when fixed content is present in the header, scrolling with Page-DOWN and Page-UP now works correctly, allowing continuous reading and a far better scrolling experience.
Like always, responsiveness and memory management have continued to improve this cycle. Even though no major changes were made, numerous small improvements have been made to make Firefox a little bit snappier as a whole.
Again, this is a very strong Aurora release. As always, the final set of features released with Firefox 17 (scheduled for November 20th, 2012) may change slightly due to testing and user feedback, but nonetheless this is a very strong start.
Firefox 16, now on the Beta channel, has a fantastic feature that was mentioned briefly in the Aurora 16 blog post and first introduced in a separate post by Joe Walker, the feature’s creator. We’ve devoted a sizable portion of the new Developer Toolbar to the “command line”, which you may sometimes see us call GCLI (short for Graphical Command Line Interface). The command line gives you quick keyboard control over your tools and access to features that don’t have any other user interface.
I have made a video version of this blog post so you can see the command line in action:
To get to the Developer Toolbar and the command line, you can use the shift-F2 keyboard shortcut, or select Developer Toolbar from the Web Developer menu. If you want a quicker keyboard shortcut (this is a keyboard-heavy feature, after all!), you can use the Customize Shortcuts add-on to override a shortcut that you don’t use.
This command line is designed to be quick-to-type and discoverable. It will complete commands and parameters for you, to save you typing. There’s also a lot of help built in for the commands and their options. Here’s a look at the list of commands shipped with the initial command line release:
Control Your Tools
Personally, I hate having to reach for my trackpad. Removing my hands from the keyboard just slows me down. The problem is that it’s not easy to remember all of the keyboard shortcuts and traditional keyboard navigation is sometimes not as quick as reaching for the trackpad. Let’s look at how the new command line helps with this.
Let’s say that I forgot the keyboard shortcut for the Web Console. I could reach for my trackpad and hit the Web Console button that is conveniently located on the new Developer Toolbar. Or, I can just remember the keyboard shortcut for the command line and run the command console open. Voila! The console opens. What I actually type to run that command is “con<tab>o<tab><enter>”, which is quick to type indeed.
Want to see what else you can do with the Web Console? Type help console.I’m not even sure if there’s a keyboard shortcut for the Clear button in the Web Console. It’s easier to just run the console clear command than try to remember a seldom used shortcut.
Here are the current commands that control the developer tools:
console – open, clear and close the Web Console
dbg and break – many controls for the Debugger and breakpoints
edit – open the Style Editor on any of the CSS files loaded in the page
inspect – open the Page Inspector for a part of the page
resize – control the Responsive Design View
tilt – control the 3D page view
Let’s look at a more interesting example. The current design of mozilla.org is a responsive design. I want to see how the headings will show up on a smaller screen. If I’ve been working on the page, I would likely know some of the IDs and structure used in the page, so I could enter a command like:
inspect "#home-news h3"
The “inspect” command takes as a parameter a CSS selector that is used to select a node on the page. An easy way to jump into page inspection on any page is to type inspect body, because every page will have only one. After typing inspect "#home-news h3", I’ll see something like this:
In the style panel, I can see that the font size is set to 28px on this heading. How would it look on a phone-sized screen? Many phones report their size as 320×480. Let’s give that a try by typing the following command:
resize to 320 480
That turns on the Responsive Design View and sets the size at the same time. Here’s what the result looks like:
In the Style panel, we can now see that a media query with a max-width has taken effect and the font-size on the heading has dropped to 24px. We can also scroll down and see that the three columns that were side-by-side are now stacked. You could use the resize off command to turn off the Responsive Design View, or you could just hit <esc> a couple of times to get back to normal browsing mode.
Entirely New Developer Features
We’ve also added a handful of commands giving you some new and useful powers. Let’s take a look at a few of them.
Put your hands in the cookie jar
The “cookie” command highlights why this command line is a “graphical” command line and not your old ’70s-style command line. Running cookie list on mozilla.org, I see:
The output shows me all of the cookies that I have right now for this site. If I want to remove that cookie, all I have to do is type cookie remove WT_FPCor, if I think it’s easier, I can click on the “Remove” action listed next to the cookie and that command will be entered on the command line for me. I can also give myself new cookies using the “cookie set” command.
Screenshots for fun and profit
The “screenshot” command is really handy. At mozilla.org, I ran this command:
screenshot heading.png 0 false h1
This said to make a file called “heading.png”, wait 0 seconds before taking the shot, don’t include anything outside the visible browser window and finally grab just the element selected by the “h1″ CSS selector. The result, saved conveniently in my Downloads directory, looks like this:
The command line provides hints inline for each parameter. Pressing F1 gives me even more help about the current parameter.
Stop the blinking!
The “pagemod” command lets you quickly make some bulk changes to the page. If you’re looking at a page and there’s something flashing at you, you can nuke it using the “pagemod remove element” command. See how everything on the page looks without classes by typing:
pagemod remove attribute class *
Or, take a look at how a different headline looks:
pagemod replace "Out of Date News" "The New Hotness"
Here’s a fun one that’s interesting to try out on popular sites:
pagemod remove element iframe
See if you can spot the bits that go away.
More goodies: grab the HTML, reconfigure Firefox
The “export html” command opens a new tab with an HTML snapshot of the current state of the page.
The “addon” command lets you quickly enable and disable addons. This is useful for isolating an add-on that might be causing you trouble, or for keeping some add-ons that you don’t use often turned off.
The “pref” command lets you easily change one of the many configuration options that Firefox has. For example, if you’d like to do some Firefox add-on development, you may find this command handy:
pref set devtools.chrome.enabled true
After that, use the “restart” command to restart the browser, and you’ll find that tools like Scratchpad have gained some extra powers for hacking on your browser. While many add-ons these days are restartless, you’ll find that there are still some popular ones that require a restart when enabling or disabling them, and the restart command is handy for that as well.
Add Your Own
One of the best features of command lines in general is that they are a very scalable form of user interface. Adding more commands does not add visual clutter in the UI you look at all day. Expect to see more commands in future Firefox releases, plus new commands that appear in add-ons.
In a future command line article, we’ll show you how to create your own commands. It’s easier than you might expect!
Keeping the Internet an open platform is part of Mozilla’s mission. When the technology the Web needs doesn’t exist, we will invest the resources to create it, and release it royalty-free, just as we ask of others. Opus is one of these technologies.
Mozilla employs two of the key authors and developers, and has invested significant legal resources into avoiding known patent thickets. It uses processes and methods that have been long known in the field and which are considered patent-free. As a result, Opus is available on a royalty-free basis and can be deployed by anyone, including other open-source projects. Everyone knows this is an incredibly challenging legal environment to operate in, but we think we’ve succeeded.
Why Opus is important?
The Opus support in the <audio> tag we’re shipping today is great. We think it’s as good or better than all the other codecs people use there, particularly in the voice modes, which people have been asking for for a long time. But our goals extend far beyond building a great codec for the <audio> tag.
Mozilla is heavily involved in the new WebRTC standards to bring real-time communication to the Web. This is the real reason we made Opus, and why its low-delay features are so important. At the recent IETF meeting in Vancouver we achieved “strong consensus” to make Opus Mandatory To Implement (MTI) in WebRTC. Interoperability is even more important here than in the <audio> tag. If two browsers ship without any codecs in common, a website still has the option of encoding their content twice to be compatible with both. But that option isn’t available when the browsers are trying to talk to each other directly. So our success here is a big step in bringing interoperable real-time communication to the Web, using native Web technologies, without plug-ins.
Opus’s flexibility to scale to both very low bitrates and very high quality, and do all of it with very low delay, were instrumental in achieving this consensus. It would take at least six other codecs to satisfy all the use-cases Opus does. So try out Opus today for your podcasts, music broadcasts, games, and more. But look out for Opus in WebRTC coming soon.
A month ago we introduced the Debugger and other new developer tools introduced in Firefox 15. Our new Debugger lets you connect Firefox Desktop to Firefox on Android so that you can use your nice, roomy desktop monitor to troubleshoot JavaScript that is running on your mobile device. 95% of Android devices are running a Firefox-compatible version of the operating system (Android 2.2 and higher). Firefox won’t run on all of these devices, but there are certainly many millions of devices that you can pick up and begin remote debugging on.
First of all, make sure you’re running Firefox 15 at least. At the time of this article, Firefox 15 is in the beta channel.
Next, type about:config into the Firefox location bar so that you can change a setting in the browser. The browser will display a warning, but don’t worry… we’ll be careful.
In the search box at the top of about:config, type “remote-en“. The only setting that should match is “devtools.debugger.remote-enabled“. Set that to true by double clicking it.
Finally, restart your browser. After you do, you’ll spot “Remote Debugger” in the Web Developer menu (either in the main Firefox menu or in the Tools menu on Macs).
Set up your Firefox for Android
For this to work, you need to use Firefox 15 on your Android device as well, and you can get that by downloading Firefox Beta from the Google Play store.
Now, fire up Firefox Beta on your phone. As on Desktop, you’ll need to go to about:config to change settings. Search for “debugger” and
toggle devtools.debugger.force-local to false
toggle devtools.debugger.remote-enabled to true
To get the remote debugging server started, you’ll need to restart Firefox. Tap the home button to exit Firefox.
On a Galaxy Nexus running Jelly Bean you can force Firefox to restart by opening the task switcher and sliding the Firefox Beta task off to the right.
Before we’ll be able to connect to the device, we need to know its IP address. To find the address of your phone:
open the Settings app
tap Wifi
tap the network that you are currently connected to
The display you’re presented with will include your IP address.
Make the connection
You’re now all set for remote debugging!
On your mobile device, browse to a page that you want to debug. Fire up the Remote Debugger on your desktop Firefox. The Remote Debugger appears as a new window and it will prompt you for the address to connect to. Replace “localhost” with the IP address of your phone. By default, the remote debugging server on your mobile device will be running on port 6000, so leave the “:6000″ there in the connection address.
You should see a dialog on your phone warning you about a new incoming connection. You should only accept connections that you start as otherwise someone might be trying to hijack your browser. In this case, we’ve started the connection, so go ahead and allow it.
Once you’ve connected successfully, you’ll be able to inspect the scripts loaded in the page, set breakpoints and so forth.
Let us know what you think!
Give it a try and let us know what you think of this feature and what more you’d like to see. You can respond in the comments below or email us on the dev-apps-firefox mailing list.
If you are a Firefox user and you start the browser this morning or you type “about:home” in the URL bar we have a surprise for you. Instead of the Firefox logo you’ll see an animation celebrating the global spirit of community. This is just one of many planned enhancements to mozilla.org pages and mozilla communication channels.
To give you a peek under the hood and insight as to how this was made, we asked Bruce MacFarlane from Particle a few questions about the animation. Particle has been working with the top silicon valley companies exploring ways to use HTML5 and CSS since their beginning. They have a unique blend of talent that hovers between creative development and engineering which allows projects like this possible.
1) Hi there, when you get asked to do an animation like that, what is the creative process? Do you make sketches, animate in a tool like Flash or Maya or do you start right away with the code?
I find it helpful to sit with a step-by-step list of what is going to happen and really try to visualize the entire animation, getting a feel for how it will most likely function under the hood. If there’s anything I’m not quite sure how to handle I’ll break that out into a separate proof of concept sandbox file where I can just focus on that one thing and make sure I get it right. After that it’s easy to put all the parts together.
2) What is the main technology behind the animation? Canvas? CSS? And why did you choose it?
The animation was done entirely in CSS to take advantage of it’s ease of use and fluidity.
Although something similar could have been accomplished with Canvas, going that route would have required a lot more setup code and we wouldn’t have been able to take advantage of CSS3′s handy timing functions.
Also, being able to fire animation sequences with class names the same way you would work with basic styling is a huge plus.
In the case of this animation we were able to define just one keyframe that played with scaling and opacity, then applied that to all five flame layers, having the variations coming from just playing with the animation durations and delays.
3) I assume that the start page of Firefox is a special environment. What were the limitations you had to work around in terms of performance and connectivity?
Since the code that runs the animation is being loaded onto a pre-existing page, we do end up having to do a little bit of logic when it loads to adjust some of the initial content and move our new content into position before running the animation.
A Snippet is a single file of code that gets loaded onto a pre-existing page, therefor certain considerations have to be made. To remove additional requests for assets, any images have to be base64 encoded and entered directly in the code. This is much easier than it sounds. There are plenty of websites out there where you can upload an image and have it give you back it’s base64 encoding. I tend to use a couple of simple PHP commands that accomplish the same thing:
Also if an animation has to interact with content that’s already on the screen (and may be positioned relatively, which can cause problems with animations) a certain amount of work has to be done to structure the previous content to work with the new content (wrapping the moving parts in a container that can still move in relation to window size so you can absolutely position elements within that you need to, etc.).
4) When optimising you sometimes find yourself having to do the same tasks over and over again and build tools to do them. Did you use already existing tools or are you building some?
Developing on Macs we end up using the ‘Activity Monitor’ utility app quite a lot which can really help with monitoring memory and CPU usage. About:home snippets are a unique animal in that only Firefox users ever see them. For sites and web applications that are being viewed on a diversity of devices and browsers we have developed some internal tools that help simplify compatibility issues and greatly aid in the quick construction of projects that we’ll be releasing soon.
5) With your experience in this, do you think there is a market for animation tools that have output like the code you did? Do you know of any yet? There were a few around a year ago (Adobe Edge, Animatable…), but I haven’t seen any being pushed heavily.
There are definitely some animations where the keyframes can get so complex that these sorts of tools could help out a lot and save time. We don’t have a favorite yet, but we’re keeping our eyes open.
6) What about legacy support? Is it worth testing and tweaking on older browsers or does it make more sense to have a static image fallback?
It is always important to support a certain amount of legacy browsers, static image fallbacks can sometimes be your only reasonable choice.
7) If developers wanted to start with their own similar animations, what would you say is the biggest time-sink to avoid? What are good shortcuts?
It’s sometimes easy to get bogged down in animations that have a lot of moving parts, and go on for a long time. In those situations I find it helps to break things down into scenes that can be fired off with parent container class names.
Sometimes in those scenes I’ll apply the same animation duration to each element and work within the keyframe percentages to handle timing. This way it’s easy add adjustments to individual elements during the timeline later.
Thanks Bruce.
What do you think? Expect to see more experiments like this showing off new technologies. Anything you’d like to see, or information you’d want us to publish? Just comment below.
Web developers, it is time to celebrate! In the upcoming Firefox 16, which reached the Aurora status today, a major enhancement is the unprefixing of several stable CSS features. Other notable features of interest to Web developers include several more HTML5-related APIs, better accessibility on Mac OS, and improvements to Firefox Developer Tools.
While the syntax of CSS animations, transitions and transforms has not changed lately, that is not the case of the CSS gradients syntax, which is significantly different than in most prefixed implementations.
As the color-stop syntax hasn’t evolved lately, the direction parameter is where most of the latest changes happened.
The direction parameter can be defined either using a CSS <angle>, or using the to keyword followed by one or two keywords describing the side or the corner.
That’s the major change! This to keyword wasn’t there before and it reverses the direction that was use previously: -prefix-linear-gradient( top left ) becomes linear-gradient( to bottom right ).
Also the <angle> changed: before, 0deg pointed to the right; now it points, consistently with other angles in the CSS spec, to the top. Like this:
So here again, you need to change -prefix-linear-gradient(0deg) to linear-gradient(90deg). Failure to adapt the angle will lead to the gradient to be oriented differently, like this:
→
Similar changes have been made to the radial gradient syntax, with a newly introduced at keyword.
More HTML5 & friends goodies
Unprefixing mature CSS features is not the only improvement in the area of supporting standards:
IndexedDB has reached Candidate Recommendation status and has been unprefixed too. This is amazing.
Improvement of Number, supporting now toInteger(), isInteger() and isFinite()
Improvement of Keyboard (still prefixed as mozKeyboard), now supporting setSelectedOption(), setValue() and onfocuschange().
Accessiblity
A giant step has been done in making Firefox more accessible. Support for VoiceOver on Mac OS has landed. It was the last platform where our accessibility features where severely behind. This is very exciting for all people needing such features on the Mac. More information.
Developers Tools
Last but not least, we continued to improved our developer tools!
Now you can toggle a developer toolbar: go to Tools > Web Developer > Developer Toolbar, or press Shift-F2. The toolbar itself looks like this:
The toolbar has a command line interface and also nice buttons to the right to quickly reach useful tools. The command line interface is easy to expand and more commands are expected in the future. Typing help in it displays the supported commands.
The Web Console also has been improved and displays now a nifty error count.
Finally our Scratchpad gained a list of recently opened files. Always convenient.
Other notable changes
We slightly changed our UA string not to display the 3rd digit of our versioning system.
Incremental GC, a major part in our effort to revamp our Garbage Collector, is now enabled by default.
Opus, a low-latency codec aimed at real-time communication, is enabled by default.
Firefox 16 is on the way to being a very strong release for Web developers, both on the support of standards, and with the nice improvements in our tools, maturing quickly. In the future, Web sites will be easier to do and more powerful!
Opus is a completely free audio format that was recently approved for publication as a standards-track RFC by the IETF. Opus files can play in Firefox Beta today.
Opus offers these benefits:
Better compression than MP3, Ogg, or AAC formats
Good for both music and speech
Dynamically adjustable bitrate, audio bandwidth, and coding delay
Support for both interactive and pre-recorded applications
Why Should I care?
First, Opus is free software, free for everyone, for any purpose. It’s also an IETF standard. Both the encoder and decoder are free, including the fixed-point implementation (for mobile devices). These aren’t toy demos. They’re the best we could make, ready for serious use.
We think Opus is an incredible new format for web audio. We’re working hard to convince other browsers to adopt it, to break the logjam over a common <audio> format.
We designed it for high-quality, interactive audio (VoIP, teleconference) and will use it in the upcoming WebRTC standard. Opus is also best-in-class for live streaming and static file playback. In fact, it is the first audio codec to be well-suited for both interactive and non-interactive applications.
Opus is as good or better than basically all existing lossy audio codecs, when competing against them in their sweet spots, including:
General audio codecs (high latency, high quality)
MP3
AAC (all flavors)
Vorbis
Speech codecs (low latency, low quality)
G.729
AMR-NB
AMR-WB (G.722.2)
Speex
iSAC
iLBC
G.722.1 (all variants)
G.719
And none of those codecs have the versatility to support all the use cases that Opus does.
That’s a lot of bandwidth saved. It’s also much more flexible.
Opus can stream:
narrowband speech at bitrates as low as 6 kbps
fullband music at rates of 256 kbps per channel
At the higher of those rates, it is perceptually lossless. It also scales between these two extremes dynamically, depending on the network bandwidth available.
Opus compresses speech especially well. Those same test results (slide 19) show that for fullband mono speech, Opus is almost transparent at 32 kbps. For audio books and podcasts, it’s a real win.
Opus is also great for short files (like game sound effects) and startup latency, because unlike Vorbis, it doesn’t require several kilobytes of codebooks at the start of each file. This makes streaming easier, too, since the server doesn’t have to keep extra data around to send to clients who join mid-stream. Instead, it can send them a tiny, generic header constructed on the fly.
How do I use it in a web page?
Opus works with the <audio> element just like any other audio format.
For example:
<audio src="ehren-paper_lights-64.opus" controls>
This code in a web page displays an embedded player like this:
While Firefox 15 is the first browser with native Opus support, playback is coming to gstreamer, libavcodec, foobar2000, and other media players.
Streaming
Live streaming applications benefit greatly from Opus’s flexibility. You don’t have to decide up front whether you want low bandwidth or high quality, to optimize for voice or music, etc. Streaming servers can adapt the encoding as conditions change—without breaking the stream to the player.
Aurora 17 brings significant improvements to standards support:
Users will also see improvements when copying images to other programs. Until now, copying from the content area to a program like Photoshop caused transparency information to be lost. This is 
→ 
