My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Monday, January 21, 2008

JSmile ? Even more simple with an AntiPixel ;)



I've created an antipixel gif to add JSmile easily in your site too.

What should you do to add JSmile?
Copy and past this code wherever you like in your website.

<img
src="http://packed.it/JSmile/JSmile.gif"
alt="JSmile - by Web Reflection"
title="JSmile - by Web Reflection"
onclick="if(window.JSmile){JSmile(document.body)}else{var i=setInterval(function(){if(window.JSmile){clearInterval(i);JSmile(document.body)}},20),s=document.createElement('script');s.src='http://packed.it/JSmile/?js';document.body.appendChild(s)}"
/>


Done? Perceft, now when you want, click in JSmile antipixel and your site will be more rich.

Too simple? :o

Sunday, January 20, 2008

JSmile - smiles everywhere in less than 1Kb!

Update !
Now you can see JSmile in action directly in this blog ;)
I added just this line:

// this element is smile free :)
// noone will be added in code or pre tags
JSmile(document.body);

and the magic happened :D

Come on guys, we have totally unobtrusive smiles for blogspot and every other blog site too 8-)

P.S. script, code, pre, and noscript tags are preserved. No changes will be done by JSmile. If you think about another element that shouldn't be parsed, please tell me :geek:
----------------------------------------------------




Do you want to add some graphic smile in your site?

Do you like GTalk and you think that inline smiles should be cool for your website too?

Are you worried about obtrusive smiles?

Are you worried about server side parsers?

Are you worried about other libraries and JavaScript events for each element?

... forget everything and use JSmile, a new library in less than 1Kb (gzipped) that uses DOM instead of innerHTML, could be compatible with every other kind of library and add smiles using a single site, avoiding cache or bandwidth problems!

Do you want to try an example?

Go to this page: http://ajaxian.com/archives/winter-holiday-christmas-lights

Look at the text, you could find some smile like ;) ... now, if you use firefox, try to cut and copy this piece of code in your ulr:

javascript:(function(){var script=document.createElement("script");script.src="http://packed.it/JSmile/?js";script.onload=function(){JSmile(document.body)};document.lastChild.appendChild(script)})();


Can you see the difference?

Text nodes are changed in a totally unobtrusive way.

No paranoia guys, a person without images will read alternative text, a person with image will read the title if they'll move mouse over the smile.

A person that use JS events can't be worried, events are for other kind of nodes, not for text nodes .... a person without JS enabled will see textual smile .... a person with JS enabled will see a smile using its cache, because of single url and unique smile identifier ... do you need more?

Ok, you should use this function wherever you want and choose wich part of your page should be parsed, sending simply dom node to JSmile function:

JSmile(document.getElementById("testMe"));


Seems interesting? This function could make your site cooler without any effort.
Include JSmile in your head tag and use JSmile function wherever you like.

Currently this function uses phpBB default postable smiles but in the future new smile themes will be available.

Enjoy JSmile and have fun with unobtrusive JavaScript!

Wednesday, January 02, 2008

PAMPA - On Line version 0.6

After few months without updates, I am proud to announce last version of my Portable AMP Application for Windows.

Changelog

  • New customizable tray icon, with different color for each status (active/unactive)

  • New version of PHP, 5.2.5, with some extra dll active by default (APC and rfc for upload progres)

  • New Apache 2.2.6 and MySQL 5.0.45 Comunity

  • New options on system tray icon using right mouse button

  • Removed TurbodbAdmin, added last version of phpMyAdmin by default some minor fixes or checks



You can find everything in the official PAMPA site.

Enjoy them :-)


P.S. I am sorry for possible server problems so please try later if You can't download or visit the official site.

Monday, December 31, 2007

[OT] Never forget old school!

Another year has gone, new technologies are coming but please never forget genuine old style. Happy new year to everyone from me and old "friend" :D

Saturday, December 29, 2007

Is JSON forgetting something?

I played many times with JSON serialized data, creating odd alternatives too like JSTONE or JSOMON.

Few years ago I created even a PHP compatible serializzation but nowadays, with PHP5, json_encode and json_decode are natively integrated in PHP language and, at the same time, even faster than old serialize and unserialize global functions.



The big difference between JSON and PHP serializzation


Both JSON and PHP Serialized data have the same goal: transport objects and data over http protocol or storage these informations inside a cookie, a database or why not, a file.
However, PHP serialize and unserialize functions do more things than JSON serializzation, adding charset/indexes informations transporting even private or protected parameters.

With JavaScript 3rd edition We have not latter kind of properties so we shouldn't care about this limit during serializzation.

This is probably the most important difference between these two different serializzation but there is another one that should be easily implemented in JavaScript too: magic __sleep and __wakeup methods.



What do we need


The most important information we need to make JSON more magic than ever should be the constructor name. Without this information every kind of instance will lose its special methods/properties reducing them as a common Object.
Usually, this is exactely what we would like to transport, keys and values or, in the case of Array, only its values.
I'm thinking about something like that:


function A(){};
function B(){};
B.prototype.__wakeup = function(){
this.d = String.fromCharCode(this.c + this.a.charCodeAt(0));
};

var a = new A;
a.a = "b";
a.c = "d";
a.e = new B;
a.e.a = "b";
a.e.c = 3;
alert(encode(a));

// $("A",{"a":"b","c":"d","e":$("B",{"a":"b","c":3})})

I think that original objects doesn't need their constructor name.
In this way the unique change is for different instances and JSON syntax is quite the same.

With a string like that we should use eval too in a simple way:

function decode(str){
function $(constructor, o){
var result = eval("new ".concat(constructor)), key;
for(key in o){
if(o.hasOwnProperty(key))
result[key] = o[key];
};
if(typeof result.__wakeup === "function")
result.__wakeup();
return result;
};
return eval(str);
};

function A(){};
function B(){};
B.prototype.__wakeup = function(){
this.d = String.fromCharCode(this.c + this.a.charCodeAt(0));
};

var o = decode('$("A",{"a":"b","c":"d","e":$("B",{"a":"b","c":3})})');

alert([o instanceof A, o.e instanceof B, o.e.d]);


The __wakeup magic method should be used to do something before the object will be assigned, extremely useful in a lot of common situations.



What about __sleep?


The magic __sleep method should be the same used with PHP.
A simple prototype that could do everything but that needs to return properties we want to serialize.

This should be a JSON parser problem that could check every instance and use, only if it's present, its __sleep method.



Improvements



  • constructor name for instances that are not just objects

  • better server side parsers to manage instances without loosing their constructor name

  • a global name for dollar function, if some library use them as constructor too to avoid problems during instance creation (or a simple global-scope evaluation for each new "constructor" assignment)




This is just a personal brainstorming/proposal and I would like to know what do you think about that.

P.S. marry Christmas and happy new year :-)

Friday, December 21, 2007

JavaScript Iterator for IE and other browsers

This is just my proposal to add Iterator in Internet Explorer and other browsers too.

(function(){

function Iterator(obj, name){
// Iterator(obj) and new Iterator(obj) behaviour
if(this instanceof Iterator){
var i = 0,
result = [],
skip = false,
key;
for(key in obj){
result[i++] = name ? key : [key, obj[key]];
this[key] = undefined;
if(!skip && (key == "constructor" || key == "toString" || key == "valueOf"))
skip = true;
};

// solve IE problems
for(var l = 0, arr = ["constructor", "toString", "valueOf"]; !skip && obj.hasOwnProperty && l < arr.length; l++){
if(obj.hasOwnProperty(arr[l])){
result[i++] = name ? arr[l] : [arr[l], obj[arr[l]]];
this[arr[l]] = undefined;
};
};

// add next method if any next in object
this.next = function(){
if(i === result.length)
throw new StopIteration;
else
return result[i++];
};

// reset result "pointer"
i = 0;
}
else
return new Iterator(obj, !!name);
};

function StopIteration(message, fileName, lineNumber){
this.message = message;
this.fileName = fileName;
this.lineNumber = lineNumber;
};
StopIteration.prototype = new Error;

// global scope check
if(!this.Iterator)
this.Iterator = Iterator;
if(!this.StopIteration)
this.StopIteration = StopIteration;
})();


// test it!
var iter = Iterator({a:"b", next:"c", toString:"hello"}),
output = [];
try{
while(true)
output.push(iter.next());
}
catch(err){
if(err instanceof StopIteration)
output.push("End of record");
else
output.push("Unknown error: " + err.description);
};
alert(output.join("\n"));


The best way to use them is with iter.next() method but you could use a for in loop too.
However, in latter case if the object has a next property, it will be overwrote by dynamic method but this problem apart, enjoy iterators :-)

Thursday, December 20, 2007

packed.it ... again online

I am sorry for last days while packed.it wasn't working as expected because of new server.
It seems to be faster than precedent one so thank you again Daniele , I'll write your link as soon as I can :-)

Enjoy both JavaScript and CSS compressed files in a single one, enjoy packed.it!

Monday, December 10, 2007

FireFox, Safari, and Opera ... JavaScript Conditional Comment

I've still written a comment in John Resig blog about Re-Securing JSON and FireFox or Safari 3 const behaviour to create an immutable function, called Native, and to retrieve original Array, Object, String or other constructors.

This is the function:

const Native = (function(){
const NArray = Array,
NBoolean = Boolean,
NDate = Date,
NError = Error,
NMath = Math,
NNumber = Number,
NObject = Object,
NRegExp = RegExp,
NString = String;
return function(Native){
switch(Native){
case Array:return NArray;
case Boolean:return NBoolean;
case Date:return NDate;
case Error:return NError;
case Math:return NMath;
case Number:return NNumber;
case Object:return NObject;
case RegExp:return NRegExp;
case String:return NString;
};
};
})();

// Example
Array = Native(Array);
eval("[1,2,3]");


At the same time I've talked about IE behaviour and its missed support for const.

While I was thinking about that I imagined a way to use a piece of code, in this case the keyword const, compatible with every browser.

It should sounds simple, just use the well know trick IE=/*@cc_on ! @*/false; followed by if(IE) ... but ... hey, I need everytime to create a double version of the "same script" ... is it good?

Try to imagine a variable that should be a constant for every compatible browser but at the same time should be declared just one time ...

const MyConstant = 1;


With every day practices we should use a try catch or some strange trick to evaluate a const declaration ... don't we?

But we have a particular behaviour of the conditional comment ... it should contains a comment itself too, sounds cool?

/*@cc_on // @*/ const
Native = function(){
// whatever You need
};


Can anyone trigger an error with above piece of code? :-)

In this way FireFox 2+, Safari 3+ (I don't know about 2), and Opera 9+ could work without problems disabling Native variable re-declaration while every IE browser will ignore the const keyword.

I suppose this trick is not so new but never as this time it should be useful to make code more slim and efficient.

Instant Update
The usage of const inside the private scope of Native function declaration is not so useful (just a little bit of paranoia :D) but in these cases we could use a better trick to create local variables with internet explorer too.

This is an example:

Native = (function(){
/*@cc_on var // @*/ const
NArray = Array,
NBoolean = Boolean;
return function(Native){
return Native === Array ? Narray : NBoolean;
};
})();

Above example shows how should be possible to initializzate multiple variables using a comma and respecting the private scope.
Internet Explorer will use var while every other browser will try to use const if it's compatible.

Sounds even better? I hope so :-)

P.S. Native function is quite interesting, imho, that's why I choosed to add them in devpro.it

Wednesday, December 05, 2007

Looking for a job in London ... or not?

It's about 2 weeks that I'm studying in London to improve my English knowledge, specially my spoken one (I know, written is not so perfect too).

I put my cv on line in a famous recluting search engine but it seems that most interested people are Agency's employees that usually look for generic IT - Web masters.

I would like to explain my "strange situation": I am not absolutely a web designer, I do know quite nothing about graphic, I could just know how to start Gimp!!! :D

It seems that if You know quite perfectly ActionScript 1.0/2.0, that's basically ECMAScript 3rd edition or, in case of 2.0, 4th one closed, you can be only a Web Designer and not a programmer, even if You know Flash Player bugs and you're able to find out workarounds.

It seems that if You know deeply JavaScript (best practices, OOP, Ajax, cross-browser/platform development, bugs, common libraries suggestions) it's not important ... just a preferred plus ... but at the same time everybody is looking for Ajax and Web 2.0 skilled developers, a role that absolutely requires a good programming background (not just a bit of DreamWeaver).

It seems that if you know different languages or technologies ... there's always a missed one.
How can a person to be "senior in every program language"?
I can't call their "expert or senior everything developers", a part for someone who has at least 20 years or more experience.

However, excellent OO PHP 4/5,JavaScript,ActionScript,(x)HTML,CSS,XML skills aren't enough while a good knowledge of C# for ASP.NET or MONO, and Python is not enough as a technical plus.

Maybe someone should be interested in my good database skills, starting from SQLite 2/3 to MySQL 3/4/5, passing inside PostgresSQL ... but it's not enough.

What about security practices and code optimization skills? Who cares about that!

As sum, and as someone said before me: please hire me !!! :-)

Best regards,
Andrea Giammarchi

Thursday, November 01, 2007

A quite totally standard enviroment before ECMAScript 4th Edition in less than 3Kb - JSL 1.8+

JavaScript Standard Library Revision


After the success of my old JSL project I learned more about JavaScript and I found some trick to solve different problems such setInterval and extra arguments for Internt Explorer, a function to evaluate code in a global scope with every browser as Internet Explorer does with its proprietary execScript.

Since these days We're waiting for ECMAScript 4th Edition, aka JavaScript 2 but since We always don't know when it should be really usable within productions, I choosed to create a revisited version of JavaScript Standard Library.

I removed Internet Explorer 4 support but I modified a lot of common prototyes to make them faster, more standard and more scalable than ever.
You can use, for example, every JS 1.6+ Array.prototype with HTMLCollections too as it's possible from many Years with FireFox or Safari:

Array.prototype.forEach.call(document.getElementsByTagName("div"), function(node){
alert(node.innerHTML);
});


I fixed different standard behaviours and I implemented setTimeout and setInterval.
I add execScript, not standard, but really useful when You need to evaluate JavaScript in a global scope with FireFox, Safari, Opera and every other as Internet Explorer does from many years with its own execScript global function.


JSL creates a quite totally standard JavaScript 1.6+ enviroment adding prototypes only to browsers that don't support them or that have different behaviours and everything in a hilarious size of 2.53 ... 2.86 Kbytes (gzipped) - new size is caused by an instant update, an XMLHttpRequest constructor (a wrapper) to allow every IE 5 to 7 browser to define XMLHttpRequest prototypes too.

With JSL You can forget your own not always standard prototypes implementations so every library size could decrease its code quickly, basing them on standard JavaScript 1.6+ enviroment and increasing performances for every standard browser like FireFox or Safari (about 40% of users ... growing up every day!).

This is the last chance to have a more standard Internet Explorer implementation because if We need to wait their fixes We should go better to sleep.

Have fun with JSL Revision and a quite real ECMAScript 3rd Edition enviroment.

Monday, October 29, 2007

[COW] JavaScript define PHP like function

This time my personal COW is a quite totally cross browser function to define a JavaScript constant.

With FireFox or Safari a const variable should be nested or global but the most important thing, it cannot be assigned two times

const scriptCantChangeMe = "some text";
scriptCantChangeMe = "something else";
alert(scriptCantChangeMe); // some text


A constant should be every kind of JavaScript variable and if this feature will be available on future versions of Internet Explorer and Opera, a lot of security problems should be solved (think for example about JSON, Array, Object and every other constructor, method or callback).

Unlikely We can't use this feature with Opera browser and, quite more important, Internet Explorer doesn't support JavaScript constants.

The only way to create a global scope constant variable with Internet Explorer is using another language: VBScript

This IE dedicated language supports PHP like defined constants: scalar values like integer, float, string or boolean.


JavaScript define function


This function works like PHP define one, except for last argument, case-sensitive, and it is compatible with Internet Explorer (maybe every version), FireFox 2 or greater, Safari 2 or greater and finally Opera 9 o greater too.

define("MY_NOT_MUTABLE_VALUE", 123);
alert(MY_NOT_MUTABLE_VALUE); // 123
MY_NOT_MUTABLE_VALUE = 456; // error with Internet Explorer
alert(MY_NOT_MUTABLE_VALUE); // 123 with both FireFox and Safari


The most important thing is that You can't change arbitrary a defined constant and it should be useful in many different cases.

Only Opera 9 has a wrong const implementation because it's just a var alias and not a real constant creation.

Since Opera hasn't a watch Object prototype and since a prototype should be always defined everywhere, this last browser is compatible but it allows value mutation so please remember this when (and if) You choose to use my define proposal.

Finally, please remembre that a constant should respect some rules:

  • its name must be UPPERCASE (MY_CONST instead of MyConst or my_const)

  • its name should have a dedicated prefix/suffix to don't be intrusive (MY_LIB_NAME_INITVALUE instead of INITVALUE)



Remark: to ensure cross browser compatibility every value is parsed by function, checking for its toString native or assigned returned value.
This means that define("MY_BOOL", "true") creates a constant called MY_BOOL that will be exactly a boolean true value and the same thing happens if You use "false" that will create a boolean false constant.
This is true for numbers too:

define("MY_STRING", "123") === define("MY_NUMBER", 123); // true
define("MY_STRING", "true") === define("MY_BOOLEAN", true); // true
define("MY_STRING", "-123.456") === define("MY_NUMBER", -123.456); // true


That's all :-)

Thursday, October 25, 2007

adsense destructive function!

Google AdSense is a free and cool service and is widely used inside many sites.

It allows site managers to get paid while they show their content ... it's great and thank You Google for this service.

However adsense uses a function that's probably the most obtrusive one You can use or find while You write JavaScript.
This function is exactely this one:

function $(b){
for(var a in K){
b[a]=null
}
}

Using them with own objects is absolutely not a problem but what kind of object do You think that b is? The Window one!

It's absolutely a non-sense for a service that uses JavaScript inside a closure to respect other libraries and to be free to use every name it needs to be executed!


Why this function is an obtrusive monster?


We always use third party libraries or We write JavaScript directly but in both cases We (others) should implement a generic Object.prototype inside our code ... just think, for example, to toJSONString prototype, OK ?

Now suppose that You write your own function, called toJSONString to manage everything else, objects too.

function toJSONString(){
// doStuff
};


Just add adsense in Your page and everything will not work ... seems interesting?

The right thing is that Object.prototype is always a problem if You don't use method hasOwnProperty inside a generic for(var key in obj) loop.
If You forgot them You should parse, manage, modify, properties that aren't part of your code (however these shoulkd be a part of your code too) and that's exactely what adsense does at the end of its execution.

The reason seems to be simple, adsense script would remove every global variables You write everytime You need them to allow a single page to contain different versions of adsense without any sort of problem with precedent settings.

At the same time every method or parameter assigned to Object.prototype will be "globally deleted" (becoming a null value) so if DjProto called one prototype, for example, escape You'll never be able to use escape as a native function.
At the same time google adsense code itself should fail too because if I write 2 prototypes like these:

Object.prototype.escape = Object.prototype.encodeURIComponent = function(){
return escape(this.toString());
};

and I add one adsense in my page, next one will not be able to encode any kind of string that should be sent to Google service.

Cool?


A really simple and crossbrowser solution


Since Object.prototype.hasOwnProperty is available only in IE6 or greater (I can't remembre if IE 5.5 has it) Google shouldn't implement this check but it should implement another one even more simple but efficient for this purpose.

function $(b){
for(var a in K){
if(Object.prototype[a]!=K[a])
b[a]=null
}
}

In this way every JavaScript compatible browser will remove or will assign to null Google adsense global scoped K object properties only (that are, again, objects of this type google_rl_mode:{url_param:"rl_mode",gfp:0}) without enviroment destruction possibility :-)

Another trick should be this one:

function $(b){
for(var a in K){
if(/^google/i.test(a))
b[a]=null
}
}



Finally, this post should be helpful to understand better for in loops and problems adding Object.prototype parameters or methods ... and at the same time is another reason to pray that ES4 will be available as soon as Mozilla developers can - it simply let You define which property should be enumerable and which not!

Upload progress bar with PHP5, APC and jQuery

Yesterday I wrote a little tutorial (Italian language, sorry) that explain how to create an info panel while a file is uploaded.

Here You can view final result:


While this is the entire archive with everything You need to test by Yourself my code:
APCQuery

To test them You need PHP 5.2 or greater and APC enabled.
Please verify that rfc is enabled too:
extension=php_apc.dll
apc.rfc1867 = On


If You test them locally please remember to try form using big files (from 40Mb to 200M for fast PCs) changing php.ini upload_max_filesize and post_max_size directives (I suppose 200M is enough).

If someone is interested about an English version of tutorial I'll try to find time to translate them.

Tuesday, October 23, 2007

[ES4] ... good by my darlin' toy ...

... and

Welcome Control Over Performances !!!


I can't wait one more minute ... Go ES4 implementations, GO!

Saturday, October 20, 2007

[COW] locAction - hash JavaScript location wrapper

One of the problems using JavaScript and Ajax is history managment and location behaviour.
A good solution was found by backbase many months ago, using reserved hash location property to manage correctly interactions and history itself.
This COW should be used to manage hash property as a full compilant location, allowing developers to know pathname, search (query string) and in some cases (JavaScript and Opera) hash itself too.

You can view a demo in this page comparing native location and wrapped one using locAction callback.

Please note that backbase too removed this practice from its site (which problems?) but my locAction proposal is compatible with every kind of JavaScript compatible browser (of course, IE4 and NN4 too).

These are few examples:

// basic example - standard location

href: http://localhost:80/?key=value&other
protocol: http
hostname: localhost
port: 80
pathname: /
search: ?key=value&other
hash:




// basic example - locAction(location)
// using http://localhost:80/?key=value&other#hash

href: http://localhost:80/hash
protocol: http
hostname: localhost
port: 80
pathname: /hash
search:
hash:



// full example - standard location
href: http://localhost:80/mypage.html?key=value&other#ajax/page.html?other=key&value
protocol: http
hostname: localhost
port: 80
pathname: /mypage.html
search: ?key=value&other
hash: #ajax/page.html?other=key&value




// full example - locAction(location)
// using http://localhost:80/mypage.html?key=value&other#ajax/page.html?other=key&value

href: http://localhost:80/ajax/page.html?other=key&value
protocol: http
hostname: localhost
port: 80
pathname: /ajax/page.html
search: ?other=key&value
hash:

As You can see with location You can manage directly a parallel/alternative JavaScript/Ajax dedicated url, accepting GET variables as different paths.
In few words You'll have two different address, one for JavaScript disabled browsers and one for JavaScript enabled browsers.

Both locations, original one and generated using locAction, will have same methods too: replace, assign and reload but locAction() object should be always use these methods (direct assignment is not allowed, however native location direct assignment uses transparently assign method so it's quite tha same).

What else? locAction generated object shoud accept hash string but not with Internet Explorer or Safari (at least 3).

Saturday, October 13, 2007

[COW] Web RAM - a JavaScript function to share safely strings

This time my COW is really strange as Web concept ... a total size of 256 bytes (seems hilarius?) to share strings inside each browser window.

This idea is not so new, I wrote JSTONE few months ago to do something similar, however it seems that JSTONE requires dedicated JSON implementation or something similar to work correctly.

Now, let me explain why I wrote this tiny function and for what it should be used for.


Random Access Memory


window.name is a string always present every time We open a window.
The cool, but not so secure, behaviour of this property is that this persists even if We change site or domain or We refresh page using F5.
While We use the same window, window name will be available, seems cool?
RAM function is capable to save a lot of informations using a Random Access strategy, where the "memory address" is created by yourself, using your personal keyword.
Both keywords and saved data can contain every kind of char excepted for \x00 one (End Of String or null char).

It's based on a sort of automatic namespace management but your keyword is not really your one but as is for libraries, everyone should use a dedicated namespace without conflicts, don't You agree?
Finally, window.name can save strings of hundred of thousand chars, I didn't find a limit for saved informations but as is for real RAM, if You turn off your PC (in this case browser window) it will be automatically resetted.


Why RAM function ?


These days I'm testing my last creation, packed.it, to find problems or to test decompression speed with big data size.
One thing I tough is that with packed code (using packed.it, packer or similar compressors), size is not the real problem as decompression CPU overload is.
I was try to find a way to cache or speed up unpack operation but every test I did failed (bad results).
That's why I created this simple function, to test clear code evaluation performances instead of runtime decompression, allowing users to unpack every kind of code 1 time each window instead of every time.
This means that during navigation in the same window, a new user will unpack code only first time but after first clear code creation procedure, You sohuld save them inside window.name and evaluate them in every other page viewed inside same browser window.
At the same time, if user will leave your page and then come back using back button it will have again code stored if external site didn't modify window.name or modify them without RAM function.
Finally, I could save an address, called for example jQuery :-) ... saving clear source and check them every time one page that use them is called:

eval(RAM("jQuery") || RAM("jQuery", function(p,a,c,k,e,d){/* ... */}));

Every link in the same window and every site viewed after this one should use same strategy to perform packed sources evaluations faster than ever because decompression will be performed only first time ... not a real solution but at least a simple way to optmize, a bit, navigation and decompression speed?

So, RAM function should be used to ... ?



  • save each kind of informations rappresented as a string (JSON as every other kind of string)

  • share common libraries between different pages / sites

  • evaluate big strings if compressor believes in RAM function



I'll try to do some test with packed.it, probably as option.
The battle is between a little overload of 256 bytes against 1 to 5 seconds for really big packed sources ... uhm ... what do You think is better?

Do I forget something? Uhm, both keywords and sources could use SOH char too (\x01) without problems but each SOH will be duplicated inside window.name and replaced before You'll read them again to preserve string as is when You get them using RAM.


<script type="text/javascript" src="RAM.js"><!--// Function RAM //--></script>
<script type="text/javascript"><!--//
eval(
/* from second time You visit this page */
RAM("my personal key") ||

/* only first time You visit this page */
RAM("my personal key", "alert('Hello World')")
);
//--></script>




Update 2007/10/15
DarkCraft sayd that NoScript doesn't allow many chars inside window.name when You change domain, reload the page or do something similar.

I wonder why NoScript guys allows few chars in window.name (someone shoud use them to save user and passwords, for example) instead of clear one ... however, RAM should work without problems with NoScript enabled browsers too, just using a try catch statement.

// RAM example for NoScript browsers
try{
eval(RAM("my lib")||"this=0")
}catch(e){
eval(RAM("my lib", (function(p,a,c,k,e,d){return 'alert("hello my lib")'})()))
};

If You use this piece of code NoScript enabled browsers will just "decompile" each time saved informations, if these contains special chars too.
Please remember that RAM goal is to believe in itself, it's quite obvious that if some malicius site/page/code replace informations or uses malicius version of common libraries RAM function should become totally insecure.

The best practice I could suggest is to use a "private mutable key":

try{
eval(RAM("jQuery-1.2.1-" + location.hostname)||"this=0")
}catch(e){
eval(RAM("jQuery-1.2.1-" + location.hostname, (function(p,a,c,k,e,d){return 'alert("hello my lib")'})()))
};

That in a session based enviroment should be something like this code:

try{
eval(RAM("jQuery-1.2.1-<?php echo session_id();?>")||"this=0")
}catch(e){
eval(RAM("jQuery-1.2.1-<?php echo session_id();?>", (function(p,a,c,k,e,d){return 'alert("hello my lib")'})()))
};

To be sure library is shared only during a valid session.
A random cookie should be good enough too but paranoia is always with us :D

Finally, in packed.it I'll add a RAM option based on project name, different each time.
These practices disable cross site library sharing but I hope one day malicious site, developers, will be banned from the Web (just a "little utopia")

Worry about gzip ? No problem, packed.it preferes DEFLATE

I didn't test so much DEFLATE version of packed.it service and it seems that this one didn't work correctly with some browser ( ... ehr ... sorry guys ).

So I've just fixed deflate version and in my tests it works perfectly ... so perfectly that I choosed to use DEFLATE as first generator option, instead of gzip.

It seems that gzip causes too many problems with some version of Internet Explorer while I have not just read anything something about DEFLATE problems too.

gzip VS DEFLATE ?


Well, it seems that DEFLATE performs a compression quite faster than gzip but packed.it goal is to forget runtime compression ... so this point doesn't matter while decompression speed should be a better plus, again, for DEFLATE.

At the same time DEFLATE seems free of has some problems with every compatible browsers ... and as You know, Internet Explorer is compatible with this compression too :-)

The result code should be more slim using gzip but We are talking about 2%, max 3%, that's not a problem with both big and medium / regular compressed sources.


So what's new ?


The news is that now packed.it generators (PHP 4 or 5, C# Mono or .NET, Python PSP or WSGI) works correctly with deflate version (now compressed respecting RFC 1951) and choose them as first option.
You can obviously change priority by yourself, if You think gzip is better, however I'll mantain this choice if anyone will tell me that DEFLATE has same or more problems that gzip.

"gzip" is the gzip format, and "deflate" is the zlib format. They should probably have called the second one "zlib" instead to avoid confusion with the raw deflate compressed data format. While the HTTP 1.1 RFC 2616 correctly points to the zlib specification in RFC 1950 for the "deflate" transfer encoding, there have been reports of servers and browsers that incorrectly produce or expect raw deflate data per the deflate specficiation in RFC 1951, most notably Microsoft. So even though the "deflate" transfer encoding using the zlib format would be the more efficient approach (and in fact exactly what the zlib format was designed for), using the "gzip" transfer encoding is probably more reliable due to an unfortunate choice of name on the part of the HTTP 1.1 authors.


Have a nice optimization with packed.it ! (and please let me know if deflate will cause problems that gzip didn't cause)

Monday, October 08, 2007

packed.it screencast ... (maybe) Yesss!!!

I didn't find a way to create a clean video, probably 450 pixels are not enought to show how does packed.it work?

However, I'll try to explain these two screencast.

First one - Ext JS Home Page - from 223Kb to 52Kb


This video shows a saved version of Ext JS Home Page.
This site uses a lot of external CSS, one imported and one in page but not every one is used by JavaScript disabled browsers.
Total CSS size is about 93,2Kb while 4 used JavaScript files size is about 130Kb.

With packed.it You can create a project using both CSS and JavaScript and the result will be a single file with total size of 52Kb, including both CSS and JavaScript.

I didn't add to project Google Analytics unrich.js file but this should be included without problems too saving other 15Kb.

As You can see (I hope), the result is even smaller on page, just three tags, using IE5 compatibility one, instead of 8 inside page ... these are few bytes less than original and layout is even more clean than ever.

CSS file dedicated only for JavaScript incompatible or disabled browsers is just 36Kb instead of 93 without optimization but as You know You could use packed.it to serve an optimized version of this file too (just change packed.it folder name to packed.css, for example, and change prefix inside automatic generator).




Prototype and Scriptaculous in less than a minute, from 230Kb to 38Kb



This second example just shows a JavaScript only project, Scriptaculous 1.7.1 beta 3 using prototype version 1.5.1
You just need to upload these sources and with a click You'll download full Scriptaculous enviroment, reducing size from 230Kb to 38Kb.

Using client compression too, every gzip or deflate incompatible browser will download about 90Kb instead of 230Kb, reducing bandwidth about 38% of original.

Sorry for missed audio and bad video quality, I'll try to do something better next time, ok? :-)

Saturday, October 06, 2007

new packed.it automatic content generator

packed.it service now creates archives with 3 types of automatic content generator: ASP.NET (C#), PHP (4 or 5) and Python (mod_python and psp or WSGI version).

These generators complete packed.it service and are usable with MyMin produced code too if You choose to manage your own projects by yourself.

Probably there will be future implementations (Java, Perl, Ruby), however today You can use packed.it to create optimized CSS and JavaScript for more than 80% of hosting solutions.

A special thanks to Cristian Carlesso for C# porting, He doesn't like my revision style so much ... but it works perfectly and it's more simple to mantain too (at least for me :D)

Have fun with packed.it :-)

Friday, October 05, 2007

MyMin project 1.0.1 available

I've just uploaded last version of MyMin project fixing only JSmin problems with regular expressions when it's not inside a closure, not after '{' or ';' allowing them to parse entire jQuery UI, for example, without problems.

This fix has been successfully tested on Python 2.5, PHP 5.2, C# 2 and JavaScript 1.3

You can find MyMin project description in this page while You can optimize CSS and JavaScript in a single file simply using my on-line packed.it service.

Have fun with optimizations and please feel free to post a comment if You find some bug using MyMin project, Thank You!