I’ve always been taken with the way that the BBC styles their A-Z index using a simple list and CSS. However, because they use pixels to set the dimensions of each list item, the design breaks when you increase the text size. Consequently, I thought I’d have a go at creating an A to Z index along the same lines that doesn’t break when you resize your text. The code is pretty straight forward. Here’s the CSS: #azindex { background: #75B9D0; float: left; margin: 5px 0 20px 10px; padding: 0px 5px 15px 5px; width: 520px; } * html #azindex { padding: 5px 5px 10px 5px; width: 490px; } #index { font: bold 100% Verdana, Helvetica, sans-serif; margin: 0; padding: 0; } #index li { float: left; height: 2em; list-style-type: none; margin: 0.65em 0.3em; padding: 0; width: 3em; } * html #index li { margin: 0.2em 0.2em; } #index a:link, #index a:visited { background: #fff; color: navy; display: block; height: 2em; padding: 0.75em 0 0 0; text-align: center; text-decoration: none; width: 3em; } #index a:hover { background: #93D1E4; color: #fff; text-decoration: underline; } And here’s the HTML: <div id="azindex"> <ul id="index"> <li><a href="#a">A</a></li> <li><a href="#b">B</a></li> <li><a href="#c">C</a></li> <li><a href="#">etc</a></li> <li><a href="#z">Z</a></li> </ul> </div> Pretty simple, but hopefully it’ll be useful to someone. Follow

It’s a dark and dangerous world for the innocent web form. With spam messages outnumbering legitimate e-mails (circa 9 times) and web comments by something like 20 to one, an unprotected comment form doesn’t stand a chance of going unabused. Automated spambots troll the web, filling out forms and spewing pablum about penny stocks, Viagra and the personal proclivities of Paris Hilton. Habit #1: Leave No Trace I’ve spent some time observing the behavior of spambots in their natural habitat (it’s a dank place that smells of old beans). A frequent strategy appears to be to have a human visitor go to the site, submit a form, and then script automated hits against that form. Spambots are not terribly bright, but they’re relentless. They submit again and again to the same URL, lobbing the fields and values for which they’ve been programmed. Big Medium counters this by covering its tracks, never using the same field names twice. Every time you visit the page, all of the field names change. The field names are MD5 hashes of the page’s slug name, its database creation date and a server secret. A semi-obfuscated timestamp is mashed with this field name, creating a 50-digit field name that changes every second. If the correct combination of field names are not received, the form submission is discarded. What’s more, these field names are tied to that timestamp I mentioned. Even if once-valid fields are received, the form submission is discarded if the timestamp is more than 12 hours old. For forms older than 30 minutes, you’re prompted to re-submit. So the spambots’ visit-me-once strategy of programming for field names no longer works, at least not outside of the first 30 minutes. It’s not super-difficult to defeat this technique by analyzing how the form changes from moment to moment, but it does require some custom coding, and as I’ll explain later, the incentives for doing so aren’t very high. Alas, there are other spambots that don’t follow this strategy at all. These ’bots actually visit the page live and fill out all of the fields on the page, paying no particular heed to the field names. They require a different countermeasure… Habit #2: Set Traps These form-filling spambots typically fill out all form fields following simple rules based on field name and field type. These rules are similar, I assume, to the rules used by many Follow