Mozilla

Demo Studio Articles

Sort by:

View:

  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. Calculated drop shadows in HTML5 canvas

    One of the best new features of HTML5 when it comes to visual effects is the canvas element and its API. On the surface, it doesn’t look like much – just a rectangle in the page you can paint on and wipe. Much like an etch-a-sketch. However, the ability to transform, rotate and scale its coordinate system is very powerful indeed once you master it.

    Today I want to quickly show how you can do (well simulate) something rather complex with it, like a calculated drop shadow on an element. To see what I mean with this, check out the following demo which is also available on the Demo Studio:


    See animated version on JSFiddle

    (This is using JSFiddle to show you the demos, so you can click the different tabs to see the JavaScript and CSS needed for the effects. All of the demos are also available on GitHub.)

    As you can see, the shadow becomes more blurred and less pronounced the further away the “sun” is from it. You can use the mouse to see the effect in the following demo:


    See mouse enabled demo on JSFiddle

    Let’s take a look how that is done. The first step is to have a canvas we can paint on – you do this simply by having a mouse detection script (which we used for years and years) and a canvas with access to its API:


    See step one on JSFiddle

    Click the play button of the above example and you see that you can paint on the canvas. However, the issue is that you keep painting on the canvas instead of only having the orb follow the cursor. To do this, we need to wipe the canvas every time the mouse moves. You do this with clearRect()


    See step two on JSFiddle

    Running the above example now shows that the orb moves with the mouse. Cool, so this is going to be our “sun”. Now we need to place an object on the canvas to cast a shadow. We could just plot it somewhere, but what we really want is it to be in the middle of the canvas and the shadow to go left and right from that. You can move the origin of the canvas’ coordinate system using translate(). Which means though that our orb is now offset from the mouse:


    See step three on JSFiddle

    If you check the “fix mouse position” checkbox you see that this is fixed. As we move the coordinate system to the half of the width of the canvas and half of its height, we also need to substract these values from the mouse x and y position.

    Now we can draw a line from the centre of the canvas to the mouse position to see the distance using c.moveTo( 0, 0 );c.lineTo( distx, disty ); where distx and disty are the mouse position values after the shifting:


    See step four on JSFiddle

    In order to find out the distance of the shadow, all we need to do is multiply the mouse coordinates with -1 – in this demo shown as a red line:


    See step five on JSFiddle

    This gives us a shadow distance from the centre opposite of the mouse position, but we don’t want the full length. Therefore we can apply a factor to the length, in our case 0.6 or 60%:


    See step six on JSFiddle

    Now we are ready for some drop shadow action. You can apply shadows to canvas objects using shadowColor and its distance is shadowOffsetX and shadowOffsetY. In our case, this is the end of the red line, the inversed and factored distance from the mouse position to the centre of the canvas:


    See step seven on JSFiddle

    Now, let’s blur the shadow. Blurring is done using the shadowBlur property and it is a number starting from 0 to the strength of the blur. We now need to find a way to calculate the blur strength from the distance of the mouse to the centre of the canvas. Luckily enough, Pythagoras found out for us years ago how to do it. As the x and y coordinate of the mouse are the catheti of a right-angled triangle, we can calculate the length of the hypothenuse (the distance of the point from the centre of the canvas) using the Square root of the squares of the coordinates or Math.sqrt( ( distx * distx ) + ( disty * disty ) ).

    This gives us the distance in pixels, but what the really want is a number much lower. Therefore we can again calculate a factor for the blur strength – here we use an array for the weakest and strongest blur blur = [ 2, 9 ]. As the canvas itself also has a right-angled triangle from the centre to the top edge points we can calculate the longest possible distance from the center using longest = Math.sqrt( ( hw * hw ) + ( hh * hh ) ) where hw is half the width of the canvas and hh half the height. Now all we need to do is to calculate the factor to multiply the distance with as blurfactor = blur[1] / longest. The blur during the drawing of the canvas is the distance of the mouse position multiplied with the factor or currentblur = parseInt( blurfactor * realdistance, 10 );. We disregard blur values below the range we defined earlier and we have our blurred shadow:


    See step eight on JSFiddle

    In order to make the shadow weaker the further away the mouse is we can use the alpha value of its rgba() colour. The same principle applies as with the blur, we set our edge values as shadowalpha = [ 3, 8 ] and after calculating them from the distance we apply their inverse as the alpha value with c.shadowColor = 'rgba(0,0,0,' + (1 - currentalpha / 10) + ')';. This blurs and weakens the shadow:


    See step nine on JSFiddle

    You can do a lot more with this, for example we could also scale the sun orb the further out it gets or use a second shape to resize and blur it. You can also go completely overboard.

    Found a way to optimise this? Tell us about it!

  3. 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 http://twitter.com/codepo8 clicking my profile in Twitter will get you to http://twitter.com/#!/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.

    Resources:

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

  4. HTML5 and the web of tomorrow – live from Web2Day in Nantes, France

    I am currently here in Nantes, France at the Web2Day conference giving a talk on the topic of HTML5 and how it affects the audience (consisting of business people, startups, managers and a few developers. The slides of the talk are available Slideshare:

    The talk was streamed live via UStream and the recording is available (as a – gasp – Flash embed – we know, so no need for comments like “isn’t it ironic that an HTML5 talk…” unless you want to tell UStream that):

    Here are a few of the links I talk about to try out for yourself:

  5. 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
    BATTLEFIELD CSS3
    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.

    Runners-up:
    Auto-run photo album
    BATTLEFIELD CSS3

    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.

  6. Show off your HTML5 skillz with Demo Studio!

    Are you on the leading edge of Web technology? Do you want to show the world what you and the Web can do?

    New technologies introduced in the latest Web standards like HTML5 are enabling rich experiences on the Internet that were not possible even just a year ago. While many websites continue with the tried and true, some are beginning to experiment with new features and functionality. And then there are Web developers who are pushing the limits of modern Web browsers like Firefox 4 to pave the way for the future. If you’re one of them, Demo Studio is your place for sharing your most innovative work.

    We recently launched the Web O’ Wonder website for consumers to experience some of what’s possible with Firefox 4. Those demos are a great start to showcasing the power of the Web, but the latest Web standards and open technologies make possible so much more. So let those demos inspire you to create even more amazing ways for people to experience the Web. Help us build a collection of the best demos on the Web at Demo Studio.

    Do you have some awesome code that shows off the latest capabilities of HTML5, CSS3 and JavaScript? We invite you to join Demo Studio on MDN to contribute your demos and help everyone learn more about the Web through leading edge examples of what is possible today and a preview of things to come. Become an MDN member and check out Demo Studio today!

  7. MDN downtime on May 8th, 2012

    Update 2012-05-08: Thanks to last-minute magic by Mozilla IT, MDN won’t be completely unavailable after all. However, it will be running on a single virtual machine rather than three physical servers, so expect worse than usual performance during the time frame described below.

    Mozilla Developer Network will be down for maintenance and completely unavailable for approximate eight hours on Tuesday, May 8th, 2012, starting at 15:00 UTC (Tue 17:00 CET, Tue 11:00 US-EDT, Tue 8:00 US-PDT). It should be back online by 00:00 UTC on Wednesday May 9th (Wed 02:00 CET, Tue 20:00 US-EDT, Tue 17:00 US-PDT).

    During this time, the site will not be available for viewing or editing, so please make sure to save all your edits and be prepared in advance — maybe go outside and get some fresh air — MDN will be back before you know it.

    Meanwhile, here are some alternative resources:

    Open Web standards:

    Mozilla stuff:

    • Mozilla wiki has all kinds of information related to the Mozilla project
  8. Congrats to our August Dev Derby winners!

    For our August Dev Derby, we decided to see what developers could do with the History API.

    We had 11 demos submitted and it was interesting to see how the History API creates new ways to interact with Web content.

    After all the votes were in, we had our August Dev Derby winners!
    August Dev Derby Winners - History API

    1st Place: HTML5 Drawings by Cory Gackenheimer
    2nd Place: Fly, fly! by Michal B.
    3rd Place: Media Memory by Ian Lunn

    Runners-up:
    History Image Gallery
    HTML5 Address Bar Video Status

    Thanks to everyone that participated in the August Dev Derby… if you want to experiment with Geolocation, you have one more day to join the September Dev Derby.

    Otherwise, October is going to be an amazing month as we explore the possibilities with CSS Media Queries. Whether you’re on a desktop, tablet or mobile phone… show us what you can do to bring the Web to devices of all sizes.

  9. Congrats to our October Dev Derby winners!

    Responsive design is more important than ever as people experience the Web on a variety of devices. Web developers can now take advantage of CSS Media Queries to build sites and applications that can be viewed on different screen sizes. So we decided to focus on that for the October Dev Derby.

    For this challenge, developers submitted 15 demos to show what you can do with CSS Media Queries. Check them out so see how they present unique styles and layouts in response to changes in viewing area.

    It was a fairly close race, so join us in congratulating the winners circle:
    October Dev Derby winners - CSS Media Queries

    1st Place: CSS3 Cherry Blossom – Media queries by elufo
    2nd Place: Santa’s Media Queries by tuxie
    3rd Place: Too many fish is the sea by michal.b

    Runners-up:
    Responsive 3D-Models For Any Device
    Spriting with CSS Media Queries

    Thanks to everyone that participated in the October Dev Derby! Only a couple of days left to participate in the November Dev Derby, so get your Canvas demos in now. Otherwise, start experimenting with IndexedDB for December.

    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!

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

    Runners-up:
    Geosocial
    Geoapp

    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!