Lesser known cool features of HTML5

[Silhouette]

If that sort of page is cool, please give me back an HTML4 page I can just browse through without wasting several minutes waiting for the content to appear.

[jc123]

This should bypass it. On the page, open up the console (right-click Inspect Element and go to Console tab) and type these 2 lines to remove 'to-build' class. Then you can read through the slides without having to wait.

  j = document.getElementsByClassName('to-build');
  for (k=0; k<6; k++) { for (i=0; i<j.length; i++ ) { j[i].className = j[i].className.replace(/\bto-build\b/,'');  } }

PS I haven't done too much Javascript and someone else can probably write a shorter version, and I'm also not sure why looping just once isn't working.

[radarsat1]

My ears!

I know it's not the point but his audio synthesis sounds terrible, and that makes me feel like nit-picking:

- 8-bits at 20 kHz really?

- He's actually specifying 20480 Hz in the code, so it's not in tune

- He's using the range 255, but it's 8 bits _signed_ so it should be 127, so he's getting lots of distortion.

His wav header should be:

   0x44,0xAC,0,0,       // 44,100 samples per second
   0x88,0x58,0x01,0,    // byte rate: two bytes per sample 
   2, 0,                // aligned on every two bytes
   16, 0,               // 16 bits per sample

and then in the synthesis:

  var samplespercycle = 44100 / frequency;
  var samples = new Uint16Array(44100 * duration);
  var da = 2 * Math.PI / samplespercycle;
  for(var i = 0, a = 0; i < samples.length; i++, a += da) {
    samples[i] = Math.floor(Math.sin(a) * 32768);
  }

[bugsy]

Got some error messages, then a stalled page. If this is the future of the web, we are doomed.

[Nemmie]

Doesn't open in IE9. Worked in Chrome though.

[icebraining]

Works fine on Iceweasel 4.0.1. And it has keyboard navigation, thank $deity.

[jarin]

I'm just going to take this opportunity to shake my fist at Internet Explorer, because much of this stuff is useless on production websites (some things are usable with Javascript hacks).

[zachrose]

Right, but it's still good to know that years down the line, jQuery 3.0 will drop support for IE 9 and you'll get a tiny performance bump.

[sheffield]

"HTML 5" features like

    <input type="text" x-webkit-speech>

surely won't work.

[bzbarsky]

This presentation is pretty evil (or maybe incompetent?). It mixes up proposed standard features that are broadly supported, proposed standard features that are not well supported, and proprietary WebKit extensions that have no chance of being standardized as they are and presents it all as "HTML5". It also has code snippets that try to look like they'll work cross-browser but are actually broken in non-WebKit browsers due to relying on some of those extensions...

[maratd]

Google is pulling a Microsoft here. Back in the day, there was a lot of really neat stuff you could do only in IE. Like filters in CSS, etc. The problem was that you could only do it in IE.

Unless you're doing an internal facing site and restricting usage to Chrome, be careful. Unfortunate. Most of the stuff is pretty neat.

[unfletch]

Element.classList is a bit of an odd addition. No doubt it'll be useful, but wouldn't something more generic have served us better? Class isn't the only attribute that takes space-delimited values. (Or is there also Element.relList?)

[bzbarsky]

To a first approximation, no one uses 'rel', much less does anything with it dynamically. The case of 'class' is somewhat different.

[icode]

Too slow. Didn't read.

[mjbellantoni]

Same here.

[exogen]

Page appears totally blank in Mobile Safari.

[unfletch]

Yeah, it must have been targeted at Chrome. I got the same blank page in Safari 5.0.5, and an error dialog in Firefox 5.

Edit: It's meant for Chrome 14.

[smashing]

I tried the link on a Mac using OS X 10.6.8 with Firefox 5.0.1 (latest) and I get this quasi-popup error

"https://html5-demos.appspot.com/static/html5-whats-new/slide... (line 480) : slide.dataset is undefined"

[JadeNB]

It's not just a version problem; I'm on the Firefox 8.0a1 nightly, and I got the same error.

[bzbarsky]

Dataset support is coming in Firefox 6. Try a beta build. ;)

[ciupicri]

Same with firefox-5.0-2.fc15.x86_64

[jrubinovitz]

A lot of these examples are not working for me (I'm running Google Chrome 12.0.742.112), especially the Audio example which I really wanted to use. I'm really excited about the features this presents, I just wish they worked on my browser.

[speleding]

I clicked the "speech input" element on the webpage and said "this is cool" and... the element showed "this is cool". It just works, no configuration or anything. This is so cool.

[andybak]

Anyone got a transcript so I can read it at normal human speed?

[smashing]

I'm using an iPad. I see nothing.

[marksu]

Me neither. Just the background pattern.

[benatkin]

About half the demos worked for me. I'm running Chrome for Mac, with the Developer Channel. Will Canary Build (only available on Windows) run them all?

[unfletch]

I haven't tried it, but Canary is available for Mac:

Announcement: http://blog.chromium.org/2011/05/adding-more-yellow-to-mac-c... Download: http://tools.google.com/dlpage/chromesxs

[p0nce]

> Chrome caps sampling at 60fps (no big, your monitor is ~60Hz)

No. My monitor here works up to 85 hz, a lot of LCD screen out there are capped at 75 hz. By limiting the framerate to 60 hz on a 75 hz screen you'll force it to look inferior to 60 fps because of duplicated frames (20% of them). It may actually matter in a game.

[homemadejam]

I spotted a few typos, then came across the Spell Check API! Either way, I learnt a few new things, so I'm happy!

[NHQ]

You all are bums. There are some excellent features to be up and coming. The point is not that some features do or don't work in some other browser. The point is you can point your users to an free, cross platform app they can download that runs you web-app with native implementations.

X.platform > X.browser

[Joakal]

Is it really HTML5 if it requires javascript? I saw more with no javascript than with javascript.

[bzbarsky]

In Google-speak, "HTML5" means "anything we implement in Chrome, even if it will never actually get standardized".

[Kilimanjaro]

    <body style="display: none">

I see nothing... as expected, I guess.

[zobzu]

this is kind of bad because it mostly uses webkit specific tags, so thatll only work on webkit, even if other browsers would support the tag too

[nl]

It uses webkit tags because they aren't standardized yet (or implemented in standard form).

This slidedeck is intended as a supplement to the html5rocks demos. Html5rocks has stable HTML5 code, whereas this one has a lot of experimental stuff that isn't quite ready for real use yet.