Archive for the ‘Tools’ Category

JavaScript Developer Tools

Wednesday, August 22nd, 2007

There is a new release of the Ajax Toolkit Framework for Eclipse. This version includes the JavaScript Development Tools which provides:

# code completion
# fully configurable formatting and syntax highlighting
# code refactoring
# smart error detection and completion
# auto-complete of brackets, parentheses and indentation
# extract function/change function signature
# open declaration/type hierarchy/call hierarchy for a given method/object

This is good news for web application developers that use Eclipse. I’m interested in seeing how it compares to Aptana.

XRAY and MODiv2

Wednesday, August 22nd, 2007

Just found out about XRAY via Ajaxian. At first I thought it was just like the Mouse Over Dom inspector (MODiv2): both are bookmarklets, both show you the structure of the DOM and attributes of elements you point to, and both work cross browser (after xray’s update). After a closer look though, the XRAY guys display style information as well (and it looks nicer too).

Selenium Remote Control

Tuesday, August 1st, 2006

So, as you might have guessed by my previous post, I’ve been playing with selenium more and more of late. I totally forgot about my JSUnit + Selenium + JUnit post! Since then, Selenium was split into 2 parts: Selenium Core and Selenium Remote Control (Selenium RC). Selenium RC is really nice. As I suspected, it removes the need for the SocketBasedCommandProcessor I had written.

In short, RC comes with a server-side component that acts as the host for the selenium code as well as a proxy. When you connect to it (using the selenium-driver client: DefaultSelenium) and tell it to launch a browser, the server will configure the browser to use the server as a proxy…then open up the browser to [url of app under test]/selenium-driver/SeleneseRunner.html. Since the server itself is acting as the browser’s proxy it will handle all requests for /selenium-driver/* directly and let all other requests go where they were intended to. This makes the browser think that the selenium code is sitting right along-side the application under test and side-steps the same-origin-policy. Pretty Sweet.

With Selenium RC you can have completely separate Test Projects. The application under test doesn’t need to have a single reference or artifact of selenium in it. You could also use it to write automated scripts that will do some task on a website. For example, you could probably write a simple Swing-based wordpress publishing tool…then write your posts in it…and click ‘Post’…then it would login to your site and publish the post for you.

Class.js - third time is the charm

Friday, February 24th, 2006

Say you want to override a method by adding a new impl directly to the instance. callSuper should be callable from that new overriding method and it should result in the closest ancestor impl being called…even if it only has to go as far as the instance prototype (technically, the instance’s constructor’s prototype). Well…the code I had up wouldn’t really support that. It would skip over the instance prototype. The latest will support this.

Maybe I should start versioning :) I definitely need to have tests.

Class.js

Bug in Class.js

Thursday, February 23rd, 2006

Found a bug and fixed the version that the previous posts point to: Class.js

Basically, the callSuper would not work if the method was not implemented at the beginning of the chain. For example if you have classes A, B, and C, (where B extends A and C extends B) and B and C implemented a toString then calling toString on an instance of A would result in an infinite loop. With the updated code, an array is built to represent the prototype chain, and that array is traversed IN REVERSE until it finds the calling function. Then it grabs the NEXT prototype in the chain and executes the method if it exists. No need to search and keep digging throught the chain to see where it is implemented…because the built in chain traversal will do that for us (pretty much the same reason the bug was occurring).

Anyway code is fixed and re-posted.

Finally Posted Code…and I’m moving

Thursday, February 23rd, 2006

I got the Javascript Inheritance code uploaded: Class.js

I’ve been keeping pretty busy getting our house ready to sell. About 2 weeks ago we found a house in U. City that we love…put an offer on it and it was accepted. Pending all inspections and such, we close March 30. So…we now have to move up our plans to sell our own house and do a few years of upgrades and painting in a week or so. So far Aislinn has been really busting her butt painting EVERYTHING and I’ve been remodeling the master bathroom and fixing random other things (and breaking others :)). I’ve gotten pretty comfortable with plumbing too. Then there is the presentation on OOJS on Monday. It’ll be fun, but so far, finding time to prepare has been almost impossible.

SO, about the code (if you haven’t been following the posts on it). The Class.js file provides an implementation of Classical Inheritance for Javascript. It does not involve newing up an instance of the superclass to set as the subclass’ prototype…I really didn’t like that approach. The implementation still builds a nice prototype chain though. It basically create’s an inline function…then sets that function’s prototype to the superclass prototype. Then it news up an instance of that inline ‘class’ and sets the subclasses prototype to that instance. So the prototype chain for instances of the subclass still actually contain a reference to the superclass’ prototype.

The code also adds a callSuper method to the subclass’ prototype. callSuper can be called from anywhere in the subclass and will result in a call to the superclass’ implementation of whatever method the call resides in (actually…it will find the first implementation further ‘up’ the ancestor chain…not neccessarily in the superclass). So, effectively, it knows how to find the overridden version of the calling method…and calls it. For Example:

function Shape(){
}
Shape.function.toString = function(){
return "Shape";
}
function Square(){
}
Class.extend(Square, Shape);
Square.prototype.toString = function(){
var str = this.callSuper();
return str + ': Square';
}

Screen Reader Form Navigation Events

Thursday, February 9th, 2006

The guys at Access Matters have put together a sweet chart that shows what form navigation events are fired when using screen readers . Man I wish I’d had this at the USPS.

A Stab At Javascript Inheritance

Wednesday, February 8th, 2006

Here is the working code for implementing an inheritance model in javascript. Most of the code is actually for handling the callSuper functionality (calling an overridden method in the super class). The actual subclassing code could be reduced to 4 lines if that bit were removed. Just highlights the “are we sure we need this” question. But its DAMN cool…and I had fun, so it was worth the time.

This script requires arguments.callee.caller to work…that is the magic the code uses to figure out where in the prototype chain to begin the search for the super class’ implementation of the method currently being called. There were some minor tweaks I had to do to get it to work in IE, but it works. As a bonus, calling the ‘callSuper’ method from a constructor will work too.

I’ll probably wind up putting this in a library sometime…I just wanted to get it here and get some eyes on it. Enjoy
Update: I removed the code because it looks horrible on here…I’ll upload and provide a link when I have proper access.

Example Code…this is sickeningly basic…but its what I used while I was putting this together. I’m not sure why I didn’t fire up jsunit to do this thing right (tdd). Oh well…I blame the insomnia.


function Shape(){
this.shapeCalled = true;
}
Shape.prototype.toString = function(arg){
return 'Shape '+arg;
}

function Rectangle(){
this.callSuper();
this.rectangleCalled = true;
}
Class.extend(Rectangle, Shape);
Rectangle.prototype.toString = function(){
var mssg = this.callSuper(’test from rectangle’);
return mssg + ‘ : Rectangle’;
}

function Square(){
this.callSuper();
this.squareCalled = true;
}
Class.extend(Square, Rectangle);
Square.prototype.toString = function(){
var str = this.callSuper();
return str + “:Square”;
}

Update: Finally posted the code here: Class.js. Getting a house ready to sell will keep you busy :)

FACE

Wednesday, December 21st, 2005

FACE seems to be making the rounds today: http://kurafire.net/projects/face. I was elated when I saw them using the class attribute to tie in the behavior…but then later worried about how much is crammed into it. We all agree that separating presentation (css) from data (semantic markup) is important…I think that FACE is violating a separation of the data from the behavior. With face you have a css class that looks something like this:

class="C:myClass:10:L:20:50"

Each ‘node’ there is a property that describes the animation. The animation code will effectively add and remove a css class to an element (or set of elements) based on the specified intervals and properties. Which is cool, but I think its too close to the markup: its IN the markup. I understand that part of the goal of FACE is to be as simple as possible, the developer doesn’t even need to learn or know javascript to make it work. However I’m concerned about the cost of this goal. I now need to modify the markup to modify a behavior/animation and I feel that that is a violation of separation of concerns.

I think a very, very simple set of javascript could achieve something like this. One could have a script file dedicated to setting up the FACE animations for the page or even the site.


Face.animate('#enhance', 'myClass', 10, 'L', 20, 50);

The animate function could use behaviour.js or cssQuery.js to locate the node indicated by the selector (first argument) and then run through the animation sequence as it does now…this really just changes the method of starting the animation to be more direct (the developer could have more control over when the animation begins) and (more importantly) the details about the animation are more removed from the data. Also, with this approach, there would be no need for the #enhance element…or the quirky way to have multiple animations on the page (indicated by a comma separated list of ids as the last node in the #enhance elements FACE css class descriptor). The developer could use whatever css selector best identifies the element to animate using the css classes and ids already defined in the markup. And the Face.animate function could be called for however many elements need to be animated.

gmapPedometer

Friday, July 8th, 2005

I ignored the gmapPedometer yesterday…shouldn’t have…it’s pretty cool.