DOM Inspector

Yes, yes, it comes installed with Firefox, but lets not forget the basics. The DOM Inspector allows you to see what is actually going on in your web document. The DOM Inspector lets you browse DOM nodes, style sheets, or Java Script objects. You select a node by either drilling down, by searching, or by clicking on it. Although, the UI for selecting a node with your mouse is just plain lousy. Once you’ve chosen your subject, the DOM inspector can show you the box model information for that node, the style sheets associated with the node, the computed CSS styles, or the Javascript object.

Web Developer Extension

Chris Pederick’s Web developer extension has been out for a long time and is the plugin I am most familiar with. This is really the swiss army knife of web developer tools. It is so feature packed that I am still finding new things that it does. Unfortunately, the UI is also so cluttered that I am still finding new things that it does.

This add-on can slice and dice a web page every which way. It can outline a variety DOM elements, for example drawing an outline around all block elements on a page. This can be nice for lining things up. The Display Line Guides option is also a good way to verify alignment, not to mention Display Ruler, or Display Page Magnifier for fine detail.

This extension has dozens of reports, each one geared toward diagnosing a particular kind of problem. Some of them are external, such as sending your URL to a validation service. Some are internal, such as showing a dump of all of the page’s active cookies. Unfortunately, many of these option open up in a new tab, taking the focus off of the page that you are trying to work with. It can be hard to tell which options do this. There is an option for having the tabs open in the background, but this is not the default.

The View Style Information option is particularly nice. You can point to any element on the page and the extension will display the element tree along with ids and classes. If you click on an element, it will display only the style rules that apply to that element. This beats the drill down approach in the DOM inspector, although it doesn’t show box model information or computed style information this way.

The web developer extension can change things as well as inspect them. You can go into a mode where you can edit your CSS or HTML in real time for immediate feedback. This is great for testing out small changes. For the PHP developer, the extension has a variety of options for manipulating cookies and forms. There are also a variety of ways to enable or disable certain elements on the page.

Install Web Developer Extension

Tamper Data

Tamper Data is live HTTP headers on steroids. Tamper data records the HTTP request headers and HTTP response headers for each request that the browser makes. Not only that, It allows you to “tamper” with the requests before they are sent out, editing headers or form values behind the scenes. Tamper data can present a graph of the requests involved with loading a web page. Tamper data is great for security testing and page loading performance tuning.

Install Tamper Data Extension

FireBug

FireBug, ah what can I say but wow! According to their web site:

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Firebug has considerable overlap with the extensions I’ve mentioned so far. It doesn’t necessarily duplicate all of their functions, but the ones it does, it does really well. It goes way beyond in some cases. There is really no point in me talking about Firebug’s features, because the website already does such a good job at it. They’ve impressed this jaded old developer.

If you haven’t tried this one yet, seriously, go get it right now.

Install FireBug Extension

ColorZilla

ColorZilla adds a small eyedropper tool to the bottom left corner of the window. You can use this tool to inspect colors on the current web site. Double clicking it brings up a color picker and some other color related tools.

Install ColorZilla Extension

Multiple Profiles

Ok, I lied. There are a few situations where I use FireFox for casual browsing. Some web sites just won’t work with Safari, or don’t work well with Safari. For these, I pull up Firefox. I don’t want my casual browsing tools to clutter up my web development experience and I don’t want my web development tools to clutter up my casual browsing experience. The solution is to create multiple profiles in FireFox. I have one for web development and another for normal surfing. I have safari ask me to select a profile on start up. This extra step would be annoying for a primary browser, but it doesn’t seem too bad for a secondary browser.

Setting up my Mac series

Firefox is not mac specific, but this is actually the latest installment in my setting up my Mac series.

1. How to Transfer Mac OS X Application Data between Computers
2. Free Software for Mac OS X
3. FireFox Extensions for Web Developers
4. UPCOMING: Configuring Boot Camp and Parallels

My Grandma is doing well. They used an experimental new procedure called radio frequency ablation to remove the meta-static colon cancer tumors from her lungs. This procedure is amazing compared to the standard treatment. The doctors at the University of Michigan were impressive. We’ll know the results in a couple months when her lungs look a little less like scrambled eggs. We’re hopeful.

I’m not much for retrospectives. Looking forward into 2007, I have a few major goals. I joined a gym today. I’m going to get a new laptop and refresh my development environment next week after MacWorld. I want to get at least a beta release of WACT out by May. I have to prepare for php|tek. I need to find a new place to live by this fall. (Ann Arbor?) I want to move by the end of the year.

I loved all my christmas and birthday gifts this year. (My birthday is December 28th.) This year I pointed everyone to my Amazon.com wishlist and I ended up with a ton of good books to read. Jason Gillmore from Apress also sent me some web development books. My to-read stack for 2007 includes:

• The Promise of Sleep - A survey of the subject of sleep for laymen, written by a top sleep researcher. I’m almost done with this one. This book has a bunch of sleep deprivation horror stories and a good survey of what is known about sleep, which is not much. Its incredible that we know so little about something we spend so much time doing. Its also amazing how many people have easily treatable sleep disorders that don’t even know it. Do you snore?
• Don’t make me Think - Looks like a nice overview book on web usability.
• Domain Driven Design - Recommended by Jason and Marcus. How did I get this far without reading this book?
• Da Vinci Code - Wasn’t on my wishlist, but I’ll read it anyway. I read so little fiction these days. Where is a beach when you need one?
• Getting Things Done - I’m almost through this one. It is a testimony to the power of the ideas that this book expresses that so many people recommend it, despite its being so incredibly dull. Useful? Yes. Inspiring? No. But, then I’ve read enough of these self help / personal productivity type books for a lifetime. Anyone want to buy a Franklin Planner? I used mine until I got a cell phone.
• Practical Subversion - I’m really liking subversion. If you haven’t tried it, do so. I’m hoping to combine this with Greg Beaver’s book, The PEAR installer manifesto — the book on my wishlist I most wanted that I didn’t get, to create a new deployment process.
• Pro CSS Techniques - A CSS book that tackles maintainability? I’m really looking forward to this one.
• Pro MySQL - The last MySQL book I read was a couple years ago, yet I use it almost every day. I’m due for a refresh. This one looks good.
• Pro PHP Security - Never hurts to brush up. This one looks like it has alot on encryption, SSL and SSH; not strong areas for me.
• Pattern-Oriented Software ARchitecture Volume 2 - The first volume, A system of patterns, is one of my “always within reach when developing” books. Nice to add to the set.

Thanks for the books, guys. I’ll have in-depth reviews of some of these here in the future.

Happy New Year.

I wrote about web page loading performance a while ago, when I linked to Dave Hyatt’s most excellent explanation of the issues involved with testing page load speed. In fact the Safari browser blog endorses Aaron Hopkins article and mentions how to measure page loading times in Safari using the debug menu.

On the Mozillia front, the Tamper Data extension generates some amazing graphs of when elements on a page load and how long it takes.

On the topic of sending less data, the Yahoo! User Interface Blog weighs in on page waits with a discussion of javascript minimization versus compression. They also briefly cover the YUI decision to serve components a la carte, rather than in an aggregated file.

Cal Henderson of Flickr also takes up this topic in serving JavaScript fast. He goes into more depth about the issue of a la carte external objects versus aggregated external objects as well as covering compression and caching issues with examples in PHP.

From the PHP perspective, Michael J. Radwin and Rasmus Lerdorf have covered web application performance issues in conference talks.

Are your web pages cacheable or not?

On the home front, this is my first post on this blog since I’ve installed wp-cache2 and upgraded to eAccelerator 0.9.5. And my first post since my fishing vacation, too

10 fundamental rules for the age of user experience technology:

1. More features isn’t better, it’s worse.
2. You can’t make things easier by adding to them.
3. Confusion is the ultimate deal-breaker.
4. Style matters
5. Only features that provide a good user experience will be used.
6. Any feature that requires learning will only be adopted by a small fraction of users.
7. Unused features are not only useless, they can slow you down and diminish ease of use
8. Users do not want to think about technology: what really counts is what it does for them.
9. Forget about the killer feature. Welcome to the age of the killer user-experience.
10. Less is difficult, that’s why less is more

Consumer devices or frameworks, we are a product of our times.

Watch and contemplate.

• The departure of the hyper-enthusiasts - “The Java hyper-enthusiasts have left the building” (along the lines of this.)
• The New Methodology - Martin Fowler describes Agile methodologies — recently updated.
• PHP on Caucho - PHP on the JVM.
• XML 2.0 - some thoughts on XML 2.0.
• Web Patterns - Under construction — check back later.
• Web Design Patterns.
• Carnival of the Agilists.

I’m currently adding UTF-8 support to and generally improving WACT’s “liberal” xml/html parser. A few sources of tests cases and information:

• Who knows a title from a hole in the ground?
• FeedBurner feeds give heartburn to PHP XML parsers?
• Web SGML and HTML 4.0 explained
• CDATA confusion
• Comment syntax in SGML and HTML
• Empty elements in SGML, HTML, XML, and XHTML
• Comparison of SGML and XML
• Extensible Markup Language (XML) Conformance Test Suites
• Ian Hixie’s HTML parsing test cases
• Conformance Testing for XML and Related Technologies
• Universal Feed Parser liberal feed parser with many test cases.
• XHTML test cases

• UTF-8 and Unicode FAQ for Unix/Linux
• bad UTF-8 test files
• The W3C Markup Validation Service: Tests

Welcome Back Harry.

Also, unless I’m mistaken, it looks like SitePoint is using WordPress for their blogs now. Or has this always been the case and I’m just now noticing it?

• The cursor does not change to a hand when moving the mouse over a link
• The link destination does not appear in the status bar
• CSS hover effects do not trigger
• Application names fail to appear above icons when scrubbing the dock with the cursor
• Moving the mouse cursor outside of a textarea does not change it back to the arrow
• Clicking the middle mouse button, which I have mapped to expose, has no effect (hitting F9 works fine)

The mouse position, regular click, and right clicks seem to continue to work fine.

Switching to the Finder and then back to Safari seems to clear up the problem most of the time.

I’m pretty conservative with my setup. Trained from my System 7 extension days, I don’t run any hacks or third party enhancers on my system (I do have the debug menu turned on, though).

I think the fundamental problem with input filtering and especially XSS filtering is that it violates the principle of least surprise. User input is silently modified without the user’s knowledge. If the violation is innocent, then the software surprises the user. This is bad. At least with validation, the user gets a heads up on the problem.

Let me try to name and enumerate some scenarios:

Direct Filter
This is what WordPress did in the example post. It simply accepted the user input and silently changed it. The filtered value is stored directly into the database. The original input is lost. There is no preview. I think this has to be a usability worse case scenario.

Filter with Preview
This scenario adds a preview capability to the last. The filter is still applied. A validation failure or explicit preview button causes the form values to be re-displayed and a preview panel to be shown. However, the previous input value is silently modified and sent back to the user. The user may or may not realize that his original input has been changed during the round trip.

This is also seems like a usability problem, but every once and a while it happens to me when entering legitimate input into professionally written programs.

Filter with Buffered Preview
This scenario adds an additional buffer to the last. The filter is applied, but the original input is sent back to the user in the form field. However, the preview panel shows the modified value.

I don’t really see this very often outside of fields with a dedicated markup language (for example BBCode).

Filter with Forced Preview
The input value is silently filtered. However, the user is forced to preview the output at least once. Its up to the user to notice the results of the filter.

I think slashdot does this.

Filter with Confirmation
A stricter variation of Forced Preview where as the last stage, the user must confirm their input once without the ability to change it. It is up to the user to notice the results of the filter.

I think this is popular as the last stage of a wizard style interface.

Filter with Confirmation and Warning
The filter is applied and the user’s input is changed, however, the user is warned exactly which value was changed by the filter.

I don’t think I’ve ever seen this one.

Validation
The program notifies the user that the input value is bad, but does not modify it. The user must change the value to proceed.

I tend to use this one. I escape all output, so I don’t worry too much about displaying XSS in the preview panel.

Obviously, you can mix and match scenarios for different input rules and fields. I’m sure there are other scenarios. Please suggest some.

I guess I’ve been programming for about 23 years now. The longer I do it, the more reluctant I am to be strict with user input. Ultra sanitized, ultra structured data may seem attractive to the programmer, but its a pain for the user and its only a matter of time before a legitimate exception comes along. A European phone number, the 51rst state, a canadian postal code, a new millennium, etc. The exception is the rule. Understandably, XSS must be prevented, but its easy to go too far.

Which of these scenarios do you think are best from the user’s perspective? From the programmers perspective?