Infrastructure woes

We had a snafu for a few days last week when a server crashed in the middle of a move of the DOM reference hierarchy, causing many DOM reference pages to apparently disappear. That situation has now been fixed.

We have a recurring issue with the wiki software, where the syntax highlighting extension fails to load, causing an error message to appear in place of code examples. While we wait for a patch to be backported by the vendor, we have a script in place that detects this situation and corrects it. While you might still occasionally see those error messages, they should be less frequent and persistent than previously.

Web standards docs

• Eric Bidelman updated the Mouse Lock API.
• Luke Crouch added an Apache example to Server-side access control.
• fusionchess added a compatibility workaround for the JavaScript JSON global object.
• Has Hillen expanded the ARIA technique article on Using the dialog role.
• Burak Yigit Kaya added a JSFiddle example to HTML in XMLHttpRequest.
• Gijs Kruitbosch added a compatibility table to window.frameElement.
• Jeremie Patonnier updated DOMParser to cover parsing HTML fragments.
• Eric Shepherd documented the DOM console and related objects.
• yyss translated a number of pages into Japanese, related to JavaScript typed arrays, full-screen mode, WebGL, and writing forward-compatible websites.

Mozilla-specific docs

• Wolfgang Germund updated nsIZioReader and nsIZipReaderCache.
• Sam Hanes updated Document Loading – From Load Start to Finding a Handler. The diagram in this article still needs to be updated.
• Anthony Hughes documented Merging the ESR branch.
• Nickolay Ponomarev added a list of mouse gesture events to Gecko-specific DOM events.
• Colby Russell expanded DOM Inspector internals.
• Eric Shepherd beefed up the coverage of the Web console.
• Sid0 update the article on Windows SDK versions.

(For those who don’t know what a doc sprint is, it’s a short period when we have a concentrated effort by a number of people to improve the documentation on MDN.)

You don’t have to write whole new articles (though that’s fantastic). You can also update existing articles, add code examples, or add browser compatibility info. Many articles are tagged as needing help.

You can participate from wherever you are. We use the #devmo channel on irc.mozilla.org to coordinate. See the planning page on the wiki to read further details and share your ideas.

There will be swag. Make a non-trivial contribution during the sprint, and you can get an MDN t-shirt (or other swag if you don’t want a t-shirt). Given the short notice, you might not be able to participate during the sprint. In that case, contact me on Twitter, and I’ll consider contributions made outside of the sprint time frame for swag giveaways as well.

Web standards docs

• Jean-Yves Perrier continues working through the CSS reference. Now up to the letter F (font-*)!
• Jesper Kristensen added a browser compatibility table to Media formats supported by the audio and video elements.
• Kevin Lim started pages for File APIs and created the reference docs for the FileSystem API (one of the File APIs). She also wrote the first draft of an expository article: Basic concepts about the filesystem API.
• Thomas Bilk created a page for HTML <nobr>.
• During the first “Mercredi Doc” session of 2012 at the Mozilla Paris office, several pages were translated into French:
  • Julien W translated JavaScript Shells.
  • Fred Bourgeon translated CSS animation and created a French version of the SeeCompatTable macro.
  • Timothée Carry-Caignon started translating How to write forward-compatible websites.
• During Mercredi Doc, Jeremie Patonnier also documented the SVG fill-opacity attribute.

Mozilla-specific docs

Eric Shepherd created an article on Updating add-ons for Firefox 10.

Thanks to everyone for their contributions in 2011, and we look forward to more improvements to the documentation on MDN in 2012.

Web standards docs

• Ryan Havvy added an example to Logical Operators in the JavaScript Reference.
• Jean-Yves Perrier considerably improved Using CSS transforms, and wrote an article on the CSS visual formatting model.
• Jeremie Patonnier created pages for DOM SVGTransform and SVGMatrix.
• fusionchess added examples for Using XMLHttpRequest and for Parsing and Serializing XML.
• Kevin Lim led a local doc sprint that focused on games, mobile, offline, and other stuff. Eric Bidelman, Ernest Delgado, Kathy Walrath, Andy Watson, Paul Irish, Jan Kleinert, Lilli Thompson, Ido Green, and Jed Hartman worked on:
  • HTML <bdo> (Jan)
  • IndexedDB (Ido)
  • Gamepad API(Lilli)
  • HTML input and HTML form (Kathy)
  • CSS text-transform and CSS text-shadow (Jed)
  • CSS box-sizing (Paul)
  • Application cache (Andy)
  • Using flexbox, HTML <track>, full-screen API, HTML <time>, canvas, and CSS Properties (Ernest)
  • Web workers, requestAnimationFrame, CSS calc, and HTML <style> (Eric)
  • And a bunch of other stuff.

Mozilla project docs

• Jeff Beatty continued improving the Localization Quick Start Guide
• Jesse Ruderman enhanced the landing page for Security
• gps wrote an article on Clang static analysis
• Jeff Walden started a page on the Mozilla Foundation Based on Templates (MFBT).

Thanks, everybody!

Weekly MDN “Mercredi doc” meetup in Paris

Jeremie Patonnier is organizing a weekly meetup to improve the French and English areas of MDN. It is held 7 to 9 pm, Paris time, on Wednesdays. You can join in face-to-face at the Mozilla Paris office, or participate remotely, in the #mozfr IRC channel. The meetings are conducted in French. The goals are:

• Increase the volume and quality of the documentation on MDN.
• Encourage newcomers to get involved by showing how easy it is to contribute to MDN.
• Have fun with other Mozillians

Be sure to contact Jeremie (@JeremiePat on twitter) if you plan to show up in person, as space in the Mozilla office is limited. The next meeting will be January 4th.

MDN site update

Luke Crouch blogged about the MDN 1.7 update.

Web standards docs

New pages!

Jeremie Patonnier continues charging through SVG DOM interfaces:

• SVGVKernElement
• SVGHKernElement
• SVGFontElement
• SVGMissingGlyphElement
• SVGGlyphElement
• SVGFontFaceElement
• SVGFontFaceSrcElement
• SVGFontFaceUriElement
• SVGFontFaceFormatElement
• SVGFontFaceNameElement
• SVGNumberList
• SVGAngle
• SVGRect
• SVGTransformList

Henri Sivonen wrote an article on HTML in XMLHttpRequest.

Updated docs

Marcoos updated document.importNode for DOM4, added browser compatibility tables to Node.parentNode, window.home and CSS :hover; and updated compatibility info on several other pages.

martijnetje added a compatibilty note about JScript to the String.substr.

fusionchess added examples for the JavaScript ‘for’ statement, for window.location, and for Using XMLHttpRequest.

Mozilla project docs

Kyle Huey updated the Windows prerequisites for the build instructions and the pymake page, and created a simplified XPCOM hashtable guide.

Jeff Beatty has been beefing up the information to assist Firefox localizers, such as the Localization Quick Start Guide.

Mark Banner updated the page on Thunderbird localization, and created one on productizing Thunderbird localizations.

Nicholas Nethercote wrote an article on Zombie compartments.

New staff

Long-time MDN contributor Jean-Yves Perrier has joined Mozilla’s Developer Engagement team as a technical writer, expanding the paid writing staff of MDN to three people. Located in Switzerland, he’ll continue working on docs for open Web standards and help keep MDN up to date with changes in Firefox. You’ll find Jean-Yves on IRC as teoli, and you can follow him on Twitter as @Teoli2003. Welcome!

As an extra bonus, we thought it would be fun to document the step-by-step development of the calendar and release it for you to re-use or get inspired by.

You can get a white-labeled version of the calendar on GitHub and there is a two-part step-by-step instruction how it was built available: Part 1 – Part 2.

It is an example of how to build something server-side (so you can’t cheat by setting your operating system calendar ahead), enhance it with JavaScript and make it smooth by using CSS transitions. This should work for everybody and by playing each technology to its strengths, the code is very small indeed.

Enjoy, and see you tomorrow and the day after, and the day after that and…

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:

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!

Web standards docs

New pages!

As the result of a discussion on the mozilla.dev.platform forum, Boris Zbarsky wrote an article on Writing forward-compatible websites, with contributions by Henri Sivonen and others. Discussion of and improvements to this article are ongoing.

Jeremie Patonnier created pages for several SVG DOM interfaces:

• SVGPathElement
• SVGTextElement
• SVGTspanElement
• SVGTrefElement
• SVGTextPositioningElement

Masayuki created pages for DOM CompositionEvent and various specific composition events.

David Bruant created a page for event.stopImmediatePropagation and wrote an article on Historical artifacts to avoid.

Help wanted!

It would be helpful to have an article about the Web standardization process, what the different spec draft levels are, and how web developers can decide when a new technology is stable enough to use and deploy. It could go under Web standards, which currently has some dated articles from the early days of Firefox.

Other doc updates

David Bruant expanded and added examples to DOM NodeList and the Javascript var statement.

Our friends at Google were busy, holding their own mini-docsprint:

• Eric Bidelman created an article on the Mouse Lock API, and improved window.requestAnimationFrame, window.navigator, and HTMLCanvasElement.
• Ernest Delgado added to Using full-screen mode and created document.mozFullScreen.
• Sam Dutton created a live example for CSS height.
• Meggin Kearney edited CSS pointer-events and restructured CSS transitions.
• Kevin Lim wrote a second draft of the Mouse Lock API, improved the HTML <track> element, and started a section on Optimizing canvas in the canvas tutorial.
• Kathy Walrath updated DOM Blob.

Mozilla project docs

The Mozilla coding style guidelines were updated by Jeff Walden, Benjamin Smedberg, and others.

MND infrastructure

Version 1.6 of MDN was launched. Luke Crouch blogged about the changes in 1.6.

Eric Shepherd created new templates to guide readers who visit non-existant pages by following auto-generated links. This should alleviate the problem of non-logged-in readers being bounced to the front page in such cases. If you’re curious about the details, see his blog.

The purpose of this series is to highlight articles that have changed recently, as well as to recognize the contributors who did the work. This doesn’t include every change, just “significant” ones. Future posts may be a bit shorter, as they’ll cover only the two weeks since the previous “state of the docs” post.

Web standards docs

Jean-Yves Perrier documented the <bdi> element. It allows inserting spans of text with unknown directionality, like text coming out of a database, in the middle of text with a known fixed directionality. He also updated the CSS unicode-bidi property to describe the two new values: isolate and plaintext, which are used to implement correctly bi-directionality for each HTML element (including, but not only, <bdi>, <bdo>, <pre> and <textarea>).

Jean-Yves rewrote the docs for the CSS property text-overflow, to account for the new extended two-value syntax and the new allowed string values, as well as adding new examples.

Jean-Yves also added pages for columns, updated column-width and column-count, and Using CSS multi-column layout.

Paul Irish made a rash of updates:

• Linked to a <canvas> polyfill for image-rendering for crisp-edges/optimize-contrast
• Added an example to show how to easily prettyprint with JSON.stringify().
• Created the page for node.contains().
• Added a compatibility table for getComputedStyle can get pseudo-element styles. Also it can be used from the window object.
• Documented creating and triggering custom events (which he had always wanted spelled out)
• Added a compatibility table to table.insertRow().

Kevin Lim continues to improve the IndexedDB docs:

• Added code examples to IDBEnvironment and IDBIndex.
• Updated IDBCount.
• Added prefix-handling code to several code examples.
• Beefed up basic concepts and best practices in IDBDatabase, IDBTransaction, and IDBIndex.

fusionchess added a code example to Using files from web applications.

Aaron Leventhal updated the ARIA page with lots of doc and resource links, and wrote new articles on:

• live regions
• how to file ARIA-related bugs
• examples
• alerts for accessible forms
• multipart labels for forms
• ARIA widgets

If you’re interested in ARIA and accessibility, please help out with these docs. If you’re not an expert, you can help identify where there are gaps, or things that don’t make sense. Accessibility geeks might also be interested in the free-aria Google Group.

New pages!

• Initial documentation for the <frame> and <frameset> HTML elements, by avsaro.
• SVG as an image by Dholbert.
• Responsive Web design, by Janet Swisher; if you know of good resources that are not listed there, please add them.
• Scaling of SVG backgrounds and Drawing DOM objects into a canvas, by Eric Shepherd.

Help wanted!

Want to write an article on CSS positioning? That is, how positioning properties for margins, padding, etc. work together. MDN does not have this topic covered yet. Or, if you’ve already written such an article, would you be willing to contribute it to MDN under a CC-BY-SA license?

Check out the MDN Getting started page. If you have questions, drop into #devmo IRC channel on irc.mozilla.org, or post to the dev.mdc discussion forum.

Mozilla-specific documentation

Henri Sivonen wrote about HTML parser threading in Gecko.

jbeatty improved Patching a localization, Create a new localization and several other localization-related pages.

Tom Schuster added to the SpiderMonkey JS API reference for:

• JS_GetEmptyString
• JS_NewDateObjectMsec
• JS_NewDateObject

Eric Shepherd wrote up complete reference docs for the new JavaScript Debugger API. However, the user guide for the Debugger API needs a lot of attention. We don’t have any examples at this point. A sample add-on that uses the API should be written, but even the JSAPI team hasn’t done one yet.

Firefox 8 was released on November 8, and Firefox 8 for developers is complete except for a few lower-priority items.

decoder created an article on Testing with Linux on ARM architecture using QEMU.

Jorge Villalobos updated several pages of the XUL School tutorial.

Eric Shepherd created an article for the Mozilla Developer Guide on Getting documentation updated.

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:

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!

The conference kicked off with Bella Morningstar, president of the Brendan Eich Fan Club (a.k.a. Mandy Lauderdale), serenading Brendan:

JSConf.eu opening song – JavaScript Will Listen from Alexander Lang on Vimeo.

Later, at Brendan’s request, he received a hand-crafted “Mandy Fan Club” t-shirt. That t-shirt, in turn, was auctioned at the end of the conference to support the wonderful work of Coder Dojo, led by James Whelton, which teaches programming skills to kids in Ireland. Holger Blank won the auction on behalf of JSConf.eu, donating 1500 euros to Coder Dojo.

For the doc sprint, the Hacker Lounge turned out to be less than ideal for concentrated work, thanks to the digital foosball table, but the sprinters found plenty of places to sit and work in Alte Münze, which was an amazing conference venue.

Here’s what the sprinters at JSConf.eu accomplished:

• David Bruant fixed up freeze(), forEach(), watch(), DOM event, and Node.textContent; fixed the example in element.addEventListener(); added a bunch of events to the DOM event reference page with info from Philip Tellis; created a page for the error event.
• Colby Russell reviewed and improved the Array and String pages, removing the NeedsTechnicalReview tags.
• Burak Yiğit Kaya reviewed, fixed up and removed the NeedsTechnicalReview tag from this, DOM storage, the Function constructor, encodeURI(), and regular expressions.
• Louis-Rémi Babé documented usage of cross-origin images with Canvas.
• After joining MDN during the conference, Paul Campbell reviewed and edited the RegExp page. Thanks for pitching in!

We also had remote contributions:

• Jean-Yves Perrier updated and added examples to a bunch of pages for CSS data types (such as <angle>, <ratio>, and so on).
• Jonathan Willson added browser compatibility tables and info to several DOM properties.
• Kevin Lim continued to improve the IndexedDB docs.
• yyss translated Animating objects with WebGL into Japanese.
• Berker Peksag fixed the code example and added a browser compatibility table to event.button and added an example to element.scrollLeft.

We also had moral support from Tom Schuster, Neil Rashbrook, Jeff Griffiths (who also helped Franz Enzenhofer isolate a possible Canvas bug in Firefox), Chris Heilmann, and Dietrich Ayala. Thanks!

Big thanks to Jared Wyles for mentioning the doc sprint during his talk. I’ll hold him to his request for peer pressure to work on open source!

Thanks also to Holger Blank and the rest of the JSConf organizers for putting on an excellent conference, and accommodating Mozilla’s ticket purchase requests.

And thanks finally to Chris Williams for suggesting that we hold the sprint during the conference, and for mentioning it in his inspiring closing keynote. One of the points he made during that keynote is that releasing software as open source is like baring a little piece of your soul. This conference reminded me yet again what an honor it is for me to work together with the thousands of people who pour little bits of their souls into the Mozilla project to create open source software and documentation to keep the Web open for everyone.

Today, MindTouch announced the result of their voting, and the Mozilla Developer Network site won in all categories (albeit by a slender margin in the “social” arena), as well as overall.

That serves as an affirmation that our open documentation model works, and works well. We have big plans for the future that will help make our content even better. Watch this space for news!

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!

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.

To that end, we want to tag as many JS and DOM articles as possible, with tags indicating what work needs to be done on those articles. That way, anybody dropping in during the sprint (or anytime later) can look for tagged articles and find something to work on.

Here are some of the tags we use to indicate that an article needs help:

• NeedsTechnicalReview: needs someone to verify that the technical information is complete and correct.
• NeedsExample: needs one or more illustrative code examples of the item documented.
• NeedsContent: the item is incomplete and needs to be filled out.
• NeedsJSVersion: needs information about the version of JavaScript and EcmaScript this item first appears in.
• NeedsBrowserCompatibility: needs a browser compatibility table or needs the table filled out.
• MakeBrowserAgnostic: the article is written with a focus on Gecko, when it is actually about a standard function or feature, which should be rewritten to be generic.

Please help by tagging articles in MDN that need work with the appropriate tag. You can use the Talk page for each article to elaborate on what needs to be done, if the tag is not descriptive enough. To modify tags on an article, login to MDN and click Edit Tags at the bottom of the page.

The wiki page for the doc sprint has links to queries for some of these tags.

If you will be at JSConf.eu, I look forward to seeing you there! If you will be participating remotely, I’ll see you online!

The workshop will include a general introduction to the Add-on SDK and the online Builder tool, followed by 3 tracks of breakout sessions. The breakout sessions will be help for smaller groups of 30-40 people to allow for more interactivity. Each breakout session will be given 3 times to ensure that all attendees can participate in each session. The sessions are as follows:

1. Interacting with Web Content
   The SDK includes a powerful module for interacting with and modifying page content. In this workshop you wil learn how to use popular JavaScript libraries like jQuery to dramatically alter the look and behaviour of a web page, as well as manage communications between your add-on and the modified pages.
2. Adding to the Firefox UI
   A key part of many Firefox add-ons is their ability to integrate with the Firefox UI. This session will guide you through the various techniques the Add-on SDK exposes to integrate your add-on with Firefox.
3. Libraries & Modules: The Key to Generativity
   The Add-on SDK uses the CommonJS format to allow developers to easily create and share re-usable modules. This workshop guides you through hands-on exercises designed to illustrate usability and security concerns when creating re-usable code.

Note: All sessions are meant to get you writing code straight away! Please ensure you bring a Wifi-capable laptop to really benefit from the hands-on format.

When & where

The workshop is being held at City University in London starting at 6PM, initially in the Oliver Thompson Lecture Theatre (OTLT). We expect the breakout workshops to conclude around 10:30PM.

Register Now!

Registration is free on a first-come, first serve basis:

• Register now on Eventbrite
• Track this event on Lanyrd

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!

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!

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

Runners-up:
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.

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:

• History API at Mozilla Developer Network
• History API explained in detail at Dive into HTML5
• Detailed specification of the History API at the WHATWG
• A simple History API demo by Remy Sharp
• How Facebook uses the History API
• Syd Lawrence’s jQuery Fancy Box with History support
• History.js – a polyfill for History API support

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

Something amazing is starting next week. No, not pay day. It’s more important than that. Got it yet? No? It’s Ask MDN, silly! Still no idea what that is? Don’t worry, it’s new and I’m here to tell you all about it.

Introducing Ask MDN

Ask MDN is a new initiative from MDN and the Developer Engagement team here at Mozilla.

For one hour a week on Twitter we will get a panel of experts together to answer your questions about a specific topic related to Web development.

Every week we choose a different topic, which will be announced in advance so you have plenty of opportunity to send in a question for our experts (who also change each week).

After each week we will archive the questions and answers so you can search through them and continue learning long into the future. We see this as being just as valuable a resource for learning as the documentation is on MDN.

Engaging with the developer community on Twitter

We’re starting Ask MDN because we believe that there isn’t much help for developers on Twitter outside of questions and answers between friends.

With Ask MDN we want to bring together the developer community and our long-standing relationship with experts. We want to make it super easy to get a trusted and valued opinion on something that’s been bugging you, no matter how simple.

Announcing the first topic: HTML5 gaming and creative JavaScript

The first Ask MDN hour on Twitter is next week and it will be focussing on HTML5 gaming and creative JavaScript (animations, graphics, etc).

We’ve already got a great panel of experts lined up ready to answer your questions. They include game developers, authors, JavaScript ninjas, and Flash heavy-weights (there is a still a lot that we can learn from the Flash guys).

We’ll announce the next topic after the HTML5 gaming hour is over.

When and where?

The live HTML5 gaming and creative JavaScript Q&A will take place on Friday the 29th of July at 6pm in the UK (BST), and will be moderated through the @AskMDN Twitter account. Make sure to follow that account to keep up-to-date with what’s happening.

We chose 6pm in the UK because it’s a time that the majority of the world will be able to access; it’s morning in the US, and evening in Europe. We appreciate that this isn’t perfect for everyone, but we haven’t gotten around to building a time machine just yet.

The first event will occur at the following times around the world:

• 10am in San Francisco (PDT)
• 1pm in New York (EDT)
• 7pm in Paris, Berlin and Madrid (CEST)

Find the time where you live to make sure you don’t miss out.

Who are the experts?

We’re really proud to bring you an astounding panel of experts, each carefully chosen to give a fascinating insight into the tech surrounding HTML5 gaming and creative JavaScript.

You don’t get a chance like this often, so make sure you submit a question to the panel.

Seb Lee-Delisle

Seb (@seb_ly) is an internationally recognised creative coder best known for his award-winning Flash work. He has recently been teaching developers the delights of creative JavaScript through his workshops in the UK and US.

Seb was recently interviewed as one of our People of HTML5.

Rob Evans

Rob (@IsogenicEngine) is the developer behind Isogenic Engine, one of the most promising HTML5 gaming engines out there today.

Dominic Szablewski

Dominic (@phoboslab) is the developer behind the Impact HTML5 gaming engine, one of the most popular publicly-accessible engines out there right now.

Andreas Røsdal

Andreas (@andreasrosdal) is the developer behind Freeciv.net, which is a HTML5 version of the strategy game Freeciv.

Tom Schuster

Tom (@evilpies) is a core contributor to Mozilla’s SpiderMonkey JavaScript engine. His knowledge with JavaScript performance and optimisation will be invaluable.

Michal Budzynski

Michal (@michalbe) is the developer behind onGameStart, the first large-scale HTML5 gaming conference in the world.

Benoit Jacob

Benoit (@BenoitJacob) is a Software Developer here at Mozilla who works on graphics and WebGL. As a result of this he has in-depth knowledge about hardware acceleration in these kinds of environments.

Rob Hawkes

Rob (@robhawkes) is me. I am a Technical Evangelist at Mozilla with experience developing games and creative experiments with HTML5 and JavaScript. I will be on the panel, but my main role will be moderating the discussion and keeping things running smoothly.

Getting involved

It’s going to be a great experience so I encourage you to get involved by following @AskMDN on Twitter.

Submit your questions about HTML5 gaming and creative JavaScript in an @ reply to our account. Nearer the hour itself we’ll announce a hash-tag that can also be used to submit questions.

Got a topic that you want us to cover in a future Ask MDN hour? Send it as an @ reply on Twitter, or reply in the comments below.

Taking things forward

This is just the beginning. We have big plans for Ask MDN, but we won’t be able to do any of it without you.

Get involved today and help us make the Web a better place.

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.