Dev Derby – a monthly competition of demos using open technologies

Starting from June, Mozilla runs a monthly competition to showcase newest web technologies. In an international competition individuals can submit demos that show the world just how much is possible using open and free technologies in a modern browser.

The Mozilla Dev Derby happens every month and revolves around a certain technology. A panel of judges will pick the winners and give out prizes including awesome laptop bags, Android phones and exclusive MDN T-Shirts. Above all, however, you can see your name pimped by Mozilla on here, on the Derby site and we will do short interviews with all the winners.

Many companies spend a lot of time and effort to create showcase demos to promote their browser, development environment or platform. Whilst this is great we think it makes for a much better learning experience to concentrate on one technology at a time and build smaller, more focused and better documented demos. This is why we want you to be in the driver seat and show us what you can do. There is no better way to learn a new technology than by playing with it.

The rules of the Mozilla Dev Derby are simple:

  • Your demo must work in a current version of Firefox, Firefox Beta or Firefox Aurora, without requiring plug-ins.
  • You must include all source code, including for any binary components.
  • The description of the entry must be clear and accurate.
  • The demo must be mainly your own work, and must not include unauthorized intellectual property of someone else.
  • The name of your entry must not include any Mozilla trademarks.
  • The entry must use open web technologies, such as HTML, CSS, and standard JavaScript APIs
  • Libraries and modules that are freely available are allowed; proprietary ones are not.

To start off we chose CSS3 Animations as the first challenge. Use CSS to animate page content and create movie-style intros (remember the AT-AT walker demo?) and show us how designers can animate without the need for plugins or scripting knowledge. NOTE: Firefox 5 will introduce support for CSS3 Animations. You should use the Firefox Beta or Aurora channel for this Dev Derby. Your demo will not work in Firefox 4. ;-)

So, Ladies and Gentlemen, start your engines and head over to the Mozilla Dev Derby site.

About Chris Heilmann

Evangelist for HTML5 and open web. Let's fix this!

More articles by Chris Heilmann…


20 comments

  1. Sean Hogan

    Does “show us how designers can animate without the need for plugins or scripting knowledge” mean no scripts on the page?

    June 7th, 2011 at 18:34

    1. Jay Patel

      @Sean: Yes! With CSS3 animations, you don’t need scripts to make things move. ;-)

      June 9th, 2011 at 14:34

    2. leo

      cool!

      June 28th, 2011 at 23:41

  2. Dave Poyzer

    Funny that the AT-AT walker doesn’t work in firefox.

    June 9th, 2011 at 10:32

    1. Jay Patel

      @Dave: The original does not work in Firefox… but we’ve updated the link with a version that does. Check it out!

      June 9th, 2011 at 16:12

  3. Sean Hogan

    @Jay: thanks but I was asking about the demo submissions – are they allowed to have scripts in the page or not?

    June 9th, 2011 at 15:49

  4. Jay Patel

    @Sean: Sorry, to answer your question: you can have JS on your page… but just make sure the CSS does what it needs to do without it. We’ll be judging based on a number of factors… and use of technology is one of them… so as long as the main attraction in your demo is driven by CSS animations, you should be fine.

    June 9th, 2011 at 15:53

  5. Richard

    AT-AT animation doesn’t work in Firefox on Ubuntu 11.04

    June 19th, 2011 at 07:58

    1. Timothy

      It does now – Firefox has been updated to version 5 in the repositories, check your updates.

      June 22nd, 2011 at 04:10

  6. calvin

    my mozilla can not see photo

    June 22nd, 2011 at 09:55

  7. DGASKINS1

    HELLO THERE I AM NEW AT THIS SO PLEASE BE PATIENT, I HAVE LOW VISION IN OTHER WORDS I CAN NOT SEE VERY WELL AND I NEED AT LOT OF HELP/ SO DO I GET ANY VOLONTEERS/

    June 22nd, 2011 at 10:50

  8. Kiel

    Just updated to firefox 5, that AT-AT looks awesome!

    June 22nd, 2011 at 14:10

  9. whoever

    Dgaskins1, well, we are in the same boat withe that sight thing.
    So what kinc of help are you looking for

    June 23rd, 2011 at 09:27

  10. mielnka

    the is very good . ;)
    Starting from June, Mozilla runs a monthly competition to showcase newest web technologies.

    June 24th, 2011 at 11:06

  11. john

    Updated the new version, Awesome!

    June 24th, 2011 at 14:09

  12. Narasimharao Chirunomula

    Interesting it seems.

    June 25th, 2011 at 10:59

  13. CSS Webstandard-Blog

    Great idea and a very nice kind of competition, Christian. But 59 submissions for css3 animations aren’t a lot. But less participants, means a bigger chance to win something ;o)

    June 27th, 2011 at 07:42

  14. De Jonge

    I have a suggestion for a challenge.

    There are currently 372 games on html5-games.org and only 1 of these games is truly an “Escape The Room” type of game. Just 1 game is listed here:
    http://www.html5-games.org/index.php?category=Escape

    Two other (Adventure) games, The Secret of Grisly Manor and KnifeTank: The Hauntening, are somewhat “Escape” games. But not really.

    There are so many Flash escape games out there. They could be created with WebGL, CSS3, Canvas, SVG, and so on.

    I think it would make an interesting challenge because even people without artistic skills can create something interesting. They can basically create a challenging puzzle with certain open Web technologies and show off what is possible. Usually certain objects are hidden or need interaction with other elements.

    June 28th, 2011 at 08:00

  15. amebe

    I like it

    July 2nd, 2011 at 05:46

  16. ariel

    I have a suggestion for a challenge.

    There are currently 372 games on html5-games.org and only 1 of these games is truly an “Escape The Room” type of game. Just 1 game is listed here:
    http://www.html5-games.org/index.php?category=Escape

    Two other (Adventure) games, The Secret of Grisly Manor and KnifeTank: The Hauntening, are somewhat “Escape” games. But not really.

    There are so many Flash escape games out there. They could be created with WebGL, CSS3, Canvas, SVG, and so on.

    I think it would make an interesting challenge because even people without artistic skills can create something interesting. They can basically create a challenging puzzle with certain open Web technologies and show off what is possible. Usually certain objects are hidden or need interaction with other elements.

    July 3rd, 2011 at 03:41

Comments are closed for this article.