React logo

React 16.8 – Captain Hook is here

React 16.8 was shipped on Feb 06, 2019, bringing with it the Hook feature that everyone was waiting for. It was a version behind schedule, as React 16.7 was going to be the one.

Captain Hook with binocular

Ok maybe not that Hook!!!

After over 6 months from its introduction in React Conf 2018, Facebook development team finally released Hook feature into a stable version release. This feature helps our functional components having most class components features, including having internal state, context, and even lifecycle methods!!!

Tl; dr;

React 16.8 shipped with the stable Hook feature, allowing us to use state, context and lifecycles inside functional components. Hooks resolves 3 problems that React had: Wrapper hell, Huge components, and Confusing classes. Facebook team advises that we should start using Hooks in our new React features for a consistent code style as well as reducing duplication.

Hooks overview

Hook is released without any breaking changes. It is a brand new feature and does not interfere with existing features.

Class components are hard to test, especially lifecycle methods. Using hooks can decouple the lifecycle functions and make them easy to test.

There are multiple kind of hooks: State Hook, Context Hook, Effect Hook, or build your own Custom Hooks.

Facebook has released a good documentation to Hooks here. In this post, we will just discuss about what I think is important to mention outside their documentation.

 

State Hook

More details here.

// what you see in their documents can be confusing
const [count, setCount] = useState(0);

// what it is actually is
const [state, setState] = useState(initialState);

Best thing about `useState` is that you can have multiple state control in your component. Traditionally, we only have 1 state object in a class component. But with this approach, we can have as many state objects as we need.

Context Hook

More details here.

// returns the value of the context
const value = useContext(SomeContext);

Nothing special here, calling `useContext` will return the value of that context, and instead of having to consume the context, we just need to use that value.

// traditional way of using context
render() {
  return (
    <Context.Consumer>
      {(value) => (<MyComponent value={value} />)}
    </ContextConsumer>
  );
}

// with useContext
const OtherComponent = () => {
  const value = useContext(Context);

  return (<MyComponent value={value} />);
};

 

Effect Hook

More details here.

Basically just an implementation of lifecycle methods. Every extra tasks that a component does besides rendering DOM elements are side effects, and should use effect Hook to execute them. I’ll use the same example in the documentation.

import React, { useState, useEffect } from 'react';

// class example
class Example extends React.Component {
  state = {
    count: 0,
  };

  componentDidMount() {
    // set title on mount
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    // set title on update
    document.title = `You clicked ${this.state.count} times`;
  }

  setCount = (count) => {
    this.setState({ coount });
  };

  render() {
    const { count } = this.state;
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => this.setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }
}

// functional example
function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

We can clearly see that the code is duplicated on `componentDidMount()` and `componentDidUpdate()` lifecycle functions. Effect Hook helps us removing that duplication.

Custom Hooks

More details here.

Something to remember here, React will consider a function to be a custom Hook if it starts with use.

useTitleUpdate = (count) => {
  document.title = `You clicked ${count} times`;
};

// usage
const MyComponent = () => {
  const [count, setCount] = useState(0);
  useTitleUpdate(count);

  return (...);
};

Important thing to remember

– Hooks are only declared at top level, meaning we CANNOT declare Hooks in the following examples.

// loops
for (let i = 0; i < 10; i++) {
  const [value, setState] = useState(1);
  ...
}

// conditions
if (x === 1) {
  const [value, setState] = useState(1);
  ...
}

// nested functions
const MyComponent = () => {
  const handleSave = () => {
    const [value, setState] = useState(1);
    ...
  };
};

There is a linter plugin to prevent developers doing this.

Other releases

Along with Hooks, React 16.8 also releases bug fixes and test utilities to test Hooks feature.

 

Quick recap

Hooks feature certainly offers a way to make React code more readable and efficient. However, we do not need to change the existing class components to use Hooks, as suggested in their talk at React Conference 2018. Both of them are doing the same thing under the hood, it’s just the implementation that is different.

Presentation Skill image

Presentation skills – An overview – Part I

When being asked, what is the most fearful thing that you never want to experience, nearly 40% said “speaking in front of many people”, significantly higher than death itself at 5%. You can read more about the survey here.

Presentation skills are considered one of the most important skills for a leader. To be able to convey your ideas, or to promote your company, you need to know how to engage many people at the same time, through your presentations, through your talks. That is why I spent time to research about this topic and now I decided to share with you what i learned.

For part I, let us discuss about what to do before the presentation.

Tl; dr

For a successful presentation, you need to do the following things:

  • Prepare your presentation, it needs to suit the target audience that you are going to talk to.
  • Practice your speak, keep practicing until you are absolutely confident in delivering the content.
  • Come to the venue early so you can be more familiar with the ambience.

Preparing your presentation

According to Simon Sinek and other great presenter, a great speaker always needs to plan his or her presentations to suit the target audiences. Knowing your audience is the key to deliver your message through successfully. This is one of the most important skill to master when it comes to presentation skills.

“If you know the enemy and know yourself, you need not fear the result of a hundred battles. If you know yourself but not the enemy, for every victory gained you will also suffer a defeat. If you know neither the enemy nor yourself, you will succumb in every battle.” – Sun Tzu, The art of war.

What does it mean to suit the audience? If I’m speaking to a group of students about my job as a fullstack developer, will it be different from presenting about the same topic to potential employers? The difference is obvious here, talking to students about my job is much relaxing and I can use certain jargons and jokes to make them interested about the topic; while to the employers, I need to be more professionals and discuss more about my previous employments and how can my expertise assists their companies.

Practicing your presentation

After we’re done writing our presentation slides and scripts, we need to practice presenting the content. This will build confidence within us so we can express it in front of the audience. If we don’t feel the confidence from the speakers, we have a feeling that they do not know what they are talking about.

“Confidence comes from competence.” – Dan Lok.

I would say we need to practice our speaking until we remember every slides, every contents that we intend to communicate. We should be able to speak without the need to look at the slides. That is when we are competent enough to deliver the presentation. When we practice so much that it becomes a reflex, there is no difficulty in doing the actual presentation itself.

Coming to the venue early

I’m sure that most of us feel weird, or nervous when going to an unfamiliar place, let alone having to talk at that venue. One of the ways, suggested by Mr. Dan Lok, is that we as the speakers need to arrive at the place earlier, even before the first audience comes.

“All things are ready, if our mind be so.” – William Shakespeare, Henry V.

According to Mr. Lok, a speaker needs to be ready to do the presentation when the time comes. He or she needs to be familiar with the atmosphere of the settings. Before the event, he would go up on the stage, look around and naturalize himself with the lights and the floor. Once he feels comfortable with the stage, the readiness level increases significantly. He is ready to do the presentation.

You can watch more about how Mr. Dan Lok presents in his YouTube Channel here.

Quick recap

Above are the points that I learned about presentation skills, before your presentation. All of it can be summarized in a word: PREPARATION.

Part II will discuss about what you need to do during your presentation. Stay tuned and read other blogs of mine while you wait, right here 🙂

As usual, I am open to comments and discussions. This is the place where we can openly discuss about the topic, no hard feelings.

Katalon logo

Software review: What is Katalon?

One of my friends was looking for an end-to-end testing framework to integrate with his stack, and suggested that Katalon was something that he had been considering.

Let us take a quick look into it and deduce some of its advantages as well as disadvantages.

 

Tl; dr;

Katalon will not be my first choice when it comes to E2E testing. I think if I have a choice to rewrite my end-to-end testing code, I would choose a framework like cypress or puppeteer. Mainly because I am heavily tech oriented.

Some pros that I uncovered:

  • Non-technical oriented.
  • What you see is what you get.
  • Can use different browsers (Firefox, Chrome, etc.).
  • Less work to create test cases to start testing.

And some cons, of course:

  • Usage of versioning to keep track of updating/creating test cases are not straightforward. I have more thoughts into this below.
  • Big application size.
  • Unknown backward compatibility for created projects.

 

Installation

Katalon is free to download and use. You can easily get it from https://www.katalon.com.

This step really takes me back to the old day when software applications didn’t come with an installation file, instead they came with just a zip archive and after extracting the file. Boom!!! You got the ready to run software.

Only thing that I personally feel a bit uneasy is the size of the software. The archive file is about 331.5MB, and after extraction, the whole thing takes approximately 500MB. Big application size can sometimes slow down your CI/CD process, since it takes some time to download and therefore delays other dependent tasks to run.

 

First look

Katalon first look

Looking quite simple. To start using Katalon, you just need to open the application, and create a project. Then, click on Record web button to start working on your first test.

 

“Writing” your test

Not really writing though, the brilliance of Katalon is that you can interact with the website normally, and it will record all your activities, step by step. Then you will need to add your own conditions into the test to verify that the workflow is doing what you want it to do.

Let’s see a simple workflow below.

You can see that just in a few clicks, I already have a simple test case to test whether the login failed text displays. This is super useful for non-technical background people, since they can just interact with the website and do little editing, they can already test the website.

 

Some thoughts…

The documentation seems to be detailed. Most of the information that I need to have a quick look-around is in there. They clearly have spent quite a bit of time into documenting and make our lives easier.

Workflow is simple and visual. Personally if I am not technical oriented, this will be my first choice to learn about E2E testing. However, comparing to other frameworks like cypress or puppeter, we need to commit the whole project and note down the version of Katalon so that we can replicate the project in another machine. This can cause incompatibility and inconsistency. With other frameworks, we can create a git repository and simply push all test cases code to it. With npm, it is easy to reinstall in another machine.

Imagine that you created a project in version X, then later on decided to upgrade Katalon to version Y. There are unknown compatibility issues that may happen, which we will need to read the actual test cases code to resolve the problems. I think it defeats the purpose if we need to actually write/edit the code for Katalon, even though they offer an option to do so.

 

Epilogue

Well that is my 5 cents on Katalon, and how would I use it to test a website. There are so many features that I have not touched yet. There is a high possibility that it offers something extraordinary that defeats other frameworks. However for a quick look, it does not appeal to myself as a technical person.

React logo

React 16.7 feature preview – What is new?

React 16.7 ships in December 19, 2018. Let us look into the changelog and see what has been changed.

No new feature 🙁

This post is going to be short indeed.

Version 16.7 does not bring us any new features, but rather fixing various bugs and performance boost. One main performance improvement is for React.lazy for large number of lazy components.

Facebook team promised to release Hooks feature along with React 16.7, however, they did not release the API in this version, and now we have no idea when it will be released. If you want to read more about Hooks, I will have another post discussing in details about this feature. For now, the proposal is available at https://reactjs.org/docs/hooks-overview.html

EDIT: You can read all about Hooks here.

Backwards compatibility

Since this version ships with only bug fixes. There should not be any difficulty in upgrading react version in your project.

 

Future version prediction

According to this comment, Hooks feature will be released very soon, the proposal has been accepted and the implementation is merged into master. We just need to wait for them to test thoroughly.

Facebook team will likely release Concurrent mode after Hooks feature is out. More details will be revealed at the end of Q1 2019, since the roadmap states that it will be released in Q2 2019.

 

Tl; dr;

React 16.7 release does not include any breaking changes. Upgrade from 16.6 to 16.7 should not break your projects.

resume blog post feature image

Top 5 mistakes that I made with my Resumé

What are the top 5 mistakes that I made with my Resumé?

As a previous international student in Australia, I went through a lot of hassle to find jobs in my field – which is Software/Web development. I made a lot of mistakes early on; and now looking back, I wish I can tell my younger self not to fall into these traps when crafting my first resumĂ©, my life would be a lot different.

In this article, I would like to share some mistakes that I had when I wrote my resumé and apply for companies on recruitment websites like seek.com.

Some Analysis

Your CV will most likely go through at least 3 types of people before getting you into the interview: the Recruiter, the Hiring Manager, the Technical Lead. Between these 3 types, only the Technical Lead has skills that are relevant to your position.

The Recruiter will most likely not reading your CV. Instead they rely on a bunch of filters to only look at CVs which they think have enough experience and skills for the job they are recruiting. For example, if they need to find a senior web developer, fluent in PHP and React.js; the filters they can use are PHP, web developer, React, etc.

The Hiring Manager will look at the CVs that the Recruiters send them. These people will most likely scan through the CVs and short-list them. They are likely looking for the ability of working in a professional environment, along with soft skills like team work, time management, organizational skill, etc.

The Technical Lead will read the short-listed CVs given by the Hiring Manager. He/she will read your experience and determine if you have enough skills to work in the position. They are the deciding vote to whether to hire you or not, since most likely they will be your direct manager if you are hired.

1. Customize your CV for EACH company

This is important, let me repeat it one more time. Customize your CV, For, EACH, Company.

You will see why later.

When I started looking for web development positions. I drafted myself a generic Resumé and basically sent it to many job posts on SEEK, without hardly reading up the job requirements. This turned out to be a serious mistake, as I did not have any call back from the positions I applied for. This continued for over 6 months, until my mother, who was a HR manager told me about the issue that I had.

When reading up job descriptions on recruitment websites, please please make sure that you understand what you need to do, what skills you need to possess; and what business the company is in. This is very important to custom tailor your CV to fit the job description.

Take a look at this example

What is required of the role:

  • Commercial experience in PHP and SQL-based databases (MySQL/MariaDB/PostgreSQL)
  • Experience with Javascript and jQuery
  • Knowledge of best practice development methodologies
  • Experience collaborating with clients and stakeholders
  • High literacy and verbal communication skills

 

The following would also be highly advantageous:

  • Experience working with Drupal, CodeIgniter or SugarCRM
  • Experience integrating web applications with third party APIs and web services
  • Knowledge with running basic Linux commands
  • Experience with managing Apache2 web servers in Linux

 

Responsibilities will include:

  • Gathering requirements, designing solutions, coding, testing, maintenance & support
  • Clear communication with stakeholders to ensure expectations are met and clients are happy with the result
  • Thorough documentation of code and support cases
 Your CV should display these skills:

Technical skills

  • PHP – CodeIgniter, Drupal
  • MySQL
  • Javascript – jQuery
  • Linux – Apache server
  • Agile development methodology like Scrum, Kanban

Soft skills

  • Time management
  • Communication
  • Documentation
  • Teamwork

As you can see, I update the CV based on the requirements of the position. This will help my CV go through the Recruiters’ filters and have a higher chance to end up on the Hiring Manager’s desk.

 

2. Limit your Resumé to 1-2 page

Resumé should be short and condensed. Talent acquisition people have tons of CV to go through every day. No one will read a 3-4 pages CV, simply because it is not worth the time. I was proud of my achievements in my university time, so I ended up writing a 4-page Resumé, which besides my family and myself, no one reads it in full.

Having a short, condensed CV will focus the reader to just the most important points about yourself. For example, if you get multiple scholarships during your study, which I did, then just select the most valuable scholarship instead of listing them all out. If you participated in many programming projects, select one or two projects that relate to the position that you are applying.

Do you want to read event a 2-page resumĂ©? If not, there is a very high chance that the hiring people won’t.

sample 2-paged resume

 

3. Less formatting – more readability

Take a look at these resumé

fancy resume          simple format resume

The format is very impressive and memorable. However, like I said before, the hiring people look through thousands and thousands of CV every day. Having this impressive resume does not make a lot of difference if the hiring person cannot find the information he/she is looking for.

In the past, I used to have a fancy resumé template, with all the colors and columns. Then after a while, I find that when I come back and update the CV, it was a bit difficult to find the section that I need to update at a glance. And I realized that if even I cannot find the sections I need, what happens with the recruiter when he/she looks at my CV!?!

In conclusion, having a simple CV format like Edgar’s CV makes it easier for other people to read, and therefore increasing your chance to get pass the barriers to be hired. One more bonus tip is that you should export your CV to PDF format, that will prevent any format changes and section misalignment.

 

4. Use simple words

In my first CV, I used a ton of technical terms, thinking that I could impress the recruiters into hiring me. It turned out that the recruiters did not understand what I was talking about, and therefore they throw my CV aside. They are not recommend someone that they could not understand.

For example: if you are experienced with Dynamic programming and can use discrete mathematics to figure out the optimized algorithms for various problems. Instead of writing “Experienced in Dynamic Programming, developing optimized algorithms using Discrete mathematics”, let us write “Experienced in computer programming methods and able to develop optimized algorithms to resolve problems”.

Simple words will make people understand us, and your CV will more likely end up on the Technical Lead’s desk.

 

5. Ask for other people’s feedback

Back then, I thought the CV was an exposure of who I was. So I did not want other people to look at it. Fear of being judged clouded my mind, while I should have shown everyone before sending it off. Feedbacks are valuable, especially when they come from someone who has experiences in recruiting, or someone who is a business owner.

 

Epilogue

Those are my top 5 mistakes when creating a Resumé to apply for jobs. I hope you guys enjoy the post and have much success with your career.

For a better illustration, I attach my CV here so you can have a look and it may helps you with creating your first CV.

Please be sure to check out other blog posts here or leave a comment below if you enjoy the content.

How to upgrade PHP version to 7.2 on Ubuntu 16.10

I decided to upgrade the PHP version in one of my servers from 7.0 to 7.2 to live with the bleeding edge. The process went quite smoothly, except for the last step which I needed to do a bit research.

 

First thing’s first: check your current version

php --version

Also create phpinfo.php file in your /var/www/html directory

<?php phpinfo();

and run the file to be sure that both php CLI and apache version are the same.

 

The Upgrade

You can use a third-party repository to install the latest version of PHP. We’ll use the repository by Ondƙej SurĂœ.

First, you need to install the repository.

# install required package so you can add repository
sudo apt-get install software-properties-common

# install the repository and update the repository list
sudo add-apt-repository ppa:ondrej/php

Then, update packages in the system

sudo apt-get update && apt-get upgrade

 

Install PHP 7.2 (or newer version, you can just change the version number in the command)

sudo apt-get install php7.2

 

(optional) install PHP modules, depending on your needs. Note that the version of PHP has to be specified

sudo apt-get install php7.2-dev php7.2-zip php7.2-curl php7.2-gd php7.2-mysql php7.2-mcrypt php7.2-xml libapache2-mod-php7.2

 

Verify PHP version using the command line

$ php --version
PHP 7.2.13-1+ubuntu16.04.1+deb.sury.org+1 (cli) (built: Dec  7 2018 08:07:08) ( NTS )

 

Verify PHP version using phpinfo.php file we created earlier.

!@$^%@$^, the PHP version is still the previous one!!! The reason is that apache is still running with the old PHP version. We will need to change that so the server can run with PHP7.2.

Let’s run the following commands:

# disable old php module
sudo a2dismod php7.0

# enable new php module
sudo a2enmod php7.2

# restart the server
sudo service apache2 restart

Verify the PHP version again, and it should be updated to our new version.

PHP version 7.2.13

If you want to upgrade to a different version of PHP, just change the version number while installing, and don’t forget to disable the old PHP module and enable the new one for Apache.

I hope this helps you with your work, and have fun upgrading 😀

React logo

React 16.6 new features: contextType, lazy, memo

In Oct 24, 2018, React 16.6.0 was published to npm. It brings a lot of exciting new features, including contextType, React.lazy() and React.memo(). We will discuss in depths of what they are and how will they change your React ecosystem.

In this blog post, I am going to assume that you already have certain experience with React, and have been working with React for a little while (mainly for understanding the tremendous advantages that the new features will bring us.

contextType

In React 16.3, Facebook released context API officially, shaking the foundation of state management systems like redux, mobx. In React 16.6, context API is further improved by introducing static contextType.

const SampleContext = React.createContext();


class WithContextAPIComponent extends React.Component {
  render() {
    return (
      <SampleContext.Consumer>
        {(value) => (<div>value.name</div>)}
      </SampleContext.Consumer>
    );
  }
}


class WithContextTypeComponent extends React.Component {
  static contextType = SampleContext;
  
  render() {
    const value = this.context;
    
    return (<div>value.name</div>);
  }
}


// usage
<SampleContext.Provider value={{ name: 'Tuan Nguyen' }}>
  <WithContextAPIComponent />
  <WithContextTypeComponent />
</SampleContext.Provider>

With the sample above, we can see that with contextType, we bound the context value to the component itself, which simplifies one layer of nested component to be rendered. This suddenly looks like it is so much similar to how we use redux store!!!

 

React.memo()

This is very simple. It enables the same functionality of React.PureComponent for functional components.

const MyComponent = React.memo(function MyComponent(props) {
  /* only rerenders if props change */
});

Previously functional components will re-render every time its props change, regardless of value.

With React.memo(), now functional components will shallowly check whether props values have changed, and decide to re-render.

React.lazy()

In my opinion, this is the most outstanding feature that React 16.6 offers.

Short description: it allows React components to only be downloaded from server on demand.

import React, {lazy, Suspense} from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

In the example, MyComponent will download OtherComponent only when it is needed.

This is very useful in tabular structure, where most users do not browse every tab content.

 

For more information, let’s check out the changelog at https://reactjs.org/blog/2018/10/23/react-v-16-6.html

Write automated script with Tampermonkey and Webpack

Recently I was pulled into an old web-based game called Ghost Trapper. The gist of it is, after a period of time, I can click on a button to trap a ghost, then a count down appears and I have to wait for the count down to stop until I can hunt ghosts again.

Then it hit me, why don’t I automate the process so that I don’t have to spend so much time to play anymore.

Here’s a screenshot of the game.

Ghost trapper screen image

Note the top left count down. Once it reaches 0, I can click that button again and continue hunting ghosts.

I look around for a solution for automating the process. There are quite a few options:

  • Python’s scrapy
  • Phantom.js or Casper.js
  • Puppeteer
  • Tampermonkey (Google Chrome only)

I have some experience in Scrapy, Phantom.js; so I was thinking, why not utilize what I have already known?

… Or I can jump into new things and learn how to do it.

 

I decided to go with the second option, and I chose Tampermonkey to do the work.

 

So I quickly wrote a small script to check if the button is active, and if so, click on it.

setTimeout(() => {
  if (!$('#huntBtn').hasClass('disabled')) {
    $('#huntBtn').trigger('click');
  }
}, 3000);

Simple, isn’t it?!

The problem is, I would like to have the script runs on multiple machines, and I want to synchonize the code in all machines, so if I update the code I’ll just need to do it once.

I ended up with the following structure:

  • A github project to host the code
  • Tampermonkey’s ability to refer to external javascript resources.

My Tampermonkey script

// ==UserScript==
// @name         ghost-trapper
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Ghost Trapper auto
// @author       lightbringer
// @noframes
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// @require      file:///Z:/nodejs/ghost-trapper/ghost-trapper.js
// @match        http://www.ghost-trappers.com/fb/*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

My ghost-trapper.js

class GhostTrapper {
  constructor() {
    // do stuff
  }
  
  hunt() {
    if (!$('#huntBtn').hasClass('disabled')) { 
      $('#huntBtn').trigger('click'); 
    }
  }
  
  run() {
    setTimeout(this.hunt, 3000);
  }
}


var gt = new GhostTrapper();
gt.run();

 

Looking good, however, the script requires 2 files, one from jquery CDN. one from my local machine. And the speed is not very nice (took me a noticeable time before the hunt click happened).

I thought, why can’t I combine them into 1 file? I have experience in Webpack, so let’s try it out.

 

First I installed necessary packages

npm i --save jquery
npm i --save-dev webpack webpack-cli babel-core babel-loader babel-preset-env

Then I created webpack config file

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'ghost-trapper.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
};

Then I create a main file for webpack to point to.

// src/main.js 
import $ from 'jquery'; 
import GhostTrapper from './GhostTrapper'; 

const gt = new GhostTrapper(); 
gt.run();

 

After all this, I compile webpack config. And voilĂ , the bundle is ready for me to include into tampermonkey, and it runs exactly what I wanted.

From then on, I added multiple features to my automation tool. The ease of webpack’s watch mode really helps me during development, as I just need to refresh the page and the new code is already deployed.