Tag Archives: C

JavaScript Objects Coding Style

javascript, micro tutorial, PHP, web development, , , , , , , , , , , ,

JavaScript vs. PHP

Continuing from my post about PHP arrays coding style and following the comments of that post, I’d like to write a bit about JavaScript objects’ coding style.

You perhaps know that the term object is quite undefined or under estimated in the JavaScript world, but I’d speak about the key/value pairs in JS commonly formatted like that:

var obj = { key : 'value' }

Here you can add more and more key/value pairs, but what’s different from the PHP associative arrays and what’s the same and should be cosidered.

The Same as PHP?

I wrote about the alignment in PHP and hashes. Than I showed how I align them:

$arr = array(
   'short'   => 'val',
   'longkey' => 'val'
);

In JavaScript you should use the same technique of alignment:

var obj = {
   'short'   : 'val',
   'longkey' : 'val'
};

Some Differences

Yes, there are more differences, which is normal. First of all you don’t have the => notation in JavaScript and a : is used. Second and most important you cannot add a trailing comma after the last key/value pair. Note that in PHP that’s fine!

// that will throw an error in MSIE
var obj = {
   'short'   : 'val',
   'longkey' : 'val',
};

while this is OK in PHP and it’s encouraged:

$arr = array(
   'short'   => 'val',
   'longkey' => 'val',
);

PHP Associative Arrays Coding Style

micro tutorial, PHP, , , , , , , , , , , , , ,

No PHP programmer writes code without arrays. Sound strange, but as many programmers there are, as many ways to format the array notation there are.

My advice is to rely on a defined standard. I personally use the Zend Framework’s coding style.

So how to format the code? The first way is on the same line:

$myArray = array('key1' => 'value1',
		 'key2' => 'value2');

And the other, perhaps more clear way is to place the associative pairs on a new line:

$myArray = array(
	'key1' => 'value1',
	'key2' => 'value2',
);

Note that in the second example there’s a comma after the second pair. This is correct PHP syntax and is strongly encouraged!

It’s up to you which way to take. However it mainly depends on the case, but please use standards.

HTML Tag Semantics. STRONG vs. B!

web development, , , , , , , , , , , ,

Do You Use LABEL?

Have you ever mentioned the existence of the LABEL tag? Have you ever used it? I guess the majority of us don’t. Let’s take a look of the following chunk of code:

<label>username:</label> <input type="text" name="username" />

It looks familiar to every web developer, but the most common usage in web forms is:

<div>username:</div>

or

<span>username:</span>

How Looks a LABEL Tag?

In fact if you use LABEL for the form instead of DIV or SPAN you’ll get the exactly same result as layout, beside that most common usage is a DIV or SPAN in place of the forgotten LABEL?! Why is that?

html tags. Label vs Span
Can you see the difference between LABEL and SPAN?

For me the usage of DIV has become critically enormous. It may sound strange that there is a debate about the usage of one or another HTML tag, but don’t you think every little text label in a web project is surrounded by a DIV. Actually that makes clear that if you’d like to be semantically correct, than you should use LABEL.

The funny thing is that almost every project is loading its labels in a PHP array or object or whatever and there they are called “Labels”, but when it comes to HTML they are put into a DIVs.

Why Semantics Matters?

In fact this is important because this is really good for web robots. If this is not important for the human eye it is for a machine “eye”. That’s why there are two tags for bold text.

STRONG vs. B

You can see that most of the browsers display both tags exactly the same by default.

Bold vs Strong HTML tags

Why’s that? Because STRONG is semantically more important than <B>.

So if you want to make a text simply looking bold, wrap it in <B>, but if you want to make it important both for the human eye and for the machines, than use STRONG.

Source: complete demo.

What make JavaScript closures work?

javascript, micro tutorial, , , , , , , , , , ,

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.

Google Closure Compiler doesn’t work?!

web development, , , , , , , , , , , , ,

What are these strange java errors?

No, it works but maybe the problem is you current Java version. The Google Closure Compiler requires 1.6 and most commonly you’re runing on 1.5 therefore it produces errors. It was my problem when I tried to run the application. At that moment it produced these lines of errors:

java -jar compiler.jar --help

Exception in thread “main” java.lang.UnsupportedClassVersionError: Bad version number in .class file
at java.lang.ClassLoader.defineClass1(Native Method)
at java.lang.ClassLoader.defineClass(ClassLoader.java:676)
at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:124)
at java.net.URLClassLoader.defineClass(URLClassLoader.java:260)
at java.net.URLClassLoader.access$100(URLClassLoader.java:56)
at java.net.URLClassLoader$1.run(URLClassLoader.java:195)
at java.security.AccessController.doPrivileged(Native Method)
at java.net.URLClassLoader.findClass(URLClassLoader.java:188)
at java.lang.ClassLoader.loadClass(ClassLoader.java:317)
at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:280)
at java.lang.ClassLoader.loadClass(ClassLoader.java:252)
at java.lang.ClassLoader.loadClassInternal(ClassLoader.java:375)

Just update or switch your current Java version to 1.6 and everything will be fine!