Mozilla

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.

20 comments

Comments are now closed.

  1. Sean Hogan wrote on June 7th, 2011 at 18:34:

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

    1. Jay Patel wrote on June 9th, 2011 at 14:34:

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

    2. leo wrote on June 28th, 2011 at 23:41:

      cool!

  2. Dave Poyzer wrote on June 9th, 2011 at 10:32:

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

    1. Jay Patel wrote on June 9th, 2011 at 16:12:

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

  3. Sean Hogan wrote on June 9th, 2011 at 15:49:

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

  4. Jay Patel wrote on June 9th, 2011 at 15:53:

    @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.

  5. Richard wrote on June 19th, 2011 at 07:58:

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

    1. Timothy wrote on June 22nd, 2011 at 04:10:

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

  6. calvin wrote on June 22nd, 2011 at 09:55:

    my mozilla can not see photo

  7. DGASKINS1 wrote on June 22nd, 2011 at 10:50:

    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/

  8. Kiel wrote on June 22nd, 2011 at 14:10:

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

  9. whoever wrote on June 23rd, 2011 at 09:27:

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

  10. mielnka wrote on June 24th, 2011 at 11:06:

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

  11. john wrote on June 24th, 2011 at 14:09:

    Updated the new version, Awesome!

  12. Narasimharao Chirunomula wrote on June 25th, 2011 at 10:59:

    Interesting it seems.

  13. CSS Webstandard-Blog wrote on June 27th, 2011 at 07:42:

    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)

  14. De Jonge wrote on June 28th, 2011 at 08:00:

    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.

  15. amebe wrote on July 2nd, 2011 at 05:46:

    I like it

  16. ariel wrote on July 3rd, 2011 at 03:41:

    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.

Comments are closed for this article.