HTML 5 - Sneaky stuff

Question

HTML 5 is the new W3C definition for HTML and will likely represent the direction the internet goes as people find the next killer apps that work in it.

There are the much publicized 'public' coding features like the <video> tag, but I'm wondering what low-level coding tricks people have found so far that could be important, useful, interesting or all of the above.

Some examples I've come across thus far:

Drag-and-drop events that control data transfer - eg:

document.addEventListener("dragstart", function(event)
{
   event.dataTransfer.setData("image/png", slides.imageRep());
   event.dataTransfer.setData("slides", slides.serializedRep());
   // etc.
}, false)

2d/3d graphics through extension of the <canvas> element.

Context-aware html blocks

(as a bonus - the obselecense of the <applet> and <marquee> tags - woohoo!)

<ruby> tag for ideographs

and I'm not sure if this is new, but the <progress> tag - these dynamically updateable tags are going to make the web a richer experience.

Anyone played with these and found some interesting examples of them put together? Some demo code perhaps?

Answer 1

There are nice samples on Chrome Experiments

From the about page:

These experiments were created by designers and programmers from around the world using the latest open standards, including HTML5, Canvas, SVG, and more

Answer 2

Check out Bespin, from Mozilla Labs - it is a code editor written entirely in JavaScript, using Canvas.

Also, it may not be a "sample" per se, but the Canvas Tutorial on the Mozilla Developer Center is a very good introduction to the <canvas /> element.