The Edge Case

Building websites from scratch is a long learning process. I've been doing this full time for two years now and I still receive lessons from deployed sites that remind me that I don't know everything.

The 9PM text

I'm doing family stuff, wrapping up a long day of kids out of school for the summer, the kids fall asleep and I pick up my smartphone to find a corny fantasy series to watch while I'm doing dishes. There's a new text.

One of my clients has sent me a screenshot from their smartphone of their CMS backend with all the buttons missing. It's just a list of posts. A year ago, I might have panicked. But I'm a 'seasoned' veteran of my own mishaps and realize that a bug fix I rolled out last week might have had unintended consequences.

Unintended consequences

I booted up my desktop and looked at exactly what I'd changed last week, searching every line for what I thought had gone wrong. I thought I had made an adjustment in a layout for the frontend that broke the CMS interface. I didn't find anything.

Then one of the most basic rules of troubleshooting popped into my head. I could hear my old teacher: "Can you recreate the error?"

I opened the client's site on desktop and mobile, checked the public pages and saw something very odd. The title of the post they had made was very long. It was so long that it had wrapped around the bounding container twice before coming to an end. It was a URL. Immediately I realized this was not the unintended consequence of my earlier fix, but an overlooked edge case.

What broke

An edge case, in programming, is when unexpected data is entered into an input field. In this instance, the user had pasted a URL where my field was expecting words. The URL had stretched the nested container in the CMS to its maximum width, pushing all other objects within the parent container off the page. The buttons hadn't disappeared, they were hanging out at the beach.

The way I had formatted the field, spaces between the words determined how the title displayed and collapsed to fit within its boundaries. When there were no spaces in the word, it broke the rules, resizing its container and sending all of its companions on an unexpected vacation.

It was a 'DUH' moment for sure. I could have set limits on the sizes of the containers during the initial development of the site—or told long unbroken strings to wrap and stop stretching the layout. I know how to do it… it took me 20 minutes to fix the problem, 10 to test and 3 to deploy.

Don't sweat it

'DUH' moments happen to everyone. This edge case was a comedy of 'DUH' moments. The client pasted the URL in the wrong field and it revealed my oversight. These things happen.

When these things do happen, it's nice to have someone who won't sweat the mistake and tie it up without fuss.

If you need your site handled by someone like that, drop me a line.