Benefits of getBoundingClientRect

John Resig talks about this nice useful-in-real-world method.

A clean javascript foreach loop

Here's a somewhat unusual way to write a foreach loop, using the old plain vanilla for statement:

var items = ["Apple", "Banana", "Strawberry"];
for (var item, i = 0; item = items[i]; i++) {
  console.log(item);
}

There are three advantages for using this syntax over calling Array.forEach() or whatever other library foreach implementation:

1. There's no function call overhead. I've already talked about this here
2. You can use break and continue statements:

   var items = ["Apple", "Banana", "Dice", "Strawberry"];
   for (var item, i = 0; item = items[i]; i++) {
     if (item == "Dice") continue;//no dice!
     console.log(item);
   }
   

3. You have full control over the iterator cursor:

   var items = ["John", "Apple", "Mary", "Banana", "Jane", "Strawberry"];
   //for every second item, starting from the second item
   for (var item, i = 1; item = items[i]; i += 2) {
     console.log(item);
   }
   

One word of caution though: the "item" variable I declared is still in scope after the loop terminates, unlike a foreach loop that calls a function.

Background images not showing in IE6

The scenario: You're trying to change the background of the element by clicking on it. You write some quick code:

/*css*/
#my-element { background:url(expanded.gif) no-repeat; height:10px; width:10px; }
#my-element.collapsed { background-image:url(collapsed.gif); }

//js, using Ext
Ext.onReady(function() {
  var e = document.getElementById("my-element");
  e.on("click", function() {
    e.toggleClass("collapsed");
  });
});

The problem: IE6 makes the background image disappear when you click on the element. What gives?

Solutions: There are several ways to fix this problem:

1. Use sprites. Instead of having two separate images, create a single image that combines both, and then set the background-position via the class name.

2. Add the second background image to the parent element. This isn't ideal, but if for whatever reason you can't have sprites, the second background will show if the background in your element fails to render. The key here is that the second background must be hidden behind the initial background of your element.

3. And the crazy hack I found today. In case you haven't seen the pattern, only images that are computed as a style parameter on page load will work properly.

   So if you can't use sprites and you can't use your parent element as a fallback, you can simply apply the background to anything that gets its styles computed on page load. Yes, that means you can do stuff like this:

   html {background:url(cacheme1.gif) no-repeat -5000px;}
   meta {background:url(cacheme2.gif) no-repeat -5000px;}
   script {background:url(cacheme3.gif) no-repeat -5000px;}
   

Google released a youtube API

Neat.

Intel awarded patent on cosmic ray detection technology

It seems real programmers will have to find a new way to program.

Googlism

Funny, but it's good food for thought. And hatemail.

Why is IE8 not passing acid 2??!1

Seems some people are having problems with IE8 beta not passing acid2. What impressed me was how quickly the IE team addressed this concern in their blog and the depth they went into to explain it.

Communication is good :)

IE8 readyness toolkit

Some really impressive stuff going on with IE8. Twas about time.

NIN sells out $300 deluxe edition in two days

Exploitation of the Law of Supply and Demand at its finest.

Equal distance columns in css

Neat.