If your server have implemented the SameSite cookie for security concerns, your frontend app running on localhost might be affected. SameSite cookie prevents the cookies from being sent in cross-site requests, to defend against CSRF attacks. It wound’t be an issue if you have control over the backend. You can start the server locally and make your frontend app consume to that resources. To make your localhost client app work, you need to request using a matched domain.

For instance your api endpoint is hosted like so

https://cat.io/api/auth/sign-in

You have to make the request from cat.io. …


Fact: The use of enum and tuple won’t improve your applications’ performances. The primary purpose of using it is for readability — for others to understand your codes better.

When to use Enum?

You have an external api that returns red, orange and green for a grade property and you would like to add more accurate meaning so that you make an alias for those values.

You use enum when you want to group similar item. Avoid enum when the values aren’t predictable and dynamic, eg. a list of records.

You might ask why not just use an object? …


Let’s talk about type inference

Image for post
Image for post
Photo by Laura Ockel on Unsplash

I think this is one of the most frequently asked questions by beginners in TypeScript. I found myself asking it, as I went straight to the official TypeScript docs to learn.

There’s a feature in typescript called type inference, where it guesses the type by the variable’s value.

For instance, you type out the type annotations manually for strings, numbers, objects, arrays, and functions like this:

const animal: string = ‘cat’const count: number = 5count animalObj: {} = {   name: ‘cat’,   count: 1}const animals: string[] = [‘cat’, ‘dog’, ‘bird’]const logAnimal: (i: number) => void = (i: number) => console.log(‘dog’) …


If you don’t care about reusability, you can write as much as duplicated code as you want. For instance, you saw a piece of UI that has similar styles or has common users’ event in other pages of your app, you copy and paste some code from somewhere and modify it to finish the task. That’s not a good practice.

We’re going to compare react hooks, render props and Hoc by solving the same yet easy problem.

The requirement is to create multiple counter components. Assume the first counter have a button to increase the count and the second counter need to have increment and decrement button.

Higher-Order Components (HOC)

This is how the counterHOC looks like

It’s easy to understand, the CounterHoc received a initCounter as default count. It has a local state which is the count, and 2 methods - increase and decrease. The CounterHoc received a component as an argument and return the composed component in the render. Meaning that you can do whatever you want before returning back the composed component, like changing the states in some of the lifecycle methods. …


A look at how we can test an async list

Image for post
Image for post
Photo by Jessica Lewis on Unsplash

A typical web app will surely have a list to be rendered. It can be a list of laptops, cars, movies, property, users, etc. Today, we’re going to look at how we can test an async list.

I started a repo using Create React App, here are three extra packages I used to do the job:

"@testing-library/react": "^8.0.4""axios": "^0.19.0""jest-dom": "^3.5.0"

Firstly, we have this component:

Which simply calls an API, fetches the data, and renders the user’s first name to the page. And when it’s fetching, we display “Loading…”

We have to set up Jest to mock axios. Simply create a folder __mocks__ in the src directory, we name the file axios.js


I want to share my experience working at startups after 4 years of hopping between 4 startups in Kuala Lumpur. This would benefit those who want to work in the startup environment, at least you can get a glance what it’s like and what to expect. It’s not just about flexible hours and bean bags..

Many people around me often ask this question: “Why do you keep changing jobs?”. When I said to them I always prefer to work at a startup they just don’t understand.

I tried to work in a more stable job aka the MNC, but I quit because of the slow pace and dull working environment. It’s a dream job for many, but I think I’m just too young to watch movies during office hours waiting for the decisions from top management. …


Make working with your database a lot easier

Image for post
Image for post
Photo by Tobias Fischer on Unsplash

I use mLab as a development server, so the setup is easy and fast for me to start development straight away. Once the development of my webapp is done, it’s time to set up a real MongoDB in a real server. I did this some years ago but that time, I was using one-click install by DigitalOcean, and this time I have to do it from scratch in an existing server.

Install MongoDB in your server

Finish the MongoDB installation by following the official documentation.

Create a DB and a user

Open the Mongo shell with:

mongo

Next, select a DB:

use yourDB 

Create a user and give them readWrite access to your DB. …


Before I found dokku, my typical frontend javascript webapp deployment would be

Firing up a server > install node.js > install git > setup nginx for the domain names > restart nginx > git clone your project > run npm install > npm run build > install and setup pm2 for monitoring > live

What if I’ve made some changes? I will…

SSH into the server > cd into the project directory > run git pull >npm install > npm run build > restart pm2 > live

I don’t want to do that over and over again.

I know there are a bunch of CI/CD tools out there like jenkin, bamboo, codeship etc but those tools are overkill for my pet projects or freelance stuff. …


Node v8 has a handy --inspectfeature where you can debug using breakpoint. This is great because console.log() debugging print many unnecessary stuff in the console.

Let’s see it in action, assume we have this index.js file and we have a simple reverse string function

function reverse(str) {
let reversed = ''
for(let char of str){
debugger;
reversed = char + reversed
}
return reversed
}
reverse('hello')

We want to see the value of char for each iteration. We can put a debbuger in our for of loop and run

node --inspect index.js

our terminal or console.

In debug mode, you can press c you let the breakpoint go forward. Assume we pressed twice to enter the second iteration of our loop, then we go into repl mode by typing repl

Then type str we will see the value of ‘e’ been printed.


We used to write codes in the old days:

var building = {   blocks: 10,
color: 'red'
}
var blocks = building.blocks
var color = building.color

Nothing wrong with that but we have 2 same words for blocks and color, that’s duplication. With Destructing you can do it with one line using object destructing:

const { blocks, color } = building

blocks will equal to 10 and the color is red.

Destructing works in array as well. …

Voon Ming Hann

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store