How I stopped procrastinating and did something
Tags: productivity, javascript, opensource, showdev
Published: 2019-09-30 17:47:57

## 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](https://www.ted.com/talks/tim_urban_inside_the_mind_of_a_master_procrastinator) 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](https://www.youtube.com/watch?v=UhRXn2NRiWI) and started writing my ideas.

![just do it](https://thepracticaldev.s3.amazonaws.com/i/ygllaflj8oip7ypcd2na.gif)

## 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:

```js
/* 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:

```js
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:

```js
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.

```html
<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:

```js
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](https://chrome.google.com/webstore/detail/work-hard/agbhcnkkohkomabkadaojnmmedjpofna)

[Firefox](https://addons.mozilla.org/en-US/firefox/addon/work-hard-official/)

Created a small roadmap on the repository:

[Source code](https://github.com/pedroapfilho/work-hard)

## 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](https://github.com/pedroapfilho/work-hard), star it, contribute, give me your thoughts and spread the project to all your friends, they’ll like it! I promise!