[PHP] New version of GzOutput class

I've just updated my recent GzOutput.class.php (more recent than last file published on Ajaxian :D) and tested successful on many browsers.

The difference from other cache-manager files, functions or classes is that GzOutput is totally indipendent from folders or page type, You could use them to increase JSON responses (using text/plain as Content-Type) as well as XML, (X)HTML, CSS or every kind of document You need.

You could combine this class with a JavaScript compressor (to improve download speed) and you don't need to care about output changes because ETag is based on sha1 and not on every mktime of each file (it means better server performances).

The only think that You need to remember is that You don't need to write everything before to use this class (empty spaces, some char or pages can't be write before its usage).

Four public methods are really simple to use:

create, sending an output string and a Content-Type type to use cache if it's available (if not, forces next download to use cache)

createNew, sending an output and a Content-Type to force everytime the download (it's a must for Ajax interactions with XML, JSON or serialized strings)

createFromList, sending an array of files and a Content-Type to create a single generic output file including each file content and using create properties for output

createNewFromList, sending an array of files and a Content-Type to create a single generic output file including each file content and using createNew properties for output

That's all, do You like it ? :-)

PHP API Manager for Notepad++

I've used fantastic Komodo IDE to develop for a lot of time my Python/PHP web/desktop applications but now that my portable PC "has been regenerated" from SONY I'm spendig a lot of time to re-install everything I need.

My first favourite editor was ConTEXT, a fantastic, fast and powerful editor for every kind of program language but "my last love" has been Komodo that I've won on phpclasses.org.

Difference is amazing but there's just a problem .... Komodo is too much powerful and wants a lot of resources (I've not an extremely powerful VAIO) then I've choosed to install ConTEXT one more time but I've found, inside a forum, another famous editor as Notepad++ is and I don't know why I didn't try them before.

It's exactly what I need, a fast, simple, scite based, auto-completition enabled editor, then it's fantastic because I can write PHP as JavaScript, C and many other languages too !!!

Auto-completition is just what ConTEXT doesn't have but hey, it's a must to remember perfectly each kind of function or method because You can use them with CTRL and SPACE where You want then php.api file, as javascript.api files are a perfect solution to develop quickly without an api search engine under your nose ;-)


That's why I've created two really stupid PHP files to manage PHP API, one to create a personal installation dedicated api and one to update and mantain an api with old, unused or deprecated method too.

This is the readme file:

PHP API Manager - Andrea Giammarchi [http://webreflection.blogspot.com/]

These two simple phpfiles overwrite or create php.api file for Notepad++ program [http://notepad-plus.sourceforge.net/]

Usage:

 - notepad.dedicated.api.php

 call this file to create your personal PHP configuration api.
 This script create php.api file for Notepad++ program overwriting, if present, precedent php.api file version.
 Use this application if You don't need other not loaded/present extensions of your php installation.


 - notepad.update.api.php
 
 call this file to update your personal PHP configuration api or original Notepad++ default php.api file.
 This script create php.api file for Notepad++ program overwriting, if present, precedent php.api file version.
 Use this application if You want every other php functions too that shouldn't be present on your php installation.
 Please remember to copy old php.api file inside this folder before to launch this application.

And this is the link of downloadable zip file with these two php scripts (on title too).

Have fun with Notepad++ :-)

Firefox Multiple Vulnerabilities ? Update in few hours !

The Highly critical Secunia Advisory of 2006-12-19 is not a problem, FireFox 2.0.0.1 has been released in few hours !!!

You don't need to download this new version if you have auto update feature enabled because your FireFox will update by itself in a "couple of seconds".

I wonder when Microsoft Internet Explorer released an multiple patches update the day after after and then I wonder why You've not yet installed FireFox on your Windows, Mac or Linux computer!

This is quite a record for a browser and this is the complete FireFox 2 veulnerability report ... just 2 vulnerabilities and just one of them unpatched and it's a less critical problem.

This is "your" Internet Explorer 6 vulnerability report and this is the last version 7 of, again, Internet Explorer Browser vulnerability report with 3 bugs, one of them moderately critical and any of them patched.

So c'mon guys, what are You waiting for ? GetFirefox ;-)

IWA Italy didn't choose me !!!

The Web Skills Working Group selection is closed and the group is complete.

A lot of University members, a lot of Information Architect and a lot of IWA members ... but "any every day applications" certified or skilled developer, just people that write books, blog posts, do training courses every day and probably part of the same trainings that make italian ICT as is right now (unlikely often generally "ridi.culo.us" ...) ... well, I can't read about any skilled server and client (both!) developer in the Web 2.0 era (or probably I don't know Him/Her) ... but this group should tell us how should be a Web developer and what kind of certification He should have to be a real Web developer ... sure, one or more IWA certifications !

At this point, my first opinion is that V.U.E. certifications aren't a good start point (I've 2 official server and client certifications,PHP Engeener and AS2.0 - ECMAScript 3/4 Developer) and that my W3C/PHP/JavaScript/ActionScript skill and experience (about 8 years) isn't enought to be part of choosed professionists group ... I'm quite disappointed about that but I really ... really hope that next 3 months will be a revolution for italian Information and Communications Technology !

Well, Good Luck Web Skills Working Group, I hope you'll do an excellent work and I hope you'll find the right way to create real good Web developers and not just "fake Web Doctors" !!!

I'm waiting for your progresses, please respect our expectations, we believe in you ! :-)


[update]
this is just my opinion wrote in an italian forum

Reset The Element CSS

Few days ago ajaxian posted a YUI solution to reset CSS in a page.

This is a really interesting way to solve inherit CSS problems when You need to create a personal widget or when a library would do it.
Dean Edwards did a WHATWG proposal for a <reset> element because

He *really* wants to turn off CSS inheritance

.

He's quite right for many reasons and that's mine proposal, a reset css that just use simply a class name.

.reset,.reset div,.reset dl,.reset dt,.reset dd,.reset ul,.reset ol,.reset li,.reset h1,.reset h2,.reset h3,.reset h4,.reset h5,.reset h6,.reset pre,.reset form,.reset fieldset,.reset input,.reset textarea,.reset p,.reset blockquote,.reset th,.reset td
{margin:0;padding:0;}

.reset table
{border-collapse:collapse;border-spacing:0;}

.reset fieldset,.reset img
{border:0;}

.reset address,.reset caption,.reset cite,.reset code,.reset dfn,.reset em,.reset strong,.reset th,.reset var
{font-style:normal;font-weight:normal;}

.reset ol,.reset ul
{list-style:none;}

.reset caption,.reset th
{text-align:left;}

.reset h1,.reset h2,.reset h3,.reset h4,.reset h5,.reset h6
{font-size:100%;font-weight:normal;}

.reset q:before,.reset q:after
{content:'';}

.reset abbr,.reset acronym
{border:0;}

The element with reset class name and every "resetted" elements seems to work fine and You could see an example using this page changing the href of the style element and changing, for example, the body element in this way

...
<link rel="stylesheet" type="text/css" href="reset.css">
</head>

<body class="reset">
...

This is just an example because You could use reset with every element to obtain the same result for each nested table, form and elements.

This isn't probably the best solution but should be one solution and You could use multiple class name to define Your style too

...
<element class="reset mywidgetstyle">
...

There's only some adjustment to do with headers and probably something else that You could set using a dedicated css

.reset h1 {
 font-weigth: bold;
 font-size: 1.2em;
}

It's just an example but it should work with every CSS based browser.

What do You think about this solution ?

A stupid Ajax cache problem solution

One of the common problem using Ajax (Flash too) interactions is the cache.
There are a lot of valid PHP, Python, JSP and .NET solutions but browser compatibility is often a question mark.

You could implement easyly and directly a client solution and this is just another proposal.

function noCache(uri){return uri.concat(/\?/.test(uri)?"&":"?","noCache=",(new Date).getTime(),".",Math.random()*1234567)};

exactly 123 bytes to solve cache problems and this is the func description:

function noCache(
  uri  
  // uri string to open
 ){

 return uri.concat( 
  // concat String prototype,
  // the fastest way to produce
  // a complete string using multiple values

  /\?/.test(uri) ?
  // if uri has a query string

   "&"
  // add last value using & separator char
   :

  // else
   "?",
  // add a query string to this url

  "noCache=",
  // this should be a "cool name" for generated key

  (new Date).getTime(),
  // the noCache value will be milliseconds
  // from 1970/01/01

  ".",
  // plus a dot ...

  Math.random()*1234567
  // ... and a random value using
  // a "big" integer as generator
 );

 // then this is a return example using uri: http://host.com/mypage.html
 // http://host.com/mypage.html?noCache=1166301156233.332083.6663326991

 // while this is an example using uri: http://host.com/mypage.html?v0=1&v2=a
 // http://host.com/mypage.html?v0=1&v2=a&noCache=1166301168420.631416.7190624559
};

You could test directly in a loop, a benchmark that many other sites didn't test ...

for(var
 i = 0,    // many loops
 max = 10000,   // max i value
 uri = document.location.href, // this href
 obj = {};   // a generic object
 i < max;   // while i is less than max
 i++    // increment the i value
) {
 if(!obj[noCache(uri)])  // if obj has not a nocache(uri) key
  obj[noCache(uri)] = true; // set them as true
 else {    // else if obj has just the returned nocache(uri) key
  i = max;
  alert("noCache doesn't work"); // this method is not so cool
 }
};

A script that use Ajax requestes inside a loop is not a good script (I suppose) but this kind of demostration can show You that generated no-cache collisions probability are quite impossible.

A usage example should be this one:

XHR.open("get", noCache(myUri), true);
// or ...
XHR.open("post", noCache(myUri2), true);

Finally these are some F.A.Q.

Why there is a key and a value and not just a random value to perfom without caching problems ?
- because some server-side code should loop over GET or POST keys and in this way it should know that noCache is a not useful parameter to parse or to check. In other cases a server-side code should consider generated radom value as a key.

Why there is a getTime plus a random value and not just the first one ?
- because some client application should call more than a single request at the same time

Why there is a full stop between getDate and random value ?
- because if client date is modified there are less possibilities that generated value was just used (paranoia style)

I think these F.A.Q. are enought and I hope You'll find this simple function useful :-)

P.S. with ActionScript just change the regExp replacing with uri.indexOf("?") >= 0

The byte family is now complete, welcome bytedom

another "$" dollar function ? elements prototypes ? no, just a simple library with its namespace that doesn't modify anything else !
This is my last creation to complete my lightweight low-level framework that should be everything You need for your Web 2.0 sites or to develop more complex libraries too.

I've found EJ idea great but I always look for my own solutions.
I've thought about bytedom since I've created btefx but btesonwas more important than simply dom management (P.S. new byteson version 2.0b is available) but now I've completed what I need to develop my projects.

This is the bytedom method list:

• addClassName, to add if not present a class name to an element


• addEvent, to add a standard name event such click, load, mouseover and every other, DOMContentLoaded too


• clear, to remove empty textnode from an entire document (FireFox, for example, reads newlines as textnodes)


• create, to create one or more elements (input, div, span .. and every other)


• every, a method like Array.every official JS 1.5 method, usable with a list of elements and arrays too


• filter, same style of every, to get only what You need with your dedicated filter function


• forEach, as every and filter, to do something with a list of nodes / elements or arrays too


• get, something like dollar function, to get one or more elements with specified ids, lists of nodes of specified types or a list of elements with specified classNames


• getStyle, to know a property of a specified element style


• pop, to get and remove an element from a parent node


• preventDefault, to prevent events defaults


• push, to get and add an element at the end of a parent node (something like appendChild)


• remove, to get and remove an element from a parent node


• removeClassName, to remove a className, if present, from an node / element


• removeEvent, to remove a standard name event such click, load, mouseover and every other, DOMContentLoaded too


• replace, to get and replace a new node from a parent


• reverse, to reverse the order of every child found inside a parent node


• shift, to get and remove the first element of a parent node


• some, as every, filter and forEach


• text, to get and create one or more text nodes


• toggle, to hide an element storing its old visibility and display style values ... and to assign them if element is toggled again


• unshift, to add one or more element at the top of a parent node

These useful methods (at least in my humil opinion) let you get, modify, filter or manage dom elements in a simple, funnny (?) and JS friendly way.

This is just one of examples present in this page while this is a new anti pixel logo for people that use every byte library:

that with every member is less than 10 Kbytes for packer version, less than 15 Kbytes for clean crunched version and finally less than 7 for memtronic version.

Please sorry for incomplete bytedom site, I'll update API section as soon as I can.
Now, You could read about every method and parameters directly inside Open Source file version.

I hope you'll like new bytedom library and please tell me if something doesn't work correclty or some browser is not compatible (successful tested with IE5+, FF1+, Opera8+, Safri2+, KDE3.4+).

W3 Validator, DOM, byteson and PHP

I've uploaded a new byteson example page, based on a single and simple request to a PHP page that uses W3 Validator service, calling a SOAP result, parse them to convert it into an associative array and finally send it with JSON to byteson.

Here is the PHP code

<?php
// byteson filter
if(isset($_POST['byteson'])) {

 // http://www.phpclasses.org/browse/package/3512.html
 require 'FastJSON.class.php';

 // http://www.devpro.it/code/143.html
 require 'W3validator.function.php';

 // remove magic quotes if th it's present
        // magic_quotes is a problem for JSON strings
 if(get_magic_quotes_gpc())
  $_POST['byteson'] = stripslashes($_POST['byteson']);

 // get the output
 $output = FastJSON::encode(W3validator(FastJSON::decode($_POST['byteson'])));

 // force new content to download
 header('Content-Type: text/plain; charset=utf-8');
 header('Content-Length: '.strlen($output));
 header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
 header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
 header('Cache-Control: no-store, no-cache, must-revalidate');
 header('Cache-Control: post-check=0, pre-check=0', false);
 header('Pragma: no-cache');

 // exit writing JSON object for byteson
 exit($output);
}
?>

This code is above the xHTML output and You can view them by yourself, viewing the example page.

This php page uses two other files, my FastJSON class and my last function on devpro, called W3validator (what a fantasy ...).

The JavaScript code is this one

// new browsers filter
if(document.getElementsByTagName)
onload = function(){ // (C) Andrea Giammarchi

 // assing tabindex and accesskey 
 function accesstab(input){
  input.accesskey = input.tabindex = ++accesskey;
  ++tabindex;
 };

 // assign generic link properties
 function addLinkProperties(a){
  tab(a);
  a.href = "#";
  a.onclick = function(){
   var ul = this.parentNode.getElementsByTagName("ul").item(0);
   ul.style.display = !!ul.style.display ? "" : "none";
   return false;
  };
  return a;
 };

 // append one or more elements into another
 // then return the "parent" element
 function append(parent, elements){
  if(elements.constructor !== Array)
   elements = [elements];
  for(var i = 0; i < elements.length; i++)
   parent.appendChild(elements[i]);
  return parent;
 };

 // create a list if there are errors or warnings
 function createList(message, obj){
  for(var a, span, i = 0, key = "", list = [], tmp = []; i < obj.length; i++) {
   for(key in obj[i]) {
    span = node("span");
    span.innerHTML = obj[i][key];
    tmp.push(append(
     node("li"), [
      append(node("strong"), text(key)),
      span
     ]
    ));
   };
   a = addLinkProperties(append(node("a"), text(message.concat(i + 1))));
   list.push(append(node("li"),[a, append(node("ul"), tmp)]));
   tmp = [];
  };
  return append(node("ul"), list);
 };

 // perform the request using byteson
 function doRequest(oldtab){

  // just call the server side page
  // sending input string and adding just
  // one listener ( because I'm sure, this application will works "perfectly" :P )
  byteson.request("w3validator.php", inputuri.value, {

   // onload event
   load:function(obj, xhr){
    var a, key = "";

    // remove the loading text
    resultlist.removeChild(resultlist.firstChild);

    // create a list with every key value ...
    for(key in obj) {

     // but not with Arrays (errors or warnings)
     if(obj[key].constructor !== Array) {
      append(
       resultlist,
       append(
        node("li"), [
         append(node("strong"), text(key)),
         append(node("span"), text(obj[key]))
        ]
       )
      );
     };
    };

    // create last list with each error or each warning
    for(key in obj) {
     if(obj[key].constructor === Array && obj[key].length > 0) {
      a = addLinkProperties(append(node("a"), text(key)));
      append(
       resultlist,
       append(
        node("li"), [
         a,
         createList(key.replace(/list/, ' #'), obj[key])
        ]
       )
      );
      a.onclick();
     };
    };

    // enable the form
    inputuri.disabled = senduri.disabled = false;

    // set old tabindex for next request
    // (correct tab navigation ready)
    tabindex = oldtab;
   }
  });
 };

 // create and return an element of specified type
 function node(type){return document.createElement(type)}; 

 // add tabindex property using global scpe tabindex integer value
 function tab(node){node.tabindex = ++tabindex};

 // create and return a text node with specified content
 function text(value){return document.createTextNode(value)};

 // internal global scope variables
 var accesskey = 0,     // accesskey (WCAG ready ?)
  tabindex = 0,     // tabindex (tab navigation ready)
  output = document.getElementById("request"), // div container
  form = node("form"),    // used form
  inputlabel = node("label"),   // label for input text
  inputuri = node("input"),   // input text
  sendlabel = node("label"),   // label for send button
  senduri = node("input"),   // send button
  resultlist = node("ul");   // result unordered list

 // assign accesskey, tabindex and other parameters for each input (in this case text and btn)
 accesstab(inputuri);
 inputuri.type = "text";
 inputuri.id = inputlabel["for"] = "userinput";
 // keyboard event listener (RETURN to perform the request)
 inputuri.onkeyup = function(evt){
  if(!evt)
   evt = window.event;
  if(!evt.wich)
   evt.wich = evt.keyCode;
  if(evt.wich === 13 && this.value.replace(/^\s*|\s*$/, '').length > 4)
   senduri.onclick();
 };
 
 accesstab(senduri);
 senduri.type = "button";
 senduri.id = sendlabel["for"] = "sendinput";
 senduri.value = "verify";
 // request function
 senduri.onclick = function(){
  var newresult = node("ul");

  // disable the form
  inputuri.disabled = senduri.disabled = true;

  // blur this button
  senduri.blur();

  // remove precedent unordered list element and replace
  // replace them with a simple "loading response" message
  // inside a new unordered list element
  resultlist.parentNode.replaceChild(newresult, resultlist);

  // assign new ul element to global scope var (to change them on load)
  resultlist = newresult;
  append(resultlist, append(node("li"), text("loading response")));

  // perform the request with byteson
  doRequest(tabindex);
  return false;
 };
 
 // form should be disabled, by default
 // (the form doesn't degrade in this example)
 form.onsubmit = function(){return false};

 // create the output only for the first time
 output.replaceChild(
  append(
   form,         // the form
    append(
     node("fieldset"), [     // top fieldset
      append(
       node("legend"),    // and its legend
       text("W3 Validator")   // with its content
      ),
      append(
       inputlabel,    // label for text input
       text("write a valid url address") // and its content
      ),
      inputuri,     // input text
      append(
       sendlabel,    // label for button
       text("verify W3 validator result") // and its content
      ),
      senduri      // send button
     ]
    )
 ), output.firstChild);

 // create result fieldset to show informations
 // append this fieldset after the precedent output
 append(
  output,
  append(
   node("fieldset"), [       // bottom fieldset
   append(
    node("legend"),       // and its legend
    text("W3 Response")      // with its content
   ),
   resultlist        // and its unordered list
   ]         // to show the result
  )
 );
};      // that's all

The last file is the external stylesheet used in this page.

This basic example can explain better than every post, how W3validator PHP function works and how much is simple to implement byteson inside other JS code.

Have fun with W3 validation ;-)

My Last DOMContentLoaded Solution

Update 28/11/2006 Thanks to anonymous for its perfect suggest!!!
Update 01/12/2006 Thanks to Stephen Elson for debug
Update 01/13/2007 This is my last version that doesn't use global window.__onContent__ variable
Update 13/02/2007
Sorry guys for my choosed old title, thanks to Pierluigi that explained me what did it mean

function onContent(f){//(C)webreflection.blogspot.com
var a=onContent,b=navigator.userAgent,d=document,w=window,c="onContent",e="addEventListener",o="opera",r="readyState",
s="");
a[c]=(function(o){return function(){a[c]=function(){};for(a=arguments.callee;!a.done;a.done=1)f(o?o():o)}})(a[c]);
if(d[e])d[e]("DOMContentLoaded",a[c],false);
if(/WebKit|Khtml/i.test(b)||(w[o]&&parseInt(w[o].version())<9))(function(){/loaded|complete/.test(d[r])?a[c]():setTimeout(arguments.callee,1)})();
else if(/MSIE/i.test(b))d.write(s);
};

Here is where this "story" began, inside a Dean Edwards post.
After that there was a big list of comments, posts and tests ... for a second post and a better solution !

Dojo adopted that solution ... then came back to old one ... but someone has never stopped to test, to try or to find a "perfect" way to add DOMContentLoaded with every browser and expecially with Internet Explorer.

Mark Wubben and Paul Sowden did it, they've created a complete and portable solution that works with http and https pages too !

Wonderful work guys and ... as first point, thank you very much !


Now, I can show my personal DOMCOntentLoaded solution, explaining them as better as I can.


The first step, the real key of this code, is the source of used script.

It's not void, it's not //0 ... it's exactly this one: //:
and is what I had not to create my tiny, simple and portable solution.

Here is the func, called onContent ...

function onContent(f){//(C)webreflection.blogspot.com
var a,b=navigator.userAgent,d=document,w=window,
c="__onContent__",e="addEventListener",o="opera",r="readyState",
s="<scr".concat("ipt defer src='//:' on",r,"change='if(this.",r,"==\"complete\"){this.parentNode.removeChild(this);",c,"()}'></scr","ipt>");
w[c]=(function(o){return function(){w[c]=function(){};for(a=arguments.callee;!a.done;a.done=1)f(o?o():o)}})(w[c]);
if(d[e])d[e]("DOMContentLoaded",w[c],false);
if(/WebKit|Khtml/i.test(b)||(w[o]&&parseInt(w[o].version())<9))
(function(){/loaded|complete/.test(d[r])?w[c]():setTimeout(arguments.callee,1)})();
else if(/MSIE/i.test(b))d.write(s);
};

... and this is the http test page, while this is the https test page.



Let me explain that unreadable function with a clear commented version :)

function onContent(callback){ // (C) webreflection.blogspot.com
    // [please note that this code doesn't work]

 // private scope variable

 var IEStringToWrite =  // this is IE dedicated string

  "<script defer src='//:' onreadystatechange='
  (function(element){
   
   // if readystate is complete
   if(element.readyState === "complete") {

    // remove the element
    element.parentNode.removeChild(element);

    // call the global variable
    window.__onContent__();
   }
  })(this);
  '></script>";

 // the above string is necessary to use onreadystatechange property
 // with an undefined page. In this way IE tell us the readyState
 // of the current document



 // to call callback function IE need a global scope variable
 // this variable could call one or more callback
 // then if it's already created we need to call the old callback
 // then this new callback
 window.__onContent__ = (function(oldCallback){
  
  // returns a function that will set every callback fired
  // [thanks to Stephen Elson for its suggest]
  // to remove multiple callbacks with different 
  // events and different ways for each browser

  return function(){

   // set window.__onContent__ as empty function
   // required by IE5
   window.__onContent__ = function(){};

   // verify that callee wasn't fired before
   if(!arguments.callee.done) {
   
    // set calle.done 1 as true fired value
    arguments.callee.done = 1;
   
    // checks if oldCallback isn't null or undefined
    if(oldCallback)
     oldCallback(); // call them to preserve the right order
 
    callback();  // call this scope callback function 
       // (sent calling onContent)
   }
  }
  
 })(window.__onContent__); // undefined if is the first time we use __onContent__



 // __onContent__ is my function to use as callback

 // I need to add this function as event

 // Opera 9 and FireFox both support DOMContentLoaded as well as 
 // addEventListener document method
 if(document.addEventListener)
  document.addEventListener("DOMContentLoaded", __onContent__, false);

 // if some browser supports addEventListener but doesn't support DOMContentLoaded 
 // event I don't need to care about that because this event will never be fired

 // at the same time if Safari or KDE one day will support DOMContentLoaded 
 // I prefere use this dedicated in-core
 // event instead of next trick that's quite horrible but works with Safari, 
 // KDE as Opera 8.5 and lower too

 // that's why I don't use an else if but an if ... because the first time 
 // event will be fired __onContent__ 
 // became an empty function ... then calling them twice is not a problem

 if(
  // Safari and KDE
  /WebKit|Khtml/i.test(navigator.userAgent) ||

  // Opera less than 9
  (window.opera && parseInt(window.opera.version())<9)
 )
  // runtime anonymous function
  (function(){

   // checks if document.readyState is loaded or complete
   /loaded|complete/.test(document.readyState) ?

    // then call __onContent__ , stopping internal loop
    window.__onContent__() :

    // or loops itself with the faster timeout
    setTimeout(arguments.callee, 1); 
  })();

 // at this point I've setted the DOMContentLoaded event for every browser
 // but not for Inernet Explorer.
 else if (/MSIE/i.test(navigator.userAgent))

  // I can write dedicated string
  document.write(IEStringToWrite);
};

My solution doesn't use conditional comments (I hate them !!!) ... and this is the compatibility list:

- FireFox 1 or greater
- Opera 8 or greater (I don't know 7)
- Safari 2 or greater (I don't know 1)
- KDE 3.4 or greater
- Internet Explorer 5 or greater (I don't know IE 5.2 for Mac)

Wall Street and GOOG , the day after the record

This is why they show beta logo, this is what should happen to bigs too.




Who caused the problem ? :)

CSS dropshadow ? Sure, simple and unobtrusive !

My favourite italian portal wrote a post about a CSS based dropshadow solution.
It talks about this webtoolkit.info post.

I didn't know that article then only now I can tell You something about that:

• graphic effects are good "only" for high bandwidth web surfers
• dropshadow isn't important as page content
• id attribute should be absolutely unique
• markup language has a scope and should be used for this scope (sure, when it's possible)
• 5 nested divs just to show a simple shadow effect aren't a cool solution (imho)

Since You can do the same thing using a really basic JavaScript function without a repeated id, nested obsolete elements and in a cross browser way with about 1.8 Kb of uncompressed and goo JavaScript, I think You should think about my alternative proposal.

The only things You need is a better CSS, not based on id but based on class name and a simple callback.
This is revisited CSS

/* CSS container shadow */
.shadow-container {
    position: relative;
    left: 3px;
    top: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
}
    .shadow-container .shadow2,
    .shadow-container .shadow3,
    .shadow-container .container {
        position: relative;
        left: -1px;
        top: -1px;
    }
    .shadow-container .shadow1 {
        background: #F1F0F1;
    }
    .shadow-container .shadow2 {
        background: #DBDADB;
    }
    .shadow-container .shadow3 {
        background: #B8B6B8;
    }
    .shadow-container .container {
        background: #ffffff;
        border: 1px solid #848284;
        padding: 10px;
    }
/* CSS container shadow */

And this is simple callback example:

onload = function(){
    createDropShadow(
        getElementsByClassName(
            document, "div", "dropshadow"
        )
    );
};

Now You can use a dedicated dropshadow div class name in every div that You want to modify.

<div class="container dropshadow">
Lorem Ipsum ...
</div>

That's all, just include ej basic file and my dedicated function and You'll have a cleaner page without nested divs overloads and ... bye bye nested divs :)

New Ajaj library on the net ! Welcome byteson

byte familiy is growing up and it's first "son" is called byteson.

byteson is a lightweight Ajaj library that could send and recieve in a simple way every JSON compatible variable.

byteson is server side language indipendent and it's naturally compatible with UTF-8 charset.

Finally, byteson is small, less than 2Kb Memtronic Version, about 3Kb packed and should be the only thing You need to create advanced client-server interaction.

Do You like it ?



Here You can find a portable txt summary of this library :)
byteson.txt

Unobtrusive Password Security Level Form

Few days ago I've put two JavaScript and PHP simple functions on devpro.it, called password security.

Today I would show You hot to use thoose functions, creating a valid W3 and WatchFire form to set or update one password with security level informations.
Security Level is a simple graphic/textual element used, for example, when You create a Windows Live account.

This kind of information is really useful for users because they've to choose at least a medium security password to have a "secure" account.

That's why I've created this example page and now I'm telling You how I did them.



First step, external files
I've saved PHP and JavaScript dedicated functions in different files.
Then I've created an external CSS file too and a simple graphic bar:


It's dimension are the same of element that will show this bar.

CSS important things are p.pwdlevelN informations, used to show background image with differents positions.



Next step, procedural PHP code
Example page uses few PHP lines of code, and thoose need to show different pages if user hasn't JavaScript support (or He has JS disabled) with or without a notice message.
This is used code:

// array with every password security levels
$security_levels = array('not secure', 'low security', 'medium security', 'high secutiry');

// if user choosed a password
if(isset($_POST['pwd'])) {

    // include psl function [http://www.devpro.it/code/141.html]
    require 'psl.php';

    // get security level
    $level = psl($_POST['pwd']);

    // create an element with security level informations
        $security_informations =
    '
'.$security_levels[$level].'
';
   
    // show message if password has been approved
    if($level > 1) {
        $security_informations .= 'password successful setted
';
   
        // do stuff, for example change password on db
    }
    else
        // just show a message about bad security
        $security_informations .= 'please choose a better password
';
}
else {
   
    // create default element
        $security_informations = '
';
}

// create output
?>

As You can see, this code is really simple and sure, basic too but is useful to understand why whe need PHP to create an unobtrusive JS like page.



Next step, JS code, using PHP too
Since I've defined an array without special chars, I could use them to create same JavaScript array too while other code is used to enable or disable submit button showing security level under the password input.

// returns an element by id
function $(id){
    return document.getElementById(id);
};

// checks password security, enables submit if it's secure
function checkSecurity(inputId, securityId, submitId){

    // array with every password security levels (simple with a php variable)
    var    security_levels = ["<?php echo implode('","', $security_levels); ?>"];
   
    // get security level
    var    level = psl($(inputId).value);
   
    // create an element with security level informations
    var    security_informations = document.createElement("P");
    security_informations.id = securityId;
    security_informations.className = "pwdlevel".concat(level);
    security_informations.appendChild(document.createTextNode(security_levels[level]));
   
    // switch the old information element with new one
    var    oldinformations = $(securityId);
    oldinformations.parentNode.replaceChild(security_informations, oldinformations);

    // enable submit if password is secure enought
    $(submitId).disabled = level < 2;
};

// clean pwd value and disable the submit
onload = function(){
    $("userpwd").value = "";
    $("setpwd").disabled = true;
}

Just a note about DOM, Internet Explorer is not compatible with standard (what a news ...) setAttribute HTMLElement method, then I've used direct assignment for id and className.




Final step, W3 / WCAG compilant layout
To show security level and to choose the new password, I've used a standard output that should be compatible with every browser from IE 5 to 7, FF 1 to 2, Opera 8 and 9 and maybe 7 too.
I've not tested KDE, Safari and Camino but I hope these browsers will don't have any problem with simple code used.
You can see full used code in this page.



I hope this example page will be a start point to create your own password security level area.

Which function to get an XMLHttpRequest object ?

Ajax is "quite old" but I've not found any crossbrowser clean or standard way to create and return the correct XMLHttpRequest.

I wrote a standard crossbrowser function in my italian Ajax Guide (http://javascript.html.it/guide/leggi/95/guida-ajax/) but someone, every day, try to discard that function or to create a "new way" to get that object.

My opinion is this one:
- You don't need any conditional comment, these aren't a good code practice
- You don't need any evil eval function ... You can do your check without problems
- You don't need any try catch, first because they're not compatible with old browsers, second because You can simply check browser version and then choose the correct ActiveX, if it's necessary


Then, if You're looking for a simple, fast and cross browser way to get XMLHttpRequest You could just use this function:

function xhr(){ // webreflection.blogspot.com
  var    xhr = null,
      b = navigator.userAgent;
  if(window.XMLHttpRequest)
      xhr = new XMLHttpRequest();
  else if(!/MSIE 4/i.test(b)) {
      if(/MSIE 5/i.test(b))
          xhr = new ActiveXObject("Microsoft.XMLHTTP");
      else
          xhr = new ActiveXObject("Msxml2.XMLHTTP");
  };
  return xhr;
};

Every compatible browser, FF 1+, Opera 8+, Safari 2+, KDE 3.4+, IE 5+, will get a valid XMLHttpRequest while every other browser, for example IE4, will recieve a null value.
Then You can simply verify if client browser support Ajax request using a sintax like this one:

var    ajax = xhr();
if(ajax)
  // do every async interaction ...

That's all, I hope this will be helpful :)

PHP and JavaScript encoding comparison table

PHP and JavaScript are used every day for sync or async interactions.

I often read functions or libraries that use JS escape function and I often read forum discussions where someone writes that to solve chars problems You need to use escape function.

That's wrong, as is the usage of urlencode instead of rawurlencode.



What's wrong on PHP urlencode function ?
urlencode works quite perfectly with different charsets but has a big problem expecially with one char, the space char " ".
This char is not escaped but is replaced with a "+" sign.
If You write an url with this sign instead of a space there are no problems but if write a response for JavaScript with this char there are different problems.

As You can see from this comparative table JavaScript escape or encode perfectly the space char but doesn't escape the plus sing "+".
This means that when You'll unsecape an urlencoded string it will convert plus sign correctly.

To solve this simple but common problem, when You need to encode a PHP string, use always the raw version: rawurlencode.




What's wrong on JavaScript escape function ?
It has more and more problems than urlencode PHP function because it is an old function (too much) with the best encoding browsers compatibility but without unicode support.
The first point is that it doesn't escape correctly the plus sign, then if You send an escaped string with a simple addiction "1 + 2 = 3" to PHP page, it will recieve a string like this one "1 2 = 3" because PHP urldecode function converts plus sign into a space.
However, the real big problem with escape is that it doesn't support unicode and it converts "correctly" only ASCII chars.

For example at the end of comparative table You can view that escape converts only in range 0x00 - 0xFF but doesn't convert in UTF-8 compatible way every char in range 0x80 - 0xFF and produces, for example, a string like "%E0" that's not the correct multibyte utf-8 rappresentation of char #224.

If You read under this line You can see that escape cannot produce a compatible output for unicode chars in a cross language compatible way.

I mean that every multibyte char in range 0x0100 - 0xFFFF will be converted into a fake JSON rappresentation: %u0100 - %uFFFF that isn't absolutely a correct encoded char and isn't compatible with any other language or url string specs too.

You can use escape only if You send, and recieve, simple strings like [0-9a-zA-Z] with some extra char ( \w ) but isn't absolutely a portable and correct way to create iso or utf-8 PHP and JavaScript interactions.

not yield and the shortest Fibonacci function

I was joking with new JS 1.7 features, well documented in this page, when I've thought about yield keyword.

It's a strange keyword because isn't usable as the rest of JS code.

For example, alert(yield variable) generates an error but alert((yield variable)) shows an undefined value.
(I know, it is quite idiot to think that it should have some value ...)

Then I've done some test:

function fakeGenerator(){
    var i = 0;
    while(true)
        // alert(yield i++);    // error
        // alert((yield i++));    // undefined
        yield i++; // ok
};

As you can see, (yield something) returns an undefined value and then this is a true expression.

!(yield variable) === true

Now You can think that a while loop should use this condiction instead of while(true) {yield variables;} ... for example:

function fakeGenerator(i){
    while(!(yield i++)){}
};

works perfectly then maybe I could use this information to write something like this ?

function fakeGenerator(i){
    while(!(yield i++));
};

Sure, and it works perfectly again !!!
!undefined is true and semi colon stops while loop then with an "OR" or an "AND" and a true value as condiction I could create a lot of dirty generators ... why not Fibonacci too ?

function fib(){
    let(i=0,j=1){
        while((yield i)||([i,j]=[j,i+j]));
    }
};

so c'mon brother, you can do it better!, said my dog ... and He was right, I can remove even OR, parentheses and why not, the last semi colon too (thanks to let block).

function fib(){let(i=0,j=1){while(!(yield i))[i,j]=[j,i+j]}};

That's what I meant for the shortest Fibonacci function, isn't that ?!?



Then ... What's up ?
I wrote this stupid post just to tell You that sometimes You don't need the "while(true)" condition, just switch true the "undefined yield" :)

bytefx 0.4

The good thing is that bytefx now has a new scroll method, the sad thing is that Safari 2 probably doesn't work with MemTronic compressed version and this new method cost about 1 more Kb, then bytefx now is 2.09 Kb and not less than 2 ... however, it is not so important because packer version is less than 3Kb and more compatible with Safari 2 too.

Fixes: any fix, bytefx seems to be really stable and probably bug free (simple with few lines of code :D).

Changes: just a new method to scroll the page with elements as target.

Visit the faq page to view an example.

Simple, cool ? Hey guys, It's bytefx ;)

What time is it ?

Dojo 0.4 has been released and one of its new features is a clock widget ... a clock widget ? ... Yes, a "fantastic" JavaScript Client Time based clock widget !!!

Hey Dojo developers, why do you think that OS (bottom right) clock isn't enought ?

It seems that Web 2.0 is going to be the new Flash 5 of the net ... I don't like it!

Ok, your framework is amazing, your code is fantastic ... but I wonder who need another JS clock ?

Is this server-side Greenwich time based ? None ...
Can I flip something inside that to set an appointment ? None ...
... then I can understand You only if it's a SVG demo (However, who care about my opinion ?)

Finally, since it's time to create clock widgets, I've decieded to waste my time with a basic digital clock and sure ... if you add some hour you could have different times too ...

This is my "fantastic" digital clock ... (LOL)


P.S. hey guys, it's only a joke :D

Some valid reason to hate IE7

I don't like IE, and I don't like new 7 version too and I would like to create a page that will work with every other updated browser but obviously not with IE7 ... our new web development bottleneck !!!

P.S. Please, Microsoft, remove IE7 as default browser from Windows Vista when it will be available ... and let users choose the best way to surf the web 2.0, thank you.

Unobtrusive JS Pixel Font (Round 2)

If you dont' know why this is the second round You should read this post and its comments .

This is the round 2, or better, the final round for my Pixel Font Engine, now totally based on CANVAS and DOM or based on SWF OBJECTS and one innerHTML for old deprecated browsers or Internet Explorer (really it cames with new version 7 and in WEB 2.0 era it doesn't support canvas ... damn IE7 !!! Why You should use them ?)

new concept
CANVAS or Flsh Player 6 dedicated SWF to render Pixel Font table Objects, because old version was really too mush slow and because canvas are better than nested tables to draw something (and Flash 6 can draw something well too).

Why I've not used VML or other fake canvas for IE ? Because I've tested them and they're all slow for this kind of interaction and excanvas render single pixels in a bad, bad, bad, way ... thery're unreadable !!!

Well, now You can't parse entire page but you can use this font or others created by yourself using pixel font generator ... and, have fun with pixel fonts :)

Here there's a shot of what You should view after onje click on DEMOSTRATION (... and another click to back to normal version)