Best Javascript Debugger

While in production the best javascript debugger is the line of code below.

window.onerror = function(error,file,line){alert(error+'\n'+file+'\n'+line);}

Add it to the beginning of your script and the error will be alerted. The alert will have the error, file name and what line the error occurred on. Make sure to remove it once out of production mode.

Example: Small Javascript library

In jQuery you can call a function like $.ajax() and insert an object inside of it and each property does an action. Below I have simplified an example to demonstrate how this works.

    //create the library 
    var lib = {
        sum: function(num){     //create a method
            var num1 = num.a;   
            var num2 = num.b;
            this.result = num1 + num2; 
        },
        table: 'table'      //this is a random property, its not necessary 
    }
    
    //call a method and create an object inside of it to send data to the library
    lib.sum({ 
        a : 1,  //these are the properties that will be processed
        b : 4
    });
    alert(lib.result); //output 5
    
    
    
    //above is similar to the jQuery AJAX below
     $("#input").keyup(function(){  
        var data = $('#input').val();  
        $.ajax({  
            url:"models/post.php",  //these are the properties that will be processed
            type: "post",  
            data: ({name:data, age:'15'}),  
            success:function(result){$(".result").html(result);}  
        });  
    });  

jQuery Deconstructed is a rather nice way to look through the source. You will learn alot by studying it.

Quote: Discipline is the Bridge

“Discipline is the bridge between goals and accomplishment.” -Jim Rohn

Tip: Multiple class per element

Below is an example on how to use multiple classes per element. I needed it when I used the 960.gs grid framework.

<style>
.blue {
    color: blue; /*makes the font blue*/
}
.underline{
    text-decoration:underline;
} 
</style>

<div class="grid_12 blue underline">Make me blue and underline using three different classes</div>

The space separates the two classes. KISS

many classes

Internet is like a Candy Store, Open Source is its Candy

The internet is like a candy store and the candy is free. They're many free stuff online but what makes me excited is the open source, this is high quality free. It may be hard for someone who doesn't program to understand what I'm talking about. I feel spoiled when I run across an open source software. Seriously, these are unequivocally amazing. From programing languages such as PHP, Python and javascript, to libraries like jQuery and jqPlot to applications such as piwik, to software like blender, to frameworks like CodeIgniter, to operating systems like Ubuntu linux, mail transfer agent like Postfix and the list goes on. There's so many its hard to use them all. Here is a list of high quality open source projects per category.

Web Charts - PHP and Javascript

pChart.net and jqPlot.com are two different libraries that allow you as a web developer create beautiful charts and graphs.

jqPlot is a javascript library that uses jQuery. jqPlot is great because it can pull data directly from multiple mediums such as csv, txt, json and so on. However it sucks because different charts may need different plugin files and you need to make sure the right script is included, but its still simple.

pChart is a PHP libray that uses its GD library. You may need to configure your php depending if this library is installed or not. pChart is a object oriented class that creates an image of a chart on the webpage. The webpage becomes an image which will not let you output any html. The only way you can link to the chart is by using <img> or <iframe> tag. Whats great is that you can create an image that can be save but what sucks is that you may not be able to use AJAX and it takes a huge load on your CPU.

Milestone: 100th Post

Since March 28th I been at it consistently. There were days I didn't want to post and days I couldn't wait to post. Posted some great content and not so great. I have learned and improved skills because I decided to take a couple of minutes, 3 days a week to put what was in my head and expose it to the world.

Stats:
start date - March 28, 2011
Number of Days - 203
Post - 100
Most Popular Post - How to get the microphone to work, Ubuntu 11.04
Total views - 1,275
average views per day - 6.28

Example: JSON

WARNING!! Do not test it in Chrome it will not work. Only live.

JSON: is used for data storage and can be an alternative to XML.

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>
window.onerror = function(a,b,c){alert(a+b+c);} //if error alert
$(document).ready(function(){
     //Short hand
    $('button').click(function(){
        $.getJSON("info.js", function(json) {    
           alert(json.name[1].first) 
        });
    
    //Long
        $.ajax({
        async: false,
        url: 'info.js',
        dataType:'json',
        success: function(json) {
            ret = json.name[1].first;
        }
    });
    });
});
</script>

<p>hello</p>
<button>Click Me</button>

JSON (info.js) - everything must have double quotes except numbers. You cannot comment in JSON. It has to look like the example below and it has to be in object/brackets {}

{
"name" : [{"first" : "Britney", "last":"Spears"}, 
          {"first" : "Angelina", "last":"Jolie"}],
"age" : 25
}

Quote: Mother of Invetions

Necessity is the mother of invention. -Plato

We always end up creating what we need, go fill that need. Even Plato knew that hundred of years ago.

Watch and Transfer videos to PS3 using a Flash Drive or Hard Drive

Do you want to watch videos on you Play Station 3? Do you want to transfer movies from computer to PlayStation 3? Below are the instructions using a flash drive/hard drive

Make sure the flash drive or hard drive is formatted to FAT32. Create a folder inside the flash drive / hard drive named VIDEO (must be all caps). Put your videos inside this folder (h264, AVI...).

In PS3:
Navigate to the video. Select the flash drive or hard drive then select the video.

Javascript Object Inheritance - Extend and Multiple

These two javascript functions does the inheritance

//inheritance
function extendCopy(obj){
    var n = {};
    for(var i in obj){
        n[i] = obj[i];
    }
    n.uber = obj;
    return n;
}

//multiple inheritance
function multi(){
    var n={}, stuff, j=0, len = arguments.length;
    for(j=0;j<len;j++){
        stuff = arguments[j];
        for(var i in stuff){
            n[i] = stuff[i]; 
        }
    }
    return n;
}

Below test the object to see if it worked

//Setting objections
var first_obj = {name:'first', doSomething: function(){alert(2+2);}}
var second_obj = {date:'today', location: 'USA'}
var third_obj = {felling:'happiness', status: 'fun'}
http://www.blogger.com/img/blank.gif
//append/inheritance first first_obj to second_obj
var second_obj = extendCopy(first_obj);
document.write(second_obj.name); // first

//add both the first_obj and third_obj at the same time
var fourth_obj = multi(first_obj,third_obj);
document.write(fourth_obj.felling);// happiness

Another example of javascript inheritance using constructors

Quote: How to Fail

Failure is not a single, cataclysmic event. You don't fail overnight. Instead, failure is a few errors in judgement, repeated every day. -Jim Rohn

Javascript String Manupulation Examples

Below are javascript functions to manipulate the URL and most common used string manipulators.

<script>
var content = encodeURI(window.location);
document.write(content + '<br >');

document.write(content.charAt(0) + '<br />'); //returns the character at the number position http://www.blogger.com/img/blank.gif
document.write(content.length + '<br />');  //string length
document.write(content.indexOf('a') + '<br />'); //position of first occurence 
document.write(content.lastIndexOf('a') + '<br />'); //positions of last occurence
document.write(content.substring(5,10) + '<br />'); //substring(start,end)
document.write(content.substr(2,3) + '<br />'); // substr(start, length from start)
// Try not to confuse substr and substring the completely different

</script>

Additional JavaScript String Objects

Decrypt and Encrypt in MySQL example

If you need to put encrypted data (eg.credit cards) into MySQL database. Below are examples on how to encrypt and decrypt your data. We don't use the password function because once encrypted it cannot be decrypted.

Make sure the data field accepts special charaters like char() not varchar()

Encrypt:

INSERT INTO tableName (fieldName)
VALUES (AES_ENCRYPT('dataGoesHere','ThePasswordGoesHere'));

Decrypt:

SELECT aes_decrypt(fieldName,'ThePasswordGoesHere') 
FROM tableName;