Mozilla

HTML5 Articles

Sort by:

View:

  1. Mozilla’s Boot to Gecko – The Web is the Platform

    Mozilla’s Boot to Gecko (B2G) is about building a complete, standalone operating system for the open web. It aims at making web technologies the number one choice for applications on desktop and mobile, and we believe it can displace proprietary, single-vendor stacks for application development. And we have made some exciting progress that we want to share with you!

    Continued…

  2. Creating thumbnails with drag and drop and HTML5 canvas

    HTML5 Canvas is a very cool feature. Seemingly just an opportunity to paint inside the browser with a very low-level API you can use it to heavily convert and change image and video content in the document. Today, let’s take a quick look at how you can use Canvas and the FileReader API to create thumbnails from images dropped into a browser document.

    The final code is available on GitHub and you can see an online demo here. There is also a screencast available on YouTube:

    Step 1: Getting the files into the browser

    The first step to resize images in the browser is to somehow get them. For this, we can just add an element in the page and assign drag and drop event handlers to it:

    s.addEventListener( 'dragover', function ( evt ) {
      evt.preventDefault();
    }, false );
    s.addEventListener( 'drop', getfiles, false );

    Notice that we only prevent the default behaviour when we drag things over the element. This is to prevent the browser from just showing the images when we drag them in.

    The getfiles() function then does the hard work of reading all the files in and sending them on to the functions that do the resizing and image generation:

    function getfiles( ev ) {
      var files = ev.dataTransfer.files;
      if ( files.length > 0 ) {
        var i = files.length;
        while ( i-- ) {
          var file = files[ i ];
          if ( file.type.indexOf( 'image' ) === -1 ) { continue; }
          var reader = new FileReader();
          reader.readAsDataURL( file );
          reader.onload = function ( ev ) {
            var img = new Image();
            img.src = ev.target.result;
            img.onload = function() {
            imagetocanvas( this, thumbwidth, thumbheight, crop, background );
            };
          };
        }
      }
      ev.preventDefault();
    };

    The drop event gives us a property called dataTransfer which contains a list of all the files that have been dropped. We make sure that there was at least one file in the drop and then iterate over them.

    If the file type was not an image (or in other words the type property of the file does not contain the string “image”) we don’t do anything with the file and continue the loop.

    If the file is an image we instantiate a new FileReader and tell it to read the file as a Data URL. When the reader successfully loaded the file it fires its onload handler.

    In this handler we create a new image and set its src attribute to the result of the file transfer. We then send this image to the imagetocanvas() function with the parameters to resize (in the demo these come from the form):

    function imagetocanvas( img, thumbwidth, thumbheight, crop, background ) {
      c.width = thumbwidth;
      c.height = thumbheight;
      var dimensions = resize( img.width, img.height, thumbwidth, thumbheight );
      if ( crop ) {
        c.width = dimensions.w;
        c.height = dimensions.h;
        dimensions.x = 0;
        dimensions.y = 0;
      }
      if ( background !== 'transparent' ) {
        cx.fillStyle = background;
        cx.fillRect ( 0, 0, thumbwidth, thumbheight );
      }
      cx.drawImage( 
        img, dimensions.x, dimensions.y, dimensions.w, dimensions.h 
      );
      addtothumbslist( jpeg, quality );
    };

    This function gets the desired thumbnail size and resizes the canvas to these dimensions. This has the added benefit of wiping the canvas so that no old image data would be added to our thumbnail. We then resize the image to fit into the thumbnail using a resize() function. You can see for yourself what this one does in the source code, it just means the image gets resized to fit. The function returns an object with the width and the height of the new image and the x and y position where it should be positioned onto the canvas.

    If we don’t want the full-size thumbnail but instead crop it we resize the canvas accordingly and reset x and y to 0.

    If the user requested a background we fill the canvas with the colour. After that we put the image on the canvas with the x and y coordinates and the new width and height.

    This takes care of creating a new thumbnail on the canvas, but we haven’t got it as an image in the document yet. To this end, we call addtothumbslist():

    function addtothumbslist( jpeg, quality ) {
      var thumb = new Image(),
          url = jpeg ? c.toDataURL( 'image/jpeg' , quality ) : c.toDataURL();
      thumb.src = url;
      thumb.title = Math.round( url.length / 1000 * 100 ) / 100 + ' KB';
      o.appendChild( thumb );
    };

    This one creates a new image and checks if the users wanted a JPG or PNG image to be created. PNG images tend to be better quality but also bigger in file size. If a JPG was requested we call the canvas’ toDataURL() method with two parameters: the requested JPEG mime type and the quality of the image (ranging between 0 and 1 with 1 being best quality). If a PNG is wanted, we can just call toDataURL() without any parameters as this is the default.

    We set the src of the image to the generated url string and add a title showing the size of the image in KB (rounded to two decimals). All that is left then is to add the thumb to the output element on the page.

    That’s it, you can now drag and drop images into the browser to generate thumbnails. Right now, we can only save them one at a time (or if you have some download add-ons all at once). Would be fun to add Zip.js to the mix to offer them as a zip. I dare you! :)

    More reading:

  3. Hidden Gems of HTML5: classList

    If you are a web developer, you surely must know how handy it is to dynamically change the class attribute on an element. The benefits this technique are quite a few:

    • You leave any changes in the look and feel to the CSS
    • You avoid having to loop lots of elements as you can allow CSS to do that job for you by assigning a class on a parent element
    • You can trigger CSS transitions and avoid having to write your own animation
    • And many more…

    The issue with classes is that it is not too simple to work with because of their representation in the DOM. When you read out className you get one string and you need to split it and use regex to find if a class was used and all kind of other annoyances. This is also why it is a very common interview questions for web developers to write a function to deal with classes.

    Well, you might not be aware of it, but HTML has a very cool new way to deal with classes called classList. This makes it dead easy to add, remove, toggle and check for classes on an element – natively in your browser. You can play with it at JSFiddle:

    JSFiddle demo.

    The methods you have are all you really need:

    • element.classList.add('foo') adds the class foo to the element (if it already exists it does nothing)
    • element.classList.remove('foo') removes the class foo from the element
    • element.classList.toggle('foo') alternatively adds and removes the class foo from the element
    • element.classList.contains('foo') returns if the class is applied to the element or not
    • element.classList.toString() returns all the classes as a string (same as reading out className)

    The browser support is very good with IE being the party pooper. However, there is a polyfill by Eli Grey available for you to use.

  4. Mozilla Vision 2012: The Future of HTML5 and Web Technologies

    We are currently in Tokyo, Japan for the Mozilla Vision 2012 conference and hack day. For two days Mozilla Japan with friends from the other locations are putting up an amazing effort to encourage people to help us educate the next generation of web makers.

    Chibi and Jono showing off a platform game

    Being in Japan, all of this is of course wrapped in quite some amazing tech like voice activated robots with emotional responses, but also good old dinosaurs you can take your tourist shots with:

    Chris Heilmann, Mozilla Godzilla and Mark Finkle

    My part of the play was to give a talk about HTML5 and how we can use it now to give our users a better web experience. The slides are available.

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

    The demos I showed in the talk were:

    Today we are at a hack day – stay tuned for some more of the information on that soon.

  5. New features for HTML5 video playback in Firefox

    As explained in this blog post by Jared Wein of the Firefox team there are quite a few new features in Firefox when it comes to playing HTML5 video. As an Aurora user, I am most excited about the option to go full-screen, the ability to overlay video statistics and to save a snapshot of the current frame as a JPG. You can see me talking about and showing them in this short video:

    Firefox has a few features up its sleeve when it comes to HTML5 video playback you might not be aware of:

    • Firefox‘s seeking is now accurate to millisecondsmicroseconds, there is visual feedback when the video has stalled and clicking the whole video pauses and plays it
    • Firefox Beta has specialised controls when you watch video on small devices and watching HTML5 video shows a pleasing background rather than a brutal grey
    • Firefox Aurora has fullscreen, statistics overlay, saving of snapshots and controls appearing when the video ended
    • Firefox Nightly has a full-screen button, fading video controls after 2 seconds of non-interaction, no loading throbber on audio, error reporting when a video could not be loaded on the video, loop attribute support, and resizing of videos larger than the browser window when you watch them directly

    Planned features for Firefox are an overlay play button like YouTube when the video is not set to autoplay and turning off screensavers during fullscreen playback.

    Check out Jared’s post for more information.

  6. Moving browsers and the web forward (video)

    A few days ago I was asked to deliver the first talk of the amazing Beyond Tellerand conference in Dusseldorf, Germany. The talk Breaking the barriers – moving browsers and the web forward introduced a lot of new ideas and technologies that are worked on my Mozilla and others to make the web of the future better.

    Here is the video of the presentation with jump points and links to more information. If you want to see the slides of the talk, they are available here and there is also an audio recording on archive.org.

    Breaking the barriers – moving browsers and the web forward from marc thiele on Vimeo.

    Here’s what is covered in the talk:

    1. Modern web technologies of HTML5 and friends that can be used right now (with 64 myself as a demo) [03:50 – 07:19]
      • Rich HTML semantics (HTML5)
      • Self-validating forms (HTML5)
      • Richer form controls with fallbacks (HTML5)
      • Canvas for painting in the browser (HTML5)
      • CSS gradients, multiple backgrounds, animation and transition
      • CSS 3D transforms
      • Local storage and offline storage
      • SVG for scalable and interactive graphics
      • RequestAnimationFrame for secure animation
      • History API
      • WebGL
    2. Taking on challenges – we need you to show the world that web technology is good enough to do jobs that in the past were only possible with native or server-side code (with Joe Lambert’s image unshredder as the example) [07:20 – 08:04]
    3. Breaking the browser mould – showing that the browser interfaces can be manipulated with HTML and JS (with browser menus, context menus and the Fullscreen API as examples) [08:05 – 10:54]
    4. Developing with the web – developer tools in browsers and done in client side technologies (with Hackasaurus, Cloud 9 IDE, Firefox Scratchpad, Firefox Style Editor, Parse error display in view-source and Tilt as examples) [10:55 – 17:24]
    5. Online identity and issues with current login systems (with BrowserID as a solution to a lot of the problems we have right now) [17:25 – 29:35]
    6. Apps, the shortcomings and myths of native apps and the opportunity to build hybrid apps with web technologies (with Open Web Apps and Web Intents as examples) [29:36 – 37:34]
    7. Moving web technologies into the mobile space (with Are we mobile yet? and Boot to Gecko as demos) [37:35 – 40:11]
    8. How can you help? [40:12 – 42:33]