HTML5 “Stack”

Lately I have been doing a lot of work with what I am calling the HTML5 Stack.  This stack consists of HTML5, CSS3, JavaScript, jQuery and jQueryUI.

I am very impressed with the breadth of capabilities that the stack delivers to the application developer.  From the much improved semantic correctness of HTML5 to the wonderful new additions to css in CSS3, I have been really enjoying the new play ground.

As simple example…

One of the issues a developer faces is when to put up a message and when to take it down.  This seems like a trivial issue but the orchestration makes it sometimes quite complex.  Say we have an error message that we want to place on the web page but the when and how to dispose of that message can get quite messy.

The other day I focused on the issue for a project and found that with a couple of little lines of code the problem just goes away.

The Page

<meta charset="utf-8" />
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.css" rel="stylesheet" /> 	
<link href="css/myCss.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.1.custom.js"></script>

<input id="errorMessage" type="text" value="Yo John" /><a id="lnkClose" onclick="closeErrorMessage()" href="#">x</a>
<input id="showHide" onclick="showErrorMessage('Yo man this is cool', 5000, true)" type="button" value="Show" />

MyScripts.js

$(function () {
     $('#errorMessage').hide();
});

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Show an error message for 5 seconds (1 second = 1000 milliseconds)
showErrorMessage = function (message, duration, IsSticky) {
   $('#errorMessage').show();
   $('#errorMessage').val(message);
   if(!IsSticky) {
     $('#errorMessage').fadeOut(duration);
   }
   else {
     $("#lnkClose").show();
   };
};

closeErrorMessage = function () {
   $("#lnkClose").hide();
   $('#errorMessage').fadeOut(0);
}

In this example you can now display an error message with a timeout value (1000 = 1 second) or sticky so that the user has to dispose of the error on a case by case basis.

Historically this would have been a task of determining when the event should be shown, when it should be removed, what each of the initiating events would be and on and on. Now it is just show the error set the timeout and move on with the rest of the interaction.

I have decided to spend the next 12 to 18 months really mastering this “stack”. I would be pleased if you would join me on this adventure.

Thanks
JD