Challenge Articles

Sort by:


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

  2. Making history with the August Dev Derby

    It is time to announce another month’s Dev Derby and this August we want you to play with the History API. The History API is a much needed piece of the puzzle of creating modern web applications and here is why:

    Links are good, they make the web work

    The web is made up from sites linking to each other. You are on some site and read an HTML document, you hit a link or submit a form and the browser redirects you to another page. This is great as it allows for a few things:

    • You always get a unique address you can bookmark and send to your friends to see the page you were on
    • You can use the browser’s back button when you did something wrong and get back to where you were before
    • Search engines love links and following them through your site

    Why load a whole page when only a small bit changes?

    Of course there are some annoyances with that, mainly that you need to leave the page and download a full new document and its linked resources every time to perform a simple action. As this took too long even in the dark past of the web we found workarounds like frames which only loaded part of the site rather than the whole document. This broke the bookmarking and going back in history bit for the first time. The other big thing of course was to make Flash sites bookmarkable and allow for using the back button in them (you might remember JavaScript confirm boxes popping up saying “do you really want to leave this page?”).

    When AJAX came around we totally killed the bookmarking and history of the browser. This was a problem as our visitors have already been conditioned to hit the back button every time something goes wrong (admit it, you also found yourself reloading or hitting back in GMail one time or another). We needed a fix for that. As far as I remember Mike Stenhouse was the first to propose a fix in 2005 using the fragment identifier of the URI to store information and a hidden iframe element to seed the history. This fix got wrapped into several libraries like the YUI history manager and the jQuery History plugin.

    Breaking the web with “hashbang URLs”

    The problem of broken links and browsing session histories escalated when some sites like Twitter and Gawker media discarded real URLs for hashbang URLs. So instead of reaching me at clicking my profile in Twitter will get you to!/codepo8. As Twitter is an app that uses a lot of JavaScript, it was deemed more efficient to use the latter to navigate – all Twitter does is load the new content of my profile via JavaScript. This saves them a lot of traffic, but also makes the links dependent on JavaScript which means search engines don’t follow them. In Twitter’s case this is not an issue but when Gawker moved all his blogs to a format using hashbangs rather than reloading the page, a simple JavaScript error in a different script caused a major outage on a lot of blogs. But Hashbang URLs became something people really wanted to have to create fast loading apps and pages instead of reloading the page over and over.

    Hashbang URLs are brittle to say the least and a lot of people voiced concerns about them. Not all user agents on the web have JavaScript enabled, which means your site can’t even be reached by them. This includes search engine spiders which is why Google set up a proposal how to make Ajax sites crawlable even throwing out a whole spec. As an aside, the Facebook vanity URLs also redirect with JavaScript, which is why mine is “document.location.href”.

    The solution: History API and server redirects

    So instead of using hashbangs and break the web and very basic browser usage patterns we now have the History API in HTML5. It allows you to dynamically change the URL in the browser toolbar and add to its history without reloading the page. You get the best of both worlds – you do atomic updates in the page and you leave real, working URLs behind for the user to go to, bookmark and send to friends. The History API is in use by quite a few major sites, Facebook allows for back button use and Flickr uses it in their lightbox view. The coolest implementation however is GitHub and their Tree Slider:

    Isn’t that slick? You navigate the whole page, it loads in milliseconds rather than seconds and you can hit the back button or copy and paste the URL any time you want.

    Now it is your turn, show us what you can do with the History API! Here are some resources to read up on.


    Ladies and gentlemen, start your editors and show us how to make History!

  3. Talking about HTML5 games development at MIT in Boston

    As part of our university outreach programme, a few Mozilla people and volunteers went to Boston last week to give a series of lectures on web technologies for games development.

    During the week we covered topics like WebGL for 3D development, basics of JavaScript, debugging and performance, canvas development, offline development and local storage and multimedia on the web. We’ll make these slides available in the comments to this blog post.

    The slides of the multimedia talk are available here:

    The topics covered were:

    • Quick history of Multimedia on the web
    • Annoyances with Flash
    • HTML5 audio and video
    • Codecs and conversion
    • Embedding video and audio
    • Controlling video
    • Transforming video
    • Making realtime changes
    • Awesome new audio possibilities

    We showed and explained a few demos like:

    I also provided extensive notes for the whole talk with code examples on my own blog.

  4. Congratulations to our June Dev Derby winners!

    We kicked off our series of monthly developer challenges in June to see what Web developers could do with CSS3 Animations. Our first ever Dev Derby was a huge success with almost 30 entries and a variety of demos that brought action to the Web without JavaScript. The results have been awesome!

    Early fan favorites included Rofox CSS3 and CSS Nyan Cat, which remain among the most viewed on Demo Studio.

    While all the demos were amazing, we had a tough task in narrowing down the submissions to 5 finalists based on our judging criteria. After careful review and feedback, the following demos surfaced as candidates for our final round of voting:

    Animated menu icons
    Auto-run photo album
    CSS Tricks
    Plan B – Retro Demo

    With those 5 demos left in the running, we brought in our expert judges and a few members of the Mozilla team to vote on the finalists. Judges rated each demo on a scale of 1 – 5 across the following 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?

    It was a close race and we’re excited to announce that the winners of the June Dev Derby are:

    1st Place: CSS Tricks by Mircea Piturca.
    2nd Place: Animated menu icons by Koen Hendrix.
    3rd Place: Plan B – Retro Demo by matt64.

    Auto-run photo album

    Thanks to everyone that submitted their awesome demos for the June Dev Derby. Up next we have HTML5 video for July, History API for August and Geolocation for September. We look forward to seeing even more great submissions for July and beyond! Hack on.

  5. Push the Web Further at Hackanooga

    If you enjoy pushing the limits of the open web platform, we want you to join us September 14-16 in The Gig City (Chattanooga, Tennessee) for a weekend of good food, good friends, and—most importantly—a unique opportunity to play on a citywide, 1 gigabit per second network.

    What happens when you hack with WebGL, WebRTC, Websockets and video—the coolest, newest open web technologies—on a network 200 times faster than the typical residential internet connection? What kinds of apps become possible?

    Travel grants

    If you’re already sold, head on over and apply. We’re awarding a number of grants for you to hang and hack in the American south. Your flight, meals, and accommodation will be paid for. And you’ll leave having made something cool—something only possible on a gigabit network.

    Just take 5 minutes to fill out this form, and we’ll get back to you by August 21st.

    If you need some convincing, read on.

    No more constraints

    If you’ve ever written software for mobile or web, you know all about constraints.

    Sometimes those constraints are plain as day. You can’t do heavy computation on a mobile device, because they’re relatively slow and you’ll quickly drain the battery. Apps written for mobile should be lean.

    Sometimes the constraints are more implicit. They’re just baked into your understanding of how development works.

    In a web app, you have a client and server. The connectivity between client and server is scarce, so you want to minimize the data traveling across the network. You don’t want your users sitting around waiting for an app to load, or for a video to buffer. Apps written for web should be frugal with data transfer.

    But if all of your users are on fast networks—think 100Mbps to 1Gbps—these sorts of constraints start to matter less.

    On a superfast network, it doesn’t really matter where the data lives in the network. It can travel so fast that it’s virtually instantaneous. It can travel faster than your computer can write the data to your hard drive.

    On a superfast network, it also doesn’t matter where the computation happens. It’s already the case with cloud computing that the very computation-heavy tasks and storage take place remotely. Your computer is just a thin client to the network. Think about what that would mean on a gigabit network—your entire operating system, identity and filesystem could be rapidly accessed from anywhere on the network.

    Real-time crunching of very heavy data could happen anywhere on the network. Anything, really—could happen anywhere, on the network.

    Hacking for public benefit

    OK, so what? New paradigms are fun to think about, but none of this matters until it has an impact on real people.

    That’s what US Ignite is all about—showing what kinds of apps are only possible on gigabit networks. Demonstrating that if the U.S. becomes more competitive in broadband & networks, people will be happier, healthier and more well informed.

    On the ideas front, we have a massive brainstorm underway around the question of “what’s possible with gigabit networks.”

    And on the coding front, we’ve already held the first Ignite hack days in San Francisco, with some interesting results. Hackanooga is already gearing up to be a blast.

    How it will work

    We have room for 80 participants. This is not a spectator sport—everyone who attends must contribute to coding, designing, and testing real prototype applications.

    Between now and the event, we’ll work together to form teams around specific app ideas. We’ll try to pick app ideas on which we can make substantial progress over the course of the weekend. If you want to work on a specific type of problem, or a specific technology, let us know.

    We’ll prepare your team as much as possible, rounding up resources, shoring up expertise, and connecting you with local institutions as appropriate.

    When you arrive, you’ll meet the whole Hackanooga class of 2012; eat, drink and be merry. Then, we’ll get out of your way so you can make.

    You’ll have access to wired, 1Gbps connectivity, local cloud infrastructure, and lots of coffee. We’ll show off all the results at the end.

    Work from this weekend can evolve to become submissions in the Mozilla Ignite apps challenge, with nearly $500k in awards for your prototype apps. It’s a great way to meet team members & partner institutions to get a head start on the challenge.

    Apply now!

    We’ll be flying around 10 participants from all over to attend Hackanooga. If you’re interested, apply here!

    Not only is Chattanooga an awesome place to visit, but you’ll be charting a far-out future for the web, pushing today’s technologies on tomorrow’s networks.

    If you have any questions, shoot us an email at ignite AT mozillafoundation DOT org, and make sure to follow @mozillaignite for the latest news.

  6. MarbleRun, an HTML5 Game

    Take the HTML5 Canvas element, a Javascript library to do the physics (box2d), add a nice design, a social touch, and you have an awesome HTML5 Game called MarbleRun!

    MarbleRun was the winner of the last Mozilla Game On Challenge, among other exciting HTML5 games (check them out), and had been added to Web O’ Wonder.

    The authors of MarbleRun visited us a couple of weeks ago and gave the following talk about the story of their game:

  7. Located: Winners of the September Dev Derby on Geolocation.

    With more people going mobile and taking the Web with them, we thought Geolocation was a great topic for the September Dev Derby.

    Web developers explored a number of ways to bring your physical location into the Web experience and we had 16 demos submitted for the Dev Derby.

    Voting was tough this month, but once the votes were counted, we had our winners circle:
    Winners of the September Dev Derby - Geolocation

    1st Place: Urban arteries by Jaume Sánchez aka spite
    2nd Place: I Need A… by David aka d-b-f
    3rd Place: Find Street Art by Aaron Has


    Thanks to everyone that participated in the September Dev Derby and congratulations to the winners! A special shout out to Jaume for taking 1st place after submitting amazing demos for the past three Dev Derbies. Check out spite’s MDN profile to see what he’s done in the past.

    NOTE: We recently updated our Dev Derby rules to allow developers to participate in multiple contests until they win 1st place. That means if you’ve submitted awesome demos and come up short in the past, you still have a chance to win that top spot in future Dev Derbies… so keep those demos coming!

    If you’re working on CSS Media Queries, you have a few more days to join the October Dev Derby.

    Or get ready for the joy of painting in the November Dev Derby with Canvas. We’re looking forward to seeing some creative demos next month. So hack on!

  8. Congrats to our July Dev Derby winners on their amazing HTML5 video demos!

    We shifted gears for July and invited Web developers to have some fun with HTML5 video for Dev Derby.

    We had 15 awesome demos submitted and while there was a lot of entertainment and innovation happening, we had to narrow them down to 5 finalists:

    Facial Recognition and Analytics with HTML5’s Video Tag
    HTML5 Video Voting
    HTML5 VJing Tool
    jQuery VideoBG
    Punch the TV!

    There are so many cool things you can do with HTML5 video on the Web, and our winners circle definitely reflects the possibilities. So join us in congratulating our July Dev Derby winners!

    MDN July Dev Derby winners for HTML5 video

    1st Place: HTML5 Video Voting by Jordan Humphreys
    2nd Place: HTML5 VJing Tool by spite
    3rd Place: Facial Recognition and Analytics with HTML5’s Video Tag by dsg (@dsg: Please update your profile with an email address so we can contact you! Thanks.)

    jQuery VideoBG
    Punch the TV!

    Thanks to everyone that submitted their HTML5 video demos for the July Dev Derby. On to the next race!

    Right now, there are only a few days left to submit your History API demo for August. And coming up next we have Geolocation for September and CSS Media Queries for October. So start experimenting and hack on.

  9. Enter the Firefox Mobile Add-ons Cup

    This is a cross-post from the mobile team to invite web developers interested in mobile or add-ons to participate in the Mobile Add-ons Cup.

    The Firefox Mobile Add-ons Cup has arrived!

    Develop a mobile add-on for Firefox and showcase your innovation to millions of mobile users. We’re looking for compatible and innovative add-ons to extend Firefox on the Android and Maemo mobile platforms.

    We’re looking for the best example in each of the categories below:

    * Sports/Games
    * Commerce/ Shopping
    * Geolocation
    * Productivity
    * Sharing/Social
    * Novelty/Innovation

    We invite developers of all experience levels to participate in creating awesome add-ons for Firefox mobile. You’ll be rewarded with fantastic prizes and tons of exposure between now and January 7, 2011 when the contest wraps. Enter now and start creating your add-on today!

    But Wait, There’s More!
    We’ve got a serious panel of judges that include industry experts and mobile visionaries that will be judging the submissions and awarding a winner in each category. The prize for each category winner receives:

    * $1000 in cash
    * Android or Maemo phone of your choice
    * Placement on the Firefox for mobile Start Page
    * Showcased in a Featured Add-ons video distributed across Mozilla channels
    * Blog post and Rock your Firefox spotlight

    Of the 6 finalists, judges will also choose a Best in Show grand prize winner who will receive the above prizes, plus a full conference pass to Mobile World Congress 2011, plus 4 nights accommodation in Barcelona!

    Early Bird Challenge
    The Firefox Mobile Add-on Cup is packed full of exposure and prizes for add-on developers, but we have one more. If your add-on is submitted by December 17, we’ll send you a limited edition Firefox 4 Beta shirt!

    Check the Cup site for more information, rules and resources to help you get started. Good luck!