One common mistake that I see developers do is exposing a variable to the Global object in chain assignment.

first I let's see how can you expose a variable to the Global object by accident.

 
function test(){
a =12; // var is missing
return a;
}
test();
 

By missing the keyword var even though variable a is inside of the function but "a" will be exposed to the global object(Window Object).

now you would say I already know this and I will not miss the var keyword.

this is a common mistake that I've see programmers do and I've done it in the past.
javascript is not PHP or any other scripting language.

 
function test(){
  var x = y = 2;
}
 

Now in this case "x" is local variable, but "y" become a global variable.
this is because of right-to-left evaluation so when y = 2 there is no var to be set for it so it become a global variable.

to prevent of having such a design flaw. use var all the time.
the correct version would look like

 
function test(){
  var x,y;
  x = y = 2;
}
 

I have implemented a jQuery plugin that will take care of namespacing for us.
if you don't know what is namespace please read it from here

take a look at the code below. and see how it works. you can get the code from jsfiddle as well

     $.namespace("liteframe.actions.controller");
     //OR this way.
     $.namespace(["liteframe.actions.controller","cake.action.jump"]);
    //OR this way.
     $.namespace("liteframe.actions.controller","cake.action.jump");
 
   // now they are available to the us. 
 
  liteframe.actions.controller = function(){
    // some code here
  };
 
  cake.action.jump = function(){
    // some code here
  };

If you are trying to remove elements from an array. and do not care what those elements are, you shouldn't use array slice, array splice.
however there is an easier way of doing this.

by just changin the length of an array we can modify our array and remove items from it.

 
var arr = [1,2,3,4,5];
arr.length = 2;
console.log( arr ); //[1,2]; // we removed 3 items from our array.
 

let's now wrap it in a function
as you can see arrays are objects and objects are passed by reference.

 
function popItems(arr, length){
 return arr.length -= length;
}
var arr = [1,2,3,4,5];
popItems(arr, 2); 
console.log(arr ); // [1,2,3]
 

it is recommended to have all your functionalists encapsulated into objects so programmers could use them over and over.
so performance and speed are vital. I personally will use arr.length.

now one would say I still prefer to use array slice or spice or even using it for loop.

Array Slice Version

 
 
function popItems(arr, length){
 return arr.slice(0,-length);
}
var arr = [1,2,3,4,5];
arr = popItems(arr, 2);
console.log(arr ); // [1,2,3]
 

Array Splice Version

 
 
function popItems(arr, length){
 return arr.splice(0,arr.length-length);
}
var arr = [1,2,3,4,5];
arr = popItems(arr, 2);
console.log(arr ); // [1,2,3]
 

For Loop Version

 
 
function popItems(arr, length){
  for( var i =0; i<length; i++){ arr.pop(); }
  return arr;
}
var arr = [1,2,3,4,5];
arr = popItems(arr, 2);
console.log(arr ); // [1,2,3]
 

Even though it is not recommended to use Array constructor. but sometimes we can get some usage of it.
One good example would be repeating a string without using a for loop.

in this example we are creating an empty array with default undefined values.
( when you specify a size for an array, without setting the values in it, it will have undefined as a default value for all the indexes)

by joining the new array with our string we can repeat the string as many time as we want.
this is more efficient smaller and cleaner.

 
 
function repeatStr(str,count){
  return new Array(count+1).join(str);
}
 
var str = "MyString";
var repeatedStr = repeatStr(str,3); // returns MyStringMyStringMyString
 

I hope you found this article helpful

Sometimes some bad programmer or some hacker messes up with the undefined global variable in javascript.
so why would we really care about it.

the following are some examples that the variable undefined will be returned

 
 
var myVar = undefined; //Anything that has been set to the value of undefined.
 
function test(){}; console.log( test() ); // returns undefined - Implicit returns of functions due to missing return statements.
 
function test(){ return; }; console.log( test() ); // returns undefined - return statements which do not explicitly return anything.
 
function test(a,b){ console.log(a); }; test(); // returns undefined - Function parameters which do not had any explicit value passed.
 
var obj = { a: 'test' }; console.log(obj.b); // returns undefined - Lookups of non-existent properties.
 

the undefined variable has a copy of the actual value of undefined, but if someone overwrite the value of undefined variable, that might be insecure for our code.
so how could we get around this.

the answer is: Putting our code in a self-Invoking function.

 
var undefined = "new Value";
(function(input1, input2, undefined) {
console.log(undefined); // returns undifined
})(1,2);
 

this might be a neat trick if you check jQuery source code. they are also using it.

I see a lot of confusion among the javascript developers when it comes to casting in javascript.

Casting To A Number

let's say you have a String and you want to convert it to a Number. one would say I will use parseInt() or parseFloat().

but there is even an easier way of doing it. no need to be worried if it is an Integer or Float.

Yeah, it's possible to cast to a number by using the unary plus operator

+'20' === 20; // returns true
 
var str = "20";
var num = +str; // returns 20
 
str = "20.3";
num = +str // returns 20.3

Casting To A String

to cast a number to a string there is a tricky way of doing it.

'' + 60 === '60'; // returns true
 
var myInt = 60;
var myStr = myInt + ''; // returns "60"

Casting To A Boolean

you can cast to boolean by using the not operator twice !!.
I see mostly people using this in their return statements. instead of doing if else. they use !!.

 
!!null === !!NaN === !!undefined === !!'' === !!0 === false
!!"Any String" === !!"2" === !!"0" === true
 

I hope you found this tutorial useful.

As you guys all know, w3c has released a new logo for HTML5
which is really cool they even have made T-Shirts with HTML5 logo on it.

So I was thinking to myself, what's the coolest thing that I can to promote HTML5 LOGO .

Yeaaah, HTLM5 Logo With CANVAS No Need for any Image .

check out the Demo , make sure your browser supports Canvas.

canvas is supported by the current versions of Mozilla Firefox, Google Chrome, Safari, and Opera

javascript is a scripting programming language that also supports Object Oriented Programming by its Prototypical Inheritance nature which is build in to the language.

most of the programmers in the world are used to Classical Object Oriented paradigm, and when they first start to do OO with javascript they will have a hard time.
Today what we except from Object Oriented are "Encapsulation", "Inheritance","Polymorphism","Modularity" . all these features are supported in Javscript Through prototypical Inheritance.

John Resig the creator of jquery has posted a nice article about javascript inheritance that is based ba Classical Object Oriented Pattern.

Today I'm introducing a new pattern that models Classical Object Oriented in javascript which is based on jQuery .

with this new architect we can easily encapsulate our code into reusable objects which are also inheritable.

Let's Get Started

1. Include jQuery Library in your head tag ( our code is based on jQuery ).
2. Create Our Class or Blueprint
3. make a new instance of your Object through $.makeclass plugin.

How to Code our Class or Blueprint
the blueprint or class structure is Modeled by a Object Literal in javascript.
if we consider few things that I will go more in detail that would help you easily understand how it works.

• List of all reserved keywords : "Initialize", "Public", "Private", "Extend","Static"
• Initialize : basically once you create a new instance of your object this method is invoked . we didn't chose to use "constructor" cause it was a reserved word in javascript.
• Public: all public functions and variables in your class goes inside of this Public Object.
• Private: all private functions and variables in your class goes inside of this Private Object.
• Static: all Static functions and variables that is only access by the Class name it also goes in the Static Object
• For Accessing Private variables and functions through Public functions just consider private as a first argument in your function then your welcome to do any changes.

Here is a sample on how we Implement our Blueprint or Class.

 
   var Employee = {
 
        Initialize: function( private, name, salary ){
          private.name = name;
          private.salary = salary;
        },
        Private:{
            name: null,
            salary: null
        },
        Public:{
            getSalary: function(private){
                return private.salary;
            },
            getName: function(private){
                return private.name;
            },
            raiseSalary: function(private, byPercent){
                var raise = private.salary * byPercent / 100;
                private.salary += raise;
            }
        }
 
    };

here is a sample class that shows how you can access to public and private and static fields

 
 var SampleClass = {
        Initialize: function( private ){
 
        },
        Private:{
            getPrivateVar: function(){
                return this.privateVar;
            },
            privateVar: "private var "
        },
        Static:{
            staticVar: "staticVariable"
        },
        Public:{
 
            getPublicVar: function(){
 
                return this.publicVar;
            },
            publicVar: "test Public Var ",
 
            getPrivateFunc: function(private){
                return private.getPrivateVar();
            }
 
        }
 
    };
 

So What About Inheritance

so in this case we have to consider the following three tips

1. use the keyword Extends for extending your parent class
2. passing private as a first variable in the Initialize function.
3. if you want to have access to the super class and trigger some functions in it basically you can use "this.parent" object in any function

Here is a sample on how we implement Our Inheritance

    var Manager = {
        Extends: Employee,
        Initialize: function( private, name, salary){
          this.parent.Initialize( name, salary );
          private.bonus = 0;
        },
        Private:{
            bonus: null
        },
        Public:{
            getSalary: function( private ){
              var baseSalary = this.parent.getSalary();
              return baseSalary + private.bonus;
            },
            setBonus: function( private, bonus ){
                private.bonus =  bonus;
            }
        }
    };

How we Instantiate it ?

Basically we have 2 steps

• Step1: $.makeclass does all the magic for you
• Step2: pass the CLASS definition as a first parameter and if you have some fields to be sent to the constructor just pass them after the class definition as an input

Here is a sample

 
$.makeclass(Employee ,"Bob miller", 50000 ); 
 

To get jQuery MakeClass Plugin :

I have also shared this project in JS Fiddle and below you can see a Demo of it :

Having an optimize website followed by w3c standards has to be a primary goal for any front-end Developer.
As we all know new browsers support CSS3 and HTML5 partially. it's really a good idea to master CSS3 and use it on our day to day coding life.

Learning css3 avoids us using most of unnecessary javascript and jQuery codes we write. for example round corder or box shadows are supported by css3 and most of the modern browsers support them so why would we use jQuery... ?!!!

Some Developers would say css3 is not supported in all browsers specially IE6 and once all browsers support it we will adapt ourselves with the new language, my Answer to those people is if you really care about your users you have to consider the majority of your users ( almost 80% ) on the net are using modern browsers to check e-mails or play Partypoker so its a good idea using CSS3, HTML5 and for those remaining 20% if you really really care you can have them either not see the feature or you can just use other techniques such as javascript.
moreover some remarkable and well-known companies such as GOOGLE and APPLE also supports web developers switching to CSS3, HTML5. thanks to them and all other folks that contributed on it.

Today I'm going to introduce a CSS3 Online Tool which might going to consider using it.

For the past 3 month,our Team has been working on a new project called CSS3 Designer.

Our main goal is to improve web developers and designers general knowledge on CSS3 and HTML5.

Creating a flawless and perfect world on the web for all code lovers is what we want

How we Developed Css3designer?

• Using LiteFramePHP in our backend which is a PHP framework that we Developed on our own
• It's 100% HTML5
• Using CSS3 techniques extensively, we also follow our own css blueprint
• jQuery is our main javascript library
• Advanced techniques in photoshop

Css3designer provides

• Advanced CSS3 and HTML5 tutorials
• Flexible Online CSS3 ,HTML5 Developer Tools
• and Important tips on how to design and develop you website in an efficient way.
• Developing reliable jQuery Plugins that dynamically uses CSS3
• Online Training on how Develop website with Css3 , HTML5 , jQuery
• SEO by using HTML5 in a right way
• how to work with Photoshop to create a faster and more reliable webpages
• Better world for Web Designers and Developers

Check here CSS3 Designer officaial website

and start using our site right now.
Enjoy it.