Help developers automatically test their websites for accessibility, validation, conventions and best-practices.

Philip Walton (@philipwalton) and ChallengePost invite designers and developers to build custom rules that extend the HTML Inspector library.

HTML Inspector is an open source code quality tool that tests your site's markup in the browser and reports any problems or errors. In addition to a base set of rules and validation checks, HTML Inspector is completely pluggable and customizable, so you can write your own rules to test for whatever you want. 

The goal of this challenge is to develop a new rule or set of rules to help people make better websites. The rule(s) can be general and apply to all websites or specific to users of particular frameworks (Rails, Ember, Angular, Bootstrap, etc.).

As an example, a custom rule might:

  • Test that accessibility best-practices are followed and point out possible improvements
  • Test for properly used HTML5 tags or warn against the overuse of non-semantic tags
  • Enforce proper usage of common web framework conventions (e.g., SUIT naming conventions)
  • Report deprecated classes lingering from legacy versions of a framework (e.g. Bootstrap 1 classes on a Bootstrap 3 site).

As an alternative to custom rules, submissions will also be accepted that improve upon existing rules, expand the CLI, or just generally make the tool better.

View full rules

Eligibility

Anyone 13 years of age or older may participate in the challenge.

Requirements

What to create: a new rule or set of rules for HTML Inspector. Rules should include at least one example page that demonstrates the rules in action. Your submission must include a URL where the demo can be viewed; screenshots of your demo (for the site gallery); a description of what you've added along with any references; and link(s) to any pull requests entered on the HTML Inspector Github page.

How to enter

  1. Click “Register” to sign up.
  2. Visit the HTML Inspector Github repo to access documentation and resources.
  3. Create a new rule or set of rules: rules should include at least one example page that demonstrates the rules in action.
  4. Contribute pull requests. You are encouraged, but not required, to add to the project on GitHub. If you do, please follow the contributing guidelines.
  5. Submit your code by providing: 1) a URL where your demo can be viewed; 2) screenshots of your demo (for the site gallery); 3) a description of what you've added along with any references; and 4) link(s) to any pull requests entered on the HTML Inspector Github page.

Judges

Philip Walton

Philip Walton
Project Owner, HTML Inspector

Jon Kessler

Jon Kessler
Software Engineer

No avatar 100

Additional judges TBD

Judging Criteria

  • Usefulness
    How useful is the submission to the the HTML Inspector library or to the Web community?
  • Quality
    Is the code bug free? Does it handle all possible use cases? Is it well written? Is it well tested?