Opinionated comments, double standards, and more

Hands holding up painting of frowning face
Hands holding up painting of frowning face
Photo by Andre Hunter on Unsplash.

Firstly, I want to clarify the title. I don’t hate code review when it’s done correctly. In fact, I love reviewing code and being reviewed. When code review is conducted in a good team environment with supportive colleagues and reasonable standards, it’s a pleasant learning experience that reduces bugs and maintains code base quality.

But in reality, code review is often a stressful exercise. Sometimes, toxic comments from a reviewer can cause constant arguments and a breakdown in team communication. Those are the times when I (and many developers I know) hate code review.

Here are a few things that…


In this article, I will talk about how to use the Decorator pattern to consume REST API in Angular 6.

HttpClient Service

Consuming REST API data using HttpClient in Angular is the most common way of connecting an Angular App to the back end services. HttpClient Service handles the JSON data parsing under the cover and return a Rxjs observable. It can also support generic typing functionality, for example, in the code snippet below, getAllTodos will return a observable with a array of objects that match the type “TodoModel”.

constructor(private http: HttpClient) {}getAllTodos(): Observable<TodoModel[]> {
return this.http.get<TodoModel[]>(this.url);
}

It is very…


One reason I really like TypeScript is its Type system, it is practical and feature rich. Applying the types in right use cases can make our code cleaner and easier to maintain.

The purpose of this article is to share an example of code refactoring with type script discriminated union type and Generics.

The original code

This piece of code is to represent user roles and feature/permissions mapping, to build a user access matrix in an Angular App.


Photo by James Harrison on Unsplash

Angular state management is the core of any Angular App, but there is no one-size-fits-all solution. Although Ngrx is the most popular Angular state management framework, its excessive boilerplate codes make it overkill for many small to middle-size apps.

This article talks about a simple but effective Angular state management pattern using observable data service. What I want to achieve is to have the following key benefits by using a concept similar to Redux pattern.

  • Single source of truth
  • Unidirectional data flow
  • Immutable state at the component level

A demo Hero application is available as an example of how to…


Everything you want to know about the Record utility type

The word “Bold” in a book
The word “Bold” in a book
Photo by Jeremy Bishop on Unsplash.

Record is one of the TypeScript utility types and has been available out of the box since version 2.1.

I have to admit that I was a little confused when I read the official definition for the first time:

Record<Keys,Type>

Constructs an object type whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type.” — TypeScript’s documentation

At face value, it says the Record type creates an object type that has properties of type Keys with corresponding values of type Type. But a similar…


They are easily forgotten but make a big difference

After working with NodeJs for more than two years, I really enjoy the efficiency, rich features and powerful tools available. However, as a Developer, we tend to immerse ourselves in the world of coding details and forget some basic issues that can impact an application’s performance and security.

1) Enable gzip compression

It’s surprising how often gzip is forgotten to be turned on. Turning on gzip compression can make your App much faster by reducing the size of http calls up to 10 times.

How to verify whether it’s enabled? Just open the App in Chrome, open chrome Devtools, select “networks” tab, then look…


As one of the common creation patterns, the factory pattern makes application loose coupling by hiding the implementation details from client code using interface. It leaves the creation of object instance to the factory implementation. The purpose of this article is to show how to improve the factory “creator” with Type script type map.

Users Factory Implementation

We’ll be using a typical example of a factory that creates different types of users: Manager and Developer for the sake of simplicity. You can imagine there will be much more types in a real project.

Firstly, let’s define our Manager and Developer classes.


Everything in JavaScript world is an Object. We often need to clone an Object, and when working with TypeScript, preserve the object type may also be required. This article will explore the options of deep clone an Object with TypeScript, and implement the clone functionality without dependencies to external libraries.

Shallow copy

A shallow copy using Object.Assign or Spread operator will duplicate the top-level properties, but the properties as an Object is copied as a reference, thus it is shared between the original source and target(copied Object).

const objShallowCopy = Object.assign({}, Obj1);
// or
const objShallowCopy = {...Obj1};

Although the above methods…


Managing different environment configurations for a Web App is an essential task. NestJS provides an out-of-box config package based on .env files. However, my personal preference is to use the Angular style environment config files. Thus, this article will describe a simple environment config solution. The solution is illustrated in a NestJS App, but it can work in any NodeJs Apps.

Environment specific configs with default

The config files structure is shown below. The settings.json contains base configurations with default values, and a settings.[environment].json stores the environment specific configs which can overrides the default values.

└──Project/src/environments/
└──settings.json
└──settings.prod.json
└──settings.dev.json

The sample settings are listed below…


There are some facts that I wish I knew before spending half a day digging into a User Agent issue. Here’s what I learned.

The User-Agent (UA) is a string contained in the HTTP headers and is intended to for browser detection: to identify the device/platform of the visiting user, and can be used to determine appropriate content to return.

User Agent is a mess

The truth is, User Agent is full of lies, in many cases, a browser pretended to be other browser with User Agent. In the history of User Agent, browsers often pretend to be another browser because some websites serve contents(frames…

Sunny Sun

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