• Day 1

    Project

    Ball Pool

    http://mrdoob.com/projects/chromeexperiments/ball_pool/

    Description

    MrDoob is known for Flash projects, and recently some great HTML5 work. This project shows the power of HTML5 through the physics of collision detection & gravity.

    • Drag the balls around.
    • Click the background to add new objects.
    • Shake your browser to see feedback.
    • Double click any object to refresh with a new color scheme.

    Back to Top

  • Day 2

    Project

    20 Things I Learned About Browsers And The Web

    http://www.20thingsilearned.com

    Description

    A great interactive experience created by Google and Fantasy Interactive

    What's a cookie? How do I protect myself on the web? What happens if a truck runs over my laptop? + Much more explained in this HTML5 book complete with CSS3 animated illustrations.

    Back to Top

  • Day 3

    Project

    Agent 008 Ball

    http://agent8ball.com

    Description

    Showing the power of HTML5, see this amazing billiards game, created by Pixel Lab complete with a James Bond-esqe theme.

    Back to Top

  • Day 4

    December 4th

    HTML5 Ninja Games

    Nothing says Christmas like ninjas, right? Ninja games are sooo hot right now. Go test your foo, fool!

    http://code.bocoup.com/js-ninja by @F1LT3R
    Build up your chi-force by thowing your arms into some crazy ninja spins. Don't hit yourself in the head!

    http://mikerotondo.com/ninjaleap by @mrotondo and @ganz
    Protect your village from the evil assasins.

    Back to Top

  • Day 5

    The Killers HTML5

    Hmmm…does technical strife break out in bands? The Killers have an HTML5 site and their currently soloing front-man Brandon Flowers is pushing some Flash at us. What does it all mean? Sparkart the site builder in both cases broke HTML5 band site ground and uses it on their own site, so one wonders if Brandon Flowers is just a Flash lover?

    Caution: thekillersmusic.com/html5 is a bit CPU intensive.

    Back to Top

  • Day 6

    Endless Mural/Okapi

    The folks at @mixonline teamed up with artist Joshua Davis and Branden Hall to create a global art collaboration tool, all using Okapi. What's Okapi, you ask? It's an "open-source framework for building digital, generative art in HTML5" of course. Sounds like an adventure to us.

    What's cooler: @mixonline is giving away prizes for the best design submitted before December 15, 2010. So get digitally generative!

    Links:

    Back to Top

  • Day 7

    December 7th

    Socket 2 'Em

    Today we celebrate the WebSocket API which is moving us towards a more realistic real-time web without constant polling, endless iframes or other Comet-like tricks – Just establish a WebSocket and communicate bi-directionally with ease. Some simple examples to check out are http://websockets.org/echo.html and http://html5demos.com/web-socket (via @rem).

    WordSquared (http://wordsquared.com): WordSquared is a Massively multiplayer online word game born out of the Node.js Knockout contest. In other words, it's like Words-with-Friends and World of Warcraft had an HTML5 baby. Whatever it is, it's highly addictive so be careful. (via @aviel @ggoodale and @railsjedi)

    Rawkets (http://rawkets.com): Rawkets is yet another Massively multiplayer game, submitted by @robhawkes. This one's a space-shooter game with Twitter login feature. So login and start blasting your fellow Tweeps out of the Twitterverse.

    Back to Top

  • Day 8

    December 8th

    <video> + <canvas> = ?

    HTML5 <video> is coming on strong. It isn't quite a Flash video killer yet, but it's getting there fast! A few demos while we wait for the growing pains and codec chaos to subside.

    TRON Fan Movie filtered through HTML5
    Lessen the wait for TRON: Legacy on 12/17 and amuse yourself by messing with the video here. Via @enzenhofer.

    video + canvas = magic
    Who you gonna call when you need another HTML5 <video> + <canvas> demo? PIZZA CATS!!!

    HTML5 Doctor prescribes this tutorial for learning how all this is done.

    Back to Top

  • Day 9

    December 9th

    Atomic HTML5

    Knowing all the HTML5 elements is important, but listing them out is a bit dry for the HTML5 Advent(ure) calendar. Thanks to Josh Duck for taking us on an adventure as he organizes the elements so nicely in a periodic table and provides an interactive feature to check a site's HTML5 element weight. The site has great tooltips with links for further reading.

    Check our usage, we're legit http://joshduck.com/periodic-table.html?url=html5advent.com rolling some semantic markup with <article>, <section>, <header>, <footer> and even <hgroup>.

    Are any of your sites good examples chock full of HTML5 element goodness? Share them with us

    Back to Top

  • Day 10

    December 10th

    Anti-ActionScript Heros

    These Anti-ActionScript Heroes are raising the bar by merging great design with the latest HTML5 standards.

    Back to Top

  • Day 11

    December 11th

    Canvas Rider

    If you thought Agent 008 was an addicting HTML5 game, you'd better not visit canvasrider.com. Not only can you ride on countless custom tracks, you can create your own. 10 out of 10 in the time-suck category. They even have a Canvas Rider app in the new Chrome Web Store!

    Haven't had enough fun yet? Check out Entanglement from Gopherwood Studios

    Back to Top

  • Day 12

    December 12th

    Blank Canvases

    Feeling artistic? Check out these neat <canvas> canvases.

    • http://draw.2x.io
      (WebSocket browsers only)
      Einar Otto Stangvik brings us this neat collaborative drawing tool using WebSockets. Don't be the guy who pulls out the eraser and ruins everybody's fun.
    • http://bomomo.com
      Another drawing tool, but this one has some whacky brushes that make you want to keep on drawing!

    Both sites do need to clean up their <!DOCTYPE>

    Back to Top

  • Day 13

    December 13th

    HTML5 Cosmos

    There are billions and billions of demos one could develop in HTML5. Here are two to amuse and enlighten in memory of Carl Sagan.

    • CanvasMol
      This 3D molecule visualizer from AlteredQualia integrates cool molecular visualizations with great Web technology. Make sure you check out the different features like zooming, multi-axis drag/rotation and more.
    • Not into tiny microscopic molecules? Switch gears with IE9 Testdrive's Galactic demo. Use IE9 Beta for awesome GPU powered graphics.

    Back to Top

  • Day 14

    December 14th

    Print meets Web

    Today we bring you special guest star CSS3 and downloadable fonts.

    Back to Top

  • Day 15

    December 15th

    HTML5 <audio>

    HTML5 <video> gets all the love (err.. anti-Flash rebound affection), so we're dedicating today to the <audio> tag.

    Back to Top

  • Day 16

    December 16th

    HTML5 - WebGL

    HTML5 advent has been chock full of Canvas-2d goodness... today we look at the future of 3D canvas and WebGL with no plug-ins required. A word of caution though, you need a bleeding edge browser for today's pick, either Chrome Canary or Firefox 4 Beta, to have any chance at running these.

    Back to Top

  • Day 17

    December 17th

    Stupid Awesome

    Jacob Seidelin's Twitter bio says "Doing stupid things with JavaScript so you don't have to." Forrest Gump's bio says "Stupid is as stupid does." If these demos are stupid, then stupid is the new awesome.

    Today's pick is an HTML5 Audio Visualizer a la iTunes. Pick amongst 24 different visualizers and watch these tunes dance. We personally like Mario doing the Runningman. Use FireFox 4 for HTML5 purity, though he's added in Flash fallback for everyone else.

    While you're at Jacob's site make sure you check out his other demos, such as the Musical Solar System. (Requires WebGL enabled browser)

    Back to Top

  • Day 18

    December 18th

    For bonus points, try playing in IE9 whose GPU acceleration powers smooth animations and enhanced ambient effects.

    Back to Top

  • Day 19

    December 19th

    Spirit of Indiana

    Christian Heilmann brings us today's HTML5 demo that integrates HTML5 <video> with maps and simple animation to re-create the Indiana Jones-esque travel/flight sequences. To create your own version, all you need is some basic HTML5 knowledge, a spontaneous acapella group and a quick search through Archive.org, Google Maps and Google Web Fonts.

    After checking out the demo site, see how to implement the effects using HTML5 and JavaScript at hacks.mozilla.org. Follow @mozhacks to stay in the loop.

    "You throw us your demos, we'll throw you the whip!"

    Back to Top

  • Day 20

    December 20th

    FlowerOscope

    Today we bring you more HTML5 <canvas> and <audio> goodness from the @LaSurprise team. FlowerOscope features some great illustrations and accompanying HTML5 sound bytes. Don't overlook the design intricacies when the cursor is moved around. When you're done creating your piece, post it to a "family wall" and invite your friends to add to the wall.

    Feel like creating your own <canvas> art from scratch? MIXOnline's Ai → Canvas plug-in allows you to export vector and bitmap art directly to <canvas>. Have you used it? Submit your stuff.

    Back to Top

  • Day 21

    December 21st

    Snowball Fight!

    The folks at Revolver3 bring us today's fun Websocket-enabled multiplayer snowball fight, Le Roi de la Garnotte (or codename: Randy Johnson). Login with Facebook and start battling! Aim and walk with your mouse and use the spacebar to fire away!

    For further reading on this "HTML5 Experiment," see the Revolver 3 blog entry about the work.

    HTML5 - c'est super! Even with Flash socket fallback.

    Back to Top

  • Day 22

    December 22nd

    Museum of Never Ending Art

    As we get close to the finale of our HTML5 Advent(ure) calendar, there's one thing that we can tell about all of the individuals and teams featured so far: their innovation and collaboration is neverending and continues to push the limits of the open Web.

    So for today's demo, we bring you the MONA: The Museum of Neverending Art. This enormous canvas of user-submitted art still has many open spaces, so we recommend you go add your own inspiration.

    Do yourself a favor and try it in the IE9 beta so you can appreciate the amazing zooming and scrolling abilities built with - yep, you guessed it - HTML5 and CSS3.

    Kudos to Tim Aidlin and GroupeReflect for this great site.

    Back to Top

  • Day 23

    December 23rd

    Flight of the Navigator

    Our previously scheduled Nice SVG Snowman and Naughty 8bit HTML5 game have been bumped last-minute to bring you an impressive new demo - Flight of the Navigator.

    This is some Blade Runner+TRON-esque WebGL + <audio> + <video> + <canvas> extravaganza which is - we repeat - not a video if you have the horse power to run it. Crazy stuff! Read more from David Humphrey.

    If Santa doesn't have you living on the browser bleeding edge with powerful hardware, watch the screen cast instead.

    Back to Top

  • Day 24

    December 24th

    HTML5-oh Snow Globe-o-matic.

    Inspired by @webreakstuff and @grahamlicence who have some nice snow globes (here, and here), we decided to create our own model for you all for the final Advent(ure): Snow Globe 5-oh. Sure it isn't the flashiest pirate, ninja, 3d dimensional, socket powered demo but it is our hand crafted HTML5 present to you to bring some open Web cheese to your friends (or enemies).

    So that's it folks 23 different demos, one plug from us with extra cheese and we are off for the year. Hope to see you in 2011!

    Happy Holidays from @Zingchart

    PS: The Grinch was spotted adding bugs to the globe-o-matic. Hang tight while we kick him out of Who-ville!

    Back to Top