Mozilla

Dev Derby Articles

Sort by:

View:

  1. Announcing the winners of the April 2013 Dev Derby!

    This past April, some of the most creative web developers out there showed us what they could do with Web Workers in the April Dev Derby contest. After looking through the entries, our expert judges–James Padolsey, Janet Swisher, Maire Reavy, and Randell Jesup–decided on three winners and two runners-up.

    Not a contestant? There are other reasons to be excited. Most importantly, all of these demos are completely open-source, making them wonderful lessons in the exciting things you can do with Web Workers today.

    Dev Derby

    The Results

    Winners

    Runners-up

    April was the month of the newcomer. If you have ever doubted your ability to make a difference on the web, just look at these results and think again. As always, it was difficult to name just a few winners, so please join me in congratulating all of our competitors for making the web a more exciting and a more responsive place.

    Want to get a head start on an upcoming Derby? We are now accepting demos related to WebGL (June) and the File API (July). Head over to the Dev Derby to get started.

    Further reading

  2. Announcing the winners of the March 2013 Dev Derby!

    This past March, some of the most creative web developers out there showed us what they could do for the mobile Web in the March Dev Derby contest. After looking through the entries, our our three expert judges–Craig Cook, Franck Lecollinet, and Guillaume Lecollinet–decided on three winners and two runners-up.

    Not a contestant? There are other reasons to be excited. Most importantly, all of these demos are completely open-source, making them wonderful lessons in the exciting mobile experiences you can create today using only the skills you already have.

    Dev Derby

    The Results

    Winners

    Runners-up

    The March Derby saw some great entries, from games to productivity applications to wonderfully useful location-based services and more. Please join me in congratulating these winners and all of our contributors for making the wireless world a better and more exciting place.

    Want to get a head start on an upcoming Derby? We are now accepting demos related to getUserMedia (May) and WebGL (June). Head over to the Dev Derby to get started.

  3. Announcing the winners of the February 2013 Dev Derby!

    Last month, some of the most creative web developers out there pushed the limits of touch events and multi-touch interaction in the February Dev Derby contest. After looking through the entries, our three expert judges–Franck Lecollinet, Guillaume Lecollinet, and (filling in for Craig Cook this month) yours truly–decided on three winners and two runners-up.

    Not a contestant? There are other reasons to be excited. Most importantly, all of these demos are completely open-source, making them wonderful lessons in the exciting things you can do with multi-touch today.

    Dev Derby

    The Results

    Winners

    Runners-up

    Naming just a few winners is always difficult, but the task was especially hard this time around. Just about every demo I came across impressed me more than the last, and I know our other judges faced a similar dilemma. Our winners managed to take a relatively familiar form of interaction and create experiences that were more creative, more fun, and more visually stunning than we would have ever predicted. Congratulations to them and to everyone else who amazed us last month.

    Want to get a head start on an upcoming Derby? We are now accepting demos related to mobile web development in general (March), Web Workers (April), and getUserMedia (May). Head over to the Dev Derby to get started.

  4. Announcing the winners of the January 2013 Dev Derby!

    This past January, creative web developers from around the world showed us what they could do with drag and drop interaction in the January Dev Derby contest. After looking through the entries, our three new expert judges–Craig Cook, Franck Lecollinet, and Guillaume Lecollinet–decided on four winners and two runners-up.

    Dev Derby

    Not a contestant? There are other reasons to be excited. Most importantly, all of these demos are completely open-source, making them wonderful lessons in the exciting things you can do with drag and drop today.

    The Results

    Winners

    Runners-up

    These contestants were not satisfied just bringing this age-old interaction to the Web. They also made it fun, helpful, musical, and even a little amusing. Congratulations to them and to all of the amazing contestants who pushed the limit of drag and drop interaction.

    Want to get a head start on an upcoming Derby? We are now accepting demos related to mobile web development in general (March), Web Workers (April), and by popular demand, getUserMedia (May). Head over to the Dev Derby to get started.

  5. Announcing the winners of the December 2012 Dev Derby!

    Last month, some of the most creative web developers out there showed us what they could do with Offline web technologies in the December Dev Derby contest. After looking through the entries, our three judges–Dave Rupert, Eric Shepherd and (filling in for Christian Heilmann this month) yours truly–decided on three winners and two runners-up.

    Not a contestant? There are other reasons to be excited. Most importantly, all of these demos are completely open-source, making them wonderful lessons in the exciting things you can do with the offline Web today.

    Dev Derby

    The Results

    Winners

    Runners-up

    This was a very exciting contest with some really exceptional results to show for it. Through their incredible work, these contestants have shown the world that we do not need to struggle with poor internet connections at conferences, desperately search for an open network just to work with others, or consume costly data just to play a web-enabled game.

    Thanks to these contestants and to everyone else who competed for making the Web a better place.

    Want to get a head start on an upcoming Derby? We are now accepting demos related to Drag and Drop (January) and multi-touch (February) and mobile in general (March). Head over to the Dev Derby to get started.

    Further Reading

  6. Story of a Knight: the making of

    The travel of a medieval knight through fullscreen DOM. The ‘making of’ the demo that has won the November Dev Derby.

    Technologies used:

    Markup And Style

    Markup and style are organized in this way:

    • An external wrapper that contains everything
    • Three controls boxes with fixed positions and high z-index
    • An internal wrapper that contains the Google Maps iframe, canvas path and 8 div elements for the story

    The external wrapper and control boxes

    The external wrapper contains:

    • The audio tag with ogg and mp3 sources, on top left;
    • The div which is populated with fullscreen switcher if the browser supports it, on top right;
    • The navigation with numbers to move through the canvas path, on bottom right.

    <div id="external-wrapper">
      <audio controls="controls">
        <source src="assets/saltarello.ogg" type="audio/ogg" />
        <source src="assets/saltarello.mp3" type="audio/mp3" />
        Your browser does not support the audio element.
      </audio>
     
      <div id="fullscreen-control">
      </div>
     
      <ul class="navigation">
        <li class="active"><a href="#start">1</a></li>
        <li><a href="#description">2</a></li>
        ...
      </ul>

    The internal wrapper

    The internal wrapper contains:

    • The iframe with the big Google Map embedded, absolutely positioned with negative x and y;
    • A div of the same size and the same absolute position of the map, but with a bigger z-index, which has a “background-size: cover” semi-transparent image of old paper to give a parchment effect;
    • The canvas path (once activated the javascript plugin, it will be drawn here);
    • The 8 divs that tells the story with texts and images, absolutely positioned.

    <div class="wrapper">
      <iframe width="5000" height="4500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.it/?ie=UTF8&amp;t=k&amp;ll=44.660839,14.811584&amp;spn=8.79092,13.730164&amp;z=9&amp;output=embed"></iframe>
      <div style="position: absolute; top: -2000px; left: -1100px; background: transparent url(assets/bg_paper.jpg) no-repeat top left; width: 5000px; height: 4500px;background-size: cover;opacity: 0.4;z-index: 999;"></div>
     
      <div class="demo">
        <img src="assets/knight.png" alt="">
        <h1><span>&#8225;</span> Story of a Knight <span>&#8225;</span></h1>
        <span class="arrow">&#8224;</span> Of Venetian lagoon AD 1213 <span class="arrow">&#8224;</span>
      </div>
     
      <div class="description">
        <span class="big">He learnedthe profession of arms<br/>in an Apennines' fortress.</span>
        <img src="assets/weapons.png" alt="" style="position: absolute; top: 180px; left: 20px;">
      </div>
      ...
    </div>

    JavaScript

    The Scrollpath plugin

    Available at https://github.com/JoelBesada/scrollpath

    First we need to embed the jQuery library in the last part of the page

    <script src="http://code.jquery.com/jquery-latest.pack.js"></script>

    Then we can call the scrollpath.js plugin, the demo.js where we give the instructions to draw the canvas path and initiate it, the easing.js to have a smooth movement (also include the scrollpath.css in the head of the document).

    <script src="script/min.jquery.scrollpath.js"></script>
    <script src="script/demo.js"></script>
    <script src="script/jquery.easing.js"></script>
    <link rel="stylesheet" type="text/css" href="style/scrollpath.css" />

    Let’s see the relevant parts of the demo.js file:

    1. At the beginning there are the instructions for drawing the path, using the methods “moveTo”, “lineTo”, “arc” and declaring x/y coordinates;
    2. Then there’s the initialization of the plugin on the internal wrapper;
    3. Finally there’s the navigation implementation with smooth scrolling.
    $(document).ready(init);
     
      function init() {
      /* ========== DRAWING THE PATH AND INITIATING THE PLUGIN ============= */
     
      var path = $.fn.scrollPath("getPath");
      // Move to 'start' element
      path.moveTo(400, 50, {name: "start"});
      // Line to 'description' element
      path.lineTo(400, 800, {name: "description"});
      // Arc down and line
      path.arc(200, 1200, 400, -Math.PI/2, Math.PI/2, true);
      ...
     
      // We're done with the path, let's initiate the plugin on our wrapper element
      $(".wrapper").scrollPath({drawPath: true, wrapAround: true});
     
      // Add scrollTo on click on the navigation anchors
      $(".navigation").find("a").each(function() {
        var target = this.getAttribute("href").replace("#", "");
        $(this).click(function(e) {
          e.preventDefault();
     
          // Include the jQuery easing plugin (http://gsgd.co.uk/sandbox/jquery/easing/)
          // for extra easing functions like the one below
          $.fn.scrollPath("scrollTo", target, 1000, "easeInOutSine");
        });
      });
     
      /* ===================================================================== */
    }

    The jQuery-FullScreen plugin

    Available at https://github.com/martinaglv/jQuery-FullScreen

    To cap it all, the fullscreen. Include the jQuery-FullScreen plugin, then verify with a script if the browser supports the functionality: in case yes, it will append the switcher on the top right corner; then initialize it on the external wrapper to push everything fullscreen.

    <script src="script/jquery.fullscreen.js"></script>
     
    <script>
      (function () {
        //Fullscreen for modern browser
        if($.support.fullscreen){
          var fullScreenButton = $('#fullscreen-control').append('<a id="goFullScreen">Watch full screen</a>');
          fullScreenButton.click(function(e){
            e.preventDefault();
            $('#external-wrapper').fullScreen();
          });
        }
      })();
    </script>

    Summary

    The hardest part was to figure out which size/zoom level give to the Google Maps iframe and then where to position it in relation to the div with the canvas.
    The other thing that has reserved some problems was the loading time: I had initially placed the video of a medieval battle in slow-motion along the path, but then I removed it because the page was loaded too slowly

    As you have seen everything is very simple, the good result depends only on the right mix of technology, storytelling and aesthetics. I think that the front-end is entering in a golden age, a period rich of expressive opportunities: languages and browsers are evolving rapidly, so there’s the chance to experiment mixing different techniques and obtain creative results.

  7. Announcing the November Dev Derby winners!

    Last month, some of the most creative web developers out there showed us what they could do with the Fullscreen API in the November Dev Derby contest. After looking through the entries, our three expert judges–Christian Heilmann, Dave Rupert and Eric Shepherd–decided on three winners and two runners-up.

    Not a contestant? There are other reasons to be excited. Most importantly, all of these demos are completely open-source, making them wonderful lessons in the exciting things you can do with the Fullscreen API today.

    Dev Derby

    The Results

    Winners

    Runners-up

    This was a challenging contest to be sure. After all, what’s so great about taking over the entire screen? Our contestants provided some surprising answers. Fullscreen web applications mean immersive storytelling, engaging education, beautiful projection and more.

    Congratulations to these winners and to everyone who competed. The Web is a more exciting place thanks to their work.

    Want to get a head start on an upcoming Derby? We are now accepting demos related to offline web technologies (December), and Drag and Drop (January) and multi-touch (February). Head over to the Dev Derby to get started.

    Further reading

  8. A tale of a CSS3 Animation Demo

    Once upon a time, there was this good hearted web developer, who was everyday worried about learning new cool things and trying new crazy stuff his browser could barely be able to do. Also, there were some giants, working hard to increase the power of the magic web, allowing all the peoples to live, code, learn and share freely.

    Among those things, there was CSS3 with its new features! I heard about something called Mozilla Dev Derby, and by that month, the focused feature was exactly CSS3 animations! What an opportunity to learn cool and be part of something like that! It’s awesome that companies like Mozilla are working so hard to keep these subjects and contents available to us!

    Two examples will be used here to both explain the technologies and tell the history. Felipe prepared a demo using HTML5 and CSS3 animations to do a Earth planet spinning, and, not aware of that, Deivid Marques had a similar idea.

    Why a planet Earth?

    Inspiration was the key. Since I was a child I have been fascinated with the Universe (both the micro, and macro ones) and the Earth, being what it is for us…such a good host! I decided to use it as inspiration!

    Images

    Obviously, images would be required. I tried to avoid images as much as possible, but I simply wouldn’t represent the Earth in a blurred image! Also, the moon, the stars in the background and the small sun are images.

    What should be animating?

    Before animating things around there, I mapped everything that could make sense to be moving, and how. First of all, the planet itself! The earth has to spin in one direction, while also bents to create the four seasons. Also, there is the day and night of the Earth due to its rotation.

    The Moon runs around the globe, but once it is behind the Earth, it should get darker. Also, the Moon should come to the front of the planet, and then hide behind it. Also, a slow movement, added to the stars in the background, could be of use!

    HTML Structure

    I didn’t want to make it too complex, so I didn’t use pseudo elements. That forced me to have the HTML just a little bit bigger.

    This is what is inside the Body tag:

    <div id="sun">
    </div>
    <div id="atmosphere">
    </div>
    <div id='globe'>
    </div>
    <div id='moon'>
    </div>
    <div id="sunLight1">
    </div>
    <div id="sunLight2">
    </div>
    <div id="sunLight3">
    </div>
    <div id="sunLight4">
    </div>
    <div id="sunLight5">
    </div>
    <div id="sunLight6">
    </div>

    Visual effects

    Well, you know that everything seems pretty from out there! So the visual effects should be cool too!

    The globe

    The globe is basically a rounded div, with a global map as its background. It is centered with an absolute position and sizes, and uses a box-shadow effect to represent the side of the planet where it’s night.

    #globe
    {
        background-image: url(images/globe-hearth.jpg) repeat-x;
        border: solid 1px #000;
        position:absolute;
        top: 50%;
        left: 50%;
        width: 600px;
        height: 600px;
        margin-left: -300px; /* aligning it to the center */
        margin-top: -300px;
        border-radius: 50%; /* making it round */
        z-index:0;
        box-shadow: inset 2px 2px 10px #000, inset -140px -70px 100px #000;
    }

    The atmosphere

    The atmosphere is another round div with a box-shadow effect.

    #atmosphere
    {
        position:absolute;
        top: 50%;
        left: 50%;
        width: 600px;
        height: 600px;
        margin-left: -300px;
        margin-top: -300px;
        border-radius: 50%;
        opacity: 0.7;
        box-shadow: -6px -6px 20px #eef;
    }

    The Sun

    The Sun, in this demo is just another div with an image as background, although, there is a tricky detail here! I wanted the Sun to be positioned right in the horizon of the globe, so, just centering it would not work! Also, I couldn’t know the resolution to fit it exactly there! But, I knew the size of the planet and I also knew it was centered!

    Therefore, I just had to center it, and then adjust its position by changing its margin values.

    #sun
    {
        background-image: url(images/sun.png);
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 47px;
        margin-left: -320px;
        margin-top: -110px;
    }

    The stars behind

    The stars were simply a div with a repeatable background image.

    The Moon

    The Moon was quite more complex. It had to turn around the globe, so, I’d have to play with its z-index as well. Besides that, it was simply another round div.

    Sun lights

    Also, there are a few reflections of the light of the Sun. Those, are other round divs, absolutely positioned with different colours and opacity. Box-shadow could also be an optional nice touch! So I also used it.

    Animation time

    To animate the Earth, I created two animations using the keyframes CSS3 feature.

    (Note: In these examples, I’m just showing the “-moz” definition of the animations, but you have to create them for each vendor if you want it to work in different browsers).

    @-moz-keyframes dayByDay
    {
        from{
                background-position: -1600px;
        }
        to{
                background-position: 0px;
        }
    }

    This way, the background of the globe would be passing, as pretending the globe was spinning. Also, I created the animation for the seasons:

    @-moz-keyframes seasons
    {
        from{
            -moz-transform: rotate(6deg);
        }
        to{
            -moz-transform: rotate(16deg);
        }
    }

    You know, the planet Earth is not fully straight to the 0 degrees. Now, I had to add those animations to the globe:

    #globe{
        -moz-animation: dayByDay 24s linear 0s infinite, seasons 2688s linear alternate 0s infinite;
    }

    Animating the sky behind everything followed the very same technique as the dayByDay animation.

    Animating the Moon was more of a challenge! To animate it, I had to change its size and position. Also making it darker or lighter and taking care of its z-index.

    Below, is how I did that back then (on june 2011). Nowadays, I would try it with -moz-transform using the scale transform, instead of changing its width and height. Also, back then, I used negative and positive values for the z-index of the moon…instead, I could have added a z-index to the Earth, like 2, and use only positive values in the Moon’s z-index(1, and 3) to move it to the back or front of the planet. I didn’t want to change it here, because this is how it is running on the uploaded demo, in Mozilla Derby.

    @-moz-keyframes moon
    {
       0%{
           width: 30px;
           height: 31px;
           margin-left: -310px;
           margin-top: -40px;
           z-index:-1;
       }
       10%{
           margin-left: -450px;
           margin-top: -50px;
           width: 60px;
           height: 61px;
           z-index:1;
       }
       20%{
           margin-left: -500px;
           margin-top: -50px;
           width: 80px;
           height: 81px;
           z-index:1;
       }
       30%{
           margin-left: -450px;
           margin-top: -50px;
           width: 90px;
           height: 92px;
           z-index:1;
       }
       50%{
           margin-left: 0px;
           margin-top: -50px;
           width: 120px;
           height: 122px;
           z-index:1;
       }
       60%{
           margin-left: 300px;
           margin-top: -50px;
           width: 120px;
           height: 122px;
           z-index:1;
       }
       60%{
           margin-left: 410px;
           margin-top: -50px;
           width: 90px;
           height: 92px;
           z-index:1;
           box-shadow: inset 0px 0px 80px #000;
       }
       70%{
           margin-left: 460px;
           margin-top: -50px;
           width: 80px;
           height: 82px;
           z-index:1;
           box-shadow: inset 0px 0px 80px #000;
       }
       80%{
           margin-left: 420px;
           margin-top: -50px;
           width: 60px;
           height: 61px;
           z-index:-1;
           box-shadow: inset 0px 0px 80px #000;
       }
       90%{
           margin-left: 0px;
           margin-top: -50px;
           width: 30px;
           height: 31px;
           z-index:-1;
       }
       100%{
           width: 30px;
           height: 31px;
           margin-left: -310px;
           margin-top: -40px;
           z-index:-1;
       }
    }

    Mozilla Dev Derby

    The above demo can be found as CSS3 up and running! in Mozilla’s Demo Studio.

    Some time later, Deivid Marques did his Planeta Terra demo, using only one DIV. While studying CSS3, the idea of creating a planet Earth also came to his mind. He noticed the example in a flash tutorial and thought of creating that with CSS3 instead.

    His planet Earth is made of a single div and uses the CSS to animate the background image. So, it is simpler to reproduce and understand.

    The div has the following CSS applied to it:

    .earth{
        background: url(images/terra.jpg) repeat-x 0 0;
        border: 1px solid rgba(26,18,101,0.3);
        border-radius: 225px;
        box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset;
        height: 450px;
        left: 50%;
        margin: -225px 0 0 -225px;
        position: absolute;
        top: 50%;
        width: 450px;
        animation: loop 80s linear infinite;
    }

    And here is his animation definition in CSS3:

    @keyframes loop {
        0% { background-position: 0 0; }
        100%{ background-position: -900px 0;}
    }

    His demo was also posted to Mozilla Dev Derby once he was also inspired to tell the world about he had learnt while developing this demo! Planeta Terra is also available on GitHub.

    This is how we both met and were invited to write this article.

    Conclusion

    It was great for me to learn new things, face new challenges, talk to a lot of people about their experiences with it, and …well, lots and lots of gains, no losses!

    I hope it has motivated you somehow, to create your own demo, submit it…the least you get, is a lot of fun! :)

  9. Comic Gen – a canvas-run comic generator

    The first time I wanted to participate on Dev Derby was on the May 2012 challenge, where the rules were that you should use websockets. At that time I thought that I could use NodeJS and SocketIO. But the time kept running and I ended not having any cool ideas for an app.

    Since then I have been just watching the monthly challenges, until the December 2012 one: offline apps!

    Once again I got very excited to do something for Dev Derby, specially because I think the App Cache and Local Storage APIs are just amazing and the main APIs to use when thinking of offline apps.

    Anyway, after passing 30 minutes wondering how amazing offline apps can be I decided it was time to think of something for the challenge.

    As a husband and professional its hard to find the time I wanted to build cool stuff for this kind of challenge. So I wondered if I could reuse a demo I had already built a couple months ago, and add the necessary things to make it available offline. Looking at the demos I had done, the one that better suits to the challenge was a comic generator, which I very creatively called Comic Gen.

    Comic Gen (source code) is capable of adding and manipulating characters on a screen, and it gives you a chance to export the results to a PNG file.

    Ragaboom Framework

    Canvas was the first HTML5 API that comes to my attention. It is very cool to have the ability to draw anything, import images, write texts and interact with them all. The possibilities seem to be limitless.

    I started to make my first experiments with Canvas and it didn’t took me too long to realize I could build a framework to ease things. That was when I created the Ragaboom framework.

    At that time it was the most advanced code I had ever written with JavaScript. Looking at it today I realize how complex and hard to use it is, and how much I could improve it… Well, that’s something I still plan to do, but the responsibilities and priorities prevent me to do so right now.

    So, I had to test Ragaboom somehow. Then I created a simple game called CATcher. The objective of the game is to catch the falling kitties with a basket until the time runs out. The player earns 15 more seconds for every 100 points.

    My wife helped me with the drawings and she said she loved the game. Yeah, right… She also says I’m handsome…

    CATcher and Ragaboom were two big accomplishments for me. I submitted the game to be published in some HTML5 demo websites and surprisingly a lot of people contacted me to talk about JavaScript advanced programming and HTML5. What I loved most was that some people had very good ideas for improve the framework!

    Why a comic generator

    After I had built Ragaboom, I started to think of a new challenge where I could use Canvas and for improve the framework. At that time there was (and there still is) too many discussion about the future of HTML5, and people started to argue about if it was possible to HTML5 to replace Flash.

    That was the kind of challenge I was looking for: to try to reproduce something with Canvas that already existed with Flash. I had seen a couple comic generators using Flash. Some of them that were very simple, and some that were very well built.

    At that moment I decided what I wanted to do. I needed someone to draw the characters for me. Then, my friend Ana Zugaib, a very talented artist made them for me! Her work was simply wonderful!

    Planning the demo

    Ok, I had a subject, I had a reason, now I needed to plan what it should be created. There’s not much to think about when building a comic generator. All I needed was a toolbox and a screen where the characters should be placed.

    I wanted the user to be able to choose different screen sizes and that they should have the option to export their work to an image or something like that.

    The objects in the screen should be allowed to be manipulated, moved, resized, inverted and removed from the screen. At the moment something came into my mind: How the hell am I gonna do all that????

    How the hell to do all that

    Oh well, if I wanted challenge, I had got a challenge. Luckily, some of the features I needed were already implemented on Ragaboom framework, or were already presented on the DOM API.

    So I had to focus on the stuff they didn’t offer me:

    • How to invert the images horizontally;
    • How to resize the screen without losing the current content;
    • How to export the content to a PNG file;

    Initializing the objects

    First of all, I needed to create a Canvas object and its context, and create a big white rectangle on it. That would be my comic screen.

    var c = $('#c')[0];
    var ctx = c.getContext('2d');
    var scene = new RB.Scene(c);
    var w = c.width;
    var h = c.height;
    ...
    scene.add( scene.rect(w, h, 'white') );
    scene.update();

    The scene.add method (from my framework) adds a new object to the screen, as you can see above, where a white rectangle was added to the screen. Next the screen is updated to show all drawn objects so far. Internally, the framework creates an array within the objects that should be drawn to the screen, storing their properties like x and y positions and their type (rectangle, circle, image, etc).
    The scene.update method iterates over that array, repainting every object in the Canvas area.

    For the toolbar I had created two arrays. The first kept the URL for each image of the toolbar, and the second stored the URL for the actual image that should be placed on the screen. The elements of toolbar image array corresponded to actual images array. So the pirate icon from the first array was in the same position as the actual pirate image from the second array, and so on.

    I then had to iterate the arrays to build buttons linking each of them to the corresponding image. After that the result of the iteration was appended to a DOM element.

    //toolbar icons array
    var miniUrls = ["sm01_mini.png", "sm02_mini.png", "sm03_mini.png", "sushi_mini.png", "z01_mini.png", "z02_mini.png", "z03_mini.png", "z04_mini.png", "balao.png", "toon01_mini.png", "toon02_mini.png", "toon03_mini.png", "toon04_mini.png", "toon05_mini.png", "toon06_mini.png"];
     
    //actual images array
    var toonUrls = ["sm01.png", "sm02.png", "sm03.png", "sushi.png", "z01.png", "z02.png", "z03.png", "z04.png", "balao.png", "toon01.png", "toon02.png", "toon03.png", "toon04.png", "toon05.png", "toon06.png"];
     
    //building the toolbar
    cg.buildMinis = function() {
        var buffer = '';
        var imgString = "&lt;img src='toons/IMG_URL' class='rc mini'&gt;&lt;/img&gt;";
        var link = "&lt;a href="javascript:cg.createImage('toons/IMG_URL')"&gt;";
     
        for(var i=0; i &lt; miniUrls.length; i++) {
            buffer += link.replace(/IMG_URL/, toonUrls[i]);
            buffer += imgString.replace(/IMG_URL/, miniUrls[i]) + '&lt;/a&gt;';
        }
     
        lib.append(buffer);
     
        $('#menuContainer').append( $('#instructs').clone() );
    }

    Adding objects to the screen

    When you are loading an image via JavaScript it is important to keep in mind that the browser will download the image asynchronously. That means that you cannot be sure that the image will be loaded and ready for use yet.

    To solve this, one of the techniques is using the onload method from the Image object:

    var img = new Image();
    img.onload = function() {
        alert('the image download was completed!');
    };
    img.src = "my_image.png";

    Ragaboom framework uses this same trick. That’s why the image method second parameter is a callback function which will be fired when the image is ready for use.

    cg.createImage = function(url) {
        scene.image(url, function(obj) {
            obj.draggable = true;
            obj.setXY(30, 30);
     
            obj.onmousedown = function(e) {
                currentObj = obj;
                scene.zIndex(obj, 1);
                scene.update();
            }
     
            scene.add(obj);
            currentObj = obj;
            scene.update();
            pop.play();
        });
    }

    On the example above the image is stored on the objects array, converted to draggable and positioned at coordinates x=30, y=30. Then a mousedown event is attached to the object setting it to the current object. At the end, the canvas is updated.

    Zooming

    To increase the size of objects I simply added a small portion of pixels on both the width and the height of the object. The same was done when trying to decrease the size of objects by subtracting a portion of pixels. I only had to handle situations where width and height were lower than zero to prevent bugs.

    In order to offer a smooth and uniform zooming I decided to apply a 5% of the current width and height instead of using a fixed number of pixels.

    var w = obj.w * 0.05;
    var h = obj.h * 0.05;

    The complete “zoom in” function is like this:

    cg.zoomIn = function(obj) {
        var w = obj.w * 0.05;
        var h = obj.h * 0.05;
     
        obj.w += w;
        obj.h += h;
     
        obj.x -= (w/2);
        obj.y -= (h/2);
     
        scene.update();
    }

    Exporting a PNG file

    The Canvas object has a method called toDataURL, which returns a URL representation of the canvas as an image, according to the format specified as a parameter. Using this method, I created a variable that stored the image URL representation and opened a new browser window.

    Then I created an Image object, setting the src attribute with the value of the URL and appended it to the new window’s document.
    The user has to right click the image and “Save as” it themselves. I know it’s not the best solution, but it was what I could come up with, then.

    var data = c.toDataURL('png');
    var win = window.open();
    var b = win.document.body;
    var img = new Image();
    img.src = data;
    b.appendChild(img);

    Rescaling the screen

    For screen resizing, there wasn’t any inconvenience, really. After all, the Canvas object has the width and height attributes. So everything I have to do is set these values and the screen will be rescaled, right? You wish… When you set either the width or height attributes from a canvas object, its context gets lost somehow.

    To fix that problem I had to update every single object of the context after rescaling the canvas object. At that moment I realized the advantages of using a framework. Because it kept information of every object and their attributes, and it did all dirty work of redrawing every image back to the canvas context.

    c.width = w;
    c.height = h;
    scene.update(); // thanks, confusing framework

    Final considerations

    I have always liked the front end side of programming. It took me a long time to realize and accept that, for some reason. I found that JavaScript is as a very powerful language capable of innumerable awesome stuff.

    A couple years ago I thought I could never build such things as I have done nowadays. And gladly I was wrong!

    If you love to code, dedicate some time at learning new things. The web is on your side. I mean, look at MDN! You have just anything you need to become an excellent developer.

    What are you waiting for to become a great dev?

  10. Announcing the October Dev Derby winners!

    Last month, some of the most creative web developers in the world showed us what they could do with CSS Media Queries in the October Dev Derby contest. After looking through the entries, our three new judges–Dave Rupert, Eric Shepherd and I–decided on three winners and two runners-up.

    Not a contestant? There are other reasons to be excited. Most importantly, all of these demos are completely open-source, making them wonderful lessons in the exciting things you can do with CSS Media Queries today.

    Dev Derby

    Winners

    Runners-up

    The quality of entries this time around was incredible–and the Web took notice. Word of these demos spread like wildfire even before the contest ended, reminding users and developers everywhere just how powerful the open Web has become.

    When it came time to choose winners, the practicality dimension proved to be a critical factor. While everything submitted to the October Derby was extremely original, our judges determined that these demos particularly excelled at pushing the web forward and deserved special praise as a result.

    Congratulations to these winners and to everyone who competed in the October Derby. The Web is a more exciting, more beautiful, and more compelling platform thanks to their hard work. I look forward to seeing what they create next.

    Want to get a head start on an upcoming Derby? We are now accepting demos related to the the Full Screen API (November), offline web technologies (December), and Drag and Drop (January). Head over to the Dev Derby to get started.

    Further reading