HTML5

Artie’s Guide to

JavaScript Enhancements

JavaScript becoming the default language of the web is a bit of a quirk. Introduced by Netscape in Netscape Navigator 2.0. Initially called “LiveScript”, it was designed to be a language friendly to non-programmers. In a co-marketing deal with Sun (developer of Java), it was renamed to “JavaScript”, even though it has nothing in common with Java.

It’s all over the web. While it was initially looked down on by developers, the introduction of Ajax (a technique that allows browsers to talk to a server without loading a new page and enables things like loading new content in real time based on user interaction) has forced developers to embrace it. While JavaScript is used in other places beyond the Web, it’s most commonly used to power interactions on webpages. If HTML is the “what it is” and CSS is the “how it looks”, JavaScript is the “what it does”.

While it seems a little backwards, the HTML5 spec actually introduces a handful of new capabilities to JavaScript. There are a ton of them. However, I’ll focus on the ones I think will be most useful for designers going forward. They are:

  1. Location API - ability to retrieve longitude/latitude coordinates of the device loading the page.
  2. Canvas API - ability to draw visual elements into a canvas tag
  3. CSS Animation - ability to trigger CSS keyframe-based animation
  4. HTML5 Storage - often times a device will loose internet connectivity. Enables users to “check out” sites to view offline. Also includes a mini-databases built into them that can be leveraged through JavaScript.

Location API

The location API allows us to get our grubby little mitts on, after the user okays it, the user's longitude/latitude location. It's shockingly easy to use. Here's a brief demo:

Major US Cities

You can view source to see how it all works, but the major component is simply using the method "navigator.geolocation.getCurrentPosition" and running a function when it returns. Inside that function, you can get at the longitude/latitude simply by asking for position.coords.latitude and position.coords.longitude.

Canvas API

The Canvas API allows you to write into a canvas element and construct vector images. It's similar to Flash's ActionScript Drawing API.

Demo

CSS Animation

HTML5 Storage

Offline storage allows you to bundle up a collection of HTML, CSS, JavaScript and media and allow the browser to have access to it offline. Pretty powerful stuff. A great overview is available here.