The modern JavaScript specification is divided into a series of modules, which includes the HTML5 APIs. All of these APIs depend entirely on JavaScript to work, so they’re included in the JavaScript reading list. However, they are officially HTML5 APIs; Dialog even introduces an element of the same name.

Both the HTML5 Fullscreen and Dialog APIs are vital to modern web applications: the Fullscreen API eliminates browser UI and scrollbars, leaving just the elements on the web page you want the user to focus on, while the Dialog API presents modal windows in front of content, focussing the user’s attention and limiting their interactivity. Both are useful in a variety of applications, from games to kiosks.

The Speech Synthesis and Recognition APIs have a more refined focus, and are not yet supported in all modern browsers… but will be part of making accessibile, fully featured sites act like modern applications.

Time: 1 hour

Prerequisites: A good understanding of both HTML & CSS.

The FullScreen API

1. Intro
2. Switching to Retina Images in Fullscreen
3. Simple Fullscreen Slideshow

The Dialog API

1. Using the dialog Element
2. Modern HTML5 Lightbox w/ Dialog

The Speech Synthesis & Recognition APIs

1. Speech Synthesis

The Web Storage API

1. Web Storage

Photograph by Tim Haynes, licensed under Creative Commons

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.