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.

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

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.

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.