Essential resources for client-side web engineering

Tools

• The core web development tool is the Mozilla Firefox browser. The other tools are designed to go with Firefox, although many can be used with other browsers as well. Why Firefox? It's the native development platform of an overwhelming percentage of the architects of the Document Object Model; the core standard for client-side web work. Doing your development on the platform they use maximizes your ability to understand what they are thinking.
• Critical Firefox plugins:
  • The Web Developer toolbar/menu provides a wealth of tools for working with (X)HTML, CSS, and, when combined with the DOM inspector, the DOM. Ideal for exploring web pages, learning to 'see' the box model, etc. Validates (X)HTML, CSS, and accessible design. Why should you validate your web markup (XHTML, CSS, ....), given that the page still displays correctly? Because that's about all you can trust it to do if it doesn't validate - display on the exact version of the browser you are currently viewing it on. It probably won't print the way you would like, people with disabilities probably can't access it, future versions of browsers probably won't be able to parse it, search engines probably can't index it, etc. Notice all those probablys? If your markup validates, some of those questions just disappear, and the others we can check explicitly. More than that, all the cool interactivity depends on your markup being correct.
  • Firebug provides a rich development environment for Javascript. Combine Firebug with Selenium, a testing harness for the Document Object Model. Testing harnesses let you run test suites automatically, which radically improves both your life and your code The Selenium IDE offers full-featured interactive front end to Selenium, but has a bit of a learning curve. Here are a variety of strategies to bootstrap yourself:
    • Grig Gheorghiu's step-by-step intro to using the Selenium IDE.
    • desi's more orienting intro to the Selenium IDE.
    • a movie (one of several) of the Selenium IDE from its own documentation.
    • Finally, you can always start with Molybdenum, a simpler interactive front end to Selenium. Molybdenum has it's own documentation, including a quickstart and some tutorials. However you get started, once you get the basics under control and move on to using Selenium for test-driven development, you'll need to read the Selenium Reference Guide to learn how to write tests by hand.
  • NoScript is a terrific way to learn how Web2.0 works, not to mention a terrific way to speed up your web browsing. NoScript lets you opt-in rather than opt-out of a tremendous amount of the data collection on the web, as well as any number of other benefits.
• Unfortunately, no code coverage currently exists for Selenium. An alternative approach might be to use JsUnit a Javascript unit testing framework that can be integrated with JSCoverage, however I haven't used this approach much myself, so can't speak to how well it works.
• For working with XML, XML Schemas and XSLT, the oXygen XML Editor is pretty wonderful, but it isn't free. For under $50 for an academic license, though, with a 30 day free trial, it's a bargain. And it comes as an Eclipse plugin, for the Eclipse addicts out there. W3C does provide a free XML Schema validator, so it is possible to work with these beasties without a tool, but seriously sub-optimal. Schemas are hard to wrap your head around when you first start working with them, and a decent tool makes a major difference.
• The W3C QA Interest Group maintains a wonderful Toolbox with all sorts of goodies, more server-side than client-side, but some of both.

Tutorials & References

• Markup languages: XML, (X)HTML, CSS, XSL, ..., I like the ones at W3Schools? because they do not teach you bad habits (for the most part), because they have good examples, and because they have cool interactive try-it-out widgets.
• Understanding and learning to read the W3C technical reports (aka recommendations) themselves is an important skill to develop for anyone who is serious about a career in web development. Read the W3C Technical Report Development Process report, or at least skim it, to get a feel for what the various kinds of reports mean, then start referring to the actual reports while working with the various web technologies so that you develop your skills gradually. Using the reports this way, consulting them when working on problems, will help you make sense of the contents, nature, and intent of the reports and the process of the W3C. You can view all W3C technical reports by activity here.
• Javascript is the native language of the Document Object Model, the API for web resources. Learning to understand, respect and wield Javascript as the nifty, unique tool that it is is critical for any serious web developer. The Javascript Phrasebook does an excellent job of orienting you in the wild-n-woolly world of browser scripting, and is available, as of December 2008, in the Safari digital library. For a more complete introduction, I really like Javascript: The Definitive Guide, 5th edition, by David Flanagan, also available via the Safari digital library.