Although Week 13 was the introduction to my bug-exterminating excursions, it came at the price of a lot of snot and tears. Some of the steps were harsher than usual, and documentation was awfully scarce. But, open source is a bustling marketplace of ideas and efforts, and I was willing to contribute mine.

Picking up where we left off, my mortal enemy was now my own machine. Trying to successfully set up the development environment took a while. Since there are different approaches, it took me a while to get to the approach that was suited for my use case. Wouldn’t it be nice if there were some pointers to the use cases for each environment setup? Anyway, I brutishly hacked away at my keyboard trying to determine where the bug was coming from.

Mirage

I have been duped before. But, this was one of the most treacherous ones I have traversed. React handles updating the webpage through a setState() function. Now, when the checkbox is clicked, that function is supposed to be called to render a checkmark. However, I noticed that the debugger stepped through all the processes, called the setState() function. But, the checkmark did not appear. This led me down a rabbit hole, until I realized a few hours later that setState() goes into effect after a while because of the asynchronous nature of TypeScript. I had already started celebrating and praising Raymond’s tenets in the back of my mind. Only after a few deceitful investigations did I find that bugs were not always shallow.

Pesticide

I delved deeper and deeper into the code’s execution and arrived at the place where the custom (ugh!) checkbox button was being rendered. I looked at the CSS and was rendered speechless. It was something I had never seen before. During my short period in web development, I had never seen a HTML element that started with <svg>. So, I searched the web up and down for all the elements that exist withing svg elements and define its characteristics.

Accidental Annhilation

Now, as I was figuring out how the CSS was being rendered, I realized something odd. I noticed that the CSS styling that was being applied to the webpage in Chrome was different from Firefox. I thought to myself that this might be a WebKit issue. Indeed, when I opened Safari and navigated to the webpage, it certainly was. What’s more was that the checkbox was being rendered, but it was just not visible. This was a fantastic discovery because now I could pinpoint where the visual rendering is coming from.

After a while, I decided to do a git bisect and wanted to choose a commit that did not contain the bug. So, I scrolled back a few months worth of commits and voila! As soon as I checked out the new commit, I noticed that a particular variable was changed from var(--black) to var(--near-black). I, then, edited the variable and the issue was fixed.

;

Rest

I finally did a git blame to see when this issue was introduced and noted the commit. Then, I submitted a Pull Request that simply undoes that commit and it was accepted.

Until next time…