This blog has got a new home http://the-taylors.org/blog

After running my blog on wordpress for several years now I felt it was time to integrate it in to my website so this blog has now got a new home:

http://the-taylors.org/blog

I have just added a new article on how to add jsLint checking directly in Visual Studio

You can subscribe to the feed at:

http://feed.the-taylors.org

Thank you for reading and keeping in touch.

Dave

Including jsLint in your validation using nAnt, batch files or AJAX

jsLint is a fantastic tool developed by Douglas Crockford, Yahoo!’s JavaScript architect which will validate JavaScript source to a strict specification which often catches hidden errors.

As the website says jsLint will probably “hurt your feelings” as it enforces conventions which not everyone would like…however, I would recommend you include it within your build scripts and work through any issues it throws up. You will be grateful of it in the end!

I am going to take you through ways to integrate jsLint in to a nAnt build process, or just be able to run it manually locally on Windows.

You can download all the example files for this post.

Setup

Download the relevant files needed and customise the jsLint.wsf defaults (line 56) to fit with your preferences. I have included a less strict version for this example.

1. Running jsLint manually

You can run jsLint manually on your js files by passing their location as the first parameter of jsLint.bat. The location can be an absolute or relative location. Here are some examples:

jsLint.bat c:\project\js\test.js

jsLint.bat ..\..\js\test.js

You may want to create another batch file which will run it on multiple files to save you having to type the locations in every time.

2. nAnt build target

You can include these tests within nAnt build scripts so that the build fails if the JavaScript doesn’t validate. Here is an example build target (download).

<target name="jsLintValidation" description="validates JS files">
  <foreach item="File" property="jsfile">
    <in>
      <items>
        <include name="${siteroot}\js\*.js" />
      </items>
    </in>
    <do>
      <exec
        program="${jslintdir}\jslint.bat"
        commandline="${jsfile}" />
    </do>
  </foreach>
</target>

3. Using AJAX within your JavaScript Unit tests

The beauty of jsLint is it is writted in JavaScript, which means that you can use the functionality within a browser. This won’t work on static sites because of security issues with XmlHttpRequests, but if your tests are on a hosted site then you can load your JavaScript using AJAX and run them through jsLint.

It’s as simple as running the JSLINT function (example, download):

var myResult = JSLINT(source, option);

If it checks out, JSLINT returns true. Otherwise, it returns false and you can inspect JSLINT.errors to find out the problems. Details of the structure of JSLINT.errors can be found within the comments of the fulljslint.js file.

Let me know how you find jsLint as a validation tool, or please feel free to ask any questions.

Del.icio.us : jsLint
Flickr : jsLint

juxtapo plugin framework…feedback wanted

I am appealing for your thoughts. You may have taken a look at juxtapo front end tools which includes an in browser templating system for overlays. It includes an API which has been designed to allow developers to extend the core functionality with plugins. I want to extend this so that juxtapo could be aware of available plugins and also plugins could communicate and be aware of each other.

Juxtapo plugins generally initiate themselves as Juxtapo does and extend the core functionality. An example of this is the QUnit plugin which allows the developer to link a number of unit tests to a particular template. It hooks in to the API and once juxtapo has initialised looks up the current template and runs the tests.

What are your thoughts on the following ways which this could be done?

1. Constructor

This method uses a Plugin constructor to create a Plugin object which could then be assigned to a variable.

juxtapo.plugins.newPlugin = new juxtapo.Plugin({
    init: function(){
        juxtapo.initComplete(function(){
            // functionality added on initConfig
        });
    },
    publicVar: 'public'
});

or

juxtapo.plugins.newPlugin = new juxtapo.Plugin(function(){
    juxtapo.initConfig(function(){
        // functionality added on initConfig
    });
    privateVar = 'private';
    return {
        init: function(){
            juxtapo.initComplete(function(){
                // functionality added on initConfig
            });
        },
        publicVar: 'public'
    };
});

2. Add Function

This method uses a function to create a plugin object with defaults and then allow you to customise it. It would then add the resulting plugin to the variable name provided by the first attribute.

juxtapo.plugins.add('newPlugin', function(){
    // this is the function to construct the plugin which has defaults
    // created already
    juxtapo.initConfig(function(){
        // functionality added on initConfig
    });
    // optional init function which would be fired by juxtapo just before
    // iniComplete
    this.init = function(){};
    this.publicVar = 'public';
});

3. Anonymous Function

This method is very open. When juxtapo initialises it will check to see if there is an init function and if it finds one it will call it, otherwise you can attach listener functions to other juxtapo events.

juxtapo.plugins.newPlugin = function(){
    juxtapo.initConfig(function(){
        // functionality added on initConfig
    });
    return {
        init: function(){},
        publicVar: 'public'
    }
}();

3. Create Plugin Function

This works in very much the same way as the add function but uses another function to return an object which can be assigned to the newPlugin variable.

juxtapo.plugins.newPlugin = juxtapo.createPlugin(function(){
    // this is the function to init the plugin which has defaults
    // created already
    juxtapo.initConfig(function(){
        // functionality added on initConfig
    });
    this.init = function(){};
    this.publicVar = 'public';
});

I will be converting the current example juxtapo plugins for the next release v0.8 to use which ever method we feel is the most intuitive and simple to develop with so your help and thoughts will be very much appreciated. If you know of any standards for framework plugins then let me know as well. Thanks in advance.

Del.icio.us : juxtapo

juxtapo now passing jsLint

I have been doing a lot of work on the next version of juxtapo (version 0.7). I’m heading towards the big 1.0 release where I want to have a stable and consistent API along with a well tested and reliable system. Part of this has been to get the core juxtapo library passing jsLint tests.

Here is a screen shot of the current version 0.7a:

Also thanks to Arnold Zokas the combiner project will be separated and see some significant improvements to functionality and stability.

Work on the juxtapo website has started and I’m thinking of including a config generator to get people off to a quick start.

Del.icio.us : javascript, jslint, juxtapo

Using Sprites: block,sliding doors and inline within the flow

Some new techniques for working with CSS sprites

Many people limit themselves when it comes to css sprites. They are convinced of limitations with sprites which I have found don’t exist. The gates are opened with these techniques to be able to use sprites creatively in pretty much any situation. We’ll look at where sprites can speed your page load times, when and where to use them and I’ll show you a new technique which I haven’t found documented before.

Before we look at specifics, here are the benefits to using sprites

1. Modern internet connections are pretty fast, which means that page speed bottlenecks are not often in the size of the download, instead on the number of requests made to the server. Using sprite files can drastically reduce the number of requests made.

   As a real world example, in a recent project I have reduced the number of image files by about 60 using the techniques below.

2. You can also include all your structural images in a single sprite file and heavily cache it therefore, exponentially relieving the load on the server with more page views.

   The following table demonstrates this with a sprite image file with 30 images inside it:

   Number of unique visitors	Number of page views	Number of server requests with individual files and no caching	Number of server requests when using the cached sprite file
   2	1	60	2
   2	4	240	2
   2	8	480	2
   4	1	120	4
   4	4	480	4
   4	8	960	4

   You should be able to see the benefits, even with 4 unique visitors. Imagine the gains made when a site has several thousand unique visitors every day.

3. Management of small images is easier. I tend to start a sprites psd to include all the images in. This means that when there is a change to any of the items you don’t have to sift through a large number of files. You can also apply changes across a set of images for older browsers or other style sheets (eg. high visibility, black and white print)

When and Where to use sprites

When you are faced with a website design look for images which:

• Are found in the main structure of the page
• Are small icons or motifs
• Very rarely (if ever) change
• Button backgrounds
• Navigation backgrounds (ie tabs, arrows)

When you can’t/shouldn’t use sprites

• Regularly changing content
• Content managed images
• Repeating backgrounds (it is possible but with many limitations)

Time to sprite – 3 Techniques

You can follow these techniques with the techniques for working with CSS sprites demo page.

As far as I can see, there are three distinct types of potential sprite usage within pages.

All of these examples make use of the following sprite image:

Block images

A common scenario where an image is placed within a block element with a fixed width and height, and either floated or positioned absolutely within the page.

#spriteBlock {
background: url(sprites.gif) no-repeat -60px -52px;
display: block;
float: left;
height: 62px;
margin: 0 15px 15px 0;
text-align:left;
text-indent: -9999px;
width: 62px;
}

Sliding doors

The sliding doors technique uses two images to fill a component which can expand and contract. One fills the left edge and the other fills the rest of an element but slides behind. I won’t go into the details of this, but if you want more background information, then here is a good article explaining sliding doors. Instead, I want to focus on how I would do this differently to utilise sprites better.

Unless you have sprites with semi transparent areas (there are still ways which we won’t cover here) you can include both the left and the right hand image in the same file. You should still find that the technique works with these minor modifications. The following is an example of a faux button with styles for hover and focus.

This uses the following markup:

<a href="link.htm" class="button"><span>button text</span></a>

Here’s the css:

a.button {
background: url(sprites.gif) no-repeat left -125px;
cursor: pointer;
height: 32px;
float: left;
line-height: 32px;
outline: none;
margin-right: 9px;
padding: 0;
position: relative;
text-decoration: none;
}
a.button:hover,
a.button:focus { background-position: left -175px; }
a.button:active { background-position: left -125px; }
a.button span {
background: url(sprites.gif) no-repeat right -125px;
color: white;
cursor: pointer;
float: left;
left: 9px;
line-height: 32px;
margin: 0 !important;
padding: 0 10px 0 1px;
position: relative;
}


The key differences shown in this example are:

• We specify the same sprite image for the parent and child wrappers.
• We use the left property instead of margins or padding to position the inner span. This exposes the right hand edge of the image over the bounds of the parent image so that you don’t see it underneath.
• We specify a right margin to make sure the width of the parent element covers the child element.

Within the flow of text

The final usage has for me been the most contentious and painstaking to find a solution to. Inserting sprites in line and within the flow of text. I have come across various solutions to this, but not stumbled across any which are completely accessible and can be used when CSS and JavaScript have both been turned off in the browser.

My solution works by placing an absolutely positioned span within a relatively positioned span. This seemed to be the obvious and simple way forward. What I didn’t bargain for was the problems I would face getting the sprite to align consistently at the appropriate height across all the browsers.

Lets look at some markup which would serve as the text representation of the image above:

<span class="sprite">&nbsp;<span>!</span></span>

The text representation of the image is wrapped within two span tags.

.sprite {
margin: 0;
padding-left: 15px;
position: relative;
vertical-align: top;
zoom: 1;
}


The outer span tag is used to allow the sprite to continue where the original was placed in the flow of the text. You can’t apply width to an inline element, and not all the browsers support the inline-block display type, so we use left padding to give the span the width it needs to cover the size of the image.

The vertical align means that the top of the parent element is positioned at the top of the line of text. This means that when we use the top:50% on the child element, it is relative to the top of the line. Depending on the context this sprite is in, you may need to use one of the other vertical-align options to achieve the most consistent rendering across all the browsers.

The zoom declaration tells internet explorer to mark the element with the hasLayout property allowing us to use the top percentage on the child span element.

An important thing to note here is that it needs the   within the parent tag to stop the line-height collapsing.

.sprite span {
background: url(sprites.gif) no-repeat -2px -2px;
display: block;
height: 14px;
left: 0;
margin: -5px 0;
padding: 0;
position: absolute;
text-align: left;

text-indent: -9999px;

top: 50%;
width: 16px;
zoom: 1;
}

The inner span element styles should be pretty explanatory.

Specify the height of the image (not the height of the line). We then use a familiar technique usually used to align elements horizontally. This time we use it to align vertically. Set the top style to 50% and the top margin to a negative amount (usually half of the height).

Again the zoom declaration tells ie to mark the element with the hasLayout property allowing us to use the top percentage.

Finally the text-indent hides the original text placed within the child element.

Considerations and things to watch out for

• If you are using this with an anchor tag, then you will need to override the default outline on focus. Firefox will show it going off the page to the left.

Conclusion

As you learn to implement these techniques you will continually find new ways of reducing the load time of your website pages. They can take a little tweaking but it’s worth the gains in the end.

References

I have used a great set of icons from http://www.pinvoke.com for this example

About the Author

David Taylor is the Senior Front End Web developer at Aqueduct based in London. He’s also creator of the juxtapo front end developer tools which are in-browser tools for design overlays and template previews. David’s website and blog is at http://the-taylors.org.

Del.icio.us : css, sprites

Slow DNS response: Firefox on localhost and Visual Studio/Cassini

This post has been moved to http://the-taylors.org/blog/2010/03/16/slow-dns-response-firefox-on-localhost-and-visual-studio-cassini/

liScroll jQuery news ticker customisation with next/previous/play

This post has been moved to http://the-taylors.org/blog/2010/03/15/liscroll-jquery-news-ticker-customisation-with-next-previous-play/

Your Green Idea – flowers, bees and hijacking

Today is the launch of Phase 2 of ‘Your Green Idea‘, part of Marks and Spencer’s Plan A initiative to become the world’s most sustainable major retailer by 2015.

We’ve had a few challenges with this project the main one being part of the remit was to build the site so that particular links would slide elements of the current page out and elements of the new page in from either the left or right hand side of the screen. The background to the header needed to go behind the logo and the primary navigation; and the content needed to sit on top.

You can visit the Your Green Idea site at http://yourgreenidea.co.uk

Finally managed to release a beta for juxtapo

Phew, I’ve been working hard at getting unit tests done, bugs ironed out and docs written so that I can get a release of juxtapo out and now it’s here.

juxtapo is a personal project I’ve been working on which gives in browser overlays and previews for template building. It’s been so valuable to me in my day to day work that I thought I should share it out.

So take a look and let me know what you think.

We’re building the new Lloyds.com

It’s now public that we’re building the new Lloyd’s of London website. The news went up on Aqueduct’s blog last week.

Progressive enhancement

This site is pretty feature rich and has been a lot of fun to put together so far. It has been very important for me to keep to good web standards and to make sure the front end is accessible to the broadest audience. We’ve used the progressive enhancement approach and built a rich interface on top of an underlying no-javascript-required base.

More info

The site is looking to launch in 2010, more info at http://www.aqueduct.co.uk/blog/2009/12/were-building-new-lloydscom.html