Pushing Buttons

There is a really great screencast available at Nettuts+ which demonstrates how you can 'make all browsers render HTML5 mark-up correctly.' It is a really simple trick that allows you to apply CSS for HTML5 elements.

To quickly cover what Jeffrey Way (the editor of Nettuts+) discussed, HTML5 has certain tags like <header> that are not standard in HTML4. Certain browsers like Chrome or Firefox are up-to-date and will consider this a valid element. Thus, it will then accept CSS statements for the <header> tag.

IE will show text within <header> but will not reflect anything written in the CSS for <header>. This is because it does not consider <header> a valid element and, more or less, ignores it.

In this post I discuss how Way goes about solving this problem, and how it can be extended further.

Lately I've been working on a personal project, Deft, which is a JavaScript framework. Like everyone else I've been using existing frameworks to develop with. But over time I have gained a better understanding of the language and an idea of what methods a framework should offer. Deft is my effort to bring that idea to reality.

The following is an extremely quick glimpse of the functionality offered by Deft-0.5.js, an early build. In this post I will be focusing on working with elements. The framework is not complete so there will be more to come. But there is already a great deal of functionality.

$('header')
     .attr('style', {
          'color': 'red',
          'font-weight': 'bold'
     })
     .$('nav')
          .attr('style', {
               'opacity': 0.5
          })
     .back()
     .addClass('ready');
In this example the element with an ID of 'header' is selected and its color and font-weight styles are set. An element within 'header' with an ID of 'nav' is then selected and a 50% opacity is applied. The chain then uses back() which returns to $('header') to which we end with adding a class of 'ready.'

String trimming has become a standard in APIs. In JavaScript there is no standard method to do this. So, most libraries like jQuery and MooTools add in their own trim functionality.

Adding a simple trim method is easy. All you need is the following code:

String.prototype.trim = function() {
     return this.replace(/^\s*|\s*$/g, '');
};
Now you can do the following:

"     asdf    ".trim();
// "asdf"

"asdf".trim();
// "asdf"
This proves really useful. But it could be better. In PHP you can send an optional second parameter to their trim function that allows you to define characters to be trimmed. By default the function trims white space.

In JavaScript there is a sort function for arrays. Though, the result will take into account the case of each character. Therefore you can have something like the following happen.

var a = ["john", "April", "tim", "Zoe"];

a = a.sort();

// a is now ["April", "Zoe", "john", "tim"]
Using MooTools you add a method to the Array object which will allow you to sort while being insensitive to case.

I often notice web developers misunderstanding the syntax of JavaScript functions. Even after a few years of experience. It can be a bit difficult to understand the different ways in which you can implement functions. Take a look at the following code.

function addOne(val) {
     return val + 1;
}

var addTwo = function(val) {
     return val + 2;
};

window.addThree = function(val) {
     return val + 3;
};

window["addFour"] = function(val) {
     return val + 4;
};
All of these will work. The first declaration, for addOne, is usually the most familiar. It is pretty straight-forward. The declaration of addTwo achieves the same end result. You start by defining a variable, addTwo. Then you set addTwo equal to a function. In both cases you end up with a variable which are set equal to a function.

With addThree we are setting window.addThree equal to a function. In reality, window.addOne and window.addTwo are already set as well. You can think of window as the root object in which all else stem from.

The declaration of addFour is virtually the same as addThree except that you are using a slightly different syntax to define the child node of the window object.