MDN/Archives/DemoRoom

MDN Demo Room (+ Firefox 4 demos microsite)

It has become clear that having a few blog posts and tutorials on the Hacks blog to share cool demos with developers and the community is not enough. We need a centralized library of demos, with access to the source and ways to share, hack and contribute.

A lot of work that Paul Rouget has already done, combined with the new demos under development for the Firefox 4 launch, presents an opportunity to build an MDN Demo Room (DR) to showcase demos and create a community-driven demos application to encourage hacking and sharing of HTML5, CSS3 and JavaScript demos.

There will be three major components to the DR:

• Gallery/Viewer
  • display demos as thumbnails or live previews
  • click on them to see full demo
  • encourage voting (like/thumbs-up), viewing source, and discussing in forums
  • provide links to docs to help understand the technologies
• Submission Form
  • enable community to submit their own demos
  • require a minimum set of information/details as a filter and to ensure good data for promoting, filtering, etc.
  • encourage self-policing with flags
• Editor [FUTURE]
  • allow community to make revisions of existing demos and resubmit their own versions.
  • integrate a cloud editor like skywriter (formerly bespin) or jsfiddle to make the code interactive.

Hosting Demos

We need setup the infrastructure for submitting, storing, updating, sharing and serving out demos. The idea being that we have all the demos in one place and multiple sites/galleries can access them for display... with the Firefox 4 demo microsite and the MDN Demo Room being the first two to use it.

• Demo submissions
  • A form that allows anyone to submit their demos to the db that includes:
    • Name, author(s), description, tags/technologies
    • Links to discussion, docs, blog posts, or other related external resources
    • Files needed to run demo

• Demo viewing

1. Thumbnail and list views with search and filtering
   1. See the demos as a matrix of thumbnails or a sortable list
   2. Allow filter by mobile or desktop + other various tags and keywords
   3. Make search a primary action to encourage discoverability
   4. Create both desktop and mobile CSS templates for optimal viewing
2. Enable developer engagement with forums integration and comments
   1. Each demo should have a discussion button that creates a new forum thread where people can talk about the demo
   2. Comments should be lightweight to allow for feedback (do we really need comments? Or will the forums thread be enough?)