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


Introduction

I have a hundred of blog-posts or packages on different platforms(Medium, dev.to, 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. …


Introduction

對提供資訊的網站來說,如何讓使用者用起來感到方便呢?

有著良好組織結構的網站可以讓使用者搜尋所需資訊時更有效率,常見的組織架構模式有資料庫、階層、及超文件與標籤分類三種模式。

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

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

第一種方式是結構化並組織物件間的關聯性並用資料庫儲存資料。

之所以需要結構化並組織物件間的關聯性,是為了達成關聯性的操作,如依照日期排序、搜尋具有關鍵字的資料、或以關聯性為基礎的推薦等功能。

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

實體關係圖是以視覺化的方式,理解既有專案資料庫中模型間的關係,多數的開發框架多半有提供工具或是套件用圖形化的方式顯示Table

以手上 …


Introduction

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…


Introduction

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

由定義可知,產品開發團隊可以期望掌握設計原則後,提升使用者對於服務的理解程度以提高服務使用率及品質。

那麼如何套用資訊空間設計原則呢?

以下將會從開發者的角度,說明筆者從一書中對資訊空間設計原則的理解,並嘗試以空間設計原則套用自己的web專案,以驗證空間設計原則。

本文分為兩個段落說明

1.簡述資訊空間設計原則的概念

2.嘗試實際套用資訊空間設計原則

簡述資訊空間設計原則的概念


Introduction

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…

Introduction

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…


Introduction

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

Preparations

1. Environment setting and packages installation

Set up the…


Introduction

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 Asp.net 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 Asp.net MVC

1. Register events

  • Register the validation methods and parameters in…

Sean HS

Software engineer at Garmin (https://www.linkedin.com/in/jen-hsuan-hsieh-6a13347a/) | Curator of Daily Learning (https://daily-learning.herokuapp.com/)

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