Closures again

Most of the JavaScript developer don’t even know what a JS closure is and that’s why Crockfrod is so angry. Yes, it’s true, most of the “developers” just copy and paste the code without even know how it works. OK, just in breve the closure is an anonymous function, which thus helps you define a pseudo namespace, as you may know that in a function everything is visible inside it and only there.

function myFunc() {
    var a = 10;
}

The code above makes the variable a to be visible only inside the function. But as you know there must be a function call to make “all this code work”.

myFunc();

However you can make an anonymous function – or a closure, where the function is with no name and is called once the code has been processed. The right syntax is like so:

(function() { var a = 10; })();

Why and how?

The question is: why and how that works? Why this syntax is correct?

Hint

A tiny hint is that you can make the following line working:

var myFunc = function(){ var a = 10; }();

Pay attention to this syntax and the assignment is what makes all this working.

direction:rtl

When developing a website for Arabic one of the most common questions is how to get it work with a reverse direction. Actually there is the CSS property direction:

.my-class {
    direction:rtl;
}

which makes the page right aligned.

Floating elements …

However sometimes there are elements on the page which are absolutely positioned and the direction property doesn’t do the job. The solution is something like combining the two settings. Both direction and float. So something like:

.my-class {
    float:left;
}

becomes something like:

.my-class {
    float:right;
    direction:rtl;
}

and of course if you’ve something like margin-left it should become margin-right!

H.264

Yes it may sound strange, but now with the upcoming HTML5 features every browser again is playing its own game. Firefox and Opera support only OGG Theora, Chrome and Safari only MP4 and what about IE .. it doesn’t support anything. Than why should we convert to mp4 with h.264 codec?

Because everybody is playing flash

And that’s again very sad but at least the flash players are playing mp4 with this encoding, which is good because this file will be playable under most of the mobiles. And if you have a large video site to support why don’t you convert to mp4 and play it with a Flash Player and give the opportunity to play mp4 on mobile.

Only one file under the sky

Thus you gain to keep only one file – playable under every device?

YouTube and FLV

Now I wonder why YouTube have both FLV and MP4 formats?

Of course if you’d like to be perfect …

Convert every video to MP4, FLV and OGG, but that means 3 files for every video?!

As Firefox has declared it will play only open formats within the HTML5 video tag support. But however is there any way to play video with the mp4 h.264 codec under FF with no plugin support?

That is the question.

JavaScript and inheritance

Almost for everybody the JavaScript way of implementing inheritance is odd. For a typical programmer it should look more C or Java like, but is not. However to give you a breve example, I’d like to make two objects, and to make the second one to inherit from the first. Thus I’d like to show how neither parent or child objects interact once they have been instanciated.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

	var parent = function() {};
	parent.prototype = {
		name : 'parent',
		m : 1,
		a : function() {
			console.log(this.name + ': ' + this.m);
		},
		setM : function( value ) {
			this.m = value;
		}
	};
 
	var child = function() {};
	child.prototype = new parent;
	child.prototype.name = 'child';
 
	var parentObj = new parent();
	var childObj = new child();
 
	parentObj.a();
	parentObj.setM(12);
 
	childObj.a();
	childObj.setM(3);
 
	parentObj.a();
	childObj.a();

However this describes the ability to make complex JavaScript inheritance patterns. The complete source’s here.