Web Reflection

[IT] ri-italia.it, parere veloce veloce

2009-07-16T21:22:00.006+02:00

Come benvenuto abbiamo una pagina dal leggero peso di 588Kb, per un'immediata impressione di lentezza pachidermica ed un loading time da 1 minuto e 13 secondi su un totale di 72 inutili richieste.

Se togliamo le immagini, le immagini appese in seguito via jQuery e/o plugins, e il filmatone flash che non poteva mancare, praticamente è una pagina bianca: perchè noi italiani non abbiamo niente da dire, basta mostrare la faccia e la firma del nostro presidente per far si che chiunque possa capire al primo sguardo di che pasta è fatta l'italia odierna.

Pratiche stra note per ottimizzare il sito nemmeno una, in compenso una sfilza infinita di javascript per jQuery più non so quanti plugins tutti usati su un file unico per un evento onReady che farebbe piantare i PC più datati non appena la pagina è stata caricata. (per i trolls: c'è il mio nome nei sorgenti di jQuery quindi so di cosa sto parlando)

Stesso discorso per i css: a quanto pare siamo così avanti che YUI Compressor in build sia per l'unico javascript che per l'unico CSS, ad eccezione dei due per IE6 ed IE7, era chiedere troppa tecnologia ... tanto più che la sfilza di css e js è sistematica, qualunque pagina stiamo navigando.

Questo in aggiunta all'ammontare imbarazzante di "immagini ed immaginine", più il filmatone flash, più tutti i commenti nella pagina degni del framework più superficiale incapace di rimuovere commenti assolutamente inutili e per di più con tempi ridicoli, se quelli sono i tempi (0.4 secondi per un unico modulo da quattro immagini in croce ... complimenti per il framework utilizzato) servono a ricordarci quanto la situazione ADSL in Italia sia ridicola con una penetrazione ancora insufficiente.
Ma a noi che stiamo bene non ce ne può fregare di meno!

Con questo Welcome, il tasto in fondo con scritto Accessibilità l'ho evitato in pieno poichè non c'è bisogno di arrivare a cliccarlo per capire che il contenuto della pagina accessibilità avrà probabilmente la dicitura:

Accessibilità
Stiamo cercando di comprendere meglio cosa diavolo significhi.

e niente altro, dato che persino Magic Italy, la rivista, suppongo pensata per il resto del mondo, richiede flash player, senza navigazione tab based, e anch'essa ovviamente pesantissima.

Dato che c'erano dei testi oltre al PDF e le immagini dei PDF da mostrare in modo così advanced, potevano metter i testi nel sito in modo da essere facilmente letti ed indicizzati anche da motori di ricerca stranieri? utopia

Vado su Marche, la mia mata regione, e noto subito che le sotto sezioni non sono indicizzate a modo (briciole inutili) se non nella mappa del sito ... e vabbèh, almeno quella!
Filmatone solito in flash ed un avviso prima di mostrarlo: per vedere questo filmato devi installare il seguente plug-in Adobe Flash player ... vado quasi per clickare quand'ecco che il filmatone appare ... meglio così, ce l'avevo già!

La descrizione non è legata al filmato, comunque grazioso.
Siccome vivo e lavoro qui a Londra mi son detto: proviamo la versione inglishhhhh ... clicko inglishhhh ed ecco che riappare l'avviso di prima, ovviamente sempre in italiano:
per vedere questo filmato devi installare il seguente plug-in Adobe Flash player ... Excuse Me?
Almeno il resto sembra essere in inglese, ma anche dopo questa visita veloce, Accessibilità è ancora una parolona grazie ad errori così banali impensabili con 10 milioni di euro come commissione.

Siccome continuo a vedere in Firebug, il fantastico plugin per il browser Firefox, che il template di testata è praticamente statico mi domando: ma porca miseria già che non hanno usato i giusti headers sopra un unico file per agevolare almeno il caching di tutti quegli scripts tramite un unico file, mi fai vedere che diavolo modificano tutti questi files?


javascript:(function($,r){window.$=function(){r=$.apply(null,arguments);alert(r.length);return r}})($);

Copiando ed incollando questo banalissimo script sulla barra degli indirizzi mentre la pagina sta caricando e dopo che jQuery è stata scaricata (al primo script tag caricato dopo jQuery ne siamo praticamente certi) avrete un alert per ogni chiamata alla libreria e/o plug-in utilizzato.
Ebbene, tutti quegli zero che vi si pianteranno davanti uno dopo l'altro sono l'insieme degli inutili plug-in messi li "per fare mucchio" e per creare un unico file di gestione client qualunque sia la pagina.
In soldoni, non avendo utilizzato pratiche comuni di speed up, e qualunque tool serio ve lo può dimostrare e spiegare, ancora mi chiedo se a creare il sito sia stato un team di webbisti della domenica o se ci sia qualche ingegnere con carenze tecniche a dirigere questo team.

Conclusione

Non riesco a capire se sia meglio o peggio dell'altro ma sicuramente è tecnicamente più semplice (di qui tempistiche più normali).
Meno sezioni, meno sotto sezioni, meno contenuti, credo stesse immagini probabilmente ri-sfruttare, che andrebbe anche bene, ma una serie di pratiche non dico amatoriali ma poco ci manca ... tutto questo non giustifica un investimento di 10 milioni di euro, opinione assolutamente personale.

Personale non è invece il report di Web Page Analyxer:


Download Times*
Connection Rate Download Time
14.4K           940.07 seconds
28.8K           493.13 seconds
33.6K           429.29 seconds
56K             276.05 seconds
ISDN 128K       116.59 seconds
T1 1.44Mbps     52.31 seconds

Analysis and Recommendations

TOTAL_HTML - Congratulations ... e ti credo, come ho già detto ci sono zero contenuti da indicizzare

TOTAL_OBJECTS - Warning!

TOTAL_IMAGES - Warning!

TOTAL_CSS - Warning!

TOTAL_SIZE - Warning!

TOTAL_SCRIPT - Warning!

Questa volta i nomi degli autori/responsabili li abbiamo?

P.S. Bisogna essere obiettivi su un fatto reale: Magi Italy è lo slogan più azzeccato della storia.
Come facciamo sparire i soldi noi, nemmeno David Copperfield ci riesce!

The Fastest Date toJSON and fromJSON?

2009-07-15T22:00:00.002+02:00

I know yesterday post supposed to be the last 'till the the end of the month but I could not resits. Dustin Diaz twitted

anyone trying to parse our wonky rails dates in JS. do this: var date = Date.parse(str.replace(/( \+)/, ' UTC$1')); seems to fix it.

Again, I could not resist to create a toUTCString based function to create JSON strings and to parse them back. This is the result and apparently is both the fastest implementation I know and cross browser (Chrome, Firefox, Inernet Explorer, Safari).
This is a quick post so if you find some problem please let me know, thanks.


(function(){
// WebReflection Fast Date.prototype.toJSON and Date.fromJSON Suggestion
var rd  = /^.{5}(\d{1,2}).(.{3}).(.{4}).(.{2}).(.{2}).(.{2}).+$/,
    rs  = /^(.{4}).(.{2}).(.{2}).(.{2}).(.{2}).(.{2}).+$/,
    d   = new Date,
    f   = /(GMT|UTC)$/.exec(d.toUTCString())[1]
    m   = {},
    i   = 0,
    s   = ""
;
d.setUTCDate(1);
while(i < 12){
    d.setUTCMonth(i);
    m[s = /^.{5}(\d{1,2}).(.{3})/.exec(d.toUTCString())[2]] = ++i < 10 ? "0" + i : i;
    m[m[s]] = s;
};
Date.prototype.toJSON = function(){
    var e = rd.exec(this.toUTCString());
    return e[3].concat("-", m[e[2]], "-", e[1], "T", e[4], ":", e[5], ":", e[6], "Z");
};
try{Date.fromJSON(d.toJSON());
Date.fromJSON = function(s){
    var e = rs.exec(s);
    return new Date(Date.parse(e[2].concat(" ", e[3], " ", e[1], " ", e[4], ":", e[5], ":", e[6], " ", f)));
};
}catch(e){
Date.fromJSON = function(s){
    var e = rs.exec(s);
    return new Date(Date.parse(e[3].concat(" ", m[e[2]], " ", e[1], " ", e[4], ":", e[5], ":", e[6], " ", f)));
};
}
})();

Basically everything is a shortcut and I am using only native methods ... is there anything faster except probably a substr based one?

[Webadamus] First Delirium

2009-07-14T21:10:00.005+02:00

Introduction

How many times we read news and we think "I knew it was going to happen!"?
How many times we think about a revolutionary project and few days before we are ready to introduce it to the rest of the world somebody, often with more money invested, introduced the same concept but with famous name behind and taking all the glory over that idea?
Which developer interested about Web, reading about ex-imminent Internet Explorer 8, thought "come on, it's Microsoft, we all know they have no interest to create a truly advanced browser, 'cause Internet with more power inside a browser could make an Operating System partially obsolete"?
And who was truly surprised about Google OS announcement?
Webadamus will be a periodic Web Crystal Ball post here in WebReflection. It will talk about visions, thoughts, prototypes, and everything related to the future of the web and the most important thing is that everything will be just my imagination and nothing else. Are you laughing? Are you interested? It's just an experiment, let's see in few months or years, if I was right, are you with me? Let's start then with my first delirium!

Twitter: What's Next

The real potential of this famous service is almost unlimited, except for its 140 characters which, as limit, simply means they can manage more information than every other search engine. Gigabytes speaking, a tweet is meaningless while a web page size could be the equivalent of 100 tweets. And you know what? In a search engine what is important is the chosen title, the content, how much this site is paying to be in pole position, how much this site is spamming links around the net, etc etc ... In twitter, if search a subject selecting meaningful keywords, you will find only people truly interested in that website and for this reason, they re-twitted it. Waist of time? Almost zero, you search by people comments, you do not search by money and advertisement. Popular web sites? THey will be there ... crappy website? They will be unrated. But what is going on behind the tweet fuss?

blacktwit

It could become an integrated service, or it could become simply a third part one, related via API. The blacktwit will contain the classic black list of twitter users. As virus, there are robots or malicious users which only aim is to create fakes account in order to pump up replies, followers, and followed. These users will be able to follow us as well, studying our messages, and in the worst case scenario, spamming/scamming any sort of website. Being twitter the place where url are 80% masked by "url minifier web services", 30% of us will click that link and what's next does not matter, their mission has been completed. Thanks to blacktwit, our favorite twitter application will be clever enough to discard every message automatically or to ask us if we trust that user.

twitcode

I personally posted a couple of "twitcodes", almost complete web programming scripts in less than 140 characters ... but this is not what I mean. twitcode will be a service which aim is to send and recieve instantly quick reviews and votes about a product. #801245632+ will mean that the product in the shop or supermarket with bar code 801245632 has been appreciated while "-" at the end will mean the buyer did not like it. "#801245632- no batteries included" will be a minus plus a comment. #801245632= will return number of users, and how many of them appreciated that product. Example: 10 users with that product, 6 appreciated it, the hash twitcode robot will reply 6/10 plus eventually a random comment, so if we do not like that comment we can tweet again and read the next. At the same time, this service will automatically have a database of interests and opinions in real time, something extremely important for any marketing purpose.

Private Services

As long as our twits are public we cannot use the hash too much. Here is where clever companies will create better robots able to manage private messages.
d twitdeal #insurance Grande Punto 1.3 Split
will be a direct message to user twitdeal that will instantly return the best option for that car while "d twitshop #price Asus 1101HA" will return the best price and the website for that product. It's all about fantasy and nothing else, but a quick service that does not require time neither thousands of pages to visit is a key for a quick future in this "everything in your hands" era.

Internet Explorer 9 Will Be Advanced

Microsoft, the most farsighted company during good old 90s, is loosing market share day after day. Slowly, slightly, but this is simply what is going on or, for sure, what everybody feels about this name. Innovation, does not exists, Silverlight is an Adobe clone with some extra feature already present in Google Chrome with some Chrome Plugin, a la O3D. People excited by hardware acceleration, should simply watch latest WebKit video about Snow Stack. Nothing new, not a single strategy able to bring innovation. A "new" search engine which development is distributed for each country for gosh knows which reason.
A browser which has desktop features like accelerators, and nothing else new enough for its purpose, surfing the Web, except some partially implemented feature a la Object.defineProperty, compatible 1/3 of what Firefox and Safari are able to do since ages with any kind of objects and via __defineProperty__ et similar. Latest news are about Office 2010 Online, something not even scheduled because it will never be innovative enough "thanks to missed Internet Explorer 8 features". If Silverlight will be a requirement, Office 2010 online will be, imho, a partial flop. Google has already done something better, and ages before. For these reasons, and many more, Microsoft at some point will realize that if next browser will not be better than next Operating System their market will fall down as never before. That is why Internet Explorer 9 will the probably the best browser so far, and not just a toy.

Google OS Will Fly High Later

Users are not ready yet ... Google manages big numbers but home users still want more than Web. Maybe because they do not know yet what Web has to offer, considering 50% or more are still using Internet Explorer. Maybe because they want do their business without internet, or maybe because they do not feel secure, thinking that their anti viruses beside probably some cracked software installed is more secure than an Operating System not affected by viruses and spyware at all (this theme will be in another Webadamus post).
Anyway, as somebody already said, minimalist Linux distributions with just Firefox already exist, and it is not only Ubuntu.
We all know that when there is Google name behind whatever market strategy, some how this will reach the goal.
We all know that as is for Netbook, first Google OS devices ( shall we call them Gbooks ? ) cannot cost more than 150 pounds.
How can people otherwise realize that they cannot live without? It will be a winning strategy, but it will take about 2 years before truly relevant results.

Passwords, As We Know, Will Disappears

This is the last delirium from Webadamus, but it is just a logic consequence about passwords. Let's analyze facts before!
More services we have, more our passwords are exposed. If a service lets us choose which password we prefer, most of the time will be the same for every service.
I am not even considering all those websites where the word "security" is meaningless, able to be cracked in a couple of sql injections or via browsers bugs!
How secret is a password? First of all, most common passwords are birthdays or anniversary dates. Sometimes these passwords are just names, swearing words, and 90% of the time these passwords contain only ASCII characters plus some number.
The most secret place for different passwords, or those generated automatically via a super SHA1024 unique hash algorithm, is usually a post it in the monitor. Somebody that feels half an hacker was clever enough to hide his password under the keyboard, still with a post-it. My bank account asked me to choose a password, and a super secret password, so I had to attach another post-it somewhere to digit one pwd first, and the second one after ... brilliant!!! The problem is intrinsic ... if I need money from a cache point, I have to hide numbers I need to digit so mistakes are more frequent and everything is in any case monitored 24/7 by the cash point camera, top right or directly over my head ... brilliant! In the supermarket I have rarely seen somebody remove the pad to digit the card pin number, while everybody is transverse and could potentially check it. It is common sense to do not look somebody doing it, but security is an utopia.
A lot of web users complained about this system of user/password which is absolutely boring and which does not improve security a single bit. This is the reason OpenID exists, but obviously we like choice so these kind of services are numerous ... another flop!
The concept is: please identify yourself to use this service, whatever service it is. In few years, we will all be a number, a product with a barcode, and we will all agree about this new system because everything will be more simple. The way to identify us? It could be a special universal key, card, passport, something we should check every second otherwise we will need to contact the unique number: 10
Telling that our ID is lost, and blocking in real-time every device connected into the central database ... sounds scary, but it is the only solution we have to make things more simple, unless we do not want to live wolverine style in a wood maiden house in the middle of nowhere (sounds like an adventure, isn't it?)

As Summary

This post is not that technical at all, it could be partially obvious and partially hilarious but this will be probably the last until the end of July or first days of August. I am going back in Italy for my sister wedding, friends, food, and hopefully sea under the sun ... so, what a better occasion to be insulted while I am far away from this PC with this USB temporary broadband? Have fun with Webadamus!

Elsewhere - Sandboxes Have Never Been That Easy

2009-07-12T15:22:00.007+02:00

One of the most common problems in Web 2.0 Development, is the amount of libraries we can possibly include into a single project and conflicts these libraries could have.
Some library is truly aggressive. It could change the entire behavior of each other lib present in the page via not-standard or future implementations of some global object prototype, such String, Object itseld, Array, or others.
Since this is a well known problem, some library/framework can try to avoid conflicts in different ways. As example, jQuery has a noConflict method which aim is to make development as painless as possible ... but it is not always that simple. One of Elsewhere purpose is to connect a completely different and external scope into the main window, avoiding any sort of conflict a library with its global properties, functions, or prototypes, could have. First example:


new Elsewhere(
    "scripts/libs/jquery.1.3.2.min.js"
).execute(function(ready){
    // this scope is elsewhere in a perfectly clean environment.
    // In this case jQuery will be manifested as global "$" function.
    // To bring jQuery outside, we can use this sandbox parent reference
    parent.jQuery = function(search, context){
        // to make sure we do not search in an "empty" document,
        // the one part of this sandbox, we pass the context
        // if not present as parent.document
        return $(search, context || parent.document);
    };
    
    // we can call the ready callback
    ready(parent.jQuery);
},
[ // one or more arguments to pass into Elsewhere function execution
function($){

    // let's do something on ready event
    // please note there is no var in front of jQuery
    // since it has been declared as global
    jQuery(function(){
        // we could use the argument as well
        // since in this case it is exactly
        // the same jQuery function
        $("body").html("Here I Am");
    });

}
]);

Confused? Please read more ;)

Quick Answer: What Is A Sandbox

Every time we open a new window in our browser, the latter one creates a (almost)clean environment to run, if presents, each JavaScript file. The same happens for each tab, which means that if we define a function Z(){} in tab a, this will not be present in tab b. Finally, same things happens inside frames or iframes as well. Each window, framed, tabbed, or not, will have then its own JavaScript environment and in JS world this is called sandbox.

What Is Elsewhere

Elsewhere is a lightweight, less than 1Kb if minified and gzipped, almost fully cross-browser library (so far compatible with each browser I tested) able to create runtime a sandbox including zero, one, or more scripts. The first showed example, creates a sandbox including jQuery library and bringing its power outside the box.
The important thing to understand, is that used function scope will be completely extraneous to the one the function itself has been created ... in few words, that scope will be elsewhere!
Thanks to possibility to send arguments when this external function will be executed, and thanks to parent or top reference, it is possible to play between different scopes avoiding conflicts, creating bridges, loading JSONP, and more!


// JSONP example
new Elsewhere(
    "http://mycoolservice.com?fn=parent.callback"
);
// that's it!

About JSONP, via Elsewhere a response could be more than just a callback. It could be an entire different environment with runtime created bridges. Example:


// output produced by a generic REST service
// myservice.server/name/WebReflection

// a function which name is not a problem
function getReferences(){
    return userInfo.name + " has " + userInfo.posts + " posts";
};

// a global object which name is not a problem
var userInfo = {
    name:"WebReflection",
    site:"http://webreflection.blogspot.com/",
    posts:12345
};

// a bridge for Elsewhere instance
// every Elsewhere sandbox has a reference to its isntance
// This reference is retrieved via global sandbox window object
// and the property @_Elsewhere
window["@_Elsewhere"].getUserProperty = function(name){
    return userInfo[name];
};

// please note you cannot access that property directly
// window.@_Elsewhere will cause an error
window["@_Elsewhere"].getReferences = getReferences;

// ... 

// our main page via Elsewhere
var myservice = new Elsewhere("myservice.server/name/WebReflection");
myservice.execute(function(fn){fn()}, [function(){
    alert(myservice.getUserProperty("site")); // http://webreflection.blogspot.com/
    alert(myservice.getReferences()); // WebReflection has 12345 posts
}]);

Understanding execute Method: How Elsewhere Works

How can be possible that a function defined inside a scope is totally ignorant about surrounding variables or scopes? It is really simple!
Elsewhere is based on Function.prototype.toString de-compilation, creating passed function directly as script inside the sandbox and returning, if status is ready, its value or undefined.
The important thing to understand is that if we create a global scope variable, this will be present next call, whenever we decide to perform it.


var sb = new Elsewhere();
// sb.ready is true, no external scripts loaded
alert(sb.execute(function(){
    // generic function
    function sum(a, b){
        return a + b;
    };

    // define sum as global in this scope
    window.sum = sum;

    // test the function
    return sum(1, 2);

})); // will be 3


// do other stuff and ...
sb.execute(function(){
    return sum(3, 4);
}); // will be 7, sum was already defined

alert(typeof sum); // undefined
// sum exists only Elsewhere

About the ready status flag, it is instantly true if we do not load external script, while it could be true or false, depending on which browser we are using (in some browser an iframe document with external scripts is loaded sync while with Firefox 3.5 an iframe does not block main page content so it is not sync).


// more than a file ...
new Elsewhere([
    // order is respected and reliable
    "jquery.js",
    "jquery.ui.js"
]).execute(function(onjQueryAndUILoaded, initialTime){
    // execute is always performed
    // after everything has been loaded
    onjQueryAndUILoaded(jQuery, new Date - initialTime);
}, [
    // we can optionally pass one or more arguments
    function($, elaspedTime){
        // let's understand how much it took
        alert(elaspedTime);
    },
    new Date
]);

Understanding extend Method: Fast Bridge

Every time we execute a function inside an Elsewhere instance, we are de-compiling and injecting it inside another document. This operation is not that expensive but if we need to perform some task in that scope frequently, we could consider to extend an Elsewhere instance via its own method, creating a sort of fast bridge between two or more than two different worlds.


// empty sandbox
var sb = new Elsewhere()
    // extend returns the instance itself
    .extend(
    {
        extendObject:function(){
            var toString = Object.prototype.toString;

            // note, this Object is not the main one
            // but the one from this sandbox (main not affected)
            Object.prototype.type = function(){
                var s = toString.call(this);
                return s.substr(8, s.length - 9);
            };
            
            // avoid future modification
            window.extendObject = function(){};
        },
        createObject:function(o){
            // create an Elsewhere Object
            return new Object(o);
        },

        // if an extend key is a global variable
        // different from undefined
        // this will simply be the variable from 
        // this sandbox
        Object:1,

        // if the value is not a function
        // it will simply be saved as is
        cool:true
    }
);

// extend Elsewhere Object.prototype
sb.extendObject();

// test it
var o = sb.createObject("test");
alert(o.type());    // String

// o is not instanceof this main page Object
alert(o instanceof Object); // false

// but it could be used as if was
// an Object
alert(o instanceof sb.Object); // true

alert(sb.cool); // true

As Summary

Elsewhere can open hundreds of possibilities without bringing nothing new, except that browsers are starting to implement different threads for each sandbox (tab, or window) and I expect this library will bring an even more simple way to implement web workers. Right now main points are conflicts resolution, when libraries are able to deal from a sandbox, new JSONP interaction ways, multiple native constructor prototype definitions via one or more Elsewhere instances, just a simple way to load external scripts or ... well, whatever else our imagination could create with such tiny, cross-browser, library. Have fun with sandboxes 8).

The script? Via post title or here, in devpro.it.

ECMAScript 5 Full Specs String trim, trimLeft, and trimRight

2009-07-10T20:19:00.003+02:00

During last evenings I have updated a little bit my vice-versa project.
Since vice-versa aim is to bring in every browser what is possible to implement and, in most of the cases, already defined as standard (from W3 or MSDN when it is worthy) I decided to get rid of the Ariel Flesler fast trim proposal to introduce my lightweight full specs String.prototype.trim, trimLeft, and trimRight.
For full specs I mean that vice-versa String.prototype.trim replace exactly same characters replaced by native Firefox 3.5 implementation, rather than only characters which code is less than 33 as is for Ariel proposal.

The good part of vice-versa ( to be honest I cannot find bad parts so far ;) ) is that every single file is stand-alone, so if you do not like benefits the entire "lib" could bring, you can always adopt only one of its files, for example the String one, the Array one, or the last full specs ECMAScript 5 Date constructor, compatible with ISO strings, new Date("2009-07-10") and with a complete toISOString method for each created Date instance (of course even if replaced, new Date will produce instances of Date and their constructor will be Date itself).

If you want to give vice-versa minified a try, a little monster which size is about 5Kb gzipped, please do not hesitate to download it.

Have fun with future standards and few MSDN standard coolness for every browser ;)

Frameworks: To Choose Or Not To Choose

2009-07-10T01:12:00.001+02:00

Few days ago the BBC announced the release of their framework called Glow.
John Resig commented this event in a "logical and reasonable way" but instantly different developers reacted over his thoughts.
What John says, in few words, is that BBC developers used jQuery before and they were partially happy with it.
Rather than help jQuery community to grow up, opening tickets, adding patches, or forking the library itself improving it adding Safari 1.3 support, a 0% market share browser that in my opinion is used only inside BBC labs and nowhere else, they decided to spend about 2 years to create a library that apparently does not bring anything new, and which is even more supported by some obsolete or deprecated browser, rather than latest one (Chrome 1 or 2, Opera 10, or Firefox 3.5). This post is about what I think after almost 10 years of Web development experience, where I have used both frameworks and I wrote some for internal purpose. Cases are different for each situation, requirements are different as well as different could be time to create or complete a project.

About Library Browsers Support

Dear net surfers, there is nothing to do, if you need internet, if your business is partially based on internet, if you want everything internet has to offer, you must be updated! That's the story, and this is that simple.
There is not a single valid excuse to be stuck in the past, and if some application in your company works only in IE6, first of all you should consider to upgrade that application, it's deprecated, secondly you should consider alternatives at least for new Web services, that in the best case scenario will suggest you to upgrade while in the worst one will simply do NOT work and you, minority, will just miss that train!

As everybody knows technologies quickly evolves and if you walk down the street with a Walkman rather than an iPod like device, you are mentally 80 years old, retired, and you are missing infinity possibilities, starting from more than an album and hours of music.

Internet, the Web, the Web business, and everything around it, is drastically changing day after day.
Reasons are different, starting from an initial and general misunderstanding about same Web standards and related logics, goals, and behaviors, ending with a revolution that thanks to new technologies, programming languages, and companies, where Google is one of the most important leaders, are acting on daily basis.

In few words: are you a net surfer? Do you need internet? You are probably already upgraded, thanks to be patience and to read this post 'till the end.

Are you someone that does NOT know internet, what it has to offer, does not need it for your business, and surfs the Web few minutes per month?
Do not complain then if the rest of the world that needs internet is moving on in the meanwhile, thank you!

Are you a company that understood only recently the power of the web? If you do not upgrade your browser your business will be decades behind others!

Is IE6 there because of "security bla bla bla"? IE6 is one of the most bugged and vulnerable browsers in the history, fire your system administrator and move on with the rest of the world!

All this effort is just to let you understand that modern web libraries are doing their best to be as much compatible as possible.
Unfortunately, some old browser cannot physically solve "nowadays Web problems" because these browsers have been programmed when internet was nothing more than a "advertisement coupon", with flashing images, providing zero services.

Just consider that an iPhone or a G1, mobile devices, integrate a better browser than IE6 or Safari 1.3 ... is it time to move forward? IE8 is there, as Firefox, Chrome, Safari and Opera are. You have choices, and mainly for free, to avoid to collapse with deprecated services and applications.

So, are you spending money for a Jurassic business, internet time speaking? If yes, why are you wasting money with a browser such Safari 1.3, 98% useless for every recent website, or IE6, forced to be somehow compatible but for its own limits obviously deprecated for modern businesses and applications?

As summary, I do not understand why on earth BBC needs to support people that do not use internet. It could make sense to still support IE6, right now below IE8, market share speaking, but unfortunately still there thanks to people ignorance. But a browser that could be compared with Internet Explorer for Mac, abandoned by Microsoft itself years ago, cannot be a good excuse to avoid libraries ... I simply cannot believe this reason and I would like to have real stats about Safari 1.3 usage in their website.

About Choosing Libraries Or Frameworks

There are hundreds of valid choices out there but this case is mainly about the decision to avoid jQuery.
A good library as jQuery is, if I am not wrong the most used one right now and recently adopted in Wikipedia pages as well, has basically these pro:

widely cross-browser supported, more market share than Glow or other home made libraries

day after day improvements, bug fixes, speed ups, thanks to an active community, a tickets system and again, thanks to its wide adoption from biggest to smallest website, which can only hep to improve jQuery stability and/or features

constant cross-browser tests, which aim is to guarantee stability and functionality over any kind of customer, client, administrator, or simply net surfer

These are not jQuery specific features, these are simply the reason developers prefer to use a well known library rather than an home made one.
Less effort, most of what we need is there, and jQuery is truly reach about plug-ins, so what is not there has been probably already implemented. Charts? Timeline stuff? Widgets? Fields helpers? Almost everything, and it simply works thanks to the core library and its stability, jQuery again.
Just to be honest, I do not even use jQuery except when I need it for compatibility or time reasons, so please do not get me wrong, I am not a fanatic, I read Ext JS, dojo, YUI, and other libraries authors or mailing lists as well so this is just an impartial point of view about libraries and nothing else but, there is always a but, I can understand as well the other point of view ...

About Creating Your Own Library

If we understand the reason a library or a framework is a good choice, whatever programming language we are talking about, even if latter one is created via JavaScript, the most problematic programming language ever due to its intrinsic unstable or different nature (not just one virtual machine but lots of different interpreters, few strictly standard behaviors, thousands of browsers implementation bugs or standards misunderstanding, zero compilation, etc etc) there could be an absolutely valid reason to decide to create our own libraries.
First of all, if we do not want to be "monkeys" but developers, the only way we have to deeply learn a programming language and its problems is to use it as much as possible, without stopping a single day to learn more about it.
If a library/framework does magically everything and we are not curious enough to understand how this library is solving or implementing our daily problems or features, we have probably chose the wrong job, unless we are not designers with different goals, where a library is "just what we were looking for" to quickly solve "that problem" which was not Photoshop related.
Sometimes, we could be simply not interested about the language itself, thanks to frameworks able to translate some "serious language" a la Java or C# into the blamed one: JavaScript (and to be honest I can't wait to laugh about some JavaScript related problem not considered by that framework, who you gonna call: Ghost Busters?!)
Another important fact to consider is the time, never enough in this "everybody agile" web era where if at least the business client core functionality and its tests are delegated to someone else, we are half way through our application goals.
But how different are things if we are plenty of time to develop our own library?

we are not necessarily reinventing the wheel, if we are skilled enough, and we have studied problems, features, and adopted solutions, we could simply create something new or just perfect for what we need (as example, the dollar function "is prototype stuff", what jQuery did with it was simply different, but I am sure John will agree about this innovation or "just what we need" point)

we will have full control over releases and source code, being able to solve problems in a bit and without dependencies over third parts libraries. We all know that even if have skills to quickly change a library core feature, this library next release could probably mess up our internal patch, or vice versa, and sometimes our case is so particular or simply impossible to reproduce outside our business box, that a ticket could not make sense at all. I personally changed some library core function, or overwritten some core method, and simply because of problems and situations impossible to reproduce into the ticket system. The reason is simple: when the application is complex enough, and it is an internal one (admin areas anybody?), we cannot spend a day to create a ticket which emulates somehow our specific problem. Got the point?

the final silly point: we are developers, for code sake, and a typical stereotype is that we are all better than everybody else. In few words, if we think it, knowing what others are doing about same thoughts, we are thinking "better than others", and if we are not shy to write a lot of code and test it, because we have time, why on earth we should depend again on third parts libraries?

As Summary

There is not an absolute point about these kind of choices, except one: flexibility. I do appreciate the fact BBC team at least tried jQuery library before they chose to create their own one. The point about death browsers is an excuse, IMHO, they should have been more decided about their points because if that was the reason, I do not get it at all and people talking about public money would be absolutely right. On the other hand, latest points about proprietary libraries advantages could make BBC site less problemtic, for their supported browsers, considering they know what they are doing, they had even too much time to develop 300Kb of core library comment included ( I wrote 3 times of code in one month over another library and nothing was redundant ... ), and they are (ta da ta da!!!) BBC, good to see their source code (lovely comments, not everything lovely in the code though but this is another story)

This post is just my humble opinion about a subject extremely common in this sector and interesting as well.
I am just a developer with passion for code, curiosity about ASM, C knowledge, a "JavaScript Ninja" currently technical editor of an imminent related book, with PHP Zend Engineer certifications, few Java related experiences, and daily C# exposure. In few words, I have collaborated with different companies and created internal libraries or used third parts libraries. Please consider my experience so far before you'll blame me for this post, thanks :D

P.S. I promise, I'll add every related link asap, right now my temporary Internet connection is running out of bytes!!!

YUI Compressor Meets The Batch Scripting

2009-07-05T02:51:00.003+02:00

Mainly to work, also to investigate some good old DOS feature, I created a batch file able to make YUI Compressor more portable and easy for every Windows based client/server developer.
I wrote the story, and I described each file, plus I added a workable Zip with everything you need to understand what I have created and use it, starting with a double click into a projects/vice-versa.bat file which aim is to create from a list of files a unique YUI Compressed one.
Here is the link, the rest is up to you (comments, questions, suggestions, etc)

UK Bing Roundtable - Just My Opinion

2009-07-04T13:21:00.008+02:00

It is probably too late and I did not check other guys blogs, but I would like to bring here my impressions about this Bing event I have been invited few days ago.

How Did It Start

Hi Andrea,
I'm writing on behalf of Microsoft to invite you to a discussion about Bing, the new search engine that recently launched in beta in the UK.

...

Colin Mercer, a member of Microsoft Life Without Walls initiative group, is a truly nice guy. Spontaneous, friendly, exactly that kind of guy that could let a group of foreigners feel comfortable since first meet up minutes. Being glad to have been invited without asking, and without being a Microsoft fun as well, of course I was there: to understand what this initiative was about and why they called me, raising my doubts from this high geek technical blog.

Bing Round Table, The Good Part

To be honest, I am not going to be that nice about this event, but I have to admit that seeing Microsoft trying to be closer than before with people that make Web live, any topic blogger in this case, was a nice surprise. The organization, the choose place, and the catering was excellent, even if there were only about 10 guests and there was no time to eat and drink. It is a good start point from a company famous to be closed for its selling purpose only. Good Stuff, please keep doing it, it can only brings benefits from different points of view.

Special Moronic Guests, That Is What We Are

The presentation started with a lovely woman and a sort of jingle: "Bing"! OK, that was to make us comfortable, that was to have a quick laugh, that was to break the ice, that was ... only the begin!
The entire presentation showed us stats, those stats were retrieved from God Knows which tool bar present only in Internet Explorer, and those stats, even if from IE world, put Microsoft search engines in third position, I can't imagine what could come from Mozilla or Google, if they present stats based on their own products ... I guess Bing would not even exists ...
Since those stats were not that pro-bing, they stopped into a slide with classical promises a la "it's simple, it's friendly, it's new, it's brand, it's something you should use, it makes your life better" ... no comment.
Fortunately, some guy started instantly to ask what was new, what was interesting, what was the missing piece that other well known search engines do not have ... and every question had behind a though like: why are we here and what are you showing us? We are not dummies and we know what we want, what other offer, and what we are looking for.
Were we interested about TV ad like presentation? NO
Were we interested about promises other search engines maintain since ages? NO
Were we interested about U.S.A. verion, being in London, where Bing is still beta and smells like Live from miles without bringing a single new feature and positioning bing itself in the second place when you search for bing in the uk version? NO
So what were they showing us? Did they think we do not know what is a search engine? Probably

Missed Expectations

At least that what I think,everybody was looking for that genius thing that nobody else have ... it did not happen! Apparently, the most innovative thing is the live video preview for video results ... OK, I want to be honest, I think everybody over 18 has seen some xxx search engine and everybody knows that a quick preview in a video link is not a Bing idea ... isn't it?
The second most important innovation is a vertical focused lateral bar, something that simply remove spaces fr mobile devices, something useful because with that kind of layout and images behind white links people could even not notice top links so here they are with an innovative lateral menu ... is this wow?

Bing UK, I Want Developers Name!

First of all, for a company that sell enterprise software a la Visual Studio Team System, I wonder how it can be possible that whatever country version is different from every other ... merge projects and use one big development team? Naaaaaaaaa, they prefer to delegate search engine development in each country ... what a waist of money! The UK version is a new graphical version of the Live.co.uk search engine, same weird results (Bing itself in second position after a link called News about Bing ...), not a single lateral bar, nothing useful in the home page ... and about this, 110Kb of home page because of course if a user needs to search something he has to wait the castle, the building, the big sized image in home page. Moreover, with 13 inline JavaScript files, when you chose a different search type switching from Web to Image, the entre page is reloaded and the only difference is the form action, using /images/ rather than the main path ... I mean: Are You Serious?
Design wise, as I said in some other post I am partially color blind. I perfectly recognize red and green, but slight gradients make my life truly difficult.
Google, in its simplicity, studied a lot color contrasts to make everything clear, now try to read the disclaimer, or links bottom right ... oh really? You did not even know there were links there? I am not a designer, but you do not need a PHD to understand that bright text over a bit brighter background does not make sense ... now put white text over images loads of details ... and now tell me how long you spent to read that text, and how much all these problems do not exists in both Yahoo and Google. Is it all about design? Does it make sense to create a 100Kb home page just to add noise and confusion? Did they truly need 13 inline JavaScript for a page that has no functionality rather than a field? Where is the simplicity they are talking about?
Google, 25Kb, you write, you press enter, that's it, that's why they are the number one search engine ... no confusion, not a single waist of time or bandwidth, optimized for mobile devices and even if Microsoft has more than one HTC device, they do not care ... try to surf Bing with iPhone or Android ... are we still in 2000 or in the netbook/small screen devices era? A splash in the past, and still nothing new!

Bing U.S.A. You Click Rather Than Scroll!

Again, I did not get this "feature", the vertical oriented menu on the left suppose to make everything simple because in Gogle you have to scroll ... What?
The scrolling operation with a mouse is extremely natural and it can be performed everywhere in the page while it is still natural with mobile devices where with a finger or a dedicated button you just ... scroll! The search, point, and click is a boring, slow, tedious, operation, even more difficult with mobile devices and whatever "finger-pad" panel we all have in our mobile devices. In few words, in UK Bing presentation they showed us how simple is to find Washington map ... you search for Washington, the engine is so clever to understand that you are looking for a city ( again, moronic stuff, we all know that this is the abc for a top ten search engine ) and if you click Map in the left side menu, you will find the map. In Google, you have to scroll ( weird, I always found maps in the top of the page ) to find information, so they organized everything, with a response page which average is again about 70Kb VS 30 to 35 for Google, where in the latter one you can find everything you need in one page, quick, simple, that is simple!
I do not want to comment the fact they proposed U.S.A. related searches, and non UK images in the home page for the UK Bing version ...

There Will Be Time For Technical Question?

After any sort of question and hundreds of good points about missed interesting news for this new Microsoft search engine, I simply called time to ask technical question. THey said yes but thre was no time, and you know what? I got time blowing out loudly and quickly my points producing non-sense sentences cause I lost number of things to ask or say ... but one thing I will never forget: I asked about 13 inline scripts and the reason if in the UK version I click images I have to reload the page just to change a form target ... the answer was: I do not know what you are talking about ... OK, probably misunderstanding, probably not DB related, but at the end of the day, the only though in my mind was this one: Why on earth they called me? Did they think I was a web troll? Did they think I was a teenager with a lot of time to waist behind the PC? Did they ever consider me as a 10 years experienced web developer with deep JavaScript knowledge, server side certifications, and studies that not a single young Phd person have unless he/she has not my same passion?
Disappointed, partially humiliated, and still load of doubts about how the presentation supposed to be and the reason they called us.

Is Everything That Bad?

One thing I truly appreciated, which does not come from this meeting, is the Bing API, in my opinion well done and flexible enough to let us create interesting applications or web gadgets. If you'll stay tuned, I am planning to create a bookmarkable script that will make searches nice, simple, and friendly, exactly how Bing should, in Microsoft mind, be.

Finally, this post is only my impression, my opinions, and nothing else. I may have misunderstood a lot of words/questions, specially after a couple of fresh beers, but I still wonder why I was there ... and if I would like to be there again. Let's see how things will be.

Post Scriptum

All my opinions come from 30 minutes analysis in place, during the meeting, I've never had time these days to investigate the search engine itself so I may have missed something ... again, take carefully what I said about Bing, thanks.

ECMAScript ISO Date For Every Browser

2009-07-04T12:47:00.006+02:00

One most than welcome new entry of ECMAScript 5 is the Date.prototype.toISOString function and ability for Date constructor to accept an ISO String and to generate a Date instance.
This feature will make JSON Date instances import/export extremely fast and simple, but why should we wait ES5 release when we can have both features now?

Full Specs ISO 8601 Parser Plus Unobtrusive toISOString Method

We all do not like that much to extend native JavaScript constructors, so here I am with a proposal that will not touch the Date prototype:


if(!Date.ISO)(function(){"use strict";
/** ES5 ISO Date Parser Plus toISOString Method
 * @author          Andrea Giammarchi
 * @blog            WebReflection
 * @version         2009-07-04T11:36:25.123Z
 * @compatibility   Chrome, Firefox, IE 5+, Opera, Safari, WebKit, Others
 */
function ISO(s){
    var m = /^(\d{4})(-(\d{2})(-(\d{2})(T(\d{2}):(\d{2})(:(\d{2})(\.(\d+))?)?(Z|((\+|-)(\d{2}):(\d{2}))))?)?)?$/.exec(s);
    if(m === null)
        throw new Error("Invalid ISO String");
    var d = new Date;
    d.setUTCFullYear(+m[1]);
    d.setUTCMonth(m[3] ? (m[3] >> 0) - 1 : 0);
    d.setUTCDate(m[5] >> 0);
    d.setUTCHours(m[7] >> 0);
    d.setUTCMinutes(m[8] >> 0);
    d.setUTCSeconds(m[10] >> 0);
    d.setUTCMilliseconds(m[12] >> 0);
    if(m[13] && m[13] !== "Z"){
        var h = m[16] >> 0,
            i = m[17] >> 0,
            s = m[15] === "+"
        ;
        d.setUTCHours((m[7] >> 0) + s ? -h : h);
        d.setUTCMinutes((m[8] >> 0) + s ? -i : i);
    };
    return toISOString(d);
};
var toISOString = Date.prototype.toISOString ?
    function(d){return d}:
    (function(){
        function t(i){return i<10?"0"+i:i};
        function h(i){return i.length<2?"00"+i:i.length<3?"0"+i:3<i.length?Math.round(i/Math.pow(10,i.length-3)):i};
        function toISOString(){
            return "".concat(
                this.getUTCFullYear(), "-",
                t(this.getUTCMonth() + 1), "-",
                t(this.getUTCDate()), "T",
                t(this.getUTCHours()), ":",
                t(this.getUTCMinutes()), ":",
                t(this.getUTCSeconds()), ".",
                h("" + this.getUTCMilliseconds()), "Z"
            );
        };
        return function(d){
            d.toISOString = toISOString;
            return d;
        }
    })()
;
Date.ISO = ISO;
})();

The public static ISO Date method accepts a valid ISO 8601 String compatible with W3 Draft:


   Year:
      YYYY (eg 1997)
   Year and month:
      YYYY-MM (eg 1997-07)
   Complete date:
      YYYY-MM-DD (eg 1997-07-16)
   Complete date plus hours and minutes:
      YYYY-MM-DDThh:mmTZD (eg 1997-07-16T19:20+01:00)
   Complete date plus hours, minutes and seconds:
      YYYY-MM-DDThh:mm:ssTZD (eg 1997-07-16T19:20:30+01:00)
   Complete date plus hours, minutes, seconds and a decimal fraction of a second
      YYYY-MM-DDThh:mm:ss.sTZD (eg 1997-07-16T19:20:30.45+01:00)

where:

     YYYY = four-digit year
     MM   = two-digit month (01=January, etc.)
     DD   = two-digit day of month (01 through 31)
     hh   = two digits of hour (00 through 23) (am/pm NOT allowed)
     mm   = two digits of minute (00 through 59)
     ss   = two digits of second (00 through 59)
     s    = one or more digits representing a decimal fraction of a second
     TZD  = time zone designator (Z or +hh:mm or -hh:mm)

The only limit is about milliseconds and JavaScript Date itself, the latest parameter will be rounded if there are more than 3 digits (JS precision is up to a millisecond, no microsecond yet).
The toISOString method is created for every browser that does not support this prototype yet but it is simply assigned and compiled once to avoid Date prototype problems and to optimize memory and performances.
I interpreted ISO specs as Zulu default:


var normalDate = new Date(2009, 06, 04);
var ISODate = Date.ISO("2009-07-04");

normalDate.toISOString = ISODate.toISOString;

alert([ // being in UK ...

    // 2009-07-03T23:00:00.000Z
    normalDate.toISOString(),

    // 2009-07-04T00:00:00.000Z
    ISODate.toISOString()
].join("\n"));

Since solar time is +01 hour, if I create a Date with midnight time, the respective Zulu one (UTC) will be the day before at 23:00:00 while since ISO consider an unspecified Time Zone the Zulu one, +00:00, the created Date will be exactly the specified one but obviously if we try to get ISODate.getHours() it will be 01 and not 00, accordingly with my local settings.

This is a little function/proposal that has zero dependencies, is widely compatible, and could be a standard or a must for every library/framework. Waiting for your thoughts, have a nice we 8)

Bing Round Table - Tomorrow

2009-06-28T15:16:00.002+02:00

Tomorrow I am going to #meetbing to talk about Bing ( :P ) and its present/future.
The event has been better described by Phil Leggetter and as He did, I would like to know if there is any tech question you would like me to bring there.

So far, I kinda like what Bing API offers, and I am planning to use it soon, but my only concern is about requests limits over a single IP.
Thinking about firewalled/natted/DHCPped infrastructure, 7 different people could not use a generic Bing gadget in the same moment ... anything else?

ES5 arguments and callee, I was wrong!

2009-06-24T21:55:00.006+02:00

JavaScript is not JavaScript, I am not crazy, it is just a consideration between the language itself and what is behind it: another programming language with lower level rules and logic ... sounds silly and obvious, but please keep reading to understand what I mean.

No Results Yet, But I've Already Lost My Battle

I spread comments, I wrote post after posts to defend ECMAScript 5 arguments.callee decision with "use strict", but I have to admit I have never investigate the internal behavior of callee, an arguments property which is not what we think is ...

Discovering In Core The Callee Property

What I was thinking was something hilarious for a C or C++ programmer: an inherited property for a mutable instance.


// JavaScript should have a "secret" Arguments class
// and for each function, something like this
function Test(){};

// we have declared the function Test
// internally there should be a secret operation like this:

Test._createArguments = function(args){
    for(var i = 0; i < args.length; i++)
        this[i] = args[i];
};
Test._createArguments.prototype.callee = Test;


// and for each Test call, there should be
// a secret operation like this one:
Test._injectArguments(
    new Test._createArguments(args);
);

// in order to retrieve Test arguments
// variable for each call ... inheriting
// automatically the callee property

Apparently, except for Internet Explorer, I was so wrong.
arguments.callee is not a pointer or a static variable retrieved instantly as {callee:"it's a me!"}.callee could be, arguments, plus callee is a property with a "discover latency" able to make each call execution up to 100 times slower than a regular function!

We Want Perfomance? Get Rid Of Arguments And Callee Then!

Even with most advanced JavaScript Engines, like the V8 one used by Google Chrome Browser, arguments and arguments.callee are a big bottleneck. Test by yourself!


(function(){
// Array to store execution time
var execution = [];

// named function
function factorial(i){
    return i < 2 ? i : i * factorial(i - 1);
};
for(var i = 0, t = new Date; i < 1000; ++i)
    factorial(100);
t = new Date - t;
execution.push(
    "Native named function: " + t
);

// named function with arguments
function fact(i){
    var i = arguments[0];
    return i < 2 ? i : i * fact(i - 1);
};
for(var i = 0, t = new Date; i < 1000; ++i)
    fact(100);
t = new Date - t;
execution.push(
    "Native named with arguments: " + t
);

// arguments.callee
fact1 = function(i){
    return i < 2 ? i : i * arguments.callee(i - 1);
};
for(var i = 0, t = new Date; i < 1000; ++i)
    fact1(100);
t = new Date - t;
execution.push(
    "arguments.callee: " + t
);

alert(execution.join("\n"));
})();

Impressive is the responsiveness of Internet Explorer, the browser which is "die hard" and the only one I was trying to defend about this decision, due to named functions misbehavior. IE is about 100 times slower when arguments variable is used, while Firefox 3 for example is about 50 time slower when arguments.callee is discovered. Chrome is about 4 times slower with both arguments, and callee, and the same is for Safari and Opera, impressive results. A little note about Chrome, apparently the main problem is the scope resolution, rather than arguments or callee.

We Still Love Scripting: A Callee Proposal

During these tests, I can proudly say I found a way to understand in which era we are, thanks to this simple snippet:


// WebReflection knows if we are in ES5 era!
navigator.ES5 = (function(){"use strict";try{return !arguments.callee}catch(e){return true}})();

Avoiding conflicts via global navigator object, ES5 will tell us if the browser is compatible with ECMAScript 5 "use strict"; rule or not, allowing our code to behave differently when necessary.
It does not really matter in any case, to use my callee proposal we need to inject a callee property, as I suggested in the latest post, and for the sake of good gode, via eval:


// Another WebReflection Silly Idea
function F/*or whatever name you prefer*/(callee){
    return eval("(callee="+callee+")");
};

Above function is able to take a user defined function and to inject a callee property creating another defined function, a sort of operation usually performed once and never again. In few words, inside our function body we will find another variable with local scope: callee


(function(){
"use strict"; // or not

var execution = [];

// create the function via F
factorial = F(function(i){
    // we got arguments, and callee
    return i < 2 ? i : i * callee(i - 1);
});
for(var i = 0, t = new Date; i < 1000; ++i)
    factorial(100);
t = new Date - t;
execution.push(
    "WebReflection F: " + t
);

alert(execution.join("\n"));
})();

This strategy is particularly useful for these cases:

classic configuration object, new Ext.Panel({listeners:render:F(function(Panel){
Panel.removeListener("render", callee);
})})

classic pre-compiled function, var circle = F(Function("r,i","return !i ? r*callee(r," + Math.PI + ") : r*i"));

every time we would like to retrieve arguments.callee

Last point is the one that should let us think about what we have done so far.
If we try to execute latest benchmark, we will realize that specially with Internet Explorer, the evaluation trap works faster than arguments.callee so every time we need callee, but we do not need arguments, we should go for it.

Deeper Investigation

I'll keep digging inside this stuff but right now the only thing I can say is that I will try to avoid the usage of arguments.callee every single time I can because specially for the already JS speaking slow browser Internet Explorer, it is a performances killer I could not even imagine.

I hope I gave you more knowledge about this problem and why ECMAScript group decided to get rid of callee, and in a possible future get rid of arguments as well. One side is pro scriptish stuff, and we all love it, bot the other side is about how much this stuff could slow down Web possibilities. Stay tuned!

P.S. amazing, in FF and Chrome you can set whatever property into the navigator object and rather than transform it into a string a la window.name, you can safe whatever amount of data without loosing it until you do not close that tab!!! Stay tuned for this as well, it is a new security or hack problem we could use for better purposes ;)

Do Not Remove arguments.callee - Part II

2009-06-22T23:43:00.006+02:00

Few days ago kangax demystified named function expressions, underling the importance of the read only function name property and how messy is Internet Explorer JScript engine with named function and their scope.

Before that post, I wrote one about ECMAScript 5 decision to remove arguments.callee when "use strict"; is present (note in the link: it is not deprecated right now, it is an arguments property)

How These Two Things Are Related

While kangax post was more focused about possible leaks and unexpected functions definitions, I would like to grab more attention about what this problem will cause in tomorrow libraries and JavaScript usage. Removing arguments.callee, our code size, apparently faster in core thanks to this missed variable, will increase drastically and a big part of the beauty of JavaScript language will disappear with this callee decision.

The Classic Configuration Object Problem

How many libraries base constructors via configuration objects?
jQuery Ajax ?


$.ajax({
    url:"page.server",
    success:function(data){
        if(data){
            $.ajax({
                url:"fallback.server",
                success:arguments.callee
            });
        } else
            alert("everything is OK");
    }
});

NO? Simple enough, but of course I could use the "long kangax procedure" to wrap that function to avoid IE problems ... and in any case, what about two Ajax calls in the same page?


$.ajax({
    url:"page.server",
    success:function success(data){
        // whatever will be
        // .... but don't ya think it is a bit
        // redundant? How will be our code style,
        // worse than an open close XML tag?
    }
});

// second call ...
$.ajax({
    url:"page.server",
    success:function success(data){
        // which one will be the
        // function success in
        // Internet Explorer ???
    }
});

More comes with User Interface libraries, take ExtJS as example ...


new Ext.Panel({
    renderTo:document.body,
    listeners:{
        render:function(Panel){
            // do some stuff ... and ...
            Panel.removeListener("render", arguments.callee);
        }
    }
});

Above snippets is so simple that ECMAScript 5 better decided to transform it into something like this:


new Ext.Panel({
    renderTo:document.body,
    listeners:{
        // not suitable for IE and multiple
        // Panel creations ...
        render:function render(Panel){
            Panel.removeListener("render", render);
        }
    }
});

// suitable for IE as well
new Ext.Panel({
    renderTo:document.body,
    listeners:{
        render:function(Panel){
            var callee = Panel.initialConfig.listeners.render;
            // note how long and boring is precedent string/operation

            Panel.removeListener("render", callee);
        }
    }
});

In few words, we have to forget shortcuts to add and remove listeners for any kind of configuration object. Nice, isn't it?

The Classic Pre Compiled Function Problem

Another problem comes with Function constructor, able to create an anonymous function (lambda) via string and a preferred solution over eval calls. A pre compiled function is something created once and executed at "native speed" for each call. Example:


// classic function
function circle(r){
    return r * r * Math.PI;
};

// pre compiled one
var circle = Function("r", "return r * r * " + Math.PI);

The main difference between above functions is that the first one needs to discover in the scope the Math "variable" plus its PI parameters for each call, while the second one will be exactly the function:


function anonymous(r) {
    return r * r * 3.141592653589793;
}

which is about 1.6 to 2 times faster than the other one .... cool? Perfect, now try to imagine that our pre-compiled function is more complicated and inside a closure ... how the hell do you think to retrieve the function itself?


(function(){
// my library scope

// this one will generate an errror
// Function evaluates in a global scope
var f = Function("i", "return i < 2 ? i : i + f(i - 1)");

// we have only two options here ...
// the elegant one:
var f = Function("i", "return i < 2 ? i : i + arguments.callee(i - 1)");

// or the horrible namespace conflicts prone one ...
var hopefullyNoProblems = "myLib" + (""+Math.random()).slice(2);
window[hopefullyNoProblems] =
    Function("i", "return i < 2 ? i : i + window." + hopefullyNoProblems + "(i - 1)");

})();

Cool enough? That function will be extremely slower than a pre-compiled one due to the global window object which is a variable not that fast to retrieve.
Moreover, since they decided that null or undefined should not be considered as window object, the usage of this of run-time called function is not a shortcut anymore, is it?

As Summary

This is my last chance to explain the importance of arguments.callee which is NOT the reason JavaScript is less secure, it is only a pain in the ass for JS engines developers as is arguments variable itself, the magic one which apparently is going to disappear as well.
What I do not understand, is why they do not make callee a reserved keyword and put this variable inside the function body as is for arguments and the function name.


function itsEasy(i){
    // itsEasy lives only here in every browser except IE
    // arguments lives only here in every browser
    // so it is simple to put itsEasy, arguments,
    // but so many problems with a callee variables ?
    return i < 2 ? i : i + callee(i - 1);
};

We'll see how much we will have to change our code and how bigger will be for this non-sense decision ... JavaScript beauties should not be changed, even PHP has at least a function to retrieve the arguments array ... put a function then, whatever other solution, but please do not constrict developers to name in a completely meaningless and redundant way every single lambda. Not a single lambda based language is that fossy about it, IMHO.

JavaScript arguments Weirdness!

2009-06-21T13:53:00.006+02:00

As you know, arguments is a "magic undeclared variable" with a local scope present in each function body. This variable is an Object, with an Array like structure.



checkArgs(1, 2, 3);

function checkArgs(){
    // even if we do not declare
    // arguments, this one will
    // be present with a length property
    // equal to 3 and respective
    // 1, 2, and 3 values at index
    // 0, 1, and 2
    arguments.length; // 3
    arguments[0]; // 1
    Array.prototype.join.call(arguments,"-");
    // will produce 1-2-3
};

Nothing new so far, but I bet not everybody knew some arguments "feature" which is browser dependent or somehow re-usable.

The Common "For In" Behavior

There is a particular behavior about arguments variable, it does not expose properties in a "for in" loop.



checkArgs(1, 2, 3);

function checkArgs(){
    for(var key in arguments)
        alert(key);
    // nothing happened ...
};

How can be possible? Simple enough, 0, 1, and 2 index properties are not user defined but JavaScript core assignments. Since JavaScript nature is extremely dynamic, it is simple to define what you want to expose in a loop, so far user defined properties or methods, and what should not be iterated in a "for in", something we will be able to manually introduce in next JavaScript release.

Initial Weirdness

Funny enough, even if we reassign indexed properties, these will not be exposes in the loop, but if we set an extra index or property, this one will probably be exposed.


checkArgs(1, 2, 3);

function checkArgs(){
    for(var i = 0; i < arguments.length; ++i)
        arguments[i] = arguments[i];
    // the extra index, manually assigned
    arguments[3] = 4;
    for(var key in arguments)
        alert(key);
        // will be 3 in FF and IE
    // still nothing in Chrome
};

And as soon as we change the length property, this one could be exposed (FF, IE) or not (Chrome). So what we have so far?

Zero Stress for Extended Object.prototype Checks?

Since as I said arguments is always part of a function body, we could use this variable to know if some piece of code changed the Object prototype, rather than create a new object for each check.


function someGeniusExtendedObjectPrototype(){
    for(var k in arguments)
        return true;
    return false;
};

Unfortunately, this is not worthy, because the empty inline Object instance creation performs better than a scope resolution for an undeclared variable as arguments is.


function someGeniusExtendedObjectPrototype(){
    for(var k in {})return true;return false;
};
// that's it

An Instance With Not Exposed Indexes?

We could think to use arguments as a Function prototype in order to create objects ... wait a minute, NO! We could think to create a function that will directly make the magic argument public, rather than internal.


// global window scope
// where arguments has no
// meaning
// NOTE: do not use with Internet Explorer
function arguments(){
    return arguments;
};

// let's test it
var a = arguments(1, 2, 3);

// loop ?
for(var k in a)
    alert(k); // nothing!

// it "works"!

Unfortunately, the super innovative, secure, and efficient with advanced tab isolation and recovery browser Internet Explorer 8 crashes like a charm, so we need to rename the function into something less ambiguous for the magic JScript engine.


// use with Internet Explorer too
function args(){
    return arguments;
};

A Magic Object Creation?

Using latest snippet, we could abuse about "for in" feature to create our favourite library ... maybe ...


function MyCoolCollection(){
    // will be exposed in IE and FireFox
    arguments.push = Array.prototype.push;
    // will be exposed in FireFox
    arguments.toString = Array.prototype.join;
    return arguments;
};

var a = MyCoolCollection(1, 2, 3);

// nothing only in Chrome
for(var k in a)
    alert(k);

// with this, IE will expose added index "3" and length
a.push(4);

alert(a); // 1,2,3,4

Nada, nien, nothing ... arguments is destined to be arguments, damn it!

arguments as prototype

Trying to discover more arguments freaking stuff, I used this magic variable as prototype:


(function(){"use strict";

// reusable in-scope constructor
function $(){};

// the magic ArgList function
window.ArgList = function ArgList(){

    // assign arguments as prototype
    $.prototype = arguments;

    // return a new magic instance
    return new $;
};
})();

var a = ArgList(1,2,3);

Everything seems to be OK except Internet Explorer does not expose properties until you manually discover them:


// after above snippet ...
Array.prototype.slice.call(a);
// ",," in Internet Explorer
// 1,2,3 in every other browser

Cool enough, we just discover a property and magic happens again:


a[1];
Array.prototype.slice.call(a);
// ",2," in Internet Explorer

Sometimes I forget we have to deal with a browser which logic is to bring internally even user comments:


var f = ( /* hi scope! */ function(){ /* hi bracket! */ } );
alert(f);
// will be exactly:
// ( /* hi scope! */ function(){ /* hi bracket! */ } )
// the magic of an efficient code parser

As summary, to use arguments as prototype the function should be modified for IE:


(function(){"use strict";
function $(){};
window.ArgList = function ArgList(){
    $.prototype = arguments;
    var o = new $, i = o.length;
    while(i--)o[i]; // just access ...
    return o;
};
})();

Firefox Specific Weirdness

arguments has some secret negative index in every Firefox (Spidermonkey) engine. For example, the index [-2] contains the length of the arguments object, but it does not perform faster than arguments.length, useless. The index [-3] contains the function itself:


function args(){
    alert(arguments[-3] === arguments.callee);
    alert(arguments[-2] === arguments.length);
};

In a valueOf operation, arguments[0] contains a sort of information, undefined, or "number", which could tell us if the object is going to be casted as a number:


var o = {
    push:[].push,
    length:0,
    toString:[].join,
    valueOf:function(){
        return arguments[0] == "number" ? this.length : this.toString();
    }
};

o.push(1, 2, 3);

alert(o);   // 1,2,3
alert(o*1); // 3

Is That It?

I am sure every browser has some weird behavior with arguments variable so more than an inspiration for ArrayLike Objects, we cannot truly rely that much in this magic variable. What did you discover guys?

The One With Microsoft Paying Users

2009-06-17T20:32:00.006+02:00

You probably do not know what's happened today at about UTC lunch time. It has been just a quick twit from John Resig, that at least every follower instantly noticed the next Microsoft campaign pro Internet Explorer 8.

The Fact

Microsoft Australia launched a sort of "competition", called Ten Grand. Apparently, starting from Friday 19th, a twit will be released each N hours, creating a sort of one day investigation to discover where the price is (in my opinion somewhere in the same page where the contest begins, assumption created by my idea about M$ "fantasy").

The Problem

That Web Page literally insults other web browsers, even discarding, probably on purpose, Opera one. In few words, that game is only for Internet Explorer 8 Users. OK, OK, they are apparently desperate enough to pay users in order to have more market share, fair enough, but what is all this "fun" about others?

You'll never find it using old Firefox

You'll never find it using boring Safari

You'll never find it using tarnished Chrome

The Old Firefox

Growing up, day after day and biting points to IE market share, Firefox has always been an advanced browser, specially compared with Internet Explorer. Easy for everyone, powerful for developers, Firefox supports, for example, still in draft HTML 5 elements and W3 standards ... since ages!
Internet Explorer 7 by the time was still suffering standards events, CSS 2 problems, and slow general responsiveness, over missed possibility for developers to debug properly. From Firefox, Internet Explorer 8 tried to copy a wonderful tool, Firebug, without having sames possibilities. Internet Explorer 8, compared with Firefox, has still W3 standards compatibility problems, a 5 times slower JavaScript engine, and lack of plug-ins to develop or simply surf more free.

The Boring Safari

When you catalog a browser with such adjective, boring, it means you do not have arguments at all and you have been swallowed in the kiddish gne, gne, gne twister unable to admit that "the boring one", is 2 laps around the world in front of you. The pioneer of CSS 3 transitions, effects, text properties, animations, one of the first to implement via WebKit guys (Gosh, I forgot to test WebKit there!!!) the new Squirrel Fish Engine, now Extreme in Safari 4, which is about 20 times faster than Internet Explorer ... but I forgot, boring is Safari because I guess boring is Mac OSX right? The Operating System famous for its native fluid user friendly special effects? Tha company that made iPhone, iPod, iWhatever, a must for everyone? Ooooohhhh Yes, that's boring!

The Tarnished Chrome

... wait a second, it's probably me .... let me think ... "tarnished Chrome ... rome ... ome ... om". To be honest, when I read that, I though the creator of this Chrome dedicated version smoked a truly powerful drug, one of those drugs they write: use carefully in open spaces to avoid poisoning, but he rolled up the chemical stuff and that's the slogan: Avoid The Tarnished Chrome (The One With All Colorful Logo, Right?)
I am sure this is the adjective about Google in Microsoft corridors, but still, only assumption. A browser that in few months is already between the third and the fourth position, rich of plugins, innovative ideas, is open source and again, it has a proper JavaScript engine, the V8 one, able to destroy in performance all Internet Explorers togheter!
Which part is tarnished? Google is a "neverendingmoving" company, which rather than block Web Development for at least 5 years is putting effort every day to make the Web a better, evoluted place (Silverlight possibly excluded, personal opinion).

The Smell Of 90s Competition Page

Seriously, a competition which aim is to ask people to use Internet Explorer, rather than a website created only for Internet Explorer with, for example, @font-face instead of those old style images over hidden text ... I mean, what the hell is that, a web page? I think all bad practices found a single page to be presented. Bad quality png, maybe this is for IE6, disproportionate use of images to make the page size about 140Kb, insults that only old IE8 users will appreciate for Who knows which reason (wake up guys), and a logic, a server side control, SO EFFICIENT, that simply using a userAgent switcher Firefox plugin I was able to emulate IE8 without receiving insults. Is this what you are looking for, a winner with Firebug, a plug-in to emulate Internet Explorer 8? What will happen if for some reason the winner will not use IE8? I am the author of vice-versa, for example, even emulate IE8 JScript is not a problem, with a more powerful browser, isn't it?

Opera Unite ... or better, Server Widgets!

2009-06-16T21:22:00.003+02:00

My plan to conquer the World was so close that I could not believe it: the power of my old Centrino 1.6 based Laptop, nowadays less powerful than latest Netbook, plus my fantastic USB pen to surf constantly switching between GPRS, HSDPA, and 56Kb with constant lags of service, and finally a magic Web Server directly inside a good browser! WOW, It's Done!

What Blocked My Plans

... not the hardware, neither the connection, just the idea! First of all, I cannot understand (or maybe I can ...) that much why everybody should be excited by something like Opera Unite:

the idea is not new
the implementation is not that friendly
there are hundreds of limitations

Nothing New

Somebody already complained about the un-innovative service or the browser integrated web-server, I would like to add the good old no-ip service to the list: install a Web Server, whatever it is, and as long as you are connected, no-ip will redirect a static url into your dynamic IP address. Easy? Moreover, you'll have full control over chosen programming languages, databases, etc etc. So which part of a unified sub domain into Opera servers redirected into your browser is that exciting?

Not That Friendly ... At All!

First of all, I think it is extremely ambiguous to put JavaScript files without understanding if these are for the server or for the client ... could be both? Who knows, I though the load event was for the global object ... what a surprise to find a load event specific for this internal web server. Something like addEventListener("webserver", function(){}); was too difficult to think about, wasn't it? If we would like to mess up our code, adding checks everywhere because we "do not know" how the file is going to be executed, that "load" event is the best option ever. Again, to test the application "as is", apparently we need to put files into a file zip renamed .us - how comfortable for a language which main tradition is the one to be run-time interpreted ... No way, write code, zip, rename the archive, test ... and if a coma was wrong, redo from the scratch. I am sure I am missing something, that was my first opinion as soon as I got how to create my first web app.

Too Many Limits

A local web-server, the key to save some money in this credit crunch era? And how can we do it if the second we "close the browser" all our data will be lost? Alternatives:

storage mountPoint polled every N seconds in order to de-serialize data, add new one, if any, re-serialize, and save back again ... boring, not that safe, slow!
pray that the service, so far beta (alpha?) will never shut down, and use the finally never that usefull JSON Query library
ask Opera Engineers what's wrong with W3 Database API, considering we could implement an SQLite file directly in the package, and copy in the storage folder if necessary. Just easy like that!
others, probably released with final version?

Moreover, everything is sandboxed via the xml configuration file ... but why on earth? OK, security, so we as hosts are considered not safe ... no-ip again? Folders limited somehow because of the event managment, we need a naming convetion. No Rewrite Rules possibility, and if I can add "myPage" event, will it be fired when I try "myPage/myName"? I do not know, Opera Unite crashed few seconds ago, I cannot try.

Maybe It Is Just Me

Yesterday I commented an arrogant post about JavaScript from PC Pro, today I am the arrogant one here and I am sorry if everything is because of my patience, vanished few seconds after I read the API and I did some test, but the impression is that since Opera Widgets are a good reality, this Opera Unite would like to make Widgets even closer to Developers, but in the server, it does not deal that well, IMHO. Anyway, there is still hope, this is a beta (alpha?), and hopefully good old Opera Pioneer will listen our opinion, improving our experience, and going forward thanks to our comments. Will it be the case?

On David Fearon PC Pro GWT Article

2009-06-15T22:27:00.005+02:00

I do not even know why somebody like me should buy PC Pro, maybe it was simply reminding me 12 years ago when I started fixing Hardware and Software problems as Computer Shop Technician? Maybe I was flying to Italy alone? It does not matter, nice enough I found, after years without reading it, an updated magazine which decided a while ago to talk about IT and Web as well, rather than only Hardware and few desktop applications.

Don't be afraid about Google latest web revolution

this is the title of the article, and the subject is not wave but GWT.

JavaScript, the hideous language saved by browsers?

If you do not know a language, or you cannot spot its beauty, 'cause you only know a different one, in David case Java, you should not categorize JavaScript that bad.
First of all, unlike David, I deeply know JavaScript, and I worked with both Java language and Java Developers, so I know what I am talking about, secondly, comparing a strongly typed programming language, Java, with one of the most successful, famous, omnipresent, and advanced scripting one, JavaScript, is an error that even a kid would not commit ... what are we talking about?

Even Google Prefers JavaScript And Does NOT Use GWT

at least this is what Ajaxian reported few days ago.
Accordingly, if GWT and Java are "that cool", I wonder why big G developers use raw JavaScript, which in mentioned article is described also as the drudge that drains the fun out of web development ...
Moreover, JavaScript is apparently an assembly language, in this era the language that the web can understand ... nothing about its simplicity, new amazing performances thanks to new engines, prototypal inheritance, nested closure, injectable scope, and all stuff that if you are not familiar with, you cannot even understand (neither comment badly, IMHO).

Tomato, Potato, and Pomato

I found that article for some reason interesting, not because it convinced me that JavaScript is a bad programming language, from scripting branch, just because I discovered how people could expose their opinion in such arrogant and not that competent way. PC Pro is still probably the best magazine out there, if we would like to be updated 360°, but please keep being neutral about subjects, whatever these are, you do not need to insult something you probably do not understand ... some reasonable comment could be enough, and that's it, don't you agree?

Best Regards.

P.S. "Google has some of the best Ajax hackers out there", it cannot be true guys, I am not a Google developer so far :P

Wait A Moment, JavaScript Does Support Multiple Inheritance!

2009-06-10T20:43:00.008+02:00

... we are just doing it wrong!

Classical Inheritance? We Have Something Better!

The main limit about multiple inheritance in JavaScript is the presence of "instanceof" operator. In a prototypal based inheritance objects simply inherits from objects, and class keyword is almost meaningless.


// generic constructor
function B(){};

// remember the prototype
var B1proto = B.prototype;

// B instance
var b1 = new B;

// prototype reassignment
B.prototype = {
    constructor:B
};

// remember new prototype
var B2proto = B.prototype;

// B instance
var b2 = new B;

alert(b2 instanceof B); // true
alert(b1 instanceof B); // false

Above snippet demonstrates how inheritance and instanceof are related to the current prototype, rather than the function/constructor itself.
In few words, the function is the implicit init method for the current prototype object. The relation, as we could spot with FireFox, is with the prototype and not the used constructor.


// FireFox exposes __proto__
// will be Object.getPrototypeOf
// in ECMAScript 3.1
b1.__proto__ == B1proto; // true
b2.__proto__ == B2proto; // true

Sure, And What About Multiple Inheritance?

... I am going there, wait another few seconds :D
Since the prototype is the relation, and not the constructor, and since a prototype is nothing but a common Object, we can add whatever method or property we want to this prototype object in order to obtain the hybrid one we are looking for.


function A(){};
A.prototype.name = "A instance";
A.prototype.getName = function(){
    return this.name;
};

function B(){};
B.prototype.name = "B instance";

function C(){};
// default name from B
C.prototype.name = B.prototype.name;
// getName from A
C.prototype.getName = A.prototype.getName;
// new method for C
C.prototype.setName = function(name){
    this.name = name;
};

var c = new C();
c.getName(); // B instance
c.setName("Andrea");
c.getName(); // Andrea

In few words, we can add whatever we want to a prototype object creating exactly what multiple inheritance would create. We still have a problem with instanceof operator, don't we? Well, considering that "instance" concept is something more meaningful in classical inheritance, we could say that it is not possible to emulate multiple inheritance Python like with JavaScript, but we can inject whatever method/property from whatever constructor.prototype, something not possible with Java, PHP, C#, and others ... so are we missing something?

A Basic Object.implement Function Check

Due to the fact we could need to know if an hybrid instance is using this or that method, we could think about an abstract implement method able to tell us if a generic instance constructor prototype, is at least implementing another constructor prototype, considering latter one as an interface. If this is true, we are sure that we can use that instance/object in that way and without problems ... isn't it?


Object.implement = function(o, constructor){
    // Another WebReflection Insane Snippet
    if(o instanceof constructor)
        // nothing to check
        // classical boring stuff
        return true;
    // let's check if things are OK
    var k, b = true,
        // take the instance constructor prototype
        po = o.constructor.prototype,
        // take the implemented prototype
        pc = constructor.prototype
    ;
    // for each property or method
    // in the implemented constructor
    for(k in pc)
        // check if the instance inherited prototype
        // has this method/property as well
        b = b && k in po; //* TOTHINK: */ && (typeof po[k] === typeof pc[k]); //*/
    // if there was nothing to check
    // we cannot say a word ... but ...
    // if instance has every method/property
    // present in the compared constructor
    // prototype, we could say this instance
    // implements this constructor
    return !!k && b;
};

Purist Classical OOP Developers are probably already rolling around the floor in pain and screaming he's f#@*in idiot, but what is the meaning of implement in classical inheritance patterns?
Wikipedia - Interface

Interfaces are used to encode similarities which classes of various types share, but do not necessarily constitute a class relationship

In few words my latest snippet checks if an object contains every method/property defined in another object so, using first example, we could do:


// add noise and chaos with another constructor ...
function D(){};
D.prototype.notInObject = true;

// check Object.implement ...
Object.implement(c, A); // true
Object.implement(c, B); // true
Object.implement(c, C); // true
Object.implement(c, D); // false

Nothing new? Nothing true? Is it clear for everybody? 8-)

ExtJS And The Bloody TreePanel Arrow

2009-06-10T00:40:00.004+02:00

First of all I am sorry for choose title, but I kinda lost dunno how many minutes to figure out what was wrong, and it was not me!
Please let me try to explain what was the requirement, and how I had to force ExtJS to act as I want, version 2.2.1 or 3.0RC2, it does not matter.

The Problem ...

The reason you or your company choose ExtJS is most likely because of its Office $uite / Window$ look and feel, closer than many others to a proper Desktop Application, perfect under Adobe Air, and one step forward about stability, performances, and documentation, even with the old enemy: Internet Explorer 6. Fair enough, it's a good library but, there is always a but, at the same time it does not replicate 100% same Window$ behaviors.
As example, try to click Start and Run a prompt command, explorer.
This is the typical Window$ file browser, something we deal with since ages, something still a user habit.

... In Details

How does it work? It is really simple, we have a representation of our files in the left, let's call it Tree, and many details on the right but only if we click a folder. That is the problem, the Jurassic explorer acts differently if we click the [+] rather than the folder/file. The difference is that while we are simply surfing a Tree structure, we do not need to show every single detail, preview, whatever, on the right side until we click, still on the left side, into the folder we need.
As summary, one click on the [+] to open the folder, one to [-] to close it, if we click the folder and it is closed, it will be opened as if we pressed the [+] and the right side will change showing details about that folder. Morevore, if we do a double click, nothing happen, the explorer works with click, and eventually right click. Seems to be truly simple, isn't it? It's NOT, unless I am missing an hidden part of ExtJS documentation because I swear I tried everything.

Ext.tree.TreePanel Hacked To Have More Control Over The Arrow

... where the rrow is the one in ExtJS 2, in version 3 they put a lovely [+]/[-] which reminds even more explorer surfing!!! I am not here to judge ExtJS choices, I am just writing my solution to this problem, specially because tdginnovations asked me, via twitter, to make this problem public, with solution as well.


// good old onload ...
onload = function(){

// simple function to add nodes
// just for this example
function addNodes(root, dummyData){
    for(var
        i = 0, length = dummyData.length,
        cls = {true:"file",false:"folder"},
        data, leaf;
        i < length; ++i
    ){
        data = dummyData[i];
        leaf = root.appendChild(new Ext.tree.TreeNode({
            text:data.text,
            leaf:!data.items,
            cls:cls[!data.items]
        }));
        if(data.items)
            addNodes(leaf, data.items);
    };
};

var
    // just a sync example
    // with a couple of folders
    dummyData = [
        {text:"Test 1", items:[
            {text:"Sub Test 1 1"},
            {text:"Sub Test 1 2"}
        ]},
        {text:"Test 2"},
        {text:"Test 3", items:[
            {text:"Sub Test 3 1"},
            {text:"Sub Test 3 2", items:[
                {text:"Sub Test 3 2 1"},
                {text:"Sub Test 3 2 2"}
            ]},
            {text:"Sub Test 3 3"}
        ]}
    ],
    
    // the lovely TreePanel
    TreePanel = new Ext.tree.TreePanel({
        renderTo:document.body,
        border:false,
        rootVisible: false,
        root:{
            expanded: true,
            text: "",
            draggable: false
        },
        
        // global TreePanel events
        listeners:{
        
            // Hack #1: The Lovely Arrow ..
        
            // here starts the open hack ...
            // when the arrow is clicked,
            // no click event is propagated
            // but when the node is clicked
            // beforeexpandnode is called ...
            // to avoid troubles I used a flag
            // in order to discard next
            // beforeexpandnode event
            // without returning false
            // but if this is the arrow
            // without the click ... so
            // the lonely beforeexpandnode ...
            beforeexpandnode:function(Node){
                // check if the flag is not setted
                if(!Node.beforeexpandnode){
                    // set the flag, prevent
                    // return false onclick event
                    Node.beforeexpandnode = true;
                    // fire the click event
                    // the one in charge
                    // to load or show stuff
                    Node.fireEvent("click", Node);
                    // block this call
                    // or we gonna open twice ...
                    // with possible loops
                    // (at least in Ext 2.2.1)
                    return false;
                }
            },
            // here we are ...
            // if it was a click in the name/folder/leaf
            // this event is fired before beforeexpandnode
            // we need to check a couple of things ... 
            click:function(Node, e){
                // if node is expanded
                // we do not need to do anything
                if(Node.isExpanded()){
                    console.log("already expanded");
                }
                // but if node is not expanded
                // and the beforeexpandnode flag 
                // has been setted as true ...
                else if(Node.beforeexpandnode) {
                    // we know that this click
                    // is from the arrow, and not
                    // from the folder or name
                    console.log("expand via arrow/plus or minus");
                    // we can load stuff async, putting
                    // a mask to the panel before, removing it
                    // on load success, add nodes
                    // and finally expand this Node
                    // this if should not exists if
                    // the node is a leaf, cause there
                    // is no arrow beside
                    Node.expand();
                }
                // if node is not expanded but it is
                // a folder and beforeexpandnode flag
                // has not been setted as true
                // we know that the user performed
                // a click ...
                else if(!Node.isLeaf()) {
                    // to avoid another click event
                    // triggered via beforeexpandnode event
                    // we need to set the flag as true
                    // so beforeexpandnode will not
                    // return false calling this event
                    // again (precedent if)
                    Node.beforeexpandnode = true;
                    // at this point we could perform
                    // a different request
                    // which could return the entire node
                    // list plus some other information
                    // or simply do something else
                    // rather than just populate the 
                    // Node with sub-nodes
                    console.log("expand via click");
                    // in this case, let's expand the node
                    Node.expand();
                }
                // none of precedent condition
                // was true, interesting ...
                // ... it must be just a leaf ;)
                else {
                    // let's do something
                    // with this leaf
                    console.log(Node.text);
                };
                // the main problem with click
                // is that it is not possible
                // to avoid a double click
                // e.stopEvent() ? no way
                // it does not do anything with
                // dblclick, useless
            },            
            // last part of this little hack ...
            // once the node is expanded
            // it makes sense to 
            // set the flag as false
            // so next beforeexpandnode event
            // will work as expected
            expandnode:function(Node){
                Node.beforeexpandnode = false;
            },
            
            // Hack #2: ... I said:
            // DO NOT CLOSE ON DOUBLE CLICK!!!
            
            // at least this hack is even shorter
            // but it still requires 2 events
            // dblclick, as I said, cannot be
            // stopped ... but it does not
            // really matter, cause
            // beforecollapsenode will be fired
            // always before ... so, even
            // implementing a proper stopEvent
            // how could we avoid closing action
            // from beforecollapsenode event
            // since this is fired before 
            // dblclick?
            
            // dblclick has to be a sort
            // of filter able to change
            // another flag
            // beforecollapsenode
            // if node is expanded
            // we set the flag as false
            // why ? ... read next ...
            dblclick:function(Node, e){
                if(Node.isExpanded())
                    Node.beforecollapsenode = false;
            },
            
            // beforecollapsenode event
            // is fired before dblclick
            // so this hack is about milliseconds.
            // if the flag is not set
            // we set it as true and we call a timetout
            // Hopefully, the double click will be performed
            // before choose timeout.
            // If this happens, it means
            // that the user double clicked the
            // opened node, otherwise
            // it means that the user did not
            // mean a double click (the arrow
            // does NOT fire a dblclick in any case)
            // while He/She simpl clicked once in
            // the arrow (or more than once to close it)
            beforecollapsenode:function(Node){
                if(!Node.beforecollapsenode){
                    Node.beforecollapsenode = true;
                    setTimeout(function(){
                        // so here this hack should
                        // perform its action ...
                        if(Node.beforecollapsenode)
                            // closing the node
                            // if it was not a dblclick
                            Node.collapse();
                    }, 20);
                    return false;
                }
            },
            // to complete the task
            // let's reset status 
            // on node collapsed
            collapsenode:function(Node){
                Node.beforecollapsenode = false;
            }
        }
    })
;

// it's time to test
addNodes(TreePanel.getRootNode(), dummyData);
// and play with this version
TreePanel.render();

};

That's it, waiting for comments, better examples, or even solution I could not think about!

MySQL UPDATE DELAYED - Just My Solution

2009-06-07T22:29:00.006+02:00

The Problem

MySQL supports DELAYED option as INSERT statement but, for some obscure reason nobody got so far, it does not support UPDATE DELAYED or DELETE DELAYED.

Why DELAYED Is Necessary

As quick summary, INSERT DELAYED is something truly useful when we would like to let MySQL decide when it is time to perform that insert without blocking tables and users. This is a problem almost specific for engines like MyISAM, MEMORY, ARCHIVE, and BLACKHOLE. This post is not about "why not InnoDB", this is about DELAYED with these engines, specially with MyISAM one.
To better understand a common case where an UPDATE DELAYED could be extremely useful, just think about a counter, how many users visited that id. Is such information that useful to be not approximated and to possibly block every other select because of an update that nobody will verify with a microscope? In my opinion, such information is "just a plus" and if the page execution could be faster without blocking anybody and putting those UPDATES in a queue as is for INSERT DELAYED in order to perform it in a shot and in "the best moment ever" ... why on earth we should have not such option?

UPDATE LOW_PRIORITY Is NOT The Same

Unfortunately, we could choose to let the user wait a bit more thanks to LOW_PRIORITY option with an UPDATE statement but still: why that user should wait more for such irrelevant information?

Split The Problem! That's My Idea

Apparently there are no good options to emulate an UPDATE DELAYED with MySQL so I tried to use INSERT DELAYED plus some trick able to delegate the LOW_PRIORITY update to somebody else (crontab or database via event), without blocking any user and making page response faster with hundreds of thousands of rows for a single static table.

Example Tables

Try to imagine we have a generic service based on an id, which is unique and used in every other part of the database as main relation. Now for this id we could have other N fields, it does not matter, as long as we use a total field to know how many users visited that id.


CREATE TABLE IF NOT EXISTS counter (
    id INT(10) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
    /* one or more fields (possibly static) */
    total INT(3) UNSIGNED NOT NULL
) ENGINE=MyISAM;

/* let's populate the counter table with 3 ids */
INSERT INTO counter (total) VALUES (0), (0), (0);

The REPLACE DELAYED query will be a suicide for a big table with thousands of records, while INSERT DELAYED cannot be performed in the main table or every key will be duplicated for N times. To perform an INSERT DELAYED we need then another table, with just a single field, possibly the same type used for the main key, in this example the id.


/* specific table for delayed inserts */
CREATE TABLE IF NOT EXISTS counter_total (
    id INT(10) UNSIGNED NOT NULL,
    KEY id (id)
) ENGINE=MyISAM;


/* visits for ids,  3 users in id 1, 2 in id 2, 1 in id 3 */
INSERT DELAYED INTO counter_total VALUES (1);
INSERT DELAYED INTO counter_total VALUES (2);
INSERT DELAYED INTO counter_total VALUES (1);
INSERT DELAYED INTO counter_total VALUES (3);
INSERT DELAYED INTO counter_total VALUES (2);
INSERT DELAYED INTO counter_total VALUES (1);

Last INSERTs are to emulate 6 users visiting id 1 3 times, id 2 twice, and id 3 only once. Since we are using INSERT DELAYED it does not matter how many users are surfing the page and how many are in the same id, we simply do not care and we let MySQL decide when it is about the time to shot every insert in one go for the WRITE ONLY table, counter_total. Moreover, since the main id is the key for this solution, the query is so simple that its execution time will be extremely fast, even in my laptop.

Every N Seconds, Minutes, Hours ...

At this point the counter_total table will contain N main ids, what we have to do know is:

block possible insert delayed locking the counter_total table

have a snapshot of visited ids and total visit, via function COUNT

reset counter_total to keep it small and fast

release counter_total to allow queued INSERT DELAYED to be executed

find a way to quickly update with low_priority the main counter table

To solve above points we could use a TEMPORARY TABLE created directly with ENGINE=MEMORY. This will ensure us CPU+RAM speed performances without using that big amount of RAM in any case (if we do, we need to reduce the delay between one call and another one).
Here is the sequence to perform the entire operation in a flash!


/* WebReflection UPDATE DELAYED Workaround */
CREATE TEMPORARY TABLE tmp_counter (
    id INT(10) UNSIGNED NOT NULL,
    total INT(3) UNSIGNED NOT NULL
) ENGINE=MEMORY;
LOCK TABLE counter_total WRITE;
INSERT INTO
    tmp_counter (
        SELECT
            counter_total.id,
            COUNT(counter_total.id)
        FROM
            counter_total
        GROUP BY
            counter_total.id
    )
;
DELETE FROM counter_total;
UNLOCK TABLE;
UPDATE LOW_PRIORITY
    counter AS c
LEFT JOIN
    tmp_counter AS tc
ON(
    c.id = tc.id
)
SET
    c.total = (
        c.total + tc.total
    )
;

That's it, tested over hundred of thousands of records in a reasonable 0.2 time and with an old laptop that apparently, if "used" properly, can still give me a lot :P

As Summary

A counter is a classic example where an UPDATE DELAYED could be useful. Unfortunately MySQL does not support it (probably version 6) so we can use the supported INSERT DELAYED (please note with replication will be a normal INSERT due to synchronization problems but it will be for a write only table). To do this, we need to create another table and lock it when we decide that it is about the time to update the main one. With a truly simple sequence of queries, this could be a super fast operation, rather than a bottleneck if for some reason 100 users are visiting our website with "inline update".

Now, do you have a better solution? If Yes, please share it, thanks ;)

P.S. I need to say thanks to Olga for the temporary suggestion, I was almost struggling with missed MyISAM transactions :D

input.focus() ... something really annoying!

2009-06-05T23:40:00.007+02:00

new libraries, new add-ons, new engines, new browsers, but still the bloody focus event directly in the onload one ... any chance we will go a step forward?

What is wrong with focus

The main usage of this strategy is to force via JavaScript the focus of the main input field and it is usually on the top of the page.
It could be a search input, a la Google, or it could be a generic log-in. It could be a blog post title, or it could be a comment ... whatever it is, it should NOT act like this!
Try to imagine you have a slow connection (I am still with mobile usb pen) or try to imagine you are using your A Grade browser mobile phone with still, a not that fast connection (I am still using my Android, iPhone is the same).
Since these magic-focused fields are usually at the beginning of the page and since the page will take more time to be downloaded, 90% of the time this automatic feature messes up my user and password or my searched keyword. Too often I have to correct or change back the field, specially when I need to log-in into my on-line banking service, where my actions are faster than page download. Am I that fast? OK, Android first model with its pretty keyboard let me type faster than how I could do with iPhone or second Android generation, but the main problem is that if there is an image, for example, or generally speaking just content after main focused input, the onload event will be fired too late and it will be completely useless and inefficient, rather than being an help for the user.

How could we solve the problem

In my opinion, it is the most simple thing ever. Assuming that the theoretically helping focus will be only one per page, if the site would like to make sense, all we need is a little manager able to understand if the input received focus before the onload event:


<form name="f" action="/search">
    <input name="q" onfocus="fff=1" />
</form>

fff will be a global variable which name is absolutely irrelevant and which aim will be to stop the generic onload event to force focus in that input.


<body onload="if(!this.fff)document.f.q.focus();">
    <!-- ... the rest of the page ... -->
</body>

With a zero effort + stress strategy that will not increase more than a couple of bytes our page, users will have more control over their fields. This simple trick could be used for every textarea, input, select, or button in the page making the auto focus really helpful in those case user has a fast connection or is lazy and does not want to point the focus automatically, rather than quick posts via mobile or slow connections.

Another Way Without Changing Every Layout

I agree that probably nobody will ever change every page layout adding an inline onfocus event for each field, so here I am with a better solution that should be widely copatible with every kind of device.


(function(){
// A WebReflection Anti Stress Idea
function onclick(e){
    var target = (e && e.target) || event.srcElement;
    if(/^(input|select|textarea|button)$/i.test(target.nodeName)){
        window.fff = true;
        if(document.detachEvent)
            document.detachEvent("onclick", onclick);
        else
            document.removeEventListener("click", onclick, false);
    }
};
if(document.attachEvent)
    document.attachEvent("onclick", onclick);
else
    document.addEventListener("click", onclick, false);
})();



// as body or window event
onload = function(){
    if(!this.fff)
        document.getElementById("main-input").focus();
};

Above snippet does not require both onReady or onload events so it should work just adding it inside the head tag. It is so simple, now let's see how people will react 8)

en-code: the quickest way to encode your snippet

2009-05-27T00:20:00.014+02:00

Update I have created an inline callback that could be used to show en-code in every page or as bookmark:
WebReflection::encode (just a click to give it a try)


javascript:(function(src,w,h,i,s){if(this.WebReflectionEncode)return this.WebReflectionEncode();function p(){s.top=(document.documentElement.scrollTop||(document.body&&document.body.scrollTop)||0)+'px'};try{i=document.createElement('<iframe frameborder="0" src="'+src+'"></iframe>')}catch(e){i=document.createElement('iframe');i.src=src};s=i.style;s.border='1px solid black';s.width=w+'px';s.height=h+'px';s.position='absolute';s.right=0;s.zIndex=99999;p();w=setInterval(p,250);(document.body||document.documentElement).appendChild(i);this.WebReflectionEncode=function(){clearInterval(w);i.parentNode.removeChild(i);w=h=s=i=null;this.WebReflectionEncode=null;}})('http://www.3site.eu/encode/',280,320);

P.S. WOW, to make it possible I had to use raw format ... at least now the bookmark link seems to work fine in every browser!

What am I talking about?

We, as developers, too often post code in this or that website/blog, and often we loose our post or its meaning because of enabled html, and some mess in in the code. Basic example:


for(var i = 0; i<length; ++i) ...

Above snippet, extremely common, could cause unexpected problems due to the "i less than length" where the "<" character create a never-ending tag.

How can we solve the problem?

Usually I copy and paste code in a new document via CTRL+N inside Notepad++, and I replace every "<" with < ... but I have to admit: boring stuff!!! I discovered yesterday in Dustin Diaz blog, and I messed up completely a couple of comments, that there is a service, called postable, "to make your code friendly". First of all, I'll never get why that Ajax call exist, safetuze.php will never do anything different from an htmlentities or an htmlspecialchars but apparently I am wrong:

plus signs disappears, probably the author send without the proper encodeURIComponent JavaScript function, annoying

there is no reason at all to send back the entire textarea, we deal with a field, we would expect to wait only for what we wrote in that field (AHAH way for a textarea?), annoying

why we have to wait a server side call, is an absolute mistery ... as a plus, I am experiencing an USB pen to surf the web, and every single byte costs, annoying

a basic page like that with just a call to the server and prototype plus scriptacolous to do it? unacceptable!!!

postable, in my opinion, is a "not that good answer" to a truly common problem ... so

again, how can we solve the problem?

I created a totally cross browser page, thinking about bandwidth, simplicity, and performances. So here I am with en-code, the same purpose of postable, except it just escape code snippets on client side (N times faster) and it does not require an entire framework to do a single thing.

3KB Against 183KB

... and only congrats via Web Page Analyzer ...
Let me know what you think, enjoy ;)

Template Engine - Why Bother? XML + XSLT

2009-05-25T23:02:00.002+02:00

I am not sure I read the entire recent "war" in the PHP general mailing list about the best PHP Template Engine Option but, generally speaking, this argument is truly loads of solutions and controversial opinions. Here I am with mine.

PHP 5 And In Core DOM, XML and XSLT

Apparently, all these "Smarty adorers" did not consider that PHP 5 introduced a lot of core classes to work over DOM, XML, and transform them via XSL files. Nothing to do, they prefer to move an entire template application rather than use the best native, fast, in core, solution. Here a couple of reasons to generally prefer XML and XSL Transformations rather than whatever engine, specially those written in PHP itself, a not that fast interpreted programming language.

Think Portable

Apparently developers like to be stuck forever in a single programming language, something I cannot even try to consider, since Information Technology means Flexibility and Updates. An extremely valid point to choose XML as output, and XSL as Transformer, is the universality of the XML markup language first, and complete separation between data and business logic from its presentation after.
Something PHP developers often look for, discarding without a valid reason what is already there since ages. Even if the entire website or application programming language will change (performances anybody?), rather than simply take care about how to reproduce the same XML via the new language, they prefer to recreate for each sub-part of the website the code to make that completely new and different template engine work. This becomes even more ridiculous when arguments are like:

if I need php in the middle of the presentation layer, I simply put it there ...

... "good thinking", isn't it?

Think Scalable

First of all, XML can be easily cached without even moving a single database connection. Moreover, having zero dependencies from external engines probably based on the same XML + XSLT concept, could simply make our application faster. XML has thousands of implementations, libraries, and fast parsers, for every kind of programming language and latest dabases could even interact directly with stored XML (or retrieve data directly in XML, did you know that?)
An application that as main intermediate layer has XML will have so many long therms advantages hard to imagine, are you still thinking a foreach inside the layout is a good solution?

Think About Your Career

Ok, I use PHP and I want a template engine that will bring me nothing new to learn, except its own PHP exposed API. And tomorrow, when I'll move into another better structured company, everything about XML, XSL(T), and XPath, will be a non-sense, "'cause I know peeaichpee", isn't it?
If you think you know enough about XML and XSLT and you are not using these layers I bet you do not truly know them or real potentials.
I bet you do not know XPath, you do not know how to generate a valid XHTML/HTML layout, and you do not know XSLT strategies to retrieve only info you want to show and nothing else.
Well, think about this, more enterprise ready stuff, rather than just whoevercanuseit programming language (easy to start, hard to use properly, that's PHP) ... is it an extra plus to at least give them a try?

Extreme Performances? A concrete Example

The New York Times website is using these technologies since ages and it implemented its own XSL Cache Extension in order to obtain best performances with xsl documents. At the same time, XSLT is present in every browser, included Internet Explorer 5 so it is even possible to simply delegate transformation to the client, speeding up even more the server. Here a simple example, based on my "old" JXON proposal.

Do you still think there are so many better options?

Basic Ajax Twitter Application

2009-05-24T13:13:00.005+02:00

Yesterday I posted a work in progress of a Full PHP Ajax Proxy, today I would like to show you what you could do with that file.

Twitter API Directly via Ajax

Thanks to basic realm authentication support, it is extremely simple to create your own twitter app in your home page. Here the example:


<style type="text/css">
div.twit {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
    width: 320px;
}
div.twit h3,
div.twit h4 {
    margin: 0;
    padding: 0;
}
div.twit h3 {
    font-size: 10pt;
    color: blue;
}
div.twit h4 {
    font-size: 7pt;
    font-weight: normal;
    text-align: right;
    color: #999;
}
div.twit span {
    font-size: 8pt;
}
</style>
<script type="text/javascript" src="http://vice-versa.googlecode.com/svn/trunk/build/vice-versa.min.js"></script>
<script type="text/javascript">
function addIntoList(info, container){
    var div = document.createElement('<div class="twit"></div>'),
        h3  = div.appendChild(document.createElement("h3")),
        span= div.appendChild(document.createElement("span")),
        h4  = div.appendChild(document.createElement("h4"))
    ;
    h3.innerText = info.user.screen_name;
    h4.innerText = info.created_at.substring(0, 19);
    span.innerHTML = info.text.replace(/([a-zA-Z]+:\/\/[^\s]+)/g, '<a href="$1">$1</a>');
    container.insertBefore(div, container.firstChild);
};

onload = function(){
    var xhr = new XMLHttpRequest;
    xhr.open(
        "GET", "proxy.php?url=" +
        "http://twitter.com/statuses/friends_timeline.json" + "?_=" + Math.random(),
        false,
        "YOURNAME",
        "YOURPASS"
    );
    xhr.send(null);
    if(199 < xhr.status && xhr.status < 400){
        document.body.innerHTML = "";
        for(var
            list = Function("return " + xhr.responseText)().reverse(),
            length = list.length,
            i = 0;
            i < length; ++i
        )
            addIntoList(list[i], document.body);
    };
    setTimeout(onload, 10000); // again after 10 seconds
};
</script>

Be Careful!!!

First of all it is not a good idea to put user and password directly in your page source code, so try locally but do not put online. Secondly, I did not say anything yet about side effects and security problems related to this PHP proxy I am working on ....so, as I wrote in the other post source, "do not try at home"

PHP Full Proxy ... A Work In Progress

2009-05-24T00:44:00.006+02:00

Something "truly dangerous" to play with: a proxy file able to understand everything via XMLHttpRequest, enabling any sort of cross site requests (no COMET yet, it could arrive soon).
Dunno even why I am posting this "little monster", but I am sure a lot of people would like to have "access to the entire web" simply using Ajax, and nothing else, something like this:


function website_exists(url){
    var xhr = new XMLHttpRequest;
    xhr.open("HEAD", "proxy.php?url=" + (url), false);
    xhr.send(null);
    return 199 < xhr.status && xhr.status < 400;
};

if(website_exists("http://gogle.com"))
    alert("Of Course, It's Big G!");

WebReflection PHP Proxy


<?php

/** XMLHttpRequest PHP Proxy
 * @author          Andrea Giammarchi
 * @blog            http://webreflection.blogspot.com/
 * @license         Mit Style License
 * @requires        curl and Apache webserver
 * @description     basic authentication, GET, POST, HEAD, PUT, DELETE, others requests types.
 *                  Nothing to do on the client side, except put "proxy.php?url=" as request prefix.
 *                  The rest should be like normal in-server interaction
 * @note            DON'T TRY AT HOME
 */

// if no url has been provided, exit
if(!isset($_GET['url'])){
    header('HTTP/1.1 400 Bad Request');
    header('X-Proxy-Error: no url');
    exit;
}

// work in progress
/* without Apache ... requires alternatives for Authorization and other stuff not in $_SERVER
if(!function_exists('getallheaders')){
    function getallheaders(){
        $headers= array();
        foreach($_SERVER as $key => $value){
            if(0 === strpos($key, 'HTTP_'))
                $headers[str_replace(' ', '-', ucwords(str_replace('_', ' ', strtolower(substr($key, 5)))))] = $value;
        }
        return $headers;
    }
}
// */

// GET, POST, PUT, HEAD, DELETE, ect ...
$method = $_SERVER['REQUEST_METHOD'];

// curl headers array
$headers= array();
foreach(getallheaders() as $key => $value)
    $headers[] = $key.': '.$value;

// curl options
$opts   = array(
    CURLOPT_HEADER => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_BINARYTRANSFER => true,
    CURLOPT_CUSTOMREQUEST => $method,
    CURLOPT_HTTPHEADER => $headers
);

// if request is post ...
if($method === 'POST'){
    // populate the array of keys/values to send
    $headers = array();
    foreach($_POST as $key => $value)
        $headers[] = rawurlencode($key).'='.rawurlencode($value);
    $opts[CURLOPT_POST] = true;
    $opts[CURLOPT_POSTFIELDS] = implode('&', $headers);
}

// if it is a basic authorization request ...
if(isset($_SERVER['PHP_AUTH_USER'], $_SERVER['PHP_AUTH_PW'])){
    // create user and pass parameters to send
    $opts[CURLOPT_HTTPAUTH] = CURLAUTH_BASIC;
    $opts[CURLOPT_PROXYUSERPWD] = '['.
        rawurlencode($_SERVER['PHP_AUTH_USER'])
    .']:['.
        rawurlencode($_SERVER['PHP_AUTH_PW'])
    .']'
    ;
}

// init curl session
$call   = $session = curl_init(substr($_SERVER['QUERY_STRING'], 4));

// set all options
curl_setopt_array($call, $opts);

// clear unnecessary variables
unset($opts);
unset($headers);

// retrieve the output
$result = explode(PHP_EOL, curl_exec($call));

// nothing else to do so far (this version is not compatible with COMET)
curl_close($call);

// for each returned information ...
for($i = 0, $length = count($result), $sent = array(); $i < $length; ++$i){
    $value = $result[$i];
    
    // if all headers has been sent ...
    if($value === '')
        // send the output
        exit(implode(PHP_EOL, array_splice($result, ++$i)));
    else {
        // ... or send the header (do not overwrite if already sent)
        $tmp = explode(':', $value);
        header($value, !isset($sent[strtolower($tmp[0])]));
    }
}

?>

Have fun exploring the net ;)

[ECMAScript 5] Do Not Remove arguments.callee !

2009-05-23T15:15:00.004+02:00

Being subscribed in dunno how many developers mailing list, I completely forgot to follow up the arguments and arguments.callee discussion.
Accordingly to this John post, is with extreme surprise that I am discovering how critical is the gap between programming language developers and programming languages active users.

Even if I read more than once piece of SpiderMonkey or Google Chrome, I am part of programming languages users and I can tell you for sure that the decision to remove arguments.callee from the language will be a complete mess.

The Main Aim Of ECMAScript 5: Do Not Break What We Have So Far

Unfortunately, Internet Explorer will be broken, because named function persists in the scope, causing naming conflicts everywhere!


setTimeout(function f(){
    alert(window.f);
}, 1000);

Above code will alert the function f in every Internet Explorer. Moreover, as you can read in one comme of John's entry, Internet Explorer has function interpretation "problems", declaring or overriding already declared function even if these are in an else case, while other browsers do not even consider that part of code if it will never be executed.

Another Attemp To Slow Down The Already Slow Browser

Reading this long thread about the discussion, some clever guy suggested a simple solution to avoid naming conflicts ... a closure


(function(){
    setTimeout(function f(){
        alert(window.f);
    }, 1000);
})();

This simply means that our code size will drastically increase without a valid reason and number of created scopes and functions will be twice as was before (already too big). They think it will not slow down performances but they are forgetting old browsers that will be still used when all this wonderful shiny JavaScript will be released: Internet Explorer 7, and Internet Explorer 8 (assuming Internet Explorer 6 does not exist anymore ... would be nice to start to fight against the version 7 and then 8 ...).

Introspection and BackTrace? They Decided It Is A Bad Thing!

Without arguments.callee we are loosing arguments.callee.caller as well, often the only way we have to truly debug our code. At the same time the dynamic nature of JavaScript where "you can inject whatever wherever" will loose a big portion of its malleability.

Everything For Performances Reason ???

Apparently what this "new" language would like to get rid off is arguments variable, probably the most used variable ever, the inspiration of every ArrayLike object or library. This would be for performances, where we need as first step to call 2 functions rather than one for each runtime function assignment (setTimeout example and every assigned inline lambda) and where everybody will try to overload the language itself providing other methods to emulate the good old stuff!

Let's Start To Think About Re-Implementation Of Callee

As soon as I realized the news, I decided to think how to put again, and against performances, the callee behavior.


 function F(original){
    return function(){
        var f = window.callee,
            r = (callee = original).apply(this, arguments)
        ;
        window.callee = f;
        return r;
    };
};

Above snippet execution time will be almost the same of a closure with mainly two advantages

less code to write

more performances when needed

Here an example:


var i = 0;
setTimeout(F(function(){
    if(i++ === 1)
        alert("OK");
    else
        setTimeout(callee /* please read more */, 1000);
}), 1000);

Since JavaScript is single thread, the instant that lambda will be called the global variable callee will refer to the lambda itself. Cool, but it is not enough.
To be sure that we do not loose the callee because of some other function assignment, we should trap again the callee inside that execution:


var i = 0;
setTimeout(F(function(){
    if(i++ === 1)
        alert("OK");
    else
        setTimeout(F(callee), 1000);
}), 1000);

There we are, a quick and dirty solution to the problem ... but, in this case for each timeout we are creating another function within its scope. This does not happen if we use the closure strategy so, again, we are trapped and we need to add more layers in the middle to increase responsiveness for something designed to improve performances ... does it make any sense?


function F(original){
    function callee(){
        // save the current window.callee
        var f = window.callee, r;
        // assign this callee function
        window.callee = callee;
        // retrieve the result calling original
        // in the original scope, callee will be
        // this whole function
        r = original.apply(this, arguments);
        // assign back the window callee
        window.callee = f;
        // return the result
        return r;
    };
    // callee.callee will be the lambda
    // rather than its wrap (callee itself)
    callee.callee = original;
    // here we are
    return callee;
};

With above "monster" we have a slightly slower function that will always reassign the correct callee whatever will happen in the original function scope. This meanse simply that we can now use directly callee:


var i = 0;
setTimeout(F(function(){
    if(i++ === 1)
        alert("OK");
    else
        setTimeout(callee, 1000);
    // callee.callee for direct access to the lambda itself
}), 1000);

I Bloody Hate This Idea

... but if they do not change their mind, it will be one of few other possibilities we have to avoid naming pollution everywhere causing conflicts nightmare with every Internet Explorer version less than 9.

Have fun with ECMAScript 5 and its brilliant strict mode.