Header image alt text

The joy of figuring out that bug

January 17th, 2018 by ashliecrooks

Sometimes when John goes into the office on his day off, I come with him. I can usually snag a second screen at the cubicle where his little undergrad works, plus he has a great selection of hot tea. It’s like going to a coffeeshop but free, and with the second monitor.

I’m working on a website for my cousin, and it’s been fun, actually. I sketched out a draft for the front page and made a quick mockup and sent it off. Rather than wait to see whether the draft would be approved I started working on it because I was excited about the look of it.

Free Code Camp teaches Bootstrap as its first course, and it’s such a timesaver. I would definitely be able to work without Bootstrap but it’s so much nicer to work with a framework with established classes that can easily be tweaked. One of the downfalls, however, is that sometimes those classes make things challenging, especially when trying to work out some weird bug that makes things just not hang the way I expect. Today, I ran into one of those bugs.

Everything lined up just as I wanted, the icons and title in their correct spot, the Javascript and CSS sorted for the menu, except during the mobile view. This was quite perplexing. I clicked away at the screen, the cursor transformed from the usual pointer finger to a greyed out circle to represent a finger touch, until I noticed it was working fine, as long as I clicked on the furthest left edge.

A screen capture of a website header with elements outlined through the Chrome plug-in Pesticide.

Pesticide is great for showing the layout of divs and elements.

A glance at the element layout with Pesticide showed that button, due to its size, overlapped the second, larger column. (Rather, it was overlapped by the other column because that column was rendered after it, but it took me a bit to figure that one out.) I tried a couple of fixes with CSS, spent a frustrating ten minutes googling variations on “bootstrap columns overlap mobile,” read all the relevant questions on Stack Overflow, and finally gave up to stretch.

I complained to John about it, knowing he likely has no clue what I’m talking about, but feeling zero guilt at all the coding talk I’ve listened to over the years while having no understanding myself. We walked together toward the restrooms when I had an idea. “Maybe pushing will fix it.” Rather than hurry back to see if it works, I tok a few minutes to walk around the atrium with live plants, imagining I’m introducing extra oxygen to my bloodstream and my brain.

Sure enough it worked: reordering the divs so that the big one came first and “pulled” right and the small one “pushed” left made the button in the small div render last. Even though it still overlapped on Pesticide, it worked every click. Excited, I hurried to tell John about figuring it out.

“It’s great, right? That feeling of overcoming that bug. And then you go back to work and hit that next one.” Seeing the smile slip from my face, he quickly added, “But yes, you should enjoy that feeling while it lasts.”

Buzzkill.

Got comments?

Your email address will not be published. Required fields are marked *

*