I know this is really for beginners, but have you ever asked yourself what are the differences between == and === when comparing in JavaScript, and when to use it? Here’s an example:

var a = false;
alert(a === 0); // prints false

That’s false. Even when both the zero and the variable are faulty the entire operation is false. Because the 0 is a number and the variable a is boolean, therefore their different types give us the answer. If there was a comparision only with == the result would be true:

var a = false;
alert(a == 0); // prints true

It’s good when you expect some variable to match certain type to compare with ===. So the correct code is:

var a = false;
alert(a === false); // prints true

Here the type of a compares with boolean. See the complete demo.

Related posts:

1. Flex Javascript communcation example
2. How to detect a variable existence in JavaScript?
3. JavaScript closures in brief

The way OpenLayers puts markers on the stage is fine when they are not so much, but once you need more than 100, the library’s solution is not good. The question is is there a way to put all the markers faster than the built in method.

Yes, There is a Way to Speed Up Markers Load

I once wrote about how to speed up markers on OpenLayers, it is clear that my decision was to concatenate the DOM elements like a string after I’ve generated all the markers as markup with innerHTML as it’s faster than appendChild. The only question left is how to convert Longitude/Latitude pair in pixels.

The Answer’s Given by OpenLayers

There is a method called getLayerPxFromLonLat() which do the job. Let me show you a snippet:

ll = map.getLayerPxFromLonLat(new OpenLayers.LonLat(lon,lat));
console.log(ll);

You can see what’s inside the ll object. You can now reference the pixel as ll.y and ll.x.

Related posts:

1. OpenLayers extreme optimization. Cut, compress and deploy!
2. Optimizing OpenLayers. Speed up markers load time!
3. Optimizing OpenLayers. Make it smaller and faster!

It isn’t strange that the internet is becoming more and more mobile. When it matters to news sites I think most of the mobile versions are better than the “desktop” versions of the site. Take a look at Huffingtonpost.com or LeMonde.fr.

Mobile Ads

The first thing that makes impression when comparing both mobile and desktop versions of a site is the layout. Of course the lack of ads on the mobile version, or if not the absolute lack at least the small number of appearing ads, seems to be quite pleasant.

The thing is that as the web grow and as the web 2.0 is becoming a reality most of us will prefer to use it on a mobile device, just because it’s

1. easier to use
2. easier to find
3. easier to follow

Here’s a nice example of what mobile phones are now.

Now lets take a look on how the mobile web will grow in the near future.

That graphics describe quite well what will happen in the upcoming years. Is there now a question: should I make a mobile version of my site?

Related posts:

1. Stop Coding iPhone Apps, Begin with HTML5 Mobile Sites
2. PHP: detecting mobile device
3. Change the Viewport, be Ready for the iPhone!

Do as Twitter did … or you’d be looking at http://m.digg.com – that’s the right way.

Related posts:

1. Change the Viewport, be Ready for the iPhone!
2. Mobile Internet Users are Getting More Important
3. PHP: detecting mobile device

You know you can manage to redraw an element with single browser reflow. Instead of using .style.property … you can simply add all CSS properties you’d like to change with simply appending to style.cssText property.

var csstxt = $('#selector').css('cssText') + ';top:100;left:100;border:1px solid red;color:#f00;';
$('#selector').css('cssText', csstxt);

That code is a replacement for

$('#selector').css({
   left : '100px',
   top : '100px',
   border : '1px solid red',
   color : '#f00'
});

enjoy!

Related posts:

1. cssText and how it can be very very useful
2. jQuery CSS selectors. Change one or more CSS properties!
3. CSS Priority: The Difference Between a.my-class and .my-class

That’s the question! Crockford says it is not, but let see the experiment.

var a, b;
console.log(typeof a);
console.log(a === b);

the answer is – it is.

Related posts:

1. javascript: what is typeof typeof
2. JavaScript closures in brief
3. jQuery localStorage plugin (alpha)

Zend Framework gives you the possibility to interact with Gdata services, which are provided by most of the Goolge services. You can find more on the docs page of Zend_Gdata. The basic principle is that you can connect a service with you API key, given by Google. What I’m about to show you is how do connect such a service.

In theory Zend_Gdata depends on Zend_Http_Client and you’ve to connect it with an instance of this class.

// 1. setup API key
$apiKey = 'your_api_key_here';
 
// 2. retrieve videos via GData Atom
$client = new Zend_Http_Client();
$gdata = new Zend_Gdata_YouTube(null, 'my-app', null, $apiKey);

Note that you’ve to replace your API key in the chunk above.

Now once that you’ve connected the YouTube service you can iterate through the entries from the video feed.

$videoFeed = $gdata->getUserUploads('username');
foreach ($videoFeed as $entry) {
    echo $entry->getTitle();
}

The thing is that you can modify a bit the code above. As ZF docs says if you don’t setup a Zend_Http_Client a default with default configuration, so you can omit this and simple write:

// 1. setup API key
$apiKey = 'your_api_key_here';
 
// 2. retrieve videos via GData Atom
$gdata = new Zend_Gdata_YouTube(null, 'my-app', null, $apiKey);

Related posts:

1. Force Zend Casting and Help the IDE Autocompletion
2. YouTube and Vimeo goes HTML5 with video tag usage! Catch them up!
3. Cool tutorial about Zend_Paginator

One of my favorite things in IDEs, in my case Eclipse for Mac, is that they offer you the option of autocompletion. No developer knows the entire set of functions of the language he uses, neither the set of parameters of them. That’s why IDEs come to help.

In many cases when casting is not obvious and method call chain is to large your IDE may refuse to help you with this brilliant functionality. To be more precise let me give you an example.

In Zend Framework I was trying to fetch a RSS via Gdata interface. Something like that:

$videoFeed = $gdata->getUserUploads('youtube_username');
foreach ($videoFeed as $entry) {
    // do something
}

The problem is that whenever I try to do $entry-> in the body of the foreach loop I don’t see what methods are supported by the Zend_Gdata_YouTube_VideoEntry class. So I tried to force the casting of $entry to this class definition and it worked like a charm for me. The thing I’ve done was to add a definition of $entry before the loop body:

$videoFeed = $gdata->getUserUploads('youtube_username');
$entry = new Zend_Gdata_YouTube_VideoEntry();
foreach  ($videoFeed as $entry) {
    // do something
}

Than whenever you try to type $entry-> you’d receive a list of methods from the class definition of Zend_Gdata_YouTube_VideoEntry.

Thanks to Roy Ganor there’s a more elegant way to do this, simply by adding @var comment:

/* @var $entry Zend_Gdata_YouTube_VideoEntry */

Related posts:

1. Retrieving YouTube Channel’s Videos with Zend_Gdata_YouTube
2. Firebug’s console.time() accuracy
3. Zend Framework – Disable Zend Layout

continuing from the previous post let assume there’s the following code:

if ( thisIsTrue ) {
   if ( myFuncReturnsTrue() ) {
      printMe('success');
   } else {
      printMe('error');
   }
}

This can be easily ported to:

thisIsTrue && (myFuncReturnsTrue() ? printMe('success') : printMe('error'));

Source

You can see the demo source here. Here’s a snippet:

function func1() {
	alert('func1');	
}
function func2() {
	alert('func2');	
}
 
var a = true;
var b = false;
 
a && (b ? func1() : func2());

Related posts:

1. JavaScript Snippets: IF Statements Optimization
2. JavaScript optimization. Optimizing IF statements.
3. JavaScript Comparision Snippet

As most of the desktop software gives us opportunity to choose from typical or custom installations, let me write what’s a typical IF conditional statement in JavaScript and … every other programing language.

if ( thisIsTrue ) {
    printMe("some message");
}

A “Custom Installation” …

The first thing you can improve from the code above is removing the brackets.

if ( thisIsTrue )
    printMe("someMessage");

Because in JavaScript everything’s on the client – every symbol matters. What if we remove as much as we can!

thisIsTrue && printMe("someMessage");

Related posts:

1. JavaScript Snippets: IF Statements Optimization Part 2
2. JavaScript optimization. Optimizing IF statements.
3. PHP if-else-endif Statements