Update: JavaScript-beautifier bookmarklet – now works on selected text too

Updated my bookmarklet which does syntax highlighting and coloring (based on 2 other scripts). It now supports coloring of selected text which should come in handy, for example in forum posts like these:

Try it out yourself on these posts, just select the code text and fire the bookmarklet:

http://www.codetoad.com/forum/15_28462.asp
http://www.extjs.com/forum/showthread.php?p=392611#post392611

The source for the bookmarklet can be found in the Ext forums:

http://www.extjs.com/forum/showthread.php?p=393025#post393025

Enjoy!

Trying to combine Ext Core and JQuery idTabs extension

Don’t ask me why but I was playing around with Ext Core and JQuery idTabs when I had some weird errors. I kept getting errors inside the Ext Core array “remove” augmentation.

Ext.applyIf(Array.prototype, {
    
    indexOf : function(o){
       for (var i = 0, len = this.length; i < len; i++){
           if(this[i] == o) return i;
       }
       return -1;
    },

    
    remove : function(o){
       var index = this.indexOf(o);
       if(index != -1){
           this.splice(index, 1);
       }
       return this;
    }
});</code>

I couldn’t understand why I ended up there until I had a look at the idTabs code below (aList is an array).

for(i in aList) $(aList[i]).removeClass(s.selected);

Here’s the culprit: Iterating an array using for in. A better way to do it would be to use a for loop, or to check hasOwnProperty for each property. This way you’re protected if an external framework should augment the native Array object. I prefer using for loops when iterating over arrays.

In-browser JavaScript formatting and coloring

Maybe this has been done before, but since I implemented it before realizing someone else might already have done this, I don’t care.

I read a lot of code in forums/blogs, especially JavaScript code. Sometimes it’s well formatted, sometimes not. And rarely the code is colored. So I created a quick and dirty bookmarklet combining compressed code from http://jsbeautifier.org/ along with coloring support from SHJS. To them I just added a few lines of basic code that grabs pre-tags and reformats them.

Download the code and then create a new bookmark where you paste the code as location. The page containing the code has to use HTML pre-tags surrounding the code, which usually is the case.

To test, either:
1. Paste the code in FireBug and press Run

or

2. Bookmark the code and try it out on the forum post that triggered it all heheh

NOTE: ONLY WORKS WITH JAVASCRIPT, it will pretty much freak out if it finds HTML or any other markup language in the mix as well. Also, I’ve only tested this in FF3 so other browser may or may not work.

Before

After

Selenium Core extension for finding unexpected global variables

The FrameworkScanner does a decent job finding the global symbols of the Ajax frameworks. The analysis however isn’t 100% truthful though: new variables could be accidentally introduced as you’re running your application. Consider a function doing


for (p in window) {
// Do stuff
}


Now we have ourself a new global, and in worst case, a mini-timebomb. So I was playing around with Selenium and I found a new twist on global variables! Let’s analyze the window object as the last step of a Selenium test to see if it has unexpected variables. This kind of analysis is probably overkill in many situations but I think it could be useful in a heavy client side app especially if you’re using a lot of 3rd party libraries (to make sure they behave).

To use:

1. Download this file or paste the code below into a new file and reference it in “Selenium Core Extensions” (in Options of Selenium IDE).

2. Define which global symbols you expect to exist such as any 3rd party namespaces as well as your own application namespaces to the list of expected globals, something like this:

Selenium.prototype.assertNoUnknownGlobals = function() {
	// List expected global symbols
    var acceptedGlobals = [
        // Your accepted global symbols go here
        // JQuery,
        // $
        // etc...
        
        // Selenium properties
        '_locator_pageBot',
        
        // Firebug properties
        'getInterface',
        '_firebug',
        '_FirebugCommandLine',
        '_getFirebugConsole',
        '_getFirebugConsoleElement',
        'loadFirebugConsole',
        'console'
    ];

    var frame = document.createElement('iframe');
    var root = document.body || document.documentElement;
    root.appendChild(frame);
    var cleanWin = frame.contentWindow;
	
    var symbols = [];

    var appWin = this.browserbot.getCurrentWindow();
    
    for (var p in appWin) {
        if (typeof (cleanWin[p]) === 'undefined' &&
            acceptedGlobals.indexOf(p) < 0 &&
            !p.match(/selenium/i)) {
            symbols.push(p);
        }
    }
    root.removeChild(frame);

    if (symbols.length > 0) {
        Assert.fail(symbols.length + " unexpected globals detected: " + symbols.sort().join(',	'));
    }
};

FrameworkScanner 0.3

Refactorings, UI enhancements and some new features:

Added CSS analysis (included in the collision matrix), and also the possibility to analyze your own scripts and see if they are 100% compatible with the frameworks in the list. Might be handy in some cases, or not….?

John Resig and Bertrand Le Roy pointed out some more native classes that should be analyzed (below). These are now included in the scan…

• document
• Element
• Document
• HTMLElement
• HTMLDocument

Go to the scanner

FrameworkScanner 0.2 – Namespace collision detection

My baby has a name now: FrameworkScanner. It also got a new feature, a namespace conflict matrix which will be handy if you’re considering using more than one library for your site. Let me know if you find any bugs or if you can think of more cool features this beast should have.

Go to FrameworkScanner

Conflict matrix

AJAX frameworks: Global namespace pollution

Recently I had an idea about checking the most popular javascript frameworks & APIs to see how they differ in terms of global namespace pollution.

The result can be seen here

This page loads all the frameworks separately in an iframe and compares the window object against the one of a fresh iframe. I also included information about which builtin JavaScript classes have been augmented, which shows a difference in architectural approach between the frameworks. You can click a row to see the details about the global symbols in the framework/API.

The results vary more than I’d expected and it’s interesting to see the different namespacing strategies at play. YUI/Jquery/Ext keep the numbers down by putting everything in one global object. In debug mode Microsoft assign a name to each function for better stacktrace information when debugging (hence the big number of globals). These symbols are not present in the release mode of the scripts.

You can run into some hard-to-debug issues when including scripts from different sources if namespacing isn’t used. Variable name collisions can be tricky and time consuming (not to mention boooooring) to hunt down. Below is a snippet from an article by Douglas Crockford.

Global variables are a source of unreliability and insecurity. Fortunately, JavaScript includes tools for allowing us to drastically minimize our use of globals, which makes our programs more robust. This becomes increasingly important as our programs get bigger, and as we mix in and mash up program components from multiple authors. Reducing our dependency on globals increases the likelihood that collisions are avoided and that the program components work harmoniously.