JavaScript Rules

After a long period of no posts due to personal issues, I’m back now and alive!
This time with a new post on YDN – Yahoo! Developer Network – blog: Performance on Yahoo! Search for Earth Day.
In this post I describe the performance case study of Yahoo! Search Earth Day campaign.

During this long off-post period, besides my day job, I’ve been doing some experiments, developing some tools and brainstorming lots of ideas, mostly related to performance and JavaScript. I do have some post drafts and will be publishing them soon. Here are a few topics I’m covering along this year:

• setTimeout minimum delay limit
• Prefetching CSS images
• Problems with gradients filters on IE links hover
• Flipping page direction RTL/LTR easily – RTLzr a Firefox extension
• JavaScript Interviews Exposed (series)
• Lazy Enhancement
• JavaScript video subtitle
• JavaScript video timeline marks
• Deleting a removed node from DOM

Stay tuned!

A few days ago I introduced a friend of mine Jorge Rocha to SPOJ an online judge system for user-submitted programs, one of the first problems that he tried was the Prime Generator it consisted in finding all primes in a given range of numbers, after some time and few different algorithms he asked me if I had any tips to help him, although he had the correct algorithm (Sieve of Eratosthenes) something was clearly missing, the solution wasn’t fast enough and I had no clue where to go from there, so as usual when a question like that comes up I resort to Mauro Persano… and obviously he knew the answer, he taught us how to apply a heuristic to the algorithm to help solve the problem and after doing so the code worked and the solution was approved.

Continue reading ‘Finding prime numbers with Javascript’ »

Matthias Reuter from United Coders proposed a JavaScript Challenge: A Lotto Number Generator which the rules follow:

Write a JavaScript function that generates random lotto numbers. This function has to return an array of six different numbers from 1 to 49 (including both) in ascending order. You may use features of ECMA-262 only, that means no Array.contains and stuff. You must not induce global variables.

The function has to look like this

var getRandomLottoNumbers = function () {
    // your implementation here
};

Minify your function using JSMin (level aggressive) and count the bytes between the outer curly braces.

Continue reading ‘JavaScript Challenge Revisited: Lotto Number Generator in Chains’ »

This morning while commuting to the office, reading JavaScript for Web Developers, I bumped into a question: how could I improve a well known algorithm that gets the smallest or the largest number in an array by using built-in Math methods such as Math.min and Math.max. For those not familiar with these methods, they return the smallest or the largest number respectively from a list of zero or more numbers passed as parameters, e.g.: Math.min(4,3,9,6) returns 3, Math.max(4,3,9,6) returns 9. I was wondering if calling such methods using apply and an Array as argument would work. I could hardly wait to get to the office to test it out on my Firebug console. I first tried:

Math.max.apply(Math, [4,8,3,5,1,2]);

And bingo! It works!

Continue reading ‘Fast min/max in arrays’ »

Performance on the web has always been a hot topic to talk about specially when you talk about page load, but you don’t see as often people talking about perceived load which is related to how fast the interface responds to the user interaction, in this area WebKit based browsers like Safari and Chrome from my point of view have always been ahead.

Continue reading ‘WebKit Page Cache’ »

I’ve just finished chapter 7: Writing Efficient JavaScript by Nicholas Zakas on Steve Souders‘ new book, Even Faster Web Sites, where he presents several string optimization techniques to improve JavaScript performance and wondered which algorithm does String.indexOf method implements on JavaScript engines (aka ECMAScript engines).
A few months ago I’ve asked this question to Yahoo! fellow Douglas Crockford and he said the ECMAScript standard does not require a specific algorithm, so it could vary with each browser. You can check that on section 15.5.4.7 of Standard ECMA-262. I decided then to download the most popular open-source JavaScript engines source codes and found mainly 3 algorithms:

Continue reading ‘String searching algorithms in JavaScript engines’ »

Dealing with foreground/background color contrast can be a bit tricky specially when you are a not a color-theory savvy or when using CSS color names as listed by Douglas Crockford’s page.
The most common problem is when you have to place a label over a color you don’t know on beforehand, it can either be an arbitrary color chosen by the user or come from a random-color generator function and sometimes from a long list in a datasource. Usually you have to decide between labeling it in black or white. When a color is too bright, a black label over it might be the best choice but definitely won’t be good over a very dark color, it can be really hard to read it, a white label should work better.

Continue reading ‘CSS color brightness contrast using JavaScript’ »

A lot of the power of JavaScript comes from the ability to be an event-driven language. Dealing with event listeners is not a simple task considering different implementations by Internet Explorer and the rest of the world. After some searching on internet you have probably found some cross-browser solutions, although they are not always as efficient as it possibly could.
I’ll present some of them and explain their design pros and cons. All them do exactly the same, attach actions to events, none of them does browser sniffing to determine which event attachment technique to use, they use feature detection instead. For clarity sake, browser sniffing is a common technique on which an application tries to find out the user’s browser, usually by examining the useragent string looking for vendor/version and is a common source of detection problems. On the other hand, feature detection is a much safer technique where the application checks if a certain feature (function, property) exists (is implemented) in the browser and once this feature is defined, use it, otherwise another feature is checked as a fallback.
Some design patterns presented here are well covered in Ross Harmes & Dustin Diaz’s Pro JavaScript Design Patterns book.

Continue reading ‘Cross-browser event listener with design patterns’ »

[UPDATE - july 2nd]

Since my post yesterday, the firebug developers have released another version of the tool (1.4.0b4) it seems more stable, great job!

————

When Mozilla launched Firefox 3.5 a couple days ago, I was forced to upgrade my FB (firebug) to the new 1.4 beta version, although the new FB has been greatly improved it still has a lot bugs as you’d expect on a beta version, but that’s not the bad part, the new FF3.5 is really fast and has really cool new features but FB is making the browser choke and freeze all the time, it’s no news that FB has become more and more slow and buggy each version.

Continue reading ‘What’s going on with Firebug?’ »

Fellow Yahoo! Nicholas Zakas has blogged about some browsers limitations and recently ran some tests in order to check browsers call stack sizes.

Not surprisingly, different browsers have different call stack sizes. Also not surprisingly, the method that they use to determine the call stack varies as well. The various call stack sizes I could measure are (give or take, might be off by 1 or 2):

• Internet Explorer 7: 1,789
• Firefox 3: 3,000
• Chrome 1: 21,837
• Opera 9.62: 10,000
• Safari 3.2: 500

In each case, the browser will end up stopping your code and (hopefully) display a message about the issue:

• Internet Explorer 7: “Stack overflow at line x”
• Firefox 3:”Too much recursion”
• Chrome 1: n/a
• Opera 9.62: “Abort (control stack overflow)”
• Safari 3.2:”RangeError: Maximum call stack size exceeded.”

Continue reading ‘Limitation on call stacks’ »