I was looking for a timer cube to try focusing more when I'm working on something and also for taking breaks from time to time. In summary: to organize my time better. This tool consists of a small cube that has numbers on its four vertical faces. When you turn the cube a countdown timer starts from whatever number of minutes indicates the face that is pointing up.

This one on Amazon offers interesting time slots options for me: 5/15/30/60 minutes. It would offer me the flexibility to use it both for 100% focused work periods (usually 60 minutes) and to take 5 or 15 minutes breaks afterward. A similar working technique as the Pomodoro one.

The cube was available in different colors and I really liked the black one, so I chose it and finished my order.
In a couple of days, I received it at home, but when I took it out of the box I was disappointed: the time slots were not what I was expecting 😕
This one came with 3/5/7/10 minutes which, for my use case, is not practical.
I went right away to check on Amazon and I saw that, depending on the color, they have different time slots 🤦🏽‍♂️. I guess one has to check the descriptions better when buying something.

Any normal person would have put it back inside the box and returned it to Amazon, but not me...
First, Amazon does not have warehouses here so returning something is a bit more complicated (you have to pay to ship it or take it to one of those pick-up points). And second, after seeing they offer many different cubes with different time slots, I thought that internally they would be the same with the only difference of having some kind of "switch" on the electronics to specify what time slots to use.

Curiosity got the better of me, so let's get to work. I had to open this little cube to see what was inside.

I think taking this apart has been the most complicated thing. It is very compact and it doesn't have any screws. It took me a little while to see where to start without causing too much damage to the plastics.
Finally, I saw on the back some grooves that made me think that there was a plastic part covering a section.

With plastic spudger pry tools and a big lot of patience, I managed to get it out, although it did not seem like I had achieved much. I couldn't see where to go from there. But then I was able to remove the translucent plastics that cover the LEDs and see a little more where to go.

Inserting the blade of an x-acto knife from the side, I was able to take off the main piece of the cube that covers all the electronics.

Analyzing the PCB, which is quite simple, I can see that there are a couple of rows with four small contact pads each and that the last column was connected 🤔🤔This is what I was looking for since what I was referring to earlier is that there was some type of "selector" to change the configuration.

To check if it really works as I think, I "disconnect" the last column by unsoldering it and put the batteries back in, and ... BINGO !! I was right. Now the time slots that are 10/20/30/60 minutes 👏🏽

Out of curiosity (which is what has brought me to this point), the interesting thing would be to go soldering / desoldering different combinations of columns to see how many options there are. I think it should work as a binary table. There are 4 bits that can be ON / OFF, so there would be 16 different combinations, but I think they are too many ...

To make the task easier, I solder a pair of sockets with four inputs each. I connect the first one to any pin of the first row (this row is connected entirely to the same line). In the second, each pad goes to a pin. Now, with some small jumpers, I can connect and disconnect each column.

I make a small table and I try the 16 possible combinations and, to my surprise, there are many different ones, 15 in total since the first and last are the same.

Knowing that there are even different combinations to those offered when they sell the cube, I think the one that may interest me the most is the 15/30/45/60 (I would have liked to have a 15/30/60/90). So I connect the last three columns.

The solder joins some of the pads of the first row but it does not matter because, as I said before, this row is connected entirely to the same line.

I reassemble the cube. The problem now is that the numbers on the four faces are not the same as the ones I just set.
Since I have a 3D printer, it occurs to me to do a quick design with the new numbers. Some kind of patch that I can stick on top.

I print it with a technique to have more than one color in the same piece, so you can see the numbers much better.

The only thing left is to glue them on the corresponding faces and enjoy my "new" timer cube 😁

Final result:

This post contains affiliate links. For more information, see my disclosures here.

Creating something is not easy. Probably everyone that has done it before will tell you that. It gets even more difficult when you don't have all the time you would like because you are selling your time to someone else.

That is my case: I have been working for others for more than 5 years and I have always tried to get the most out of my free time to work on my own projects and create new things.

One of my latest side projects is codetalks.tv where we are about to reach 600 registered users and 4.5k tech videos. We built CodeTalksTV in around 4 months while working full time and these are the 5 tips I followed in order to perform better and embrace the spare moments as much as possible. I hope it helps you, the way it helps me 🙂

Everything has to do with motivation: how to find it

Internal motivation

I define internal motivation as the one that you already have from the moment that you are thinking about starting a side project. However, it is not only the willingness of "wanting to do something". Because, that something has to be a project that you are super passionate about, otherwise, you will not dedicate the necessary time and you will leave it aside at the first chance you get.

External motivation

Internal motivation goes hand in hand with external motivation. For me, external motivation is the crazy assortment of resources that, nowadays, you have at your hands which can be really helpful in giving you the strength to work on your project day after day.

In my case, I consume content that is closely connected to the world of entrepreneurship, indie hackers and technology such as blogs, podcasts, books, newsletters, videos, communities...

I think it is always of great help to hear success stories from other entrepreneurs and to hear how they have created something from scratch. Personally, this type of stories motivate me a lot, because if these people can do it, why wouldn’t I be able to do it too?

Here is a list of resources I use to get that extra piece of motivation I need:

• Podcasts

  • IndieHackers: very detailed interviews with people who are building projects where they explain literally everything on how they built them and how the projects are doing after their launch.
  • Rework: podcast from Basecamp, the company. I really like how they do things in a different way.
  • Y Combinator: looks like it has been inactive for a while, but still interesting to listen to the episodes they still have on Spotify Podcasts.

• Newsletters

  • Blogging For Devs: I really like Monica's content and she is building an awesome community of devs who like to create content. 100% recommended!
  • Engineer Growth: interesting and very actionable tips to grow your project or business.
  • Growth Insider: also an interesting resource for actionable tips. Lately, they're doing some cool case studies about well-known apps and services.

• Books

  • Deep Work: this is one of the latest books I've read and I got super inspired by how people get into that deep mental state where they can work without any interruptions. No social media, no messaging, no distractions. This is one of my goals.
  • Elon Musk biography: Elon... always inspiring for me.
  • Founders at Work: Stories of Startups' Early Days: a deep look at how some big business started.
  • Zero To One: I think this one is very well known but still a good one to have on the list.
  • The $100 Startup: good motivation to start your own thing.
  • ReWork: like the podcast, also from Basecamp. This is a good book on how to do work "differently", which is the way they do it.
  • It Doesn’t Have to Be Crazy at Work: also by Basecamp and also about how they work differently. Love these people! haha

• Videos

  • YouTube Channel: Better than Yesterday: always important to keep learning and growing as a person.
  • Elon Musk - Gangsta's Paradise: at this point you probably know I get motivated by Elon Musk and his work 😂 I find this short video very inspiring.
  • YouTube search: Ted Talks motivation: I couldn't recommend a single Ted Talk because I've watched many of them and each one motivates you in a different way.
  • YouTube Channel: Absolute Motivation: "random" motivation, is also good motivation.

• Other resources

  • Growth.design Case Studies: this recommendation is one of the last but definitely one of the best. Every case study of these guys is a piece of art. And the tips they provide are pure gold.
  • IndieHackers: as with the podcast, the entire platform is a very good resource to get inspired and connect with like-minded people.

Announce it to the world.

In my honest opinion it is a worthy way to put some pressure on yourself in order to not give up once you’ve started a project.

Ok, maybe not to the world, but going public can simply mean telling a good friend, your partner, or a family member. If you are part of a community like IndieHackers you can start a project and then keep updating it with milestones which I think is a great way to feel that accountability.

If social networks are where you feel the most comfortable, it is also a good place to say that you are starting a personal project.

Also, if you have a personal blog you could get a side benefit from writing about your side project: content marketing. That way, if you get people to follow your progress, you can get potential customers or users because they know the effort you are putting into building something that they may want to use.

The idea is to keep showing progress, feel the need that you "owe" something to someone, and you have to keep working to show new things.

Do. NOT. Waste. Time

Time is limited. And having a full-time job does not help your gig, as you probably spend most of your active hours working for others. That's why making the most of your free time is crucial. If you don't have too many obligations apart from your work, you might be surprised that you have more free time than you think.

Taking into account that a day has 24 hours, of which you work an average of 8 hours, and depending on whether you have to get around to go to the office or not add 1 or 2 more hours of commute: 10 hours. An average person should get enough rest by sleeping for about 8 hours. This is 18 "busy" hours, which leaves you 5 hours each day to take advantage of. In addition to weekends, with a good organization, you can do many things with this free time. Of course, I’m assuming you don’t have children or people to take care of, as it can be trickier that way. But a tip I have is: get the most out of your weekends, and the couple of hours you might have after putting the kids to sleep.

These types of calculations are done many times to see that we really have free hours a day, but obviously each person has its life and each day is different. What is very clear to me is this: if you really want to do something and you have the right motivation, you are going to get the most out of every free minute you have in your day. Imagine that you put 2 hours per day into your project, those hours will add up to 60 hours per month. And 60 is better than 0.

In addition to make the most of your day, be mindful of when you are the most productive during the day. There are people who have more energy and a more active mind at certain times of the day so find your perfect time.

For example, while we were building CodeTalks I was living in Australia and I used to wake up very early, around 5 or 6 am since during the summer months it dawns very early and at a very good temperature. These conditions gave me a whole lot of energy, hence I always took a couple of hours to get my hands deep into this project before I had to go to my actual job.

I'm aware of how easy it is to say this but then how difficult it is to actually accomplish it. Getting home after a long day at the office the last thing you want to do is to get back to coding or researching, sometimes your brain is just off and asking for some YouTube or funny memes.

There are some methods you can follow to do better. Personally I like to write down a list of things I want to accomplish and feel the reward of crossing out items of this list. Make sure you keep it short so you don’t lose motivation. And then, to inject me some quick dopamine into my brain, it’s nice to get some small breaks to do something non-work related.

I really like this small app a friend of mine built: Dopamine. With this app, you can start a timer when you are working and you'll earn some "dopamine points" that you can spend on YouTube, social media, or somewhere else. So basically for every 60 minutes of work you get 15 dopamine points to spend. Every dopamine point equals 1 minute. I think it is an interesting concept to balance working and enjoyment time.

Take care of your body

In a word: move.

Whether it is going to/coming from work walking or doing some exercise at the end of the day.

I personally enjoy going back home walking from the office (around 25-30min) as well as going for a run to take a break between work and get on with my project.

I think it’s very important to clearly separate your working day at the office and your "working day" on your side project. It will allow you to be much more productive after work.

We also underestimate the importance of good sleep. More than 5 years ago I bought one of those smart bands so I could track my sleep (among other things) and it has been very interesting to see how the amount of time I spend sleeping correlates to how sharp and energized I feel the next day. I have also been able to know the exact amount of sleep I need to be fresh the next day: ~7:30h of total sleep with ~2hours of deep sleep. If I get that amount of sleep I'm sure I'll be good and full of energy for the day 💪🏾

I recommend you do something like that. If you don't have a smart band or don't want to spend money on one (although you can get one for cheap) you can do it with your smartphone.

Take care of your mind

Just like exercising helps to clear the mind and stretch the muscles, I think it is also important to take mental breaks from time to time.

If one day you feel like doing nothing when you leave the office, no problem! it is also necessary to relax the mind so as not to burn yourself.

Watch some Netflix, meet with a friend for a coffee (or beer!)... it's up to you, whatever helps you relax your mind. You can also try meditation apps.

My goal with this article is that you can get that extra motivation to start working on your projects too. Hopefully, I achieved it 🤞🏽

I would love to hear your ideas and projects so I encourage you to write something down in the comments or contact me at my email!

This post contains affiliate links. For more information, see my disclosures here.

As I mentioned in the previous article, in this second part I am going to install a battery in the system and also design a box to organise everything.

How to make clock-in at work easier with the ESP32 board - Part 1

At work we use Calamari.io to track working time. I built a box, with the ESP32 board inside, to make clock-in and clock-out easier and more interesting.

My Stuff - JV LoboJV Lobo

🔋 To power the system I thought about reusing an old iPhone battery that I had lying around.

If you take a closer look at an iPhone battery, at first you may think that it has a strange connection and that it cannot be reused, but it really is a lithium battery like any other, with its positive and negative terminals, only they are hidden under the adhesive tape.

If we remove this tape, you can clearly see the two terminals and the small board that Apple uses along with its connector.

It is only needed to remove this part and check which one is the positive terminal and which one is the negative (with the help of a multimeter) and solder a pair of wires:

But of course, with this we can provide power to the circuit until the battery charge is used up, but then what? How can we recharge the battery? 🔌

For this there are some small boards called lithium battery charging modules, which usually come with mini-USB or micro-USB input, and soldering the terminals to this module serve to recharge the battery. They also include charge and discharge protection.
This board comes with two output terminals that are the ones that we will connect to our circuit.

The assembly scheme would look something like this:

👩🏽‍🎨 The next step is to design the box in 3D.

About a year ago I bought the Ender 3 Pro and I have been printing in 3D ever since but when I have designed things I have always done it on Tinkercad which is very easy to use and offers quite good results. For this project I wanted to learn how to use Fusion 360 which offers more possibilities and with which you can make somewhat more complex designs.

The first thing I do when I'm going to design something is obviously take measurements 📐. I always use my caliper, the most accurate tool for this task.

I took the measurements of all the components that will go inside the box. I am going to use two large buttons, the ones used in old arcade machines. I will also put a switch to turn the system on and off. I will install a small vibration motor so that, after pressing any of the buttons, I will receive confirmation when the action has been carried out correctly.

For the box I had a fairly simple structure in mind: rectangular with two button holes on the top, a micro-USB port on one side for charging and a switch to turn the system on or off on the other side.

After quite a few hours learning and designing with Fusion 360 I came up with something that I was comfortable with 👍🏾:

This is a three-piece design:

• The upper part, where the buttons go, and that has enough height to house the components inside.
• A part with supports to host the electronic components and with space underneath to accommodate the battery.
• The bottom lid, used to close the box and put the screws that will also go through the other two parts so that everything is securely fastened.

When I design this type of pieces in 3D, instead of designing and printing everything at once without knowing if they are going to fit well (which takes a long time and uses too much filament), what I usually do is print small sections that I consider "critical". They are parts that because of where they are or the way I have designed them, I am not sure if they will turn out as I have in my mind 🤔. Because when you are designing, everything is "perfect", but once it is printed it doesn't turn out as it does in the design. Also there are things that may not be well designed or need to be redesigned to make them look better. You also have to take into account the tolerances between different pieces that fit or are next to each other, because the printed material is not perfect, and usually it will have a greater thickness than the one you have designed.

In this design, for example: the part such as the holes for the buttons, the part where the components are mounted,  the top part in the area where it connects to the other two parts or the part of the logo and the letters. These parts to my understanding were the most critical ones and I printed small sections to be able to check and correct errors. And thank goodness I did it, because I had to redesign certain parts 😅.

Here you can see the measurements I took and the parts I printed to check and correct in the design:

Finally, with all the parts well designed I was able to print everything, which took quite some time ⏳:

• Top piece: about 11 hours and about 20 meters of filament.
• Centerpiece: about 4 hours and about 6 meters of filament.
• Bottom piece: about 7 hours and about 11 meters of filament.
• Letters and logo: less than 1 hour and over 1 meter of filament.

After printing all the pieces I had to sand them, especially the front part where the logo and letters go.

Finally the moment I was looking forward: the final assembly! 👨🏽‍🔧

Although the buttons are different, they are still connected to the same pins as in the prototype: 26 to start/end the shift and 27 to start/end the lunch break. The vibration motor will be connected to pin 17.

The tip of my soldering iron is very worn, which made it difficult for me to make a good solder.
After much soldering and connecting cables:

With everything connected, and before closing the box, I had to make some adjustments to the code.

First, to control the vibration motor. It is very simple, I just configured pin 17 as output and each time a button is pressed, separate signals are sent to the motor in different time ranges so that it makes a vibration pattern. I have created two patterns: one for when the shift or the lunch break starts and the other for when it ends. You can see it in version 2 of the source code that I will leave in a link at the end of the article.

Besides, since the system is going to be connected to the battery and since it is only going to perform the action when one of the buttons is pressed, ideally it should not be working all the time. For this you can make use of the deep sleep function of the ESP32 💤. It is very simple to configure, the idea is that once the system boots, it goes into sleep mode, and only wakes up when one of the buttons is pressed. Depending on the button pressed, it will perform the corresponding action and once it is finished, it returns to deep sleep mode.

ESP32 Deep Sleep with Arduino IDE and Wake Up Sources | Random Nerd Tutorials

Complete guide for the ESP32 Deep Sleep mode with Arduino IDE and different wake up sources: timer wake up, touch wake up, and external wake up (with examples).

Random Nerd TutorialsAlain

And this is it, once the new code was uploaded to the board, it was time to put the screws in and see the final result.

And here you can find the new part of the code, it is in the v2 branch.

jvlobo/esp32-calamari.io-api

Clocking in and out in Calamari.io with the ESP32 development board - jvlobo/esp32-calamari.io-api

GitHubjvlobo

The final test:

It works!! 🎉

This post contains affiliate links. For more information, see my disclosures here.

In 2019, a regulation came into force in Europe by which companies are required to have a daily record of the hours of their employees.

There are many online tools to keep track of this. At Desygner we use Calamari.io.

We use Slack as a communication tool and we have commands for clocking in / out from Calamari.
The problem is that sometimes I forget to write the command in Slack to start or end my working day 🤦🏽‍♂️

Thinking about solutions to make it easier, and since I like to tinker with electronics, I thought about building a small device with a couple of buttons with which I could start and end my shift and register the lunch break. All I needed was for Calamari to offer an API to communicate with, and they have one! 👏🏽

Now, it was time to choose where to start building this system. Previously, I had used Arduino for electronics projects but now I was going to need WiFi connection and the cheapest option of this brand is the Arduino Nano 33 IoT at around $25 on Amazon. Several people had recommended me to use the ESP32 board that also includes WiFi and Bluetooth and you can find it on Amazon for $10.

This was the chosen one:

This was my first time working with the ESP32 board, so after the first steps to get it working with my computer and Arduino IDE, the next thing I wanted to do was connect it to the WiFi network.

My first idea was to have an app or web with which to connect via Bluetooth to the board, and once there, through an interface, be able to select the network to connect it to and write the password. It sounded great! However, after searching a lot about how to connect the ESP32 board via WiFi I did not find anything similar already done. So I opted for a simpler option: hardcode the name and password of the WiFi network in the code. The downside of this is that every time I want to shift networks I need to change the code and compile it back to the board.

#include "WiFi.h" //ESP32 WiFi library

WiFi.mode(WIFI_STA);
WiFi.begin("Wifi_SSID", "WiFiPassword");

uint8_t i = 0;
while (WiFi.status() != WL_CONNECTED) {
  delay(500);

  if ((++i % 16) == 0) {
    Serial.println(F(" still trying to connect"));
  }
}

Serial.print(F("Connected. My IP address is: "));
Serial.println(WiFi.localIP());

How do I connect to a wireless network with the ESP32? | Wireless | MegunoLink

Create a simple Arduino library to store your WiFi network credentials. They’ll be easy to use and you won’t accidentally copy them to the Internet.

MegunoLink

Once connected to the network, the next important step was to find out how to communicate over the Internet, needed to be able to make calls to Calamari's API.

This, similar to the WiFi connection, is not a complex task since there are libraries that we can use to help us. In this case, I used the library <HTTPClient.h>.

For this first test of how to make HTTP calls I didn't want to mess with Calamari's API just yet, hence I used a service that offers a mock REST API for testing: JSONPlaceholder.

#include "HTTPClient.h"

HTTPClient http;

http.begin("https://jsonplaceholder.typicode.com/posts/1");
int httpCode = http.GET();

if (httpCode > 0) {
  String response = http.getString();
  Serial.println(httpCode);
  Serial.println(response);
} else {
  Serial.println("Error on HTTP request: ");
  Serial.println(httpCode);
}

http.end();

ESP32 Arduino Tutorial: Getting weather data from API

In this esp32 tutorial, we will check how to use the ESP32 to request weather data from an API for a given city, using the Arduino core.

DFRobotDFRobot Apr 20 2018

With everything set up, I was ready to make requests to the Calamari.io API.

I created a class to have everything tidier and make the operation easier within the code. I helped myself with this guide to do it. You can see how I built it in the link at the end of the article with the repository on Github.

To use the class you just need to create an instance and pass four arguments, the base URL of the Calamari.io API, the username and password (information that Calamari provides when you activate the API) and the employee's email (in this case my corporate email).

The class has six methods available to use. I think the names are understandable enough:

• Shift: shiftIsOn(), startShift(), stopShift()
• Break: breakIsOn(), startLunchBreak(), stopLunchBreak()

After a bit of trial and error, I got everything working. I was only missing the hardware part: a button to start/end the shift 👨🏽‍💻 and another button to start/finish the lunch break 🍕

The two buttons have one of the pins connected to ground through a resistor, here you can read a good explanation of why it is necessary to use these resistors (pull-up or pull-down). The pins on the same side but at the bottom are connected to the GPIO inputs on the board: 26 for the first button (the one that starts/ends the shift) and 27 for the second button (the one that starts/ends the break). And the right pins are connected to the 3.3V output.

Finally, I only needed to take care of the code of when the buttons are pressed, so it can perform the necessary action depending on the button pressed.

int pushShiftButton = digitalRead(26);
int pushBreakButton = digitalRead(27);

if(pushShiftButton) {
  if(calamari.shiftIsOn()) {
    Serial.println("Stop shift");
    calamari.stopShift();
  } else {
    Serial.println("Start shift");
    calamari.startShift();
  }

  delay(1000);
}

if(pushBreakButton) {
  if(calamari.breakIsOn()) {
    Serial.println("Stop lunch break");
    calamari.stopLunchBreak();
  } else {
    Serial.println("Start lunch break");
    calamari.startLunchBreak();
  }

  delay(1000);
}

When one of the buttons is pressed, for example the lunch break button, it is checked whether the break is currently taking place. If it is, then the method to stop it is called, and if not, the method to start it is called. Then there is a delay of 1 second in the code. This is done because otherwise, the code could be executed multiple times, even if we only pressed the button once since this piece of code is inside a loop that runs faster than it takes to press and remove your finger from the button.

And this is it, here you can see how it actually works 😁:

And this is the complete code on my Github:

jvlobo/esp32-calamari.io-api

Clocking in and out in Calamari.io with the ESP32 development board - jvlobo/esp32-calamari.io-api

GitHubjvlobo

Stay tuned for the second part of this project, where I am going to create in 3D and print a box to make this system more compact and portable. I will also install a battery so I don't need to be powering it through the ESP32 USB port.

Update: Second part is published now! ⬇️

How to make clock-in at work easier with ESP32 - Part 2

At work we use Calamari.io to track working time. I built a box, with the ESP32 board inside, to make clock-in and clock-out easier and more interesting. This is the second part of the article.

My Stuff - JV LoboJV Lobo

I'm living in Portugal now. The country has a good railway system and one of the transportation ways I like the most when I travel is the train, which makes it a great choice for me to move around.

I wanted to travel to the south of the country so I decided to book a ticket with the state-owned train company: Comboios de Portugal and here is where my adventure begins.

The searching and selection process is quite easy and friendly but when I had to pick my seat is when things got interesting: it doesn't work!

I refused to buy my ticket with the seat that you get assigned by default. I always like to choose one in which both of them are free, knowing that someone can buy the ticket for the seat next to me, but if I'm lucky nobody will get the one next to me and I will travel more comfortably.

As a developer myself, I opened one of the best tools that we have at our disposal when we are building a website: Chrome Developer Tools in the hope of being able to dig a bit into the code and see what the problem was. Luckily for me, the web's Javascript code doesn't have any kind of minification or obfuscation.

The first thing I did was to look at the  click event listeners for the seats:

I see that there are two events listening to the click of this button (I'm not interested in all the others in jQuery or Bootstrap). This is the code of each one:

// href # no jump to top
$(".slide-seats a").on("click", function(event) {
  event.preventDefault();
});

$(".slide-seats .item table a").on("click", function(event) {
  pickSeat($(this).find("img").attr("data-id"));
});

Of the two I see, the one that catches my attention is the second one since it calls a function pickSeat()

function pickSeat(seat) {
  if (changeable) {
    var idx = getSeatIndex(seat);
    isOver = false;
    var stat = getStatus(seat);
    if (!changing && idx != -1) {
      changing = true;
      toChangeIndex = idx;
      seats[toChangeIndex] = seat;
      img = $(".slide-seats .active").find("[data-id='" + seat + "']")[0];
      if (img != null) {// select
        var name = getImg(seat) + '.4';
        img.src = prefix + name + suffix;
      }
    } else if (changing && isSameTrain(seats[toChangeIndex], seat)
      && (stat == '0' || stat == '2')
      && (idx == -1 || idx == toChangeIndex)) {
      changing = false;
      resetSeat(seats[toChangeIndex]);
      img = $(".slide-seats .active").find("[data-id='" + seat + "']")[0];
      if (img != null) {// selected
        var name = getImg(seat) + '.2';
        img.src = prefix + name + suffix;
      }
      seats[toChangeIndex] = seat;
      toChangeIndex = -1;
    }
  }
}

Setting a breakpoint on the first line of this function, when I click on one of the entries I see that the changeable variable is true and it goes inside the conditional block. The first function called is getSeatIndex() passing the seat as a parameter:

function getSeatIndex(id) {
  var id2 = id.split(':')[0];
  for (var x = 0; x < seats.length; x++) {
    var id1 = seats[x].split(':')[0];
    if (id1 == id2)
      return x;
  }
  return -1;
}

If the seat is not found inside the array seats this function will return -1. As my intention is to enter inside the following condition in the main function pickSeat(), when it is inside the function of getSeatIndex() I manually add the seat that I want to select inside the seats array:

When the execution of the code reaches the line if(!changing && idx! = -1) {, since we have modified the function getSeatIndex() the variable idx has a value of 1 which is different from -1 and the variable changing is still false then it executes the code inside the conditional, which was what I was looking for.

When the execution of the pickSeat() function finishes I can see how the color of the seat changes to a light gray:

After these steps, naive of me I was expecting to continue with the process having my new seat selected, but when I click on next I get this error message:

🤔 Looks like it was not going to be as easy as I expected.

This message is displayed once you click on Next route (since it is a round trip ticket, I also have to select the seat for the return trip) so the next thing I do is to inspect the button. Like I did with the buttons on the seats I check the Event Listeners section, but for this button, I find nothing interesting.

However, when looking at the HTML element I find that a function is being called when the button is clicked:

With no time to waste, I go back to the Javascript code to see what is happening inside this change() function

function change() {
  if (changing) {
    AlertMessage(msg_select);
    return false;
  }
  focusNo = true;
  if (sameSeats())
    ConfirmMessage(msg_not_changed, 'doChange()');
  else
    ConfirmMessage(msg_changed, 'doChange()');
  return false;
}

function doChange() {
  changeTripSeatsValue();	
  enableUnload();
  document.getElementById('next').click();
}

The message I was seeing before was because the changing variable has a value of true, so inside the change() function that first conditional is being executed showing the message and returning false.
Just before this first if I change the value to false:

I finish the code execution with the hope that now I would be able to move on to the next step with my selected seat but ... no!

Now an error message appears on the console:

Something is broken now 😰.
I see that the error comes from the sameSeats() function which is the one called within the change() function in the second if

function sameSeats() {
  for (var x = 0; x < seats.length; x++) {
    var a1 = seats[x].split('_');
    var s1 = a1[0] + "_" + a1[1] + "_" + a1[2];
    var a2 = oldSeats[x].split('_');
    var s2 = a2[0] + "_" + a2[1] + "_" + a2[2];
    if (s2 != s1)
      return false;
  }
  return true;
}

Seeing the code of this function and the error, seems clear what is happening. It is trying to use split in one of the elements of the seats array or the oldSeats array, and possibly using an index outside the array. Since the for loop goes from 0 until the size of the array seats, I'm going to assume that this array is correct, so the error would be in the line

var a2 = oldSeats[x].split('_');

To confirm this I debug the code again.
If I add these two variables to the Watch section I can see how, indeed, my guess is correct:

With the breakpoint on the line 199, as shown in the screenshot, I go to the console and type oldSeats.push('184_4_64') so that the sameSeats() function doesn't fail this time and returns false.

Finally the doChange() function is executed. This function is responsible for calling another one, which is the one that makes the actual change of the seat:

function changeTripSeatsValue() {
  var newValue = '';
  for (var x = 0; x < seats.length; x++) {
    newValue = newValue + seats[x];
    if(x != seats.length - 1) {
      newValue = newValue + ';';
    }
  }
  document.getElementById('tripSeats').value = newValue;
}

In this function, I put a breakpoint on the last line, which seems to be the important one since it is responsible for assigning the new seat as the value of an item with tripSeats id (I guess it is an input, possibly hidden, within a form element).

When the debugger stops in this line, I see how newValue has a slightly strange value assigned, so I decide to change it to the value of the seat I am trying to select, and by continuing with the execution of the code ... bingo!

I have finally been able to select my seat :)

Conclusions

My purpose with this post is to document how I do a JavaScript code debugging process using Google Chrome developer tools. I think it is an interesting and very important process for any front-end developer.

In this case in particular with the Comboios de Portugal website, using vanilla Javascript (and some jQuery) and with a fairly easy to follow code, it has been a fun task because it is a code that I haven't written. This makes it more interesting and I took it as a challenge.

The funniest thing comes now: after having done all this process and having been able to select my seat I have continued testing things on this website and at one point I saw this message:

In summary... the selection of seats works so that you have to click first on the seat that you have been assigned automatically and then click on one of the empty seats. And yes, doing so works perfectly 🤦🏽‍♂️

I may be very clumsy, but since no one likes to accept his clumsiness I began to check other pages where you can book train and plane tickets. It turns out that in all the ones I tried the selection of seats is done in the way that I was instinctively trying: you just need to click on the empty seat.

In my opinion, this is the friendliest or easiest way to do it and the one that a person will instinctively try. I think it's a big UX issue on this specific page.

Anyway, and despite the fact that my entire process to select the seat was not necessary, I had a lot of fun and I ended up being satisfied to have been able to achieve that "challenge".

This post contains affiliate links. For more information, see my disclosures here.

What is Arduino?

Arduino is an easy-to-use hardware and software based open source electronics platform. Arduino boards can receive input data such as light on a sensor, a push of a button or a Twitter message and turn it into an output to activate an engine, turn on a LED light or publish something online. You can tell your Arduino what to do by sending a series of instructions to the board’s micro-controller.

This is a definition taken from the official Arduino website where they explain what it is and what you can do with it.

I have always been passionate about technology at both the user and creative levels. As a developer, I have always focused on software (websites, mobile applications, etc.), although I have also been very interested in hardware and electronics.

At first it may sound a bit ‘complicated’ to be encouraged to do some hardware projects, as it involves purchasing certain physical products and tools. However, if we develop programs, being all digital, it is much simpler and the cost is lower. All you need to do is download some software and start writing code.

Looking for a project to do in my free time, I decided to build an automatic irrigation system. I found this project interesting, useful and without much difficulty.

What are we going to need? Components

I have acquired the necessary components for this project from Aliexpress, they come from China and it is the cheapest way to get them. These are normal components that you can find in any electronics, physical or online store.

If we already have the necessary tools such as: soldering iron, tin, pliers and multimeter, the total cost of the components needed to assemble the system does not exceed 11 USD.

Let’s schematize our design!

Once you have purchased the components, or even earlier, you can start designing the assembly of your circuit. The reason I say you can do it earlier is because there are certain tools to emulate your circuit. I have used the tinkercad.com platform, you can use it online and it is free. Not all the components that exist are there, but it is very useful to simulate parts of the circuit.

To make diagrams like the one below, I used the fritzing tool. Unlike tinkercad, you will not have the possibility of simulating circuits but it offers a wide variety of components with which to carry out the assembly scheme.

For the operation of the water pump, we will need to use a relay. You will need to connect it to one of the Arduino’s digital outputs to turn it on or off, as it receives its power from the 9V battery, previously regulated to 6V with the L7806 voltage regulator.

The humidity sensor is connected to the Arduino analog input to send the measurement data. To turn the current to the sensor on/off we used an IRF540 transistor, which we connected to one of Arduino’s digital outputs. This is done to protect the moisture sensor, as far as possible, from electrolysis (corrosion) as the current is continuously circulating.

Overview of the Code

We will start by defining the input and output pins of the sensors.

Next we’ll call a function to read the moisture in the soil. Here, I came to the conclusion of making five measurements and I got the average value, because when I activated the current flow to the sensor only at the moment of measuring, I realized that the measurements took a little while to stabilize.

After I have received the humidity level, if it is less than 35, we will call the function that activates the water pump for one second.

I used the LowPower library to reduce power consumption a little. My intention is to optimize the system so that the system only works once a day and thus save more energy.

#include <LowPower.h>

#define MOISTURE_SENSOR A0
#define TRANSISTOR 6
#define RELAY 5

void setup() {
  Serial.begin(9600);
  pinMode(RELAY, OUTPUT);
  pinMode(TRANSISTOR, OUTPUT);
  digitalWrite(TRANSISTOR, LOW);
  digitalWrite(RELAY, HIGH);
  
}

void loop() {
  LowPower.powerDown(SLEEP_8S, ADC_OFF, BOD_OFF);
  
  int moisture = readMoisture();
  if(moisture < 35)
    water();
}

void water() {
  digitalWrite(RELAY, LOW);
  delay(1000);
  digitalWrite(RELAY, HIGH);
}

int readMoisture() {
  digitalWrite(TRANSISTOR, HIGH);
  delay(10000);
  int moistureLevel1 = checkMoisture();
  delay(2000);
  int moistureLevel2 = checkMoisture();
  delay(2000);
  int moistureLevel3 = checkMoisture();
  delay(2000);
  int moistureLevel4 = checkMoisture();
  delay(2000);
  int moistureLevel5 = checkMoisture();
  int averageMoisture = (moistureLevel1 + moistureLevel2 + moistureLevel3 + moistureLevel4 + moistureLevel5)/5;
  
  Serial.print("Average moisture: ");
  Serial.print(averageMoisture);
  Serial.println("%");

  digitalWrite(TRANSISTOR, LOW);
  delay(5000);
  
  return averageMoisture;
}

int checkMoisture() {
  int sensorValue = analogRead(MOISTURE_SENSOR);
  int valuePercentage = map(sensorValue,1023,0,0,100);

  Serial.print("Mositure: ");
  Serial.print(valuePercentage);
  Serial.print("% ");
  Serial.print("(");
  Serial.print(sensorValue);
  Serial.println(")");

  return valuePercentage;
}

Future Plans

What this article has shown is just a first approach to the construction of this automatic irrigation system, but I have some improvements in mind that might be interesting to implement in the future.

• I wish everything was smaller and more compact. You could start by welding the components onto a board and even design a homemade or a more professional one.
• Another component that would be interesting to add to the system is a water level sensor. The problem with this one is that it’s not too big. If our reservoir is a bit deep, it would be impossible to measure the total water level. An ultrasound sensor can also be used to measure the distance. By installing it at the top of the tank, pointing downwards, we would be able to measure the water level in the tank. Once obtained, we may install a LED that will indicate when the water is below the established level and will indicate that the tank must be refilled.
• One improvement that I think is important is to try to reduce the energy consumption of the system. For this purpose, we can carry out software and/or hardware modifications.
• When it comes to professionalizing the system a bit, it would be a good idea to design a container with a storage space and a compartment to store the electronic system. It can be done with 3D printing.
• Finally, the system can be equipped with a Bluetooth or WiFi connection to connect it to your mobile phone or home network and have a panel where you can control certain parameters and display some statistics at the same time.

I am not an expert in the field so, I encourage you to write in the comments any improvement, modification, advice or doubt.