Quick Lessons in Optimization

After finally getting the first regex version of the WhatsApp Chatlog Interpreter (WCI) to work, I can now finally start working on the perfectionism stage.

Optimizing Code

Optimizing code is always important not only because it makes the program itself better, but it also makes you used to good coding habits.

I was revising the WCI's code, and stumbled upon these lines:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function botonejecutar1()
{
    //CSS COLORES
    botonusuario1.style.backgroundColor = "#005c4b";
    botonusuario1.style.color = "white";
    botonusuario2.style.backgroundColor = "#202c33";
    botonusuario2.style.color = "white";


    //CAMBIANDO DE LUGARES LOS MENSAJES
    for(var i = 0; i<=mensajes_usuario1.length-1; i++)
    {   
        mensajes_usuario1[i].classList.add("my_msg");
        mensajes_usuario1[i].classList.remove("friend_msg");
    }
    for(var i = 0; i<=mensajes_usuario2.length-1; i++)
    {   
        mensajes_usuario2[i].classList.add("friend_msg");
        mensajes_usuario2[i].classList.remove("my_msg");
    }
}

function botonejecutar2()
{
    //CSS COLORES
    botonusuario1.style.backgroundColor = "#202c33";
    botonusuario1.style.color = "white";
    botonusuario2.style.backgroundColor = "#005c4b";
    botonusuario2.style.color = "white";

    //CAMBIANDO DE LUGARES LOS MENSAJES
    for(var i = 0; i<=mensajes_usuario1.length-1; i++)
    {   
        mensajes_usuario1[i].classList.add("friend_msg");
        mensajes_usuario1[i].classList.remove("my_msg");
    }
    for(var i = 0; i<=mensajes_usuario2.length-1; i++)
    {   
        mensajes_usuario2[i].classList.add("my_msg");
        mensajes_usuario2[i].classList.remove("friend_msg");
    }
}

So, we have two functions, botonejecutar1(), and botonejecutar2(). But this is trash.

If you look closely, these two functions do almost the exact same job; by rule of thumb, if you have a repetitive task in your program, you can almost always find a way to make it work with an automated function. Which is what we're going to do now.

First, I'm going to add arguments to the function. We can see that in both functions, the only lines that change are "my_msg", "friend_msg" (which represent the users), "#005c4b" and "#202c33" (these are the message's colors).

So we create a function with the following arguments:

1
function botonejecutar(user1, user2, color1, color2);

We then replace the lines that change with those arguments, and the final function looks like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
function botonejecutar(user1, user2, color1, color2)
{
    //CSS COLORES
    botonusuario1.style.backgroundColor = color1;
    botonusuario1.style.color = "white";
    botonusuario2.style.backgroundColor = color2;
    botonusuario2.style.color = "white";

    //CAMBIANDO DE LUGARES LOS MENSAJES
    for(var i = 0; i<=mensajes_usuario1.length-1; i++)
    {   
        mensajes_usuario1[i].classList.add(user1);
        mensajes_usuario1[i].classList.remove(user2);
    }
    for(var i = 0; i<=mensajes_usuario2.length-1; i++)
    {   
        mensajes_usuario2[i].classList.add(user2);
        mensajes_usuario2[i].classList.remove(user1);
    }
}

Calling the new functions in the HTML file

Now, in the HTML file, in the "<button>" tags, we insert the functions in the "onclick" properties of the tags, like this:

1
2
onclick="botonejecutar("my_msg", "friend_msg","#005c4b", "#202c33")"
onclick="botonejecutar("friend_msg", "my_msg", "#202c33", "#005c4b")"

But, this is a problem. When calling the botonejecutar() function, we use the " " symbols, and when we insert the arguments in the form of a string with those same symbols, the HTML code gets confused and throws an error. (Therefore the red color).

This has a simple solution. What we have to do, is use different symbols for string declaring, like ' '.
So, the new code looks like this:

1
2
onclick='botonejecutar("my_msg", "friend_msg", "#005c4b", "#202c33")'
onclick='botonejecutar("friend_msg", "my_msg", "#202c33", "#005c4b")'

Now, everything works, and we managed to delete a few repetitive lines of code, optimizing it.

Thanks for reading!

Comments

Post a Comment

Popular posts from this blog

An Audioguide about the Geology of Ecuador

Image
Hello again. I've stayed a little AFK lately due to a big variety of reasons, such as my admission to college, a couple of life events, and some time away from home. But now I'm back. Today I'll write about a project I worked on during the first week of august. As you may have realized throughout this entire blog, all projects I write about are 100% mine; however, this project was not for me, but for my sister. She studies geology and had an assignment with creative freedom, so,  to finish her project on time,  I put Rubikraze temporarily aside (my current personal project). Like I said, my sister could choose any format for her assignment; the topic was geological formations of Ecuador. So, she asked me if I could make an HTML file with a map of Ecuador, and a list of audios (recorded by her of course) talking about different geological formations. As the good brother I am I said yes; the file in itself was not that complex or sophisticated, it was just an image of a map...
Read more

Active Projects as of Today

Hello again, I've been traveling quite a lot recently so I haven't had the opportunity to dedicate the necessary time and effort for writing  here and developing Rubikraze (the project I'm currently working on). This will be a small journal post just to talk about next goals and objectives in my projects and my occupations in general. Regarding Rubikraze, I'm still trying to find out whether the Color-Driven Summation (CDS) method I developed is useful to determine if a Rubik's Cube is solvable or not. My plan to use brute force by calculating the CDS of a bunch of cubes (both solvable and unsolvable) that I'll generate automatically using simple algorithms, and compare both kinds of CDS; therefore, if a solvable cube's CDS is the same as that of an unsolvable one, it would be evidence that my method doesn't work, so I would have to either completely scrap it or modify it. I'm quite optimistic that there has to be a numerical (yet not unique) harmony...
Read more

Explaining Color-Driven Summation

Image
One of my goals with Rubikraze is implementing a function that can solve any Rubik's cube thrown at it using the beginner's level method. In my previous post about Rubikraze I talked about how there are Rubik's cube configurations that are not possible to solve. For example, if you take a completely solved Rubik's cube, and rotate just one piece of it by manually taking it out and putting it back again, you'll end up with something like this: Assuming that's the only altered piece in the whole cube, we can consider that cube as impossible to solve. There's not a single pattern of movements that could possibly undo those changes without taking that piece out and putting it back again in the right orientation. With the example above it's pretty obvious that said cube is impossible to solve, but what if you took an unsolvable Rubik's cube, and mixed it? It'll still be unsolvable, and you know that because you knew it was unsolvable from the start, b...
Read more