Wednesday Mar 11, 2009

VirtualBox: The Über Browser Testing Environment

I'm now rockin' the ultimate multi-browser testing environment with VirtualBox. No longer must I endure the rigmarole of booting up separate physical Windows machines in order to test different versions of IE, or fooling with unwieldy hacks to get multiple versions of IE running on the same instance of Windows. I simply unpause the appropriate virtual OS instance and go to town. I'm sure that my list of virtual OSes will grow in the future.

Thursday Jul 24, 2008

What's the Fastest Way to Code a Loop in JavaScript?

I built a loop benchmarking test suite for different ways of coding loops in JavaScript. There are a few of these out there already, but I didn't find any that acknowledged the difference between native arrays and HTML collections. Since the underlying implementations are different (HTML collections for example lack the pop() and slice() methods), benchmarks that don't test against both are probably missing important information.

My suspicions were confirmed. Accessing the length property is more expensive on HTML collections than on arrays, depending on the browser. In those cases, caching it made a huge difference. However, HTML collections are live, so a cached value may fail if the underlying DOM is modified during looping. On the other hand, HTML collections will never be sparse, so the best way to loop an HTML collection might just be to ignore the length property altogether and combine the test with the item lookup, since you have to do that anyway:

// looping a dom html collection
for (var i=0, node; node = hColl[i++];) {
    // do something with node

Another interesting result is that with HTML collections, hColl.item(i) is 2-6x slower than hColl[i], except in Safari where it's about the same. I wonder what the extra overhead is?

I've posted the results of all my benchmarks here, however my IE7 is really IE8 in IE7 emulation mode, so I mistrust these results as representing IE7's original JavaScript/DOM engine. If anybody wants to run the benchmarks in true IE7 and post the results, I'll update this post accordingly. Also, I'm sure there are ways of looping that escaped my imagination, so if you know of any, post it in the comments and I'll add them to the test page.

[Read More]

Wednesday Feb 27, 2008

Border-Radius Roundup

The black and white object you're looking at will look different depending which browser you're using, but it should look like a circular target of some sort. It was created using nothing more than CSS's border-radius property and a couple of span tags. All of that to say this: It looks like Safari/Webkit browsers are rendering border-radius quite nicely these days, and Gecko-based browsers aren't far behind, if Firefox's latest public beta means anything. To illustrate this, I've posted some screenshots of a test page I built. This wasn't an exhaustive test for CSS3 border-radius compliance, just an attempt to see where the browsers were with basic support. Only one background image is used (shown below), the rest is pure CSS. (All tests done on the Mac.)

[Read More]

Wednesday Dec 19, 2007

IE8 Standards Compliance Mode?

Strange things are afoot in IE-land. Remember our old friends quirks mode and (almost) standards-compliance mode? There's reason to believe IE8 will introduce yet another rendering mode, and that developers will need to opt-in to this rendering mode if they want IE to break backwards compatibility with its long-entrenched bugs. The question is, how will the opt-in be triggered? A <meta> tag? A version number in the opening <html> tag? An HTTP response header? A conditional comment? The mind boggles.

[Update]: Chris Wilson of the IE team promises more details soon regarding this very thing.

[Update jan/25/08]: And we have a winner: A <meta> tag and/or an HTTP response header. I have no opinion. Too many people smarter than I have already weighed in, and it remains to be seen just exactly how this will all shake out.

Whoa Nelly: IE8 Passes Acid2!

What has the world come to?

Tuesday Nov 27, 2007

Liking Firefox3's Page Zoom

Switching to Firefox 3 beta was just an experiment; I wanted to take a brief tour and then switch back, but now I'm addicted to the new page zoom, which has apparently replaced the text zoom of previous Gecko browsers. Rather than just bumping up all font sizes like it did before, which usually broke the page's layout, now the entire page scales proportionally, including background images and pixel-defined values. Fixed-width designs no longer look like a lonely column in the middle of a vast empty space. Flex-width designs no longer have ridiculously long lines of text. For someone who both hates tiny fonts and has a large monitor, this is big (both literally and figuratively). What's more, it seems to remember your page-zoom settings on a per-domain basis.


My name is Greg Reimer and I'm a web technologist for the Sun.COM web design team.


« July 2016