Monday, May 16, 2011

mooTools

MooTools is an open source JavaScript library released under the MIT license that allows you to build your web application entirely in JavaScript with support for Internet Explorer 6+, FireFox 2+ and Safari 3+.

The library has a modular structure consisting of the following core modules:

Along with these core modules additional modules can be added in the form of plugins.

Types

MooTools adds extra functionality to the types already defined in JavaScript using extensions known as 'types'. Array, String, Number, Function and Object all have had extensions added by MooTools. Alongside adding extensions to existing JavaScript types MooTools has adds a new type called Event.

For a full list of functions added by MooTools types see the online documentation.

 

Class Management

MooTools adds two special properties Extends and Implements. Extends simulates inheritance and Implements simulates composition.

Extends:

var Animal = new Class({ 
    initialize: function(age){ 
        this.age = age; 
    } 
}); 

var Dog = new Class({ 
    Extends: Animal, 
    initialize: function(name, age){ 
        this.parent(age); 
        this.name = name; 
    } 
}); 

var snoopy = new Dog('Snoopy', 20); 
alert(myCat.name); 
alert(myCat.age);

Implements:

var Animal = new Class({ 
    initialize: function(age){ 
        this.age = age; 
    } 
}); 

var Cat = new Class({ 
    Implements: Animal, 
    setName: function(name){ 
        this.name = name 
    } 
}); 

var myAnimal = new Cat(20); 
myAnimal.setName('Micia'); 
alert(myAnimal.name);

 

The problem with using Implements like this is that you still end up with two distinct classes. However MooTools provides a Class Method 'implement' that allows you to append the new functionality to an existing class.

var Animal = new Class({ 
    initialize: function(age){ 
        this.age = age; 
    }
}); 

Animal.implement({ 
    setName: function(name){ 
        this.name = name; 
    } 
}); 

var myAnimal = new Animal(20); 
myAnimal.setName('Micia'); 

alert(myAnimal.name);

 

Browser Interaction

MooTools provides a Browser object that contains a number of properties that return Boolean values. For example you can check if the current browser is FireFox with the following code.

alert(Browser.firefox);

Along with checking the browser you can also check the platform, if specific plugins are present and the presence of features like support for DOM queries using XPath.

 

DOM

MooTools has similar abilities to jQuery when it comes to selecting elements. MooTools uses the document.id("messageBar") this is aliased with the $ function much like jQuery (just remember using $ when you're using other JavaScript frameworks could cause in unpredictable results). The returned element is of type Element as defined in MooTools. If you wish to select multiple elements MooTools provides the $$ function that returns an array of Element instances.

The ability to manipulate the DOM is essential for an JavaScript framework and MooTools provides a number of methods to facilitate this. For example the inject method lets you inject another element into the body of a selected element.

Hand in hand with DOM manipulation is event handling and like other frameworks MooTools provides a mechanism to handle events in a browser independent manner. The addEvents method can be used to attach multiple event handlers to a single element as follows:

$('someElement').addEvents({
    mouseover: function(){
        alert('mouseover');
    },
    click: function(){
        alert('click');
    }
});

 

Effects

MooTools provides Fx types that facilitate special effects these include Fx.Tween, Fx.Morph and Fx.Transition.

 
Fx.Tween

This can be used to transition any CSS property from one value to another. This example shows how an element is selected and a Tween is created and applied to the element in an event handler.

var elm = $('myElement');
 
var myFx = new Fx.Tween(elm, {
    duration: 'long',
    property: 'background-color'
});
 
 
elm.addEvent('click', function(event){
    myFx.start('#ffffff', '#ff0000');
});

 

Fx.Morph

Similar to Tween Morph allows for the animation of multiple CSS properties at once. In the example below the background colour is changed along with the size of the font.

var elm = $('myElement');
 
 var myEffect = new Fx.Morph(elm, {
    duration: 'long',
    transition: Fx.Transitions.Sine.easeOut
});

elm.addEvent('click', function(event){
 
    myEffect.start({
      'background-color': ['#fff', '#f00'],
      'font-size': [10, 30]
    });
});
 
Fx.Transition

By default transitions are linear meaning that the transition will linearly move through all values terminating at the specified end value for the CSS property. However MooTools also offers alternatives to simple linear transitions which are all defined in the Fx.Transition type.

One point worth noting is that the Fx types support chaining therefore you can use this to create more complex animations.

 

Networking

MooTools provides the Request class that wraps the browsers implementation of XmlHttpRequest so that you are abstracted from browser specific issues when dealing with XmlHttpRequest. You simply create an instance of the Request specifying values for a number of options such as the URL. There are various options available that allow you to specify the method used to make the request, encoding schemes etc, for a full list see the documentation. Some of these properties can be used to define events that should be called in relation to the Request such as the onSuccess property.

There are two classes that extend Request, Request.HTML and Request.JSON. These classes are intended to make life easier when calling services that return HTML and JSON data. They both include the update property that specifies the Id of the element that should be updated in response to the request.

The last class worth mentioning in relation to requests is Request.JSONP. This class makes it easy to make cross-domain calls when using MooTools.

 

MooTools Plugins

MooTools plugins are classes that have been written by core MooTools developers or members of the community to add functionality to the core library. These plugins are called 'MooTools More' and can be downloaded from the official site http://mootools.net/more. The More Builder avaliable at this site allows you to select the plugins you would like to use on your site and it will conveniently bundle these with all required dependencies ensuring that the plugins will work when added to your site. Once you have downloaded the plugins you wish to use you must include them in the correct order:

    1. MooTools Core Library
    2. MooTools More Library
    3. Your MooTools script

You can learn more about MooTools More at http://mootools.net/docs/more.

 

Summary

So the big question is how does MooTools fit in with existing JavaScript frameworks such as jQuery. Well jQuery is more adapt at DOM and UI manipulation. However a framework such as MooTools offers better features in terms of actual JavaScript programming for example the features I mentioned that add more object-orientated features to JavaScript via MooTools. So while you'll probably stick with jQuery for the majority of client-side coding I think you should keep an eye on other frameworks such as MooTools as this will give you more power when you need to write actual JavaScript code and it's easy to combine these frameworks in your application.

posted on Monday, May 16, 2011 5:56:43 PM (GMT Standard Time, UTC+00:00)  #    Add Comment | Comments [0]
 Tuesday, May 03, 2011

html5-up-and-running

Given the hype you might be forgiven for mistaking HTML5 as the 2nd coming. But all joking aside this is a significant step for the web but what does it really offer web developers? Well this is a question that I feel is answered in HTML5 Up and Running.

First thing to point out is that this book at just under 200 pages, is not an in-depth coverage of all the new features coming with HTML5. But if you're like me and only want a quick overview to catch-up with current developments in HTML5 this could be the book for you.

I found this book written and presented in a very clear and friendly manner that made reading the book enjoyable. The author Mark Pilgrim and there is a little IE bashing but nothing over the top. While reading it is important to remember that many aspects of HTML5 are still in development and are therefore subject to change. Having said this I still think this book is useful. One criticism that I did have is I felt there was rather too much coverage of the media aspects such as audio and video, this criticism could be attributed to the type of apps that I find myself building most often.

Personally I enjoyed the coverage on Microdata and felt it gave me a nice introduction to get up and running with this feature. Other useful chapters included the new forms input types and the new tags such as <header>, <article> and <footer>. Other topics were interesting and well covered.

HTML5 is still evolving but this is a book that could help you catch up quickly but rather than just taking my word for it you can read the book online for free at: http://diveintohtml5.org/

posted on Tuesday, May 03, 2011 9:18:50 PM (GMT Standard Time, UTC+00:00)  #    Add Comment | Comments [0]
 Friday, April 29, 2011

Pirates of Silicon ValleyPirates of Silicon Valley is quiet an old film now but I've got to see recently. It tells the early story of Apple and Microsoft as they create the PC industry. First thing to point out is that this film does not have the same level of production as The Social Network had and as a result at times may feel like a TV movie. However if you're a geek you'll find this entertaining given the portrayals of the key characters. I particularly enjoyed John Di Maggio's performance of Steve Ballmer.

Checkout the trailer:

posted on Friday, April 29, 2011 5:35:22 PM (GMT Standard Time, UTC+00:00)  #    Add Comment | Comments [0]
 Wednesday, April 27, 2011

calibre-logoSince getting my Kindle I've amassed more and more eBooks and one of the best tools I've found to manage all these books in Calibre. This is a free and open-source tool that helps you manage your library of eBooks and best of all it's available to Windows, Mac and Linux users.

Calibre is rather like iTunes for your eBook, it allows you to define metadata for your books such as tags that allow you later to search for books. Alongside helping you to manage your collection calibre also allows you to convert books to different formats such as PDF to MOBI. Although the Kindle does support PDF I tend to prefer converting the PDF to MOBI before dropping it onto my kindle. All of which is very easily achieved using Calibre.

If you have any eBooks I highly recommend that you check out Calibre. More information and the latest version can be obtained from: http://calibre-ebook.com

posted on Wednesday, April 27, 2011 7:40:20 PM (GMT Standard Time, UTC+00:00)  #    Add Comment | Comments [0]
 Tuesday, March 15, 2011

javaTheGoodParts

I'm a fan of the effective series of books (Effective Java, Effective C# etc.)and was therefore looking forward to this book hoping to pick u a few gems I'd yet to discover. To be blunt I was disappointed. The book is well written and concise, however having done considerable Java development I found this book more of a nostalgic reminder of the advances Java had given us when it first appeared in the late nineteen nineties.

I think this book might be of use to somebody newer to the Java language who has already gotten to grips with the basics of the language as it does cover many of the topics I found I had already learnt with a combination of playing with the language and reading during my early days programming Java. However for those more experienced I think Effective Java would be a better investment of your time as I feel any reasonably experienced Java developer will find very little new information in this book.

posted on Tuesday, March 15, 2011 6:04:01 PM (GMT Standard Time, UTC+00:00)  #    Add Comment | Comments [0]