DEV Community: Pedro Filho

Data Visualization with D3, React, visx and Typescript: 2 - Data Basics

Pedro Filho — Wed, 06 Oct 2021 20:31:14 +0000

It's not every day that you have a perfect dataset to work with, most of the time you'll need to apply transformations to properties to get it right for your visualization. This is pretty simple, and usually it's the first thing you do when you think about a chart.

Let's say that you have something like this to build a single line chart

[
    {
        name: "Bitcoin",
        price: 10,
        base: "USD",
        date: '1560507303',
        creator: "Satoshi Nakamoto",
    },
    {
        name: "Bitcoin",
        price: 12,
        base: "USD",
        date: '1592129703',
        creator: "Satoshi Nakamoto",
    }
]

I need an X and an Y, and I already have it, right? But you need the date to be something more human-friendly, and the price, you want it to be in cents, not dollars. How would you do it?

const format = d3.time.format('%B %d, %Y')

const data = rawData.map(oldData => ({
    price: oldData.price * 100,
    date: format.parse(oldData.date)
}))

But this isn't very functional, right? We should do something better for it! What if we create a function to transform A to B? Something like this

const format = d3.time.format('%B %d, %Y')

const getPrice = price => price * 100
const getDate = date => format.parse(oldData.date)

Then you can use it like this:

const data = rawData.map(oldData => ({
    price: getPrice(oldData.price),
    date: getDate(oldData.date)
}))

Then, you would have something like this in the end

[
    {
        price: 1000,
        date: 'June 14, 2019'
    },
    {

        price: 1200,
        date: 'June 14, 2020'   
    }
]

Nice, right?

This is what we call accessors, and they are really helpful to get and transform data inside your dataset.

I hope you liked it! For the next chapter, I'll talk about D3, so stay tuned!

Data Visualization with D3, React, visx and Typescript: 1 - Introduction

Pedro Filho — Mon, 04 Oct 2021 12:31:32 +0000

This is the first video of a series that I'm creating to teach you about data visualization using some technologies like D3, React, visx and Typescript. I hope you like it.

I'm creating this course because I heard a few times that professionals with data visualization skills are rare, and when they appear on the market, they get hired pretty quickly.

Data visualization is a way of telling a history with an image. It is important for humans, because that's the way we can actually understand the data that is presented to us.

One example I like to give is that we know, by common sense, that the life expectancy is going higher over time, but how do we quantify and prove it? How do we let other people know about it with just a few seconds of their time?

What if I showed you this data, would you be able to get the essence of it?

https://ourworldindata.org/grapher/life-expectancy?tab=table&time=1770..2019&country=Africa~Asia~Europe~OWID_WRL~Americas~Oceania

Now, if I give you this, you would probably get it really fast, right?

https://ourworldindata.org/grapher/life-expectancy?tab=chart&time=1770..2019&country=Africa~Asia~Europe~OWID_WRL~Americas~Oceania

This transformation is actually what we are going to learn! How to get RAW datasets and transform them in beautiful data visualizations using the power of D3.

By the way, this course is not for complete beginners, you should have previous knowledge of JavaScript, a little bit of Typescript, and React.

With this, we will create, by the end of this course, a beautiful chart, that you can customize and add to your portfolio!

Understanding Debouncing and Throttling using Javascript

Pedro Filho — Mon, 20 Sep 2021 12:54:09 +0000

I can't remember how many times I had to use one of these debouncing or throttling, they are a necessity for any app that is used in real life.

So, let's start with a debounce function. A debounce function is something I usually use for things like autocompletes, and that's how I'll explain it to you!

Imagine that you want to build an address auto-complete functionality for your checkout, let's see how it would work without a debounce function:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Debounce and Throttle</title>
  </head>
  <body>
    <input id="debounce" type="text" placeholder="debounce" />

    <script>
      document.getElementById("debounce").addEventListener(
        "keydown",
        (e) => {
          console.log(e.target.value);
        }
      );
    </script>
  </body>
</html>

Very simple, right? But what happens if your service charges per call, or if you're running it on a server and you don't want to make your IT team crying? Well, that's where the debounce function shines.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Debounce and Throttle</title>
  </head>
  <body>
    <input id="debounce" type="text" placeholder="debounce" />

    <script>
      const debounce = (func, wait) => {
        let timeout;

        return (...args) => {
          if (timeout) clearTimeout(timeout);

          timeout = setTimeout(() => func(...args), wait);
        };
      };

      document.getElementById("debounce").addEventListener(
        "keydown",
        debounce((e) => {
          console.log(e.target.value);
        }, 1000)
      );
    </script>
  </body>
</html>

Now, it'll only run after the user stops typing for 1 second, everyone is happy!

But let's say you have a limitation that you can only call your API 1 time every 2 seconds. That's the job for the throttler function! Let's see how it would be implemented without it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Debounce and Throttle</title>
  </head>
  <body>
    <button type="button" id="throttle">throttle</button>

    <script>

      document.getElementById("throttle").addEventListener(
        "click",
        () => {
          console.log("clicked");
        }
      );
    </script>
  </body>
</html>

Well, an anxious user can break your application! Let's see how we can prevent that with a throttler function:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Debounce and Throttle</title>
  </head>
  <body>
    <button type="button" id="throttle">throttle</button>

    <script>
      const throttle = (func, wait) => {
        let lastTime = 0;

        return (...args) => {
          const now = Date.now();

          if (now - lastTime >= wait) {
            func(...args);

            lastTime = now;
          }
        };
      };

      document.getElementById("throttle").addEventListener(
        "click",
        throttle(() => {
          console.log("clicked");
        }, 2000)
      );
    </script>
  </body>
</html>

Awesome, right? These functions can really help you with some real life issues!

4 Steps to Get Hired as a Software Engineer

Pedro Filho — Mon, 13 Sep 2021 12:09:52 +0000

If you're looking for a job, I have some tips for you. I've been analyzing CVs and interviewing candidates on technical interviews for a while now, and I've noticed some stuff that people usually don’t do, that can really make you succeed!

There are usually 4 steps for interviews, and I have a tip for each, so let’s go for it!

Create real products, not dummy projects.

If you don’t have any work experience, don’t put on your resume a project using the IMDb API, or a Netflix clone. If you really want to stand out, create a useful product.

It can be something that doesn’t necessarily give you money but just needs to look useful and cool.

I don't usually look at dummy portfolio projects, as they can be easily copied and pasted, but if it has a pricing page, and looks unique, I'll definitely check it out.

Don't pretend to be someone you're not

Believe me, I know when you're pretending to be something you're not, and I'm autistic! Imagine someone that really understands social behaviors, it's too easy for them.

The second reason is that, even if you get hired this way, you won't be able to pretend for your whole probation time, so you'll probably be fired in the end. Just be yourself, trust me.

Study the basics for your technical interview

You shouldn't memorize the most common problems that appear on interviews, you should understand the main concepts, do a bunch of challenges, look for some common problems on GitHub and give them a try.

I have a repo with some challenges, and I'll link them here on the description, so you can check it out!

Think out loud when you’re solving a problem

I shouldn't have to say that, but if I'm interviewing you, I'm on your side.

If you give me reasons to believe that you understand what you're doing, and you would finish it if you had more time, I'll believe you, and maybe even pass you on the test, so please, give me reasons to, show me your thoughts!

BONUS: Don’t cheat

I'll know if you do, everyone knows. My only job at that moment is to see you doing a challenge, don't you think that I would see you looking at the other screen?

Cheating not only removes you from the test, but I wouldn't even consider you for future jobs, so please, don't do it.

Conclusion

If you follow these steps, I promise you that your chances of being hired will increase exponentially.

The whole industry is always looking for the right person to join them, so please, be the one.

My "perfect" productivity setup

Pedro Filho — Mon, 14 Oct 2019 13:02:07 +0000

Introduction

A very common thing a lot of developers struggle with is their setup.

Which framework should I use? Which hosting platform should I use? Which time tracker should I use? Well, it happens to us developers, but it's not a bad thing. These options can be overwhelming sometimes, but usually, it's a good thing.

Motivation

I'm neuroatypical, my spectrum sometimes makes me struggle with "easy" tasks, but let me "fly" with some "hard" ones. My productivity setup was adapted for me, some professionals were involved and I'll post about the process later.

I came across a bunch of different apps over the years. Now I'm in a good position to show my productivity setup, the one I took years to build and improve. It's perfect for me.

Action

This is how I organize my personal and professional life:

Habits

Well, this one is a thing for me. I love my habits, I really enjoy constant things. I was talking to my therapist the other day and she told me about Habitica, a place where your habits are turned into an RPG game.

Did you hear me? It's an RPG game made with your habits, a place where you can see your habits, get minded, get items, it's awesome!

I loved it on day 1, but you can take your time to like it. To improve your success you should enter a party, a place where you can defeat bosses and get motivated.

To-Dos

Habitica is a good place to list your to-dos, but It has some limitations. Because of it, I started using Todoist last year, and it's being an awesome experience.

I like to plan my day when I wake up I usually like to go to Todoist and list everything I have to do for that day. More than that, I like to create "goals" for my life, appointments, posts, projects and etc.

It helps a lot when dealing with multi-tasking over your day, you should check it out!

Notes

If you're like me, you have a bunch of ideas, projects, things in your head that you have to document somewhere, that's where Notion shines.

I'm pretty sure you already know Notion, no? Please do! It's a lifesaver, it helps me organizing everything I do for my life.

I have a list for my domains, projects, posts, workshops, conferences, everything! It's a user-friendly database, where you can create pages, tables and everything you want to!

Each person uses Notion differently, that's why I love it so much. It gives you the power to create your own note system, one that makes sense to you. If you don't use it already, please do!

Calendar

The calendar is a have-to for everyone, it organizes your life, your time in this world, and you should care about it. I use Google Calendar for it, it has a bunch of integrations and I use it with Todoist to have everything nice and smooth.

I use it at work too, all my meetings are there, so I really like to use it, on my pc I can put it all together in one calendar, so I have everything in one place! Lovely!

Pomodoro

I'm a huge fan of the Pomodoro technique, it helps me a lot with my workload and let me focus on important tasks once at a time, with no distractions. I'm a huge fan of Flow, it's a simple (Mac only) app that gives you a timer for you to follow your Pomodoro, I love it!

Focus Extension

I created this extension last month and it already has more than 100 users! It's a dead-simple extension that gives you the power to list websites that make you procrastinate and close them when you're focusing. It's called Work Hard, and the name already says everything.

Final Thoughts

That's it, guys! I already show you my whole productivity stack what about you show me yours? Please post it in the comments! I'll enjoy seeing what you use!

Why you should test your app

Pedro Filho — Mon, 07 Oct 2019 19:32:43 +0000

I know many of you write tests daily and have 90%+ test coverage on your apps (hopefully), but this article is for those who don't, those who don't see the benefit in testing your app (Yep, I have to explain it more then I would like to)

Let's go back to the point. I'll list here the "main" reasons why you should test your app:

You should create things for users, not for yourself

Through my career as a software engineer I had to explain this concept more times than I would like to:

You are not the owner of the product, the user is.

And you may think: "What does it mean? Why this phrase is important for me to understand tests?" And here is the answer: The user doesn't care about the technology you used, neither if your code follows the latest standards, he just wants it to work.

So just imagine that what you "tested" by yourself is 1% of what the real user is going to do, he'll never click the correct button, never, ever, clear the session storage when he sees a bug, he'll just leave swearing, that's what they do.

I bet this next one is gonna make you smile

Refactoring should be easy

I'm a frontend developer, I work with React on my daily basis, and I have to say: Oh boy!

Over these years I saw the same component be done at least 6 different ways, with more optimizations and abstractions, and it's cool, isn't it? But did you ever felt that chill when you had to refactor something?

Let me tell you a secret: You shouldn't.

Refactoring is natural, it's the way software development works, and you should feel confident refactoring your code, and here's where testing shines, as Kent C. Dodds said once on his twitter:

The more your tests resemble the way your software is used, the more confidence they can give you.

With automated tests, you'll be able to say that your component is 100% "compatible" with the last one, and this is exciting isn't it?

You're not the only one that will touch that piece of software

This one is pretty obvious but I have to say: When you work in a company, you have coworkers. People won't read your mind to change your code. Without tests, they don't have parameters to know if they screwed it or not.

Besides, it's almost impossible to be hired without knowing how to test something (at least you're a junior or doing some kind of internship).

Composition, right?

So let's pretend you're creating a page for your app, and this page depends on a button. Are you completely sure that if you change the functionality of that button, it'll continue to work on that page?

And how many pages/containers/components use that button? How can you be so sure that it works everywhere?

The short answer is: with tests

I made a workshop last month to give more examples (React), if you want to check it out: https://github.com/pedroapfilho/testing-workshop

How I stopped procrastinating and did something

Pedro Filho — Mon, 30 Sep 2019 17:47:57 +0000

Introduction

Well, there's too much information on the web, so it's very easy to get distracted along the day. Anything can get me out of my goal and make a task take longer than it should. It happens to everyone, right?

I have to admit that I have a procrastination monkey inside my brain, and it makes me do things that I shouldn't. Last week, for example, I saw a guy building an oasis inside a forest... The problem is not that I saw 1 video, the problem is that I saw 10 of those, one after another, for 2 hours in a row.

But let me introduce myself first: My name is Pedro, and a Frontend Engineer at GameAnalytics.

Our platform is used by indie developers, games studios, and established publishers, GameAnalytics is currently the world's most popular analytics tool for anyone building a mobile game. Our network is approaching 100,000 games, which are played by more than 1 billion people each month. Essentially, GameAnalytics helps developers to drive more conversions, refine critical flows, and boost retention by making the right decisions based on data - not guesswork.

I'm autistic, and it may or may not be a problem for you, but this situation was making me nuts. I couldn't finish my tasks, couldn't make new projects, couldn't achieve anything. I was at rock bottom, my OCD was getting stronger it was all happening because of that damn monkey in my brain.

Motivation

I had to do something about it, I couldn't let that monkey win, right? Then I thought:

What if I create something to stop my procrastination? Something to force me to get back to work, like a Work Hard mode?

After that, I took a long breath and said:

I'm gonna do it!

I turned on my favorite music and started writing my ideas.

Planning

I started thinking about how I started to get distracted and I saw a pattern:

Every time I have:

A big task to do
Something I don't know exactly how to do
Think about something outside the scope I'm in

I procrastinate, and how I did it? This one is simple, I open a new tab and go to some "procrastination website".

Then, with these insights, I decided to create a browser extension to stop me from doing it. How? Closing the damn tab!

Simple, right? I took a piece of paper and started writing down some ideas. I wanted to have a way to:

Turn on/off the "Work Hard mode" with a click.
Have something as lightweight and simple as possible, nothing too complex.
Have something private, that didn't send my list to anywhere else than my own machine.
Publish it and make it open source

I wrote everything on a piece of paper and started to work.

Action (part 1)

The first thing I did was the research, I searched for the Chrome API and it's all there! It's very easy to create an extension!

After that, I started my crusade to decide the best way to write it, and I decided to use Webpack and Typescript.

Firstly I configured Webpack, and it took 5 min to write everything down:

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require("path");
const srcDir = "../src/";

module.exports = {
  entry: {
    background: path.join(__dirname, srcDir + "background.ts"),
  },
  output: {
    path: path.join(__dirname, "../dist"),
    filename: "[name].js"
  },
  optimization: {
    splitChunks: {
      name: "vendor",
      chunks: "initial"
    }
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  }
};

Secondly, I looked for samples, and I saw a bunch of them, downloaded and saw how it worked. Then I understood that I had to mess around with the background.js, so I created this script:

const blockList = [
  "facebook.com",
  "twitter.com",
  "instagram.com",
  "youtube.com",
  "9gag.com",
  "producthunt.com"
];

chrome.tabs.onUpdated.addListener((tabId, _, tab) => {
  blockList.forEach(name => {
    if (tab.url.includes(name.toLowerCase())) chrome.tabs.remove(tabId);
  });
});

I created the blocklist by myself, using the websites I thought were making me procrastinate.

Then I ran Webpack, uploaded it on my browser and it just worked! But in order to turn it on and off I had to do more, I had to create a button to toggle this script on/off, save it somewhere, like a state. After planning, I took some icons and created this piece of code:

chrome.browserAction.onClicked.addListener(() => {
  chrome.storage.sync.get(["active"], status => {
    let { active } = status;
    if (active) {
      active = false;
      chrome.storage.sync.set({ active });
    } else {
      active = true;
      chrome.storage.sync.set({ active });
    }

    chrome.browserAction.setIcon({
      path: {
        16: active ? "icons/work16.png" : "icons/fun16.png",
        48: active ? "icons/work48.png" : "icons/fun48.png",
        128: active ? "icons/work128.png" : "icons/fun128.png"
      }
    });
  });
});

chrome.tabs.onUpdated.addListener((tabId, _, tab) => {
  chrome.storage.sync.get(["active"], ({ active }) => {
    if (active) {
      chrome.storage.sync.get(["blockList"], ({ blockList }) => {
        blockList.forEach(name => {
          if (tab.url.includes(name.toLowerCase())) chrome.tabs.remove(tabId);
        });
      });
    }
  });
});

Well, let me tell you, it worked too! That simple! After that I published the extension following this tutorial, it took 30 minutes and everything was done!

Getting feedback

The first thing I did was to send it to all my friends, asked them to test it out and tell me how it went. After that, I shared on Facebook and Twitter to get more traction.

Their feedback was awesome, the only thing they asked was to add more websites! Surprisingly I didn’t think about it, these websites I listed were the ones I used to procrastinate, people have different needs.

So I started to plan how to do it.

Action (part 2)

I had to think about how I would create that page. Looking at the Chrome documentation I saw that I had an options page to add options.

I thought about using React to create it, then I thought it was a cannon to kill an ant. Vanilla was perfect for the job.

Well, first I created everything on a piece of paper, then I created the HTML/CSS.

<div id="app">
  <div class="container">
    <div class="center">
      <h1 class="title">Work Hard 💪</h1>
      <h3 class="subtitle">
        List here the websites that make you procrastinate
      </h3>

      <div class="blockInputContainer">
        <input
          type="text"
          id="blockInput"
          placeholder="Type a keyword or a website you wanna block"
        />
        <button id="addButton" class="blockButton blockButtonInput">
          Block
        </button>
      </div>
      <div class="blockListContainer">
        <ul id="blockList"></ul>
      </div>
    </div>
  </div>
</div>

Then I added an options.js on the Webpack and started with the JS, it wasn’t that hard:

const input = document.getElementById("blockInput") as HTMLInputElement;

const addButton = document.getElementById("addButton");

const ul = document.getElementById("blockList");

const createListItem = (item?: string): void => {
  const value = item || input.value;

  const li = document.createElement("li");
  li.classList.add("blockListItem");
  li.setAttribute("id", value);

  const span = document.createElement("span");
  span.classList.add("blockListTitle");
  span.innerText = value;

  const button = document.createElement("button");
  button.classList.add("blockButton", "blockButtonRemove");
  button.innerText = "Remove";
  button.addEventListener("click", () => {
    const liToDelete = document.getElementById(value);

    liToDelete.remove();

    chrome.storage.sync.get(["blockList"], ({ blockList }) => {
      chrome.storage.sync.set({
        blockList: blockList.filter(v => v !== value)
      });
    });
  });

  chrome.storage.sync.get(["blockList"], ({ blockList }) => {
    if (value && !blockList.includes(input.value)) {
      if (input.value) {
        chrome.storage.sync.set({
          blockList: [...blockList, input.value]
        });
      }

      ul.appendChild(li).append(span, button);

      input.value = null;
      input.focus();
    } else {
      input.value = null;
      input.focus();
    }
  });
};

input.addEventListener("keypress", keyPressed => {
  if (keyPressed.which === 13) createListItem();
});

addButton.addEventListener("click", () => {
  createListItem();
});

chrome.storage.sync.get(["blockList"], ({ blockList }) => {
  blockList.forEach(item => createListItem(item));
});

And done!

After having it all working I created some illustrations, the description and published everything on both Chrome and Firefox:

Chrome

Firefox

Created a small roadmap on the repository:

Source code

Final Thoughts

Well, I managed to find a way to dodge the procrastination monkey a little bit, with a simple solution and a few days of work. It increased my self-esteem a lot and was worth it!

Check it out on GitHub, star it, contribute, give me your thoughts and spread the project to all your friends, they’ll like it! I promise!