Unintentionally Blank

Lists are semantic, tables are bad, right?

What seems to be the view of some in web development is now finally coming under scrutiny as mistakes are made. Put it this way, tables aren’t always bad and lists aren’t always semantic, context is important. The examples that have brought this to my attention have been quite surprising because of the amount of effort it has taken to create them.

CSS Calendars

First, a week ago Rob Glazebrook posted a list based CSS calendar at CSS Newbie and that was followed up by Chris Coyier and Tim Wright’s elastic, list based CSS calendar at CSS Tricks. Hacks and unsolved problems aside my belief is that their solutions are taking both the creators and the readers of the respective blogs down the wrong path (though thankfully Tim and Chris did finish with a disclaimer it was perhaps a little bit too far into the small print for the first few commenters who thought it was a great idea).

While I don’t disagree that a month is a ordered list of days I don’t think the markup chosen is as semantic as it can be for the presentation Rob, Tim and Chris were aiming for. As it happens there are physical calendars that are set out in a vertical list and it is perfectly reasonable to set things out as a list of days. However, grid based calendars are, well, a grid. A grid where the columns relate to days of the week as well, so why not take advantage of that.

Use the right tool for the job

I won’t say any more for now, just show some examples that I thought I’d come up with to illustrate the point. Here is a calendar using Rob’s list markup (minus the invalid clearing div as a child of the ordered list) followed by the same calendar created using a table. As you can see, with no CSS, the table is already part of the way towards the layout the list based calendars were aiming for and, because I added days of the week at the top as <th> with a scope of col a screen reader will read out the day of the week for each cell in the table it reads adding to the accessibility. To show why using the correct tool for the job makes life a lot easier, I even tidied up the table based calendar with just 4 CSS rules.

When you are creating a list of days in a month, a list is perfect, when you are creating a grid of columns of days a table suits the job. Just because you can use something else doesn’t mean you have to, the right tool for the right job not only makes your life easier but makes more sense on the page too. Have a look at my examples and decide for yourself.

Chris Pederick’s Firefox extension, the Web Developer extension, does almost anything you can imagine will help you get under the skin of a website. Since its release in June 2003 it has become the standard in any web developer’s tool box because it does so much that everyone can find a use for it. It has so many options that I haven’t used all of them, but I have my favourites and the ones I use daily and I’m sure that there are things that I would use if I had the time to find them!

So What Does It Do?

The toolbar is massive, there are menus with sub menus and sub menus, Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Tools, View Source and Options are the top levels. I would go through each one but that would take forever, so I’ll let you know a few of my favourite uses of the toolbar. If you use the extension, please let me know if I am missing out on any really useful parts in the comments.

Disable Anything!

Great for testing your site against all sorts of user set ups, you can disable images, JavaScript, CSS, the cache, cookies, Java and the list goes on. I particularly like the quick ability to turn off JavaScript to test that a site is accessible without JavaScript enabled.

Display Anything!

You can display anything from image alt attributes to information about any element (much like XRAY). I like the quick access that you have to view all of the CSS or all of the JavaScript for a page with just a couple of clicks, especially when dealing with code written by others.

Outlines

It’s remarkable, but being able to draw an outline around any element, group of elements or all elements, can really help in debugging style sheets. Seeing where the element is on the page by surrounding it with a red border, just by hovering over it is much easier than adding debugging code to your style sheets.

External Tools

The Tools menu allows you to use external validators and other measures to test your site. You can even add tools to the list, though quick links to W3C validators are sufficient for me at the moment.

Edit On The Fly

Editing the CSS or HTML and seeing the results instantly can help enormously when developing. CSS editing is my top use for the Web Developer extension.

There are quite literally hundreds of uses for the Web Developer extension, my thanks must go to Chris Pederick, I hope he continues to maintain this fantastic bit of kit for use in Firefox as long as I’m developing.

If you haven’t used the extension, install it now, if you do, what are your favourite functions?

I’m kicking off my web developer tools series with, what I imagine to be, a lesser known tool from WestCiv. It may sound more like a procedure in a hospital, but XRAY is a simple but invaluable tool in any developer’s belt.

Quick, Simple, Informative

XRAY allows you to take a quick look at some vital properties of any element on your page. Fire up XRAY, click on an element and you will see its name, id and any classes, its position in both the page and the page hierarchy, height, width and whether it is floated, its border, padding and margin. A whole lot of information presented very neatly.

Even better is the visual way in which XRAY displays your information. Not just presenting it in the heads up display, but highlighting the element on the page, colouring the padding and margins and displaying the position, height and width next to the element too. And that’s not all, the latest version of XRAY allows you to navigate between ancestors and descendants of the element with your up and down keys and between siblings of the element using left and right.

One last thing about XRAY, it is usable in most browsers as it is a bookmarklet. There is no downloading, just drag it from its home to your bookmarks and you can click it at any time to bring up the tool on any site. Though it can be a pain to use in Internet Explorer, this can be very useful to tell if there are any differences in basic proportions between IE and your favourite standards based browser.

It’s quick, simple to use, available for most browsers and gives you information about your web pages with just a couple of clicks. I tend to use this as a quicker alternative to more complex Firefox extensions and highly recommend it for use when building anything from the very simple to the very complex web layouts. Try it out here, XRAY this page! If you like it, get the latest version from WestCiv and XRAY any page!

Since starting full time in the web development industry 4 months ago I have picked up a number of different tools I use every day to make my life easier and my coding quicker. A lot are based on my favourite browser, Firefox, some can be used with any browser and others are the simplest of text editors.

Over the coming weeks I am going to share with you my experiences of each tool I use daily for development. With any luck I will introduce you to a few new tools that you may not have heard of and will help you out. I would also like to hear what your favourite development tools are too and if there are any I am missing out on.

So, keep an eye out for my web developer tools series, first part coming out later this week.