There are several things we need to set for building a new Next.js project. There is a new way that we only have to do it once

For example, we have to re-create files and settings for Redux, Redux middleware, Styled-components again and again if we need them. Sometimes, we may also need extra things like setting Jest, Enor using TypeScript.

To solve my problems, I create and publish an NPX command called create-nrs-web.

In this article, we will introduce how to use create-nrs-webto build a website efficiently. There are a few topics.

  • Create a new project with create-nrs-web
  • Deploy the project on Nelify
  • How to create and publish an NPX command?

Create a new project with create-nrs-web

1.Type the following command on the console

npx create-nrs-web

2. There are a few…

In this article, we will go through the process of creating an animation component in the React project with gsap. we will walk through three parts.

  • Prepare SVG
  • Wrap SVG in a React Component
  • Turn SVG to the animation with gsap and React hooks

Feel free to scroll down if this article may be something you are looking for.

Let’s getting started!

Prepare the SVG

There are a few methods to retrieve SVG files.

1. Download free SVG sources

There are a bunch of free SVG icons, you can find the favorite ones from websites like unDraw, flaticon if you don’t want to take time to make one.

2. Create and export SVG from Sketch


I have a hundred of blog-posts or packages on different platforms(Medium,, npm packages, Chrome extension, etc).

Sometimes I wonder what kind of topics I write the most? So I create a keyword cloud of my works and record the process in this article. There are a few steps for the whole process.

  • Pre-requisite knowledge
  • Pre-process data with NLTK in Python
  • Create the tag Cloud with d3-cloud for the React project
  • Demo

Pre-requisite knowledge

Django, React, Redux

I will use Django, React function components(TypeScript), and Redux in this article. We won’t go through the detail for these skills in this article. …




前一篇文章我們利用空間設計原則改善了排版的設計,本篇文章同樣試著以<資訊架構學>內容檢視個人專案中的功能或是受到啟發進而開發新功能,這次要討論的主題是組織結構(Organization Structures)。

1. 結構化並組織關聯性(資料庫模式)



檢視實體關係圖(Entity Relationship Diagram, ERD)


以手上 …


There are several concerns for a search system to fetch the related results with the inputted text changed. We can understand clearly from the following screen-shot.

  1. The system searches each character even we only want to search “react”
  2. It will cause errors if the API has rate limitations

It matters the performance and the user experience. After surveying, I think we have two kinds of solutions to reduce the frequency of function calls. Both two methods use a timer to solve the problem here.

  1. Throttle
  2. Debounced

That’s doing experiments to check which one is suitable for our system.

Solution 1. Create the throttle to avoid high-frequency

The idea…


資訊空間設計原則旨在塑造人們對於資訊空間的感知- 使用者身在哪裡? 能做什麼? 能期待尋找什麼?









There are several ways to share stateful logic between React components like render props and HOC (High Order Component). React hook provides a new option after v16.8.0. The main advantage of React hooks is that they can be uses as life cycle functions for function components.

I create my customized React hook when learning to React hook. This article is a note for people who also intend to create their own React hook package for npm.

There are a few topics in this article

  • Development environment setting
  • Customized hook
  • Publish the package to npm

Development environment setting

1. Initial the project

  • Type the following command in the…


This series is to build a SPA with ReactJS and Django.

We have discussed a few topics from part 1 to part 7. In part 8, we began to use Next.js and export static full pages for overcoming drawbacks of the CSR(Client-Side Rendering) and improving the performance.

On the frontend side, there are several kinds of tools to improve the project that we have talked like Redux, middleware for Redux(Thunk, Saga, etc), and Jest. The page-level Redux accessing is an important part of improving CSR.

Use redux-promise-middleware as middleware

In this article, we will integrate next-redux-wrapper into the project in order to access Redux…


For achieving the target of 100% coverage for the unit test, a part of the basic work is to learn how to test Redux components which are the most commonly used for the global states managements in the Next.js/React project.

In this article, we will learn how to test Redux components with different middleware. Assume that you have known how to use Redux and Jest. You can also read the following articles for the pre-required knowledge.

This article contains the following topics

  • Preparations
  • Verify reducers
  • Verify actions
  • Verify saga and API
  • Verify the React component
  • Rest components


1. Environment setting and packages installation

Set up the…


The lesson I learned this week is the customized model validation for Asp.NET MVC. The frontend-side model validation was broken after switching the script bundle to Webpack.

The root cause for the broken validation is that the Webpack bundle lacks a JavaScript file. What do we need for the customized model validation in Asp.NET MVC?

The model validation process has two steps, the frontend-side validation, and the backend-side validation.

Implement Backend-side validation in MVC

1. Implement a RequiredAttribute and implement methods from RequiredAttribute and IClientValidatable

2. Add the customized attribute as an annotation for the model

Implement Frontend-side validation in MVC

1. Register events

  • Register the validation methods and parameters in…

Sean HS

Software engineer at Garmin ( | Curator of Daily Learning (

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