Form a way of thinking like a programmer

Form a way of thinking like a programmer

Programmers are people who design, build and maintain computer software programs. In order to work as a programmer, you first need to form a way of thinking like a programmer.

Home Program

Form a way of thinking like a programmer

  1. Beginners of computer programming need to focus on what?
  2. 9 reasons you should equip a little knowledge of HTML and CSS
  3. Top 10 IT jobs with the highest salary in the future

" I don't know JavaScript. I don't know how to create a component. My mind is empty when looking at a JavaScript file. I think I can't continue because I don't know how to think like a programmer. "

Are you familiar with it? Have you ever encountered this situation? Rest assured, not only do you meet that. Many people who start to interact with programming in JavaScript language face the same problem as you.

Form a way of thinking like a programmer Picture 1

Even programmers who have worked in other fields have similar problems with JavaScript. Instead of " I can't think of as a programmer ", they say " I can't think like JavaScript ".

Do not think much! Let's make today become the day you know how to think like a real programmer .

You can think like a programmer.

To be a programmer, you must first understand what a programmer is?Programmers are people who design, build and maintain computer software programs. By manipulating code on a programming tool, they can create new programs, fix bugs or upgrade programs to increase the efficiency of computer use.

Programmers can work on many programming languages, mainly Java, C ++ web programming, php, Asp, ASP.Net, Visual Basic.Net and C #.

  1. Do you know the 15 hottest programming languages ​​on this GitHub?

To create a software, first of all create a ' blueprint ', each developer undertakes a part, then the connected parts form a complete product . Programmers are likened to ' coding ' workers who sit typing code on a computer, make software or edit, develop it based on programming tools.

Programming profession requires creativity as well as skills to assess, analyze project requirements, design solutions or approach new technologies when not meeting the " frameworks ". or technology changes.

Form a way of thinking like a programmer Picture 2

Have you ever tried to solve basic JavaScript exercises on learning websites like freeCodeCamp , Code Academy or Code Wars ?

If you have, you probably have the mind of a programmer!

In fact, the main reason you feel empty mostly comes from anxiety in the face of your JavaScript file, probably because of the code creator's code. You are afraid that the JavaScript code you write will not work. You are afraid to face errors . So you don't know how to get started.

This problem is quite simple. You can follow these four steps:

1. Break down the problem into smaller problems.

2. Find solutions to the smaller problems above.

3. Gather these solutions clearly.

4. Restructuring and improving the program.

Let's make it a little clearer:

Step 1: Break down the problem into smaller problems

How to put an elephant in the refrigerator?

This is the answer that most people often give:

  1. Open the refrigerator.
  2. Put the elephant in.
  3. Close the refrigerator.

The problem is solved.

However, the answer above is a clear example to explain why you're having trouble facing a JavaScript problem. Because you often skip the steps of detail resolution .

If you think about the question more carefully, you will see some problems that are obviously not answered.

  1. What refrigerator are we talking about?
  2. What elephant are we talking about?
  3. What if the elephant is too big for the refrigerator?
  4. Where do we find the elephant?
  5. How to transport the elephant to the refrigerator?

When programming is the same, you need to find the answer to every small problem that you can think of. That's why the first step we need to do is break down the problem into small pieces .

Form a way of thinking like a programmer Picture 3

Step 2: Find solutions for each small problem

The second step is to find solutions to each of the small problems we have listed. In this step, everything should be presented in the most detailed way possible.

  1. What refrigerator? - The refrigerator is in your kitchen.
  2. Which elephant? - An elephant in Africa.
  3. What if the elephant is too big? - Take a miniature gun to collect the baby elephant.
  4. Where to find the elephant? - Africa.
  5. How to transport the elephant to the refrigerator? - Put in the bag after shrinking, then fly home.

Sometimes, you need to dig a few more layers to find the answer . In the above example, we can take a closer look at question 3 and question 4.

  1. Where to find the miniature gun? - Borrow from an ' unusual ' scientist at home.
  2. Where to find the elephant in Africa? - Addo Park, South Africa.

Once you have all the answers you need, you will assemble them to get an answer to the original problem.

Step 3: Gather the solutions clearly

So the problem of inserting an elephant into the refrigerator can be solved by the following steps:

  1. Borrow a miniature gun from a neighbor scientist.
  2. Fly to South Africa.
  3. Go to Addo Park.
  4. Find any elephant in the park.
  5. Shoot the elephant with a miniature gun.
  6. Put the tiny elephant in the bag.
  7. Return to the airport.
  8. Fly to your country.
  9. Go to your house.
  10. Put the elephant in the fridge.

The problem has been solved!

Form a way of thinking like a programmer Picture 4

This may sound simple but surely you can't catch the elephant in the fridge with JavaScript, right?

Please apply the above method to a specific example:

You want to create a button, when you click on that button, a menubar will appear.

1. Break down the problem

Split component into smaller pieces . Here are some issues you need to clearly identify:

  1. What is the bookmark tag of this button?
  2. What will the button look like?
  3. What happens when the button is clicked for the first time?
  4. What happens when the button is clicked a second time?
  5. What happens when the button is clicked a third time?
  6. What is the markup tag of menubar?
  7. What does Menubar look like when it comes out?
  8. What does menubar look like when hidden?
  9. How do menubar appear?
  10. How do menubar close?
  11. Does Menubar appear when loading pages?

Form a way of thinking like a programmer Picture 5

2. Search for solutions to problems

To find solutions, you need to have knowledge about the tools you will use. In this case, you need to know about HTML, CSS and JavaScript.

Don't worry if you don't know the answers to these questions. If you split the problem small enough, you might find the answer to each issue on Google in just 5 minutes .

Let's solve the problem:

  1. What is the tag marking this button?

Will be a tag with a .button class

Click me

  1. What will this button look like?

This button will be styled with CSS as follows:

.button {
display: inline-block;
font-size: 2em;
padding: 0.75em 1em;
background-color: # 1ce;
color: #fff;
text-transform: uppercase;
text-decoration: none;
}

  1. What happens when the button is clicked once, twice and three times?

Menubar will appear when the button is first clicked. Menubar then disappears when the button is clicked a second time. It will appear again when the button is clicked a third time.

  1. What is the markup tag of menubar?

Menubar will be wrapped in a card



    1. Link 1

    1. Link 2

    1. Link 3

    1. Link 4

    1. Link 5


  1. What will menubar look like when it comes out?

Menubar will be hidden to the right of the page. It needs a fixed position so users can see it and will have a width of 300px.

.sidebar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 300px;
background-color: # 333;
}

.sidebar ul {
margin: 0;
padding: 0;
}

.sidebar
list-style: none;
}

.sidebar li + li {
border-top: 1px solid white;
}

.sidebar a {
display: block;
padding: 1em 1.5em;
color: #fff;
text-decoration: none;
}

  1. What will menubar look like when hidden?

Menubar will move 300px to the right and hide from the screen.

When answering this question, two other questions will arise in your mind:

  1. How do you know if menubar is visible or hidden?
  2. How do I hide the menubar?

Let's solve it next:

  1. How to know if menubar is visible or hidden?

If the sidebar has a .is-hidden class, the menubar will be hidden. On the other hand, it will appear.

CSS for hidden menubar:

We use the translateX to leave the 300px menubar to the right because the transform is a good attribute for this task.

.sidebar .is-hidden {
transform: translateX (300px);
}

  1. How do menubar appear?

Menubar did not show up immediately. It needs to appear from right to left.

If you know CSS well, you can use the transition . If not, find the answer on Google Italy.

.sidebar {
transition: transform 0.3s ease-out;
}

  1. How will Menubar hide?

It will hide in the same way it appears, in the opposite direction. You will not need to write additional CSS.

  1. Should Menubar appear when loading pages?

Is not. As we have, we will add an is-hidden class to the menubar and menubar that will be hidden.

Now that we have solved almost all problems, the only question left is: What happens when one button, two and three times click?

The solutions above seem quite vague. We know the menubar will appear when clicked, but how?

We can answer this question in more detail. But before that, how do you know when the button is clicked?

How to determine when a button is clicked?

If you have a bit of JavaScript knowledge, you can add an event listener to the button and click on the event listener. If you don't know, ask Google .

Before adding the event listener, you need to refer to the button with querySelector .

const button = document.querySelector ('. btn')

button.addEventListener ('click', function () {
console.log ('button is clicked!')
})

  1. Button is clicked for the first time

When the button is clicked for the first time, we will remove the .is-hidden class for the menubar to appear. To remove the class in JavaScript, we use Element.classList.remove . This means we need to select the menubar first.

const button = document.querySelector ('. btn')
const sidebar = document.querySelector ('. sidebar')

button.addEventListener ('click', function () {
sidebar.classList.remove ('is-hidden')
})

  1. Button is clicked a second time

When the button is clicked a second time, we will add the .is-hidden class back to the menubar to hide it.

Unfortunately, we cannot know exactly how many times the button is clicked with an event listener. The best way is to check whether the .is-hidden class has appeared in menubar. If so, then remove, not yet available, then add.

const button = document.querySelector ('. btn')
const sidebar = document.querySelector ('. sidebar')

button.addEventListener ('click', function () {
if (sidebar.classList.contains ('is-hidden')) {
sidebar.classList.remove ('is-hidden')
} else {
sidebar.classList.add ('is-hidden')
}
})

Step 4: Restructuring and improving the program

After completing the third step - Arrange coherently solutions. The final step is to refactor and improve the code . Right now this step can be confusing because it requires a lot of effort and experience before it can be determined that your code can be improved.

So, once you complete all three steps, switch to doing something else. By the time you understand JavaScript better and take time to review it, you'll realize that you've forgotten something.

For example, in the above example, you might wonder some problems:

  1. How can the program reach users with visual impairments?
  2. How can the program work more easily with the keyboard?
  3. Is there any way to improve the code?

With question number three, if you spend some time searching Google a bit, you'll notice that a toggle method removes the class if it exists. If the class does not exist, the toggle method will add that class.

const button = document.querySelector ('. btn')
const sidebar = document.querySelector ('. sidebar')

button.addEventListener ('click', function () {
sidebar.classList.toggle ('is-hidden')
})

Conclude

Thinking like a programmer is quite simple. Break down the problem into smaller problems.

When you've finished splitting the problem, look for solutions to those small problems and handle them . Following that path, you will find many small problems that you have never thought of. Please solve those problems too.

When you have finished writing the solution for each small problem, you will have the answer to the original problem. Sometimes, you may take a long time to pair the written solutions for your smaller problems.

After all, the work is not completely done when you create the first solution.There is always room for improvement . However, you have not seen any improvement right now. Temporarily ignore it, solve some other problems and come back later . Then you will definitely see the problem more accurately.

Refer to some more articles:

  1. 11 basic principles that every programmer should follow
  2. Journey from unknown to becoming software engineer in San Francisco for 12 months
  3. 13 skills needed to become Frontend Developer

Having fun!