Learn how to setup a project by adding Jest, State Management, Prettier, and Eslint. — In this article, I will share about an Angular starter project that I created last year, and I just migrated it to Angular 11 a few days ago. hoangtranson/angular-jest-starter This project was generated with Angular CLI version 11.0.3. git clone…github.com Table of Contents Setup Jest Setup Ngxs State Management

A Guide to setting up an npm library with TypeScript, Jest, Prettier, and Eslint — In this story, I will refactor one of my libraries (nric-validator). The scenario is that the code is written in JavaScript + Ava (unit test), and the structure is not good. So, I want to re-structure this npm library to archive these points: Able to write by TypeScript and export…

This article will take note how many ways we can use to do looping in JavaScript, pros and cons. — In this story, I want to share about the many ways to do looping in JavaScript and some notes on the advantages and disadvantages of each way. Sequential for Loop Array.prototype.forEach ES6 for-of statement ES6 for-in statement Bonus — Combination Iterators and For Loop Sequential for Loop Loops offer a quick and easy…

A simple technique to filter JavaScript object properties by using replacer as an array or a function. — In this article, I will share about using replacers with JSON.stringify(). Syntax Re-introduction Using Replacer Argument Syntax Re-introduction I think that most of us know the JSON.stringify() first argument. But, only some people know about there is a second argument called a replacer. So I want to re-introduce again the method syntax.

A simple guide to add a version to an interface for an Angular application. — In this article, I will share a simple configuration to import the package.json file into your Angular application. Import @types/node Add configuration to tsconfig.app.json Import package.json to Angular component The purpose of this is very simple. Sometimes, we want to import package.json …

Guide to installing Prettier and adding it to a pre-commit hook for Angular. — In this article, I want to share how to setup Prettier for Angular to run on a specific folder only and keep your code looking good. What is Prettier? Install Prettier Write a Script Auto format code with a Pre-commit Hook Note: I wrote this story based on how I…

A simple note that help developer walkthrough Angular Reactive Form — Have you ever wondered why Angular is so powerful with forms? In this article, I will walk you through this topic to understand why and how Angular is better with forms compared to React or Vuejs. Contents: What Reactive Form is Three Basic Blocks FormBuilder Validators The Magic What Reactive Form is Angular provides…

Why we should use functional programming on the frontend to keep codebase readable, maintainable, reusable, and testable. — I’m writing this article right after I completed refactoring a terrible and large source code into a simpler one while applying the functional programming paradigm. I want to share this with front-end developers around the world the idea as to why FP is a good fit for JavaScript and some…

Basic TypeScript types that developers need to know when working with TypeScript. — This story is about types in TypeScript which is a typed superset of JavaScript that compiles to plain JavaScript. I will go to more detail to explain some terms below. Primitive Types Enumerations Union Types Literal Types Intersection Types Arrays Tuple Types Dictionary Types Mapped Types Discriminated Unions You can…