.

Live From The Field

nice a table for twelve at the saucer – now that is a holiday party

DirkPhoto027.jpg

Dean Edwards: Levels of JavaScript Knowledge

Dean Edwards: Levels of JavaScript Knowledge

I felt like I was doing pretty well until level 6….


Garrghh – IE Frustration

It turns out that I have a problem under IE. It isn’t even one of those tiny problems – it’s a big problem – apparently Event management under IE is seriously different from Event management under Firefox. I thought I had worked everything out, but the brief time spent working with IE under Linux has shown me the truth.

Here is the addEvent function I’ve been using for a long time

/* Thanks to Scott Andrew  && Aaron Boodman*/
function addEvent(obj, evType, fn){
    if (obj.addEventListener) {
        obj.addEventListener(evType, fn, false);
        return true;
    } else if (obj.attachEvent) {
        var r = obj.attachEvent("on"+evType, fn);
        return r;
    } else {
        return false;
    }
}

Maybe you have the same thing in your Javascript stack. Well it turns out this is broken. Today I learned : addEvent Considered Harmful(Two geek points if you get the reference in the title)

Yeah I know that article is a year old – I’m apparently a little behind. It turns out Quirksmode.com held a contest. They even managed to pick a winner

As I started digging further I ended up running into these two posts – saying – Just use the Yahoo Event Handler. Ajaxian and the original from Dustin Diaz

His article goes into a lot of depth – so I won’t repeat the actual mechanics of switching from what I started with to Yahoo. Truth be told I looked at Yahoo UI about 6 months ago. It has a lot of features, and is BSD licensed which makes it simpler to integrate with internal code. The part that was scary was just how much code is in the library. 3MB of javascript – is a freaking lot! I basically stayed away. Now I guess I’m going to start small with the event stuff then I’ll see what else is worth mixing in.

I admit I’m sorely tempted to use it because I know they are testing against a lot more browsers than me which means I better browser support without a lot of effort on my part.


Graded Browser Support

Yahoo! UI Library: Graded Browser Support

In the first 10 years of professional web development, back in the early ‘90s, browser support was binary: Do you — or don’t you — support a given browser? When the answer was “No”, user access to the site was often actively prevented. In the years following IE5’s release in 1998, professional web designers and developers have become accustomed to asking at the outset of any new undertaking, “Do I have to support Netscape 4.x browsers for this project?”

This is an interesting way of looking at browser support. it is certainly a lot more codified than what I end up focusing on which is basically Firefox (1.5 & 2) and IE (6 – starting to work on 7) and Safari (if we get to it)

I suppose that’s part of the thing about building most of my apps for behind the firewall. I don’t have to focus on supporting every browser known to man .


MS Javascript Debugger Under IEs4Linux

Ok – so the only reason I installed IEs4Linux was to test out javascript (Hello JSUnit!). One small problem. Some of the popups don’t work on IE6 so I can’t see what the problem is – only that there is a problem.

Someone recommended that I install the MS Javascript Debugger – of course they didn’t provide any instructions so I’m going to write them up – don’t worry it is dead easy!

For the purposes of documentation I’m going to use /home/foobar. This is assumed to be your home directory. So replace foobar with your userid.

cd /home/foobar/.ies4linux/downloads
wget http://download.microsoft.com/download/winscript56/Install/1.0/W9XMe/EN-US/ie401dbg.exe
WINEPREFIX="/home/foobar/.ies4linux/ie6" wine /home/foobar/.ie24linux/downloads/ie401dbg.exe

Now launch IE6 and goto menu Tools -> Advanced

Uncheck "Disable script debugging"

Now you should have some debugging tools available to you. The trick seems to be to put a “debugger();” call in your code to trigger the debugger to see what is going on. So far it makes me miss FireBug all the more, but at least it is something.

This only installs it for IE6. Repeat for the other versions. I’m only interested in testing IE6 so I stopped here.


IEs4Linux

I found this today: Ruby, Rails, Web2.0 » Blog Archive » Install Internet Explorer on Ubuntu Dapper in 3 easy steps

Turns out it is pretty easy to run IE under Linux.

This has been a pretty hot topic lately. The reality is that there are a lot of people out there who use IE. If you talk to most web developers – especially outside of the .NET camp – you’ll find that they don’t. This isn’t normally a big deal if you are developing on Windows – but it turns out that if you are on Linux or Mac OS X the distance to IE means you don’t end up testing it as well because you have to go somewhere else to get the testbed up.

Maybe this means I’ll actually fire up IE and test to make sure my web designer doesn’t forget about the IE people.


Javascript Best Practices

Javascript Best Practices

Here’s some more guidance on coding Javascript. There is one thing that really stands out:

Avoid prototype.js

Prototype is a javascript framework that is used in a variety of projects such as Ruby on Rails and Rico. While the framework is fairly popular, has a number of users, and is quite unique, it also has a number of problems which cause headaches for many javascript developers:

  • No documentation is available from the author
  • No support system is available from the author
  • It modifies Object.prototype, so all objects contain additional properties. This causes problems when iterating through object properties
  • It forces a class-based OO approach into javascript, which masks the true language features and adds confusion
  • It lacks proper feature detection before using some language features, causing it to break in some browsers
  • Using prototype.js often breaks other working code, so it doesn’t “play well with others”. If you are writing code which only uses Prototype and nothing else, then it can make your life simpler in often ingenious ways. However, its extension of the Object.prototype is the primary reason to avoid using it along with any other javascript cod

I admit I use it. It is very popular in the Rails community. That’s actually where I heard about it in the first place. It seems there are a number of people who view the modification of the base object for Javascript to be a seriously bad thing. So far it hasn’t proven to be that big of a deal for me.

I do have to agree with him that the documentation for Prototype is pretty weak.


Unit Testing Javascript

It turns out I’ve amassed a heck of a lot of Javascript. It started out as simple effects. Then it progressed to some widgets. Now I ended up looking at Javascript as a valid tool in the arsenal.

That just creates one small problem. How the hell do you test Javascript? There are a number of libraries out there. But which one is the right one? I’m not sure I’m going to be able to answer that for you, but I’ll at least try to collect my notes so you can come to your own conclusion.

CrossCheck
JsUnit (Apparently there are two different libs names JsUnit so make sure you follow the link.)
Scriptaculous Test.Runner

CrossCheck

CrossCheck caught my eye almost immediately –

http://www.jsunit.net/talks/jsunit.ppt

Crosscheck is an open source testing framework for verifying your in-browser javascript. It helps you ensure that your code will run in many different browsers such as Internet Explorer and Firefox, but without needing installations of those browsers. The only thing you need is a Java Virtual Machine.

This sounded awesome – one of the biggest problems we currently have is that we have to test stuff under IE but no one wants to run a Windows box. (Yes I’m aware that I can run Parallels,VMWare, or Wine – but I haven’t gotten there yet – and it still will be a pain) They’re based out of Austin which is good to know – since that means I might meet them at some point.

My warning bells went off when I read their Cons page.

Element appearance is not accuarate
No CSS cascade

This is a problem since a lot of the Javascript I’ll be testing will be wdigets. How they are drawn is important. And judging by the number of stylesheets in our include directory I imagine No CSS cascade is also a problem. I wish there was an easy way to write test for CrossCheck that could be run in a browser under one of the other frameworks.

Test.Runner

One of the developers recommended this as a path to the future. It has support for for BDD. I’m not doing BDD. It’s on that list of things I would someday like to know more about.

I’m already using the Scriptactulous libraries for effects in Rails. So it seems like this might be a natural fit.

Then I read an overview from CrossCheck of Test.Runner. Full Article

Basically his main criticism of the test framework is that it automatically adds methods to the objects under test. Apparently there are arguments about how good an idea this is in general, I see it done a lot in both Javascript and Ruby and I’m not opposed to it – since I am often the beneficiary for the features it provides. That being said – it does seem very very very wrong for a test framework to do that.

Where does that leave us?

JsUnit

I started with a PowerPoint presentation. Then I dug in. It seems very complete. I mean it has all the assertion stuff you would expect. You can roll tests together to form suites. If I am understanding the docs correctly I can even setup a system where it will run all my tests on different machines with different browsers so I can know for sure that they really work.

Once I get more code up and organized in jsUnit I’ll post again with some lessons learned about how to organize your tests.

There were a couple of things that seem to be missing. The first is a code coverage tool. That would be seriously helpful – especially since I now find myself the proud owner of lots of code that doesn’t have a single test written on it. The second one is an easy way to mock objects. That comes in handy when you want a quick and easy way to make sure things work without having to go through the whole process of setting everything up.

Thanks to this blog I found JSMock which seems to be exactly what the doctor ordered.

Now I just have to sit down and write some tests.

Update
Wow – the jsmock guy ROCKS! He actually shipped a Rakefile with his lib. When you run it – it launches firefox and validates all his code. Not only is that great to verify it is working – but it means I can just look at his code to see how to setup the exact same thing for all of my code – I love it when someone else does all the work!

Update 2
More tools for the collection. Turns out there is a nice JavaDoc style documentation generator for Javascript. JsDoc Only bummer is it is in perl.


With Your Shield Or On It

This may be that last fast hit for today – (lot on the docket)

With Your Shield Or On It

- or -

Samurai Principle

Both end up meaning the same thing – succeed or fail completely. The main advice seems to be – return exception – don’t mess with error code.

The counter point to this comes from Joel On Software who hates exceptions.

That fact for me is that I’ve spent a very long time in languages that don’t really use them. I have started using them more in the ruby I write – but I’m still not 100% confident of what the correct middle path is – All Exceptions – No Exceptions – Some Exceptions Some Error Code.

Any one want to point me to a good answer? Preferably in Ruby – but I’m always happy to steal ideas in other languages too!


In a related thought…

MF Bliki: ShuHaRi

Shu-Ha-Ri is a way of thinking about how you learn a technique. The name comes from Aikido, and Alistair Cockburn introduced it as a way of thinking about learning techniques and methodologies for software development

This seems like a very straight forward way to learn new things. And I don’t just mean software. Thinking back I realize that this is how I have learned a lot of things – especially when I was younger – cursive writing comes to mind.

Maybe this path would help you get over the first hump of learning where you are constantly questioning the why of everything. Trying to compare and contrast the differences in style without fully understanding why there is a difference. (For example arguments about how long a method should be or if you should have a single return or not) An instead free you up to learn something and get a foundation before you move on to the part where you really dissect it.

Can you think of any examples where you followed this path?


    Stuff I want to read

    Shelfari: Book reviews on your book blog

    Stuff I've Read

    Shelfari: Book reviews on your book blog
    You are currently browsing the Economy Size Geek weblog archives for December, 2006.
    Categories
    Archives

    .