New post to the Cozi Tech Blog: Iframes: thinking outside the box.

Using an iframe to host some content turned out to be a big pain, so I came up with a different approach.

About three weeks ago, I answered a question on StackOverflow about generating the most readable color of text on a colored background.

I suggested flipping the top bit of each component, (r ^ 0x80, g ^ 0x80, b ^ 0x80). This has the same effect as adding 128 if the component is less than 128, and subtracting 128 otherwise.

Another way to think about it is to imagine the 256x256x256 color cube. Inside that cube, erect another cube half as wide. One corner is at your original color and the diagonally opposite corner is the one computed above.

The questioner liked my answer the best, but I decided to experiment further. I wrote some JavaScript to compute that color. As you can see in the table of 549 colors below, it works well most of the time, but it's not perfect.

Someone else suggested an earlier SO question on good-looking font colors. Looking at that thread, I decided to try inverting the HSL value to (h + 180, s, l + (l < 0.5 ? 0.5 : -0.5)). That works well too. Generally, it yields different colors than my first approach. It looks like one of the two always contrasts well.

I found that the most effective approach was to compute the gray-level intensity of the original color, (0.30*r + 0.59*g + 0.11*b). If it was dark, use white; otherwise, black.

Really, though, unless you have a requirement to work with arbitrary colors, you should pick your color scheme carefully. I found a really nice site this afternoon, ColorSchemeDesigner.com

Here's the source of my colortable.

Exuberant Ctags is an essential complement to Vim: it generates an index of symbol names (tags) for a set of source files. In Vim, just place the cursor on a function name and type C-] to go to its definition.

Ctags works well for most of the languages that I deal with, but falls down badly on modern JavaScript. Its built-in parser simply doesn't handle declarations like these:

Sizzle.selectors.filters.animated = function(elem) { // ...
ajaxSetup: function( settings ) {

I came across Unbad's workaround earlier tonight. His code didn't work for me, so I hacked on it until it did:

--langdef=js
--langmap=js:.js
--regex-js=/([A-Za-z0-9._$]+)[ \t]*[:=][ \t]*\{/\1/,object/
--regex-js=/([A-Za-z0-9._$()]+)[ \t]*[:=][ \t]*function[ \t]*\(/\1/,function/
--regex-js=/function[ \t]+([A-Za-z0-9._$]+)[ \t]*\(([^)])\)/\1/,function/
--regex-js=/([A-Za-z0-9._$]+)[ \t]*[:=][ \t]*\[/\1/,array/
--regex-js=/([^= ]+)[ \t]*=[ \t]*[^"]'[^']*/\1/,string/
--regex-js=/([^= ]+)[ \t]*=[ \t]*[^']"[^"]*/\1/,string/

Simply add the above to ~/.ctags or $HOME/ctags.cnf.

For several years, Firefox has been my default browser. Firefox's extensions have always been its paramount feature for me, but its performance and developer tools came close. I'm very happy with it, for the most part.

The one thing that makes me unhappy is Firefox 3's CPU consumption. Time and again, I find it running at close to full utilization of one CPU core on my MacBook Pro. The tipoff is usually the warmth of the metal case. Killing the Gmail tab tends to help, but not enough. In Firefox 2, the worst problem was the memory leaks. Within hours, it would have chewed up several hundred megabytes. Memory usage is better in FF3, but I still have to shut it down too often for my liking, especially after using Firebug for a while.

In the last couple of months, I've been trying other browsers on my MacBook at home. Camino and Safari have had their chances, but they run too hot over time. I'll be sure to give Chrome a shot when it's released for the Mac—I quite like it on Windows.

Opera is what I've been using for the last few weeks. It runs the coolest of any of the browsers that I've tried. It's snappy enough. The JavaScript debugger is decent, and far better than Chrome's or Safari's. I'd prefer better integration with Google Reader, as I have no intention of switching RSS readers.

Title: JavaScript: The Good Parts

Author: Douglas Crockford

Rating: 4 stars out of 5

Publisher: O'Reilly

Copyright: 2008

ISBN: 0596517742

Pages: 153

Keywords: programming, javascript

Reading period: 27 May–15 June, 2008

Crockford is one of the world's leading JavaScript experts. In this slim volume, he explores the features of the core language, both the good parts and the warts.

JavaScript has been redeemed since 2005 with the explosive proliferation of Ajax websites. Long regarded as a toy language, suitable for little more than generating popups, we have come to learn that in the hands of experts like John Resig (of jQuery fame), JavaScript can be a powerful, expressive language. Anonymous functions, duck typing, and dynamic objects are all good stuff.

Crockford gives a particularly good explanation of the confusing topic of prototypical inheritance and how objects and functions are intertwined in the language. He also discusses the parts that should be avoided in the language, which are mostly due to JavaScript's premature birth, when Netscape rushed it to market. He avoids discussion of the barely standardized mess that is the DOM.

I would have liked some longer examples, tying his themes together.

Recommended.

Preloading Ajax data as JSON has helped improve the load time and perceived performance of our family software application. Most of the pages in our web client are dynamically generated in the browser from a complex set of JavaScript and CSS, so we're always looking out for ways to make them appear more quickly.

More at the Cozi Tech Blog.

Time for another Odds & Ends.

Well-known evolutionary biologist PZ Myers (Pharyngula) was expelled from a viewing of a new creationist documentary, Expelled, last night. Wait until you read the punchline. There is a God!

Lost, one MacBook Air: Steven Levy explains just how he (thinks he) lost his MacBook Air.

It was St. Patrick's Day on Monday. Peter sent me the Muppets' Danny Boy video. Andrew told me that the Irish bishops had moved St. Patrick's Day. Monday was a holiday in Ireland, as is today (Good Friday) and next Monday (Easter Monday), so many people took Tuesday, Wednesday, and Thursday off this week. Bastards!

Emma and I walked with the Wild Geese Players in the Seattle Parade last Saturday. I walked into a fire hydrant afterwards, while preoccupied with my camera, leaving me with a deep bruise on my thigh. I must get around to posting those photos to Flickr soon (along with many others).

In Martian Headsets, Joel Spolsky discusses Microsoft's recent decision to make Internet Explorer 8 be standards-compliant by default, which reversed their earlier decision to be backwards-compatible. He remarks that they're damned if they do and damned if they don't.

In my opinion, Microsoft has erred too often on the side of backward compatibility. I'm firmly in the camp that wants IE to be standards-compliant by default. After struggling for months with IE6 (and IE7 to a lesser degree), I believe that we badly need to raise the level of standards compliance in browsers. As Jeff Atwood put it three years ago, IE6 is the new Netscape 4.7x: "the browser that we all wish would go away. The one that's a pain in the ass to support."

Confused about the current financial crisis? Watch Clarke and Dawe on subprime meltdown. And read Can’t Grasp Credit Crisis? Join the Club.

It's not at all obvious how to use Visual Web Developer 2008 Express Edition to debug JavaScript in Internet Explorer. So I wrote it up at the Cozi Tech Blog.

The JavaScript engines in Firefox 2 (Windows) and IE6 can't handle the new Daylight Savings Time rules in the U.S. The Date() function returns a value that is off by an hour if the system time is between the second Sunday of March and the first Sunday of April.

More at the Cozi Tech Blog.

Update 2008/03/14: Mea culpa. This is not a widespread problem. It is caused by the presence of set TZ=PST8PDT in my C:\AutoExec.bat. Per KB932590, the existence of the TZ environment variable will cause the CRT to use the old DST rules. (I can't remember why I set TZ several years ago. It's part of the accumulated mess of files that I bring everywhere with me.)

Over at Cozi, we've started a new technical blog. I just put my first post up, describing a nasty problem we had late last year.

Here's the summary:

Internet Explorer 6 does not support transparency in PNG images. The best-known solution is to use the DirectX AlphaImageLoader CSS filter. It's less well known that using AlphaImageLoader sometimes leads to a deadlock in IE6. There are two workarounds. Either wait until after the image has been downloaded to apply the filter to the image's style, or use the little-known transparent PNG8 format instead of the filter.

More here.

I've been meaning to play around with Greasemonkey for a couple of years. Greasemonkey is a Firefox extension that allows users to install scripts that make on-the-fly changes to the look and feel of third-party websites. For example, adding price comparisons to Amazon or thumbnail images to Google search results. UserScripts.org has a large repository of Greasemonkey scripts.

I finally built my first script the other day. We're putting together a new feature at Cozi that integrates partner websites with our site. Since the feature is not yet announced, I'll just say that partners will add a link to Cozi on many of their database-driven pages. That link has a complex, page-dependent querystring. Until the partners do the work to add the link to their sites, we were limited to testing and demoing with hand-modified pages.

I wrote a little Greasemonkey script that finds the right spot on the partner pages to place the link, scrapes some context to construct the querystring, and inserts the link. Now we can test against the real sites and show a compelling demo. Of course, it only works on Firefox and it requires you to install both Greasemonkey and this script. Our partners will have to make minor changes to their sites before ordinary users can take advantage of the feature.

Some gotchas with Greasemonkey. Inserting, say, <b>Click here</b> is as simple as document.getElementById('spot').innerHTML = <b>Click here</b>. However, inserting a <script> node requires:

 var scr = document.createElement('script');
 scr.type = 'text/javascript';
 scr.text = 'createLink(' + p1 + ', ' + p2 + ', ' + p3 + ');';
 document.getElementById('spot').appendChild(scr);

Greasemonkey will definitely become part of my repertoire.

Title: Pro JavaScript Techniques
Author: John Resig
Rating: 3.5 stars out of 5
Publisher: Apress
Copyright: 2006
ISBN: 1590597273
Pages: 347
Keywords: programming, javascript
Reading period: 16 September-4 October, 2007

At Cozi.com, we use the jQuery JavaScript library to do all kinds of complex and wonderful DHTML and Ajax tricks in our web client. Extremely powerful, very elegant: I commend it to your attention.

John Resig is the lead developer on the jQuery team. This book is not about jQuery, though if you work your way through it, you'll be well equipped to understand the jQuery source code.

This book covers modern JavaScript techniques, in particular, object-oriented JavaScript, unobtrusive DOM manipulation, Ajax, and cross-browser warts. It covers a lot of ground and shows the underpinnings of many of the popular JavaScript libraries that power Web 2.0 sites, showing uses of jQuery, Scriptaculous, Dojo, Prototype, and more. His examples are clean and well-chosen.

It's a good book and I learned a great deal from it. It's not as good a book as it could have been. The editing is sloppy and there are too many typos. Resig fails to follow Strunk's dictum, omit needless words: the writing is clumsy and wordy. Inline <code> should be typeset in a distinct font in a programming book. Finally, no one should talk about consuming JSON without mentioning browser security.