Dot notation dropdown hell

Have you written something like this:
body.LeftArm.ForeArm.Hand.Pinky.Twitch()

Would this be easier?
body.Twitch(BodyPart.LeftPinky)

I’ve been thinking about this a lot, because I’m writing a software library. You know what’s hard? Deciding what classes, functions and properties to expose to the programmer.

My software library deals with spreadsheets, and for uhm, research, I downloaded 2 free open-source libraries for comparison. Then I looked at sample code for 2 commercial libraries too.

You know what I found?

For the most part, the libraries just expose the underlying class structures to the programmer.

While this gives the programmer ultimate coding power, I personally find this exhausting. It’s like the first time I encountered the .NET Framework. There’s an overwhelming number of classes with their own functions and enumerations… “I just want to write one single sentence to a file!” Even that took me a few minutes to get used to. Luckily there’s extensive documentation, or I’d just collapse under the weight.

Do you remember Nokia? It’s a telecommunications company, but I know it as a mobile phone maker. My experience with Nokia phones were that they were probably designed by engineers and programmers. There were a lot of dropdown menus.

We programmers can think in hierarchies. But users don’t usually think in hierarchies (I think there’s research showing dropdown menus on web sites confuse users).

Consider the basic task in programming: declaring a variable. Here’s how you do this in VB:
Dim asdf as Int32

Here’s how you do this in C# (and any C-family):
int asdf;

When I want a variable, I already know what type it should be. The type matters to me and the compiler. The name matters a little to me, and practically none to the compiler. By the time I type “Dim asdf as” I already forgot what type I wanted, because I was so busy coming up with a variable name.

I feel this is backwards. Yes, I kinda have a thing about VB in this case…

Remember the pinky twitching example?

body.LeftArm.ForeArm.Hand.Pinky.Twitch()
This forces the programmer to go all the way back to the root class, and then traverse the properties down again to reach the Twitch() function.

body.Twitch(BodyPart.LeftPinky)
This shortcuts a lot of the traversing.

I have a lot of respect for the programmers working on open-source projects. They give their time and effort to improving software without pay. I just feel the design sometimes leave a little to be desired.

Have you looked at an iPhone? The interface allows the user to reach something within a couple of taps.

Do you know Google recommends that website links be no more than 3 levels deep? This means every page should be available from every other page via no more than 3 clicks.

So why did the first twitching example need 5 levels to reach my Twitch() function?

What ketchup bottle manufacturers can learn from a drinks stall uncle

Pouring milk
[image by Nicholas Moore]

My posterior hurt. It was a slow sultry afternoon, and my friends and I were hanging out at a hawker centre. We had dinner there and continued to chat. Then I couldn’t stand it any more and stood up. The seat was hard, and I was starting to lose sensation in my gluteus maximus.

I needed a drink anyway, so I went to a drinks stall to order teh si siu dai.

[digression]
In the Hokkien dialect, teh means tea with condensed milk and sugar (when ordered from a typical drinks stall in Singapore. Otherwise it just literally translates to “tea”.). teh si means tea with evaporated milk (and sugar). Evaporated milk is less sweet than condensed milk, so sugar is typically added to the tea. siu dai means less sugar. So, say it with me, teh si siu dai means tea with evaporated milk and less sugar.
[end digression]

The drinks stall uncle found that his current can of evaporated milk ran out. (In Singapore, “uncle” can be used to address any male who’s older than you. If you really want to get into the Singapore mode of speech, pronounce it as “unk-uh”, without curling your tongue to form the “l” sound.) So he brought out a new can of evaporated milk, and what appeared to be an ice pick.

He placed the sharp end of the ice pick at one edge of the top of the can. He held it in place with one hand, then with his other hand, hammered the handle of the pick, and bored a hole into the can in one smooth motion.

My first thought was, “I would have used a can opener”.

Before I could finish that thought, the uncle took that ice pick, placed the sharp end at the other edge side of the can, and bored a hole there.

Tin can with holes by ice pick (top view)

My next thought was, “Why did he bore that second hole?”

Before I could finish that thought, the uncle held the can up and half-filled a glass with evaporated milk.

In that instant, I answered my own question. It was to let the air flow in, so a vacuum wasn’t created, so the evaporated milk would pour out smoothly.

Side view of bored tin can

And immediately after I got that insight, questions surfaced. “Why didn’t they do it for ketchup bottles? Why are ketchup bottles designed the way they are? Ketchup’s viscous, so why a small opening to make your life miserable? Why… oh thank you uncle.” My teh si siu dai was ready, and I took my drink back to my seat.

Well, I was never much of a condiment kind of guy, so ketchup bottles didn’t bother me much. Then again, in these modern times, I don’t see ketchup bottles in use any more. But just in case

today’s whippersnappers, lacking experience with this task in the home environment, need instruction all the more if they are to avoid a public faux pas and consequent humiliation

I will refer you to a definitive guide on ketchup decantation.

That’s it. Unless you want to know about the different variations of tea in Singapore…

CSS colours and hexadecimal

CSS, which stands for Cascading Style Sheets, allows you to work design wonders with your HTML. A web page is split into two parts, the design and look versus the data and functions of the page. And CSS is the main driving force behind the former. Aaron’s article gives an excellent introduction to this separation of form and function of a web page. Then stroll through the breathtaking CSS Zen Garden to gain inspiration for your CSS design project.

So why do you need to know anything about hexadecimals? Because a major component of CSS values come from declaring colours. And colours are represented in mainly hexadecimal values.

In CSS, colours are commonly represented as RGB triplets, such as #336699. RGB is a short form of Red, Green and Blue. A discussion of colour theory and representation is beyond the scope of this article. Simply know the six characters (not including the hex sign #) is divided into 3 parts. First two characters represent red, middle two for green and last two for blue.

These two-character parts are the hexadecimal values of the colour component (red or green or blue), and range from 0 to 255. The higher the number, the more of that colour component. So #0000ff represents pure blue. If it’s still new to you, rest easy, because most standard image processing software has a hexadecimal colour converter.

There are other ways of declaring colours in style sheets, such as color:Red. To a non-technical person, that is very useful. But we’re programmers. What if we need to dynamically generate the style sheet?