Who said google are just a bunch of monkeys!?

Today, I was as bored as usual, so I dropped the homework and work as usual, and got on to the youtube as usual. so I was watching some nice videos (as usual), and I clicked on a new video (as usual), and sundenly... OMG code 500!
(code 500 means server internal error).
Now the funny thing wasn't to find error 500 at youtube, the funny thing was the youtube's description of the error. so I took liberty of taking a screenshot.
enjoy =D.

light my fire!

quoting from the good'ol Doors band, come on baby, light my fire!.
two add-ons for web developers that surely will 'light your firefox!'.

1.- web developer bar.
I know what you're thinking: fuck browser bars! they just leave me less and less visible space. but this bar is kicking-arse xD.
basically, it contains all a web developer could ask for Christmas:
cache options (such as disable cache), fast resolution viewer (which allows you to set various resolution and test your app on each), css options, code validation, among lots other useful tools.

2.- fireFTP
well, should I explain it for you?. is an FTP client, and is right on your browser, and is right on your firefox ^_^.
its like the best FTP client but cooler. and it uses less more memory. and of course, is fuking free!.

so there you'got kiddos, go out and have some fun pimping your FF.

You know that it would be untrue...

O'reilly slams Google openSocial

Okay folks. I've found this interesting article on PC Magazine. Personally, I've been using Google's OpenSocial API recently, and actually is a blessing for developers, but what O'reilly have to say about it its a kick in the balls, and I gotta say, the man have a point!

http://www.pcmag.co.uk/vnunet/news/2202974/father-web2-denounces-google

[.js] FormValidator v1.0

Hey folks!. I'm glad to announce that I finally finished my own version of a FormValidator for javascript. this is just a simple but well made class which is open to improvements.
the code comes well commented, but in case you have any doubt, please free to post it.

I'll post later some examples I've made using this class. hope you enjoy it. (it's not the most complete FormValidator on the web, but it's very easy to use and very functional.

I'll try to make some improvements to this class in the future so stay tuned for new versions.

By the way, at the moment, it supports simple callbacks after form has been validated. I think this'll help you to implement this code very easy without much changes to your original code.

another thing: this form uses the String.prototype.trim() function implementation posted before. so be sure to copy it and include it before including FormValidator:

<script language="javascript" type="text/javascript" src="trim.js"></script>
<script language="javascript" type="text/javascript" src="FormValidator.js"></script>


/////**** [mk]FORM VALIDATOR v1.0 ****\\\\\\

/////////////////////////////////////////////////
//by MasterKitano kitanosblog.blogspot.com 2008//
/////////////////////////////////////////////////

/*Use var myForm = new FormValidator("form"); to creat a new form validator, where "form" is your form id.
use myForm.addValidation(obj_id,val_type,message) to add a new validation.
obj_id : your object id to validate (your object most be inside the form).
val_type: type of validation-> null: checks if the value is empty
minlen: minimun value length (e.g "minlen=10")
maxlen: maximum value length (e.g "maxlen=10")
selected: (only for selects) checks if a option is selected (e.g. "selected=option_id")
nospaces: checks if value contains spaces (e.g. "nospaces")
alpha: checks if value contains only alphanumeric (letters and digits) (e.g. "alpha")
numbers: checks if value contains only numbers (e.g. "numbers")
mail: checks if value contains @, and a . after @.
message: the message that will be shown on the error messages window.
use myForm.addclearBtn("buton_id"); to automatically set a reset button.
use myForm.addSendBtn("buton_id",callback); to automatically set a send Button. this will perform validation, and if form is valid, then executes a callback to any function
use myForm.form.theElement or use myForm.form["element"] to access to any element in your form.
override myForm.prototype.displayErors() tho show the errors anyway yo want.

//HANDILNG ERROR MESSAGES
use myForm.invalid_form_msg ="error message"; to set default form error message.
use myForm.ERRORS_TAIL array to check all validation error messages.
use myForm.ERRORS_TAIL[index] to acces some specific message. (e.g. myForm.ERRORS_TAIL[0]);



*/
function FormValidator(form){
this.form = document.getElementById(form); //the handled form
this.invalid_form_msg = "data form error";
this.validation = true;
this.validationObjs = Array(); //objects to be validated
this.ERRORS_TAIL = Array(); //contains all error strings
this.addValidation = addValidation; //function to put a new validation on the validations tail
this.doValidation=doValidation; //checks al validations objects and confirms they're valid
this.addSendBtn = addSendBtn; //add send event to a button so we can send data (AJAX is supported) once is confirmed, second parameter defines a callback
this.displayErrors = displayErrors;//display the validation errors
this.clearData = clearData; //clears all the data information and restores it to the default
this.addClearBtn = addClearBtn; // add clear data event to a button so we can clear the form
}

function addValidation(obj_id,val_type,message){
var valid_exist = false;
if(message==null){
message = "unidentified error";
}
//make sure we create only one instance for every input object in the form
if(this[obj_id]==null){
this[obj_id]= new Object();
this[obj_id].elt = this.form[obj_id];
this.validationObjs.push(this[obj_id]); //add the object to the validations tail
this[obj_id].validations = Array(); //tail of validations to be performed to the object
this[obj_id].messages= Array(); //messages to be shown if validations didn't succeded

}
//make sure to have only one instance for every validation to be performed on the object
for(var i =0; i<this[obj_id].validations.length;i++){
var temp_value = this[obj_id].validations[i];
if(temp_value.indexOf("=")>=0){temp_value = temp_value.substr(0,temp_value.indexOf("="))}
var temp_value2 = val_type;
if(temp_value2.indexOf("=")>=0){temp_value2 = temp_value2.substr(0,temp_value2.indexOf("="))}
if(temp_value==temp_value2){
val_found=i;
valid_exist=true;
}
}
//create the validation instance only if it didn't existed before...
if(!valid_exist){
this[obj_id].validations.push(val_type);
this[obj_id].messages.push(message);
//or else, we just change the previos message to the newest (this can also be performed using attribute form.object.messages[validation number] = 'new message';
}else{
this[obj_id].validations[val_found]=val_type;
this[obj_id].messages[val_found]=message;
}
//alert(this[obj_id].validations);
}

function doValidation(){
this.validation = true;
//clear the errors tail;
this.ERRORS_TAIL = Array();
//START THE VALIDATION
for(var i=0; i<this.validationObjs.length;i++){
for(var j=0; j<this.validationObjs[i].validations.length;j++){
show_msg=false;
//CHECK IF INPUT OBJECTS VALUES ARE NULL OR UNCHECKED
if(this.validationObjs[i].validations[j] == "null"){
switch(this.validationObjs[i].elt.type){
case 'checkbox': case 'radio': if(!this.validationObjs[i].elt.checked){show_msg = true;}
break;
case 'password': case 'text': case 'textarea': if(this.validationObjs[i].elt.value==null || this.validationObjs[i].elt.value.trim().length<=0){show_msg = true};
break;
case 'select-one':if(!this.validationObjs[i].elt.value.trim()){show_msg = true};
break;

default :

//RADIO GROUPS
if(!this.validationObjs[i].elt.type && this.validationObjs[i].elt.length){
show_msg = true;
for(var x=0; x<this.validationObjs[i].elt.length;x++){
if(this.validationObjs[i].elt[x].checked){
show_msg=false;
}
}
}
break;
}
}
//CHECK INPUT OBJECTS VALUES MIN LENGTH
if(this.validationObjs[i].validations[j].substr(0,this.validationObjs[i].validations[j].indexOf("=")) == "minlen"){
var minlength = this.validationObjs[i].validations[j].substr(this.validationObjs[i].validations[j].indexOf("=")+1);
if(this.validationObjs[i].elt.value.trim().length<minlength){
show_msg = true;
}
}
//CHECK INPUT OBJECTS VALUES MAX LENGTH
if(this.validationObjs[i].validations[j].substr(0,this.validationObjs[i].validations[j].indexOf("=")) == "maxlen"){
var maxlength = this.validationObjs[i].validations[j].substr(this.validationObjs[i].validations[j].indexOf("=")+1);
if(this.validationObjs[i].elt.value.trim().length>maxlength){
show_msg = true;
}
}
//CHECK OPTION ON SELECT
if(this.validationObjs[i].validations[j].substr(0,this.validationObjs[i].validations[j].indexOf("=")) == "selected"){

var selected = this.validationObjs[i].validations[j].substr(this.validationObjs[i].validations[j].indexOf("=")+1);
if(this.validationObjs[i].elt[this.validationObjs[i].elt.selectedIndex].id==selected){
show_msg = true;
}
}
//CHECK INPUT OBJECTS WHITE SPACES
if(this.validationObjs[i].validations[j]== "nospaces"){
if(this.validationObjs[i].elt.value.trim().indexOf(" ")>=0){
show_msg = true;
}
}
//CHECK INPUT OBJECTS FOR NON ALPHANUMERIC CHARACTERS
if(this.validationObjs[i].validations[j]== "alpha"){
var string = this.validationObjs[i].elt.value.trim();
var regexp = /\W/;
var result = regexp.test(string);
if(result){
show_msg = true;
}
}
//CHECK INPUT OBJECTS FOR NON NUMBERS CHARACTERS
if(this.validationObjs[i].validations[j]== "numbers"){
var string = this.validationObjs[i].elt.value.trim();
var regexp = /\D/;
var result = regexp.test(string);
if(result){
show_msg = true;
}
}
//CHECK E-MAIL
if(this.validationObjs[i].validations[j]== "mail"){
var string = this.validationObjs[i].elt.value.trim();
var at = string.indexOf('@');
var dot = string.indexOf('.',at);
if(at>=0 && dot>at){
}else{
show_msg = true;
}

}
//IF ERROR HAPPENED THEN PUSH THE MESSAGE TO THE ERRORS TAIL
if(show_msg){
this.ERRORS_TAIL.push(this.validationObjs[i].messages[j]);
this.validation = false;
}
}
}
return this.validation;
}

function addSendBtn(btn,callback_function){
var send_button = this.form[btn];
send_button.parentObj = new Object();
send_button.parentObj = this;
send_button.onclick = function(){
var formValidation = this.parentObj.doValidation();
if(formValidation){
callback_function();
}else{
this.parentObj.displayErrors();
}
}
}
function addClearBtn(btn){
var clear_button = this.form[btn];
clear_button.parentObj = new Object();
clear_button.parentObj = this;
clear_button.onclick = function(){
this.parentObj.clearData();
}
}
function clearData(){
for(var i=0; i<this.form.length;i++){
switch(this.form[i].type){
case 'text': case 'password': case 'textarea': this.form[i].value = "";
break;
case 'radio': case 'checkbox': this.form[i].checked = false;
break;
case 'select-one': this.form[i][0].selected = true;
break;
}
}
}
function displayErrors(){
///MODIFY ONLY THIS PORTION OF THE CODE!
///THIS METHOD CAN BE OVERRIDED TO DISPLAY THE ERRORS THE WAY YOU WANT
var errors_msg = this.invalid_form_msg+"\n";
for(var i=0; i<this.ERRORS_TAIL.length;i++){
errors_msg+="\n-"+this.ERRORS_TAIL[i];
}
alert(errors_msg);
}

[.js] Regular expresions

regular expressions are commonly used to automate tasks that involves strings treatments. they work the same in every language and the syntax is very similar.

in the next example I'll explain how to use basic regexp syntax to implement the trim() function on javascript. if you're interested on learning more about regular expression I suggest to search on google, it's a very common topic, so you'll find plenty information. to get full reference of regexp on javascript I recommend w3Schools

to implement the trim() function we'll use the next modifiers:
^ -> this search character at the beginning of the string.
$ -> this search character at the end of the string.
| -> to select multiple cases (in regexps this works like an OR)
+ -> search for 1 or more matches but not 0.
/ -> end and beginning of a regexp.
g -> Global search. Search all occurrences of the regular expression in a string

there are two ways of creating a regexp on javascript:
1.- creating a regExp object instance: myExpression = new regExp("regexp","patternFlag")
where regexp is our expression and patter flag is a pattern modifier. (se w3schools for full reference).

2.- usign slashes: /myregexp/.
for setting pattern flags just use this syntax> /myregexp/patternflag
e.g. /\s/g

so lets go to the trim example:
we'll use the String replace method to replace a white space with a '' null character.

first we add new method to String.prototype so we can work on it as a native method of String.

String.prototype.trim = function(){

}

then, we start our replace method, as first parameter, leave it in blank, and as second parameter put simply '' and we set it as a return value:

String.prototype.trim = function(){
return this.replace("yet_to_be_defined",'');
}

the first parameter is our regular expression and the second one, the character we want to put instead of the character to be replaced.

to find a white space we use \s, to find white space at the beginning of the string, we use ^\s, to find all characters at the beginning of the string we use ^\s+.
same for the ending characters, but changing the position match character to $ :
\s+$

to check either beginning and ending white spaces, we use | (or) to select between options and the g pattern flag.

/^\s+|\s+$/g


if we don't use the g pattern flag, replace() would only make the match once, and, since we are specifying /^\s+ or \s+$ but not both, it will only trim or the beginning or ending white spaces (by default it selects the first option).

so we use g to specify a global search and find both matches.

so our final code looks like this:

String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g, '');
}

[.js] String.prototype.trim()

trim() is a very common and very useful function in almost every programming language. basically, it's used to trim or suppress all white spaces at the begging and the end of a given string. e.g: myString = " hello world "; myString.trim() returns: "hello world".

why is this so useful? well, there are many reasons, perhaps the most important is to ensure in the string, that a formal null value is actually a non formal null value. how so? imagine this:

myString = "": the value of myString is a formal null value due to it has no reference to any reserved space on memory.
myString = "hello world": the value of myString is 'hello world';
myString = " ": ??? the value is null?? or not null?;
well it obviously isn't null, due to the character " " is actually A CHARACTER.
but for real purposes, it does seems like a null value, since it has no relevant data. that is a non formal null value.

we use non formal null value in most of our forms: login, register, contact, etc. and we do need to ensure that a non formal null == a formal null.

so how to solve this:
1.- using a for or any kind of cycle to go trough the whole string and check for any white spaces, comparing at the end if whites paces==string length, if so, it means all characters are white spaces therefore its a non formal null.

2.- other way is to check if at least one character of the string is different of white space, else, it's a non formal null.

using any of this two methods isn't quite appropriate and will present a problem:
" hello world " is neither a non formal neither a formal null, how ever, we'll have problems handling this value in case of passwords (e.g. getting max length), or name searches or any sorting methods since it has white spaces at the beginning of the string.

so, trying to implement all methods to solve both problems will take us long time, effort and it'll result an unpractical solution.

so here goes the best solution for solving those problems: using trim(), by suppressing white spaces at the beginning and at the end, we solve both problems at once, e.g.:
myString = " "; myString.trim() returns null; (non formal null solved!)
myString = " hello world "; myString.trim() returns "hello world" (there are no white spaces that provoke future problems like sorting).

that is just great isn't? so go on and try it on any language or script! just type yourString.trim()!.

oh, wait, it just happened you're using javascript? guess what... it has no trim() function implemented on the String object!. sorry folks =(.

but hey, take off those long faces, there is a way to implement it yourself and that is using the prototype of String to add new methods. there are two ways to do this:
1.- using a for or any kind of cycle.
2.- using regular expressions.

I'll let yourself figure out the first one since is quite boring for me to do it =P.

and I'll post the second bellow since is the best and most optimum way and it takes just a simple line!.

String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g, '');
}

I'll make a detailed explanation of the code on my next post, so stay tuned.
mean wile enjoy it =P.

pikachu is alive!

this small specimen has been seen near the geek islands of japan!