HTML5: The Parts You Care About (Part 2)

This is post 2 of 3 in a blog series previewing the upcoming presentation, HTML5: The Parts You Care About by David Wesst at Prairie Dev Con in Saskatoon, SK (November 4-5). Read Part 1 here.

As discussed in my previous post, HTML5 has come a long way since its inception and release in the early 90’s. With eight different categories of functionality that are continuing to develop, expand, and evolve there are a lot of areas to cover.

But what can it really do? Given there are so many features to cover, there is no way to cover them all in a single post. What is doable, is to cover my favourite features in each of the core technologies: HTML Markup, CSS, and JavaScript.

HTML Markup

Since the beginning, the purpose of HTML has been to define the structure of the documents we intend to share with the web. That purpose continues with HTML5, but with some notable new and improved tags to better describe how we write documents today.

Being that I’m a sucker for a rich user interfaces and a big fan of video games, my favourite feature is the new HTML Canvas, with a close runner up on the (a.k.a Multimedia) tags.

Canvas

The HTML Canvas is just that, a blank canvas. With this element, the developer is in direct control over every pixel inside of the canvas, which means that the developer is responsible for handling everything from the graphics right through to the handling of clicks on the pixels.

For many this might sound like a bit of a nightmare considering that we are used to having things like controls (e.g. input elements) and event handlers to build our apps. But those controls, although limit us to what they provide. Having a clean slate, or in this case, a blank canvas, gives us the ability to make our apps and games look and act however we want them to.

Beyond the creativity aspects, there are performance aspects as well. When we use the Document Object Model (DOM) to deliver rich and engaging experiences, we need to write code the traverses the tree of elements and manipulates them. With the canvas, we don’t have to worry about the DOM because we are controlling everything on the canvas ourselves improving the performance (assuming we don’t write garbage code).

Here is an example of a simple canvas of a red box that the user can control and jump around with on the screen. You’ll notice that if you use your F12 Developer Tools that there are no elements inside of the canvas as our code is handling the creation and interaction of the red box.

clip_image002

Here is a link to the code.

Getting Started

Although drawing and managing every pixel on a screen can sound intimidating, there are plenty of tools out there to help you get started and to make your life a little bit easier. Here are a few resources to get you looking in the right places:

Notable HTML Mentions

As I mentioned earlier, there are too many features for me to go over in a single post, but here are a few more notable HTML-based features that I consider pretty amazing.

CSS Styling

Even though HTML is great on its own, when you give it some style, that is when it really pops. Cascading Style Sheets (CSS) give us more than just styling, but a great way of applying styling rules to our DOM. It even provided us with selector syntax which is easily one of the most useful features inside of the HTML space.

There are a ton of features inside of CSS that I could mention, but one really stands out as my favourite: Media Queries.

Media Queries

A Media Query is CSS code that allows a developer to write CSS code that is specific for media types and features. For example, if someone is viewing your app on a mobile device with a small screen, you can write styling rules that will only apply to mobile devices with a specific screen width.

This is a feature that has was around before HTML5, but has been enhanced with CSS3 (which is considered part of HTML5).

I would write my own example, but there are too many great ones already out there. Plus, I tend to use CSS and HTML frameworks that apply media queries, like Twitter Bootstrap. If you take a look below, you’ll see how the page looks different with different screen sizes.

clip_image004

clip_image006

clip_image008

As you can see, as the screen width gets smaller, the elements on screen change. Namely the placement and spacing around the KendoUI add, and the header navigation. This is the power that are Media Queries, a single code base, multi-device support.

Getting Started

The easiest way to get yourself started with Media Queries is to use a framework that supports them (such as Twitter Bootstrap). If you want to write your own, then here are a few other resources that can get you moving in the right direction.

Notable CSS Features

Media Queries are my favourite, but there are a number of CSS features that have been included in HTML5 that have made my web development life that much easier.

JavaScript

JavaScript has been the source of the real power in HTML apps since Netscape introduced it. With JavaScript being one of the core technologies that are considered in the HTML5 movement, there are a lot of great new features that make HTML a platform that can stand on its own.

Of all the HTML features that are included as enhancements to JavaScript, I think the best are related to providing data storage in one way or another. The one I believe to be the best is probably considered the simplest of the group: Web Storage.

Web Storage

Web Storage is pretty self-explanatory, as it is storage for the web. It works by adding two objects to the global namespace in JavaScript sessionStorage and localStorage that the developer can use key value pairs to store variables. The sessionStorage object provide storage for the user’s current session, while the localStorage object provides data storage that persists across sessions.

Here is an example (view the Github Gist):

clip_image010

The example is simple, but demonstrates methods in which you can use web storage. Instead of a simple text string from a textbox, you can store RGBA values for backgrounds, or base 64 encoded strings for data. You should note that the data is unsecured considering that this is stored on the client, so I would recommend against storing things like passwords and the like. Still, it is quite powerful and is definitely something that any HTML developer can leverage.

Getting Started

If the Gist isn’t enough, here are a few links to dive a bit deeper into Web Storage.

Notable JavaScript Features

I think that the features added to JavaScript with the HTML5 movement is really what has brought HTML into the forefront and out of the browser in the past few years. Here are a couple (but definitely not all) of the coolest new JavaScript features that have come with HTML5.

Thanks for playing.

~ DW