Wanna see something cool? Check out Angular Spotify 🎧

/usr/local/bin/code: line 6: python: command not found

How to reuse multiple unamed ng-content in Angular

Multiple ng-content

How to reuse multiple unamed ng-content in Angular

My React Reading List

My collection of React articles and video that I read and enjoyed.

Slick - prevent layout shift for your slider

Slick has been my top choice when it comes to implementing feature-rich sliders on the web

CSS div jumped when adding a border

When hovering into a div, we usually want to show that this div is highlighted, usually with different border.

Align React Material UI Dialog to the top instead of center

We need to override two custom classes for Material Dialog component always to have it stick to the top.

TypeScript - Property 'onerror' does not exist on type 'EventTarget'

How to fix this kind of issue - Property 'onerror' does not exist on type 'EventTarget'

TypeScript data structure: Stack

My implementation for Stack using TypeScript

TypeScript data structure: Queue

My implementation for Queue using TypeScript

TypeScript data structure: Singly linked list

My implementation for singly linked list using TypeScript

Difference between: function Person(){}, var person = Person(), and var person = new Person()?

Have you seen this question before?

Warning: Can’t perform a React state update on an unmounted component

If you are a react developer, there is a good chance that you faced this warning at least once.

Angular - Set page title automatically!

Using a few lines of code could make the application feel much better!

Angular Singapore

Follow @angularsg for the upcoming events :)

A simple Spotify client built with Angular 11, Nx workspace, ngrx, TailwindCSS and ng-zorro

An example of real-world monorepo codebase using Nx Workspace

Nx Workspace structure for an application with NestJS and Angular

This structure has been serving us really really well by enforcing consistency, promoting SCAM, prevent circular dependencies, and minimize mental overhead of "where to put what"

SVG fill color doesn't work with hex colors

Because # in URLs starts a fragment identifier. So, in order to make that work, write %23 instead of #, that is the value of escaped # character.

TypeScript unknown vs any types

The main difference between unknown and any is that unknown is much less permissive than any: we have to do some form of checking before performing most operations on values of type unknown, whereas we don't have to do any checks before performing operations on values of type any.

Convert Promise to Observable

You'll need those tips one day if you get used to RxJS 🤣

Migrate Angular to ESLint

I'll show you how to migrate from TSLint to ESLint and using husky to run lint every time you try to make a commit

Capture picture from your Webcam in Angular

A simple walk through how to use the browser MediaDevices for capturing picture from a webcam in Angular

Observable for Angular Output

Do you know you can use Observable for Angular Output?

10 Modern CSS layout and sizing techniques

Learn a few layout tricks you can implement in your codebase today, and be able to write entire swaths of layout with just a few lines of code.

Build an Angular component to display snow ❄️ effect

The holiday session is coming. Let add a simple snow effect to your Angular application ❄️❄️❄️

Disable a reactive form control using custom directive

We will write a custom directive to disable a reactive form control by passing a boolean flag on the template

Angular Jira Clone Part 08 - Create placeholder loading (like Facebook's cards loading)

My eight tutorial is to explain how to build a placeholder loading component

Get the last items of an array using array.slice()

I never knew the slice method takes negative integers!

Angular Jira Clone Part 07 - Build a rich text editor

My seventh tutorial will focus on another kind of text editor - a rich text HTML editor

How to iterate over objects in TypeScript

Use let k: keyof T and a for-in loop to iterate objects when you know exactly what the keys will be or Object.entries to iterate over the keys and values of any object.

How to copy an object from the Chrome inspector console as code

Have you ever do console.log an object and wondering how can copy the object over?

Use async functions instead of callbacks for asynchronous code

Prefer async/await to raw Promise when possible. They produce more concise, straightforward code and eliminate whole classes of errors.

The different between type and interface in TypeScript

Should you use type or interface? For complex types, you have no choice: you need to use a type alias. But what about the simpler object types that can be represented either way? To answer this question, you should consider consistency and augmentation. Are you working in a codebase that consistently uses interface? Then stick with interface. Does it use type? Then use type.

Angular Jira Clone Part 06 - Build a markdown text editor

My sixth tutorial will focus on another interesting feature - a markdown text editor

Apply types to entire function expressions when possible

Consider applying type annotations to entire function expressions, rather than to their parameters and return type. If you're writing the same type signature repeatedly, factor out a function type.

Angular Jira Clone Part 05 - Build an interactive drag and drop board

My fifth tutorial will focus on one of the most interesting feature - drag and drop board

How to kill the process currently using a given port on Windows

A quick trick to kill the process currently using a port on Windows - npx kill-port 4200

Use VSCode Like a PRO

VSCode is one of the most popular code editors, skilled use of VSCode can greatly improve our programming efficiency. This post consisted of some tips I found very helpful when working with VSCode, which I hope will help you too.

Angular Jira Clone Part 04 - Build an editable textbox

My fourth tutorial will focus on the first custom UI element - editable textbox

Angular Jira Clone Part 03 - Setup Akita state management

My third tutorial will go further into the application state management with Akita

Angular Jira Clone Part 02 - Build the application layout with flex and TailwindCSS

My second tutorial will walk you through how to build the application layout that has navigation, sidebar and content section

Top-level await

How to use top-level await in ES Modules without all of the crazy hack

Space Invaders game built with Phaser 3 and TypeScript

There were quite a lot of changes between Phaser 2 and 3 but I like version 3 better. It made the code much more readable and structure

Super Expressive - Easy Peasy Regex Generating

Struggling to write regex from scratch, checkout super-expressive, and a playground written by my friend @nartc

A childhood memory Tetris game built with Angular 10 and Akita

I made a retro Tetris game with Angular. The first game that I have ever built :)

Angular Jira Clone Part 01 - Create a new repository and set up a new Angular application with CLI

I spent my spare time to build a cloned Jira app with Angular 9, Akita and ng-zorro in about two weeks, including the weekend

Angular Jira Clone Part 00 - Prerequisites

You should know some basic Angular, TypeScript and git knowledge before starting

I built a Jira clone application with Angular 9, Akita and ng-zorro

I spent my spare time to build a cloned Jira app with Angular 9, Akita and ng-zorro in about two weeks time, including the weekend.

A painful Gatsby v1 to v2 migration

I have just migrated Gatsby v1 to v2 on my client application, and it is a painful experience

How to configure TailwindCSS with Angular and why you should use it

This post gives you a glance at TailwindCSS and how to use it with Angular. If you're reading this and you don't know what TailwindCSS is, where have you been?

NPM vs Bower vs Browserify vs Gulp vs Grunt vs Webpack

Repost my killer answer on StackOverflow with more than 600 votes

Migrating my blog from Github to Gitlab, and deploy to Netlify

Still use Github for most of the work, but Gitlab for my blog

What is JavaScript Closure?

In short, a closure is not the function that is returned in another function. A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function

Angular - Using Visitor design pattern with Typescript

If you have multiple concrete classes that inherit from the same base class, or implement the same interface. You should consider using visitor pattern. It will save you from dozens of if-else block or switch/case and typecasting

Front end editorial style guide

A style guide on the standard format, spelling, and construction of commonly used words and phrases

Jekyll dark theme (minimal-mistake)

Once you go black you never go back :)

Understand and prevent the most common memory leaks in Angular application - Subscription unsubscribe

Remember to clean up your Rx subscriptions. In my experience, this is by far the most common cause of memory leaks in Angular applications

The different between [value] and [ngValue] when passing to select option

The different when using value and ngValue on Angular form

Lesson learn from Git branches

The goal of the game is to have as short-lived branches as possible (i.e. integrate often) while keeping the common branches (dev/patch) as stable as possible

Convert C# class to TypeScript interface

You could use an extension for VSCode for converting C# class to TypeScript class in a few seconds 🥰

Why I don't like ngrx and what are the alternative options?

I like the Redux concept. But not NgRx :)

JavaScript: Understanding the Weird Parts Notes

Below notes were taken from an Udemy course JavaScript: Understanding the Weird Parts

Angular CDK Drag/Drop List inside a table (not Material Table) - Handle rows distorting width

Angular async validator to validate an input field with a backend API

Write a custom async validator to validate an input field with a backend API in Angular reactive form

Angular - Correct singular/plural form of a noun using custom pipe or NgPlural

Pluralization is a problem in its sphere. We need to always correctly define grammar in our apps based on the singular/plural value

How to export a table or an array in Angular to Excel file (xlsx)

Export data to Excel is very useful on the data list for nearly every web application. The export feature helps to download the data list in a table as a file format for offline use

Limit the number of simultaneous ajax requests

Hoư to limit the number of simultaneous requests to 100, and queue up the rest

Angular formArray/formGroup - Validate at least one checkbox was selected

I prefer to use FormGroup to populate the list of checkbox. For checking at least one checkbox was selected, write a custom validator.

Restrict null and undefined via Non-Nullable-Types in TypeScript

null and undefined are the root of all evil. It often leads to runtime errors. It is easy to write code that will throw Error at runtime.

Error handling in JavaScript. Synchronous vs asynchronous code

Error handling in JavaScript has been always straightforward, at least for synchronous code

TypeScript - Declare a function callback type

To define the function callback type. You could declare an interface that has a call signature. Or define a new type

Angular [(ngModel)] and debounce

In the use case of search, we don't want to hit the server endpoint every time user presses a key, it should flood them with a storm of HTTP requests. Basically, we only want to hit it once the user has stopped typing after sometimes (for instance 300ms) instead of with every keystroke.

Casting a JSON object to a TypeScript class

Not all the time we need to cast from JSON object to a class, but sometimes it is really helpful. Use class-transformer to transform JSON object to class instance

Freeze screen in Chrome debugger / DevTools panel for inspect element that will disappear on hover/click

Run the setTimeout to trigger debugger before the element disappearing 🤓

Angular render recursive view using *ngFor and ng-template

How to use ng-template to render view recursive in Angular

Skiing in Singapore - a coding diversion

Another interesting tree traverse problem that could land you a job 🤓

npm - Check and update package if needed

Use npm outdated to check and upgrade package accordingly

CSS Layout - Horizontal & Vertical Align

Vertically center in CSS has never been an easy problem

How we handle time zone and locale at Zyllem

Using momentjs parseZone functionality for that purpose

The myth of the Genius Programmer

We, programmers are also human and we will make mistakes, the best thing we can do is try not to repeat them. Doing pair programing and code review helped us a lot to spot and prevent the problem before we ended up it on production. The collaboration is the key to success

Angular Tips: Avoiding unnecessary RxJS in vendor.ts

Analyze webpack bundle with source-map-explorer. Optimize moment.js

I found that source-map-explorer tool shows an easy-to-understand-and-explore visualization to help you debug where all the code is coming from.

Uncaught TypeError: Cannot read property 'name' of undefined

It is a very common error when working with object and array to get a TypeError: Cannot read property 'name' of undefined. This happens when we try to access a property of a value that is undefined or null in JavaScript

The combination of debounce and throttle

Debounce and throttle are two techniques to control how many times we allow a function to be executed over time

Find a sequence to produce a number by adding 5 or multiplying by 3

Just read an interesting problem this morning. It seems not to be difficult

10k StackOverFlow

Integrate Angular 2+ and Webpack in an ASP.NET MVC 5 application

I will summarize the steps needed to integrate Angular 2 and Webpack build process in an MVC 5 application

Spinning button onSubmit form with jQuery and ASP.NET MVC

At Zyllem, we are leveraging ASP.NET MVC 5 to build our product. So basically, almost 80% of our code base and UI stuff is doing as server side. 20% of the code is the client-side app written in JavaScript in AngularJS, and also TypeScript in Angular 2/4.

JavaScript naming convention

There are only two hard things in Computer Science: cache invalidation and naming things

Shrinking Navigation Bar When Scrolling Down - Bootstrap 3 Navigation & jQuery

In this tutorial, I will show you how to create an animated fixed navigation that will resize on scroll and when you scroll down the page a bit, the header resizes smaller, and gets back bigger when you scroll back to the top with just simple CSS3 animation and jQuery

ES6 in my daily life

ES2015/ES6 has been around for more than two years with all the exciting feature and syntax. After working with TypeScript and Angular 2 in a project for more than a year, there are the features that I often apply in my code.

My new blog

Hello people 👋