Tuesday, 26 May, 2020 UTC
Summary
“I don’t get JavaScript. I can’t make components from scratch. My mind goes blank when I stare at a blank JavaScript file. I guess I can’t do it because I don’t know how to think like a programmer”.
Sounds familiar? You’re not alone, my friend. Many people faced the same problem when they try to write JavaScript.
No more.
Let today be the day where you learn to think like a programmer.
You don’t believe you can think like a programmer You don’t believe you can think like a programmer because you freeze when you see a blank JavaScript file. But you already know how to think like a programmer.
It’s about using logic to solve problems.
For example, where are you going to go for lunch today? There are COUNTLESS of solutions. But how are you going to solve this problem?
One way to solve this is the process of elimination:
- You don’t want to cook (so you eat out)
- You don’t want to go out (so you order takeaway)
- So you go on Food Panda, Grab, Deliveroo, or another service you know.
- You want healthy food (so Macdonalds is not an option)
- You find something that looks appetizing to you.
- And you order the food.
Problem solved!
Understand this: If you can decide how get lunch for yourself, you can think like a programmer.
How to stop freezing when you see a blank JavaScript file You freeze when you face a blank JavaScript file because you think about how you should structure the code.
- Should you use functions?
- Should you use classes?
- Or maybe Object-oriented Programming?
Coders like to talk about coding paradigms. So you’re lured into the illusion that you need to code with ONE of these paradigms.
But you don’t.
Don’t think of structure.
Overcoming coder’s block is simple. Think of the problem you want to solve. You can follow these four steps:
- Break down the problem into small problems
- Find solutions to your small problems
- Assemble the solutions in a coherent manner
- Refactor and improve
Structure comes in last (during the 4th step, refactoring). If you think of structure, you screw up your brain before you even begin. Thinking of structure before solving the problem leads to complicated, overwhelming, bloated code.
Errors are your friends
A second reason why you freeze is because you’re afraid of the errors that show up.
Don’t be afraid of errors.
Errors are your friends. We’re lucky to have them.
Think about designers and other professions, when they create something, it’s hard for them to know what’s wrong with their work.
But we get instant feedback through error messages. We know instantly whether our code works. Errors are like angels that gently tell us something is wrong so we can make adjustments and correct things.
Think of the problem you want to solve. You can follow these four steps:
- Break down the problem into small problems
- Find solutions to your small problems
- Assemble the solutions in a coherent manner
- Refactor and improve
Step 1: Break down the problem into smaller problems.
How do you put an elephant into the fridge?
Here’s what most people would answer:
- Open the fridge
- Put the elephant in
- Close the fridge
Problem solved.
Poor elephant. It looks so sad in the fridge :( This answer is the best example of why you get stuck when you face a blank JavaScript file. You skipped steps.
If you think logically about the question, you’ll see a few glaring problems that remain unanswered:
- What fridge are we talking about?
- What kind of elephant are we talking about?
- If the elephant is too huge to fit into the fridge, what do you do?
- Where do you find the elephant in the first place?
- How do you transport the elephant to your fridge?
When you code, you need to answer every small question you can think of. That’s why the first step is to break your problem into smaller pieces.
Step 2: Find solutions to your small problems.
The second step is to find a solution to each of your small problems. Here, it’s important to be as detailed as possible.
- What fridge? – the fridge that sits in your kitchen
- What kind of elephant? – the african bush elephant
- What if the elephant is too big? – Get a shrink gun (🔫) to shrink the elephant (😎).
- Where do you find the elephant? – Africa
- How do you transport the elephant? – Put it in your bag after you’ve shrunk it, then take a plane back home.
Sometimes, you need to dig a few layers in to get the answer you need. In the example above, we can dig deeper into answers 3 and 4.
- Where do you get the shrink gun? – Borrow from the mad scientist next door.
- Where in Africa can you find your elephant? – Addo Elephant Park in South Africa.
Once you have answers to all your smaller problems, you piece them together to solve your big problem.
Step 3: Assemble the solutions in a coherent manner.
So, in the put-elephant-in-fridge example, you can probably follow the following steps:
- Get a shrink gun from the scientist next door
- Fly to South Africa
- Travel to Addo Elephant Park
- Find an elephant in the park
- Shoot the elephant with the shrink gun
- Put the shrunk elephant in your bag
- Travel back to the airport
- Fly back to your country
- Travel to your house
- Put the elephant in your fridge
Problem solved.
As interesting as it sounds, you wouldn’t be capturing elephants and putting them into fridges with JavaScript anytime soon. Let’s go through a real example instead.
Let’s use a real example. Let’s say you want to a create button that, when clicked, shows you a sidebar.
See the Pen Sidebar for Thinking like a programmer article by Zell Liew (@zellwk) on CodePen.
Final Step: Refactor and improve. The final step is to refactor and improve your code. This step may not come naturally to you right now. It takes effort and practice before you can tell whether your code can be improved.
So, once you’re done with the three steps, take a break and work on something else. When you get better with JavaScript, you may notice you missed a few details when you come back.
In this example above, you can ask a few more questions:
- How do you make this sidebar component accessible to users who have visual disabilities?
- How do you make this sidebar component easier to use for people with keyboards?
- Can you improve the code in any other way?
For the third point, if you googled a little further, you may notice there’s a
toggle method that removes a class if it’s present. If the class isn’t present, the toggle method adds it for us:const button = document.querySelector('.btn') const sidebar = document.querySelector('.sidebar') button.addEventListener('click', function() { sidebar.classList.toggle('is-hidden') }) Thinking like a programmer is simple. The key is to know how to break problems down into smaller ones.
When you’re done breaking the problem down, find solutions for your small problems and code them up. Along the way, you’ll discover more problems you didn’t think of before. Solve them too.
By the time you’re done with writing your answers to each small problem, you’ll have the answer to your large problem.
Finally, the work isn’t done when you create your first solution. There’s always going to be room for improvement. However, you most likely won’t be able to see the improvements right now. Take a break, work on something else and come back later. You’ll be able to ask even better questions then.