TeochewThunder

Sunday, 16 August 2026

Web Tutorial: Pill Puzzle (Part 1/4)

During some audio Social Media dialogue on the Clubhouse app, I overheard someone describe a puzzle. Something along the lines of - you've been poisoned and about to die. There are eight pills, and any one could be the cure. One is deadly poison. It's the lightest pill, but only by a fraction. You have a weighing scale you can use twice.

I thought about it, and I wanted to make this game. Except that I would switch things around a bit. One of the pills is the cure and the rest are poison. Now that would make things more deadly. And exciting!

We will be using jQuery for this, because I've come a long way the last ten years and sometimes I can't be arsed to deal with vanilla JavaScript. This is one of those times.

We start off with this HTML, ensuring that the jQuery library is included, and setting font size and background color to black. div tags will be outlined in red while we built the interface.

<!DOCTYPE html>
<html>
  <head>
    <title>Pill Puzzle</title>

    <style>
      body
      {
        font-size: 12px;
        font-family: verdana;
        text-align: center;
        background-color: rgb(0, 0, 0);
        color: rgb(200, 200, 200);
      }

      div {outline: 1px solid red;}
    </style>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <script>

    </script>
  </head>

  <body>

  </body>
</html>

We'll divide the interface into three divs and style them accordingly.

The top is 400 pixels wide, the middle 600, and the bottom 500. All of them use the margin property to center themselves.

Part of this exercise is my current flirtation with grid and flexbox, as you'll soon see. I want this div to contain three columns, the middle one widest.

And if we do this, we ensure the middle column is the biggest, with a 20 pixel space between all three.

.topContainer
{
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
  width: 400px;
  margin: 0 auto 0 auto;
}

In the first div, we go to its center div and add three more divs inside. In the first one, we have the scale symbol. The second one is used to display how many times the scale has been used. And the last one contains a button used for weighing.

<div class="topContainer">
  <div>

  </div>

  <div>
    <div>⚖</div>
    <div>Times Used: </div>
    <div><button>WEIGH</button></div>
  </div>

  <div>

  </div>
</div>

This is just the start.

Now for the sides. Each of these will contain another div, and in turn will contain 9 more divs! These are placeholders for the pills. There are going to be 8 pills, so theoretically, there's a maximum of 8 placeholders on each side. The ninth one is the scale bowl at the bottom!

<div class="topContainer">
  <div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

  <div>
    <div>⚖</div>
    <div>Times Used: </div>
    <div><button>WEIGH</button></div>
  </div>

  <div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>

To really hammer home the visuals, we're going to do some styling here. The left and right divs will be styled using pnlWeighPillsContainer. The first immediate div within will be styled using pnlWeighPills. The middle div is styled using scaleContainer, and that first div within is styled using pnlScale.

<div class="topContainer">
  <div class="pnlWeighPillsContainer">
    <div class="pnlWeighPills">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

  <div class="scaleContainer">
    <div class="pnlScale">⚖</div>
    <div>Times Used: </div>
    <div><button>WEIGH</button></div>
  </div>

  <div class="pnlWeighPillsContainer">
    <div class="pnlWeighPills">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>

Now for the CSS. scaleContainer is a grid container that divides its content into three rows, with the top row getting the most space. pnlScale neccessitates that because we've set the font size to a large one. pnlWeighPillsContainer is a flexbox container where the alignment is vertical and by default, content is set to the middle. However, its immediate child, pnlWeightPills, is a grid with nine rows, each having equal billing.

body
{
  font-size: 12px;
  font-family: verdana;
  text-align: center;
  background-color: rgb(0, 0, 0);
  color: rgb(200, 200, 200);
}

div {outline: 1px solid red;}

.topContainer
{
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
  width: 400px;
  margin: 0 auto 0 auto;
}

.middleContainer
{
  width: 600px;
  margin: 0 auto 0 auto;
}

.bottomContainer
{
  width: 500px;
  margin: 0 auto 0 auto;
}

.scaleContainer
{
  display: grid;
  grid-template-rows: 8fr 1fr 1fr;
  gap: 0px;
}

.pnlScale
{
  font-size: 12em;
}

.pnlWeighPillsContainer
{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pnlWeighPills
{
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 1px;
}

Here you see the scale! The left and right divs have a mess of divs bunched right in the middle. We'll work on that next.

In the last div of the divs inside each div styled using pnlWeighPills, insert a div with the CSS class bowl.

<div class="topContainer">
  <div class="pnlWeighPillsContainer">
    <div class="pnlWeighPills">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div><div class="bowl"></div></div>
    </div>
  </div>

  <div class="scaleContainer">
    <div class="pnlScale">⚖</div>
    <div>Times Used: </div>
    <div><button>WEIGH</button></div>
  </div>

  <div class="pnlWeighPillsContainer">
    <div class="pnlWeighPills">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div><div class="bowl"></div></div>
    </div>
  </div>
</div>

This is bowl. It's a light grey div that has rounded corners at the bottom, with a fixed width and height.

.pnlWeighPills
{
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 1px;
}

.bowl
{
  width: 60px;
  height: 20px;
  background-color: rgb(200, 200, 200);
  border-top: none;
  border-radius: 0 0 10px 10px;
  margin: 0 auto 0 auto;
}

And now that one of the divs in the grid contains content that has fixed height and width, the rest of the divs follow suit!

We can leave the top portion alone for now. Let's work on the middle portion. We first have one div with the id pillsContainer. It in turn contains 8 div tags, one for each pill.

After that, have two more divs on new lines - ids playerFace and playerMessage.

pillsContainer is another grid display, with 8 columns all with equal weight. For playerFace and playerMessage, I specified font size. For playerFace, the cursor property has been set to pointer because this is clickable.

.pnlScale
{
  font-size: 12em;
}

#pillsContainer
{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 5px;
  height: 100px;
}

#playerFace
{
  font-size: 7em;
  cursor: pointer;
}

#playerMessage
{
  font-size: 3em;
}

.pnlWeighPillsContainer
{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Speaking of clickable, let's also get this out of the way. All the div tags inside pillsContainer should be styled using the pillsSlot CSS class.

Same for these inside the divs styled using the pnlWeighPills CSS class. Just the first eight, not the last one.

In the CSS, just set pillSlot to be clickable.

#pillsContainer div.selected
{
  color: rgb(255, 0, 0);
}

.pillSlot
{
  cursor: pointer;
}

#playerFace
{
  font-size: 7em;
  cursor: pointer;
}

In any case, your middle portion should be taking shape now.

Now for the bottom part! This part is the easiest. You add some instructions, and then add a button that the user clicks when they're ready to play.

<div class="bottomContainer">
  <p>You are slowly dying. There are eight pills. One of them is the cure. The rest are lethal poison and will kill you instantly. They are all identical in size and shape, and color. However, the cure is slightly lighter than the rest. You may use the scale exactly two times before it breaks.</p>

  <p>Once you have decided which pill to take, select the pill and click on the face at the bottom. Good luck!</p>

  <button>START</button>
</div>

And here we go, that's basically the UI. There's more to it, of course, but we have the skeleton upon which the rest can be filled in.

Populating with pills.

Tuesday, 11 August 2026

The Case against Hunger, Enthusiasm and Other Useless Buzzwords

After interviews with prospective candidates are concluded, when I ask fellow interviewers for impressions on the candidate, I sometimes get very strange answers.

"I dunno, the enthusiasm wasn't there."

"Has the skills. Not sure if he has the hunger."

"He just didn't seem excited enough at the prospect of working here."

I'll be honest - that mode of thinking is alien to me. I understand why the owner of a company would think his company is special, the same way the mother of the ugliest child on Earth would think her tyke was Heaven-sent. My question really is: why should others be expected to feel the same way?

A face only a mother
could love.

Why, pray tell, should anyone, much less a fully qualified tech worker, be excited to be working for your company in particular? Is this really a reasonable expectation? Are you genuinely at the level where being allowed to work for you should be taken as an honor? What loses me is when people start giving themselves airs. Buddy, your company sells spaghetti and cheese fries. That's perfectly respectable. But stop talking about your "sacred mission" like you're solving world hunger.

What they probably really wanted

I suspect what they really meant was - we don't want people to just show up for the money and give the bare minimum. Which sounds more reasonable and actually even sympathetic.

They probably also meant that they don't want this thing to be too transactional. But here's the thing, cupcake - it's all transactional. You're literally running a business here. People need money to pay their bills. They need jobs to have that money. You're offering a job - look, I don't really need to explain this part, do I?

And let's just quit sugarcoating it: Many of the employers who are fetishizing "hunger" can't handle genuine hunger. That level of hunger involves going above and beyond, yes. It also involves constantly looking out for the next better opportunity and coldly leaving their former employer in the dust if needs must. How do I know this? Well, I was young and dumb once. And yes, I was hungry. Starving, even. My employers were happy to benefit from my hunger, as they should. They were less happy when I left, and my hunger started benefitting other employers.

Here, eat some shit.

No, an alarming number of the employers who say they want "hunger" and "enthusiasm", generally mean that they want someone more exploitable. Someone who will eat shit, smile, and thank their employer for the opportunity to eat shit.

Now, making some grandstanding claim about how exploitation is morally wrong, would make me a huge hypocrite. All my professional life, I have been exploiting my employers' need for labor and tech expertise, the same way they've been exploiting my need for money. It's mere capitalism; very mutual, very respectable.

I just wish people would be honest about what they want, instead of abusing the thesaurus for fancy terms like "hunger", "grit", "self-starter", "go-getter" and the usual cringe LinkedIn buzzwords. Employers, employees; we're on different sides of the chessboard but we're essentially playing the same game. No need to get all self-righteous about it.

The case against enthusiasm

If I wanted to be crude (or compare myself to a sex worker), employers like that remind me of a line I heard in a movie once, and for the life of me I can't remember which one, or even who said it. Was it Al Pacino? I'm certainly hearing it in Pacino's voice, specifically the one he used in The Devil's Advocate. He was talking about how ridiculous a guy was because he hired the services of a hooker and actually expected her to enjoy the sex. Basically, not only did the unfortunate woman have to blow him, she had to pretend it tasted like candy.

Just like candy.

These employers not only want their employees to run through brick walls for them, they want these employees to act like they've been given the highest privilege. Come on, now. Are you grateful that your employees choose to work here? If not, why should the reverse be true? I'm not even asking for humility here; that might be a step too far. Perhaps something more manageable, like dialling that hubris down to less cartoonish levels.

Do I have that requisite level of bright-eyed enthusiasm? Is that why I've been in this company for the last five years? Hell no, it's just the way I work. And that's exactly my point. Asking someone to be in the company out of "enthusiasm" is like asking someone to marry you purely for "love". All these are feelings. And feelings in human beings are even less predictable than an LLM's responses.

Nothing wrong with feelings either, but at some point you're going to need something more concrete and dare I say, sustainable.

What you want is work ethic. Something that persists regardless of a worker's feelings. After all, you don't pay for their feelings. You pay for their time, and their output.

The Takeaway

Any idiot can demand enthusiasm. And any idiot can fake it.

It's not wrong to ask for enthusiasm. But you need to know what part this enthusiasm is supposed to play. "Enthusiasm" is a fuzzy metric that too many employers use to identify employees whom they can subsequently exploit.

Hunger cuts both ways. If you want anything less, you don't want "hungry". You want a ~~wage slave~~ asymmetric employment relationship. At least acknowledge that.

Stay hungry, but stop being foolish!
T___T

Monday, 3 August 2026

Working has different goals from working out

The last time I spoke about swimming laps in relation to software development, it was to discuss Brooks' Law. I've had a couple more insights recently, though those are more about work in general.

See, I'd gotten a bit smug about how little effort it took me to swim from Point A to Point B. I was averaging one stroke for every three that others were doing, but travelling at the same speed, or better. Then I took a closer look at the metrics I was using.

Getting smug in the water.

That's when I knew I'd lost sight of the big picture, and allowed work philosophy to cloud my judgement. Here I was, patting myself on the back for becoming a more efficient swimmer when it was never even the goal.

Working

Larry Wall summed it up elegantly when he said that laziness was a virtue in programmers. He could have meant it as a joke, but philosophically, this cuts to the heart of the matter. Work for the sake of work is not admirable, at least not in the corporate context. You are not paid to work. You are paid to get work done. You are paid to add value through your work. If you think otherwise, you're basically a (admittedly very industrious, good on ya mate) buffalo in the shape of a human being.

Beast of burden.

Thus it stands to reason that at work, you want to produce the most output for the least amount of effort. Both current and future effort. Which is why software developers try to write good code - not because writing clean elegant code is a virtue unto itself, but because code that conforms to those standards minimizes the amount of effort needed to maintain it down the road.

Therefore because I was travelling through water at the same speed as others while putting in less effort, I thought I was nailing it. I forgot that I was working out, not working.

Working out

What are the metrics for working out? You want to put on more muscle. You want to lose weight. You want better cardio-vascular conditioning.

Unless being an athlete is literally your job, you're not cycling primarily because you want to be a better cyclist, or swimming because you want to be a more efficient swimmer. No, when you're working out, your goals are very different. Burn calories. Get your heart rate up. When working out, doing more work is precisely the goal.

Now, at my age, putting on more muscle isn't a goal. Decades of staring at my abs have made the prospect less than interesting. Losing weight isn't that big a deal; as long as I can see my toes when standing, I'm good.

Heart health.

But cardio-vascular conditioning? Oh, absolutely. That's what I was swimming for in the first place. And because I was going at the same speed I've been doing for years, without putting in much effort, my heart rate wasn't going up at all. Which effectively meant that while I was in the water congratulating myself for having become better at swimming, I was pretty much wasting my time.

Conclusion

Swimming faster was never the goal. Swimming more efficiently was never the goal. Putting in more physical effort was always the goal. Not only did I take my eyes off the prize, I forgot what it looked like.

Mission Swimpossible?
T___T

Thursday, 30 July 2026

A Software Developer's Vacation In Singapore: Coast-to-Coast Trail Edition (Part 4/4)

In the weeks that followed, I would constantly revisit these sub-routes. I would do them again, and in reverse. The point was to get myself familiar with the entire route. Prepare myself for the day I attempted to the entire thing in one go.

And then the day came. I scheduled it, right on Good Friday, 3rd of April, and prayed it wouldn't rain.

In the morning, I had a McDonald's breakfast at Jurong East Mall, then headed off to Chinese Garden MRT where I prepped two bottles of water and a sandwich, and a Snickers bar from the Cheers store. Minimal prep, I know. That's me - minimal to a fault.

There, the Anywheel bike was rented, and I started off from Checkpoint One. Things were smooth-going much of the way; I was pretty familiar with the route by now, after having gone back and forth over it obsessively.

This time, I rode on the other side of Bukit Timah Road just for a more varied experience. This took me right past the Rochor River, and this was surprisingly beautiful. I might have caught it at a good time.

Rochor River was
quite the eyeful.

It was just before 12 noon when I arrived at Checkpoint Four. So far so good. I was feeling fine, and barely even breathing hard.

The First Break

I sat down at the Kheam Hock Park to eat my sandwich. The sky was overcast and I was concerned it might rain and cockblock my entire day. It was maybe ten minutes past noon.

Kheam Hock Park, right at the
end of a boardwalk.

I hadn't had time to really take a look at the tiny park. Charming. Good for a dog walk.

Once I reached the overhead bridge at Lornie Highway, I got over the bridge, passed MacRitchie just like the last time, and audibly groaned when I arrived at the construction going on at Bishan and Ang Mo Kio. Damn, I really hate this part.

Once I got that part behind me, the best part of the journey began - starting from Ang Mo Kio Linear Park to. the entire Waterway stretch at Punggol. I took some time to settle in and eat my Snickers bar.

Huddling under this bridge
for my Snickers break.

Once done, I was on my way again, passing Checkpoint Ten at Coney Island without bothering to stop. The sun was blazing but I soldiered on out of the beautiful cycling paths and onto the hellish landscape of Punggol Tingkat.

By this time, my ass was killing me and my right leg had gone numb. I was conscious of a light but persistent burning sensation on the back of my neck. When I finally crossed from Punggol Barat back to the mainland and was greeted by the sight of the entrance to Rower's Bay Park, it was like water in a desert.

Rower's Bay Park entrance.

The sun was high in the sky, and it was making the water sparkle. The beauty of the sight was indescribable. I'd just completed the Coast-to-Coast Trail, and it was glorious.

The alternative route from Checkpoint Seven

On a separate occasion, just out of curiosity, I returned to Checkpoint Seven at Sengkang Swimming Complex, to explore the alternate route to Checkpoint Ten. This was actually the Sengkang Floating Wetland, a patch of swamp that was somehow eerily beautiful in the day. I had to dismount from the bicycle and push.

The bridge over the wetland.

Nice park after the wetland.

The route led on to Sengkang Riverside Park, which I largely skirted to embark on a long stretch of road leading west, parallel to the Tampines Expressway.

Road leading out of the park
and under a flyover.

Long stretch ahead
next to TPE.

After some riding, I arrived at the Seletar Aerospace Flyover, and headed north again along Seletar Aerospace Way, right up until I came to this idyllic green patch called The Oval.

Very nicely manicured
infrastructure at The Oval.

I was pretty much winging it at this point, with a rough idea as to which direction to my destination, but no real clue as to the paths I needed to travel to get there.

That final stretch!

Aerospace greenery. Pretty fly!

The next twenty minutes saw me meander around the aerospace until I discovered Seletar West Link, after which I simply rode the green stretch all the way to the welcoming entrance of Rower's Bay Park.

Thoughts on this route

Now this was underwhelming, and I suspect this was because I really didn't know the official route. In fact, part of the problem might be that this part of the Coast-to-Coast Trail simply wasn't meant for cycling. It was akin to trying to find semicolons in a Python code base. Sure, you'll probably be able to find them, but they won't mean the same thing to you especially if you cut your teeth on Java.

I don't feel like revisiting this part anytime soon, though the other parks around the area do look promising for exploration.

Epilogue

This little foray into cycling in Singapore, would soon expand into a more extended exploration of similar trails in Singapore. The fact that I had also quit smoking at this point, also meant that I was able to spend more time in these parks.

This was a side of Singapore I hadn't appreciated up to now. And I intend to remedy that.

Where there's a wheel, there's a way!
T___T

Tuesday, 28 July 2026

A Software Developer's Vacation In Singapore: Coast-to-Coast Trail Edition (Part 3/4)

The next time I tried this stretch again, it was with an eye to getting all the way to Rower's Bay Park, which was Checkpoint Ten.

Because I enjoyed the ride from Checkpoint Six to Seven so much, I decided to do it all over again, taking a bus to And Mo Kio Linear Park and renting the Anywheel bike from there. Once I hit Sengkang Swimming Complex, the exploration started in earnest.

What followed was something that felt like a masterclass in urban planning to a layperson like me. The paths were beautifully flat. This was made for cyclists, and it showed. I cycled right through Sengkang Riverside Park, absorbing plenty of sights on the way. Honestly, I never thought any place outside of the usual tourist attractions could be so damn pretty.

This part was actually the
least extravagantly pretty.

I crossed this charming little bridge over Punggol Waterway, and the view was... let's just say my photos don't do it justice. They call it Jewel Bridge.

View from the bridge.

This route took me right by Waterway Point and Punggol Sports Center. At this point, I think my gushing over how picturesque everything is, is just getting repetitive. Amid all this beauty, I encountered Checkpoint Nine.

So pretty.

Even prettier.

Checkpoint Eight.

This route eventually led to this aquaduct called the Waterworks, by Waterway Ridges Rain Garden. This was quite a pretty neighborhood. Looked expensive, too.

Fancy-looking canal.

Turning in, I could see Coney Island as I cycled along Punggol Promenade Nature Walk.

Coney Island across the water.

And this was the entry to Coney Island, Checkpoint Nine. I actually went in to take a little tour, but didn't go that far.

Checkpoint Nine.

Now, at this point I had to make a decision. The actual path to Checkpoint Ten was from Checkpoint Seven. Yes, Checkpoint Seven was a fork in the Trail where the branch I took led to Checkpoints Eight and Nine, while the other branch led to Checkpoint Ten. Which meant that if I wanted to do things the "official" way, I needed to ride back to Checkpoint Seven and then proceed to Checkpoint Ten.

Nah. Fork that noise.

I pushed on to Punggol Beach and continued riding west along Northshore. Eventually, I emerged into Seletar Link North, onto the manmade island known as Punggol Timor. This was a markedly different vibe - mostly industrial. Much of the traffic was heavy trucks and pickups.

A lot of sand.

The first landmark I passed was this entire section of sand mountains. If I had to hazard a guess, this would be where they keep the sand they used to reclaim this island.

This was... nice!

Much of the scenery ahead was green wilderness. But I did come across this little channel, and simply had to stop to take a picture. With the wind and all, it was pretty surreal. This was the channel that separated Punggol Timor, which I was currently on, and Punggol Barat, which I was riding through next.

The rest of the ride from that point on, was a slog. The path was narrow and I was going past some extensive construction work. On the other hand, the sheer simplicity of the path ahead, held its own appeal. It was as ghetto as the crap I had to slog through in Ang Mo Kio and Bishan, but at least it was a largely uninterrupted path.

Soon, I crossed another bridge and found myself back on the mainland. Across the road was the verdant entrance of Rower's Bay Park, Checkpoint Ten and the final stop on the Coast-to-Coast Trail.

Checkpoint Ten

I had tracked down all ten checkpoints; now all I had to do was familiarize myself with the route so I could do it in one attempt.

Thoughts on the last part

This was without a doubt the best part of the trail. It was like entering a code base where everything was current tech, pristine and not tacked on with legacy shit. All of the exciting new features, none of the scars. As a software developer and thus a bit of a builder myself (even if in a non-physical sense), I could not help but really appreciate the planning that went into this.

The route itself did not cover a wide area this time; this was largely a circular path I took. A very picturesque circular path, to be sure.

Conquering the entire trail at one go.

Disclaimer

All opinions expressed on this blog are mine, and mine alone. Deal with it.

All technical information and code are written at my current level of understanding and may be incomplete. Some of it has been deliberately kept simple for clarity. Don't hesitate to correct me.

My experiences may be limited, and as such there may be blind spots in my reasoning. Feel free to disagree.

I'm not being paid to write this blog. This is purely a leisure activity. Keep your expectations low.

This being the Internet, someone is bound to take offense. The Web's a big place, and you're all big boys and girls. Seek life elsewhere.