How to do anything you want with programming

Understand the question!

By Ibrahim Diallo

Published Dec 27 2018 ~ 5 minutes read

I am an annoying instructor because people ask me questions that sound complex to beginners and I give simple obvious answers that are usually not impressive or intuitive. A student asked me a question that was worded in a manner too complex for him to find an answer.

The question was:

How do I make a page that when I hover over a button the entire page moves to the right and the background flashes?

Yes, this is gonna be a terrible user experience but let me answer the question anyway.

The answer is:

You do that by making a page with a button, when hovered on, the page moves to the right and the background flashes.

Yes, it's an annoying answer to hear, but that exactly how you do it. If you re-read the question, you'll notice that this student actually didn't state any problem he was having. All he did was tell me what he wanted to do. He gave a list of instructions of what he wants the page to do.

Page with button, on hover -> move right and flash background. So of course, my answer is exactly what was instructed in the question. Let's put that into code. Let's create a page (index.html) with a button.

<html>
    <head>
        <title>Page with Button</title>
    </head>
    <body>
        <button id="btn">I am button</button>
    </body>
</html>

Now we have a page with a button with id btn. Now let's do exactly what the instructions said. On hover do something. (hover means the mouse is over the button)

window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onmouseover = function() {
        // do something.
    };
};

Now we created a button that will do something when hovered on. Ok, we want it to move the page to the right and flash the background. The easiest way to do this is to call functions called exactly that.

window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onhover = function() {
        moveRight();
        flashBackground();
    };
};

function moveRight() {}
function flashBackground(){}

As far as following the instructions, we are done. The code does exactly what the instructions said. We can now define what it means to move right, or what it means to flash the background independently of the rest of the application. For example, I can use CSS to move the page to the right.

function moveRight() {
    document.body.style.marginLeft = "100px";
}

To make the background flash we can change the colors in intervals:

function flashBackground() {
    var on = true;
    var bg = document.body;
    setTimeInterval(function() {
        if (on) {
            bg.style.backgroundColor = "black";         
        } else {
            bg.style.backgroundColor = "white";
        }
        on = !on;
    },1000);
}

Now how the background flashes can be modified independent of the rest of application. Or we can decided that we don't want to flash on hover but on click. These changes can be made easily without even restructuring the application.

What we did here was exactly what the question asked us to do. The question has not presented any problems. The trick here was to realize that it wasn't actually a question, but a list of instructions.

In order to become a competent programmer, you have to be able to analyze your own questions. No matter how complex the question is, if you understand it, you can solve it at least partially until you reach a bottle neck.

Sometimes, questions can be misleading and take you in an infinite loop of speculation with no real answer. Let's try this question:

How do you create a website that can handle ten thousand users per second.

I've seen students over engineer their applications because they don't know how to answer this question. Sometimes, ten thousand is switched with 1 million. I usually get a question of the sort from people very new to programming. My answer to this question is also annoying.

You create a website that 10,000 people want to visit every second.

The reason I can say this is because most website do not get c10k visitors. And by the time you have this problem, you probably have figured out how to handle 5k per second; which is not too different then 10k. The real answer varies greatly however. Is it a blog? Then the answer is use static files with Nginx. It's for an application? Separate your users into tiers, basic plan, all on a reasonably sized server, premium plan on beefier servers.

If the question is to create an AI that can understand natural language, well create a function called understandNaturalLanguage(phrase). Then you can plug in any of the Natural Language Processing libraries that exists today.

In conclusion, try to understand the question you are asking first. Then you can use programming to come up with a reasonable answer.