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 :)