What is Code Designing Technique and how to use it

Hello everyone, hope you are doing well and staying safe.

Today, I would like to talk about something that I feel can be a great technique for programmers but we are rarely told about it in any tutorial, so there are very low chances, it becomes a part of our workflow. This technique is inspired by the Rubber duck Debugging technique.

Designing the Code:

Writing at least minimal steps required to solve a problem or developing a feature before starting to write the program, is Designing the code in my observation.

By Code design, I don't mean Pseudo Code.

Imagine, we start coding a website with CSS/HTML without making the design in a Design tool like Figma/XD/Sketch. You would agree, we are most likely to come up with a poor quality design after all the coding, also, we are going to take pretty long to do it. That is because we have to think about multiple things while designing the website that way.

The same can be applied in Problem Solving/Feature Development (usually backend development). If we can write/design at least minimal steps required to develop the feature, it helps a lot.

Here are few benefits of Designing the code.

• It keeps us on track
• It helps us to split the problem into multiple pieces, so while coding, we focus on the task at hand only
• It helps us to think very clearly.
• It is super helpful in debugging, you are going to spend 1/3rd time debugging if you apply this technique.

Code design in Feature Development

Let's say, we need to create a program that can calculate the numbers.

Goal: 
We need to write a program that can multiply the two numbers, Add them, subtract them.

Steps:
* Create multiply method
* Create subtract method
* Create add method

Just writing these few lines will help you a lot.

Code design in Debugging

Recently, I was having a hard time fixing an issue in my code, As soon as I explained the issue in writing, It was super clear to me, like what I need, what I need to do, etc. Just writing it helped me, solving the issue within 30 mins, that I was struggling with for 20 hours at least.

Goal:
* We want to update the URL as soon as someone goes to the next page on the pagination
* When a user clicks on the back button, he should be redirected to the previous page from pagination instead of the entirely different web Page.

Steps:
* When a user clicks on Next Page
* Change the URL and reload the page

All we are doing here is explaining things to us.

If you cannot explain it simply, you don't understand it well enough - Albert Einstein

I know, it looks like a super simple trick and not very useful, but I would highly suggest you try it for at least 1 week and compare the results.

Suggested Tools for this Technique: SimpleNote, Drafts(Mac only)