DEV Community: Thanh Tien Phat Nguyen

Publish your first package on npm!

Thanh Tien Phat Nguyen — Sun, 06 Dec 2020 04:51:04 +0000

Introduction

This week we are asked to release our work by choosing a release method. To make our work, I decided to release my very first package on NPM. You can also check it out at here.

Why NPM?

There are several reasons why I decided to choose NPM as my release method. Firstly, NPM is super popular to the developers all around the world. Therefore, publishing my package on the site would be a good idea. Moreover, since all of the dependencies used in my projects are published on NPM, it gives me a solid reason to go with NPM

How?

To publish my first ever package on NPM, these are the steps that I took at the time:

You need to create an account on npm first.
After creating your first account, navigate to the root folder of your project. At the terminal, use this command to login:

npm login

Next, create a package.json file in your folder.

npm init

You can change the name and the version of your package inside your package.json file. Below is what I did in my file:

{
  "name": "link-checker-tool",
  "version": "1.0.2",
  "description": "A tool used to check whether an URL is available or not",
  "bin": {
    "lct": "/link-checker.js"
  },
  "keywords": [
    "cli"
  ],
  "scripts": {
    ...
  },
  "preferGlobal": true,
  "author": "Thanh Tien Phat Nguyen",
  "license": "ISC",
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

To make it easy for other people understand how to use your package, update your README.md document which allows users to have some basic knowledge about your package. Below is a piece of my README.md, you can check the full version at here.

Lastly, publish your package by using this command:

npm publish

If you get the message below, your package is published successfully.

How to use my package?

My package this is an CLI that checks if a url is available. Some of the features that I have added to this package is:

Check and print all the good, bad and unknown links in a file.
Read multiple files at once.
Check the availability of an URL.
Give the URL to an archived version of a website.
Output JSON format of a URL entered.

To install my package, please use the command

npm install link-checker-tool

npm install -g link-checker-tool

For more usages of my package, you can read my whole document for more information.

What I learn from this week lab

How to release a package
How to improve the workflow by tagging my release.

Unit testing your code!

Thanh Tien Phat Nguyen — Sat, 28 Nov 2020 04:25:15 +0000

Introduction

This week, we embarked on how to create a testing units and workflow using Github Actions. The testing framework I choose is "Jest" because of its popularity and simplicity for using.

How to integrate "Jest"

Firstly, we need to install by using

npm install --save-dev jest

In package.json, add the following lines:

{
  "scripts": {
    "test": "jest"
  }
}

We can create the first test file by using this naming convention checkFunctions.test.js
We can easily run the test by using:

npm run test

What did I learn while writing my test case:

Well, since my test case is pretty long. Thus, I highly recommend you to have a look at my test file.

I have learned how to write a test unit that we can compare right from console.log
I have learned to consider many options that could happen for my functions

Add Continuous Integration

Github Actions is a CI that is highly recommended. Therefore, I would like to introduce a bit about the way we set it up.
Firstly, we need to create a template to the .github/workflows directory of your repository.
This is how the YML file looks like:

name: Node.js CI

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [8.x, 10.x, 12.x]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm install
    - run: npm run build --if-present
    - run: npm test
      env:
        CI: true

A CI is perfect when we want to automating all our test in a large project. However, if someone's change might break the tests, there's no way we could merge them until their changes are fixed. This way help us to save tons of resource.

Learning from the process:

Well, this week assignment is highly educational. There are several things I could learn from the lab:

How to set up a CI
How to write a simple unit test
How to set up a code coverage analysis so that I could write more test to cover the aspects that I might miss of a function.
How to fix my functions when there are bugs while testing.

A project contribution: unit test!

Thanh Tien Phat Nguyen — Thu, 19 Nov 2020 04:27:10 +0000

Introduction

This time I'm working on creating a minor unit test for a algorithm-gathering repo. algorithmUse is a repo created for the purpose to embark on Data Structures and Algorithm. This repo contains multiple popular algorithms written in various languages.

What did I do?

To encourage people to get involved to open source. The owner of the repo open an issue in which requested contribution to create unit tests for their algorithms.

How did I do

I, myself, also want to contribute. Therefore, I started to write a test for their binary search algorithm. My test is basically based on:

Return -1 if an array is empty
Return -1 if the to-be-found element is even in an odd array
Return the 0 if the element is found in the first position of an sorted array
Return the index of an element in an array.
Return middle - 1 if the element is found in the middle of the array.

Conclusion

Writing test helps us to have big picture when it comes to designing an algorithm.
You can also check my contribution at here

Looking at internal details of a Telescope!

Thanh Tien Phat Nguyen — Tue, 17 Nov 2020 17:46:31 +0000

Introduction

This week, I'm working on an issue on Telescope. You might ask what Telescope is? Telescope is a tool written by Seneca College students and used to keep track of the process of student weekly by fetching their blog post on multiple sites such as: https://dev.to/, http://medium.com/,...

What is the issue?

In certain posts, pictures are scaled up beyond their natural size. Consequently, the quality of the pictures is reduced and make users uncomfortable. We have to find a way to fix it.

How to fix it?

I realized this problem only happens to those posts fetched from https://www.blogger.com/ because the images' width is not fully displayed in the original post.

And in the css file of the post, I have seen something like:

.telescope-post-content img {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  width: 100%;
}

Due to width: 100%, the pictures may get scaled beyond their natural size. To fix it, I have set width: auto and display: block to display width as their natural size. And if the picture's width is not fully displayed, it will be centered

.telescope-post-content img {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  width: auto;
  display: block;
}

Result after change:

Challenges while fixing this issue

The only difficulty I encountered while fixing this issue is the amount of time it takes to set up a proper environment to run the app. You can check my PR at here to have a closer look at the changes I made.

Enhance your code readability with Prettier and

Thanh Tien Phat Nguyen — Sat, 14 Nov 2020 22:10:22 +0000

Why should we add tools to our editor?

Enhance work quality.
Improve work efficiency
Avoid mistakes while coding so that we could save time from fixing bugs

Prettier and ESLint

Prettier is a code formatter which supports JS language. A code formatter helps improve code readability so that our code would be cleaner and easier to understand. Moreover, Prettier can integrate with most editors. By which, I mean it is commonly used by many programmers.

ESLint is a linter that automatically detects any silly mistakes we could make while coding. ESLint provides the ability to quickly find problems in our code. Also, it can help fix them automatically. Furthermore, to make it more flexible developers could customize the rules for ESLint.

How to set up

One of the reasons why I decided to choose those two is because they are both easy to set up which I'm about to show you.

Set up Prettier by using commands

Install Prettier to your local machine

npm install --save-dev --save-exact prettier

Create an empty config file

echo {}> .prettierrc.json

Create an .prettierignore file to ignore what files we don't want to format. Normally, the content of this file is based on the one of .gitignore file.
To format all files with Prettier

npx prettier --write .

To format a specific file or a directory

npx prettier --write ./src

To read more about the installation of Prettier, please get access at here.

Set up Prettier by using commands

To install ESLint at your local machine:

npm install eslint --save-dev

Next, set up a configuration file:

npx eslint --init

To run ESLint for all files:

npx eslint .

To run ESLint for a specific file:

npx eslint filename

To read more about the installation of ESLint, please get access at here.

Before and after using Prettier

Below is a block of code before and after using Prettier so that we can see what difference it can make.

Before:

const {checkURL, archivedURL, jsonResult} = require('../urlHelper/urlFunctions')     
const {fileInteraction} = require('../readFiles/fileInteractions')    
const {telescopeCheck} = require('../apiHandler/apiHandler')

After:

const {
  checkURL,
  archivedURL,
  jsonResult,
} = require("../urlHelper/urlFunctions");
const { fileInteraction } = require("../readFiles/fileInteractions");
const { telescopeCheck } = require("../apiHandler/apiHandler");

As we can see, after being formatted by Prettier my code is more organized and readable.

How ESLint improves my code

Usually, when writing a loop in JS, I don't declare a iterator instead I just use it like the example below:

for (i = 0; i < response.data.length; i++) {
    ...
      }

In VSCode I can compile and run without getting any errors. However, this is one of the silly mistakes I make when coding. Thanks to ESLint I could learn to realize my behavior and fix it.

Automate your tools

To automate Prettier and ESLint please read at my CONTRIBUTING.md

What I learn from this week assignment

Using tools like Prettier and ESLint helps improve my code quality a lot.
How to install and integrate them to my editor (VS Code).

Check Telescope posts' availability

Thanh Tien Phat Nguyen — Mon, 09 Nov 2020 18:07:34 +0000

Introduction

This week, I was assigned to add a new feature to check if a post from Telescope is available for my link checker CLI. Before digging any deeper, I would like to introduce a bit about Telescope.

It enables us to keep track of students' work through blog posts written by Seneca College students. By fetching data from multiple blogging sites such as Medium, Dev, WordPress,.. all blog posts of students will be automatically updated to the website whenever a new post is published.

Set up the environment to work with Telescope.

To run Telescope locally, it asks us to put extra effort into setting up an appropriate environment. I am required to install WSL2, Redis, Elasticsearch, and Docker before starting the work. This is probably the most challenging part of the assignment this week. Therefore, I did counter some troubles while setting up the environment.

Elasticsearch not running after installation could be a thing. I had to make some diagnoses and realized my JDK was not compatible. It took me a considerable amount of time to fix it. Or I got trouble while installing the Linux subsystem since my disk was low in storage. However, these problems could be solved by doing research on Google. The point is you have to be resilient enough.

Coding part

The coding part doesn't require a lot of work. I created an API handler that manages to make a GET request to the local Telescope API, and I check the availability of each URL response by the API.

const telescopeCheck = (api) => {
    axios.get(api)
    .then(response => {
        console.log("CONNECT TO TELESCOPE SUCCESSFULLY!!!");
        console.log("====================================")

        for (i = 0; i < response.data.length; i++)
        {
            checkURL(api+`/${response.data[i].id}`);
        }
    })
    .catch(err => console.log("Cannot connect to local API, please double check to make sure the API is initiated!!!"))
}

Gist it done

Gist is a quick and instant tool that enables us to share code snippets without unnecessary work. To get technical notes between two commits, we simply use the command git diff old_commit...new_commit.

I am still not satisfied with the code snippets above. Therefore, any recommendation will be welcome. Thank you for spending your time reading my blog.

Hacktoberfest! Last PR! Dutch National Flag~

Thanh Tien Phat Nguyen — Mon, 02 Nov 2020 17:20:23 +0000

Every party must come to an end. This is the last PR that I made for Hacktoberfest. For the first time that I realize how fun it was. To be honest, each pull request literally pulls you up.

My last PR is not something big. I was just doing something ordinary my self. I worked on Dutch National Flag problem. The problem is there is an array consisting only 0, 1 and 2. How to sort the array in the linear time complexity.

Well, the problem did raise the curiosity in my head which makes me want to try it. Here is my solution:

 public static void SortingArray(int a[]){
        // Count the number of zero, one
        int zeros, ones, k;
        zeros = ones = k = 0;

        for (int i = 0; i < a.length ; i++){
            if (a[i] == 0 )
            {
                zeros++;
            }
            if (a[i] == 1 )
            {
                ones++;
            }
        }

        // fill zero in the first positions of the array
        while(zeros-- != 0){
            a[k++] = 0;
        }

        //fill one in the next empty position
        while (ones-- != 0){
            a[k++] = 1;
        }

        // fill twos in the left positions
        while (k < a.length){
            a[k++] = 2;
        }
        System.out.println(Arrays.toString(a));

    }

I would like to explain a bit about my way to approach the problem. To sort the array that only contains 0, 1 and 2, I first count the number of 0 and 1 in that array. Then I over-write the existing array of which the n first positions are filled with n zeros. The next m positions are filled with m ones. The left positions are filled with twos. Therefore, the array is sorted in linear time complexity.

My last PR is not something significant but I would like to share it to you guys. Every git push I have made is a push for me to get out of my comfort zone and started to be more proactive myself.

Hacktoberfest! Level 3!

Thanh Tien Phat Nguyen — Fri, 30 Oct 2020 06:03:35 +0000

If you have read my previous posts, I am celebrating Hacktoberfest which is about to end in a couple of days. This post is about my third PR. In which, I helped translate README.md into my first language. You can check out my PR.

issue-collab is a project that helps people who want to get involved with open source but got no ideas how to start. It allows people to find issues without getting overwhelmed. I have to admit I find it one of the most useful projects during Hacktoberfest.

Back to what I was working on. I am fully aware of the fact that translating is not as big as fixing a bug or something. But in comparison of my previous PR in which I only helped translate a minor file, I do make a progress this time.

The more I am working with open source, the more I am enjoying it. It has given me a sense of contribution which helps build my self confidence since I am kind of introverted while working with other people due to my lack of experience.

But whatever, thanks you guys for spending time my thoughts. I truly appreciate. Happy Coding!!!!

Hacktoberfest! My second PR!

Thanh Tien Phat Nguyen — Fri, 30 Oct 2020 01:51:01 +0000

As exciting as it is, Hacktoberfest has been held a huge interest in me even though this is the first time I have been a part of it. It takes me a decent amount of time to find what to do next for my 2nd PR since there are so many options on the markets. And we all know that the more options we have, the indecisive we might be.

Therefore, picking a project to work on is always the first difficulties I have to encounter whenever I want to contribute for open source. Fortunately, I have found a repo that held my interest. It was Survol, a browser extension that allows user to preview a link before clicking.

And can you guess what I can contribute in the project? Well, the maintainer need to be more user friendly so that they need help translate their work into another language. Okay it is not coding but I'll take my chance any way.

I used to find it difficult to comprehend English. So, I know how challenging it could be for those whose first language is not English to interact with a program. And I am proud that I could make a minor change that help improve it. I make a minor contribution that add support for Vietnamese language.

Even though the change is not significant, I am happy that I'm starting to get more involved with open source. I do hope I can really make something bigger in the future even after Hacktoberfest.

Clean your code by using Git Rebase!

Thanh Tien Phat Nguyen — Sat, 24 Oct 2020 07:37:26 +0000

Introduction

As usual, my assignment this week is to keep improving my code's readability. In my previous commits, I always keeps all my functions under one entry point file. As a result, it would be such a struggle for me and other to maintain and understand my code efficiently.

What I do

Improvements

I am fully aware of the inconvenience that I would end up if I don't make any improvements. So there are some changes:

Move all functions to separate helper files

All functions working with URLs will be moved to an URLs helper file.
All functions interacting with files will be moved to an fileInteraction file.

Whenever I feel like using any of these functions above I would easily import it from the files. Therefore, my code structure would be way more organized and easier to maintain if there is any problem.

Reduce code duplication

All blocks of code that is used multiple times will be convert into a function. So, I can reuse them without rewriting them over again.

Squash all commits into one by using `git rebase`

Difficulties

Sometimes we will be in trouble if I forget to import the functions after separating them since all of them are tightly connected to each other. By which, I mean fileInteraction functions sometimes call URL helper functions and we have to import them properly in order to make our app run smoothly.

Conclusion

Knowing what to do to enhance your code performance could give you chill. However, I know so clearly that my work is still flawed and I am more than welcome if any one can suggest any improvements I could make. You could check my latest commit at c22a005.

Hacktoberfest! The first PR!

Thanh Tien Phat Nguyen — Thu, 22 Oct 2020 04:14:21 +0000

Introduction

Hacktoberfest is the biggest festival for opensource programmer which takes place in October every year. As a first-timer, I felt very excited to be a part of this year Hacktoberfest. Therefore, I would like to write about my experience after making the first PR.

Difficulties

Well, since this is my first time, I was kind of overwhelmed and strange with the number of projects there are on Github. So, I was looking for something which is:

Not too simple

There are plenty of repos on Github that only ask me to add my name for my first PR. However, that is not what I was looking for since I don't want to put so little effort once I start working.

Not too overwhelming

As a first-timer, due to the lack of experience, I don't want to put myself in a difficult situation which I cannot finish what I start.

Looking for the right repo to work on seems to be the first difficulties that I encountered.

The repo I have chosen

Thanks to the recommendation of a classmate, I found a perfect repo for me to work on which is algo_ds_101. This is a collection of algorithms and data structures code written in different programming languages.

Issue that I worked on

This repo is perfect for me to work on since it's not too complicated and I don't have to put so little effort in the problem.

I started to make approach to issue 842 which asked to write an algorithm that counts the number of divisible pair in a array.

What did I need to do to prepare for the fix?

There are not so much requirements for the issue. I only need to write a block of code in JavaScript that can count the number of divisible pair in an array.
Let me explain a little bit about the requirement:
if there is an array arr[] = {1, 2, 3} then the two pairs are (1, 2) and (1, 3).

My pull request

See, the requirement is not so hard. I believe with the basic knowledge of programming, any of us could solve this problem easily. You can have a look at my pull request at my first full request.

    for (let i = 0; i < n; i++) // iterate through the array from i = 0
    {
        for (let j = i + 1; j < n; j++) // iterate through the array start from the element next to arr[i]
        {
            if (
                (arr[i] % arr[j] == 0)  
                || (arr[j] % arr[i] == 0)
                )
                {
                    count++; // increase count by 1, if it is under the condition
                }
        }
    }
    return count;    
}
let arr = [2,3,5,8,9];
console.log(DivisiblePairCount(arr, arr.length));

First I iterate the array from i = 0.
I put a nested loop which starts from j = i + 1 in the previous loop. *Therefore, whenever an element at j is divided by an element at i or vice versa, count will increase by 1.

Conclusion

Well, my first PR is as simple as it is. But it is a huge encouragement since it gives me a sense of achievement so that I could keep going until the end of Hacktoberfest.

Remotes, Commits and Merges! Is that a long distance relationship?

Thanh Tien Phat Nguyen — Mon, 19 Oct 2020 03:36:23 +0000

This week has been such a hectic whirlwind for me. Stacks of assignments from different classes are waiting to be finished by me. But I still find it enjoying while working with opensource. Even though sometimes I find committing to others (repo) extremely difficult but I still have a butterflies while working. Maybe I'm in love...

Ideas of new feature

Users want to be able to run our link checker tools and be able to include an extra argument, a file of URL patterns to be ignored.
This week's feature will add the ability to exclude URLs from our check based on a URL pattern file.

What I did

I filed an issue and forked the repo from Pedro's github

A forked repo allows me to work as an remote and modify the code as I please without interfering the original repo.

Create a `readIgnoredFile`

const readIgnoreFiles = async (filePath) => {
  const urlRegex = /(((http|https):\/\/)|(www\.))([\w+\-&@`~#$%^*.=\/?:]+)/gi;
  let urlList = [];

  const data = await fs.promises.readFile(filePath, "utf8");

  let check = data.startsWith("#")
  if (check) {
    urlList = data.toLowerCase().match(urlRegex);
    urlList = Array.from(new Set(urlList));
    if (urlList.length != 0)
    {
      return urlList;
    }
    else{
      let message = "There is no valid URLs in the file."
      return message;
    }
  }
  else{
    let message = "Your ignore test file is not valid."
    return message;
  }

}

The code above will validate the file. If there is no comment which starts with "#", the file is invalid.
Also, it will return any url grabbed from the "IgnoredTestFile".

Create a `removeAnyURLsStartwith` function

const removeAnyURLsStartwith = (urls, urls_condition) => {
  for (let i = 0; i < urls_condition.length; i++){
    for (let j = 0; j < urls.length; j++)
    {
      if (urls[j].startsWith(urls_condition[i]))
      {
        urls.splice(j,1);
      }
    }
  }
  return urls;
}

This function will remove the URL that starts with any URL declared in urls_condition. For example:
https://www.google.com/ is in urls_condition
https://www.google.com/search?... will be eliminated since it starts with https://www.google.com/

Push my work to the forked repo and ask for `merge` from the repo owner

After pushing my work to the branch I created, asking for feedback and merge from the repo owner is necessary.

Difficulties while working

On the contributor's side

There are times I find it difficult to understand other's code

Even the code was written by me, after a while it still takes time for me understand it. Let alone other's code.

On the repo owner's side

Manually merge branch worked by others

The branch worked by others sometimes take years to resolve conflict.

Conclusion

To be honest, working with others' projects is actually interesting.
I can learn from the way they code, organize their structure. Also, I can learn how people manage to approach a specific problem while I have a different one. It's like looking from different perspectives.
Lastly, COMMUNICATION! COMMUNICATION! COMMUNICATION! That makes everything work.

DEV Community: Thanh Tien Phat Nguyen

Publish your first package on npm!

Introduction

Why NPM?

How?

How to use my package?

To install my package, please use the command

What I learn from this week lab

Unit testing your code!

Introduction

How to integrate "Jest"

What did I learn while writing my test case:

Add Continuous Integration

Learning from the process:

A project contribution: unit test!

Introduction

What did I do?

How did I do

Conclusion

Looking at internal details of a Telescope!

Introduction

What is the issue?

How to fix it?

Challenges while fixing this issue

Enhance your code readability with Prettier and

Why should we add tools to our editor?

Prettier and ESLint

How to set up

Set up Prettier by using commands

Set up Prettier by using commands

Before and after using Prettier

How ESLint improves my code

Automate your tools

What I learn from this week assignment

Check Telescope posts' availability

Introduction

Set up the environment to work with Telescope.

Coding part

Gist it done

Hacktoberfest! Last PR! Dutch National Flag~

Hacktoberfest! Level 3!

Hacktoberfest! My second PR!

Clean your code by using Git Rebase!

Introduction

What I do

Improvements

Move all functions to separate helper files

Reduce code duplication

Squash all commits into one by using git rebase

Difficulties

Conclusion

Hacktoberfest! The first PR!

Introduction

Difficulties

Not too simple

Not too overwhelming

The repo I have chosen

Issue that I worked on

What did I need to do to prepare for the fix?

My pull request

Conclusion

Remotes, Commits and Merges! Is that a long distance relationship?

Ideas of new feature

What I did

I filed an issue and forked the repo from Pedro's github

Create a readIgnoredFile

Create a removeAnyURLsStartwith function

Push my work to the forked repo and ask for merge from the repo owner

Difficulties while working

On the contributor's side

There are times I find it difficult to understand other's code

On the repo owner's side

Manually merge branch worked by others

Conclusion

Squash all commits into one by using `git rebase`

Create a `readIgnoredFile`

Create a `removeAnyURLsStartwith` function

Push my work to the forked repo and ask for `merge` from the repo owner