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?