1. Webinar: Deconstructing HTML5 video (The Spirit of Indiana Jones, Redux)

    • by Janet Swisher and Chris Heilmann • HTML5, Video, Webinars • 1 comment

    Update 2011-07-20: The video recording of this webinar is now available:


    On Thursday, July 14th, at 16:00 UTC, Chris Heilmann will give second in the (so far sporadic) Mozilla Developer Engagement webinar series, discussing syncing HTML5 video with Google maps, using his “Spirit of Indiana Jones” demo as an example. Chris has already blogged about this demo, so this webinar is a chance for you to take part in a conversation, rather than just receive a broadcast.

    Take a look at the demo code and the blog post, and then bring your questions to the webinar session. If you have a Google account, you can post questions (or respond to others’) ahead of time in this Google Moderator series; if not, ask your questions in IRC during the session.

    The webinar will be broadcast on Air Mozilla, with text chat on #airmozilla on irc.mozilla.org. (There’s an IRC widget on the Air Mozilla page if you need it.)

    Add this webinar to your calendar:

    Oh, by the way, HTML5 video is the theme of the Mozilla Dev Derby for July. Whether you’re new to working with HTML5 video or an “old pro” (if there is such a thing), submit a demo during July to show off your stuff and win cool prizes.

  2. With the power of HTML5 – speaking at Converge SE in Columbia, SC

    • by Chris Heilmann • Conferences, CSS, HTML5 • 4 comments

    Last week the Converge SE conference in Columbia, South Carolina attracted about 400 designers, developers and product managers to attend workshops and hear keynotes about all that is new and great in web development.

    As you can see on the conference schedule the conference covered a lot of topics, ranging from building communities and providing great end user service over creating engaging video demos up to using CSS pseudo selectors, web fonts and responsive design.

    It was especially refreshing to see that instead of showing theoretical examples or demos most of the speakers showed the new technologies as they used them in real products. Ethan Marcotte for example previewed the upcoming Boston Globe redesign to the audience.

    Mozilla’s involvement (apart from sponsoring the event) was a keynote on the why of HTML5. In 96 slides and just above 30 minutes I explained:

    • How HTML5 came to be
    • Why it is not about selling browsers or hardware or comparing yourself with the competition
    • That HTML5 is part of a larger world of new technologies
    • That HTML5 means first and foremost improving the infrastructure for web applications and using the hardware and software people use to their full potentials
    • That using HTML5 means a shift in our thinking as web developers and needs re-evaluation of some of our “best practices”
    • That everybody should start using it and help us make it really work instead of being amazed by cool demos but failing to use these new technologies in day to day products

    The slides are available on Slideshare:

    There is an audio recording of the talk on archive.org:

    Converge SE was filmed, so I am quite sure the videos will be out soon and you will find more of the presentations using the convergese tag.

  3. Rofox, a CSS3 Animations demo

    • by Paul Rouget • CSS, Featured Demo, Firefox 5 • 5 comments

    Firefox 5 was released last week. This release comes with CSS3 Animations. Here is a demo made by Anthony Calzadilla.

    To illustrate what you can achieve with CSS3 Animations, we have been working on demo with Anthony Calzadilla (@acalzadilla), famous for his awesome Animation projects.

    Check out the demo on the Mozilla Demo Studio.

    And it works on Firefox Mobile too:

    The whole animation is orchestrated in CSS (keyframe) and the moves are animated transformations (transforms). The images are nested divs. If you translated a div and rotate its child, the transformations are combined. You can see the elements being transformed (bounding boxes) if you activate the debug mode.

    #arm-rt {
  /* ARM  SLIDING OUT FROM BODY */
  transform-origin: 0 50%;
  /* The syntax is:
   animation: name duration timing-function delay count direction
  */
  animation: arm-rt-action-01 60s ease-out 10s 1 both; 
}
@keyframes arm-rt-action-01 {
  /* This part of the animation starts after 10s and lasts for 60s */
  0% { transform : translate(-100px,0) rotate(0deg); }
  5% { transform : translate(0,0) rotate(0deg); }
  6% { transform : translate(0,0) rotate(-16deg); }
  21% { transform : translate(0,0) rotate(-16deg); }
  22% { transform : translate(-100px,0) rotate(0deg); }
  100% { transform : translate(-100px,0) rotate(0deg); }
}

    Tip: If you want to avoid some performance issues, we encourage you to use bitmap images. SVG images can make the animation a bit shoppy.

    Want to see more CSS3 Animations? Check out Anthony’s website: www.anthonycalzadilla.com. And feel free to submit your CSS3 Animations demos to the Mozilla Demo Studio.

  4. Wiki Wednesday: June 22, 2011

    • by Eric Shepherd • Docs, Wiki Wednesday • No comments yet

    Here are today’s Wiki Wednesday articles! If you know about these topics, please try to find a few minutes to look over these articles that are marked as needing technical intervention and see if you can fix them up. You can do so either by logging into the wiki and editing the articles directly, or by emailing your notes, sample code, or feedback to mdnwiki@mozilla.org.

    Contributors to Wiki Wednesday will get recognition in next week’s Wiki Wednesday announcement. Thanks in advance for your help!

    JavaScript

    Thanks to Panagiotis Tsalaportas and evilpie for their contributions last week.

    SpiderMonkey

    Developing Mozilla

    Thanks to Panagiotis Tsalaportas for his contributions last week.

    Extensions

    Thanks to Panagiotis Tsalaportas for his contributions last week.

    XUL

    XPCOM

    Thanks to Neil Rashbrook for his contributions last week.

    Interfaces

    Thanks to Neil Rashbrook for his contributions last week.

    Plugins

    CSS

    Thanks to Panagiotis Tsalaportas for his contributions last week.

    SVG

    Thanks to Panagiotis Tsalaportas for his contributions last week.

    HTML

    Thanks to Trevor Hobson and Fulax for their contributions last week.

    DOM

  5. Add-on SDK and the beta of Add-on Builder now available!

    • by dhorner • Add-ons, Developer Tools, Featured Article, Firefox, Uncategorized • 14 comments

    Add-on Builder Beta and Add-on SDK are here!

    Firefox offers users complete control over the look and functionality of their Web browser with a gallery of hundreds of thousands of add-ons. With the launch of Add-on SDK and Add-on Builder Beta, web developers  need only knowledge of HTML, JavaScript and CSS to create great add-ons for Firefox that are restartless by default.

    The Add-on SDK enables local development of add-ons through a command line interface, while the Firefox Add-on Builder Beta provides a hosted online build environment.

    To find out more, head over to the Add-ons blog or the new Add-on SDK & Add-on Builder page.

  6. Firefox 5 is here

    • by louisremi • CSS, Featured Article, Firefox, Firefox 5, HTML5, Performance, Release • 118 comments

    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.

  7. JSMad – a JavaScript MP3 decoder

    • by Chris Heilmann • Audio, Firefox 4, Firefox 5 • 23 comments

    It always amazes me just how fast modern browsers and their JavaScript engines are. And how creative people get when trying to make things work inside a browser instead of relying on a plugin that our end users would have to install (and more importantly constantly keep up to date).

    JS MAd

    The latest thing that make me go “wow” is jsmad (source on GitHub) by Amos Wenger, Jens Nockert and Matthias Georgi. JSMad is an MP3 decoder in JavaScript!

    “So what”, you say? Well, having JSMad means that now Firefox can play MP3 files without any Flash. It also means that you can listen to MP3 in the browser without the 64bit issues on Linux. With JSMad we can dive deep into the MP3 format and not only play the song but also get information about it. It allows us to build a lot of native dj-mixers, samplers and sequencers in the nearer future.

    Right now JSMad works in Firefox 4+ and on Chrome 13.0+, if you enable the Web Audio API in ‘about:flags’.

    I remember when MP3 came out and my computer back then was too slow to encode it without locking up in WinAmp. Back then a scene player also helped me out. Now we do the same inside a browser rather than desktop applications.

  8. HTML5 and the web of tomorrow – live from Web2Day in Nantes, France

    • by Chris Heilmann • Conferences, Demo Studio, HTML5, MDN • 4 comments

    I am currently here in Nantes, France at the Web2Day conference giving a talk on the topic of HTML5 and how it affects the audience (consisting of business people, startups, managers and a few developers. The slides of the talk are available Slideshare:

    The talk was streamed live via UStream and the recording is available (as a – gasp – Flash embed – we know, so no need for comments like “isn’t it ironic that an HTML5 talk…” unless you want to tell UStream that):

    Here are a few of the links I talk about to try out for yourself:

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

    • by louisremi • Aurora, Demo, Event • 21 comments

    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?

  10. Wiki Wednesday: June 15, 2011

    • by Eric Shepherd • Docs, Wiki Wednesday • No comments yet

    Here are today’s Wiki Wednesday articles! If you know about these topics, please try to find a few minutes to look over these articles that are marked as needing technical intervention and see if you can fix them up. You can do so either by logging into the wiki and editing the articles directly, or by emailing your notes, sample code, or feedback to mdnwiki@mozilla.org.

    Contributors to Wiki Wednesday will get recognition in next week’s Wiki Wednesday announcement. Thanks in advance for your help!

    JavaScript

    Thanks to all our contributors last week: David Bruant, Grendel, Paul Irish, Les Orchard, and Andrew Weintraub!

    SpiderMonkey

    Developing Mozilla

    Extensions

    Thanks to Marc-Aurèle Darche (for the Fidesfit company) for contributing last week.

    XUL

    XPCOM

    Thanks to Dikrib for contributing last week.

    Interfaces

    Thanks to Trevor Hobson for his contributions last week.

    Plugins

    CSS

    Thanks to Markus Stange and Grendel for contributing last week.

    SVG

    Thanks to Jeremie Patonnier for contributing last week.

    HTML

    DOM