One particular point of pride for us here at DLB is the fact that we post on BlogLESS six days a week, and we simultaneously manage to keep it valid.

For the most part, once you've mentally committed to valid HTML, this kind of feat rarely causes a problem. However, for a very brief moment this fine Wednesday, I thought I'd share with you three fairly non-intuitive things that we've run into that caused us validation errors, and what you can do to prevent them.

Read More...

About a month ago, I wrote a post for BlogLESS about how to display video content from Vimeo with Valid XHTML using Drew McLellan's Flash Satay technique.

Recently, it occurred to me to make this explicit: You can do the exact same thing with videos from YouTube! So, in the interest of continued blog validation, let's take another look at what makes an embedded video invalid, and how to avoid it. We'll start with the generics, and then move on to the slightly more finicky YouTube requirements.

Read More...

Last week, I posted a video hosted on the video-sharing site Vimeo, only to be met with irritating XHTML validation errors.

The W3C XHTML Validator FAQ suggested I try Drew McLellan's famous Flash Satay method, but I just plain don't have the patience to wrap every embedded video on this blog in another Flash movie, and besides IE7 fixed the problem that motivated the Satay technique in the first place.

On top of all that, this particular error was incredibly easy to fix. (Which does make you wonder why Vimeo didn't just fix in the first place!)

Read More...

Putting an email address on a website is a lot trickier proposition than it used to be. These days, the web is populated with evil spambots, crawling the web and scraping email addresses off websites, which they can then use to solicit your interest in perverse sexual apparatus or imitation Rolex wristwatches.

But for those of us who are selling something, we have no choice but to provide a way for our readers to contact us. Now, in the past, many things have been done to accomplish this: overly elaborate or unnecessary contact forms, replacing part or all of an email address with an image, or munging an email address.

All three of these techniques are unsatisfactory. First, all of these techniques are often beatable by smart spambots. Second, and even more importantly, the bottom line from a usability perspective is quite simple: These strategies convolute things for users. The easiest interface element we can provide for our users is link that, when clicked, opens up a new email addressed to us in their email client.

Read More...

Background

reCAPTCHA is a free CAPTCHA service that helps to digitize books.

A CAPTCHA is a program that can tell whether its user is a human or a computer, by asking the user to copy some distorted text. You've probably seen them, either here, or elsewhere on the web. If not, just click here for an example.

The Internet Archive is going to help Spidey enter "the digital age".

reCAPTCHA gets these words from books that the Internet Archive is digitizing. Digitizing books is done by photographically scanning the book's pages, and then transforming these scans into text using "Optical Character Recognition" (OCR).

All this together means that when you leave a comment, in addition to contributing to the discussion, you are both proving you are a person, not a spambot, and helping humanity's effort to archive it's knowledge digitally.

The Problem

Which is all milk and honey, but there's a problem. As good citizens of the web, and as Wordpress users, BlogLESS utilizes reCAPTCHA's handy Wordpress Plugin. But, as good citizens, BlogLESS is further committed to web standards. This means that all our HTML and CSS needs to be valid. Unfortunately, the Wordpress reCAPTCHA plugin doesn't validate XHTML out of the box. (As it turns out, this is not its fault. It actually can't validate out of the box, which we'll see.)

The good news is, the fix is easy, once you understand the problem. You don't need to be a pro to make your Wordpress comments template valid again.

Read More...

On this fine July morning, like to just take a moment of your time to eulogize what is, as far as I'm concerned, the most useful CSS trick I've ever run across. I've used this about five hundred times in my life, and I wanted to take the opportunity to address it to you, good reader, as if by some chance you haven't yet run into it.

I've chosen this opportunity, partially, because trend leader 37signals announced last week that they're dropping support for IE6 in their products. Which, in my immediate (albeit short-lived) joy, caused me to imagine a world where we could all stop supporting IE<=6, and, subsequently, in which this trick would become even more elegant and universal.

This trick was introduced to us all under the sign of How To Clear Floats Without Structural Markup. It is a trick developed by Tony Aslett and published at Position is Everything.

It makes it possible to clear floats without any unnecessary, unsemantic or hacky structural markup.

Read More...

Some time ago, we were working on a website that required a contact form with the ability to attach a file. This sounds like, at this point in web design, it should be incredibly simple. Imagine my chagrin as I learned that, in fact, styling the FileUpload Object had a smack of Holy Grail-ness to it. Well, at least as far as HTML form objects are concerned.

A lot of people have had similar ideas on how to handle this. I suppose it all started with Michael McGrady's solution, which was followed closely by an improvement on McGrady's technique from Peter-Paul Koch over at Quirksmode. The closest thing I found to a satisfactory solution, though, came from Shaun Inman. His solution was definitely the right idea, but it wasn't exactly full-featured, and I wanted it built in my favorite Javascript framework.

Read More...