Through the run-up to Christmas 2011, the Mozilla Developer Network has been posting a link a day in their MDN Holiday Calendar. This post serves as a collection of those posts as a time-saver, but the site is worth checking out. Note that none of this is my work, the calendar was written by Chris Heilmann with additional links provided by Luke Crouch, Robert Nyman and Rob Hawkes. Source code is available on GitHub and there is a making of tutorial: Part 1 - Part 2.

Also note: this isn’t an error, at the time of writing numbers 2 and 10 point to the same URL. Number 10 also seems to have a broken quote with half missing! Despite this, some of these articles are really interesting!

25 Secrets of the Browser Developer Tools

Superb explanation and introduction to how you use and get the most out of the Developer Tools in web browsers.

HTML Parsing with JavaScript

Ever thought of implementing the DOM in JavaScript? David Flanagan shows with dom.js how it can be done.

How to Bulletproof @font-face Web Fonts

Working with fonts on the web has always been a challenge. This article aims to clarify as much as possible and take you beyond the common pitfalls.

Interactive Periodic Table

Beautiful example of using modern web technologies to create a periodic table - complete with moving atoms.

Fullscreen HTML5 video

Watching video is nice but it is even nicer if you can do it in fullscreen. This explains how to tap into that possibility in web browsers.

Lights

Interactive WebGL music experience.

You can also see it in action here.

WebGL playground

This is a great resource to see WebGL code in action and play live with the code

CSS Transitions

The smoothness of this page is very much the result of using CSS transitions. Check the docs to learn all about them.

You can also see it in action here.

Gamepad API

Gamepad and joystick support is coming to Firefox and Chrome.

You can also see it in action here.

HTML parsing in JavaScript

“Next time you shout at some browser for doing it wrong

You can also see it in action here.

Popcorn.js

Popcorn is a Mozilla sponsored project to make it dead easy to sync media with web content.

You can also see it in action here.

WebGL Walker

A cool and customizable skeleton done with WebGL. I recommend maxing out the sliders!

You can also see it in action here.

Context menus in browsers

This is a jQuery polyfill to bring native context menus as supported in Firefox 8+ to all browsers.

You can also see it in action here.

Going Fullscreen with Canvas

Nice and simple example how you can utilize the Fullscreen API to create a complete full-screen canvas experience.

You can also see it in action here.

Natural Object-Rotation with CSS3 3D

Great article on CSS 3D Transforms with beautiful illustrations. Make sure to use the various web browser prefixes in your CSS code to make it work for as many as possible.

You can also see it in action here.

The Open Web platform: Browser technologies

The Open Web is filled with technologies and specifications that offers web developers a lot of choices. This page is an overview of all those technologies.

Encode JavaScript as Japanese emoticons

This is wild but it also shows that when it comes to filtering out your data for malicious injections looking for alert() doesn’t cut it.

Node.js

“Node.js lets you to run JavaScript outside of the browser while utilising the full power of your computer. It allows for a whole variety of use-cases; like game and Web servers or simple applications that scrape and manipulate data.

You can also see it in action here.

HTML5 Sticky Thing

Nice canvas example which shows a playful example of you you can add nice interaction to a cute feature.

You can also see it in action here.

Mouse Lock API

The Mouse Lock API allows you to lock the position of the mouse and hide the cursor. It is perfect for games and visualisations where you need to look around a 3D world and don’t want to be restricted by traditional mouse movement on the Web.

Learning three.js

Learn how to use the three.js WebGL library to create animations and games.

Dochub.io

This is a great find-as-you-type interface to the MDN CSS documentation

HTML5 audio in games

A small trick to fight the latency of HTML5 audio in Games

Video Subtitling and WebVTT

A great introduction by the HTML5 Doctor on a very important part of online video.