The One With Microsoft Paying Users

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!

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:

1. 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!
2. pray that the service, so far beta (alpha?) will never shut down, and use the finally never that usefull JSON Query library
3. 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!
4. 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

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!

... 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

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

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:

1. block possible insert delayed locking the counter_total table


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


3. reset counter_total to keep it small and fast


4. release counter_total to allow queued INSERT DELAYED to be executed


5. 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!

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

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 &lt; ... 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:

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


2. 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


3. 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


4. 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

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

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

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 !

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.

google caja, what's wrong with "new" ?

In JavaScript we mainly have two type of variables:

• primitives (string, number, boolean, null or undefined)


• object related (Array, Object, Function, unknown for IE)

Due to this difference, a primitive string and a new String are two different worlds:

var s1 = "abc";
var s2 = new String("abc");

s1 instanceof String; // false
s2 instanceof String; // true

The nature of primitive constructor is to return a typeof constructor, but if we use new in front of the same constructor, it will obviously return an instance of that constructor.

This is the nature of javascript, summarized in this snippet:

function I1(){
    return 1;
};

function I2(){};

var i1 = new I1();
var i2 = new I2();

In both cases, o1 and i2 will be respectively an instanceof I1, and I2.
In few words, if a function is caled via new, the assigned value will be an instance o the constructor itself or, if it returns an instanceof Something, the instanceof something value.

function I3(){
    return new I2();
};
var iPretendsToBe3 = new I3();

iPretendsToBe3 instanceof I3; // false
iPretendsToBe3 instanceof I2; // true

The same happens with Array, Function, and Object constructors.
These kind of variables are considered objects, for the simple reason you can add runtime a property, without losing it:

var s = "abc";
var o = Object("abc"); // returns a new String

s.test = true;
o.test = true;

s.test; // undefined
o.test; // true

When we use the Object function, we will obtain an object, instanceof passed argument.
Indeed, using latest example, o instanceof String will be true.

If A Function Returns An Instance Of Something, "new" Is Redundant

While if a function returns a primitive value (string, number, boolean, undefined, unknown for IE) this value will be simply lost the moment we will use new in front of that function.

function sum(a, b){
    return a + b;
};
var o = new sum();

o instanceof sum; // true

Obviously, if we call sum without the keyword "new", the function will return the sum of argument a plus argument b.

Due to this duality JavaScript functions feature, when we perform a new Array, Object, or Function, we are doing something a bit redundant, because the constructor itself will always return an instance of called constructor.

Array() instanceof Array;             //true
new Array() instanceof Array;         //true

Function() instanceof Function;       //true
new Function() instanceof Function;   //true

In the specific Function case, it is like thie scenario:

function Test(){
    return function anonymous(){};
};

var f1 = Test();
var f2 = new Test();

In both cases, new or not new, the returned instance wlll be the anonymous function, which has priority over the new keyword.
Accordingly, f2 will be virtually an instanceof Test constructor between the call and the return anonymous space, something completely useless.

In my good old ActionScript memories, there were cases where the usage of Array() was not suggested because using new Array() you could have created more Arrays (I am talking about thousands of iteraction and AS1 or AS2).
Well, unless somebody demonstrate that JavaScript engines are that buggy, there is not a single reason to prefer new Function (same is for new Object and new Array) over the simple native function call.

All this post is about an interesting one opened in jQuery developer list, where at the end of the day, jQuery had to implement a common mistake/bad practice.

As summary, google-caja, please revisit some spec because this one, as example, does not make much sense :(

re-introduction to JSON.hpack

Let me try again, this time with an official project page and a nearly complete wiki page.

JSON.hpack, the Fat-Free Alternative to JSON

JSON.hpack is a lossless, cross language, performances focused, data set compressor. It is able to reduce up to 70% number of characters used to represent a generic homogeneous collection.

To understand how to use JSON via JavaScript, PHP, or C# (Python coming soon and hopefully other languages as well), please have a look into the wiki page or if you want, try out the demo page!

I am waiting for comments :-)

[OT] United Kingdom Internet Restrictions - You Are Doing It Wrong!

I though the worst case scenario about "politicians and internet relationship" was Italy, where politicians average age is 65 and internet is still considered an "uncontrolled porn and communists place" and nothing else ... but I was wrong.

Today I bought an USB pen for mobile broadband to have access to the net with a pay as you go solution, until I will solve my flat+internet problems.

It has been extremely simple: You go to the shop, you buy the pen, you top up what you want, you surf the web ... fair enough, the installation under Windows XP SP3 was quick and simple ( anyway, I wonder when this companies will realize that main operating systems are 3, not just PC and Mac ... I cannot use the the software under my Ubuntu partition ... annoying! )

The first step, after installation, has been go to edit a post I published yesterday evening and with extreme surprise I found a bar on the top of the blogger platform which showed me the name of the company, rather than the normal blogger bar.

Lock Content, Under 18 "Feature"

My reactions in order:

1. wait a minute, where the hell is the blogger bar?!


2. don't tell me they have a sort of filter ...


3. ... o my God, they do! Don't tell me I cannot edit my blog (manual entry in the url field ...)


4. Oh My God! Don't tell me they are asking me a credit card to demonstrate I am older than 17!


5. OH MY GOD! Don't tell me every under 18 can read social networks but they cannot create one!


6. OH MY GOD!!! WHAT THE HELL IS THIS!!!?!??!??!?!

After a lovely 10 minutes conversation with the customers service, I realize that this filter is absolutely ridiculous and reasons are simply these:

• hellooooo!!! I bought this pen drive and nobody told me something like that, also nobody asked me my age when I bought this pen ... easy sell and complex usage? well done!


• Hellooooo!!! under 18 can read social networks, see pictures, videos, everything else, but they cannot use just the top bar of the blogger service?


• HELLOOOOO!!! Under 18 people are excluded from internet because you decided that these guys cannot open a blog and write about whatever they want, including possible genius that could simply make this world better than now?

"It Does Not Matter, As Long As We Control You"

What I felt after this little inconvenient not described in any of the pen papers is simply that internet is not free at all. Somebody still think that internet usage is like alcohol, prohibited because it could cause diseases???
The European population is old so this 18 lock is just to control even more the system and I am sorry, but in my opinion it is simply an extremely silly control which does NOT prevent anything and just annoy 80% of customers ... full credit card details ... to surf the web? Oh My God!

P.S. They had to apologies for the interview ... oh, now that's left me feel better!

Ajax better than Flash AMF? Optimized homogeneous collections

I found this dojo related post extremely interesting and I instantly though in our application we have similar JSON structure which is effectively redundant and, for thousands of database rows, it slows down visualization responsiveness (not that much in intranet, enough via internet).

JSON.hpack

I am developing on spare time an "all web languages" homogeneous collection packer in order to speed up client/server interaction specially for database results where the column name could be considered as a key and each field in the same column as a row.

So far I created a JavaScript version which seems to work perfectly and results are quite impressive. For example, the total size of the 5000 items used in that dojo article switched from 37.23Kb to 26.27Kb, gzipped size, while number of characters to send / retrieve are 776133 against 99575.

As example, the host where I put the initial test does not allow more than 50Kb as uploaded data, this means that without JSON.hpack is not even possible to consider to move 5000 of rows.

The reason it could be faster is that JSON.stringify, the good old Douglas Crockford version, is not that fast as we think ( not comparable with native IE8 JSON.stringify ) and if the given object is smaller, obviously data to parse is less as well.

Here you can test the first JSON.hpack test page.

The project is not hosted yet so to know more about the simple API please read the incomplete (code speaking stable though) source code.

I wonder how many people would be interested in their favorite server side language implementation, I can create the PHP, Python, and C#, but I am looking for Java, Ruby, and if possible other languages as well. The logic truly simple so it is just a matter of time ... anyone fancy to contribute?

See You in a 01!

Quick one from work ... new flat, no internet, my extra activities are now these:

• unpack begs: tar xvf begs.tar


• use some namespace: from IKEA import essential.forniture


• reload the net:
  $connection = FIBER_OPTIC_AVAILABLE ? 'Virgin Media' : 'start panic mode!';

But, in the meanwhile, you can follow me on Twitter ;)

fireEvent for FireFox, Safari, and others

Just a quick update about vice-versa, I have implemented fireEvent to fire, as the method name says itself, events after attachEvent.

Do you prefer the dispatchEvent way with at least 3 different ways to initialize an event usually fired only to call the callback?
It is this:

a.addEventListener("click", function(evt){
    location.href = evt.target.href;
    evt.preventDefault();
    return false;
}, false);

// powerful uh? now think
// when you used something different
// from defaults ...
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent(
    "click",
    true,
    true,
    this,
    0,
    0,
    0,
    0,
    0,
    false,
    false,
    false,
    false,
    0,
    null
);
a.dispatchEvent(evt);

against what I think is often all we need:

a.attachEvent("onclick", function(){
    location.href = event.srcElement.href;
    return event.returnValue = false;
});
a.fireEvent("onclick");

and that's it :)

vice-versa sub project: css2xpath

Update

I completely re-wrote the test suite. You can check a live example here where results are compared with Sizzle selector engine against the common W3C page.

---

After this Ajaxian post and some opinion exchange in its comments, I decided to extract the css2xpath function I used inside experiments in vice-versa project, creating a separated project specific for this purpose that some how could be interesting or useful.
Bugs, problems, questions, and helps are more than welcome, so far I focused my attention to SlickSpeed test selectors and nothing else but at least for that it seems to be stable and reliable.

[OT] Swine Flu ... Service Unavailable!

A quick one about how things are not that different whatever country you live ... in a page created to inform and to help to prevent this new killer flu, the NHS symptoms checker link brings to a Service Unavailable page.
I wonder if countries organizations will never be ready for whatever emergency we have.
Hoping people will be able to obtain more info directly from directgov website, we can do 3 things so far: CATCH IT (using tissues to sneeze or cough in), BIN IT (we don't want to travel that far with our dity tissue, do we?), KILL IT (this one is quite difficult to explain and I guess they did not choose "the proper verb" for the last action ... seriously!)

Drip under control via another IE memory leak tentative ...

Apparently, using this strategy I can obtain a flat line in Drip monitor:

// function used to remove a node, every attached
// attribute and every nested node via the same procedure
var destroy = (function(destroy){
    // WebReflection IE leaks attemp!
    function $destroy(node){
        while(node.lastChild)
            destroy(node.lastChild);
        if(node.parentNode)
            node.parentNode.removeChild(node);
    };
    return destroy = destroy.clearAttributes ?
        function(node){
            if(node.clearAttributes) // Hedger suggestion
                node.clearAttributes();
            $destroy(node);
        } :
        $destroy
    ;
})(document.createElement("script"));


// used to remove everything
function destroyAll(){
    destroy(document.documentElement);
};

// used to avoid leaks when the page is refreshed
// or the url is changed
if(this.attachEvent)
    attachEvent("onunload", destroyAll);

reasonable performances and apparently a reliable solution.
tested via this code:

attachEvent("onload", function(){
    detachEvent("onload", arguments.callee);
    for(var i = 0; i < 1000; i++){
        a.push(document.body.appendChild(document.createElement("div")));
        var node = a[i];
        node.innerText = i;
        node.obj = a[i];
        node.attachEvent("onmouseover", function(){
            node.obj.other1 = node;
        });
        node.onclick = function(){
            this.obj.other2 = node;
        };
    };
});

The procedure is based on assumptions I did in this post about div[expando] and div.removeAttribute(expando)

The Fastest Selector Engine For FireFox 3.0 ?

I am putting some effort to make vice-versa project a good, production ready, alternative against common libraries, and since these days I am working hard with XML, XSL(T), and XPath I decided to try an experiment implementing CSS to XPath translator for FireFox 3.0



With version 3.1 we will have querySelector and querySelectorAll but version 3.0 is still the most used one, FireFox speaking!

The nightly build of vice-versa introduces a new file, mainly used for personal experiments via vice-versa library and the first experiment is an improved document.query for those browsers with document.evaluate support without document.querySelectorAll.
Unfortunately Internet Explorer < 8 does not support XPath queries over (x)HTML but at least for FireFox 3.0 I have obtained best overall performances via SlickSpeed Selector Speed Test comparing latest version of each library such Dojo, DOMAssistant, Sizzle (congrats for the new site!), Sly, and finally vice-versa project.
Here the summary, from faster to slower:

vice-versa    760ms
Dojo 1.3.1    868ms (2 tests failed)
DOMAssistant  880ms (good stuff Robert!)
Sly           890ms
Sizzle        914ms

Now, the good part is that nowadays every selector engine seems to perform truly fast and in whatever browser you like, but the "even better" part is that the experiments file in vice-versa is 1Kb (minified and gzipped) and with just "that Kb" it is possible to use a specific and fast selector engine for FireFox 3.0.

Finally, the experimental CSS to XPath translator cannot support pseudo searches like :hover, :active, or similar, due to the XPath nature, a query language mainly designed for XML where CSS, unless we do not transform it via XSLT, has a complete different meaning from the one used in (x)HTML.

I wonder now who will be able to create better overall performances for FireFox 3.0 ( changing my translator implementation, for example ;) )

JavaScript Is A Toy? So C#, Java, PHP, and Python Are!

I wrote a truly big post about this subject ... but it was nervous and not that technical as well. I decided then to simply post this image, hosted in Pam webOS Project page:

Think about the right box, it should be the state of the current Web 2.0 Era ... now think who is in charge to maintain the layer between your server application, and the customer ... I am quite sure 90% of cases will be a Web Designer, rather than a Senior skilled JavaScript Developer ... now wonder why if you ask for JavaScript skills plus Photoshop, you will rarely being able to make right profits from your business. JavaScript is not a toy, and "web speaking", is one of the most important programming language your team should know, it's time to stop to underestimate it.

div[expando] = null OR div.removeAttribute(expando)?

Today we had an interesting conversation in the jQuery developer mailing list, and "surprise", it was about Internet Explorer and memory leaks.
I instantly started some test to understand what the hell is going on there ... and I encountered a dilemma which is not simple at all!

div.prop = 1 IS NOT div.setAttribute("prop", 1)

Some developer thinks that the usage of setProperty and getProperty is basically the same of a manual assignment as generic DOM Element property ... well, they are wrong.
First of all, if we are working with XML we all know that it is not possible to assign a property in this way:

xmlNode.prop = 123; // Error!!!
xmlNode.setAttribute("prop", 123); // OK, but be careful!

The main difference between manual property assignment and the usage of setAttribute/getAttribute is that we are changing HTML or XML properties of the node without control.
The reason is simple, how manual properties are assigned/retrieved is browser dependent, and the only way to be sure we are not modifying a node only internally is to use the setProperty method.
Obviously, it is not that simple in any case still because of browsers implementations. Here a couple of examples:

var div = document.createElement("div");
div.__expando__ = 123;

// FireFox and other browsers
div.getAttribute("__expando__"); // null

// Internet Explorer
div.getAttribute("__expando__"); // 123

Accordingly, the only browser that manages direct assignment as setAttribute shortcut is Internet Explorer.

Moreover, cases are really differents between IE and other browsers ...

While everybody uses setAttribute as a method to change the node in its HTML or XML nature, Internet Explorer uses this method to assign whatever value. Example:

var div = document.createElement("div");

// set an object as an atribute
div.setAttribute("__expando__", {a:"b"});

// FireFox and others will obviously convert the second argument as a string
// to make node representation possible as HTML or XML

// Internet Explorer will set that object as an hidden attribute
// which means that that property will not exists in the
// HTML or XML representation of that object, but will be a property

// this call ...
div.getAttribute("__expando__");

// will generate [object Object] in FireFox and others
// not because we are dealing with an object
// but because the object has been converted into a string
// during setAttribute assignment

// In internet Explorer that cal will retrieve the original
// Object {a:"b"} and this call will produce: "b"
div.getAttribute("__expando__").a; // b in IE, undefined in other browsers

Another interesting thing is that we cannot use delete div.__expando__ in internet explorer for the reason I said before: we cannot delete an attribute via delete, we need to use the removeAttribute method.

var div = document.createElement("div");
div.__expando__ = 123;

delete div.__expando__; // Error in IE

But since IE set attributes of any type, we should bear in mind that everything that is not instanceof Object will be present in the HTML representation of that Element.

var div = document.createElement("div");
div.n = null;
div.obj = {a:"b"};

alert(div.outerHTML);
// <DIV n="null"></DIV>

Accordingly, whatever reason we have behind leaks, we should bear in mind that if that node has been stored somewhere, it will bring with itself every property = notAnObject; included numbers, null, whatever.

To create a memory leak we can simply do something like this:

var div = document.createEement("div");
div.__expando__ = div;

That's it, even if we remove that div and we delete its related variable (div), IE will not remove that node (if present in the DOM) from its used RAM.
Since some developer know it, they obviously try to avoid leaks like this using a syntax which makes sense but which leave traces of "their operate":

var div = document.createEement("div");
div.__expando__ = {iama:"complex object", orwhatever:"value"};

// when div is removed/destroyed
div.__expando__ = null;

// well, as we have seen before:
div.outerHTML;
// <DIV __expando__="null"></DIV>

To completely remove properties then, all we need to do is to use removeAttribute:

var div = document.createEement("div");
div.__expando__ = {iama:"complex object", orwhatever:"value"};

// when div is removed/destroyed
div.removeAttribute("__expando__");

// well, as we have seen before:
div.outerHTML;
// <DIV></DIV>

If you test with a memory leaks detector, you will realize that the result is exactly the same while the final node, leaked or not, will be as clear as possible from other libraries and conflicts will be reduced as well (getAttribute("__expando__") is setted as null will return the string "null" rather than the null value usually returned by getAttribte when it is not there).

What's next? Understand how much performances will be affected and when it is worthy to use removeAttribute rather than = null but at least now we have proven that setAttribute, getAttribute, and direct property assignment are not the same thing.

vice-versa project, a philosophy rather than a library

Array.forEach(document.all, function(node, i, all){
    // vice-versa project
});

well, there are few things I can say here, and first one is: please, if interested, help me!
The second one is my vision, a web where rather than criticisms, there is more collaboration to obtain good overall performances improving code quality.
This is not my old JSL project, this is a new groove, a new project, a non library, something I hope you will all appreciate.
But, if not, I am here to discuss about it :)
vice-versa project
Have fun with Web Development!


Update
Implemented a TaskSpeed test file for vice-versa project. Here first results ordered by average.

---

browser     Pure    vice    Moo     qoox    dojo    YUI     AVG
            Dom     versa   Tools   doo
--------------------------------------------------------------------
Safari 4    198     114     392     205     246     410     260.83
Chrome 1    251     273     589     279     336     692     403.33
Opera  10   215     206     764     267     311     659     403.67
FireFox 3   404     670     2962    3557    1197    792     1597.00
IE 8        876     1031    10312   1470    2267    1749    2950.83
IE 7        795     1767    8174    1734    7796    3329    3932.50
IE 6        3941    4686    67590   16611   22388   24591   23301.17

Internet Explorer with V8 Engine :: A Partial Reality

Update now it works with Internet Explorer 7 and 8 with O3D plug-in enabled.

---

Today, via ajaxian, I discovered the new Google O3D project and as a nerd first, and a developer after, I instantly read the API.
Few seconds and I spot this: Use the V8 engine

OK, OK, whatever code you read there will not instantly work ... you have to understand the library and how to retrieve the dreamed eval function to make JavaScript execution possible inside the extremely fast V8 engine.

Obviously V8 integration is great with FireFox and other browsers, but a bit different in Internet Explorer.

This limitation is about the DOM manipulation, something that would make IE a good browser, but everything else, executed via V8 engine and without browser engine references, will perform 5 to 100 time faster.

Function creations, optimized loops, numbers, string manupulation, etc etc ... if we could use a little plugin to fully integrate V8 inside Explorer, we could all forget nowadays benchmark because it will perform better than many other browsers!

Bearing in mind the relationship between V8 variables, different 100% from JScript vars, and latter variables, we can delegate computational tasks to this engine makin IE fast as it has never (and will probably never) been!

What I have so far, is just a poor example about V8 inside IE possibilities, a page that does not work if you do not have V8 inside Exlorer and you do not enable its usage everywhere.

Write a loop like this in the textarea:

for(var a = [], i = 0; i < 500000; ++i)
    a[i] = Math.random();

and switching between default and V8 you can read that the difference is about 5 times slower with the default Internet Explorer JavaScript engine, and Google V8.

Still, so far what I can spot as pros and cons is this:
Pros

• mathematical operations up to 100 times faster


• computational functions speed up


• common AI patterns (AStar) finally usable in the web


• games, chess, cards, whatever involves logic, speed up

Cons

• even if you assign a V8 Array.prototype.forEach to native Array.prototype.forEach, the plugin cannot solve engine related dependencies problems ... so it will be simply slower, much slower, because of the data interchange between the method executed externally, and the original engine


• DOM is not integrated, V8 in IE does not understand nodes so no way to speed up common libraries or add prototypes to native HTMLElement constructor


• last, but not least, with my laptop I cannot even test the example page I posted before because the JS is not that perfect (Google guys, makeClients accept an id but you check .id === "o3d" in the loop ... does it make any sense?) and my card apparently does not support OpenGL or whatever library the o3d plugin requires

As Summary

This was just a quick post and an experiment which in my opinion is already god enough. I have a vision, about Internet Explorer 8.1 ... those guys created an April fool that is everything but not a fool. Come on Microsoft, let others replace your old, problematic, slow, JScript engine, and let us developers be free to create Web Applications as we would like to do ... please give to Google whatever they need to make V8 IE integartion possible, and let us dream about a not that far possible Web future!

Last Minute - Blogger and Spam Blogs

Nice one, 10 minutes after I published my last sarcastic comment about IE sort implementation, blogger sent me an email communicating that my blog has been marked as a spam blog. I am sure if I was an X-Files actor I would have though instantly about conspiracies or some sensible M$ engineer move ... but as web developer and experienced programmer I am sure it is a coincidence and any software is perfect: it does not matter who is behind that software!

P.S. ok, an entry for this fact is probably too much but if you find something weird please be patience, I should be back soon ;)

Internet Explorer and its inefficient sort implementation

This is just a quick post about how much IE team cares about JavaScript performances ...

// generate an array of 1000 elements
var a = new Array(1000).join(",.").split(","),
    calls = 0;

// call sort method incrementing the conter
a.sort(function(a, b){
    ++calls;
    // return zero, nothing should change
    return 0;
});

// discover the monster
alert(calls);

Guess how many times Internet Explorer compare results? 17583 times, against a.length - 1 in other browsers.

Nice stuff guys, I guess for big arrays a manual reimplementation could perform better, am I wrong?

[COW] A Generic ArrayObject Converter

Few days ago I wrote about a fast Array slice implementation for every browser, a callback able to convert "every collection" into an Array.
For collection, I mean every instance with a length attribute and an index access Array like. This object, for example, could be considered as a collection:

var generic = {
   length: 2,
   "0": "abc",
   "1": "def"
};

Above instance is a basic model of most common libraries such jQuery, prototype, base, and every other based over an Array like prototype.

Some library could coexist in the same page without problems but not every library implement a method to create a copy of another collection into a new instance of the library itself.
As example, a jQuery or Sizzle result into another instance, a generic DOM collection into a jQuery object, etc etc.
All these instances could be passed via Array.prototype.push to be populated, and thanks to this peculiarity we can obtain every kind of instance from a collection via Array conversion.

var toArrayObject = (function(push, e){
// WebReflection - Mit Style License
e.base = {length:0};
e.slice = (function(slice){
    // portable slice
    try {
        slice.call(document.childNodes);
        var $slice = slice;
    } catch(e) {
        var $slice = function(begin, end){
            if(this instanceof Object)
                return  slice.call(this, begin || 0, end || this.length);
            for(var i = begin || 0, length = end || this.length, len = 0, result = []; i < length; ++i)
                result[len++] = this[i];
            return  result;
        };
    };
    return  $slice;
})(Array.prototype.slice);

// prototype ready callback
return function(constructor){

    // assign the "class" prototype or the base object
    // as anonymous prototype
    e.prototype = constructor ? constructor.prototype : e.base;
    
    // create a new instance of anonymous
    var r = constructor === Array ? [] : new e;
    
    // inject via push the collection, passed as function scope
    push.apply(r, e.slice.call(this));
    
    // return the new ArrayObject instance
    return r;
};
})(
    Array.prototype.push,
    function(){}
);

With above code we could quickly transform, for example, a DOM collection into a jQuery instance without using the jQuery engine:

var result = toArrayObject.call(
    document.getElementsByTagName("div"),
    jQuery
);

result.remove();

Another example could be a transformation between jQuery and prototype:

var prototyped = toArrayObject.call(jQuery(".test"), $);

The same could be obviously done via Array, even if this is a non-common case:

toArrayObject.call([1, 2, 3], jQuery);
toArrayObject.call(jQuery(".test"), Array);

The usage of call makes prototype assignment that simple:

jQuery.fn.convertTo = toArrayObject;

// as prototype or other library conversion
jQuery(".test").convertTo($);

That's it, if you never wondered about elements injections, libraries conversions, or Array like object management, this code could be a truly quick and portable solution.