1. Aurora 6 is here

    • by louisremi • CSS, FileAPI, WebSocket, XMLHttpRequest • 20 comments

    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.

  2. Wiki Wednesday: May 25, 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 David Bruant, Jesse, and Rowan Hogan for their contributions last week!

    SpiderMonkey

    Thanks to Jesse for contributing last week.

    Developing Mozilla

    Thanks to Jonathan Watt, John Hawkinson, and Dolske for contributing last week.

    Extensions

    XUL

    XPCOM

    Interfaces

    Plugins

    Thanks to Benjamin Smedberg for contributing last week!

    CSS

    Thanks to myakura for contributing last week.

    SVG

    HTML

    Thanks to teoli, Chris Everson, myakura, and Jonathan Watt for their contributions last week.

    DOM

    Thanks to Sevenspade for contributing last week.

  4. Wiki Wednesday: May 11, 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 David Bruant for his contribution last week.

    SpiderMonkey

    Thanks to Jason Orendorff for contributing last week.

    Developing Mozilla

    Extensions

    XUL

    XPCOM

    Thanks to Neil Rashbrook for contributing last week.

    Interfaces

    Plugins

    Thanks to Ghostheaven for contributing last week.

    CSS

    Thanks to myakura for contributing last week.

    SVG

    HTML

    DOM

    Thanks to Neil Rashbrook for contributing last week.

  5. MDN doc sprint, in-person and online, June 6 to 8

    • by Janet Swisher • MDN, Sprints • No comments yet

    In just about one month, we’ll be holding our next documentation sprint for Mozilla Developer Network, building on the success of recent sprints in April and January, and October of 2010. This will be the first sprint since October to have a planned in-person gathering. Our main topical focus continues to be open web technologies, but contributions in any area of MDN are welcome.

    Add this event to your calendar:

    The in-person sprint will be immediately following and in the same location as the Open Help Conference, in Cincinnati, Ohio (June 3 to 5). The Open Help Conference brings together people working on community-based documentation and support (that is, both senses of “help”). There will be presentations, discussion, and collaboration throughout the weekend. (I’ll give a presentation on what we’re doing with MDN.) Following the conference, some open source projects, including MDN, are holding sprints.

    If you’re able to join us in Cincinnati, awesome! Please let me know in advance (jswisher at mozilla dot com), so I can make sure we have enough space for you. If you want to help, but can’t come to Cincinnati, that’s wonderful, too. As usual, we’ll use the #devmo channel on irc.mozilla.org to coordinate activities. You can find more details on the sprint planning page on the Mozilla wiki.

  6. Advanced animations in Aurora with CSS3 Animations

    • by louisremi • CSS • 9 comments

    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.

  7. Wiki Wednesday: May 4, 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 BYK and vbfox for their contributions last week.

    SpiderMonkey

    Developing Mozilla

    Extensions

    Thanks to Tsalaportas Panagiotis for contributing last week.

    XUL

    XPCOM

    Interfaces

    Plugins

    CSS

    SVG

    HTML

    Thanks to Tsalaportas Panagiotis for contributing last week.

    DOM

    Thanks to ilmarihei for contributing last week.

  8. MDN Learning: A place to ratchet your Web development skills

    • by Jay Patel • CSS, Featured Article, HTML5, JavaScript, Learning, MDN, Web Developers • 4 comments

    If you’re looking to improve your Web development skills, we have compiled some great resources from around the Web to help every level of developer dig into their favorite open Web technologies. Our new MDN Learning space serves as a starting point for anyone interested in learning more about Web development. While there is already awesome documentation on MDN, not everyone knows how to find it — or other great tutorials and examples scattered around the Web. There is just so much content out there, we felt it was time to create a central place developers can go to quickly find the best resources.

    MDN Learning

    Our initial set of pages focus on documentation, tutorials, and other content for learning HTML, CSS and JavaScript. We will continue to add new content, including MDN Learning pages for topics like video, audio, webGL, etc. We also plan to use this new space to share more information about our collaboration with other organizations and projects that are developing open models around education, like P2PU’s School of Webcraft.

    This launch of MDN Learning is just the beginning of what we hope will become a permanent place on MDN for everything related to educating people about Web development and the resources available to them on not just MDN, but around the Web. We look forward to feedback and suggestions on how we can improve on this first step towards expanding MDN to cater to those getting started with developing for the Web.