A JavaScript puzzler (2)

I got this one from Scott, who ran into this problem with his amazing SoundManager library.

The puzzler

What’s wrong with this code:

soundManager.sounds = [];
soundManager.createSound = function(soundID) {
  this.sounds[soundID] = new Sound(...);
}

// (user's stuff):
soundManager.createSound('join');

Try to figure this one out on your own before continuing!!!

The problem

The problem isn’t with the scope of the createSound() function as many people first think, but rather with the associative array sounds and using the key ‘join’.

When you’re saying sounds[‘join’] = ‘foobar’, you’re effectively trying to modify the Array’s built-in join() method. And while not all browsers throw an exception (Firefox 3 doesn’t), it’s bad practice!

The solution

Simply define the sounds variable as sounds = new Object() or sounds = {} when the need for an associative array arises and you’ll be all set. The Array class in JavaScript is an object with extra methods and functionality (like: sort(), join(), etc). Don’t risk of conflicting with those names by using an Array in these situations.

Enjoy quizzing your potential hires during the next interview!

Join the conversation ›

iPhone 3G thoughts (4)

Doorstop v.1

Initial reaction

I couldn’t believe it! Have I finally figured out a way to stop the bedroom door from slamming closed?

I could potentially have one of the coolest and most expensive doorstops in the world!

And then the reality set in

iPhone - Zing!

Personally, even though it’s only $199, I simply cannot justify dumping my perfect 1st generation iPhone.

Third generation…

… is going to be a huge hit and a big upgrade. Until then, I’m perfectly happy.

John Gruber said it best:

Today’s message is pretty simple: Apple is going for iPhone market share in a big, big, way.

No front-facing camera. No video from the rear camera. Instead of building a better $400 iPhone, they worked on halving the price of last year’s phone.

’nuff said

Join the conversation ›

Progressive Enhancement vs. Graceful Degradation (1)

Here’s my quick view on the two strategies:

In the words of Agent Jay:

Old and busted: pages and technologies that work for older browsers

New hotness: think AJAX

Both strategies have the same end goal: provide support for the widest variety of user agents, but have opposite approaches of doing so.

More reading

This is a quick high level overview, so read below for more information and examples:

Join the conversation ›

Javascript performance tips (0)

Scope chain pain

If you’re like me and use a lot of framework singletons, such as the popular YAHOO.util.Dom, there’s something you can do so speed things up.

Every time you use a global variable, the browser has to work its way up the scope chain until it reaches the global scope. By giving all those pesky global vars a local reference, you can significantly lower the time it takes to find that variable.

Remember, JavaScript code is executed on the end-user’s computer, so writing efficient code should always be the #1 priority. Here’s an example with using YUI core components which are accessed frequently:

(function() {
  
var lang     = YAHOO.lang,
    dom      = YAHOO.util.Dom,
    event    = YAHOO.util.Event;
  
var newObject = function() {
  // 'lang' is much faster to lookup than 'YAHOO.lang' and so on...
  alert(lang.JSON.stringify({"key" : "value"}));
};
  
})();

By writing your code within a self-executing function, variables lang, dom, and event are only local to that function and everything inside of it. So, lookups to such frequent tools like YAHOO.util.Dom are much faster.

DOM caching

Similarly, lowering the times you access the DOM improves the performance as well, most of the times drastically.

So if you have something along the lines of this (but hopefully more profound):

for (var i=0; i<100; i++) {
  document.getElementById('el').innerHTML = i;
}

Do this:

var el = document.getElementById('el');
for (var i=0; i<100; i++) {
  el.innerHTML = i;
}

In other words, only do one DOM lookup per element and save the reference to a variable.

That’s it. Happy coding.

Join the conversation ›

PHP is king among scripting languages (1)

… at least according to the TIOBE index, which measures language popularity based on the number of web searches:

The ratings are calculated by counting hits of the most popular search engines. The search query that is used is +"<language> programming" The search query is executed for the regular Google, Google Blogs, MSN, Yahoo!, and YouTube web search for the last 12 months. The web site Alexa.com has been used to determine the most popular search engines.

Observations

  • PHP moves up one spot from last year into #4 and still dominates the web languages
  • ActionScript enters top 20 (as #20) and I expect it to grow even more in the coming years
  • Java dominates with 20% market share and sits comfortably at the #1 spot
  • Pascal enters top 20 as well at #15, jumping up eight spots in one year! This one I’m just confused about, but I do miss the language
  • JavaScript and Ruby are #9 and #10 respectively, though over last 4 years, Ruby has risen tremendously (#27 in 2004) with the help of Ruby on Rails


View the rest

Join the conversation ›