Web Testing Framework

June 20th, 2010. Tagged: tools, Web1.0, yslow

There's a new version and now hosted on AMO (addons.mozilla.org). Get the new version there and it will take care of auto-updates in the future.

WFT

Web Testing Framework (WTF) is an extension to YSlow that tests for the following shady web dev practices:

  • Use of <blink>
  • Use of <marquee>
  • Use of <font>
  • Missing doctype
  • Use of spacer GIFs
  • Use of <a href="#"..> and <a href="javascript:...>

Gimme!

Note that this extension requires Firebug and YSlow2

Help

Please report any bugs here and also suggestions for more checks for what you think is bad practice (and is technically possible to test by a tool, as opposed to a human)

Thanks!

Thanks to Ryan Grove for inspiration with the naming of the new tool :)

Motivation

The motivation is mainly to demonstrate how easy it is to create new extensions and new checks to YSlow. They don't even need to be performance-related.

There are two basic concepts. 1. A rule is a type of check like "use gzip". 2. The pool of available rules can be combined into rulesets. The API is therefore just:

YSLOW.registerRule({...});
YSLOW.registerRuleset({...});

The first takes an object containing name, id, info about the new check and a lint() function that performs the check. The second accepts a config object - which rules go into the ruleset.

Check this file - that's all it takes to do a new extension.

Tell your friends about this post: Facebook, Twitter, Google+

30 Responses

  1. So why I should avoid # links? (Links should be links. Links with href such as href=# and href=”javascript:” should be avoided like the plague)

  2. well, then you turn off JavaScript what happens to those links?

  3. Yeah, I’m quite guilty of making JavaScript links.

    I think the idea is to use JavaScript to add onclick events to parts of your website. Frameworks like jQuery make it fairly simple to add an onclick event and prevent the click from activating any hyperlinks in the same part of the page.

    The href parts should be written so that your website will work in a purely JavaScript-free fashion when a browser lacks or has disabled support.

    If I’m totally wrong about this then let me know. :)

  4. It could be interesting to add some elements like “iframe”, “frames”, sites “designed with tables” and not css… if i’ve new ideas i’ll send you :) it’s a great tool.

  5. Does it only test static HTML, or generated HTML as well? I ask as JavaScript links are not really a problem of course when they’re inserted into the DOM by JavaScript itself.

    If I where not visiting this page on my Android I would have tested it myself of course :)

  6. Your tool is really a great idea, here are my suggestions:

    Link such as <a href=”#” can be anchors, such as a “Back to the top” link, not only JavaScript links.
    Like Javier, I’d like to see iframes and designed with tables rules.
    And also, you can add rules for inline css and javascript.

    Good Luck!

  7. @Bruno, I think href=#top is fine (and the tool forgives), but not href=”#”

    @Sander, yes, the JS-modified DOM is inspected. Will think about inspecting the static HTML

    @Javier, @Bruno – tables for layout is something I thought about, just unsure how to check. Maybe require at least one TH in addition to TD?

    Not sure about iframes, ads and such still need them…

  8. @Stoyan: what about if it have inside the table?

  9. @Stoyan: what about if it have inside the table?

    P.S.: htmspecialchars($comment) :)

  10. aaaaaaaa :)

    @Stoyan: what about if it have h1 inside the table?

    P.S.: htmspecialchars($comment)

  11. This really has some potential. Few low weighted additions could be the presence of a favicon, and really just take advantage of YSlow’s interface with mark-up validation, in it’s simplest form missing closing tags etc. Do you know of any SEO YSlow mods as there’s definitely room for that?

  12. Welcome to the Web police!
    You are not authorized to use href=”#”.
    You are not authorized to use spacer.
    You are not authorized to use frame.

    The next step : you are not authorized to use HTML

  13. I like the url of this page.

  14. One other thing…reminds me a bit of Inline Code Finder by Robert Nyman…which prompts me to ask, what about inline styling?

    https://addons.mozilla.org/en-US/firefox/addon/9640/

  15. Please add a check for onClick, onChange, etc attributes as well, at least as an option. Although better than JavaScript links, use of these attributes is still a discouraged practice. Adding JavaScript behavior should be fully unobtrusive. I would love to have a tool like this to help enforce that on projects that I work on with a team.

  16. You can borrow ideas from Eric Mayer’s diagnostic CSS: http://meyerweb.com/eric/tools/css/diagnostics/

    Event attributes (onThis and onThat) are a good idea, inline styles too. I think that the only valid method to catch presentational tables is to look for nested ones. Maybe a looser check for missing thead, th elements will be helpful.

    @Vlado, since you can use some HTML in the comment form, htmlspecialchars() is not a good idea.

  17. I don’t know the full capabilities of yslow, but if it is possible, remove height and width styles and sizing from images, and if the dimensions turn out to be 1×1, then you can mark it as a spacer image.

  18. @Ping, that’s possible, but sometimes 1×1 images are used for tracking and not for layout

    That’s why I check for 1×1 dimensions and in addition look for hints in the image URL, such as “dot” and “spacer”

  19. ‘#’ is perfectly fine and is normally used for ajax calls. Including that as spammy is a bit ridiculous.

  20. @Anthony ‘#’ by itself is not perfectly fine. Using the hash to point to a particular section of a page is acceptable, but the href attribute should never contain only ‘#’.

    Using progressive enhancement, the href should start out pointing to a vaild link. The click handler that is attached unobtrusively can override that, but the link should be functional before Ajax or any other dynamic behavior is added.

  21. Thanks! Added it, to my collection of useful plugins.

  22. [...] Web Testing Framework http://phpied.com/wtf/ A YSlow extension for inspecting shady webdev practices [...]

  23. [...] Web Testing Framework 0.0.1http://phpied.com/wtf/ [...]

  24. Hash links are pretty common npwadays and I definately wouldn’t call them a shady practice. Hash links are required for a lot of banner rotators and for obvious users like navigating a very tall page.

  25. Very useful plugin – thank you!!

  26. hotels and travel resources…

    [...]Web Testing Framework / Stoyan’s phpied.com[...]…

  27. [...] YSlow can also be used as a framework to build extensions that talk to browser, refer to Stoyan Stefanov’s article for code samples: Web Testing Framework [...]

  28. emc testing lab…

    [...]Web Testing Framework / Stoyan’s phpied.com[...]…

  29. Thank you for the auspicious writeup. It in fact was a leisure account it. Glance complex to far added agreeable from you! By the way, how can we be in contact?

  30. Any hint how I can integrate these rules into ySlow for Chrome?

Leave a Reply