Problem Solving
Elegant Solution
Problem-Solving Techniques
When the problem-solving went wrong
Blocked on a simple problem
After a new git commit, I noticed the mobile view for my website started acting strange. I had had a problem with my mobile view from the very beginning (a little more about it at the end of this post), so I wasn’t surprised at all. After a little bit of self-beating (why do I always have problems with css???) I went to my css file and tried to change some styles there to see if they affect the page view. I didn’t see any changes. Maybe I broke the connectionHTML with css? Checked - nope, all good with the connection. Went to get a cup of tea. Came back. Checked the media queries. Aaaaaand
For a better experience try to synchronize this video with the music:
I saw her, red and so alone! I couldn’t remember any manipulations with the css file which could cause accidental }-removal, but let it stay a mystery. One of many other mysteries of missing brackets, dots, and semicolons.
Elegant Solution
This website started as a three pages blog. Each page had almost the same structure: main navigation on the top, navigation for blog entries on the left, and the main content on the right (desktop view).
With each sprint, I would need to add new blog entries. It was quite easy at first - just copy HTML text, past, and change text content.
One of the main tool of development
Sounds easy and it was, in fact, easy. But then the blog got more entries and altering the menu, and adding more links to it becomes one tedious task! At that moment I’d just started learning about JavaScript and finished the code along video. “It is time to use my JavaScript skills!” - I’ve decided. After the video, I know how to insert any content to any tag as long as I know the ID of this tag and I know if I call a function after creating it in the js file it will be executed at the moment when the page is loaded. I created .js file with one simple function:
Very simple function
After creating the main function I needed to write a code for the menu which I would pass to the function as a parameter.
HTML-text for the blog menu
And it worked! But a new problem appears. Look at the links in the HTML text below. I’ve copied and pasted a menu from the blog page, but because of the file structure of the website, the links for the menu on the index page must be different.
Site structure: blog items are in the folder
And there is a way to solve this problem: check if the page is index or user at the root of the website and create a different menu for this case.
Alter the links for index page
Now links will work on all pages, but there is another problem. If a user visits one of the pages of the blog, the menu is supposed to be a little bit different - the current item in the menu has a different position, but my current solution doesn’t support this feature.
The current item is marked
Solution: after the page is created (I need the menu already be on the page), I will need to run one more function which is looking for the <a> tag with the current item name as a content (the title of the page has exactly the same name as the menu item) and alter the id for the parent of the <a> tag.
Mark a current item
Problem solved! Now I just need to know if a user is on the index page (or at the root of the website) and display the right menu.
Find out the address of current page. Is it index? Is it root?
Check if it is not an index or root, display the right menu
Problem solving techniques
There is a list of problem-solving techniques, from the most used to less used:
Googling
This is, in general, my all-time favorite technique. I am convinced that there are no unique problems in the world (well, better say my problems are not unique, as there is a handful of pioneers in the world who, for sure, facing unique challenges). Often I get surprised that people have some problem, but have never tried to google it because for me it is the first thing to do. The main catch with google - you need to ask the right question and this is not always easy.
Reading error messages
This technique goes hand to hand with googling. Sometimes the error messages are quite straightforward (when there is a spelling mistake or wrong syntax, for example), but sometimes those messages can be confusing, and googling the error is helping to understand where is the real problem.
Console.logging
Checking every step by displaying variables in the console is an amazing way to see through the code and catch the error, it helps make a code transparent and clarify every step.
Rubber ducky method
I love this method, especially for the hardest problems. Talking about the problem often gives a solution. At the beginning of the course, I asked my daughter, who loves to make things from clay, to make Problem-Solving Bob for me.
Pseudocode
Pseudocode is helping a lot to divide one big task into many small ones. After that, all I need is to write a small function (or another piece of code) for every step in pseudocode. This technique is also priceless when you know you or somebody else are going to come back to your code and it needs to be clear and understandable.
Trying something
Normally I wouldn’t try something without understanding why this could work and trying something just because somebody wrote it on StackOverflow is my last resort. But sometimes understanding comes after trying, so on rare occasions I just try something even if it doesn’t make sense to me. And sometimes it works.
Improving your process with reflection
This is a very important step. After each solved problem, I need closure and reflection is a perfect way to learn from the experience. What went well? What was wrong? What to do or not to do next time? Even (or rather especially) if the process of problem-solving was bumpy and the solution wasn’t elegant, it still was a lesson that I need to learn.
Asking your peers for help
I respect the time of other people and trying do not disturb others until it is really necessary. However, I understand that sometimes asking questions straight away is saving time for the team, so as always, it is all about balance. Refusing to ask for help and spending hours trying to solve a problem alone is not good for teamwork, asking trivial questions every time when you have them is not a good way either.
Asking coaches for help
This is similar to the previous part - I respect the time of coaches. The difference between asking peers and asking coaches is that coaches encourage students to ask questions and their level of expertise is much higher than the level of expertise of peers (also coaches have experience with students and curriculum, so they probably have heard the same question before). Again, depending on the circumstances, I would assess the situation first, and if I have time I would try to find the solution by myself (this is the best way of learning for me).
When the problem-solving went wrong
That was a good lesson for me and I am pretty sure it could be a good plot for a children's book :)
During the writing of my first blog post I faced a problem - if I want to show an HTML code I can’t just copy and past it, because the browser will interpret it instead of actually displaying the code. And I also wanted some fancy colors for tags and brackets - just like in VS code. I didn’t want to just screenshot the code, I wanted people would be able to copy and past it (who are those people who would do this? Rhetorical question, there are no any). I googled it but didn’t succeed. Then I got the idea - what if I write a simple script that would take HTML code and class names as input and create a code with all styles in place (I wanted to use <span> tag to surround tags and brackets)?
And I did: here is the link.
It would take an HTML text and turn it into another HTML text which I would need to insert on my page.
Input
Output
How it looks on the page
The problems with my solution:
- Inserting the code using <div>, <pre> and <code> tags was a disaster. It was hard to make the code look good on the page and it completely ruined the mobile view even though I spent hours trying to adjust it
- was extremely bulky and add a lot of mess to the page’s code
- It wasn’t pretty enough, there were only two styles so <> and tag name would be different colors, but in reality I would need more colors
I used this tool for the last posts just because it was hard to let it go and accept that it wasn’t a good solution, but in this post I decided to use screenshots of code.
Even though I spend a few hours writing this solution and it didn’t work the way I wanted, it was a good lesson for me.
- I've practiced my JavaScript skills
- I've created beautiful buttons
- I've learned how to let go
- I've got a story to tell