Site logo

Jesse Caunter
Web Developer

Problem Solving

Simple Solutions

Last week I ran into a simple problem, although I didn't know it at the time. We were learning about the DOM, and the teaching material was expaining how to select specific HTML elements on a page. There were screenshots showing the DevTools console tab with lines of input/output, however when I went into the DevTools console tab in my browser it was empty. Hmmm....

So why was nothing showing up in my console tab? I tried typing some JavaScript into my text editor, saving, and then refreshing my browser - but this wasn't doing what I was after. Why couldn't I see the Document Object Model for my page? Was there something wrong with my settings? I started to panic, frantically searching Google for answers. How could I work my way through this module when I seemingly can't even get to the starting line?

I took a break.

When I came back to the problem about an hour later, I had left the anxiety behind and was ready to tackle the problem step-by-step. I went back on Google and found a video tutorial where I could see someone using the DevTools console in real time. They were typing into it. Simple as that. All that panic and anxiety I had felt earlier suddenly gave way to a weird mixture of relief and amusement.

The biggest takeaway from this ordeal was to do with mindset. Sometimes we're just not in the right headspace to solve a problem for whatever reason, no matter how simple the issue. A quick break away from the problem can help ease feelings of stress and overwhelm, leading to a greater sense of clarity when we come back to it.

Elegant Solutions

Sometimes we face a problem where it's unlikely that we'll stumble on the answer without a proper plan. Taking a break can certainly help, but we need some other techniques in our problem-solving arsenal.

I found myself in this situation today while working on some JavaScript kata. I hit a wall. The focus was built-in methods, and I just couldn't get my head around how to take a sentence string and remove every instance of a particular word. I jumped on Google and started searching for answers. But every time I found some information that could be useful, my mind couldn't process how it would help me solve the problem as a whole. I wrote some code, ran it, saw the error messages and then deleted my code. This carried on for a solid 30 minutes at least, and I was getting frantic.

Did I figure out a solution?
Yes.
So how did I do it?

First of all I took a moment to reflect on how I was approaching the problem. I was looking at it as a whole instead of breaking it down into smaller pieces. Well there's a good place to start. So I broke the solution down into three steps of pseudocode:

  1. Split the sentence string into an array of single words
  2. Filter out every instance of the specified word
  3. Return the concatenated string made up of the remaining words in the array

I already knew how to code the first step, so I wrote the statement and console.logged it to check I was on the right track. Now I was getting somewhere, and felt the confidence start building. The second step required me to learn how the filter method is implemented, so I Googled it with an exact idea of how I needed it to fit my solution. I wrote the statement and tested it, but got an error message. After a couple more attempts I had solved the second step (sort of). I had filtered out each instance of the specified word, but this is what I was left with - I actually wanted the other words. So I figured using the 'not' operator was the logical fix. Tried to implement this a couple of times and got it to work. Great!

But hang on a moment. There were still instances of the word that hadn't been filtered due to capitalisation of different letters. So I fitted the toLowerCase method as part of the search criteria. I had slayed the beast! Now I just had to write the last step which I knew would be easy - a return statement which used the join method to concatenate the remaining words in the array. And just like that, a problem which had initially seemed so difficult had now been solved.

I felt a great sense of satisfaction having put some of the problem-solving techniques into practice and overcoming a real challenge. The real key was breaking it into smaller pieces through pseudocode, solving one step at a time, and letting the confidence build with each small victory.

Problem-Solving Toolkit