The site features a neat Slideshow / Thumbnail Gallery implementation using MooTools and Flash (utilising the Swiff utility of MooTools 1.2).

A demo can be seen on the Bramham Lodge Apartment page.

The SlideShow makes use of Flash to create easily customisable image transition effects that are not possible with JavaScript alone. A collection of MooTools classes are employed to mange the Swiff interface and control the slideshow.

Key Features

• Images are not hard-coded into flash: no need to recompile the SWF when adding/removing or re-ordering the gallery as all data is presented in the XHTML markup.
• Extensible and customisable: The slideshow class makes use of MooTools Events so that add-on classes can be created for bolt-on features whilst being kept separate from the core functionality.
• Accessible: No content is hard-coded into flash, search engines are able to index all the information.

The modular nature of the code and the ability to change the implementation using bolt-on functionality has allowed me to re-use the same set of classes on an upcoming project in a completely different fashion, making use of the great features of Flash without sacrificing indexable content and accessibility.

For example, making links open in new windows using the target attribute is unsupported by XHTML.

There are two solutions I know of to get around this:

1. JavaScript

The DOM specification allows the use of the target attrbriute. So, mark each link you want to open in a new window using rel="external". When the page loads use JavaScript to find all these links and add a target="_blank" to each using DOM.

In MooTools the code would look like:

window.addEvent('domready', function() {
    // rel="external" links open in new window
    $$('a[href][rel="external"]').each(function(anchor) {
        anchor.setProperty('target', '_blank');
    });
});

For a raw JavaScript solution and more information on this approach see this Sitepoint article.

2. Extending XHTML

Simply extend XHTML to support the target attribute and continue using target="_blank" whilst still producing perfectly valid XHTML!

Essentially you extend the default XHTML DTD to enable the XHTML Target Module (which is not enabled by default) and then modify the page DOCTYPE definition to point to the extended DTD.

The full details and how to implement it can be found here at TexaStar.

Currently I am using the JavaScript workaround. However, modifying the XHTML definition to make it work for me is a very elegant solution that I would look to implement in the future.

I will be posting more of these short guides on using MooTools in the upcoming weeks. Each will focus on a small problem and solve it with MooTools with the aim of being a useful way to learn the framework.

Chaining you say!

Chaining is very powerful and whilst it is similar to Effect.Queue in Script.aculo.us, it can do much more! The aim of this brief tutorial is to show you how to use MooTools Chaining in the context of queueing effects coupled with other arbitrary actions. However, you will see that you can easily apply Chaining to do much more than that.

From the MooTools 1.2 Docs:

A Utility Class which executes functions one after another, with each function firing after completion of the previous. Its methods can be implemented with Class:implement into any Class, and it is currently implemented in Fx and Request. In Fx, for example, it is used to create custom, complex animations.

Chain can be used as a stand-alone class but becomes much more powerful if you implement it into classes of your own.

In this tutorial I will be creating a class which implements Chain. The Chain class belongs to the Class.Extras component so you will need to make sure that you select Class.Extras and all its dependencies when downloading MooTools.

Implementing Chain

First of all we need to implement the methods and properties of the Chain class into our own class:

var ChainExample = new Class({

  Implements: [Chain]

});

Our class now has the following methods available to it:

• Chain::chain – Pass any number of functions to add them to the bottom of the call stack.
• Chain::callChain – Pops a function off the top of the call stack and executes it.
• Chain::clearChain – Removes all functions from the call stack without executing any.

Using Chain to Execute Actions in Order

Now we have implemented Chain into our ChainExample class we are ready to make use of the functionality it provides.

The ChainExample class will add events to three button elements. When a button element is clicked a corresponding panel will appear. Before this happens all other panels will be faded out. Chaining is used to make sure that these events happen in the order we want.

The full code for ChainExample is:

/**

 * Add events to buttons. Clicking a button will hide all panels before showing the panel corresponding to that button

 */

var ChainExample = new Class({

    Implements: [Chain],

    /**

     * Define the element ID of the button and the element ID of the corresponding panel

     */

    actions: new Hash({

        'button-one': 'panel-one',

        'button-two': 'panel-two',

        'button-three': 'panel-three'

    }),

    /**

     * An Array to store an effect instance for each panel

     */

    effects: [],

    initialize: function()

    {

        /**

         * Add an onclick event to each button. Clicking a button calls the showPanel method

         */

        this.actions.getKeys().each(function(buttonId) {

            $(buttonId).addEvent('click', this.showPanel.bindWithEvent(this));

        },this);

        /**

         * Create an Fx object for each panel

         */

         this.actions.getValues().each(function(panelId) {

            this.effects[panelId] = new Fx.Tween($(panelId), 'opacity', { duration: 'short', onComplete: function() { this.callChain();}.bind(this)});

         }, this);         /**

          * Initialize by hiding all panels, note the call to callChain to cause stuff to happen

          */

        this.hideAll();

        this.callChain();

    },

    /**

     * Add the a actions required to hide all panels to the Chain call stack

     */

    hideAll: function()

    {

        /**

         * loop each panel and Chain: 1. fade the panel, 2. set the display property to "none" after the effect has finished.

         *

         * Note that this function does not actually cause anything to happen, it simply adds actions to the Chain

         */

        this.actions.getValues().each(function(panelId) {

            this.chain(

                function() { this.effects[panelId].start(0); },

                function() { $(panelId).setStyles({'display': 'none'}); this.callChain(); }

            );

        },this);

    },

    /**

     * Handle a button click by fading and hiding all open panels and then appearing the corresponding panel

     */

    showPanel: function(event)

    {

        this.hideAll();

        var panel = this.actions.get(event.target.get('id'));

        this.chain(

            function() { $(panel).setStyles({'display': 'block', 'opacity': '0'}); this.callChain(); },

            function() { this.effects[panel].start(1); }

        );

        this.callChain(); //this call starts the chain. Since each function in the call also makes a call to callChain the entire stack will be executed

    }

});

window.addEvent('domready',

    function()

    {

        var myChain = new ChainExample();

    }

);

I will only go through the code relevant to chaining in detail. Lets have a look at each important part:

ChainExample::initialize

In the constructor we bind behaviours to the buttons and create Fx objects for the panels. Notice the custom onComplete callback provided for each Fx instance. This tells the internal chain stack to pop the next function and run it right after the effect has finished. We are now able to execute any function as soon as the effect completes.

ChainExample::hideAll

Look at this method carefully. A call to ChainExample::hideAll() does not actually hide the panels. The method adds to the chain stack a set of functions that will fade and hide each panel in order. To get the panels to actually hide we must execute the chain stack using this.callChain().

Notice how the second function passed to this.chain invokes this.callChain(). The function is telling the chain stack to continue onto the next function by itself.

Another important thing to note is that there is no need to bind the function passed to this.chain as this is dealt with internally.

ChainExample::showPanel

This is the event handling function that will show a panel.

First off a call to ChainExample::hideAll() is made. Remember that this method doesn’t cause anything to happen immediately. At this point we have added all the steps needed to hide all the panels to the chain stack. We then proceed to add steps which will show the correct panel.

Once the entire chain stack is set up this.callChain() is executed and the entire stack will be called because each step makes its own call to this.callChain() once it has finished.

That’s the basics of Chain. We have created a class which allows us to combine any number of effects and arbitrary functions and ensure that the are executed in the order we want. Hence the basic idea of Chain is to create a stack of functions and execute them in the order you please whenever you please.

Downloadable Demo

I have put together a quick demo so that you can see the code in action. Download the demo here.

Further Considerations

In my example, every function in the chain stack makes a call to this.callChain() once is has completed. This means that as soon as the first function is executed (by manually invoking this.callChain()) the entire stack will run from start to finish automatically. Chain can be used in a different fashion where Chain::callChain() is always invoked externally. As a crude modification to my example, every click on a button could invoke this.callChain(). Thus each button click takes one further step to completion of the actions.

If you need to add timings and delays consider using Function:delay to delay the invocation of Chain::callChain().

It is also possible to use multiple chains in the same class for even more complex behaviour. This would involve using separate instances of the Chain class directly.

From the Lightview project site:

• Clean: Designed to compliment your images.
• Fast: Images and their neighbours are preloaded.
• Easy to customize: You don’t even have to know CSS.
• Rounded: Adjustable rounded corners, without PNGs.
• Smart resizing: Images will always fit on your screen.
• Slideshow: One button slideshow.
• Effects: Using Scriptaculous.
• Works on all modern browsers

Lightview is similar to Lightbox 2 and both are built with Prototype and Scriptaculous. However, there are a few differences I noticed:

• The morphing effect that Lightview uses is a refreshing change (probably because I have seen the Lightbox effects too many times!).
• Lightview allows you to customise many of the visual aspects of the viewer programatically. For example, the background colour and corner radius.
• Lightview supports a customisable slideshow option which Lightbox lacks.
• Lightview uses the caption attribute of the <a> tag to give images a caption. This attribute is not valid XHTML and thus its usage will produce invalid markup. I would suggest using a convention similar to that used by MooTools Tips: title="image title :: caption"
• Lightbox has been around for a while and is well tested and proven.

Personally I like the look of Lightview but I wouldn’t use it because I don’t like invalid markup!

If you are interested in something similar for the MooTools framework, try Slimbox.

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API (mootools.net).

I downloaded MooTools version 1.2 beta 1, which is feature complete but not fully tested. If you are interested in what’s new in 1.2, see the MooTools blog: 1.2 beta 1.

My first impressions of MooTools were good and whilst I haven’t mastered the ‘Moo way of doing things,’ I got to grips with it quickly.

Comparison with Prototype

This is not an exhaustive comparison, it’s just my first impressions.

• In MooTools effects are a Core component. With Prototype you need an additional effects library (e.g Script.aculo.us).
• When downloading MooTools you are able to select only the components you need and you are given the option of compressing the library.
• I prefer Prototype’s documentation style. Initially I found MooTools hard to learn because the API documentation does not give sufficient examples of good practice etc…
• I’m a fan of Dean Edward’s Base and MooTools has a really nice implementation of it.
• MooTools acknowledges Prototype as an awesome library and a lot of code is based on Prototype.
• Currently there is no central repository for MooTools extensions that I know of.

Prototype 1.6.0 weighs in at 121KB. Similarly, MooTools 1.2b1 (all components, uncompressed, no documentation) is 120KB. However, there is no need for an additional effects library and you can cut down the size of the MooTools library by removing unwanted components.

As I learn more of MooTools I will post more advice and tips on using MooTools from a Prototype background.

Resources

• MooTools.net
• What’s new in MooTools 1.2
• Mootools 1.2 Documentation
• MooTools Mocha UI (MooTools/Canvas UI class)

Performance Optimisation

Whilst the 13 factors are well explained, there is no real information on how to improve the page. All you know is how well your site performs in that area aswell as getting a good description of why it is important. The lack of solutions and methods of improvement turns out to be a good thing since it drives further research into how to improve page performance.

This article focuses on a very handy, cool, simple PHP script that can drastically improve the performance of your site without much effort at all!

Combine

The script is called Combine and is written by Niels Leenheer

Basically, the script has two main aims: reducing the number of HTTP requests made per page, and reducing the size of JavaCcript and CSS files to improve page load times. The script is highly effective and is easily integrated into any existing site. The performance improvement is pretty impressive, it improved my YSlow grade drastically.

Combine does a number of things and is very well focused in its purpose. Here is a quick overview:

• Allows you to make requests for several CSS and JavaScript files with far fewer HTTP requests.
• Combines and compresses individual CSS/JavaScript files into one compact file.
• Utilises advanced caching and header techniques to cover every aspect when it comes to improving page loading times.
• Works in a way that is non-invasive – you won’t need to do anything drastic to incorporate it into your existing system.

The integration of Combine into a new or existing site is easy and you will be reaping the rewards in terms of performance improvements in no time.

Example:

without Combine the includes for my gallery page would look something like:

<!-- include external CSS files -->
<link rel="stylesheet" type="text/css" href="/styles/layout.css" />
<link rel="stylesheet" type="text/css" href="/styles/styles.css" />
<link rel="stylesheet" type="text/css" href="/styles/navigation.css" />
<link rel="stylesheet" type="text/css" href="/styles/banners.css" />
<link rel="stylesheet" type="text/css" href="/styles/features.css" />   

<link rel="stylesheet" type="text/css" href="/styles/print.css"  />
<link rel="stylesheet" type="text/css" href="/styles/geshi.css" />
<!-- include JavaScript required for gallery -->
<script type="text/javascript" src="/script/lib/effects.js"></script>
<script type="text/javascript" src="/script/lib/builder.js"></script>
<script type="text/javascript" src="/script/imgRoll/roller.js"></script>
<script type="text/javascript" src="/script/imgView/viewer.js"></script>

With Combine this becomes:

<!-- include external CSS files-->
<link rel="stylesheet" type="text/css" href="/styles/layout.css,styles.css,navigation.css,banners.css,
                       features.css,print.css,geshi.css" />
<!-- include JavaScript required for gallery -->
<script type="text/javascript"
src="/script/lib/effects.js,lib/builder.js,imgRoll/roller.js,imgView/viewer.js"></script>

As you can see in the Combine version, the files you wish to include are just separated by commas. This reduces the amount of markup, the number of HTTP requests made and the size of the HTTP requests (since Combine compresses files using GZip). Combine will cache the combined files so that server side processing time is also reduced on subsequent requests. Combine allows you to keep your files well structured without having to worry about making too many HTTP requests!

Conclusion

Overall, Combine provides a huge performance improvement for most pages whilst being easy to integrate into existing systems. The purpose of Combine is well defined and it doesn’t try to do more than is needed.

For detailed information see the Combine page on Rakaz.

As an AJAX application developer many of the tools are focused on debugging Javascript and analysing HTTP requests and responses. I try to make developing sites as easy as possible. Many of the tools discussed also make designing sites easier. There is no mention of PHP tools and utilities here as I think that deserves a separate post.

Web Developer Toolkit

This Firefox extension contains a vast array of tools and links to other tools to make general web development easier.

Some of the highlights of this extension (and by that I mean the features I use the most) are:

• Quick disable Javascript – You should always check how a page looks and works without Javascript. This is great for usability testing andallows you to see the page how a search engine would see it.
• Outline Elements – Lets you visualise how your site is arrranged in terms of the layout of block elements.
• Resize Browser Window – Lets you see how a page will look in different screen resolutions with ease.
• Validation Tools – Quick links to w3’s HTML, CSS and link validation tools
• View generated source. See the XHTML source as it looks after Javascript has manipulated the DOM!

There are so many other features in this extension, some of them I didn’t even know about until now. This is a must for any serious developer.

Go to the Web Developer Toolkit site.

DOM Inspector

This Firefox extension allows you to view the page DOM as a tree of elements. Any changes made to the DOM by Javascript are shown here. This tool is great for finding out how Javascipt is changing the page layout and debugging errors associated with it. Although it provides similar functionality to the ‘view generated source’ function it can be much more useful for pages in which Javascript is heavily modifying the DOM.

Go to the DOM inspector extension site.

Live HTTP Headers

I cant live without this! This extension allows you to check the HTTP headers sent and recieved as you request pages. This is useful in so many areas.

In particular I find it useful when doing url rewriting, checking that expiriy headers and eTags are working. This extension is a must when developing AJAX applications since it acts as a layer inbetween the client and server, allowing you to see the requests that Javascript is making and the responses that the server is sending. This is the perfect debugging tool for AJAX development.

Go to the Live HTTP Headers site.

Colorzilla

This little extension is a colour picker and allows you to quickly and easily get the HTML HEX code of different elements on any site. This is a great tool for designing, particularly when creating a new page element in the style of the original site.

Go to the Colorzilla site.

Firebug

The best Javascript debugger around. However, Firebug is much more than that. Even though Firebug is a Firebox extension itself, you can get extensions for Firebug!

Apart from the Javascript debugger, some other cool features available are:

• Live HTML and CSS editing. Fancy seeing how a page would look with a different background color? Simply edit the CSS in Firebug and see foryourself.
• Net performance – See how many HTTP requests are being made for the page, how long each resource takes to download, resouce size, amount ofresources in cache and much more. Perfect when optimising your site.
• Javascript Profiler. Allows you to improve the speed of your code by giving you a full report on what functions are called and how long theytake to execute.

Go to the Firebug site.

YSlow

YSlow is an extension for Firebug developed by Yahoo. It creates a performance report of your page, gives the page a grade and suggests how you might improve load times and reduce the number of requests and the size of the page.

Whilst not being very clear on the best way to improve your page, it acts as a good guide for further research. Using YSlow I have improved the load times of my pages greatly and discovered some very cool techniques in the process. Future news posts will discuss these techniques in detail.

Get a performance report for your site now with YSlow.