Help me stuff the ballot box

My boss (Matt Cutts) is running a poll on his website on what he should do or give up for 30 days in order to build a positive habit. Maybe I'm biased, but I imagine that anyone who knows Matt well would want to see him try giving up email (or no more than 1 hour a day) for 30 days. It's probably the most extreme, and perhaps the most useful for Matt (just my vote). Anyway, go here: http://www.mattcutts.com/blog/30-days/ and help me stuff the ballot box if you agree.

Maker Faire

Went to the maker faire in San Mateo yesterday. Quite a crowd compared to my recollection of previous years - way too packed. I think next year I might go on Sunday to see if that reduces the crowd any. A few choice photos are below.

First, the cardboard surfboard.



The steampunk victorian house:



The shark car:



And the snail car:



A flaming flower:



A child with wings:



And an egg painting robot:

Tennessee Cove Trail

View Tennessee Cove Trail in a larger map

Today Cristin and I took a short hike on a little known trail up in the Marin Headlands called Tennessee Cove. I had never been to this area of the park, and it was nice to explore somewhere new so close to home. This hike is 1.9 miles one-way, almost perfectly flat with only about 200ft of elevation change and is paved half-way. A little after the trail branches off the paved trail, it splits into two trails for about a mile. One completely flat walking trail through the marsh and the other a dirt road with small elevation changes that is appropriate for an easy bike ride. Both trails end up at a small cove on the ocean just north of the golden gate bridge. You can't see the bridge from the beach, but it's still a nice view. Here is a photo looking down the beach:



There are also several side-trails with lots of elevation climbing over the headlands for the more adventurous.

Backpacking the Lost Coast

This monday was memorial day in the US meaning a 3-day weekend.  My friend, Jeremy Shapiro, organized a backpacking trip on California's Lost Coast trail.  He tricked convinced me to come along for the trip.

Here is an embedded map of our 3 days showing each day's trail with a different color:


View Lost Coast Trail in a larger map

It's a great trail if you are ever looking for a backpacking trip. It's ~25 miles and completely flat but still rough terrain. Much of the time you are walking directly on the beach sand or hopping across boulders. You have to carry a tide table because parts of the trail are only passable at low tide. And lastly, since there are bears, you are legally required to haul around a heavy/bulky bear canister which prevents bears from eating your food even if they do get it. However, for your efforts, you get to hike along almost completely undisturbed coast for 3 days. The trail has almost no structures, definitely no roads, and is pretty isolated. At many times I felt like our group was the only one around, even though it was a pretty popular time to hike the trail. The best campsite areas were a bit full, but since it was BLM land you could camp anywhere you pleased and even rarer for CA - you could have campfires. As for wildlife, I saw several deer (one with fawn), seals (up close), sea lions, octopus (washed up), tidepool life, pelicans (hundreds), and other fun stuff. No bears sadly.

Here is a photo of our small crew. Click the image to be taken to a facebook photo gallery of the trip.

Strip unused form fields from form submissions

In my recent post "Why do we even need url shorteners?", I laid out a case for why URLs on the web are actually useful User Interface elements as well as wrote a little bit about how certain bits of history colluded to create needlessly long URLs as the norm. One specific case raised was that of HTML forms. Today I want to show you one way in which to simplify form submissions.

Many forms will contain many different input elements with very few of them actually being used at the same time. Most server-side software is equipped to accept the form even if some of the arguments are missing. It will just assume that the arguments take on the default values. For example, the Google advanced search interface has dozens of input elements. Just entering the query [gregable] and submitting the form will generate the following URL:

http://www.google.com/search?hl=en&as_q=gregable&as_epq=&as_oq=

&as_eq=&num=10&lr=&as_filetype=&ft=i&as_sitesearch=&as_qdr=all

&as_rights=&as_occt=any&cr=&as_nlo=&as_nhi=&safe=images

However, take away all of the default values for the field, and we get this completely equivalent URL:

http://www.google.com/search?as_q=gregable

However, browsers offer no easy way for the creator of an HTML form to craft these more usable URLs. Through javascript however, we certainly can. First, the demo. This demo is a stripped down version of the advanced search interface. I also added a checkbox and two radio buttons to illustrate some additional input types. If you fill out any field and hit submit, that set of fields and only that set of fields get submitted. If you are not running javascript this trick doesn't work, all the fields get submitted, but the form still operates. Give it a whirl:

Demo advanced search interface

How does it work? You can of course look at the source code. I define one short javascript function: stripFormDefaults. Then where I declare the form, I add onsubmit="return stripFormDefaults(this)". Nothing else fancy is going on.

The W3C tells us that when submitting a form, you only submit the values from the successful form controls. One of the rules for being successful is that the control must not be disabled. So our stripFormDefaults code just disables all of the form controls that we don't want to submit immediately before submitting. It then re-enables them in case the user hits the back button.


In order to know which form controls to submit, we take advantage of a little known set of form element properties that store the default value or state of each form control. Depending on the type of control element, this property is called defaultValue, defaultSelected, or defaultChecked. We simply compare the actual value of each form control with the default value and if they are the same, we disable that control before submitting.

Why do we even need URL Shorteners?

My first thought was to title this post: "Why are URLs long?" but I realize that the reason I'm writing this was because of the recent issues being raised around URL Shorteners (aka: TinyURL).  While this post is over a month late to the party, the context seems relevant.

Problem:
So, why do we even need URL Shorteners?  The answer is simple: because URLs are too long.  This may be an issue made more obvious with twitter, cell phones, or any kind of manual text-entry, but it isn't only related to this.  Essentially, most interesting content on the web has a URL that is too long to remember/type in/share.  This can be a problem if you are:

1.  Sending an email to someone who uses a crappy email client that wraps (breaks) lines over some character limit.
2. Hanging posters in your dorm with a URL to get more information.
3. Giving a talk at a conference and want the audience to write down/remember some URL later.
4. Having a verbal conversation with a friend: "I'll send you a link later" is a symptom of this issue.

Worse than just long, most URLs are a crappy User Interface.

Root Causes:
When "moving pictures" (video) first became possible to a large audience, we largely just recorded plays - what we were used to pre-video.  Only with time did we learn that the new medium afforded interesting new possibilities: camera angles, shifting scenes, overlaid audio, special effects, etc.

The web evolved similarly.  In the original web, most web servers were designed to be a way to access a collection of files on a server some where.  We were familiar with file systems and the pre-web internet was a lot of FTP and BBS servers.  Our URLs naturally then mirrored file systems.  There was certainly nothing that I know of in the HTTP spec that said they had to be.  This got us into some trouble:

Extensions
With the file system as a metaphor, URLs got extensions (.html, .php, .asp).  Even though the HTTP spec defined a way to communicate the content type outside the URL structure, we were familiar with the extension UI element. However the vast majority of the URLs we interacted with were all one content-type: HTML.  Sure, HTML embedded .gif and .js, but users didn't directly interact with those URLs often, they were hidden.  What type of software generated the page (.php, .asp, .jsp) wasn't remotely interesting.  For the vast majority of URLs we were viewing, the information presented in extension was redundantly obvious or plain irrelevant.  Even this post will have a URL that ends with .html, 5 characters of needless redundancy!

Directories/Folders
With the file system as a metaphor, URLs became organized hierarchically into directories.  We grouped them by topic, date or whatever with well-defined levels of hierarchy.  Each file in one folder.  Most early http servers would even automatically generate and serve an "index" page which listed all the files in a particular directory. What was a weak metaphor for a hard drive file system became worse on the internet.  Hyperlinks made certain of that.  Instead of there being only one path to navigate through a series of directories to a document on the internet, links made sure there were plenty of paths to navigate.  Our URLs looked like a tree, but on closer inspection, we had really built a web.

Take this post for example.  It's path looks something like:

/2009/05/why-do-we-even-need-url-shorteners.html

However, I sincerely doubt that you navigated to this post by first looking for documents that I created in 2009, followed by those I created in May (month 05).  You came through either a hyperlink or a feed reader.  The directory structure here is showing information that isn't usually that interesting to a user actually interacting with a URL.  How often are book titles based on Dewey Decimal categories?

Search Engines
The file system metaphor can't explain all our woes.  After all who in their right mind would ever name a file something so long as why-do-we-even-need-url-shorteners.html?  And originally, the web wasn't named this way.  Had I chosen it, this page might have a name of url-shorteners.html or long-URLs-rant.html.  But then search engines came along.  And before long it became known that one of their ranking signals was words contained in the URLs.  Users didn't type in URLs anyway, right?  They just clicked on them, so it quickly became more important to create URLs for Search Engine Marketing than for Usability: more keywords are always better.

But you can't blame Search Engines.  People frequently named their pages with descriptive URLs.  Using this as a signal made lots of sense.  And once webmasters noticed it and reacted to it, this custom was only further reinforced.  As a result we have, why-do-we-even-need-url-shorteners.html(39 characters) instead of url-shorteners.html (19 characters).

Forms
The HTML spec isn't completely blameless either.  Since our metaphor was a file system, we never really expected significant amounts of dynamic content.  When HTML forms were designed, we imagined things like a way to leave a comment for a webmaster, or a way to upload a file.  After all, what other interactions had we really done in the days of FTP or BBS systems?

As content on the internet became more dynamic, forms started to be used more frequently for navigation: search boxes, preference settings pages, javascript drop down elements.  All of these things created URLs that were strictly defined by how the HTML spec required GET method forms to interact.  For example, when submitting a form, even if only one of the fields is filled in, all of the fields become part of the URL: ?q=foo+bar&page=&sort=&width=  Repeated values create repeated keys as well: ?opt=red&opt=blue&opt=green  What a waste.

WWW

Historically each hostname (subdomain) generally referred to a different machine.  Most machines exposed to the internet were not running HTTP servers.  As a result, most uses of hostnames were for things other than a web browser.  Since the default was not HTTP, we needed a way to refer to the machine running the HTTP server.  A custom arose - the HTTP server would run on the machine named www.  It was short, easy to type, memorable, and unique.  These days with hardware load balancers, HTTP hostnames rarely refer to individual machines directly.  Instead a single hostname can refer to hundreds of separate machines.  However www has stuck around because people have come to expect it.  The mere presence of a www prefix calls up the concept of a web page in most minds.  As you'll notice, gregable.com doesn't have a www and neither do url shorteners - 4 unneeded characters that will be with most URLs for a long time.


Change you can believe in:
Fortunately, this is not a chicken and egg problem.  If you run a website or a CMS system, you could write better URLs today without waiting for your customers to do something first.  Not all chickens have that much control, but many do.  And many websites are already paying attention.  Take a close look at how Twitter carefully crafts their URLs to be user interface elements in themselves.

A few of my suggested rules of thumb, but first an important disclaimer.  I do work for a search engine company, but the opinions expressed on my blog are my own and not necessarily those of my employer.  These recommendations may not be valid in the context of search engine optimization.  They are simply my opinions about how URLS could be effectively used as a User Interface Element.  With that out of the way, here we go:

1. Drop the www.  But if your users type it, make sure you still get them to the right place.
2. Drop the extensions (.html, .php) for HTML pages - they are the default.  Keep them for non-HTML documents (PDF, images, text) because they are useful hints to a user about what to expect.
   
3. Don't let HTML forms dictate your URL structure.  They are a necessary evil for actual user-input, but they create awful URL UI experiences.
4. Use directory structures for things users care about, not uninteresting categorization.  Each level you add makes the URL longer and potentially harder to remember/reuse.
5. Urls should be descriptive.  Long numbers are often really bad, a few words are really good.

Finally, think about what is the shortest URL for a given page that would be specific and convey alot of information about what you might expect to find there.

For example, this URL could easily have been as long as:

http://www.gregable.blogspot.com/2009/05/why-do-we-even-need-url-shorteners.html  (80 chars)

Or it could potentially have been as short and descriptive as:

http://gregable.com/long-urls.html (34 chars)

34 chars isn't bad.  Even a tinyurl would look like http://tinyurl.com/ddvhhc (25 chars).  And consider how much more information is conveyed in the short and descriptive URL for a cost of 9 measly characters.

City of Light; Dystopia Looming

My sister just posted some new photos of another piece called City of Light; Dystopia Looming. You can see the photos and more information on Flickr by clicking on the image above. It also looks like you can follow her on Twitter now: http://twitter.com/GGrothaus Say hello to her for me.

Big Basin Backpacking

This last weekend, I went backpacking with Jeremy Shapiro and David Signoff in Big Basin Park (see trail map). There is a trail named "Skyline to the Sea" which starts up in the Santa Cruz Mountains and ends up on the Beach at Highway 1. We didn't follow this trail most of the way, although we pretty much started and ended at the same places. Instead, we took a little longer route that involved alot more elevation change. Kicked the crap out of me, but was alot of fun.

Day 1, our hike started at the Big Basin Park headquarters up in the Santa Cruz Mountains, following Sunset trail for the first half of the day and passing by 3 waterfalls. We sat down and had lunch at the first waterfall, spotting some newts in the water at the base. The trail then hits Waddell Creek and meets up with Skyline to the Sea which we followed from there. Shortly thereafter, it turns into a fire road following the creek all the way to the ocean. We camped at Twin Redwoods camp, about 2 miles before you get to the ocean. After setting up camp, we took some water and finished the trail down to the ocean where there were a few dozen windsurfers having a blast. After getting tired of being blown in the face with sand, we hiked back up to camp for the night, made dinner, popcorn, and a little bourbon. About 11 miles to camp, plus 4 round trip to the ocean for 15 miles today.

Day 2, We woke up a little late, had breakfast and made camp. Retracing our steps the previous day, we hiked north along skyline to the sea until reaching McCrary Ridge trail. McCrary Ridge has a nice sign reading "Trail Recommended for horse use only, very steep climbs.". It wasn't kidding, around a 20% average grade (~1,700 ft gain in 2 miles) and there was a decent bit of flat, so lots of higher grade mixed in for fun. Still, the views from the ridge were very nice. Being probably the only hikers there that day, we spotted some illegal burning over on a nearby ridge and Jeremy called it into the park rangers. At the tail end of McCrary ridge, we took a connector back to Sunset and rode sunset back to the park HQ. A little shorter distance, but a slower uphill pace, we did around 10 miles on Day 2.

All in all, around 25 miles in 2 days. 3 Waterfalls, mountain vistas, and an ocean beach. Not a bad way to spend a weekend. All the photos are up on picasa.

Future Car

Google was running a number of Earth-Day related events this entire week. Today, they had a talk and demonstration by Aptera, a startup car company hoping to break into the car business in about a year. I brought along my cell camera and was even lucky enough to get a short ride in the car.



Aptera is planning on building and starting to sell an all-electric car late this year, with hybrid and all-gas versions coming out later. The main innovation these guys are bringing to the car space is a car body that is amazingly efficient. They are using composite materials, the same kinds of things Burt Rutan used to build Space Ship One, to build a very strong but very lightweight body. The body is then shaped to absolutely minimize the drag as the car moves through air. It looks something like an advanced aircraft or maybe a spaceship. A common question they get is "Does it fly?".



They managed to get the weight down to 1,500 lbs, which is less than the super-tiny Honda Insight. The drag decreases were even more amazing. Besides just making it aerodynamic, the design has only 3 wheels. Between the low weight and drag, projects are that the car will get 130 miles per gallon, and one of their initial design's they claimed could get as high as 330 miles per gallon - this was not even a hybrid system, just gasoline. All of these numbers I pulled from wikipedia to make sure I had them right.



What now sounds like a flimsy car is far from it. The composite materials are extremely strong. They said they held a party and had an unpainted car body in the shop. They passed around a sledgehammer and put up a $100 prize to anyone who could dent/scratch or otherwise damage the body and they have yet to pay out. They did all sorts of other tests for safety as well, including crush tests, stopping distance, and standard safety gear like airbags. When riding in it, it felt very responsive, cornered well and accelerated/decelerated quickly without feeling unstable in the least. My guess is that the simple design and super-strong materials meant it was unlikely to need much repair beyond oil/tires unless it got into a serious wreck.



The car seats two pretty comfortably, and has enough cargo room "to fit several surf boards". It has built in GPS, bluetooth interface with cell phones that can give detailed data about the car's performance to the phone, rear camera, and airbags. The above photo shows the accelerator and brake pedals, with cute '+' and '-' symbols on them. The car is clearly meant to be fun.

They say the initial electric-only version will retail between $25,000-$40,000. It has a range of 120 miles, and can recharge in 4 hours from a high-voltage connection (like your washer/dryer) or "overnight" from a standard outlet. I asked the founder if the later gas version would be more or less and he thought it probably would be a bit cheaper even. At 100+ MPG, issues of range wouldn't be much to worry about at all.

All in all, pretty neat. Check it out at Aptera Motors.

Systemic

Some of you may remember my earlier post "If you enjoy art" where my cat was showing off a piece of artwork from my talented sister, Grace Grothaus.

She has made a few more pieces lately and is selling them as she calls it: "Recession-Friendly Art Collecting". Direct from the artist, no gallery markups (which are usually 100%). I'll post a few of these in the next couple days. If you are interested in Grace or her art, check out her website at GraceGrothaus.com.



Like the piece I have at home, this one also makes an interesting use of materials in the art. If you look closely, you can see the use of actual leaves within the art. The piece I have is appropriately called "Urban Organic II" Here is a closeup of the above piece:



The piece is 2 1/2' x 1 1/2' and she is selling it for $550 framed + shipping.