Mozilla

HTML5 Articles

Sort by:

View:

  1. Weekly HTML5 Apps Developer Resources, October 17th 2012

    Weekly Resources for HTML5 Apps Developers

    Articles

    Resources

    Bonus Link

    If you find a link that you think should be included,o please feel free to forward it to JStagner at Mozilla.com

  2. Using data-* attributes in JavaScript and CSS

    When HTML5 got defined one of the things that was planned for was extensibility in terms of data that should be in the HTML, but not visible. The data-* attributes allow us to store extra information on HTML elements without needing to use a non-semantic element or pollute the class name. In essence this is what we did with custom attributes before.

    These data attributes can be used in many ways, some are a bad idea but others are a good plan. The rule of thumb is that content that should be visible and accessible should not be stored in them. The reason is that assistive technology is not likely to be able to access them and search crawlers don’t index them either.

    The syntax is dead easy. Say you have an article and you want to store some extra information that doesn’t have any visual representation. Just use data attributes for that:

    <article
      id="electriccars"
      data-columns="3"
      data-indexnumber="12314"
      data-parent="cars">
    ...
    </article>

    Reading those out in JavaScript is also very simple. You could use getAttribute to read them but the HTML5 standard defines a simpler way: a DOMStringMap you can read out via a dataset property:

    var article = document.querySelector('#electriccars'),
                  data = article.dataset;
     
    // data.columns -> "3"
    // data.indexnumber -> "12314"
    // data.parent -> "cars"

    Each property is a string (even if you omit the quotes in the HTML) and can be read and written. In the above case setting article.dataset.columns = 5 would change that attribute.

    Now, as data-attributes are plain HTML attributes you can even access them from CSS. For example to show the parent data on the article you can use generated content in CSS:

    article::before {
      content: attr(data-parent);
    }

    You can also use the attribute selectors in CSS to change styles according to the data:

    article[data-columns='3']{
      width: 400px;
    }
    article[data-columns='4']{
      width: 600px;
    }

    You can see all this working together in this JSBin example.

    Data attributes can also be stored to contain information that is constantly changing, like scores in a game. Using the CSS selectors and JavaScript access here this allows you to build some nifty effects without having to write your own display routines. See the following screencast for an example using generated content and CSS transitions:

    The code example shown in the screencast is also on JSBin.

    Issues with data-attributes

    Sadly enough it seems there is nothing that is so simple and useful that doesn’t come with a price. In this case the main issues to consider are that Internet Explorer does not support the dataset but you’d need to read them out with getAttribute() instead. The other issue is that the performance of reading data-attributes compared to storing this data in a JS data warehouse is bad. Using dataset is even slower than reading the data out with getAttribute().

    That said, though, for content that is not to be shown they are a great solution and maybe we can get them into the next IE soon.

  3. Weekly HTML5 Apps Developer Resources, October 10th 2012

    Weekly Resources for HTML5 Apps Developers

    Articles

    Resources

    Bonus Link

    If you find a link that you think should be included, please feel free to forward it to JStagner at Mozilla.com

  4. Weekly HTML5 Apps Developer Resources, October 3rd 2012

    Weekly Resources for HTML5 Apps Developers

    This week – a DOUBLE edition !

    Articles

    Resources

    Bonus Links

    If you find a link that you think should be included, please feel free to forward it to JStagner at Mozilla.com

  5. HTML5 in Sao Paulo, Brazil – the bootleg recordings

    It is always nice to have the opportunity to get to travel and meet developers in various communities in the world: to understand their context, challenges and interests!

    In April I was in South America, and part of that included giving two talks at a MDN Hack Day (well, evening) in Sao Paulo in Brazil. They were filmed with a handcam from front row by Laura Loenert, but I do believe that the videos with sound, combined with the slides, can prove to be useful for sharing – see them as the bootleg version. :-)

    Besides, I prefer that we share what we have – even though it might be rough – than having a lot of material that never gets out there.

    So, I hope you will enjoy these:

    HTML5, The Open Web, and what it means for you

    Video


    (If you’ve opted in to HTML5 video on YouTube you will get that, otherwise it will fallback to Flash)

    Slides


    HTML5, The Open Web, and what it means for you – MDN Hack Day, Sao Paulo from Robert Nyman

    JavaScript APIs – The Web is the Platform

    This talk is similar to the The Web is the Platform presentation at the .toster conference, but a couple of other bits, including a look at Mozilla Collusion.

    Video

    Slides

    JavaScript APIs – The Web is the Platform – MDN Hack Day, Sao Paulo from Robert Nyman

  6. Weekly HTML5 Apps Developer Resources, August 12th 2012

    Weekly Resources for HTML5 Apps Developers

    Articles

    Resources

    Bonus Link

    If you find a link that you think should be included, please feel free to forward it to JStagner at Mozilla.com

  7. Weekly HTML5 Apps Developer Resources, August 12th 2012

    Weekly Resources for HTML5 Apps Developers

    Articles

    Resources

    Bonus Link

    If you find a link that you think should be included, please feel free to forward it to JStagner at Mozilla.com

  8. It's Opus, it rocks and now it's an audio codec standard!

    In a great victory for open standards, the Internet Engineering Task Force (IETF) has just standardized Opus as RFC 6716.

    Opus is the first state of the art, free audio codec to be standardized. We think this will help us achieve wider adoption than prior royalty-free codecs like Speex and Vorbis. This spells the beginning of the end for proprietary formats, and we are now working on doing the same thing for video.

    There was both skepticism and outright opposition to this work when it was first proposed in the IETF over 3 years ago. However, the results have shown that we can create a better codec through collaboration, rather than competition between patented technologies. Open standards benefit both open source organizations and proprietary companies, and we have been successful working together to create one. Opus is the result of a collaboration between many organizations, including the IETF, Mozilla, Microsoft (through Skype), Xiph.Org, Octasic, Broadcom, and Google.

    A highly flexible codec

    Unlike previous audio codecs, which have typically focused on a narrow set of applications (either voice or music, in a narrow range of bitrates, for either real-time or storage applications), Opus is highly flexible. It can adaptively switch among:

    • Bitrates from 6 kb/s to 512 kb/s
    • Voice and music
    • Mono and stereo
    • Narrowband (8 kHz) to Fullband (48 kHz)
    • Frame sizes from 2.5 ms to 60 ms

    Most importantly, it can adapt seamlessly within these operating points. Doing all of this with proprietary codecs would require at least six different codecs. Opus replaces all of them, with better quality.
    Illustration of the quality of different codecs
    The specification is available in RFC 6716, which includes the reference implementation. Up-to-date software releases are also available.

    Some audio standards define a normative encoder, which cannot be improved after it is standardized. Others allow for flexibility in the encoder, but release an intentionally hobbled reference implementation to force you to license their proprietary encoders. For Opus, we chose to allow flexibility for future encoders, but we also made the best one we knew how and released that as the reference implementation, so everyone could use it. We will continue to improve it, and keep releasing those improvements as open source.

    Use cases

    Opus is primarily designed for use in interactive applications on the Internet, including voice over IP (VoIP), teleconferencing, in-game chatting, and even live, distributed music performances. The IETF recently decided with “strong consensus” to adopt Opus as a mandatory-to-implement (MTI) codec for WebRTC, an upcoming standard for real-time communication on the web. Despite the focus on low latency, Opus also excels at streaming and storage applications, beating existing high-delay codecs like Vorbis and HE-AAC. It’s great for internet radio, adaptive streaming, game sound effects, and much more.

    Although Opus is just out, it is already supported in many applications, such as Firefox, GStreamer, FFMpeg, foobar2000, K-Lite Codec Pack, and lavfilters, with upcoming support in VLC, rockbox and Mumble.

    For more information, visit the Opus website.