Alfa Jango Blog Engineering, Software, and Entrepreneurship

Most developers I talk to have limited knowledge of jQuery’s .live() function. Typically they know what it does, but not how it works, and thus are not entirely comfortable using it. And usually they’ve never heard of .die(), which unbinds .live() events.

Even if you are familiar with these, are you aware of the problem with .die()?

What is .live()

The .live() function is similar to .bind(), except that it allows you to bind events to DOM elements now and in the future; you can bind events to elements that don’t exist yet in the DOM. Consider the following example.

Let’s say you want to warn the user that they’re about to leave your site when they click on any link:

Note that the .click() method is merely a convenience method for the more general .bind() method, so the following is equivalent to above:

But now, let’s say you add another link to the page via javascript.

(more…)

Page load speed is becoming increasingly important as rich web applications become more interactive. It’s not just about usability anymore; it can now directly affect your placement in search engine results, now that Google uses page load speed in their ranking algorithm. Are you ready for a reality check? Get Google Webmaster Tools for your site, and go to the Labs >> Site Performance to view your average page load time, as seen by Google’s web crawlers. That’s right, Google is already tracking your site’s performance history.

Google Webmaster Tools is even kind enough to tell you how you stack up against the rest of the web. Here is what Webmaster Tools had to say about one of our sites before optimizing it for quick page loading:

On average, pages in your site take 4.5 seconds to load (updated on Feb 21, 2010). This is slower than 70% of sites. These estimates are of low accuracy (fewer than 100 data points). The chart below shows how your site’s average page load time has changed over the last few months. For your reference, it also shows the 20th percentile value across all sites, separating slow and fast load times.

Ouch. Did I mention this would be a painful reality check?

Now to be fair, there’s a very reasonable explanation for this. Google claims that the majority of users will click “back” to the search results page if a link takes too long to load. So, if a webpage is too slow for the visitor to read it, the relevance of the content is…well, irrelevant. I should point out, however, that it’s unknown precisely how much page load speed affects your placement in search results.

(more…)

I recently wrote a lightweight jQuery plugin called EasyTabs, and it is now released on the official jQuery plugin website. Most front-end developers are familiar with the jQuery-UI tab plugin. However, it is a very magical plugin with a complex structure, which completely styles your tabs for you, and limits your options when deciding how to structure the tabbed content.

For instance, it is very difficult to place your tabs below the tabbed content with jQuery-UI tabs.. You must perform some crazy CSS trickery, because jQuery-UI tabs forces you to place your <ul> before your content <div>s. Not to mention all of the jQuery-UI styling it does to your tabs by default, making it difficult to override and apply custom stylization to your tabs.

This new plugin, jQuery EasyTabs, is very flexible for the required markup and structure of your tabs and content. Also, it handles only the functionality of creating in-page tabs, leaving all of the styling up to you and your own CSS.

To check it out, see our documentation and demos. Then when you’re ready, you can download it from the jQuery plugins website.