Have you noticed that software feels cheap when UI elements move around on the screen without notice? Web applications are particularly vulnerable to this problem. Browsers give image elements a default size if they do not have explicit width and height attributes. Once these images have loaded, they expand or contract to their full size, causing all other elements on the page to reflow in response.

We try to avoid this in our applications, but it's easy for an image tag to slip through the cracks. That single tag might be repeated many times in a loop, each instance causing the on-screen furniture to shift around in an unseemly way.

Here's a tip for catching unsized images during development. Add this CSS rule somewhere in your stylesheet:

img:not([width]):not([height]) {
border: 2px solid red !important;
}

Then any images without width and height attributes will be drawn with a red border so they're easy to spot.

Neat.

[Via kottke.org]

::-moz-selection { color: #004080; background: #fffdd7; }
::selection { color: #004080; background: #fffdd7; }

To my knowledge, this feature works in Mozilla-based browsers, Safari and Opera.¹ It doesn't work in Internet Explorer, but it doesn't break anything either.

1. I wouldn't know about Chrome. Google – like quite a few suppliers of Mac OS X software nowadays – don't bother producing a version of their browser for PowerPC-based Macs. However, I'd be very surprised if this feature isn't supported in Chrome, given that it uses the same Webkit rendering engine as Safari.