Month: August 2007

Bad user interface! Bad! Bad!

Changing options under the System Preferences panel for Mac OS typically takes effect immediately. Unlike Windows, there are no standard “OK” and “Cancel” buttons. That’s cool… it’s simpler and more intuitive that when you change something, well, it should just change.

Except when there’s a complicated panel that actually does have an “OK”-type button. Like Network settings, for example. If I have a static IP address, the window looks like this:

network_scr1.png

Now, when I pull down the “Configure IPv4” selector and change it to “Using DHCP,” the panel immediately changes to look like this:

network_scr2.png

At this point, I always click “Renew DHCP Lease” to get a new address. I mean, it’s right there–so close to what I just changed.

But it doesn’t work. It grays out for two seconds, then becomes active again. The old address remains, unchanged. I’m fooled into thinking something is wrong with my network cable, or the network configuration is amiss elsewhere. I troubleshoot, and click and click, like an idiot…. until I realize I have to hit “Apply Now” at the bottom, before DHCP even takes effect.

Now, I’ll be the first to confess I’m no UI genius. I can make basic, clean-looking interfaces, but I make sure to get help when I need a solid UI for a complex workflow. But even with my impoverished sensibilities, I can spot the simple fix here that would save a great deal of anguish and wasted time for potentially frustrated Mac users everywhere. Don’t show a damned button unless it does something. Or at least gray it out until it’s ready to be clicked.

Sheesh.

The Joy of Documentation

I almost always have reference documentation open on my desktop: browser windows with API docs, man pages in terminal windows, Acrobat files. It’s too hard to remember every detail about infrequently used calls and more obscure language syntax; I’ve got better things to do with my brain. It’s strange, I’ve always preferred learning by examples + reference docs, rather than by hand-holding tutorials or “how to” books. I like the anal-retentiveness of official standards. =)

AJAX certainly requires familiarity with a lot of different specs. It was difficult initially to know where to look for something, so hopefully this list will help someone out there who learns the same way I do.

Document Object Model (DOM) Level 2 Core – This spec gives you info about the fundamentals of the DOM. This is the “base” upon which the HTML DOM is built, so it’s very useful for figuring out how to traverse the document hierarchy and manipulate it in basic ways.

Document Object Model (DOM) Level 2 HTML – This spec describes the HTML-specific DOM. This is the “meat” of building any highly dynamic, interactive application, since you’ll certainly need to know how to manipulate HTML elements.

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) – I look here not just for info about stylesheets, but for an understanding of the model for how document elements are (supposed to be) laid out. Go here when something looks misaligned or off-kilter, or when trying to programmatically control aspects of visual layout.

Core JavaScript 1.5 Reference – This reference on the Mozilla site is comprehensive and easier to read and navigate than the ECMA docs in PDF format.

XMLHttpRequest Object – Without this object, it ain’t AJAX. This baby is how the browser performs asynchronous data requests and conveniently makes available XML responses as Document objects. Neato!

Prototype.js API – This is a pretty amazing library that extends the DOM, providing all sorts of extras for working with document elements and ensuring cross-browser compatibility. It’s not a library for fancy effects or pre-built interface widgets; rather, it makes up for the convenience deficiencies in some of the DOM specs.

Boy, that’s a lot of docs. Right now, I’m still looking for good info on support and compatibility for various versions of DOM and CSS in various browsers.

First Thoughts on AJAX

Okay, so I’m a bit behind the times. =)

The website I’ve been working on has a dynamically generated page that’s data-intensive and can take several seconds to load. I’ve been AJAX-ifying it so that the client browser immediately loads a skeleton page and then retrieves pieces of data as they become available on the server. Nothing extraordinary.

I’ve worked with XML before as well as a touch of Javascript here and there. The rest of the AJAX pieces took some researching but weren’t hard to learn: mostly it was a matter of seeing what the XMLHttpRequest object provides, getting a hang of the DOM for HTML, and looking up relevant CSS attributes. We (my boss has also been coding a bit) also use the prototype.js library, which extends the DOM to make it much easier to manipulate. We’re still working out kinks in how the UI should look, but it’s been surprisingly smooth so far.

What I like so far:

Needless to say, AJAX is very conducive to a clean separation between data and presentation. For me, this is a major advantage. Designing XML schemas forces one to think about what data should be provided, not how it looks. The server-side code stays clean, since it mostly just churns out data for delivery.

What I dislike so far:

Only two things really bug me so far. One is that exposing the data layer via HTTP calls can result in clients accessing that layer in ways you might not appreciate. This is a pretty common complaint about AJAX, but there are clever ways to deal with it.

The second is a more conceptual matter. The HTML document isn’t really a “document” anymore. This has been happening since before AJAX, so maybe I’m just being grumpy, but really, what your browser is getting is not a document, it’s an application!

At its inception, HTML was a format for simple page layout: “p” tags described a paragraph, a “table” tag meant rows and columns of data to be displayed. In mid-1990s, the commercial web horribly mangled HTML, making “p” tags meaningless, and forcing tables to do contortionist tricks for complex layout with graphics, which it was never intended to do. CSS has helped greatly to correct these abuses, but now AJAX is turning HTML into a sort of template language, with Javascript being in charge of interactivity.

Maybe there should be a new HTTP “Content-type” for AJAX applications. The identification would help with search engines and information accessibility, letting clients know that hey, this isn’t data you’re seeing, it’s an app. Surely, people more thoughtful than me have considered these issues already. I’ll have to look it up. Unless, that is, you can only access that material through a non-googleable AJAX interface. =)

In general, an AJAX architecture requires more human work to maintain: AJAX and non-AJAX versions of information with different presentation instances; more thoughtful design to keep the layers separate and maintainable, and to manage complexity; more testing for cross-browser, cross-platform compatibility. These are not “problems” per se, but definitely things to consider when embarking upon a site overhaul.

Up and Running

This domain is being served from a slicehost.com VPS account, which I’m sharing with my friend Danny. We spent a few hours installing a typical LAMP environment from Debian packages. It all went smoothly; we’re pretty much set up. Eventually, we’ll get around to putting actual content up on our respective domains, but we expect traffic and load to remain very light. So we spent most of our time dealing with the main resource limit on our “box”: memory.

There’s lots of information available on various optimizing strategies for Apache and MySQL, but it basically boiled down to 2 things for us. In Apache, we lowered the number of start/max/min servers, and loaded only modules we needed. In MySQL, we decreased the sizes of various buffers and queues, and also disabled InnoDB support. The latter alone changed the initial size of MySQL from 20 megs of resident memory to 9 megs! I’m sure we’ll continue to tweak later on, but memory usage seems fairly reasonable right now for what we’re running.

It’s funny to reflect on how far open source software has come in general. I remember talking nine years ago with some corporate guy in New York about a piece of open source he promptly dismissed as “not ready for the enterprise” (that phrase always makes me laugh. Whose enterprise, exactly? Mine?). Back then, it was common to hear disparaging stuff like that all the time.

And now–is there anything that’s NOT enterprise ready?! Maybe the suits are happy, but I’m not sure everyone else has benefitted. As the software has grown in scalability, performance, and features, the requirements have also increased drastically. And that means the bar is higher for even a fairly standard LAMP environment, for example. Default installs of Apache, MySQL and PHP can be real memory hogs.

I’ve been discovering a few interesting alternative projects with lighter feature sets. lighttpd and thttpd are both high-performance, small-foot web servers. And a lot of folks seem to be looking to SQLite if they don’t need the fancier features of a complex RDBMS. Maybe I will experiment with these at some point.