So Sweet with Ruby

The Ruby programming language can be so sweet. (Ok, this is a bit off-topic, but still cool Web development subject.) I wanted to do some custom Web log analysis recently using Ruby, and it just came out so nicely, a clean object-oriented class in no more than ten lines of code, and a trivial filter. Ruby Structs, regular expressions, and language conveniences to the rescue! I just had to put it on display.

First, a Struct named WebLog to contain the data from the regular expression match:

Struct.new("WebLog", :all, :host, :ident, :user, :time_string,
           :method, :url, :http, :stat, :size, :ref, :ua)

This defines accessors for each named field so you can use it rather like a C struct, e.g. log.host, log.stat.

Then a subclass, with the regular expression tucked away in a class variable. (This RegExp expects "combined" log format.)

class WebLog < Struct::WebLog
  #  host  ident user   time      method url  http   stat  size ref       ua
  @@expr =
   /^(.*?) (.*?) (.*?) \[(.*?)\] "(.*?) (.*?) (.*?)" (.*?) (.*?) "(.*?)" "(.*?)"$/

  def initialize(line)
    super(*@@expr.match(line))
  end
end

The initialize method runs as part of every call to WebLog.new. It calls super, which invokes the Struct::WebLog initializer, and passes all of the match data resulting for the given line. The result is an object with the match data parsed into field.

In the code, @@expr means a class variable named expr, shared by all instances of the class. The result of @@expr.match works like an array: the superclass initialize method expects arguments for each member of the struct, and the * operator in a method call unpacks any array-like structure into an argument list.

The rest of the code runs a custom log analysis. ARGF contains all the lines of all the files on the command line, or if none are give it contains all the lines of standard input. This creates a WebLog object for each line and prints its user agent string (ua). How much neater could it be?

ARGF.each do |line|
  matches = WebLog.new(line)
  puts matches.ua
end

Animated Reveal Effects

Power and rich content can also mean clutter. Hiding some of the content or power until needed can help minimize clutter, and animation can help to guide the user's attention. Effects that reveal hidden content with animation can be built with the right CSS and JavaScript, even without heavy programming.

It is not strictly necessary to use absolute positioning in all cases, just two nested elements, overflow: hidden and explicit height or width in the outer one. Because of the browser scripting, it was not possible to put the full demonstration into Blogger, but there are two versions at:

http://perdues.com/iwp/reveal.html

The Business Case for Better Web UI

A friend asked recently if I had a response to comments at the O'Reilly Web 2.0 Conference panel on Ajax back in October, with Joe Chung of Allurent, Peter Merholz of Adaptive Path and others. Chung had commented that, "The business owners understand the technology now and have become the drivers," Chung said. "But to really understand the ROI, you have to bring in statisticians and do a controlled study. Your hunches aren't good enough anymore." Merholz is also quoted saying, "Right now the business case is largely around the experience. It's going to have to get more finalized, and pretty soon, to drive adoption."

These comments are not so far from the mark, but they miss some key points that deserve mention as well. In the end the market forces for better Web UIs are strong, and what I see going on in the marketplace shows that the momentum is real. Let's break the analysis down a bit further into its parts, and look at the dynamics of the movement.

Designers and others I talk to tend to break the user experience benefits down into two related parts: efficiency and satisfaction. Efficiency has to do with issues like speed of operation and reduction in user mistakes. It is more measurable, like with a stopwatch. Fatigue and unpleasantness of the UI are more on the side of satisfaction, and you probably have to ask the users how they feel.

It's also pretty clear to me that usability is also driving acceptance of new Web-based services. Right now it is the younger, trendier, and more early adopter groups who tend to flock to sites with better user experience. Myspace is a good example of a site that is attracting huge numbers of young people, and they adopt newer and slicker techniques to catch their users attention and interest and to let them do things very quickly, which the Internet-oriented generation seems to strongly prefer. So usability plus general appeal tend to spell acceptance. As the newer user interface technologies spread, they will increasingly become a requirement that users will impose on the service providers.

CSS and Pop-up Forms

With "Ajax"-style unobtrusive server communication there are many opportunities to take information from users with less disruption to the continuity of their interaction with the Web site. In may cases the use of XMLHttpRequest and processing the server response do not have to be complex, and the CSS for the user interface does not have to be complex either, but it can be be rather specialized and unfamiliar to designers. Let's take a look at the CSS for a simple guestbook implemented as a pop-up form. The user triggers an event that pops up the form, which will submit to the server in the background, without taking the user to a new page.

Register yourself.

Name:
Email:
Birthday:

When the user clicks on the link above, a small form pops up. When the user submits the form successfully, it disappears again, perhaps leaving behind a confirmation message. In this article, let's focus on CSS techniques that can help create this kind of form.

Almost any pop-up is built from an element with absolute positioning. The CSS for this does not have to be complex. Elements with absolute position are often defined inside an element with position: relative, but this is not the only way. In fact if an element has position:absolute but no explicit location (unspecified left, right, top, bottom), CSS will position it at the same point where would appear if it were part of the flow.

In our example, almost all the work is done just by defining the pop-up through a DIV with position: absolute, but in this case we have used one more small trick as well -- using position: relative inside the definition of the pop-up itself. By putting all the displayable content of the pop-up in an element with relative position, we move the location of the element a little bit down and to the right from where it would otherwise appear when visible. The structure of the HTML defining our pop-up is:

 <p>[ Link or other control to invoke pop-up ]
 <div style="position: absolute; display: none;">
  <form style="position: relative; left: 1em; top: 2px;">
   . . . pop-up content goes here . . .
  </form>
 </div>

This simple combination of HTML and CSS define the positioning of our pop-up form. Static content can also be conveniently popped up in this way. In this case you would probably use a second DIV in place of the FORM tag used here.

Connecting with Information

We all seem to find that getting information is a part of getting our needs and desires met. We want to be close to our friends. We are looking for some fun, to get a job done. We'd like to find the tastiest, juiciest, most interesting and best of everything around us, and connecting with information is a part of that. This is search, but also something larger than that.

Search engines are great, but they are so objective and so cold! They give everybody the same answers to the same question. We want answers that match our taste and interests, our values, our sense of what is Good and what is not. So we read blogs, subscribe to RSS feeds we like, we tag things, keep in touch with our favorite communities, and look for sources of information and opinion that work for us.

People have discovered that they like being part of a group with common interests more than hearing a few points of view broadcast to them. We like to feel ourselves in charge of forming our own opinions and deciding what we like, and why not? Participation is often cited as a key feature of the new-style Web. As a trend, I think the desire each of us has to connect with the information as well as the people we personally prefer is one of the really large forces that will continue to shape the Web over time.

Where to?

The Web has changed since the rise of the Big Internet Companies , and for the better. Many of those companies are doing fine, still providing useful services, and even getting better, but there is an awful lot more going on.

Collaboration is big, for example Wikipedia as a major Internet resource. People networking, sharing ideas, sharing photos, just about sharing germs. Open source was already big, but it's just getting bigger and taking a big role in software innovation.

The people are speaking more and louder than ever with Blogging, RSS, and podcasting.

And more and more, the people are sifting, sorting, and rating it with tools like Slashdot, Del.icio.us, or even Digg. In this space, commercial sites offer ratings of just about any product sold at retail, from cars to movies to coffee machines.

Is there a bigger picture behind all of this? Perhaps some principles that illuminate the subject and shows what it's all about? Let's ask, "What do people really do with information?" we search for it, add to it, and update it. We may do this to get a job done or to connect with other people, for entertainment, etc., but these are the activities, the steps in the dance. I'm going to view the changing Web universe this way, for an article or two.

Luck and Skill

So down-to-earth. Sergey Brin showed up on the last day of the Web 2.0 conference this month as reported and also here. He made a few comments, starting with:

The No. 1 factor that contributed to our success over the past seven years is luck. One of the biggest mistakes people make in assessing their success or failure is discounting the effect of luck.

This is probably a bit on the modest side, but it is a becoming modesty. The PageRank approach (see also a detailed external analysis), does seem to be based on key insights. All the same, he was there the whole time and he is in a good position to know.

His comments remind me a bit of comments in a letter written by Abraham Lincoln. "I claim not to have controlled events, but confess plainly that events have controlled me." (to A. G. Hodges, April 4, 1864)

Or from the bible, "the race is not to the swift, nor the battle to the strong, neither yet bread to the wise, nor yet riches to men of understanding, nor yet favour to men of skill; but time and chance happeneth to them all." (Eccesiastes 9:11), and the Damon Runyon coda, "The race is not always to the swift, nor the battle to the strong, but that's the way to bet."

Good luck to all of us!