Passion for web

bored with something to array convertion ? map them !

2007-06-27T16:20:00.001-07:00

I'm rewriting my JSL to include by default inside my next project.
This project will include automatically a lot of standard JS 1.5 methods or functions, and Array.map is one of those.

While I'm testing some proto performances, I've thought about a really simple way to switch from an array or from a node list (getElementsByTagName) with a simple, fast and single line of function.

// old example version
// function _A(a){return [].map.call(a,function(a){return a})};

// new version, Daniel suggest, faster and doesn't require any prototype !
function _A(a){return [].slice.call(a)};

and that's all, do You like it ?

As first point, You need FireFox 1 or greater (or Mozilla if You prefere) or this short piece of code:

if(!Array.prototype.map) Array.prototype.map = function(callback){
for(var i = 0, j = this.length, result = new Array(j), self = arguments[1], u; i < class="jshoperators">++) {
 if(this[i] !== u)
  result[i] = callback.call(self, this[i], i, this);
};
return result;
};

Then You have "everything You need" to get quickly every iterable element.

These are just two examples

function sort(){
return _A(arguments).sort().join("
");
};
document.writeln(sort("Luke", "Jabba", "Fenner"));
document.writeln(sort("c", "a", "b"));



var firstScript = _A(document.getElementsByTagName("script")).shift();
alert(firstScript);

var allUnorderedList = _A(document.getElementsByTagName("ul"));

alert(_A(null).constructor === Array); // true ;-)

These nice trick should be used with forEach method too.
Stop for and while loops, each them !

function changeLinks(onclick){
[].forEach.apply(document.getElementsByTagName("a"),
 function(link){
  link.onclick = onclick;
});
};

changeLinks(function(){
window.open(this.href, "");
return false;
});

... and sure, You need forEach prototype too ...

I suppose every other JS 1.5 Array method should be cool enought to work with DOM nodes too ... do You agree ?

Are thinking about performances ? Well guys, quite the same of generic loops, even faster (works in core) with every FireFox !!!

bytefx 0.4

2007-06-27T16:18:00.000-07:00

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.

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

not yield and the shortest Fibonacci function

2007-06-27T16:17:00.001-07:00

was joking with new JS 1.7 features, 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" :)

PHP and JavaScript encoding comparison table

2007-06-27T16:16:00.001-07:00

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.

Which function to get an XMLHttpRequest object ?

2007-06-27T16:15:00.001-07:00

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

CSS Dropshadow

2007-06-27T16:09:00.000-07:00

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

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

W3 Validator, DOM, byteson and PHP

2007-06-27T16:05:00.000-07:00

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 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 < class="jshproperties">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 < class="jshproperties">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 ;-)