Mozilla Demo Studio presents

Dev Derby

Show us what you can do with WebSockets API

Join the Dev Derby now and submit your demo to win an Android phone or other prizes.

Submit Your Demo

Upcoming Challenges for 2012

  1. WebSockets API

    May

    send() us your best

    Current Derby

    With the Websocket API and protocol, you can open a two-way channel between the browser and a server, for scalable and real-time data flow. No more server polling!

  2. No JavaScript

    July

    Code with no.js!

    Creating rich user experiences for the Web has never been easier. Today's open Web standards put some of the most powerful features right at your fingertips. Animate pages with CSS, validate user input with HTML, and more. What else can you do without JavaScript?

  3. WebGL

    June

    The Web: Now in amazing 3D!

    WebGL brings the power of OpenGL, for creating interactive 3D graphics, to the Web, with no plug-ins required.

WebSockets API

May

send() us your best

With the Websocket API and protocol, you can open a two-way communication channel between the browser and a server. This lets you send messages to the server and receive event-driven responses in real time, all without server polling. Websockets are simple, scalable, and future-proof. Websocket.org even argues that Websockets are the "next evolutionary step in web communication."

Not excited yet? This is about more than just sending messages—it's about highly interactive experiences. Last month, Little Workshop and Mozilla collaborated to create BrowserQuest, a multiplayer online game that uses Websockets at its core. As if that weren't enough, Mozilla's very own Rob Hawkes created Rawkets, a multiplayer space shooter that also uses Websockets.

Of course, you can't do much with Websockets unless you have a server to communicate with. Thankfully, there are many free Websockets servers available on the web, including Pusher, Nodejitsu, and Beaconpush. If you prefer, you could even set up your own Websockets server.

What can you create with the Websocket API and protocol? The next BrowserQuest? A better Rawkets? Show the world this month the May Dev Derby!

Submit your demo for the May Dev Derby today!

A summary of the rules can be found below. For a complete look at the terms of the contest please see the Dev Derby Contest Official Rules.

  • Almost anyone can enter (see the rules for exceptions).
  • There will be a new contest every month.
  • Your entry must meet certain criteria; see the rules for the overall criteria and the Current Challenge section for any special criteria for each contest.
  • Each contest runs from the first day of the month to the last day of the month (based on US Pacific time).
  • Entries will be judged by a panel of qualified reviewers, who may or may not take into account how many “likes” your entry receives.
  • The winners of each month's contest will be announced by the 20th of the following month.
  • You can't win more than once in the same calendar year.
  • Please read the Dev Derby Contest Official Rules before submitting your entry.

Entries will be reviewed by a panel of qualified judges, including members of the Mozilla team and outside experts. We will rate the demos across 4 dimensions:

  • Technology – Does the demo showcase the power of open Web technologies?
  • Originality – How innovative and unique is the demo?
  • Aesthetics – How good is the visual design and interaction experience?
  • Practicality – How useful is this demo in enhancing the Web today?

The judges will use all four dimensions in scoring each entry, and any additional criteria specified for a particular contest.

The judges may also take into account how many “likes” the entries have received from the community. So make sure to share your demo with others and encourage them to visit Dev Derby to “vote.”

Current Judges

  • Guillermo Rauch

    CTO, LearnBoost

    Guillermo Rauch is the creator of several popular open-source JavaScript libraries like Socket.IO and MongooseJS. He's the author of Wiley's Smashing Node.JS, a book about Node.JS and JavaScript. In the past he was a core developer of MooTools, the client-side JavaScript library. He's the co-founder and CTO of LearnBoost, an education software company based in San Francisco.

  • Peter Lubbers

    Senior Director Technical Communication, Kaazing

    Peter lives and breathes HTML5. Even his car has the California "HTML5" license plate. Peter is the co-author of Pro HTML5 Programming (Apress, 2011) and the co-founder of the San Francisco HTML5 User Group, the largest HTML5 User Group in the world. Peter frequently speaks at web events and teaches cutting-edge HTML5 training courses all over the world. Peter oversees all aspects of documentation and training at Kaazing, a start-up company specialized in building a high-performance HTML5 WebSocket platform that revolutionizes web communication and the first company to offer HTML5 training worldwide.

  • Rob Hawkes

    Technical Evangelist at Mozilla

    Rob thrives on solving problems through code. He has an addiction to visual programming and can’t get enough of HTML5 and JavaScript. He’s a Technical Evangelist at Mozilla and leads the gaming side of their work within the developer community.

Past Judges

  • Remy Sharp

    MasterChef of code and cookies

    Short, ginger, British. Built a few things: jsbin.com, html5demos.com, remote-tilt.com, responsivepx.com, nodemon, inliner.leftlogic.com, jqueryfordesigners.com, mit-license.org, snapbird.org, jsconsole.com. Runs a conference, wrote half a book.

  • Chris Coyier

    Lead Hucklebucker

    Chris is a web worker currently working for Wufoo & SurveyMonkey. He blogs about all things web at the community site CSS-Tricks. He co-authored the book Digging Into WordPress and talks shop about the web at the aptly named ShopTalk podcast. You can easily get him excited by talking about HTML, CSS, JavaScript, banjos, camping, or serialized sci-fi television shows.

  • Chris Heilmann

    Principal Evangelist at Mozilla

    Chris Heilmann is the principal evangelist for Mozilla and has been blogging on web technologies for the last 6 years. Before Mozilla he was part of the Yahoo Developer Network and before that he spent several years developing large web sites and apps. Originally Chris was a radio journalist and newscaster. Chris lives in England but travels most of the time. His blog mostly contains his presentations, code examples about upcoming technologies and tips and tricks on web development of all kinds.

  • Mike Davies

    Web Developer, Retro-gamer

    Mike Davies is a Senior Web Developer at LOVEFiLM based in West London. He has over 10 years of commercial web development experience, including a stint at Yahoo! Europe. One of his notable career achievements was his lead-developer role for Legal & General's 2005 commercially successful accessibility redesign. Mike is passionate about high-quality web development, and Lords of Midnight on the ZX Spectrum. He also worries about online privacy.

  • Ryan Grove

    YUI Engineer at Yahoo!

    Ryan Grove works on YUI at Yahoo!. His love of JavaScript is surpassed only by his love of pie. He lives the dream of the 90s in Portland, Oregon, where the weather usually provides a perfect excuse to stay inside eating pie and writing code.

  • Jeff Malkin

    President, Encoding.com

    Jeff Malkin is a fearless entrepreneur with a proven track record in growing technology startups in the Internet and mobile sectors. Jeff has guided Encoding.com, a Gartner “Cool Vendor 2011,” to its position as the world's largest video encoding service for web and mobile video, with over 2,000 clients and more than 10 million encodes. Jeff was recently named a Streaming Media All Star for 2011.

  • Divya Manian

    Web Opener at Opera, Open Web Vigilante

    Divya Manian is a Web Opener for Opera Software in Seattle. She made the jump from developing device drivers for Motorola phones to designing websites and has not looked back since. She takes her duties as an Open Web vigilante seriously which has resulted in collaborative projects such as HTML5 Readiness and HTML5 Boilerplate.

  • Ethan Marcotte

    Web designer, author

    Ethan Marcotte is a web designer & developer who cares deeply about beautiful design, elegant code, and the intersection of the two. Over the years, Ethan has enjoyed working with such clients as the Sundance Film Festival, Stanford University, New York Magazine and The Today Show. He swears profusely on Twitter, and would like to be an unstoppable robot ninja when he grows up. His most recent book is Responsive Web Design.

  • Lea Verou

    Web developer, Co-founder of Fresset Ltd.

    Lea Verou is the lead web developer and designer of Fresset Ltd, which she co-founded in 2008. Fresset owns and manages some of the largest greek community websites. Lea has a long-standing passion for open web standards, especially CSS and JavaScript. She loves researching new ways to use them and shares her findings through her blog, leaverou.me. She speaks at a number of the largest web development conferences and writes for leading industry publications. Lea also co-organized and occasionally lectures the web development course at the Athens University of Economics and Business.

  • Chris Wanstrath

    Developer, GitHub co-founder

    Chris Wanstrath lives in San Francisco and co-founded GitHub. He likes HTML, guitars, and coffee.

  • Ben Ward

    Front-end developer at Twitter

    Ben Ward is a front-end developer on Twitter's Platform team. He works on products that put Twitter into other contexts all around the web and in applications. Ben cares a great deal about building on robust content with progressive enhancement and designing for failure. He's written at length about and in awe of the linkable, resource-based architecture of the web. He's also a semantics nerd, administrating and editing specifications at microformats.org.

Previous Dev Derby Challenges

  • April 2012 Audio

    The HTML5 audio element lets you embed sound in webpages without requiring your users to rely on plug-ins.

  • March 2012 CSS 3D Transforms

    CSS 3D Transforms extends CSS Transforms to allow elements rendered by CSS to be transformed in three-dimensional space.

  • February 2012 Touch Events

    Touch Events help you make websites and applications more engaging by responding appropriately when users interact with touch screens.

  • January 2012 Orientation

    Orientation features in HTML5 access the motion and orientation data of devices with accelerometers.

  • December 2011 IndexedDB

    IndexedDB lets web applications store significant amounts of structured data locally, for faster access, online or offline.

  • November 2011 Canvas

    Canvas lets you paint the Web using JavaScript to render 2D shapes, bitmapped images, and advanced graphical effects. Each <canvas> element provides a graphics context with its own state and methods that make it easy to control and draw in.

  • October 2011 CSS Media Queries

    CSS Media Queries allow Web developers to create responsive Web designs, tailoring the user experience for a range of screen sizes, including desktops, tablets, and mobiles.

  • September 2011 Geolocation

    With Geolocation, you can get the user's physical location (with permission) and use it to enhance the browsing experience or enable advanced location-aware features.

  • August 2011 History API

    The History API in modern browsers enables live changes to the document without breaking the back button and allows apps to be bookmarked.

  • July 2011 HTML5 <video>

    The HTML5 <video> element lets you embed and control video media directly in web pages, without resorting to plug-ins.

  • June 2011 CSS3 Animations

    CSS3 Animations let you change property values over time, to animate the appearance or position of elements, with no or minimal JavaScript, and with greater control than transitions.

Previous Winner

Paperfold CSS

Paperfold CSS mrflix

Fold divs like paper

See the Demo

Prizes

Android mobile device
  1. Android mobile device

    Winner gets an Android mobile device from Motorola or Samsung.

  2. Rickshaw laptop bag

    Runner-up gets a hand-crafted laptop messenger bag from Rickshaw.

  3. MDN t-shirt

    3rd place gets a limited edition MDN t-shirt to show off their geek cred.

Resources