Found 422 results for “html5”

Sort by:


  1. Save the Date: MDN Hack Day Comes to NYC on March 24

    A bunch of us Mozilla Developer Network folks — web developers, technical writers, developer evangelists and cat herders like me — will be hosting MDN’s first Hack Day in the great city of New York.

    Like many teams who work together at Mozilla, we’re geographically dispersed, and manage to meet in real life a few times per year. The U.S east coast is a relative mid-point between Western Canada, California, Colorado, Oklahoma, Texas and Tennessee on the one hand, and France, Great Britain, Sweden, and Switzerland, on the other. So we’re headed for Brooklyn and the Big Apple!

    On Saturday, March 24, we’ll be at New Work City, a splendid coworking space, which aims “to make the world a better place by empowering people to make a living doing things they love.” (That sounds like us!) We’ll open with a series of short talks about our projects and technologies, and after lunch we’ll hang out and hack, closing the day with demos.

    New Work City logo

    We know that New York City is home to a flourishing tech scene with a thriving startup culture, influential venture firms, and lots of opportunity for developers. The hacker ethic is alive and well in NYC through the work of many collaborators, including: our Mozilla Foundation colleagues at The Hive Learning Network; WebFWD partner General Assembly, putting together a campus for technology, design, and entrepreneurship; and The Creators Project, which will be in San Francisco the weekend before, March 17-18, with a spectacular audio visual installation and other works of astonishing goodness.

    We’re eager to meet, explore, and share some of the stuff we’ve been working on: HTML5, gaming, developer tools for Firefox, the evolution of Jetpack, open-source documentation, and roadmaps that support brand new open platforms and projects. We hope you’ll come check out what we’re building on the open Web and see if we can work together.

    Mozilla is a non-profit with a mission to “to promote openness, innovation and opportunity” and a manifesto describing the “principles that we believe are critical for the Internet to continue to benefit the public good.”

    Let’s hack together — in a city that embraces innovation — and never sleeps. Space is limited, so sign up now, and we’ll save you a t-shirt!

  2. A simple image gallery using only CSS and the :target selector

    Back in the old days of web development and when CSS2 got support I always cringed at “CSS only” demos as a lot of them were hacky to say the least. With CSS growing up and having real interaction features it seems to me though that it is time to reconsider as – when you think about it – visual effects and interactivity should be maintained in the CSS rather than in JavaScript and CSS.

    With the support we have in new browsers it would be a waste not to use what has been put in. If you have to give all the visual candy to IE6, OK, then you’d have to use a library like jQuery for your effects. But you can have your cake and eat it if you don’t give the shiny to the old browsers out there, but give them a simpler interface and make sure they don’t get what they don’t understand.

    So today let’s take a look at an image gallery using the target selector. This has been done before (lightbox example, thumbnail preview example) but I thought it’d be good to explain the details of what is going on.

    So here is a screencast of our “CSS only image gallery” in action and you can see it for yourself.

    Starting with HTML

    We start with HTML that works across all browsers (except for IE < 9, where you need a polyfill to style HTML5 elements):

    <section class="gallery">
          <li><a href="#one">One</a></li>
          <li><a href="#two">Two</a></li>
          <li><a href="#three">Three</a></li>
          <li><a href="#four">Four</a></li>
      <article id="one" class="target">
          <img src="" alt="Kitten 1">
      <article id="two" class="target">
          <img src="" alt="Kitten 2">
      <article id="three" class="target">
          <img src="" alt="Kitten 3">
      <article id="four" class="target">
          <img src="" alt="Kitten 4">

    Without any CSS this would just show all the kitten images in a vertical row and the links would point to them. This works, and should be more than enough for the IE6 users out there.

    For browsers that support newer CSS, however, we can turn this into our gallery in a few easy steps:

    Step 1: Position the articles

    To make sure we don’t give IE older than 9 any CSS it chokes on, we can wrap all the selectors in a simple media query (in this case checking that the window is at least 400 pixels wide):

    @media screen and (min-width: 400px) {
      ... all the good stuff ...

    We then can give the gallery dimensions and an overflow of hidden to make sure that elements positioned outside of it will not be shown. We also position it relative so that every positioned child element will be positioned relatively to it:

    .gallery {
      position: relative;
      height: 280px;
      width: 340px;
      overflow: hidden;

    Then we position all the target elements absolutely in the gallery with 320 pixels to the left. This hides them off screen as we hide the overflow:

    .target {
      position: absolute;
      top: 60px;
      left: -320px;
      height: 220px;
      width: 300px;

    Now in order to show the image when the link to it was clicked we use the :target selector. This one assigns the CSS to the element when it was targeted – either by activating a link to it in the document or from the URL when the page loaded. With this pseudo selector, we override the left setting and move it to 20 pixels, thus showing the image.

    .target:target {
      left: 20px;

    You can try this out for yourself:

    JSFiddle demo.

    To make this smoother, all we need to do is to add a CSS transition to the target styles. Now all the changes to the styles will happen smoothly during a second rather than immediately.

    .target {
      position: absolute;
      top: 60px;
      left: -320px;
      height: 220px;
      width: 300px;
      -webkit-transition: 1s;
         -moz-transition: 1s;
          -ms-transition: 1s;
           -o-transition: 1s;
              transition: 1s;

    Again, see it in action and play with it.

    JSFiddle demo.

    That is all there is to it – the rest of the effects are just different variations of the same trick – animating opacity from 0 to 1 or CSS transitions.

    Target selectors can be a very powerful trick. The main issue they have though is that the page scrolls to the target, so if there is a big distance between the link and the target you’ll get unsightly jumps.

  3. Announcing the December Dev Derby Winners

    IndexedDB lets web applications store structured data for fast online and offline use. Data can be stored using key-value pairs, and values do not need to be serialized (as they do with document-oriented databases) or coerced into a relational structure (as with relational databases).

    Recently, creative developers from around the world demonstrated just how powerful IndexedDB can be in the December Dev Derby. Please join us in congratulating the top three demos as chosen by our judges.

    1st Place: eLibri by mar.castelluccio
    2nd Place: FileSystemDB by mar.castelluccio
    3rd Place: IndexedDB Editor by twolfson

    Runners up:
    Vurkout Buddy by wcheung
    Locate It IndexedDB by nestoralvaro

    Congratulations to our winners and to everyone who submitted to the December Dev Derby.

    Do you want to see your name here next month? We are now accepting demos related to Touch Events (February), CSS 3D Transforms (March), and HTML5 audio (April). Get an early start by submitting today!

  4. 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 ) {
    }, 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 =;
            img.onload = function() {
            imagetocanvas( this, thumbwidth, thumbheight, crop, background );

    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 );
        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: