DEV Community: JV Lobo

5 tips for shipping side projects with a full-time job

JV Lobo — Fri, 14 Aug 2020 11:17:48 +0000

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!

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

JV Lobo — Thu, 04 Jun 2020 11:07:53 +0000

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.

🔋 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.

This guide was of great help for configuring deep mode.

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

The final test:

It works!! 🎉

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

JV Lobo — Thu, 04 Jun 2020 11:07:45 +0000

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());

This guide was helpful

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();

I followed this guide

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

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 the ESP32 board - Part 2

JV Lobo ・ Jun 4 '20

#electronics #esp32 #iot

The difficult task of changing your seat while buying a train ticket online

JV Lobo — Wed, 11 Mar 2020 22:53:24 +0000

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:

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

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:

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

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

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:

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".

I really like programming and technology, that is why I created CodetalksTV with a friend of mine.
I also wrote a post on dev.to a while ago talking about how and why we built it. Check it out if you want to know more :)

Building a side project: Codetalks.tv

JV Lobo — Fri, 02 Aug 2019 09:30:13 +0000

🤓 What is Codetalks?

As programmers, we know how important it is to be up to date in terms of programming languages, frameworks, methodologies and tools in general. We must always be in continuous learning. One of the best ways to stay up-to-date is by attending technology conferences and events, but many of these events are not in our city or we simply cannot attend. The positive part is that most of these events are recorded and are available for free through different video platforms (mainly Youtube or Vimeo), which is great, but there are a couple of problems:

❌ There are plenty of interesting events and talks around the world every week and it’s hard to be aware that they exist.

❌ Each event is on a different date and is published on different accounts and video platforms, which makes it very complicated to track the events that interest us.

That’s why we decided to create Codetalks.tv, a platform for developers
that brings together the best programming talks around the world in one place. Each video is grouped by tags and event so that it is incredibly easy to discover conferences, watch lectures and keep learning.

📋 What should our MVP have?

Considering that this is a MVP (minimum viable product) we wouldn’t want to extend the development time too much, therefore, we tried to identify the key functionalities that would give meaning to the project, in this way we could validate if our idea made sense or not before continuing to invest more time and effort in it. The characteristics we identified as most important were:

Talks finder
View talks by tag
View talks by event
View available tags
View existing events
Send talks (Youtube & Vimeo)
Subscribe to a specific tag
Receive feedback and ideas

As for the design, it had to be simple and intuitive. It didn’t make sense to create anything new and extravagant and that’s why we opted for a design similar to that of Youtube, so that anyone can instantly feel familiar with it.

Focusing more on the look and feel, we decided to make a small wink to our potential users, the developers, for this reason, we gave it the appearance of a code editor (VS Code?), and even… we used the famous Monokai color palette.

🛠 Let’s get to work

And it’s time to code!

One of the interesting things about a side-project is that you can afford to experiment and try new things out, so, we didn’t want to miss this opportunity.

Here is a brief summary of the technology stack we used, both for the backend and for the frontend. If you find it interesting, we will publish more articles explaining part of the development process in more detail.

Frontend:

Create React App: Create React apps with no build configuration
Apollo: The perfect partner for GraphQL. The client is designed to help you quickly build a UI that fetches data with GraphQL.
Styled-Components: A very popular CSS-in-JS styling library that uses tagged template literals in JavaScript and the awesome power of CSS to provide a platform that allows you to write actual CSS code to style your components.

Other libraries or tools that have helped us a lot:

Storybook: Open source tool for developing and organize UI components
Plyr: This library is gold. It allows us to embed videos from YouTube or Vimeo, and customize them completely: Put our logo, remove the buttons from the original platform … etc..
Formik: To create forms in a simple way (Everybody hates forms, right?). It is very useful used together with Yup, an input validation library.
Color: This is another simple library to perform small operations with colors.

Backend:

GraphQL-Yoga: Fully-featured GraphQL Server based in Express
Prisma: Prisma is a database abstraction layer that turns your databases into GraphQL APIs with CRUD operations and realtime capabilities

Third party tools:

Sentry: This is the tool we use to receive errors that occur both in frontend and backend. In this way we can eliminate the small bugs that arise.
Mailchimp: This is how users can subscribe to receive the latest videos from a tag, when they do so their email account is added to a Mailchimp list and from there we can then send the weekly summary of the best videos.
Cyfe: we use Cyfe to have in one place information from different parts of the platform. For example, we have a panel for Analytics, and another to see the number of users and videos we have on the platform. We can continue to add data and internal information from the platform to have it all in one place.
Typeform: we use Typeform to receive feedback from users because it is a simple and quick way to implement it and have it integrated with Slack to receive information instantly.

And then came the moment of truth…

🚀 The launch

The truth is that if we are taken out of the technical or product part we will feel like a fish out of water, one could say that marketing is not our strong point. That’s why, to define our launch strategy, we simply asked ourselves a question: Where are our potential users?, and based on the answers we found, we drew up a list of possible acquisition channels:

☠ Big portals (Disaster):

Product Hunt: We tried to follow all the advice we read by different blogs regarding a successful launch in PH, we knew it was very important and one of the keys to the launch, however we only got 9 upvotes (very sad).
Hacker News: We only got 4 points.
Reddit: We sent it to the subreddit r/programming. It wasn’t published either.

At this point, and after a truly horrible initial release, we wondered if Codetalks actually made sense, are we really solving a problem and bringing something to the community? our motivation crashed.

However, after a few days of decline, we decided to continue trying in other ways and this time, fortunately, it was better:

✌ ️Niche media (Not bad):

Blogs for devs: We have appeared in several important blogs in the sector, which has brought us very qualified traffic.
Devs Newsletters: We have been quoted in several newsletters, many of them with tens or hundreds of thousands of subscribers.
Twitter: Since the beginning, it has been a great ally, we get a lot of traffic through this social network, partly due to a very cool bot we have developed that posts talks and mentions speakers all day long (this is for another post).

Despite not having had a spectacular launch, we have seen over the last month how traffic has been increasing day after day steadily. In addition, we have received a lot of positive feedback, so the general feeling is that people like it, and although we think we have not reached product-market-fit yet, we do believe that we are going in the right direction and that it is worth continuing to invest some more time.

In addition, we have a few very cool ideas for version 2.0, and…. why not, we’ll make another release later with lessons learned, maybe this time we’ll be luckier hehehe.

🎓 What we learnt

If we had to draw some key lessons, these would be:

Attempt to resolve a real problem, a pain that you have detected in your own flesh. In this way, you will be your own target client and you will know what you need.
Keep things simple. Don’t go crazy with the technology stack or the features that the MVP should have. Try to launch quickly and validate your idea as soon as possible.
Since you’re doing a side-project, try to learn something new along the way. If the project finally fails, you will at least take with you new knowledge and something interesting to add to your portfolio.
Don’t be discouraged if your project doesn’t receive all the attention you expected at the beginning, it could be for different reasons. Be patient.
Listen to your audience and try to improve your product little by little.
Make lots of launches. Consider each new feature you add to the product as a new opportunity to make a new launch and get attention.