About: ============================================== Description: An HTML best-practices helper, for on-the-fly highlighting of common HTML mistakes. Author: Shaun O'Connell - shaun@tactile.co.za More info: http://tactile.co.za (eventually) Requires: jQuery 1.3.2+ Installation: ============================================== 1. Add the js/jquery.html_helper directory and its contents to your own webroot/js folder. 2. Edit jquery.html_helper.js, specifying the webroot path to the accompanying tooltips.css Optional: Set a debug level by editing jquery.html_helper.js again, this time setting the helper_debug_level to either 'warning' or 'error'. Known bugs: ============================================== * Tooltips aren't expanded on hover in Google Chrome / Safari. * I'm getting some memory / CPU usage problems in Firefox 4.0.1 since I added detectors for and/or <blink> elements. Ideas: ============================================== * Enable / disable Helpers by setting a class on an element. * As above, but if set on a certain parent element, then you're inherently setting scope - any child elements will be checked, but not upwards? * Allow the developer to set a level of Help. E.g. Errors only. - DONE * Look at themed location of tooltips like Growl notifications. i.e. tooltips always appear in the same location. This will help prevent tooltips from flying off the right and bottom of the page when the affected element is near the sides of the viewport. * HTML validation based on doctype (see below) * Turn this into a Bookmarklet or Firebug plugin - http://www.softwareishard.com/blog/firebug-tutorial/extending-firebug-hello-world-part-i/ TODO: Things to check for in terms of HTML well-formedness and validation: ============================================== :not(html) {} /* No <html> node (this is still valid HTML5 though) */ :not(html > body) {} /* <body> element is not a child of the <html> element (this is still valid HTML5 though) */ :not(body) {} /* No <body> node (this is still valid HTML5 though) */ html body > h1, html body > h2, html body > h3, html body > h4, html body > h5, html body > h6, html body > p, html body > div {} /* The <body>'s direct descendants should be block elements */ /* Document well-formedness? */ Duplicate IDs? /* Invalid HTML5 elements */ acronym {} /* Invalid XHTML elements and attributes */ applet {} basefont {} center {} dir {} font {} isindex {} menu {} strike {} s {} u {} a[target] {} script[language] {} b {} i {} option[required=""] {} option[disabled=""] {} option[selected=""] {} input[checked=""] {} /* Accessibility checks */ if [title] == .text() (Repeating innerText in the title of the element is silly) table:not([summary]) {} th:not([scope]) {} td:not([headers]), th:not([headers]) {}