I was looking at Twitter's static scripts and noticed that all variables and functions where just 1 character long, why and how do they do this? Has it something to do with performance? If so, why don't they give all elements on their website these kind of short names, maybe 2 characters long instead of 1 to avoid any collisions.

Example:

(function (A) {
A.fn.isScreenNameField = function () {
    return this.each(function () {
        var M = A(this);
        var F = A("#signup_username_url");
        var E = A("#screen_name_info");
        var D = A("#avail_screenname_check_indicator");
        var O;
        var C;
        var I;
        var N = M.val();
        var G = N;
        var H = N != "";
        var Q = /[a-zA-Z0-9_]/;

        function K() {
            if (H) {
                F.html(M.val())
            }
        }
        function L() {
            M.trigger("show-info");
            E.hide();
            D.show()
        }
        function B() {
            E.show();
            D.hide()
        }
        function P() {
            G = O;
            jQuery.ajax({
                type: "GET",
                url: "/users/username_available",
                data: {
                    username: O
                },
                dataType: "json",
                success: function (R) {
                    if (C) {
                        var S = R.msg;
                        if (R.valid) {
                            M.trigger("is-valid");
                            F.removeClass("invalid").addClass("valid")
                        } else {
                            M.trigger("is-invalid", R.msg);
                            F.addClass("invalid").removeClass("valid")
                        }
                    }
                },
                beforeSend: null,
                plete: function () {
                    clearTimeout(twttr.timeouts.availabilityTimeout);
                    B()
                }
            })
        }
        function J(R) {
            O = M.val();
            clearTimeout(twttr.timeouts.availabilityTimeout);
            C = O.match(Q);
            if (!C) {
                G = O;
                B();
                return
            }
            if (O == G) {
                return
            }
            L();
            twttr.timeouts.availabilityTimeout = setTimeout(P, 2000)
        }
        M.isSignupFormField({
            validateWith: function (R) {
                if (isBlank(R)) {
                    return _("Please enter a user name")
                } else {
                    P()
                }
            },
            allowInput: Q
        });
        M.keyup(function (R) {
            if (jQuery.inArray(R.keyCode, [16, 17, 18, 20, 27, 33, 34, 35, 37, 38, 39, 40, 144]) == -1) {
                if (M.val() != "") {
                    H = true
                } else {
                    M.trigger("show-info")
                }
                K();
                J()
            }
        });
        M.bind("value-changed", P);
        M.bind("custom-validate", P)
    })P
}
})

I was looking at Twitter's static scripts and noticed that all variables and functions where just 1 character long, why and how do they do this? Has it something to do with performance? If so, why don't they give all elements on their website these kind of short names, maybe 2 characters long instead of 1 to avoid any collisions.

Example:

(function (A) {
A.fn.isScreenNameField = function () {
    return this.each(function () {
        var M = A(this);
        var F = A("#signup_username_url");
        var E = A("#screen_name_info");
        var D = A("#avail_screenname_check_indicator");
        var O;
        var C;
        var I;
        var N = M.val();
        var G = N;
        var H = N != "";
        var Q = /[a-zA-Z0-9_]/;

        function K() {
            if (H) {
                F.html(M.val())
            }
        }
        function L() {
            M.trigger("show-info");
            E.hide();
            D.show()
        }
        function B() {
            E.show();
            D.hide()
        }
        function P() {
            G = O;
            jQuery.ajax({
                type: "GET",
                url: "/users/username_available",
                data: {
                    username: O
                },
                dataType: "json",
                success: function (R) {
                    if (C) {
                        var S = R.msg;
                        if (R.valid) {
                            M.trigger("is-valid");
                            F.removeClass("invalid").addClass("valid")
                        } else {
                            M.trigger("is-invalid", R.msg);
                            F.addClass("invalid").removeClass("valid")
                        }
                    }
                },
                beforeSend: null,
                plete: function () {
                    clearTimeout(twttr.timeouts.availabilityTimeout);
                    B()
                }
            })
        }
        function J(R) {
            O = M.val();
            clearTimeout(twttr.timeouts.availabilityTimeout);
            C = O.match(Q);
            if (!C) {
                G = O;
                B();
                return
            }
            if (O == G) {
                return
            }
            L();
            twttr.timeouts.availabilityTimeout = setTimeout(P, 2000)
        }
        M.isSignupFormField({
            validateWith: function (R) {
                if (isBlank(R)) {
                    return _("Please enter a user name")
                } else {
                    P()
                }
            },
            allowInput: Q
        });
        M.keyup(function (R) {
            if (jQuery.inArray(R.keyCode, [16, 17, 18, 20, 27, 33, 34, 35, 37, 38, 39, 40, 144]) == -1) {
                if (M.val() != "") {
                    H = true
                } else {
                    M.trigger("show-info")
                }
                K();
                J()
            }
        });
        M.bind("value-changed", P);
        M.bind("custom-validate", P)
    })P
}
})

• javascript
• jquery
• twitter
• short

Share Improve this question Follow edited Apr 27, 2010 at 16:39 Ikke 101k2323 gold badges100100 silver badges120120 bronze badges asked Apr 27, 2010 at 16:35 John SmithJohn Smith 6333 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 19

This script has been "minified", an automated technique of replacing variables with shorter names, without changing functionality. See JSMin, for example. The goal is to reduce download times and bandwidth when sending the script to a client.

They run their scripts through something like http://developer.yahoo./yui/pressor/ in order to reduce their size, and therefore the time the need to load.

This is all done in order to decrease the websites load times.
In recent years this topic has bee something like a new field, especially due to things like the talks from Steve Stouders: http://stevesouders./

Javascript is client-side, so you have to load the script. Less text to download mean better performance, I'd think.

Many javascript projects run their code through a 'minifier' to make the code smaller. This improves the time the browser takes to download the library. Most projects also supply a non-minified version for developers to read:

Example here: http://docs.jquery./Downloading_jQuery#Current_Release

Could be many reasons as to why they do this, to name a mon one:

Decrease the filesize of the scripts as alot of people use twitter.