MDN Holidays calendar 2013

Welcome to the holiday calendar of the Mozilla Developer Network. Behind each of the days on the below calendar lies a resource or interesting demo for you to look at, enjoy and - if they are MDN resources and you want to - even give some editing love.

  1. Meatspace Chat

    A chat client using WebRTC that allows you to record a 2 second video of yourself every time you post.

  2. Codewars

    Codewars is a site that gives you coding challenges to solve. Good to kill a few minutes.

  3. High Performance Animations

    Paul Lewis and Paul Irish of the Chrome team with all the information you need to create fast animations.

  4. SVG icons animated in CSS

    A small and pretty demo showing that SVG is just markup and can be targetted by CSS.

  5. Mac Plus in CSS

    A demo of how to create complex graphics with CSS. Not necessarily something you should do but a good explanation how you can do it.

    You can also see it in action here.

  6. CSS Stats

    Nice little tool to analyse the CSS of a certain site and get information what is used in the style sheet.

  7. Introducing the Whiteboard Drum – WebRTC and Web Audio API magic

    Very cool demo using WebRTC and WebAudio to turn a whiteboard with magnets into a drum-machine.

  8. Flexbox cheatsheet

    Let's face it - flexbox is the feature that will move our products from hacks to real interfaces. Here's a cheatsheet how to use it.

  9. PhysicsJS

    Great library for all kind of 2D physics simulations. Who knows if you add cool animals you might have a game.

    You can also see it in action here.

  10. How to keep up to date on Front-End Technologies

    A list of resources how to keep up with what is happening on the front end. Beautifully designed and maintained on GitHub.

  11. Explain Shell

    Explain Shell makes cryptic unix commands easy to understand. As our job on the web includes more and more command line work this is a good primer.

  12. Exploring Canvas drawing techniques

    Lots and lots of examples how to draw on a canvas. With live code examples

  13. Mobile-first Responsive Web Design and IE8

    Details on how RWD was solved for the Guardian when support of IE8 is important

  14. Efficient animation for games on the (mobile) web

    Chris Lord of the Firefox mobile team has some good info on how to animate with JavaScript on the web without slowing down browsers

  15. Responsive graphic novel in Flexbox

    Nicely explained example how you can do an online comic that adapts to the available size using flexbox.

  16. Case study of a responsive redesign

    How Walmart boosted conversion by 20% by adding responsive redesign

  17. What You May Not Know About the Z-Index Property

    Good explanation of how browsers stack things. Stop just adding numbers.

  18. Vim.js

    Porting Vim to the web using Emscripten. One of those things that can be done these days.

  19. I want to use

    Similar to caniuse.com this site tells the percentage of people on the web that can see what you create when you rely on a certain technology.

  20. The web needs containment

    Interesting thoughts by Paul Lewis on the need for a more app-like visual approach of the web. There is no view but we need them. Or do we?

  21. Developer Tools in Firefox

    A shocking amount of people don't know just how many great developer tools are available in Firefox by now. This wiki page is the source of truth on that matter.

  22. Joblint

    Joblint is a script to test job offers for strange content. Run this against your proposals before posting them online to avoid embarassment.

  23. Code for America Keynote

    Clay Shirky with a great talk about success and failure in technology and how we forget that running a hackathon is not innovation.

  24. Dan Ariely: What makes us feel good about our work?

    A TED talk about what makes us feel good about working. It is not the money we get.

  25. 60fps scrolling using pointer events: none

    Neat little trick to stop interaction when scrolling for better mobile performance.