DEV Community: Melvin Liu

Get User Current Region With Geolocation API

Melvin Liu — Wed, 02 Nov 2022 08:21:20 +0000

Problem

A few weeks ago, one of my clients required me to implement geolocation detection on their site. They want to show different content and store user form submission to a different API endpoint depending on their location (ex: if a user is currently in the Singapore region, the site will show Singapore content only & POST the user form submission data to the Singapore endpoint). In this article I'll show different cases of handling this kind of feature.

Geolocation

Officially modern browsers already exposed their own native official geolocation feature (read this https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API), BUT ,since it is quite a hassle to set it up in the project, I found a great alternative which is https://geolocation-db.com/ that only require an API call

Geolocation-DB

NOTE:

ℹ️ If you open the home URL it will show 502 Bad Gateway, insted open https://geolocation-db.com/json/

https://geolocation-db.com/json/ will result in this :

{
  "country_code":"ID",
  "country_name":"Indonesia",
  "city":"Denpasar",
  "postal":null,
  "latitude": "coordinate",
  "longitude": "coordinate",
  "IPv4":"IP Address",
  "state":"Bali"
}

Usage

Since I will be using Javascript with axios, here is the function that I wrote to GET the endpoint result

// getLocation.js
import axios from "axios";

export const getLocation = async () => {
  const API_URL = `https://geolocation-db.com/json/`;
  const response = await axios.get(API_URL);

  return response.data;
};

To check whether the function/API works, you can utilize your favorite VPN 😏. You can manipulate it into a standalone library or include it in the component/customize it as a react hook (maybe useLocation hooks or something)

If you have any question feel free to ask in the comment section below ⬇️

Create and Publish Your Own NPM Package

Melvin Liu — Wed, 09 Mar 2022 09:18:44 +0000

Overview

You probably wonder how to create your npm package and let people use it easily with just a single command (npm install/yarn add). In this article, I'm going to show you how to publish your npm package, and test it locally before publishing it 🚀

Step 1: Create NPM account

Go to https://www.npmjs.com/ to create an account. After you have verified your npmjs account. Open your terminal and type:

npm login

Input your credentials (username, password, and email).

Step 2: Set Up a New NPM Package

Create a package.json by typing

npm init

With the following settings:

Package Name: The name of your package (Check the NPM website to see whether the name is available)
Version: 1.0.0
Description: This will appear on the NPM page so make it helpful for users
Entry Point: index.js
Test Command: You can leave this blank at the moment
GitHub Repository: If you have a GitHub repo for your module, then add it here. This will appear on the NPM page
Keywords: This will make it easier for developers to find your package
Author: Your name
License: ISC (This is the boilerplate license for open-source software)

Step 3: Create index.js

In this example, I'm going to use my package: discord-alert as an example (I create a discord alert npm package with javascript to send me a notification/message to discord when a certain event is triggered).

Create an index.js file that serves as as the main file or the main gateway for our package at the root of your project.

For our code, we are going to define an export default function that makes an HTTP request each time it's called.

// fetch api already introduced in Node v17 as experimental feature,
// hence we can use it without importing other dependency in the future
import fetch from "node-fetch";

export default function Notification(url, message) {
  fetch(url, {
    body: JSON.stringify({
      content: message,
    }),
    headers: {
      "Content-Type": "application/json",
    },
    method: "POST",
  })
    .then(function (res) {})
    .catch(function (res) {
      console.log(res);
    });
}

Step 4: Test The Package Locally

Before we publish our work, we need to make sure it "really works". Hence we need to test it locally first by using:

npm link your-package-name

This command will link your current app/project with the package that you have locally (let's say you have a project written in react, let's call it book-app-store, to test the discord-alert package, you can type npm link discord-alert, and use it locally to make sure whether it's work)

Step 5: Publish

Run

npm publish

and you will receive an email notification from npmjs that your package is already shipped 🥳

Note: npmjs and yarnpkg are somehow connected hence if you publish it to npm , it also shipped to yarn , read this for further information.

Hope it helps! ^^ Happy coding.

Send Message to Discord Server via Javascript

Melvin Liu — Thu, 03 Mar 2022 06:07:28 +0000

Problem

Recently I added a new feature to this site, which is a recommendation feature where people can sign in using either Github / Google credentials and give me their recommendation. Is it such a waste of time to keep checking on the page to see any new data, hence I think if each time user adds new data and the system notifies me it will be much more convenient? I choose discord instead of email, due to the simplicity of sending a message using a discord bot than using Gmail. Below are the steps!

Step 1: Create a Discord server

How to Create Discord Server

Step 2: Create a webhook in the server

Edit Channel -> Create Webhook -> Copy the webhook url (should look like this "https://discord.com/api/webhooks/{random_text_here}")

Step 3: Create a http request

There are several way to create a http request (fetch, axios, etc). In this example I'll be using a simple fetch request.



fetch("your_webhook_url", {
  body: JSON.stringify({
    content: `type your message here`,
  }),
  headers: {
    "Content-Type": "application/json",
  },
  method: "POST",
})
  .then(function (res) {
    console.log(res);
  })
  .catch(function (res) {
    console.log(res);
  });

Voila. All that you need is just a simple webhook URL. Each time you trigger the HTTP request it will send a message to your discord server via bot. I'm using it in my recommendation page.

Add comment system to your static site with Giscus

Melvin Liu — Mon, 07 Feb 2022 06:25:43 +0000

Problem

By default, you can't add a comment system to a static generated site unless you use a third party help. As a developer using GitHub API to give our personal site a comment system is something fun and sometimes useful to do.

Solution

There are two different option that you can choose , it's either giscus or utterances, the difference is that giscus utilize GitHub discussion API, while utterances utilize GitHub issues

Goal

In this post, I will share step-by-step how to utilize Giscus to give our Next.js site a comment system.

Step 1: Enable GitHub discussion

On GitHub.com, navigate to the main page of the repository.
Under your repository name, click ⚙️ Settings.
Under "Features", click Set up discussions.
Under "Start a new discussion," edit the template to align with the resources and tone you want to set for your community.
Click Start discussion.

Step 2: Enable Giscus

Head to https://github.com/apps/giscus and enable giscus in your desired repository

Step 3: Get your repository API key

You can access your GitHub details via GitHub GraphQL API , you can access it here and then login with your GitHub account.


query { 
  repository(owner: "melvnl", name:"melvinliu.com"){
    id
    discussionCategories(first:10) {
      edges {
        node {
          id
          name
        }
      }
    }
  }
}

Basically, we are just making a request via GraphQL query to GitHub API to fetch our repository id, and our list of ten first discussion categories and its details (id, and name). The result will be something like this.


{
  "data": {
    "repository": {
      "id": "R_kgDOGjYtbQ",
      "discussionCategories": {
        "edges": [
          {
            "node": {
              "id": "DIC_kwDOGjYtbc4CA_TR",
              "name": "Announcements"
            }
          },
          {
            "node": {
              "id": "DIC_kwDOGjYtbc4CA_TS",
              "name": "General"
            }
          },
          {
            "node": {
              "id": "DIC_kwDOGjYtbc4CA_TU",
              "name": "Ideas"
            }
          },
          {
            "node": {
              "id": "DIC_kwDOGjYtbc4CA_TT",
              "name": "Q&A"
            }
          },
          {
            "node": {
              "id": "DIC_kwDOGjYtbc4CA_TV",
              "name": "Show and tell"
            }
          }
        ]
      }
    }
  }
}

Step 4: Install @giscus/react package

yarn add @giscus/react
or
npm i @giscus/react

Step 5: Import and use Giscus component


import { Giscus } from "@giscus/react";

export default function Comment() {
  return (
    <Giscus
      repo="melvnl/melvinliu.com"
      repoId="R_kgDOGjYtbQ"
      category="General"
      categoryId="DIC_kwDOGjYtbc4CA_TS"
      mapping="pathname"
      reactionsEnabled="0"
      emitMetadata="0"
      theme="dark"
    />
  );
}

It will render a GitHub comment widget where other developer can sign in using their GitHub account to comment through GitHub Discussion API.

That's it folks! Hope this tutorial help, and happy hacking!

Reference:

https://giscus.app/
https://graphql.org/
https://www.freecodecamp.org/news/graphql-vs-rest-api/

You can find me on

Twitter: https://twitter.com/mlven23
GitHub: https://github.com/melvnl
LinkedIn: https://www.linkedin.com/in/melvin-liu/

Why Moving to Linux is My Best Decision in 2021

Melvin Liu — Fri, 10 Dec 2021 01:35:35 +0000

Backstory

I was lucky enough to be accepted as an intern at the first unicorn in my country that goes IPO for software engineer position, as a large tech e-commerce company that exist for 11 years the technology used behind must be quite mature, and more complex than usual (micro-frontend, micro-services, different virtual private network to access certain repository, private npm library, etc.).

I've been using windows since my first day of college as a computer science student, and I should say that there is a few moment where I'm really stressed spending hours setting up the development environment (PATH, and mostly adjusting incompatible library). But I hit my breaking point a few weeks ago, due to incompatibility with my company codebase that is developed in UNIX operating system (like Mac or Linux), here's the list of my main problem :

Incompatible or missing packages, for instance this and this
Failed to install dependencies due to node-gyp error
Illegal file name in windows, but allowed in UNIX
A few more

My friend keep suggesting me to implement dual boot, but I'm quite afraid that my machine will break down, or something will go wrong during the installation since I'm using a quite old machine (ASUS x550j from 2016). Hence I'm looking for alternative solutions.

Trying WSL (Windows Subsystem for Linux)

I still want to play valorant during my work hours #oops. Hence I tried WSL, unfortunately I had a difficult time setting up openvpn in WSL due to certain networking issue. Without vpn I couldn't run the repository that I was working on. After a few cup of coffees, I finally give in to dual boot.

Using Dual Booth

In the end , I decided to implement dual boot in my machine. I'm following this tutorial from youtube to install Ubuntu along with my windows OS. Now, why Ubuntu ? why not arch-Linux? or other cool distros? Simple, I'm not a hardcore Linux fanboy, and there is this class in my 4th semester that teach terminal with Ubuntu, hence I've previous familiarity.

What is like after a week using Linux

Here is few things that I noticed:

My laptop's fan is much calmer (Usually it often make annoying noises, especially when I'm using an IDE)
I also noticed that when I'm idle, Linux doesn't eat as much RAM as Windows does.
and the most important is that I haven't face any incompatibility problem so far

Conclusion

As an engineer, I highly suggest you to move from windows to UNIX based like Linux or Mac as soon as you can. Here ! Have some Linus Trovalds Meme!.

Escape If-else hell in Javascript

Melvin Liu — Sun, 31 Oct 2021 06:52:01 +0000

Backstory / Problem

Few months ago, there is a certain case where I need to calculate the percentage of input file in each form that user has filled (It was for a react native app that take user feedback by filling several form that represent different category such as personal information form, the user property information, etc.), the system flow look like this in a nutshell.

The first approach was using if/else statement to handle the conditional logic. Although it might be a good idea for one or two conditions here and there, using multiple if-else statements chained together will make your code look very ugly, and less readable, and for my case there is probably more than 30 if-else statements in scattered in 5 different forms. Not gonna lie, it look very simple and straight to the point, yet painful to read.

Also, when my peer reviewing the PR, he refers something humorous in reddit about the code behind yandere simulator

As you can see, it is a hell of if-else statements.

The solution

The solution will be vary, depends on your case / need. But most likely the thing that you need is object. As for instance, let's say you need to return a string based on a key

function checkStatus(status) {
    if (status.toLowerCase() === 'available') {
        return `The user is currently available`
    } else if (status.toLowerCase() === 'busy') {
        return `The user is currently busy`
    } else if (status.toLowerCase() === 'away') {
        return `The user is away from keyboard`
    } else if (status.toLowerCase() === 'breaktime') {
        return `The user is having a good lunch`
    }
}

Just imagine if you have other 20+ status type ? Will you be comfortable reading or writing that much line of if-else statements?

Instead we can use object or Map object to make a sort of table consist of paired key and value to look up to.

function checkStatus(status){
const statusList = {
   available: 'The user is currently available',
   busy: 'The user is currently busy',
   away: 'The user is currently away from keyboard',
   breaktime: 'The user is currently having a good lunc'
}

return statusList[status]; //console.log(statusList[status])
}

This can be also applied in algorithm leetcode-type-of-question to save you up some time from writing repeated if-else statement over and over again.

Thanks for reading!!!
Have a good day, and remember that project you always think about won't code itself 🤪.

Why You Should Use NVM (Node Version Manager) and How to Install It

Melvin Liu — Sat, 23 Oct 2021 11:51:34 +0000

Backstory

Have you ever experience difficulties in software development due to unsupported / different version ? Recently I was facing the same issue. The issue was a different Node.js version from my machine (Node v14.18.0) with my company project repository (Node v10 required). The first solution that instantly pop up in my mind was "I think downgrade my current node by uninstalling it will do the work", But what if you need another version for another project in the near future? Do you want to endure the pain of installing and uninstalling Node.js every time you need a different version of it ?

Node Version Manager

NVM is a version manager for Node.js, it allows you to quickly install and use different versions of node via the command line.

Let's head to the tutorial !

Instaling Node Version Manager Guide

If you happen to use UNIX, macOS, or WSL (Window Sub-system for Linux), you can install and read the official documentation here

If you happen to use Windows you can install it at NVM for windows which is developed by Corey Butler, download the nvm-setup.zip file.

Important Note

It is stated that you need to uninstall pre-existing node version, but based on my experience it is not necessary to do so.

After the installation you can open your command prompt and check whether nvm is recognized

C:\Users\YourUsername>nvm -v

Running version 1.1.8.

If nvm is not recognized as internal command or external command, try to re-open your command prompt.

Then, You can type nvm list in order to see list of Node.js version on your machine.

C:\Users\YourUsername>nvm list

  * 14.18.0 (Currently using 64-bit executable)
    10.18.0

If you don't see your desired Node.js version in the list, you can use nvm install command, for example if you want Node.js version 8, you can type nvm install 8.0.0

To use the installed Node.js version you can simply type nvm use 8.0.0

Note

If you see an error message exit status 5: Access is denied., It is due to admin privilege issue. To solve it you can simply run your command prompt as administrator.

Thank you for your time reading this short article / tutorial about Node Version Manager, hope it helps! and Have a great day.

How to Upload a File (Image/Pdf/Zip/etc) to Strapi with React

Melvin Liu — Wed, 13 Oct 2021 07:52:00 +0000

When I first started using Strapi as a CMS for one of my client, to give them a little freedom to manage their website content, the hardest part of the development was when I need to build a feature where there is a contact form which people can add and send an attachment (pdf/zip/image/etc.)

If I'm not mistaken, there is no official documentation regarding this on Strapi website, but after a few research, I discovered the step to do it.

1. Enable user permission to upload

Strapi has an upload plugin, that can enable user to upload file to strapi, make sure you check the upload checklist like the image below)

You can find the section in your-url.com/admin/settings/users-permissions/roles

2. Send file to Strapi

First, you need to send your file first to Strapi before submit the entire form data. Later, you can link the file and your form data using the id of the file that has been uploaded. For the code example I'm using axios to fetch the request.



const [selectedFile, setSelectedFile] = useState(null);

let file = new FormData();
file.append("files", selectedFile);

axios.post("your-strapi-url/upload",file)
    .then((response) => {
      const fileId = response.data[0].id

      })
      .catch((error)=>{
      //handle error
  })

3. Send the form data to Strapi

You can use React useState or other method to store your form value, then create a FormData based on those value. Then the whole code will probably look like this



let formData = new FormData();
    formData.append("fullName", name);
    formData.append("companyName", company);
    formData.append("email", email);
    formData.append("phoneNumber", phone);
    formData.append("team", phone);
    formData.append("files", selectedFile);
    formData.append("message", message);

axios.post("your-strapi-url/upload",file)
      .then((response) => {
        const fileId = response.data[0].id

        axios({
            method: "post",
            url: "your-strapi-url/contact-submissions",
            data:{
                    fullName: name,
                    companyName: company,
                    email: email,
                    phoneNumber: phone,
                    team: team,
                    attachments: fileId,
                    message: message,
                }
            })
        .then(({ data }) => {
            setResponse(data);
        })
        .catch((error) => {
        //handle error
        });

        })
        .catch((error)=>{
        //handle error
    })

Since we have uploaded the file before the whole data, hence on the second request we only need to send the Strapi fileId that is attached with the file that we have uploaded previously.

Note: the endpoint "contact-submissions" is my own custom endpoint, where my client can see the data that their costumer has sent through the contact form.

I hope this short tutorial / article is helpful. Have a good day!