life moves pretty fast. If you don’t stop and look around once in a while, you could miss it

Ferris Buller

The last time I blogged about my life I had just left my Job as Lead Front End Developer with Tesco Property Market. I’d been there for 2 years and to be honest things weren’t going the way I’d hoped, so I took a role with Madgex in Brighton.

Madgex are well respected in the web development community, they sponsor a number of tech events in Brighton. It looked like exactly the sort of role I’d been looking for & I was excited to join the team there. Then the recession hit. And Madgex ended up having to make dramatic job cuts & I found myself out of a job. I have to admit, I wasn’t actually all that upset – I’d been tempted for a while to go contracting but I’d never had the balls to go & do it. This was my chance.

So that’s what I’m doing. It does mean a bit of uncertainty & less time with the kids, but I am quite enjoying the variety.

It has rapidly gained popularity with web developers and designers – now software manufacturers are starting to take note with industry leaders like Adobe & Microsoft adding tools to their web development environments to help make jQuery development even quicker.

Microsoft Visual Studio 2008

I spoke previously about getting Jquery intellisense in Visual Studio 2008. Since then Scott Guthrie announced that that Microsoft will be shipping jQuery with Visual Studio going forward and then just yesterday I spotted this article on the Visual Web Developer Team Blog with interesting updates to VS2008′s jQuery intellisense. The best development from my point of view is the ability to get code hints in your aspx & master pages, not just your .js files.

In order to take advantage of these improvements you’ll first need to install Visual Studio 2008 Service Pack 1and this hot fix.

Next download the jQuery IntelliSense documentation file and save it in to your website in (probably a good idea to put it in the same folder as your jQuery file).

To add jQuery intellisense to a javascript file simply add this line to the top of the file:

  /// <reference path="jquery-1.2.6-vsdoc.js"/>

To add it to aspx & master pages do add the following lines to the head of your document.

    <% if (false)
       { %>
        <script src="~/[PATH_TO_REFERENCE_FILE]/jquery-1.2.6-vsdoc.js" type="text/javascript">
        </script>
    <%} %>

Points to note:

• The “if (false)” statement will prevent the link to the reference file being rendered at runtime.  Microsoft are planning to release a hotfix to automatically search for the vsdoc file if the javascript file has a reference path in it meaning that these links in the head will become redundant.
• If you are using aspnet’s MVC framework you need to ensure that your path to the reference file starts with a tilde otherwise VS will not find the reference file.
• dding a link to the reference to a master page means all aspx pages that inherit that master page will have intellisense enabled.

Adobe Dreamweaver

CS4

Adobe have just released Dreamweaver CS4 which also has support for jQuery code hinting. Adobe have taken a different approach to Microsoft, they use “introspection” to parse any javaScript files you have linked to your page and provide code hints.

This seems to work pretty well, and even handles chaining. However, I do have a couple of minor gripes. Firstly as soon as I typed “$(” dreamweaver told me I had a syntax error which really confused me, in the end I realised that just had to keep typing and DW would eventually figure out what I was doing. The other thing is, as a VS user I’m used to to code hits appearing strait away, in DW you have to press Ctrl + [space]. It’s not a big deal but would take some getting used to.

Older Vesions

Users of older versions of Dreamweaver this extension from Chris Charlton adds excellent code hints for jQuery & jQuery UI and what’s more it prompts you as soon as you hit “.” good work Chris!

On longer or complex forms users can find it difficult to see where the errors actually are.

The other week our QA manager asked us (the front end team) to scroll to the first error on a page. I started off thinking that it was going to be difficult and time consuming to achieve, but with the awesomeness of jQuery & one little-bitty plugin I was able to achieve the desired effect in  3 or 4 lines of code.

This technique relies on you already having validated your form and added a class of “error” to you the markup, either on the form elements or an error message.

You will need

• jQuery
• The scrollTo plugin (I used the minified version)
• A web page with some errors on it
• a couple of old yoghurt pots and some sticky back plastic.

And here’s the code

add this to the head of your document:

    <script type="text/javascript" src="/JQuery.js"></script>
    <script type="text/javascript" src="/jquery.scrollTo-min.js">
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            $(".error:first").attr("id","firstError");
            $("#firstError").each(function (){
                $.scrollTo("#firstError", 800);
            });
        });
    </script>

And Bob’s your uncle!

Please let me know if you found this technique useful.

Usability testing is something I’ve been itching to do properly for years; I’ve been trying to sell the idea to various bosses ever since I read Steve Krug‘s excellent Don’t Make Me Think.

Andy’s session demonstrated that effective usability testing really is within reach. He started off with a real world example – getting people who don’t drink much wine to evaluate three different bottle openers. This had the rather pleasing upshot of there being several open bottles of wine that needed consuming during the course of the afternoon. From there Andy moved on to the main presentation which was informative and entertaining, you can see a version of the slides he used here.

At the end of the session Andy announced that Silverback, the application that clear left had been making a noise about for a couple of months was in fact a tool for doing usability testing on the mac, and we would all be getting a beta copy to play with. As a recent mac convert I was keen to give it a spin.

At work we had already scheduled in some usability testing on the product we are developing so I was able to try Silverback out almost straight away.

Silverback is incredibly straightforward to use, you create a project and then set up a new test session with in that. In your web browser of choice you navigate to the site you’ll be testing then, when you are ready to start your test click “Start Session” in silverback, the screen fades to black with the words “press SPACEBAR to start” displayed in large friendly letters.You can pause and restart recording during the session, using your apple remote if you have one. Youcan also use your remote to mark places where your tester runs in to difficulty apparently.

Once you have finished your test you can make notes and export the session. I love the way Steve the gorilla taps his foot and drums his fingers on his clipboard while the export takes place.  What you end up is a quicktime movie like the one below with the isight & screen capture videos combined, Sweet!

My Silverback Demo

The movies are incredibly useful for understanding how users will interact with your site, they’re a very persuasive tool for getting colleagues to rethink functionality.

I think Clear Left have done a great job with Silverback, we’ll definately be buying a license when they launch the product.

A note about recording audio with the mac mini

Our mac test box in the office is a mac mini running tiger, so it has no isight camera or built in mic.  I had real fun and games trying to get the audio to work, eventually I discovered that the line in on the mac mini requires an amplified source so standard PC microphones will not work.  The best solution this problem was to purchase a USB microphone – we bought this one from Logitec it’s plug & play and works a treat.

Now that the website is live there is no reason that I can’t tell you about it. Tesco Property Market is a new site from Tesco selling homes in the UK. The site carries advertisements from Fish 4 which are added by Estate Agents, however the most important feature of the site is that it allows people to advertise their homes for sale without the need for an Estate Agent. For a flat fee of £199 users are able to upload all of their property’s particulars and up to 20 photographs to the website and have a signboard professionally installed outside their house. The website handles all communications between vendors and would be buyers from arranging viewings right through to accepting an offer.

I’ve been responsible for the front end development of the site over the last few months & I’m extremely proud to have been involved in this project – hopefully we’ll make a big impact on the way homes are sold in the UK.