February 27, 2013 - Comments Off on HTML5 – We have the POWER!

HTML5 – We have the POWER!

Our development team at Bloom are experts in their respective fields. They are perfectly ripe with knowledge and veritably bursting at the seams with deliciously gooey expertise. Today marks the first of our regular technical blogs, and is brought to you by one of our newest arrivals – Sam Jenkins.

HTML has always aimed at being a semantic language, but this ambition hasn’t always hit the mark. Before HTML5, if you wanted to attach an event to multiple elements you’d probably use a class name:

[js]
$(‘a.say-hello’).on(‘click’,function(e){
e.preventDefault();
alert(‘hello’);
});[/js]

Now any anchor with class “say-hello” would display an alert: hello

This could cause confusion as the class name has nothing to do with styling and in the past it has been known for fellow developers to remove the class thinking it was redundant. In fact, there are several other issues with it as well (passing data from HTML to JS for instance).

But then along came HTML5 – and with this it turned out that you could just make-up attributes willy-nilly (as long as they start with “data-“). This means you could attach events to other attributes and leave classes alone. Here’s the “hello” example from above rewritten:

[js]$(‘a[data-say-hello]’).on(‘click’,function(e){
e.preventDefault();
alert(‘hello’);
});[/js]

Now any anchor with the attribute “data-say-hello” would display an alert: hello

That doesn’t seem like a big win to the uninitiated, but these attributes can be very powerful in the right hands.

Let’s say you want a simple generic function that shows a hidden element when a link is clicked. In HTML5 you can make-up a new attribute called “data-ui-show” and set the value to equal the ID of the element you want to be displayed:

Add the “data-ui-show” attribute to attach the listener and set it to the ID of the element you want to display (register-form):

[xml]<a href="#register" data-ui-show="register-form">register</a>

<section id="register-form" class="hide"></section>[/xml]

Now, with the simple jQuery function below, when you click on the anchor, the hidden section will display.

[js]$(‘a[data-ui-show]’).on(‘click’, function(e){
e.preventDefault();
$(‘#’+$(this).data(‘ui-show’)).show();
});[/js]

But it doesn’t stop there. You can use as many attributes as you want, meaning the options are almost limitless. What if I want to adjust the duration of the animation for the show function? I can create an optional attribute for that, as well:

[xml]<a href="#register" data-ui-show="register-form" data-ui-show-duration="600">register</a>
<section id="register-form" class="hide"></section>[/xml]
[js]$(‘a[data-ui-show]’).on(‘click’,function(e){
e.preventDefault();
var duration = $(this).data(‘ui-show-duration’) || 0;
$(‘#’+$(this).data(‘ui-show’)).show({duration:duration});
});[/js]

All of a sudden, we have a set of HTML5 attributes that front end developers can utilise without having to touch JavaScript, and HTML takes a big stride toward becoming a much more semantic place to be.

Can you think of any other way these new attributes could be used to make our lives as developers easier?