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

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 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

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

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

When and Where to use sprites

Time to sprite – 3 Techniques

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.

Del.icio.us : css, sprites

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

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.

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