Time Your Website with WebWait.com

Update (2 days later): The site’s been popular – 10k+ views yesterday. Hit Delicious Popular and somehow got caught up in the German blogosphere, the greatest source of hits. Technorati it. There’s a good discussion in Ajaxian of the strengths and weaknesses of this technique. As with AjaxPatterns, which also reached Delicious Popular, it failed to attract Digg users somehow. (Digg was supposedly inspired by Delicious Popular. Incidentally, Digg doesn’t let you submit URLs with fragment identifiers such as http://webwait.com#digg.com, which rules out any Ajax site attempting to allow bookmarks.) Go figure. Or better, go Digg :).

Here’s another new website – WebWait. I wanted a portable, consistent, way to benchmark Ajax web apps, that would show how long the wait is (though it’s useful for any app, especially if there were a lot of images, for instance). Using a command-line tool like curl is an improper simulation and doesn’t cut it as a proper simulation. WebWait has the following benefits:

  • Runs in a browser. You get actual load times in the same client web users are running, not simulated times.
  • Runs in multiple browsers. There are plugins that do this, but as well as the installation overhead, they are usually specific to one browser. With WebWait, you can just cut-and-paste the same URL into different browsers. (No Safari yet as it doesn’t listen to iframe onload ???.)
  • Respects your cookies and authentication – If you can access a URL in a web page, you can benchmark it with WebWait. Trying to set up cookies for use with a command-line tool like Curl is hard work. Doing it with a plugin is usually impossible. Doing it with a third-party website is dangerously insecure.

Quick feature list as it stands right now:

  • Basic functionality: Type a URL, see how long it takes to load.
  • Option: Set the delay between calls. WebWait will call the website multiple times and provide an average load time.
  • Option: Set the number of calls before ceasing activity.
  • Ability to pause.
  • Partially transparent lightbox eye candy.
  • Unique URLs – it’s Ajax, but that shouldn’t stop you from bookmarking and sending URLs with details of the website being tested. Incidentally, implementing this rare but highly useful feature took three lines of Javascript.

Have fun. Any comments/suggestions, please let me know!

See the FAQ for more info.

Tables – The Secret Behind Every Simple CSS Form

Tableless forms are painful. Every time I start trying to create them, I wonder why I am going through the motions. Some vague sense that it will be “more accessible” and I’ll be able to tick an abstraction of a “web standards-compliant” box. But really, these table-less constructs are supposed to make page authoring easier, not harder. In the case of forms, table-less CSS makes it much harder.

Here are some examples of popular blog articles explaining how to create table:

CSS-Only, Table-less Forms (Jeff Howden) “Most of the CSS-only, table-less forms available suck.” He’s talking from an aesthetic perspective, not programming perspective whose suckiness I speak of here. What he does though, is show how to make a pretty form. The rub is over 300 lines of standard-formatted CSS, let alone the HTML. He does a good job, and I have no reason to question that the 300 lines is required; it’s a sad reflection of what’s required to make a neat form, albeit a fairly complex one.

A List Apart on Accessible Forms A more pedestrian tutorial on the basics of table-less forms. Weighing in at a mere 46 lines of CSS.

Using a table and just a handful of CSS lines, you can achieve pretty similar stuff. It won’t get an accessibility auditor’s magic tick, even though it will probably be quite accessible. It won’t be a semantically valid structure either. That won’t actually bother your users or any modern search engine, but if the thought scares you, you should get started with those floats and clears. For all these problems, you’ll be rewarded with one great benefit: you’ll be able to build it in a matter of minutes.

For typical forms where you want to be agile and get the thing published, stick with tables.