Essential web development tools for Firefox

Firefox eats IEI was chatting with a friend online this evening (hello Steve!) about web coding, and I offered him my three favourite add-ons for Mozilla Firefox which I find absolutely essential for coding and debugging HTML, CSS and JavaScript.

Work in Firefox, debug in IE

When developing code I tend to always work with Firefox first. When I’m happy that my code is working properly, I’ll then test it in Opera and Safari and only then will I check it out in Internet Explorer 6 and 7.

And then typically I’ll spend the next fortnight debugging my nice clean code in IE, trying to find workarounds that will make my pages work properly in the world’s favourite (and most terrible) browsers.

It’s only the most popular because people are too lazy to install something better. Or don’t realise that there is something better. “But it looks okay to me…!”

Seriously, if there was a car that killed as many people as IE kills good quality web code, it would be banned in a flash.

1. Web Developer

Web Developer toolbar

Web Developer by Chris Pederick adds a toolbar and a new submenu to Tools to Firefox, which are absolutely packed with web developer tools.

There are 12 main sections on the toolbar, which give you access to all the tools and features:

  1. Disable
    Allows you to disable anything from Java to JavaScript, Cache, Meta redirects to colours.

  2. Cookies
    Disable, delete, clear or view cookie information.

  3. CSS
    Not only can you view CSS, you can also edit live CSS in the cache and see what effect your changes have.

  4. Forms
    Display form details, show passwords, change GETs to POSTs, etc.

  5. Images
    Disable or hide images, display alt attributes, image dimensions, etc.

  6. Information
    View all sorts of details about the page from ID and class information to blocks, anchors, links, tables, document size, headers and lots more.

  7. Miscellaneous
    Show comments, show hidden elements,show a ruler on the page, etc.

  8. Outline
    This is one of my favourites — here you can single out a particular page element and find out the markup, class and ID information. Essential for debugging or writing CSS.

  9. Resize
    Define preset page sizes for testing, eg 800 x 600, 1024 x 768, etc.

  10. Tools
    Validation, DOM inspector, Error and Java consoles.

  11. View Source
    View Source, Framed Source and Generated Source.

  12. Options
    Options, Help and About.

I use this add-on all the time, particularly for debugging code or learning about someone else’s code.

It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

2. Firebug

Firebug

Firebug offers a few similar features to Web Developer but it really comes into its own with its own separate window. Here you can explore the HTML, CSS, JavaScript, all viewable by DOM, Styles or Layout.

Two of my favourite features are the ability to point at a line of code in the Firebug source view and the corresponding section of the actual page is highlighted (check out the blue highlight in the screenshot above), showing you exactly what that code relates to on the finished page. It even shows margins and padding in different colours (yellow and purple).

It will also show you the CSS cascade: which CSS rules are being used for that section of the page, and which are being overruled.

Firebug will also allow you to edit HTML, CSS, and run live JavaScript on the cached page, making it one truly remarkable and powerful add-on to your web developing toolkit.

3. HTML Validator

0 errors / 0 warnings

HTML Validator is an add-on that shows HTML validation information within your Firefox browser window, rather than having to go to a separate site, such as http://validator.w3.org.

The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page.

It really is that simple. You can specify the type of validations to check, including accessibility.

Conclusion

Those are my top 3 web developer add-ons. Of course, Microsoft also has its own Internet Explorer Developer Toolbar, but to be honest compared with the polished and precise offerings for Mozilla, the IE version has the elegance of performing open-heart surgery with a wooden spoon and a spanner.

Other developer-related add-ons that I’ve used, include:

  • JavaScript Debugger – This is Mozilla’s official JavaScript debugger, code named Venkman, which aims to provide a powerful JavaScript debugging environment for all Mozilla based browsers.
  • View Source Chart (creates a colourful chart of a web page’s rendered source code, which can be very useful.
  • UrlParams – Shows you the GET and POST parameters of the current website in the sidebar, and allows you to edit and submit your own values. Useful for testing forms.
  • Operator and Tails – two add-ons for showing Microformats information .. but that’s for another blog post

I tend to keep most of these installed (apart from the Microformats add-ons) but disabled, and only enable them when I need them. That way they are close at hand, but don’t take up valuable system resources for the 99% of time that I’m not using them.

Why web standards matter

Screenshot of web code
Screenshot of web code, as viewed in the excellent Firebug add-on for Mozilla Firefox.

These last couple of weeks I’ve spent much of time, both at home and work, puzzling over a coding project I’m currently working on at the University; which is partly why my blogging activity has been more intermittent than usual.

Baseline browsers

For this particular project we set a baseline of which browsers we would support, based in part from the visitor information we gather on the University’s homepage. This collects information about which browsers are being used, the user’s screen resolution and the number of colours their computer will support; no personal information is gathered. Having examined this data we decided to support Safari (Mac OS X), Internet Explorer 6 and 7 (Windows), Mozilla Firefox (Windows, Mac and Linux) and Opera 9 (Windows, Mac and Linux).

What happens when you have to support IE6

That we have to support IE6 — because many of the PCs at the University run Windows 2000 which will not run the newer IE7 — has had a serious impact on our coding time. Here’s what happens on a typical day as I work through our specifications list:

  1. I spend maybe 30-60 minutes coding one particular aspect of the site, e.g. page layout, using standards-compliant CSS.
  2. I test it in Firefox 2 – it works.
  3. I test it in Opera 9 – it works.
  4. I test it (by sending the code to colleagues) in Safari and Linux Konqueror – it works
  5. I test it in IE7 – it (usually) works.
  6. I test it in IE6 … and then say something like “Oh dash it!”
  7. I spend anywhere up to 3 or 4 hours ‘debugging’ it to find out exactly why IE6 won’t render the page correctly. This usually involves either adding an additional CSS statement (e.g. width: 200px;) or completely rewriting the code from scratch.
  8. Repeat with the next element on my project spec.

As you might imagine, this can get quite tedious.

Acid2 Browser Test

The problem lies in the way that different browser manufacturers have interpreted the web standards as laid down by the World Wide Web Consortium (W3C). These standards, published as W3C Recommendations, are guidelines for, amongst others, browser software developers so that they know how their products should properly render web pages.

And as you might guess, some are better than others. Some follow the rules closely; others are a little more relaxed. And to test how compliant a particular browser is the kind folks at the Web Standards Project have provided an online ‘acid test’, called the Acid2 Browser Test. Using XHTML and Cascading Style Sheets — so no graphics, just div tags and background colours, and stuff™ — it tries to display a smiley face with the words “Hello world” above it.

Acid2 Browser Test results

Here is how the four Windows browsers I mentioned before (Firefox, IE7, IE6 and Opera 9) fare with the Acid2 test:

Firefox 2

Firefox tries the Acid 2 test and almost passes

As you can see Mozilla Firefox does not too badly. At least, it looks sort of like a face, even it is wearing a mask. If it were a film it would probably be Girl Interrupted.

Gran Paradiso (Firefox 3) Alpha 2

Firefox 3 passes the Acid2 test

Thankfully the core layout code has been rewritten for Firefox 3 (currently in Alpha) which fixes the problems evident in Firefox 2’s rendering of the Acid2 page.

Internet Explorer 6

IE6 fails the Acid 2 test

The troublesome Internet Exploder 6 utterly decimates the page. It should perhaps be renamed Internet Exploder and left in a drawer to gather dust. Would you believe this is the world’s most popular browser? Look what it has done to some nice programmer’s code! If it were a film it would probably be [insert name of gore-fest horror pic here].

But worry not, Microsoft improved things and released …

Internet Explorer 7

IE7 tries the Acid 2 test and fails spectacularly

The latest (and greatest?) version of the mighty Microsoft’s browser, Internet Explorer 7, which erm … well, to be honest, fares only a little better than its little brother (browther?). If it were a film it would probably be the sequel to [insert name of gore-fest horror pic here]!

Opera 9

Opera 9 passes the Acid 2 test and shows a smiley face and Hello World!

And then Opera 9 steps up to the plate and delivers 100%. That is how the page should look. If it were a film it would be your favourite feel-good movie, one that you could watch day-in, day-out. Lovely.

Konqueror (Linux)

Konqueror passes the Acid 2 browser test

And since I know you’re all wondering the same thing: “But how well does the Linux browser Konqueror do on the Acid 2 Browser Test?” I’ll tell you. It passes with flying colours too. (Thanks to Mike for the image.)

Safari (Mac OS X)

Safari passes the Acid 2 test

And good old Apple also manage to get their browser to pass the Acid 2 Browser Test with their Safari browser. (Thanks to “a mate” of Mike for this screenshot.)

The moral of the story

Imagine if your tv did this to the programs, videos or DVDs you watched. Viewers wouldn’t stand for it. So why do web users stand for it?

The moral of the story is don’t use Internet Explorer, use something better. I can thoroughly recommend both Firefox and Opera, which I’ve been using for a good few years now.

If you like customizing your software, with various add-ons, then choose Mozilla Firefox. If you just like a fast, attractive browser that shows things the way they should look then download and install Opera 9.

If you’re using Mac OS X then you are probably using Safari already, which I believe is pretty cool. And if you are using Linux then you’ve probably already compiled the Konqueror source code and installed it on your über-geeky homemade distro yourself, and I’m preaching to the converted!

You know it makes sense.

Geek adventures in Glasgow

Glasses

Yesterday I travelled through to Glasgow (by railway) to attend the Scottish Web Folk forum meeting at the University of Strathclyde.

The Scottish Web Folk group is an open forum for all the web managers and web developers from the 22 Scottish Higher Education Institutions. Yesterday’s meeting was attended by representatives from

(Apologies if I’ve missed anyone.)

Of course, before I got there I had to make sure that I wasn’t killed in transit.

Shortly after leaving Queen Street station I stepped out onto North Hanover Street, en route to the University of Strathclyde’s Collins Building on Richmond Street, only to be stopped suddenly in my path as a Strathclyde Transport bus came swinging around the corner.

I stepped quickly back onto the pavement and stood looking at the side of the bus, which had paused, unable to turn the corner completely because of a car on the opposite side of the road which had stopped for the traffic lights.

Right in front of me — blocking both the road and my line of view — was a lingerie advertisement for Matalan: five or six scantily-clad ladies, who would have caught their death (not to mention would have been arrested) if they had been wandering around Glasgow in person dressed that way.

Imagine if the bus had knocked me down, I thought. Imagine if that had been the last thing I’d seen as I shuffled off this mortal coil. Depending on one’s theology, in comparison heaven may have been a sorry disappointment! But thankfully for me it wouldn’t have been, and since I wasn’t mown down in my prime I’ll live to see another day (and presumably another similar advertisement on the side of another similar bus).

The first item on the agenda at the Scottish Web Folk meeting was an excellent presentation by someone from SAC about CSS which led to a minor debate as to whether the XHTML <br /> tag is a block-level or an inline element.

David, who was making the presentation, had copied a list of block-level elements from somewhere which had included the BR tag. A number of us questioned this and so I decided to settle the matter and sent a text to Any Question Answered (63336).

Ten minutes later I had a reply:

AQA: Within XHTML the <br /> tag is a block element. Block elements define a discrete block of text, whilst inline elements are used to style content.

Which is just so wrong on so many levels (‘block’ or otherwise!). I suspect yet another £1.00 refund winging its way to me shortly from AQA.

Here’s what the W3C — the internet body that sets standards, such as HTML, CSS, etc. — says about inline elements. This is from section 3 “XHTML Semantic Modules” within the document “Modularization of XHTML™“:

3.3. Inline modules

Inline modules defined elements and their attributes that, when used in a document, effect their contents but do not cause a break in the rendered output.

Within both block and inline modules there are three subcategories of module:

  1. Phrasal
  2. Presentational
  3. Structural

And paragraph 3.3.3 shows that <br /> is an inline XHTML element:

3.3.3. Inline Structural Module

This module defines inline level elements to help control the structure of their enclosed content. Elements included are:

  • bdo
  • br
  • del
  • ins
  • span

So, David owes me a new kidney (he’d offered me a pint, but I don’t drink because of my dodgy kidneys so I felt that that was the next best thing) and AQA owes me a quid!

A fine day all round, then.

(Incidentally, the early time of this posting (pre-05.00 am) is courtesy of a nocturnal “meet the neighbours” incident involving our two cats and another similar beast in the utility room.)

Designing With Web Standards (Second Edition)

Spot the difference:

Designing With Web Standards (First Edition) Designing With Web Standards (Second Edition)

In the three years since Jeffrey Zeldman wrote his first edition of Designing With Web Standards his book cover has now turned green, the content has been printed in full technicolour and it appears (from the cover photo at least) that he now looks like Bob Carolgees in a beanie hat!

My copy of the new edition arrived last Saturday and I’m really looking forward to the opportunity to get into it. Not literally, I mean “read it”. I took the first edition on holiday with me, a few years back, to Tenerife. While Jane and her parents explored the island I sat on a balcony reading about the importance of Web standards. It’s not as sad as it sounds.

Well, okay, maybe it is but I certainly learned a HUGE amount from that book. I don’t think I’m exaggerating to say that that one book turned my life around entirely and helped to make me a completely different person.

Well, okay, maybe I am exaggerating a little, but that book gave me a new insight into what was possible with Web design. It gave me an insight into the importance of writing good, logically structured documents which are then displayed using Cascading Style Sheets. I’d read alot about both before but no-one had explained it to me quite so clearly and entertainingly as Mr Zeldman did on that balcony in the Canaries.

If you already have the first edition you probably don’t need this one (except for completeness) as you’re probably aware of the importance of standards and are keeping up with what’s going on (at places like A List Apart, for example). But this edition has been brought completely up to date. It even talks about Internet Explorer 7.

I thoroughly recommend this book to anyone vaguely interested in Web design and standards, and particularly if you are the kind of person who thinks that it’s okay to write Web pages with a class or div for everything and who uses H1, H3 and H4 tags without H2.

CSS walk-through tutorial

Snippet of CSS code
Snippet of CSS code.

For those who’ve ever wanted to get into Cascading Style Sheets (CSS) coding, but never quite got around to it, or couldn’t quite grasp what it was all about; or perhaps you just want to know what it is that some of us coders are going on about, Albino Blacksheep’s Live Design tutorial is for you.

What is CSS?

In recent years there has been a drive to separate the content from the design of web pages. That way updates to the look of a site can be made quickly and efficiently. This is done largely using Cascading Style Sheets: text files that explain to the web browser how to present the information on a page, eg make all links blue and underlined, make all headings black, Arial and 24 pt, etc. That way one change of the code in one file can update the look of an entire website.

There is a really good introduction to CSS at www.cssbasics.com. To see a website being transformed step-by-step with CSS look no further than Albino Blacksheep.

In 18 steps Albino Blacksheep (for that must be his/her name) walks visitors through the redesign of the ABS website.

From…

You can see how ABS started like this, with a basic, ‘no-frills’ marked-up page…

screenshot

To…

… to this, graphically pleasing offering. Using nothing more than the power of Cascading Style Sheets (CSS).

screenshot

CSS Zen Garden

Another impressive site, for those who’re unfamiliar with it, is the CSS Zen Garden. The premise of this site is that within each design the HTML page code is always the same, all the designers are allowed to change is the CSS file. Impressive stuff.