Douglas Crockford

Blog

Books

Videos

2020 Appearances

JavaScript

JSLint

JSON

Github

How JavaScript Works

Layer8

About


Start voting now!

About The Magnify Example

In 2001, I developed the Interstate.js library for State Software. Interstate.js was the browser part of a platform that allowed sessionful applications to be delivered with Netscape Navigator and Internet Explorer. I also wrote some examples to show what Interstate.js could do. My favorite was the Magnify Example.

You saw a page with two small pictures and a magnifying glass. All three objects were draggable. If you dragged the glass over a picture, then magnified detail would appear in the glass. I chose two paintings by Salvador Dali. One of them contained a portrait of Abraham Lincoln that was more easily seen when the picture was small. Both images revealed interesting details when magnified. It worked identically on Netscape 4 and Internet Explorer 5, which was a remarkable feat. Even more remarkable, it still works on the newest browsers.

It demonstrates clipping an image to a circle. Today, CSS on the latest browsers can clip to a circle. In 2001, CSS was much more limited, and implementations were incomplete, incompatible, and buggy as an ant hill. The state of the art was clipping to a rectangle, but I was clipping to a circle. It was magic.

It was a trick. The magnifier ring was carefully designed so that a square could be hidden between the outer circumference and the inner circumference. The clipping was to a square, but the square was obscured by the ring to appear as a circle. The radial gradient around the ring helps us to misjudge the dimensionality of the ring. I also cheated in how magnification worked so that the enlarged image would always completely cover the smaller image.

Interstate.js encouraged the same method call cascading style that jQuery made popular five years later. I now think that was a mistake. It was certainly very cool looking at the time, but I think it leads to excess trickiness, dependencies, and clutter. The stuff I write now does not look like that.

The code passed JSLint in 2001, but it does not pass today. In 2001, I still suffered from the delusion that programming style is a personal thing and that all styles are valid. Over the years, JSLint taught me that that was not true because some styles are more resistant to bug formation than others. Error resistance and maintainability are more important than coolness and personal expression. Diversity of people is a great thing. Diversity of coding styles is not.

In 2001, and for over a decade after, I was a strong advocate for JavaScript libraries. The DOM was so badly designed, so misfeatured, and so carelessly implemented and maintained, that you should never touch it directly. Let the library makers take on all of the pain of cross-browser development. You can then focus on writing good programs.

But that is no longer my position. A few things have happened. The libraries have all gotten bloated, and code bloat is an important warning sign. Microsoft has finally put IE down, so that nightmare is now behind us. And the web standards have finally paid off. There is still much to lament about how the browser works, and there are plenty of attractive nuisances baked into the standards. But with a little care, it is possible to write good portable programs with plain old JavaScript.

So I gave the Magnify Example a reboot. The new version does not run on Netscape or IE, but it seems to run on all of the latest stuff. It does clipping to a circle, even though it did not need to. It supports touch on displays that provide it. I was disappointed that the code to handle a finger was not the same as the code to handle a mouse doing the same thing. Maybe they will fix that some sunny day.

Instead of using a gif for the magnifier ring, I made a div with rounded corners. In 2001, to get rounded corners we had to make a 3 by 3 table, stuffing pieces-of-fours gifs in the corners. It is so much easier to give CSS a border-radius. Unfortunately, I could not then apply a radial gradient to the border. The browser is not an elegant composible system. It is a pile of hacks.

I am still frustrated with the browser, but I am grateful that it has improved so much. I am still looking forward to its eventual replacement.