How I stopped procrastinating and did something

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!