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.
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.
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.
Here is a link to the code.
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.
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.
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.
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.
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.
Here is an example (view the Github Gist):
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.
If the Gist isn’t enough, here are a few links to dive a bit deeper into Web Storage.
Thanks for playing.