Front End Mastery

2012-05-16T11:00:00.001-07:00

What does it equal?

2012-02-01T09:35:00.001-08:00

Equality operators are operators that compare two values to determine whether they are identical or different and return a boolean (true or false) depending on the result of the comparison. For equality comparison we have two operators in javascript one is Equals(==) operator and the other is Strict Equals(===) operator.

Equals Operator

The Equals operator is quite liberal that is the values may be considered equal even if their types are not same. Javascript features weak typing. This means that the equality operator coerces types of one or both operands into a single type (usually a number) to perform comparison. Below is the list of some interesting conditions and their results.

Condition	Result
“” == “0″	false
0 == “”	true
0 == “0″	true
false == “false”	false
false == “0″	true
false == undefined	false
false == null	false
null == undefined	true
” \t\r\n” == 0	true

Now lets see how ECMA defined == logic. Only thing is that undefined and null equal each other (and nothing else) and most other types get coerced to a number to facilitate comparison:

Type(x)	Type(y)	Result
null	undefined	true
undefined	null	true
Number	String	x == toNumber(y)
String	Number	toNumber(x) == y
Boolean	any	toNumber(x) == y
any	Boolean	x == toNumber(y)
String or Number	Object	x == toPrimitive(y)
Object	Sring or Number	toPrimitive(x) == y
Both are of same type		x === y (srict equals)
Otherwise		false

Where the result is an expression the algorithm is reapplied until the result is a boolean. toNumber() and toPrimitive() are internal methods which convert their arguments according to the following rules:

toNumber():

Argument Type	Result
undefined	NaN
Null	+0
Boolean	Result is 1 if argument is true Result is 0 if argument is false
String	Parses to number. For ex: ‘abc’ returns NaN ’123′ returns 123
Object	first primValue = toPrimitive(argument) then toNumber(primValue)

toPrimitive():

Argument Type	Result
Object	(in the case of equality operator coercion) if valueOf returns a primitive, return it. Otherwise if toString returns a primitive return it. Otherwise throw an error
otherwise	The result equals the input argument (no conversion).

Lets see a simple condition and how its value is deduced

Condition: “SomeString” == true

Step1: First boolean is converted into number using toNumber. So now the resultant condition would be

“SomeString” == 1

Step2: Next the String is converted to Number again using the toNumber. So the resultant condition would be

Nan == 1

Result: now the above conditio returns false

Strict Equals Operator (===)

The strict equality operator consists of three equal signs: ===. It works exactly like the normal equality operator, except that strict equality operator does not perform type coercion between its operands. Below is the list of some interesting conditions and their results.

Condition	Result
“” === “0″	false
0 === “”	false
0 === “0″	false
false === “false”	false
false === “0″	false
false === undefined	false
false === null	false
null === undefined	false
” \t\r\n” === 0	false

Lets see when to choose equals and StrictEquals operators

The strict equals operator is a lot clearer and allow early breakage of code(no coercion). This hardens code to a certain degree and also gives performance improvements in case the operands are of different types. But completely avoiding the equals operator is also not wise. For example consider the following conditions

Condition1: typeof variable1 === “function”

Condition2: typeof variable1 == “function”

Considering the above two conditions the condition2 is a better option. The reason being typeof returns a string, so the operation always compares two strings , hence it is completely coercion proof.

So when there is no chance for coercion then == operator can be used at its best performance. The decision should be taken wisely.

Get proper css based on YOUR markup

2012-01-31T07:41:00.001-08:00

http://bearcss.com/

Javascript RPG Game tutorial part 2

2011-11-02T14:18:00.000-07:00

Continued from Javascript RPG Game tutorial part 1

So, there is a Object type called 'Hero' and we made an instance called 'hero'. I sometimes call my Jetta 'Stupid Face'. My Jetta's name is 'Stupid Face'. Our hero's name is 'bill'. But what if you'd like to call your hero something like 'donut pants'? Easy enough!

Your overall code looks like (or should anyway):
<!DOCTYPE html>
<head>
<title>Dungon Game</title>
<script type="text/javascript">
var Hero = function(name,type){
this.my_name = 'bill';
this.my_type = type;
}

var hero = new Hero();

console.log(hero);
console.log(hero.my_name);
</script>
</head>
<body>

</body>
</html>

Lets change that to:
<!DOCTYPE html>
<head>
<title>Dungon Game</title>
<script type="text/javascript">
var Hero = function(name,type){
this.my_name = name;
this.my_type = type;
}

var hero = new Hero('donut pants');

console.log(hero);
console.log(hero.my_name);
</script>
</head>
<body>

</body>
</html>
Reload your web page and look at the firebug console!

You should see something like:

Object { my_name="donut pants"}
donut pants

Ok.. thats great! Now we can make as many 'instances' of heros that we want! so lets delete the part
that says:

var hero = new Hero('donut pants');

and replace it with:

var Thundar = new Hero('Thundar', 'the barbarian');
var Ariel = new Hero('Ariel', 'the sorceress');
var Ukla = new Hero('Ukla', 'the faithful companion');

Reload your page and tada! You have new entries in your firebug console!

You should see this:

Object { my_name="Thundarr", my_type="the barbarian"}
Object { my_name="Ariel", my_type="the sorceress"}
Object { my_name="Ookla", my_type="the mok"}

If you see this you're doing great. If not double check your code.

Ok, so what are we looking at here? We are looking at 3 instances of the Hero 'Object' or 'Class'.
They are all cut from the same plan, but they have different names and types.

Lets take a step back for a second though. There are plenty of things I haven't explained yet so
lets explain a couple.

Notice the 'var' before several lines of code? That is short for 'variable'. Basically what programming
essentially does is manipulate data and then display that data. In javascript our data are typically
'variables'. Variables can be different things. They can be numbers:

var hot_girls_in_class = 2;

They can be a 'String' of text:

var name_for_my_pos_car = 'Stupid Face';

They can be a list of things, also called an Array:

var todo_list = new Array('clean room', 'actually clean room', 'feed cat', 'watch tv');

... and as we've already seen it can be an 'Object'.

I started with objects because they are easy to understand if you don't over think them, and they
are harder to understand than all the other types. What might be confusing going forward is that
variables can also be functions.

But what is a function? Lets go back to the car metaphor.

All Jettas have some characteristics and operations.
For example Jettas have:
doors,
windows,
wheels,
sunroof,
bike rack,
windsheild,
gastank,
engine,
transmission,
etc...

those are characteristics that can vary from model to model.

Jettas can:
Accellerate,
Slow down,
Turn,
Turn On,
Turn Off,
Change gears,
Attract hot girls (ok maybe not)

What an object 'has' are properties. What an object "can do" is a 'function'. Later on you'll call them methods, but for now lets stick
with functions.

Javascript RPG Game tutorial.

2011-11-01T13:32:00.000-07:00

Make a game, Learn Javascript!

lets make a game using javascript. Here are the course requirements:
If you're on windows you need notepad++ (free software) and Firefox web browser with firebug extention.
If you're on mac you need textwrangler (free software) and Firefox web browser with firebug extention.
A basic understanding of pen and paper role playing games like Dungeons and Dragons (actually not that important).

You don't need anything fancy. You don't even need to know javascript. You just need a basic knowledge of
HTML/CSS and a willingness to follow along.

Ok, Let's Go!

We are going to make a dungon crawling game.
It will:

Have a dungon.
Work out battles for you.
Be navigatable (meaning you can move around in the dungon).

You can:
Be one of 4 character classes.
Attack monsters.
Find treasure.
Navigate the dungon.

Ok! Lets start with you! Type this as your basic HTML:

<!DOCTYPE html>
<head>
<title>Dungon Game</title>
<script type="text/javascript">

</script>
</head>
<body>

</body>
</html>

Easy enough! Thats the framework of our game! Wow that was easy :D

Now lets create a basic hero/character!
Change this:
<script type="text/javascript">

</script>

to this:
<script type="text/javascript">
var Hero = function(){};
</script>

GREAT! we now have a hero! Not much of one though because he doesn't do
anything at all and can't interact with the html at all. BOOOO! Bad hero! But lets talk about what
he is.

Our new javascript code "var Hero = function(){};" is an object! Well you can't actually touch him
but in the javascript programming world he is an object. He's actually a lot more, but what he is
and isn't really isn't that important right now. For now just know that he is going to be the
blueprint for any and all characters that the player controls, or the game controls as an NPC!
Lets spruce him up a bit shall we?

lets change var Hero = function(){};

to this:

var Hero = function(name,type){
this.my_name = name;
this.my_type = type;
}

Great! now our Hero can have a name and a type. In this context type is akin to class or profession
(eg. Warrior, or Wizard). But he still doesn't actually exist and we can't do anything with him.
What do I mean? well.. lets run a test. make your page look like this:

<!DOCTYPE html>
<head>
<title>Dungon Game</title>
<script type="text/javascript">
var Hero = function(name,type){
this.my_name = name;
this.my_type = type;
}

console.log(Hero);
console.log(Hero.my_name);
</script>
</head>
<body>

</body>
</html>

Notice the console.log stuff? That is so we can experiment with whats going on in the webpage and
see whats happening behind the scenes. So open up firebug by clicking the firebug button and then select the console tab... You are using firefox right? We can use other browsers and we'll make sure the game works in most if not all of them, but for development and learning firefox is the right browser to use.

Now open your document!

Notice how it says?
Function()
and on the next line:
undefined

That says that we have a function, but he doesn't have a name. Lets give him a name and see what happens.
Change this:

var my_name = name;

to:

var my_name = 'Bill';

and refresh your page.

Notice there is no change. That is because 'Hero' our object is also a function. And for a function to
work you have to 'call' it. Think of it like a car. For a car to work you have to turn its ignition.
For a function/object to work you have to call it.

so lets do that!

add this AFTER 'Hero' but before the console.log statements

var hero = new Hero();

and change your console.log statements to this:

console.log(hero);
console.log(hero.my_name);

now in firebug console we get this:
Object { my_name="bill"}
bill

Ok! Now we're cooking with gas. We have a hero "instance" of the Hero Object type. Now, when I say an
instance of an Object type I mean something like this:

There is a type of car called a Jetta. I have one. My Jetta is an 'instance' or the Object type 'Jetta'.
Does that make sense? I don't drive every Jetta out there, just the one I own.

Build Javascript with PHP

2011-03-29T09:31:00.001-07:00

http://www.jsclasses.org/blog/post/10-Developing-JavaScript-Applications-using-PHP-functions--Lately-in-JavaScript-podcast--Episode-5.html

ensure. loading js, html, and css only when you need it.

2011-03-25T14:12:00.001-07:00

http://ensure.codeplex.com/

lazy loading library genius

2011-03-24T10:06:00.001-07:00

Loads javascript, html and css on the fly. Brilliant.

http://ensure.codeplex.com/

Create web apps in JavaScript right from your browser

2011-03-22T20:22:00.000-07:00

Associative Array Flexibility.

2011-03-22T14:19:00.001-07:00

data and each in jquery

2011-03-17T16:53:00.000-07:00

//We can call it via:
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";

Data is good for preventing race conditions.

//Given this HTML Structure

Apple
Orange
Mango
Blueberry
Watermelon

//We can retrieve the value with:
$('li').each(function(index) {
alert(index + ': ' + $(this).text());
});

//Alternatively, loop through JSON
var data = "{ name: "John", lang: "JS" }";

$.each( data, function(k, v){
alert( "Key: " + k + ", Value: " + v );
});

jquery onscreen keyboard

2011-03-17T16:35:00.001-07:00

http://keith-wood.name/keypad.html

Identify fonts being used

2011-03-17T12:34:00.001-07:00

Have a font type you need to figure out but only have an image to identify it from?

Fantastic color web color palette tools

2011-03-17T11:53:00.000-07:00

Hope this works for you.

http://colorexplorer.com/

font comparer

2011-03-17T11:45:00.000-07:00

find some interesting font stuff:

Clean up your css

2011-03-17T11:40:00.001-07:00

Make it pretty

Cool jquery form validator

2011-03-17T11:36:00.001-07:00

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

Always useful centering layout with css

2011-03-17T10:49:00.000-07:00

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}

Does not work for IE5.5 and down, or IE6 in quirks mode.

Javascript binary howto.

2011-03-17T10:01:00.001-07:00

Here's the howto. Now if only I had a whyto.

http://bateru.com/news/2011/03/javascript-binary-operations-the-easy-way/

Execute and test php and javascript

2011-03-17T08:59:00.000-07:00

You can test your scripts outcome right on this page.

jQuery Plugin: CodeExplorer v0.1

2011-03-14T21:22:00.000-07:00

jQuery Plugin: CodeExplorer v0.1

Cool jQuery way to view file system.

Node.js explanation worth reading!

2011-03-14T09:19:00.001-07:00

Node.js is all the rage these days. Get a head start on the coming web dev revolution.

http://blog.carbonfive.com/2011/03/09/node-js-overview/

gradient css only no image cross browser buttons

2011-03-10T20:21:00.000-08:00

http://www.red-team-design.com/cross-browser-css-gradient-buttons

Figure out what font that is!

2011-03-08T21:47:00.001-08:00

Use this to figure out a font.

http://www.identifont.com/identify.html

Get your SEO work done super cheap on Fiverr

2011-03-08T13:09:00.001-08:00

Well.. get it done for 5$ LOL

http://www.fiverr.com/gigs/search?order=rating&query=seo