Hamon or the Skin Deep Beauty of Code

The craft of programming is a little depressing: you spend days and nights pushing bits inside a computer, weaving a pattern that will ignite the right pixels on monitors or magnetize the right atoms on disk platters. But it is craft nevertheless, except one where beauty matters very little. Coders create the true ukio-e – floating world, but one that is as ugly as it is fleeting.

I’ve read a good chunk of Beautiful Code: Leading Programmers Explain How They Think, but I’m still far from understanding what beauty is in code. Ugliness is self-explanatory: if you recoil in horror after reading a few files, it’s ugly. I recoil on the daily basis.

I’m not talking about the success or usefullness of things that code creates. I am pretty sure that the code that runs plentyoffish.com is as ugly as the website itself, but it does not detract from its success and utility.

I think the key to my preception of code beauty is related to “hamon”: a concept in Japanese swordmaking. If you’ll look at a Japanese sword, you’ll usually see a wavy pattern near the edge of the blade. Hamon literally means “blade pattern”. It is created when a swordsmith applies special mud to the edge of a in a wavy pattern of varying thickness and composition, and then heats the sword and plunges it into hot water. You can see the process in this video (it starts at about 1:30 mark).

The primary purpose of this treatment is to create a blade that is very hard and can take a lot of stress, which is a contradiction, as hard steel is very brittle. The edge gets the thinnest coating, and after heating and cooling turns into martensite hard crystals of high carbon steel. The thicker coated back turns into pearlite, which is a softer, but very flexible lower carbon steel. The hamon pattern is formed where these two types of steel interlock. The wavy shape makes the sword able to absorb shock better.

The absence of or inferior shape of hamon clearly indicates the inferiority of the sword. The aesthetics of it are just a coincidence, but it is also the resason why the craft of the samurai sword endures: collectors and museums purchase them as works of art. I’ve seen many swords in museums, and even though you can’t appreciate them as well as by holding them, the patterns in the hamon are hypnotic.

Here’s a good video of what hamon looks like in different ligting conditions.

There are many different styles of hamon, here are some examples from very excellent “The Craft of the Japanese Sword“:

There are of course many swords out there with fake blade patterns made with acid etch, wire brushing or other abrasives. Fakes are neither beautiful nor strong and easily identifiable.

When I look at a code listing I also see a wavy pattern. It’s nowhere near as connected to quality as the hamon, but it is still often an indicator of it. Indentation, spacing, length of keywords and function names, the amount of syntactic sugar, overall length of the listing: good code is sometimes beatiful to look at.

Sublime Text 2, a new programming editor that I am using, has an interesting feature: an insert that shows the whole file in miniature. Here are side by side beginnings of commit.c from (top to bottom) cvs, svn and git. I don’t know if anything can be determined by looking at these pretty skyscrapers of code, but aestetically I like git better.

This goes a level further – into software architecture. There’s this old chestnut of the maps of system calls in Apache and IIS web servers. You can easily tell which is the product of Redmond craftsmanship.

I would like to add that wavy patterns are the last things that I look for in code and this whole article is just a fluffy philosophical musing. Yet, maybe there’s something there in those patterns.

Are Tables Important?

I was talking to a former co-worker about Inc Magazine’s cover story about Markus Frind and his very profitable, but godawfully ugly dating website plentyoffish.com.

My co-worker (a programmer) loaded up the website. He took a quick look around and opened the source of the ratings page. Giggling like Bevis he could not believe what he saw: a gradient bar that was coded as [gasp!] an HTML table with bgcolor attributes.

It looked like this:

And was coded like that:

<table border=0 cellspacing=0 cellpadding=0 width=100%>
<tr height=5><td bgcolor=#204080><img width=1 height=5 border=0>
</td><td bgcolor=#202F70><img width=1 height=5 border=0></td>
<td bgcolor=#3F2060><img width=1 height=5 border=0></td>
<td bgcolor=#5F2050><img width=1 height=5 border=0></td>
<td bgcolor=#7F1F4F><img width=1 height=5 border=0></td>
<td bgcolor=#90103F><img width=1 height=5 border=0></td>
<td bgcolor=#B0102F><img width=1 height=5 border=0></td>
<td bgcolor=#CF0F1F><img width=1 height=5 border=0></td>
<td bgcolor=#E0000F><img width=1 height=5 border=0></td>
<td bgcolor=#F00000><img width=1 height=5 border=0></td>
</tr></table>

He was going on and on and on about how tables are bad, and mwu-ha-ha-ha — look at this.

I was fully expecting him to take umbrage at the logo, the overall look and feel of the site, at the grotesquely skewed photo thumbnails. But no, all he was seeing is that Mr. Frind “used a table”.

I tried to tell my co-worker that despite “tables” or ugliness this website generates tens of millions of dollars of profit to its creator, that it has as much web traffic as Yahoo while being served a small handful of very powerful servers, that it was created and maintained by a single person who gets to keep most of the profits – but to no awail. The kid could not get over “tables”.

A famous hacker JWZ once was asked about his feelings about “an open source groupware system”. In a famous rant that followed he produced some of the best advice importance that I’ve ever seen:

“So I said, narrow the focus. Your “use case” should be, there’s a 22 year old college student living in the dorms. How will this software get him laid?”

While I’ve never heard of HTML tables (not the furniture kind) playing any role in getting laid, plentyoffish.com must have resulted in a mind boggling amount of action.

Plentyoffish.com, being a technological and aestetical abomination that it is, is firmly rooted in the lower, fundamental layers of Maslow’s Hierarchy and my Web Heirarchy.

At the most basic people need oxygen, water, food, to take a dump/whiz, sleep, sex, and a predictability in environment.

On the web people need hypertext, images, search, speed, and community features. If you provide all of these for a topic that is important to people, you will be successful. Start thinking about “html tables vs divs” first, and likely you won’t get to the important stuff.

Doing it another way – saying, look, I’ll do a site just like plentyoffish but prettier and without HTML tables does not work very well: Frind’s competiors at okcupid.com who set out to do just that are not succesful in toppling plentyoffish.

Ugliness for the sake of ugliness is not a good thing. In the long run people want things to be pretty, like Apple products and not ugly like Microsoft products. But taste, being pretty high up in the pyramid of needs only becomes a factor after all the basic needs are met.

7 Things You Can (Mostly) Do Without in Your Web Business

I’ve spent a lot of time in meetings about websites. Not as much as I’ve spent building websites, but a sizable chunk of my career. I mostly spent that time listening and not being listened to. But now that I’m older, have “Sr” in my title (it stands for Senor), a beard, those cool designer glasses, and have a lot more weight in meetings. Mostly due to the fact that I got pretty fat.

Previously I wrote about the evils of redesigns in The Russian Tea Room Syndrome, and about how web developers are like cooks and prison inmates. Restaurants are a notoriously difficult businesses to run, mostly because there are a lot of amateurs who do not understand what is not important. It’s not what’s important. Everything is important. It’s knowing what can be cut, especially in the beginning, that makes some restaurants succeed when others fail.

Here’s my list of 7 things that seem like they are important in websites, but really aren’t. These are not deal breakers. These are the things to think about last.

1) Looks. It’s nice to have a clean and beautiful design. But making a site pretty is not going to make you more money. Just look at plentyoffish.com – probably the ugliest dating website in existence. It does not stop its maker from raking in 10 mil a year without any hard work whatsoever.

2) SEO. SEO is the alchemy of the web business. I’ve seen more sites get sandboxed by Google than gain pagerank from SEO efforts. Most big url rewriting efforts create broken links, which are bad no matter how you look at it. Don’t break urls, if you can – make them descriptive, and try to make your site linkable (i.e. GET instead of POST search forms), but that’s about all that might help you. Spending a lot of money on SEO is just plain stupid.

3) Performance. Everybody hates slow and crashing websites. But unless this lasts for years, it’s not a deal breaker. Twitter suffers from worst imaginable performance trouble. Livejournal went through a long stretch of bad performance. Even the big dogs like eBay and Amazon have a slow spell or outage or two. MS Windows became the most popular OS in the world not because of its stability. Of course it’s currently losing market share to Apple, but this precess took decades. If anything, it looks like Twitter outages make its users miss the service so much, that when they get back in the twitter their brains out after bitching about the outage for a bit.

4) Good branding. A good name, url, and logo are not going to make you more money. They are just not that important. As long as it’s not too embarrassing, like therapist.com it’s going to be ok. If you look on Alexa, icanhascheezburger.com has almost as much traffic as tvguide.com.

5) Pure CSS markup and web standards compliance. I’m sick and tired of being told that “tableless” design is somehow important. It’s not, it’s not, it’s not. Go to google.com, amazon.com, ebay.com, nytimes.com and view the source. You will see tables galore. Wasting time eliminating tables is just plain stupid. And all-div completely web standards-compliant XHTML markup is not going to make you any more money. I refuse to feel bad about using tables. And perfectly validating XHTML is only going to help page scrapers.

6) Keeping the site ad-free. Site users are ok with ads. They really, really are. If you have what they want they will suffer through the biggest ads you can throw at them. “Half Page Godzillas”, “Skyscrapers”, “Page Killas”, “Shrieking Flash Sound Diddlers” – whatever you call your most annoying ad – despite heated assurances from the users, it’s not going to make most of them leave. Some will and more will follow, but it’s not as drastic as you might think. If you have something unique. I’m not advocating horrible Flash ads. “Flash Sound Diddlers” are not more effective in selling stuff than tasteful Adsense ads which will not have anybody at all leave. You can use ad money to buy more servers, more content, ads of your own. This will bring in more users.

7) Widgets. If your entire web strategy is based on building widgets, well, you are in trouble. You are entering an frenzied and very crowded market. Widgets are the bastard child of old school web “badges” and “push technology.” Widgets sometimes work great for increasing pagerank, just like the “web awards” that were given out by some sites in Web 1.0 times. They might get people to link to you, especially if these people are Myspacers that are constantly looking for shiny things to line their pages with. But in the big scheme of things widgets are not a great way to spend ttime and money.