Mozilla

Articles by louisremi

Sort by:

View:

  1. Aurora 8 is here

    Download Aurora 8

    Today we release Aurora Update 8. We’ve got even more HTML5 support, support for cross-origin textures in WebGL, support for insertAdjacentHTML() and reduced resource requirements for media elements.

    Cross-origin WebGL textures

    We disabled support for cross-origin textures in Firefox 5 due to security concerns. You can now use cross-origin textures in Aurora Update 8, although servers that serve the images need to use CORS headers to be sent with them.

    insertAdjacentHTML()

    This is a method first implemented in Internet Explorer 4 and was added to the
    HTML5 standard. This function allows you to insert HTML strings inside a document, just like the innerHTML property, but is more flexible and is much faster.

    We expect that JavaScript libraries will quickly adopt this because it’s faster and vastly simplifies DOM manipulation code.

    Reduced memory usage

    Media elements (<audio> and <video>) now use fewer threads and less memory. This is part of our efforts to reduce overall memory consumption of Firefox and it is a welcome improvement as websites switch to using native media elements.

    Other changes

    HTML

    • The HTMLImageElement crossOrigin property has been added. (see bug 664299)
    • The HTMLSelectElement.add() method now supports either an item or index of an item that the new item should be inserted before. Previously it only supported an item. (see bug 666200)
    • The HTMLIsIndexElement constructor has been removed. No elements have implemented this interface since Firefox 4. (see bug 666665 and bug 611352)
    • The HTML5 “context menu” feature (contextmenu attribute), which lets you add custom element specific items to native context menu, is now supported. (the implementation is still experimental awaiting changes in the specification, see bug 617528)

    DOM

    • The insertAdjacentHTML method has been implemented. (see bug 613662)
    • BlobBuilder now has a getFile() method that returns the content of the blob as a file (see bug 669437)
    • Event handling in nested <label>s has been fixed (see bug 646157)
    • Two bugs fixed when text insertion cursor is at the beginning of an editable text: bug 414526 and bug 442186
    • document.getSelection() now returns the same Selection object as window.getSelection(), instead of stringifying it (see bug 636512)
    • the HTML5 selectionDirection property makes it possible to define the direction of the selection in an editable text (see bug 674558)
    • Range and Selection are now behaving according to their specification when splitText() and normalize() are used (see bug 191864)
    • Media elements now have a seekable() method that return a TimeRange object (see bug 462960)
    • crossOrigin property defaults to “Anonymous” when an invalid value is used (see bug 676413)

    CSS

    Layout

    • Hyphenation is now supported in many more languages (see bug 672320)

    Audio & Video

    • New threading model for Audio and Video (see bug 592833)
    • Video thread stack size has been reduced (see bug 664341)

    Network

    • Double quotes are no longer accepted as a delimiter for 2231/5987 encoding (see bug 651185)
    • Content-Disposition parser does not require presence of “=” anymore in parameters (see bug 670333)
    • Mixed-content is not allowed with WebSockets (see bug 662692)
    • Connection errors with WebSockets now trigger the onerror handler (see bug 676025)
    • WebSocket API has been updated to the latest draft of the specification (see bug 674890 , bug 674527 and bug 674716)
    • Script files are not any more downloaded when javascript has been disabled (see bug 668690)
    • DNS entries are now blacklisted when the first request failed (see bug 641937)

    WebGL

    • Cross-domain textures can now be allowed with CORS approval (see bug 662599)
    • Cross-process rendering with Direct2d/Direct3d 10 (see bug 648484)

    MathML

    • Support for the displaystyle attribute on the top-level <math> element has been added.
    • The interpretation of negative rownumbers for the align attribute on <mtable> has been corrected (see bug 601436).
  2. Firefox 6 is here

    Download Firefox 6

    What’s new in Firefox 6?

    The most notable addition to this new release are the <progress> element, touch events, Server-Sent Events as well as the return of WebSockets.

    The <progress> element


    screenshot of progress bars as seen on windows
    This element can be used to give a visual cue of something in progress in the page. System progress bars are being used, which means that users of MacOS and Linux will see something different than what is pictured here.

    Touch events

    The standard Touch events are now available on both Firefox “desktop” and mobile, enabling users to interact with web pages using their fingers on a touch screen.

    Try this minimalistic touch demo.

    Server Sent Events

    Server Sent Events are a mean for a server-side script to generate client-side events accompanied with data.


    Messages generated on the server-side with a text/event-stream mime-type and consist of a list of events data.

    data: data generated by the server
    
    data: this line will generate a second event

    Have a look at the Twitter-like timeline built with server-sent events.

    WebSockets are back!

    WebSockets can be used to create an interactive communication channel between a browser and a server. They are already used to build “HTML5” chats, multiplayer games, and much much more.
    Note that this API will be temporarily namespaced in prevision of upcoming changes to the specification.

    Other changes

    HTML

    • The HTML5 <progress> element, which lets you create a progress bar, is now supported.
    • The parsing of the HTML5 <track> element, which specifies text tracks for media elements, is now supported. This element should appear in the DOM now, though its behavior is still not implemented.
    • The <iframe> element is now clipped correctly by its container when the container’s corners have been rounded using the border-radius property.
    • <form> elements’ text <input> fields no longer support the XUL maxwidth property; this was never intentional, and is in violation of the HTML specification. You should instead use the size attribute to set the maximum width of input fields.
    • The <canvas> CanvasRenderingContext2d properties fillStyle and strokeStyle used to ignore garbage included after a valid color definition; now this is correctly treated as an error. For example, “red blue” as a color used to be treated as “red”, when it should have been ignored.
    • The width and height of <canvas> elements can now properly be set to 0px; previously, these were getting arbitrarily set to 300px when you tried to do that.
    • When a <textarea> element receives focus, the text insertion point is now placed, by default, at the beginning of the text rather than at the end. This makes Firefox’s behavior consistent with other browsers.

    CSS

    -moz-text-decoration-color
    This new property lets you set the color used by text decorations, such as underlines, overlines, and strikethroughs.
    -moz-text-decoration-line
    This new property lets you set the kind of text decorations added to an element.
    -moz-text-decoration-style
    This new property lets you set the style of text decorations, such as underlines, overlines, and strikethroughs. Styles include single-strokes, double strokes, wavy lines, dotted lines, and so forth.
    -moz-hyphens
    This new property lets you control how hyphenation of words during line wrapping is handled.
    -moz-orient
    A new (currently Mozilla-specific) property which lets you control the vertical or horizontal orientation of certain elements (particularly <progress>).
    ::-moz-progress-bar
    A Mozilla-specific pseudo-element that lets you style the area of an <progress> element representing the completed portion of a task.
    Other CSS changes
    • The @-moz-document property has a new regexp() function, which lets you match the document’s URL to a regular expression.
    • The azimuth CSS property is no longer supported, as we have removed what little code we had for the aural media group. It was never significantly implemented, so it made more sense to remove the crufty implementation for the time being rather than try to patch it up.
    • In the past, the :hover pseudoclass was not applied to class selectors when in quirks mode; for example, .someclass:hover did not work. This quirk has been removed.
    • The :indeterminate pseudo-class can be applied to <progress> elements. This is non-standard, but we hope it will be adopted by other browsers, because it will be useful.

    DOM

    Using media queries from code
    You can now test the result of a media query string programmatically using the window.matchMedia() method and the MediaQueryList interface.
    Touch events
    Firefox 6 adds support for W3C standard touch events; these make it easy to interpret one or more touches at a time on touch-sensitive surfaces such as touch screens and trackpads.
    Server-sent events
    Server-sent events make it possible for a web application to ask a server to send events just like any locally-created DOM event.
    • navigator.securityPolicy, which has returned an empty string for a long time, has been removed outright.
    • BlobBuilder is now implemented, although for now it’s prefixed (so you need to use MozBlobBuilder).
    • The document.height and document.width have been removed. bug 585877
    • The DocumentType object’s entities and notations properties, which were never implemented and always returned null, have been removed, since they’ve been removed from the specification anyway.
    • The DOMConfiguration interface and the document.domConfig property that used it have both been removed; they were never supported and have since been removed from the DOM specification.
    • The hashchange event now correctly includes the newURL and oldURL fields.
    • The FileReader interface’s abort() method now throws an exception when used if no file read is in progress.
    • The window.postMessage() method now uses the structured clone algorithm to let you pass JavaScript objects instead of just strings from one window to another.
    • The window.history API now uses the structured clone algorithm to serialize the objects you pass to the pushState() and replaceState() methods; this lets you use more complex objects (including those that contain cyclic graphs of references).
    • You can now detect when printing has been initiated and has completed by listening for the new beforeprint and afterprint events.
    • The document.strictErrorChecking property has been removed, since it was never implemented and was removed from the DOM specification.
    • The standard event.defaultPrevented property is now supported; you should use this instead of the non-standard getPreventdefault() method to detect whether or not event.preventDefault() was called on the event.
    • The window.top property is now properly read only.
    • DOM views, which we never documented, have been removed. This was a bit of implementation detail that was unnecessarily complicating things, so we got rid of it. If you notice this change, you’re probably doing something wrong.
    • The EventTarget function addEventListener()‘s useCapture parameter is now optional, as it is in WebKit (and as per the latest version of the specification).
    • The mozResponseArrayBuffer property of the XMLHttpRequest object has been replaced with the responseType and response properties.
    • The element.dataset property has been added to the HTMLElement interface allowing access to the data-* global attributes of an element.
    • The customEvent method has been implemented. (see bug 427537 )
    • For security reasons, data: and javascript: URIs no longer inherit the security context of the current page when the user enters them in the location bar; instead, a new, empty, security context is created. This means that script loaded by entering javascript: URIs in the location bar no longer has access to DOM methods and the like, for example. These URIs continue to work as before when used by script, however.

    JavaScript

    • In the past, it was possible to use the new operator on several built-in functions (eval, parseInt, Date.parse…) that should not have allowed it, according to the specification. This behavior is no longer supported. Using the new operator in this way was never officially supported and was not widely done, so it’s unlikely that this change affects you.
    • ECMAScript Harmony WeakMaps have been added as a prototype implementation.

    SVG

    • The pathLength attribute is now supported.
    • SVG patterns, gradients, and filters now work correctly when loaded from data: URLs.

    MathML

    • The implementation of <mstyle> has been corrected.

    Accessibility (ARIA)

    • A state change event is now correctly sent when the value of aria-busy changes.
    • An attribute change event is now correctly sent when aria-sort occurs.

    Net

    WebSockets
    WebSockets was updated to protocol version 07 for Firefox 6.
    • Parsing of the Content-Disposition header has been fixed to properly interpret backslash-escaped ASCII characters as just that character itself. Previously it was incorrectly replacing that character with an underscore (“_”).
    • The value of the path field on Set-Cookie headers is now interpreted correctly when quotes are used; previously, they were being treated as part of the path string instead of as delimiters. This change may affect compatibility with some web sites, so authors should check their code.
    • The Upgrade request header is now supported; you can request an upgrade of an HTTP channel to another protocol by calling nsIHttpChannelInternal.HTTPUpgrade() .

    Other changes

    • Support for microsummaries has been removed; these were never widely used, were not very discoverable, and continuing to support them was making improvements to the Places (bookmark and history) architecture difficult.
    • WebGL now supports the OES_texture_float extension.




    You can help us improve those changelogs by telling if you find the level of details appropriate.

  3. Animating with javascript: from setInterval to requestAnimationFrame

    Animating DOM elements[1] or the content of a canvas is a classical use case for setInterval. But the interval is not as reliable as it seems, and a more suitable API is now available…

    Animating with setInterval

    To animate an element moving 400 pixels on the right with javascript, the basic thing to do is to move it 10 pixels at a time on a regular interval.

    JSFiddle demo.

    An HTML5 game based on this logic would normally run at ~60fps[2], but if the animations were too complex or running on a low-spec. device (a mobile phone for instance) and processing a frame were taking more than 16ms, then the game would run at a lower framerate: when processing 1 frame takes 33ms, the game runs at 30fps and game elements move twice as slowly as they should. Animations would still look smooth enough, but the game experience would be altered.

    Animating at constant speed

    To animate at constant speed, we need to calculate the time delta since the last frame and move the element proportionally.

    Animating with requestAnimationFrame

    Since the interval parameter is irrelevant in complex animations, as there’s no guarantee that it will be honored, a new API has been designed: requestAnimationFrame. It’s simply a way to tell the browser “before drawing the next frame on the screen, execute this game logic/animation processing”. The browser is in charge of choosing the best moment to execute the code, which results in a more efficient use of resources[3].

    Here’s how an animation with requestAnimationFrame would be written.
    Note: Following code snippets don’t include feature detections and workarounds necessary to work in current browsers. Should you want to play with them, you should try the ready-to-use animLoop.js.

    Dealing with inactive tabs

    requestAnimationFrame was built with another benefit in mind: letting the browser choose the best frame interval allows to have a long interval in inactive tabs. Users could play a CPU intensive game, then open a new tab or minimize the window, and the game would pause[4], leaving resources available for other tasks.
    Note: the potential impact of such behavior on resource and battery usage is so positive that browser vendors decided to adopt it for setTimeout and setInterval as well[5].

    This behavior also means that the calculated time delta might be really high when switching back to a tab containing an animation. This will result in animation appearing to jump or creating “wormholes[6], as illustrated here.

    Wormholes can be fixed by clamping the time delta to a maximum value, or not rendering a frame when the time delta is too high.

    JSFiddle demo.

    Problems with animation queues

    Libraries such as jQuery queue animations on elements to execute them one after the other. This queue is generally only used for animations that are purposefully consecutive.
    But if animations are triggered by a timer, the queue might grow without bound in inactive tabs, as paused animations stack up in the queue. When switching back to affected tabs, a user will see a large number of animations playing consecutively when only one should happen on a regular interval:

    JSFiddle demo.

    This problem is visible in some auto-playing slideshows such as mb.gallery. To work around it, developers can empty animation queues before triggering new animations[7].
    JSFiddle demo.

    Conclusion

    The delays of setTimeout and setInterval and of course requestAnimationFrame are unpredictable and much longer in inactive tabs. These facts should be taken into account not only when writing animation logic, but in fps counters, time countdowns, and everywhere time measurement is crucial.

    [1] The DOM can now be animated with CSS3 Transitions and CSS3 Animations.
    [2] 1 frame every 16ms is 62.5 frames per second.
    [3] See the illustration of this fact on msdn.
    [4] The behavior of requestAnimationFrame in inactive tabs is still being worked on at the w3c, and might differ in other browsers.
    [5] See related Firefox bug and related chromium bug.
    [6] This term was first coined by Seth Ladd in his “Intro to HTML5 Game Development” talk.
    [7] See documentation of your js library, such as effects and stop() for jQuery.

  4. Aurora 7 is here

    Aurora Logo

    Download Aurora

    Keeping up the pace with our new development cycle, today we release Aurora 7. Enjoy its new features and performance improvements: CSS “text-overflow: ellipsis“, Navigation Timing API, reduced memory usage, a faster javascript parser, and the first steps of Azure, our new graphics API.

    text-overflow: ellipsis;

    It is now possible to get Firefox to display “” to give a visual clue that a text is longer than the element containing it.

    At last, with text-overflow implemented in Aurora 7 it’s now possible to create a cross-browser ellipsis!

    Navigation Timing

    Performance is a key parameter of the user experience on the Web. To help Web developers monitor efficiently the performance of their Web pages, Aurora 7 implements the Navigation Timing specification: using the window.performance.timing object, developers will be able to know the time when different navigation steps (such as navigationStart, connectStart/End, responseStart/End, domLoading/Complete) happened and deduce how long one step or a sequence of steps took to complete.

    Reduced Memory Usage

    Our continuous efforts to monitor and reduce memory consumption in Firefox will substantially pay off with Aurora 7:

    • The memory “zone” where javascript objects reside gets fragmented as objects are created and deleted. To reduce the negative impact of this fragmentation, long-lived objects created by the browser’s own UI have been separated from the objects created by Web pages. The browser can now free memory more efficiently when a tab is closed or after a garbage collection.
    • Speaking of garbage collection, as we successfully reduced the cost of this operation, we are able to execute it more often. Not only is memory freed more rapidly, but this also leads to shorter GC pauses(the period where javascript execution stops to let the garbage collector do his job, which is sometime noticeable during heavy animations).
    • All those improvements are reflected in the about:memory page, which is now able to tell how much memory a particular Web page or the browser’s own UI, is using.

    More frequent updates and detailed explanations of the memshrink effort are posted on Nicholas Nethercote’s blog.

    Faster Javascript Parsing

    A javascript parser is the part of the browser that reads the javascript before it gets executed by the javascript engine. With modern Web applications such as Gmail or Facebook sending close to 1Mb of javascript, being able to still read all of that code instantly matters in the quest of responsive user experience.
    Thanks to Nicholas’s work, our parser is now almost twice as fast as it used to. This adds up well with our constant work to improve the execution speed of our javascript engine.

    First Steps of Azure

    After the layout engine (Gecko) has computed the visual appearance (position, dimension, colors, …) of all elements in the window, the browser asks the Operating System to actually draw them on the screen. The browser needs an abstraction layer to be able to talk to the different graphics libraries of the different OSes, but this layer has to be as thin and as adaptable as possible to deliver the promises of hardware acceleration.
    Azure is the name of the new and better graphics API/abstraction layer that is going to gradually replace Cairo in hardware accelerated environments. In Aurora 7, it is already able to interact with Windows 7’s Direct2D API to render the content of a <canvas> element (in a 2D context). You can read a detailed explanation of the Azure project and its next steps on Joe Drew’s blog.

    Other Improvements

    HTML

    Canvas

    • Specifying invalid values when calling setTransform(), bezierCurveTo(), or arcTo() no longer throws an exception; these calls are now correctly silently ignored.
    • Calling strokeRect with a zero width and height now correctly does nothing. (see bug 663190 )
    • Calling drawImage with a zero width or height <canvas> now throws INVALID_STATE_ERR. (see bug 663194 )
    • toDataURL() method now accepts a second argument to control JPEG quality (see bug 564388 )

    CSS

    MathML

    • XLink href has been restored and the MathML3 href attribute is now supported. Developers are encouraged to move to the latter syntax.
    • Support for the voffset attribute on <mpadded> elements has been added and behavior of lspace attribute has been fixed.
    • The top-level <math> element accepts any attributes of the <mstyle> element.
    • The medium line thickness of fraction bars in <mfrac> elements has been corrected to match the default thickness.
    • Names for negative spaces are now supported.

    DOM

    • The File interface’s non-standard methods getAsBinary(), getAsDataURL(), and getAsText() have been removed as well as the non-standard properties fileName and fileSize.
    • The FileReader readAsArrayBuffer() method is now implemented. (see bug 632255 )
    • document.createEntityReference has been removed. It was never properly implemented and is not implemented in most other browsers. (see bug 611983 )
    • document.normalizeDocument has been removed. Use Node.normalize instead. (see bug 641190 )
    • DOMTokenList.item now returns undefined if the index is out of bounds, previously it returned null. (see bug 529328 )
    • Node.getFeature has been removed. (see bug 659053 )

    JavaScript

    Net

    • WebSockets are now available on Firefox Mobile. (see bug 537787 )

    console API

    • Implement console.dir(), console.time(), console.timeEnd(), console.group() and console.groupEnd() methods.
    • Message logged with console.log before the WebConsole is opened are now stored and displayed once the WebConsole is opened.

    (see the Web Console page in the Wiki)

    Web Timing

  5. Firefox 5 is here

    Today, three months after the release of Firefox 4, we release Firefox 5, thanks to our new development cycle. Developers will be able to create richer animations using CSS3 Animations. This release comes with various improvements, performance optimization and bug fixes.

    CSS3 Animations

    CSS Animations (check out the documentation) are a new way to create animations using CSS. Like CSS Transitions, they are efficient and run smoothly (see David Baron’s article), and the developers have a better controls over the intermediate steps (keyframes), and can now create much more complex animations.

    Notable changes

    Other Bug Fixes and Performance Improvements:

    HTML

    Canvas improvements

    • The <canvas> 2D drawing context now supports specifying an ImageData object as the input to the createImageData() method; this creates a new ImageData object initialized with the same dimensions as the specified object, but still with all pixels preset to transparent black.
    • Specifying non-finite values when adding color stops through a call to the CanvasGradient method addColorStop() now correctly throws INDEX_SIZE_ERR instead of SYNTAX_ERR.
    • The HTMLCanvasElement method toDataURL() now correctly lower-cases the specified MIME type before matching.
    • getImageData() now correctly accepts rectangles that extend beyond the bounds of the canvas; pixels outside the canvas are returned as transparent black.
    • drawImage() and createImageData() now handle negative arguments in accordance with the specification, by flipping the rectangle around the appropriate axis.
    • Specifying non-finite values when calling createImageData() now properly throws a NOT_SUPPORTED_ERR exception.
    • createImageData() and getImageData() now correctly return at least one pixel’s worth of image data if a rectangle smaller than one pixel is specified.
    • Specifying a negative radius when calling createRadialGradient() now correctly throws INDEX_SIZE_ERR.
    • Specifying a null or undefined image when calling createPattern() or drawImage() now correctly throws a TYPE_MISMATCH_ERR exception.
    • Specifying invalid values for globalAlpha no longer throws a SYNTAX_ERR exception; these are now correctly silently ignored.
    • Specifying invalid values when calling translate(), transform(), rect(), clearRect(), fillRect(), strokeRect(), lineTo(), moveTo(), quadraticCurveTo(), or arc() no longer throws an exception; these calls are now correctly silently ignored.
    • Setting the value of shadowOffsetX, shadowOffsetY, or shadowBlur to an invalid value is now silently ignored.
    • Setting the value of rotate or scale to an invalid value is now silently ignored.

    CSS

    • Support for CSS animations has been added, using the -moz- prefix for now.

    DOM

    • The selection object’s modify() method has been changed so that the “word” selection granularity no longer includes trailing spaces; this makes it more consistent across platforms and matches the behavior of WebKit’s implementation.
    • The window.setTimeout() method now clamps to send no more than one timeout per second in inactive tabs. In addition, it now clamps nested timeouts to the smallest value allowed by the HTML5 specification: 4 ms (instead of the 10 ms it used to clamp to).
    • Similarly, the window.setInterval() method now clamps to no more than one interval per second in inactive tabs.
    • XMLHttpRequest now supports the loadend event for progress listeners. This is sent after any transfer is finished (that is, after the abort, error, or load event). You can use this to handle any tasks that need to be performed regardless of success or failure of a transfer.
    • The Blob and, by extension, the File objects’ slice() method has been removed and replaced with a new, proposed syntax that makes it more consistent with Array.slice() and String.slice() methods in JavaScript. This method is named mozSlice() for now.
    • The value of window.navigator.language is now determined by looking at the value of the Accept-Language HTTP header.

    JavaScript

    • Regular expressions are no longer callable as if they were functions; this change has been made in concert with the WebKit team to ensure compatibility (see WebKit bug 28285).
    • The Function.prototype.isGenerator() method is now supported; this lets you determine if a function is a generator.

    SVG

    • The class SVG attribute can now be animated.
    • The following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed like arrays; in addition, they have a length property indicating the number of items in the lists: SVGLengthList , SVGNumberList , SVGPathSegList , and SVGPointList.

    HTTP

    • Firefox no longer sends the “Keep-Alive” HTTP header; we weren’t formatting it correctly, and it was redundant since we were also sending the Connection: or Proxy-Connection: header with the value “keep-alive” anyway.
    • The HTTP transaction model has been updated to be more intelligent about reusing connections in the persistent connection pool; instead of treating the pool as a FIFO queue, Necko now attempts to sort the pool with connections with the largest congestion window (CWND) first. This can reduce the round-trip time (RTT) of HTTP transactions by avoiding the need to grow connections’ windows in many cases.
    • Firefox now handles the Content-Disposition HTTP response header more effectively if both the filename and filename* parameters are provided; it looks through all provided names, using the filename* parameter if one is available, even if a filename parameter is included first. Previously, the first matching parameter would be used, thereby preventing a more appropriate name from being used. See bug 588781 .

    MathML

    Developer tools

    • The Web Console’s Console object now has a debug() method, which is an alias for its log() method; this improves compatibility with certain existing sites.

  6. A Wall Powered by EventSource and Server-Sent Events

    EventSource landed in Aurora 6. It is a new and simplified way to open long-lived connections to a server, and let the browser create events as the server streams messages to the client. It is also available in Chrome and Opera and there are fallback solutions for other browsers.

    Creating a wall/feed for a social app…

    …in a few lines of code (full project available on Github).

    The messages

    The server will send two kinds of messages:
     ● simple messages, starting on a new line prefixed with “data:”
     ● messages with specific event names, similar to simple messages but with “event: <anEventName>” on the previous line

    In this case, simple messages are treated as users’ statuses and specific events will be inserted in the timeline with specific colors, although they could appear in different places on the page. The message data will be sent as JSON, although it could be flat text strings.

    The server

    The server will be a dummy .php script that reads sample statuses from a text files and stream them, one at a time, to the client, using appropriate headers.

    The Client

    The client will create an event source and register event handlers for each specific event name, as well as an onmessage handler for simple messages.

    The missing pieces of the code are available on Github.

    Fallbacks

    Here is a short list of polyfills/fallbacks available for other browsers:
     ● Remy Sharp’s polyfill
     ● Yaffle’s polyfill
     ● Rick Waldron’s jquery plugin

    Have you got examples of EventSource based Web app to share?

  7. The <progress> element

    The <progress> element just landed in Firefox Aurora (to be Firefox 6).

    As its name indicate, this element can be used to give visual clues of anything in progress on a Web page:

    • a set of ressources being downloaded,
    • a file being uploaded,
    • a computing Web Worker,
    • a WebGL scene being initialized…

    Following is a simple demonstration of how the progress element can be used in conjunction with the FileReader API to create an ajax file uploader.

    Don’t forget to click on result to see the code in action.

  8. Doom on the Web

    Update: We had a doubt whether this port of the Open Source Doom respected its term of use. We decided to remove it from our Website before taking an informed and definitive decision.

    This is a guest post written by Alon Zakai. Alon is one of the Firefox Mobile developers, and in his spare time does experiments with JavaScript and new web technologies. One of those experiments is Emscripten, an LLVM-to-JavaScript compiler, and below Alon explains how it uses typed arrays to run the classic first-person shooter Doom on the web.

    As a longtime fan of first-person shooters, I’ve wanted to bring them to the web. Writing one from scratch is very hard, though, so instead I took the original Doom, which is open source, and compiled it from C to JavaScript using Emscripten. The result is a version of Doom that can be played on the web, using standard web technologies.

    Doom renders by writing out pixel data to memory, then copying that pixel data to the screen, after converting colors and so forth. For this demo, the compiled code has memory that is simulated using a large JavaScript array (so element N in that array represents the contents of memory address N in normal native code). That means that rendering, color conversion, and copying to the screen are all operations done on that large JavaScript array. Basically the code has large loops that copy or modify elements of that array. For that to be as fast as possible, the demo optionally uses JavaScript typed arrays, which look like normal JavaScript arrays but are guaranteed to be flat arrays of a particular data type.

    // Create an array which contains only 32-bit Integers
    var buffer = new Int32Array(1000);
    for ( var i = 0 ; i < 1000 ; i++ ) {
        buffer[i] = i;
    }

    When using a typed array, the main difference from a normal JavaScript array is that the elements of the array all have the type that you set. That means that working on that array can be much faster than a normal array, because it corresponds very closely to a normal low-level C or C++ array. In comparison, a normal JavaScript array can also be sparse, which means that it isn't a single contiguous section of memory. In that case, each access of the array has a cost, that of calculating the proper memory address. Finding the memory address is much faster with a typed array because it is simple and direct. As a consequence, in the Doom demo the frame rate is almost twice as fast with typed arrays than without them.

    Typed arrays are very important in WebGL and in the Audio Data API, as well as in Canvas elements (the pixel data received from getImageData() is, in fact, a typed array). However, typed arrays can also be used independently if you are working on large amounts of array-like data, which is exactly the case with the Doom demo. Just be careful that your code also works if the user's browser does not support typed arrays. This is fairly easy to do because typed arrays look and behave, for the most part, like normal ones — you access their elements using square brackets, and so forth. The main potential pitfalls are:

    • Typed arrays do not have the slice(). Instead they have the subarray(), which does not create a copy of the array — instead it's a view into the same data.
    • Don't forget that the type of the typed array is silently enforced. If you write 5.25 to an element of an integer-typed array and then read back that exact same element, you get 5 and not 5.25.
  9. Aurora 6 is here

    What’s new in Aurora 6?

    The most notable addition to this new Aurora are the <progress> element, window.matchMedia API, better APIs for binary data, Server-Sent Events as well as the return of WebSockets.

    Aurora 6 has been published last week and can be downloaded from firefox.com/channel.

    The <progress> element


    screenshot of progress bars as seen on windows
    This element can be used to give a visual cue of something in progress in the page. System progress bars are being used, which means that users of MacOS and Linux will see something different than what is pictured here.

    matchMedia

    window.matchMedia() is the javascript equivalent of CSS Media Queries.

    Binary data APIs improvements

    • XHR2 responseType and response attributes allow getting the response from an XHR in the form of efficient Blob or ArrayBuffer.
    • FileReader.readAsArrayBuffer() allow reading files and get the response as an ArrayBuffer.
    • BlobBuilder allow concatenating multiple blobs as well as text and ArrayBuffer into a single Blob.

    Expect to see even more improvements in this area in Aurora 7.

    Server Sent Events

    Server Sent Events are a mean for a server-side script to generate client-side events accompanied with data.


    Messages generated on the server-side with a text/event-stream mime-type and consist of a list of events data.

    data: data generated by the server
    
    data: this line will generate a second event

    WebSockets are back!

    WebSockets can be used to create an interactive communication channel between a browser and a server. They are already used to build “HTML5” chats, multiplayer games, and much much more.
    Note that this API will be temporarily namespaced in prevision of upcoming changes to the specification.

    Other Interesting Additions

    Learn about what’s new in Aurora 6’s user interface on blog.mozilla.com/futurereleases and let us know what you think.

  10. Advanced animations in Aurora with CSS3 Animations

    Firefox 4 came with CSS3 Transitions (ability to animate CSS properties from an initial value to a final one). In Firefox Aurora, we are experimenting with CSS3 Animations: a more powerful way to animate your content with CSS.

    Defining the animation

    The first thing is to define the intermediary CSS values of the properties to be animated, what is called keyframes in the specification. Users of Adobe Flash authoring tools should be familiar with this concept.

    Applying an animation

    While Transitions trigger implicitly when property values change, animations are explicitly executed when the animation properties are applied.

    More properties

    The specification defines other animation properties that opens a broad range of possibilities:

    • with animation-timing-function it is possible to take advantage of easings to make animations feel more natural (see demo below)
    • animation-direction: alternate; is the auto-reverse of CSS3 Animations. See how it is used to create the loader below.
    • without animation-fill-mode: forwards;, the properties will be set back to their initial values at the end of the animation
    • and guess what setting animation-play-state to paused would do…

    Demo!

    You should be using Firefox Aurora, Chrome or Safari 5 to see those demo.
    animated translations

    zero-image, gracefully degrading loader

    a complex animated scene
    View Madmanimation with a compatible browser, or watch a screencast of the animation.

    You’ve already used CSS3 animations? Let us know in the comment below or submit your demo in the Studio.