Validating is like flossing

How often do you floss?

Honestly!

For me it’s one of those things that I know I should do, but which I don’t actually do nearly as often as I could.

Validating HTML is the same.

We web developers all know we should, but so often don’t.

Why?

Is it because we don’t think standards are important?  I know this is true for a small minority, but I don’t think this is the reason for most, because I think smart developers and testers understand how having valid code makes life easier for both them and the people using their sites.

Is it just too hard?

When we were migrating Trade Me to .NET we decided we would take the opportunity to improve the quality of the underlying HTML as we touched each page.  The intention was to validate all pages using the free tools provided by the W3C.

But, as we quickly discovered, this is no trivial undertaking.

It’s fine when you’re working with a mostly static page. But, as soon as you’re working with a dynamic data driven page the number of different variations of the page can quickly become overwhelming.

If you have pages which require authentication (either on the server or in the application), or requires a user to post information into a form, it becomes more or less impossible.  If the validator can’t reach the page directly you have to save a local copy of the HTML and upload this manually to the validator.

Who has time for that?

Even when you do make the effort the results often confuse more than they help.

Validators are (almost by definition) pedantic, and as a result do a generally poor job of differentiating between things that make a real difference to users and things that, while strictly and correctly identified as errors, are not so critical.

And, there is no easy way to keep track of the errors that exist on a page over time.  So, when you’re presented with results it’s difficult to identify those errors which are new or to easily exclude results you’ve seen before.

This is not so bad if you have a page that is normally fully compliant, but a much more common scenario, unfortunately, is working on improving a page that is full of invalid code.  In that case it’s a nightmare.

The tools really don’t make it easy.

So, what do we do? Continue on wishing we could be more diligent, but lacking time and tools?

I think we can do better!

A while back I wrote about an idea I had for solving some of these problems.

I was stoked when one of the smartest developers I know put his hand up.  Over the last couple of months we’ve been working on turning this idea into a real working tool.  And now we have something to show you all…

We’re calling it Wingman.

It’s a Firefox browser plug-in, which automatically sends the exact pages you visit to the server, making it trivial to validate.

And, it’s a website which organises the results, making it easy to identify the errors you’re interested in, and to spot trends so you can fix things as soon as they occur.

Plus, it’s designed to get smarter as more people use it, by aggregating information about what types of errors are commonly ignored across all users.

In time we imagine a system which runs various different types of validation, including potentially hooking into validations services which are hosted outside of Wingman itself.  But, for starters, we have implemented a simple HTML validator, based on the service created by validator.nu.  CSS and Javascript validation are the next obvious candidates, but we’re really interested to hear your ideas for what other things we could include in this mix – for example, a spell checker, a test for basic SEO rules, or an outbound link checker are three ideas that have been suggested to us already.

Today we’re opening up a free invite-only preview of the service, so we can start to see how people might use a tool like this.

If you’d like to have a play please register on the site.  We’ll be sending out the first group of invite codes shortly.

I’ll look forward to hearing what you think!

5 thoughts on “Validating is like flossing”

  1. FYI the web developer toolbar extension has an option to ‘validate local html’ and ‘validate local css’ which gets around problems of authenticated pages or pages that aren’t publicly available. It looks like wingman is going to do a fair bit more than this though so I’ll give it a try.

  2. Hey Rowan,

    I think the concept is solid, I can see for testers this would be great as they can zip through a bunch of pages and then go back and look at the results later on after the fact. I’m guessing they can also share a login to so someone else can fix the validations errors.

    I don’t like that it takes up a whole line on my address bar however. I think it would work much better as a context menu option or as a menu popping off the bottom of the firefox window the same as firebug.

  3. Well, whaddya know, it picked up a broken page immediately … something I thought was fine, and probably haven’t validated for months. Cool.

    I agree with Marshall about the UI, and I wonder if it could have been implemented as a Firebug plugin, like YSlow. This has the advantage that you could set it to be off by default, but on for certain sites (your own). But this is of course a 0.5 release and the UI is suitably functional.

    The outbound link checker would indeed be cool … perhaps checking the Google site map is complete? Record page response times? YSlow will do that for the current page, but it would be nice to have an average across a session.

    Then there’s inbound links, reddit and del.icio.us bookmarks, technorati rankings, SEO rankings. If you did use CSSLint it would be interesting to know about unused selectors in the stylesheets.

    Lots of possibilities …

    Cheers
    Matt

  4. Try BrytonPick – FLOSS In Seconds. It is string-free, reusable and portable flossier that will save you allot of time on a daily flossing routine. Maybe you will have the same luck with HTLM validation :)

  5. I’ve used the ctrl-alt-v combo in Opera for the last 3 years, sends the page in your cache to the validator. Obviously doesn’t do CSS or javascript but I don’t find these are so important. Valid HTML should be mandatory!

Comments are closed.