Forem: Chanvin Xiao

Some Caveats for GitHub Workflow and Action

Chanvin Xiao — Sun, 29 Dec 2024 12:33:24 +0000

There are some caveats for GitHub workflow and action, including yaml configuration of workflow, script composition of action, and the protection setting for corresponding branch, summarize as following for reference

Workflow

on.issues.types

If it's necessary to check label, opened is not needed, set labeled is enough, since even if the label is set when the issue is created, labeled will be triggered

permissions

If it's necessary to checkout current repo, contents: write is needed, or else there will be permission issue

jobs.check.steps.env

If it's necessary to utilize GitHub API, GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} is needed, as environmental variable

Action

List repository issues

API no only return issues, but also return prs, with default 30 records per page, labels can be assign to filter

List pull requests

API return all the pull requests, with default 30 records per page, it's possible to fulfill pagination via per_page and page, such as:

const prs = [];
for (let page = 1; ; page++) {
  const { data } = await octokit.rest.pulls.list({
    ...context.repo,
    base: `refs/heads/main`,
    state: 'open',
    per_page: PER_PAGE,
    page,
  });
  prs.push(...data);
  if (data.length < PER_PAGE) {
    break;
  }
}

Get commit status

API list state of all the contexts, it's possible to filter current context

Create commit status

API，指定 state，context 和 description（作为运行结果显示）
API is used to create commit status, it's possible to specify state，context and description (shown as running result)

Setting

Require status checks

It's necessary to check Require status checks to pass before merging under Protect matching branches in Branch protection rule

Add required checks

It's necessary to add current GitHub action to Status checks that are required

Transform Class React Components to Functional

Chanvin Xiao — Sat, 30 Dec 2023 11:06:12 +0000

As functional React components is more modern with support to hooks which is useful, it's common practice to rewrite the old styled class components to functional components. This article summarizes some common steps and pitfalls for the transformation.

Common Replacements

Definition

From

class (\w+) extends Component \{

const $1: FC = () => {

It's for situation without export and props.

From

(export) default class (\w+) extends Component \{

$1 const $2: FC<$2Props> = () => {

As the second captured word, $2 is the component name.
$2Props should be defined as the name of props interface.

Attributes Prefix

From

this\.(state\.|props\.)?

Assume that props is destructed uniformly.

Lift Cycle functions

From

componentDidMount() {

useEffect(() => {}, []);

componentDidUpdate can also be transformed to useEffect, with appropriate dependencies.
componentWillUnmount can be transformed to return function of corresponding useEffect handler.

State Related Statement

From

state = {
  data: null,
};

const [data, setData] = useState();

From

this.setState({
  data,
});

setData(data)

Class Methods

From

^(\s*)(\w+)\((\w*)\) \{

$1const $2 = ($3) => {

It's for regular function definition.
$1 is white spaces, $2 is method name, $3 is parameters

From

^(\s*)((\w+) = (async )?\((\w+(, )?)*\) =>)

$1const $2

It's for arrow function definition.
$1 is white spaces, $2 is everything from the method name.

Class Getter

From

^(\s*)(get) (\w+)\(\)

$1const $2\u$3 = () =>

\u means capitalizing the following captured word.
The invoking of the getter should have () after the name.
If the getter is simple, it can be assign directly without function.

Render function

From

render() {
  return (
    <></>
  );
}

return (
  <></>
);

Notable Pitfalls

Name Conflict

It's possible for class component to have the same name as attributes and props, such as this.data and this.props.data.
With this.data become data, and it's common to destruct props as const {data} = props, the name conflict comes.

State Callback

With this.setState, we can set a callback to be invoked after the state is changed actually, but we have to change this implementation to useEffect with the changed state as dependency.

Function as State

If the value of a state is a function, you wrap it into an anonymous function or else the hook version of setState will treat it as a callback.
Actually, in most case, this kind of state is not related to rendering, so perhaps useRef is more suitable for them.

This article shows some replacement with RegExp, which will make the transformation from class to functional component easier, and some pitfalls that you may encounter during the process for you to pay attention to, but to be sure, there can be more jobs for different scenarios.

Common Git Command Line Operation

Chanvin Xiao — Sat, 31 Dec 2022 11:07:24 +0000

This article record the specific usage method of some common git command line operation

git clone

git clone REPOSITORY_URL
Clone repository, and use the name of repository as local folder name
git clone REPOSITORY_URL FOLDER
Clone repository, and use FOLDER as local folder name

git fetch

git fetch origin
Update all the remote branch
git fetch origin BRACH
Update designated remote branch

git pull

git pull origin
Equivalent to fetch + merge coresponding upstream branch
git pull origin BRACH
Pull designated branch to current branch
git pull origin --rebase master
Make local branch rebase remote master branch

git push

git push origin
Push branch to coresponding remote upstream branch
git push origin BRANCH
Push branch to remote designated branch
git push --set-upstream origin BRANCH
Push branch to remote designated branch, and make it as upstream branch (generally need to be used for pushing branch of your own for the first time)
git push -f origin
Force push branch to corresponding remote upstream branch (will override remote branch, need to be used carefully)
git push origin -d BRANCH
Delete remote branch

git branch

git branch
List all local branch
git branch -a
List all local and remote branch
git branch -m NEW_BRANCH
Rename current branch
git branch -d BRANCH
Delete merged branch
git branch -D BRANCH
Force delete branch (even if not be merged yet)

git checkout

git checkout BRANCH
Switch to designated branch
git checkout -b NEW_BRANCH
Create new branch
git checkout -b NEW_BRANCH BRANCH
Create new branch based on BRANCH
git checkout SHA-1
Switch to a commit, or use HEAD~N (N as 1, 2, 3...) to switch to previous Nth commit
git checkout SHA-1 /PATH/TO/FILE
Restore file to designated commit version
git checkout --theirs /PATH/TO/FILE
Use theirs' file version in case of conflict
git checkout --ours /PATH/TO/FILE
Use ours' file version in case of conflict
git checkout -
Switch to previous branch, suitable for switching frequently between two branches

git add

git add .
Mark all added / modified / deleted files as to-be-committed
git add /PATH/TO/FILE
Mark a single file as to-be-committed, suitable for situation when there're other modified files which don't need to be committed

git commit

git commit
Commit files marked by git add
git commit -a
Commit modified / deleted files (if there's newly added file, need to use git add to mark firstly)
git commit -am "MESSAGE"
Commit modified / deleted files and assign comment (suitable for temporary or simple comment content)
git commit --amend
Update last commit, can add -a or run git add firstly to append updated files
git commit --amend --reset-author
Default updating commit won't change author, can explicitly config if necessary

git cherry-pick

git cherry-pick SHA-1 Apply a commit to current branch

git status

git status Check current status

git diff

git diff
Updating contents of current modified files which has not been marked as to-be-committed
git diff --cache
Updating contents of current modified files which has been marked as to-be-committed
git diff /PATH/TO/FILE
Updating contents of designated file, and can also be distinguished with --cache

git log

git log
Show all logs in detail
git log -n 10
Show latest 10 logs
git log --oneline
Show all logs briefly
git log --oneline master ^BRANCH | wc -l
Compute how much commit differences between BRANCH and master

git stash

git stash
Stash modified / deleted files, and the added files marked as to-be-committed
git stash -u
Stash modified / deleted / added files, which means the added files is included without using git add
git stash pop
Pop the stashed files

git revert

git revert SHA-1
Cancel a commit by forming a new commit
git revert SHA-1 -m 1
If the to-be-reverted commit is a merged one, need to designate which parent commit to be reverted to
For example, if the merged commit is merging from BRANCH_2 to BRANCH_1, and you want to revert to BRANCH_1, then m should be 1 (it's the most cases)

git reset

git reset
Cancel marking for to-be-committed files (equivalent to withdrawing git add)
git reset --hard
Cancel updating for modified / deleted files and added files marked as to-be-committed
git reset SHA-1
Cancel all the commits after SHA-1, but retain updates of the committed files
If want to just cancel last commit, SHA-1 can be set as HEAD^
git reset --hard SHA-1
Cancel all the commits after SHA-1, and don't retain updates of the committed files

git rebase

git rebase BRANCH
Make current branch rebase BRANCH
git rebase -i SHA-1
Update commits after SHA-1, can pick/p, edit/e, drop/d, squash/s corresponding commits
If the first commit used with p, and the following commit used with s, then multiple commits will join into a single commit

git merge

git merge BRANCH
Merge BRANCH into current branch, try not to form merged commit
git merge --no-ff BRANCH
Merge BRANCH into current branch, and make sure to form merged commit
git merge --squash BRANCH
Make the differences between BRANCH and the current branch as to-be-committed contents, need to run git commit to complete merging with only one commit

git update-index

git update-index --assume-unchanged /PATH/TO/FILE
When a file is modified temporary, but don't want to be committed, and not suitable to be added to .gitignore, can use this command to make git don't recognize it as modified
Cannot use this command if the file is newly added, but can add the file path to .git/info/exclude
git update-index --no-assume-unchanged /PATH/TO/FILE
Recover modified recognition for the designated file

Performance Test Plan for Different Environment

Chanvin Xiao — Sun, 20 Jun 2021 08:52:42 +0000

The settings of JMeter performance test for different environment are basically consistent, just with differences of address, account, an so on, Here I utilize Shell Script and JMeter variable to handle uniformly

Install JMeter

wget https://mirror.cogentco.com/pub/apache//jmeter/binaries/apache-jmeter-5.4.1.tgz

tar -zxvf apache-jmeter-5.4.1.tgz -C /opt

Add bin directory to PATH

export PATH="$PATH:/opt/apache-jmeter-5.4.1/bin"

This way we can execute jmeter command from anywhere

Config Test Plan

Run JMeter GUI

jmeter

Normal Setting

Right click Test Plan, hover Add, then hove Threads(User), click Thread Group, set appropriate value for Number of Threads (users)
Right click the newly added Thread Group under Test Plan , hover Add, then hover Config Element, click HTTP Request Default, set Server Name or IP as ${__P(HOST)}, Port Number as ${__P(PORT)}
Right click Thread Group, hover Add, then hover Sample, click HTTP Request, set Name as Frontend, Path as /
Right click Thread Group, hover Add, then hover Sample, click HTTP Request, set Name as Backend, Path as /api/currentUser
Right click Thread Group, hover Add, then hover Assertion, click Response Assertion, set Field to Test as Response Code, Patten Matching Rules as Equals, click Add in the bottom, input 200

__P is function for JMeter to get the command line parameter

Handle Authorization

The above backend api can only be access after login, the authorized method is token in the cookies or Authorization Header, so we need to get this token firstly, and append to every request

Right click Test Plan, hover Add, then hover Threads(User), click setUp Thread Group
Right click setUp Thread Group, hover Add, then hover Sample, click HTTP Request, set Name as Login, Server Name or IP as ${__P(HOST)}, Port Number as ${__P(PORT)}, Method of HTTP Request as POST, Path as /api/login/account, click Add in the bottom, add Name as username and password, Value as ${__P(USERNAME)} and ${__P(PASSWORD)} respectively
Right click setUp Thread Group, hover Add, then hover Post Processors, click Regular Expression Extractor, set Name of created variable as token, Regular Expression as "token":"(.+?)", Template as $1$
Right click setUp Thread Group, hover Add, then hover Sample, click BeanShellSampler, set Name as Token, Script as ${__setProperty(token, ${token})}
Right click Thread Group, hover Add, then hover Config Element, click HTTP Cookie Manager, click Add in the bottom, set Name as token, Value as ${__property(token)}, Domain as ${__P(HOST)}:${__P(PORT)}, Path as /

"token":"(.+?)" capture value of token in the return result as $1$
__setProperty is function for JMeter to set global variable
__property is function for JMeter to get global variable

Run Test Plan

Run Directly

The above plan config set information of address and account as variable, which can be transmitted in the command line, such as:

mkdir report

HEAP="-Xms1g -Xmx1g -XX:MaxMetaspaceSize=256m"

jmeter -n -t test.jmx \

-J HOST=127.0.0.1 \

-J PORT=80 \

-J USERNAME=USERNAME \

-J PASSWORD=PASSWORD \

-l log/local-20210620095700.txt \

-e -o report/local-20210620095700

report directory must exists, so that the report can be written, so mkdir need to be used to create it for the first time
The above command line make use of jmeter command line options -n, -t, -J, -l, -e and -o
The html formatted test report in local-20210620095700, is composed by table data and visualized chart, as the following images shown:

Handle by Shell

The above commands are verbose, and we need to set every parameter for different environment, so I utilize Shell Script to simplify

Config Variable

export LOCAL_HOST=127.0.0.1
export LOCAL_PORT=80
export LOCAL_USERNAME=USERNAME
export LOCAL_PASSWORD=PASSWORD
export TESTING_HOST=192.168.1.10
export TESTING_PORT=80
export TESTING_USERNAME=USERNAME
export TESTING_PASSWORD=PASSWORD
export PRODUCT_HOST=192.168.1.100
export PRODUCT_PORT=80
export PRODUCT_USERNAME=USERNAME
export PRODUCT_PASSWORD=PASSWORD

Invoke Variable

#!/bin/sh

time=$(date "+%Y%m%d%H%M%S")
server=${1:-"local"}
prefix=$(echo $server | tr 'a-z' 'A-Z')_
HOST=${prefix}HOST
PORT=${prefix}PORT
USERNAME=${prefix}USERNAME
PASSWORD=${prefix}PASSWORD

if ! [ -d "report" ]
then
mkdir report
fi

HEAP="-Xms1g -Xmx1g -XX:MaxMetaspaceSize=256m"
jmeter -n -t test.jmx \
  -J HOST=${!HOST} \
  -J PORT=${!PORT} \
  -J USERNAME=${!USERNAME} \
  -J PASSWORD=${!PASSWORD} \
  -l log/$server-$time.txt \
  -e -o report/$server-$time

$(echo $VAR | tr 'a-z' 'A-Z') indicates uppercase for all, same as ${VAR^^} for Bash which above version 4.0
If report directory exists, we don't need to recreate it again, so we determine with -d firstly
${!HOST} means the value of $HOST is the name the other variable, and the value of this other variable will be resolved

Run Script

Local Environment

./test.sh

Testing Environment

./test.sh testing

Product Environment

./test.sh product

if the environment parameter is omitted, ${1:-"local"} will set the default environment as local

Summarize

The above plan and script can be downloaded via this GitHub Repository, which fulfills the following:

Config test plan dynamically for JMeter through the reception of parameter inputted by command line
Utilize setup thread group to handle login, and set token as global variable
Simplify command and handle uniformly for different environment with Shell Script

Cache Control for React App with Nginx

Chanvin Xiao — Sat, 29 May 2021 23:34:50 +0000

The cache issue which typical React App confronts, can be solved by Nginx configuration

Common Deployment

After the app is built, we can just use Nginx to point to the static files



server {
  listen 80;
  root /PATH/TO/APP/build;
  try_files $uri $uri/ /index.html;
}

Cache Issue

When access page for the first time, all the page and resources are from server, as the following image shown:

Close the browser, then reopen, Input address, press Enter, the browser will get the cache from local, as the following image shown:

Even if the page was updated between the two request, the browser would not get the update from the server, since disk cache does not communicate with server

Solution

If the resource file is updated, the file name will changed, so the cache of resource won't be a problem, we just need to disable the cache of page

Just replace



  try_files $uri $uri/ /index.html;

With



  location / {
    if ( $uri = '/index.html' ) {
      add_header Cache-Control no-store always;
    }
    try_files $uri $uri/ /index.html;
  }

Since all the pages is eventually pointed to the entrance file, so all the actual $uri are /index.html for pages
no-store is the strictest value for Cache-Control to disable cache, to make sure the browser won't use any cache
Since add_header with if can not be placed directly inside server, so we need to add the location layer

Result

This way, when we request page the second time, the page won't cache, but the resources will be cached if no change, as the following image shown:

You can access the following address, try to operate, and inspect the corresponding network request:

http://react.chanvinxiao.com

Summary

Weird cache problem will arise when input address and press Enter in browser
We can determine if the request is page through $uri of Nginx
The Cache Control header can be set via add_header of Nginx

Utilize Nginx to fulfill bilingualism for Hexo

Chanvin Xiao — Sun, 21 Jun 2020 12:19:54 +0000

The bilingualism config process for Hexo is recorded In this article. Different language version is in the same application with common template, any webpage can be switched to another language's corresponding webpage, and for the access url whose language is not specific, automatic redirection will be proceed according to browser language

Fulfillment Rule

Address Difference

Chinese Home:

https://chanvinxiao.com/cn/blog/

English Home:

https://chanvinxiao.com/en/blog/

Switch between Languages

The following Chinese page as example

https://chanvinxiao.com/cn/blog/archives/2020/04/

Click English in the top right corner, the following webpage will be shown

https://chanvinxiao.com/en/blog/archives/2020/04/

Click 中文 in the top right corner in this webpage, the previous webpage will been shown

Automatic Redirection

The following address as example

https://chanvinxiao.com/blog/vuejs-tic-tac-toe/

If the browser prefer language is set to English, it will redirect to corresponding English version

https://chanvinxiao.com/en/blog/vuejs-tic-tac-toe/

If the browser prefer language is set to Chinese, it will redirect to corresponding Chinese version

https://chanvinxiao.com/cn/blog/vuejs-tic-tac-toe/

Hexo Setting

Add English Setting

Add _config-en.yml in the root directory

# Site
title: TITLE
subtitle: SUBTITLE
description: DESCRIPTION
keywords: KEYWORDS
language: en

# URL
url: https://chanvinxiao.com/en/blog
root: /en/blog/

# Directory
source_dir: source-en
public_dir: public-en

in the #Site associated setting, I change the original Chinese content to English, and the key point is to change language to en, thus the template will use english version
URL and root need to be set as individual address and directory to distinguish between chinese counterpart
Divide source and public directory from chinese, to ensure the Chinese or English version only show Chinese or English article respectively

Add Script

Add the following script in package.json

  "scripts": {
    ...
    "build:en": "hexo generate --config _config.yml,_config-en.yml",
    "clean:en": "hexo clean --config _config.yml,_config-en.yml",
    "server:en": "hexo server --config _config.yml,_config-en.yml"
  },

Add build, clear, and server script for English version, so the Chinese and English version is separated without interfering with each other
Utilize Custom Config, combine config _config.yml and _config-en.yml in the corresponding scripts
The combining config file _multiconfig.yml will be generated, which should be added to .gitignore

Nginx Config

Add the following config in corresponding server session in Nginx

  if ( $http_accept_language ~* ^en ) {
    rewrite ^(/blog.*) /en$1 redirect;
  }

  rewrite ^(/blog.*) /cn$1 redirect;

  location /cn/blog {
    alias /PATH/TO/BLOG/public;
    error_page 404 $scheme://$host/cn/blog;
  }

  location /en/blog {
    alias /PATH/TO/BLOG/public-en;
    error_page 404 $scheme://$host/en/blog;
  }

$http_accept_language is embedded variable set by Nginx's http module for request header Accept-Language, If prefer language of browser is English, the value will start with en, such as en-US,en;q=0.9
rewrite ^(/blog.*) /en$1 redirect; will add en for the address start with /blog, the flag of rewrite is set to redirect, which means 302 redirect, so does the following default cn
The above setting make redirect decision for address start with /blog (aka address without language), If the prefer language of browser is English, English site start with /en/blog will be redirected, or else Chinese version start with /cn/blog will be redirected
Because /cn/blog is matched with index.html in the public directory, not cn/blog/index.html, so here alias is used, not root
error_page is set for 404 handling, $scheme is http or https, which means webpage redirect, and will redirect to Chinese or English homepage

Webpage Switch

Use template landscape as example, add the following content before })(jQuery); in themes/landscape/source/js/script.js

  let language = {};
  language.now = location.pathname.match(/^\/en/) ? 'en' : 'cn';
  if('en' === language.now){
    language.label = '中文';
    language.href = location.pathname.replace(/^\/en/, '/cn');
  }else{
    language.label = 'English';
    language.href = location.pathname.replace(/^\/cn/, '/en');
  }
  $('#sub-nav').prepend(`<a class="main-nav-link" href="${language.href}">${language.label}</a>`)

Determine the language of current webpage according to the existence of /en in the beginning of webpage path
Add link menu to Chinese webpage in English webpage, and add English link in Chinese version
Directly change cn to en or en to cn in the address to get the corresponding webpage, if there is not corresponding webpage, the associated homepage will be redirected according to the above Nginx config
Utilize prepend of jQuery to add link to the sub menu, with the common class main-nav-link style

Summarize

In the fulfillment of blog bilingualism, the following technology is primarily used:

Custom config of hexo and scripts in package.json
Embedded variable for request header in http module of Nginx
Nginx's directive rewrite, alias and error_page
pathname of location and prepend of jQuery

Prefetch and Preload with Handling in Webpack

Chanvin Xiao — Sun, 07 Jun 2020 11:34:38 +0000

prefetch and preload usage is good way to optimize website performance and user experience, this article introduce method to prefetch and preload, and fullfil with webpack

Link Type

rel property of <link> tag is used to defined link type, and combined with href can prefetch and preload corresponding resource. prefetch is one of the link types

<link rel="prefetch" herf="URL">

preload is the other type, also use href to defined resource address, but besides handling pre fetch, it will resolve the resource, so the property as need to be added, to indicate type of resource

<link rel="preload" href="URL" as="MIME_TYPE">

Prefetch Resource

prefetch indicates that in the following navigation (ie: next webpage), user may need to use corresponding resource, and give a hint to browser that corresponding resource need to be gotten when idle

First create a new diretory prefetch-preload-demo (all the code in this article will create here), install the associated dependencies, and create new directory static

mkdir prefetch-preload-demo

cd prefetch-preload-demo

npm init -y

npm i -D http-server

mkdir static

In static directory, create prefetch.html， main.js and script.js

prefetch.html defined a link with prefetch as rel

<html>
<head>
<title>Prefetch</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="prefetch" href="script.js">
</head>
<body>
<script src="main.js"></script>
</body>
</html>

main.js create a button, and bind click event

let button = document.createElement('button');
button.innerHTML = 'Add Script';
button.addEventListener('click', e => {
  let script = document.createElement("script");
  script.src = "script.js";
  document.head.appendChild(script);
});
document.body.appendChild(button);

script.js just simply print

console.log('script run');

Run the sever (or add server script in package.json)

npx http-server

Access http://localhost:8080 and navigate to static, click prefetch.html, or directly visit online webpage, in the initial status, check the network tab of devtool, as the following image (don't check Disable Cache, click the gear on the right, check Use large request rows)

script.js is fetched, the two number in the size column, 275 B shows the download size, 0 B shows the resolved size (which means that it's not been resolved yet)
Console tab is empty, which means script has not run yet

Click Add Script on the page, <script> tag with address script.js will be added on the page, and the following content will been added on the network tab

Download size become (prefetch cache), which means that the resource is directly gotten from prefetch cache, and the resolved size below is no longer 0
The debug content is printed on the console, which means that the script is resolved and run just now

Preload Resource

preload indicates that in the current navigation (mostly the current webpage), user very likely need to use corresponding resource, and give a hint to browser that corresponding resource need to be gotten preferentially

Change prefetch in link tag of prefetch.html to preload, and set resource type as to script, which form preload.html

<link rel="preload" href="script.js" as="script">

Access the local server corresponding prefetch.html, or directly access online webpage, in the initial status, check the network tag of devtool

script.js is downloaded preferentially, the resolved size of size column is no longer 0, namely preload no only download the script, but also resolve it
The console tab is still empty, namely although the script is resolved, it has not run yet

Click Add Script, there is not additional record in the network tab, but the console output the print content of script

Because script is resolved completely, there is even no need to fetch from cache, just directly run
If Add Script is not clicked in 3 second, the console will output warning, because the resource which should be loaded preferentially is not used in time >The resource https://chanvinxiao.com/demo/html/script.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

webpack associated handling

Run the following command to install corresponding dependencies, and create new directory src

npm i -D webpack webpack-cli html-webpack-plugin preload-webpack-plugin\@3.0.0-beta.4

mkdir src

Current version of PreloadWebpackPlugin is 2.x, which is not compatible with current version of webpack which is 4.x, so need to specify the version as the newest 3.x beta

copy main.js and script.js to src, and modify the click event handler in main.js to the following

button.addEventListener('click', e => {
  import(/* webpackChunkName: "script" */ './script.js');
});

import() will load script dynamically, webpack will generate code which create script tag similar to above
The comment in import is magical comment with special meaning, and if webpackChunkName is not set, the imported script will name with number sequence

Add webpack.config.js as following

const HtmlWebpackPlugin = require('html-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'preload.html'
    }),
    new PreloadWebpackPlugin()
  ]
}

HtmlWebpackPlugin will generate corresponding html file automatically, index.html as default, here we change it via option filename
PreloadWebpackPlugin is plugin of HtmlWebpackPlugin, it will add link tag with link type as preload for the dynamically imported resource, and the as value can be determined by the suffix

PreloadWebpackPlugin also support prefetch, with rel option as prefetch

    new HtmlWebpackPlugin({
      filename: 'prefetch.html'
    }),
    new PreloadWebpackPlugin({
      rel: 'prefetch'
    })

But if we want to generate both preload.html and prefetch.html, option excludeHtmlNames need to be set in the corresponding PreloadWebpackPlugin configuration, or else both preload and prefetch link tags will be produced simultaneously

    new HtmlWebpackPlugin({
      filename: 'preload.html'
    }),
    new HtmlWebpackPlugin({
      filename: 'prefetch.html'
    }),
    new PreloadWebpackPlugin({
      excludeHtmlNames: ['prefetch.html']
    }),
    new PreloadWebpackPlugin({
      rel: 'prefetch',
      excludeHtmlNames: ['preload.html']
    })

Build files (or add build script in package.json)

npx webpack

prefetch.html and preload.html will be generated in dist directory, access local server corresponding address, you will get the same effect as the above static page

Summarize

This article show the fulfillment of prefetch and preload with two methods: static page and webpack building. The complete code can be found in GitHub, the main technical points are as follow:

ELEMENT.appendChild create script dynamically
import() load script dynamically and set the magical comment
The configuration of html-webpack-plugin and its plugin

Utilize Github's Webhook to Fulfill Automatic Deployment

Chanvin Xiao — Sun, 31 May 2020 08:27:24 +0000

Github's webhook functionality can fulfill automatic deployment conveniently. This article records the process of development and deployment via Node.js, when the master branch is pushed, the project will be automatically deployed, the complete code is on GitHub

Add Webhook

On the homepage of the corresponding project of Github, click menu Setting in top right corner, click menu Webhooks on left side, click button Add webhook of top right corner
Set Payload URL as address which will receive event, suggested Payload URL should be applicaiton/json, Secret is optional, and can be any string, choose Just the push event. for Which events would you like to trigger this webhook?, check Active, click button Add webhook below

Develop Request Handling

Receive Request

Utilize Node.js to setup a http server, receive POST request and handle the submitted data

const { createServer } = require('http');
const port = process.env.GITHUB_WEBHOOK_PORT || '3000';

const server = createServer((req, res) => {
  if('POST' === req.method){
    let body = '';
    req.on('data', chunk => {
      body += chunk.toString();
    });
    req.on('end', () => {
    });
  }
})

server.listen(port, () => {
  console.log(`Listening on ${port}`);
});

if the default port 3000 need to be changed, you can firstly run the following command to add environment variable (NUMBER can be any port)

export GITHUB_WEBHOOK_PORT=NUMBER

Parse Body

In the end event handler of req, parse string body to object

    req.on('end', () => {
      try{
        body = JSON.parse(decodeURIComponent(body).replace(/^payload=/, ''));
      }catch(e){
        console.log(e)
      }

If Content type is set to applicaiton/json, just body = JSON.parse(body) is sufficient, the above code add compatibility of situation when Content type is set to application/x-www-form-urlencoded

Pull Updates

According to push payload for body, extract project and branch information, if it's master branch, command to enter corresponding project and pull the branch will be executed

      if('object' === typeof body){
        if('refs/heads/master' === body.ref){
          const { exec } = require('child_process');
          const command = `cd ../${body.repository.name} && git pull origin master`;
          exec(command, (error, stdout, stderr) => {
          });

Note that the directory where project locates, and the directory where this application locates, are in the same parent directory, or else the entry path in the command should be adjusted

Verify Secret

The above step have fulfilled automatically pull updates, but there's security issue, because not only Github can send this kind of request, so it's better to set Secret and proceed security verification

const secret = process.env.GITHUB_WEBHOOK_SECRET || '';
...
    req.on('end', () => {
      if('' !== secret){
        const { createHmac } = require('crypto');
        let signature = createHmac('sha1', secret).update(body).digest('hex');
        if(req.headers['x-hub-signature'] !== `sha1=${signature}`){
          console.log('Signature Error');
          res.statusCode = 403;
          res.end();
          return;
        }
      }

Before application is run, firstly run the following command to add secret variable (STRING can be any string)

export GITHUB_WEBHOOK_SECRET=STRING

After Secret is set, Github will add header x-hub-signature as sha1=SIGNATURE when request is sent, wherein SIGNATURE is the HMAC hex digest of body, with key Secret, and algorithm sha1
Through verification of Secret, We can make sure that only who know Secret, can send correct request with header x-hub-signature, or else it will be rejected
The above code add compatibility for situation when Secret is not set, namely if variable GITHUB_WEBHOOK_SECRET is not added, the handling logic will be the same as origin, without any verification

Build via Local Hook

If the project need to be built after pull updates, the building command can be added in the end of variable command, such as && npm run build, but building command of different project may not be the same, furthermore building command of some project can be complicated, git’s local hook can be set to handle these kind of situation

cd /PATH/TO/PROJECT/.git/hooks

nano post-merge

#!/bin/sh
SHELL_SCRIPT

chmod +x post-merge

Here /PATH/TO/PROJECT/ is the directory location of the project, SHELL_SCRIPT can be any Shell script
Since git pull is combination of git fetch and git merge, the pull updates will trigger post-merge hook
New added file has not execute permission by default, so we need to add x bit via chmod

Deploy Application Online

Persistence and automation need to be fulfill to deploy application online, namely the project should be always running, and if the server is reboot, the project should run automatically

Automatically Create Variable

Script for variable creation in /etc/profile.d/ will run automatically when server reboot, so a setting script is added in it

nono /etc/profile.d/github-webhook.sh

export GITHUB_WEBHOOK_PORT=NUMBER
export GITHUB_WEBHOOK_SECRET=STRING

Run the following command to make the variable creation to take effect at once

source /etc/profile

Run Application via pm2

pm2 can guarantee sustained running of Node application, and functionality of monitoring, hot patching and so on can be fulfilled via configuration

npm install pm2 -g

pm2 start app.js --name github-webhook

Automatically Run After Reboot

pm2 has build-in support to config the original application to auto-runn when start up, which can be fulfilled by the following command

pm2 startup

pm2 save

pm2 startup will create and enable service which will automatically run when start up, pm2 save will save the current pm2 running application, as restore content after reboot

Summarize

In this automatically deployment process which base on Github webhook, the following technologies have been used:

http，child_process and crypto module of Node.js
post-merge Shell hook of Git
Automatically variable setting via profile and pm2 toolkit

Utilize Nginx to fulfill 301 redirect to root domain of https

Chanvin Xiao — Sat, 23 May 2020 02:23:42 +0000

Base on consideration of SEO and security, the redirection should be 301, which will be handled generally via Nginx

Result to Accomplish

The following address need to be redirected to the root domain of https https://chanvinxiao.com

http://chanvinxiao.com （http without www）
http://www.chanvinxiao.com （http with www）
https://www.chanvinxiao.com （https with www）

Different between 301 and 302

301 is to redirect permanently, 302 is to redirect temporary, and the major distinction is lay in the handling way of search engine

301：search engine will transfer weight and PR value
302：search engine will not handle additionally

Now I want search engine treat the original url as non-existence anymore, and completely shift to the new address, so 301 will be used

Redirect Http to Https

The simplest way is to return a redirected address, and add a 301 status code in the middle (or else default 302 will be supposed)

server {
  listen 80;
  return 301 https://$host$request_uri;
}

return and rewrite are both rewrite directive of Nginx, since here the path don't need to be changed, return will be more convenient
$host and $request_uri are both Nginx http module's embedded variables, the combination of these two parameters is equivalent to getting rid of http:// for request url

Www Redirect to Root Domain

Only need to handle in https, because all http has been redirected to https

server {
  listen 443 ssl;
  server_name ~^(?<www>www\.)?(.+)$;
  if ( $www ) {
    return 301 https://$2$request_uri;
  }
...

Regular Expression matching of server_name have been utilized, which can been enabled via adding ~ in front of its value, and PCRE grammar is supported
Regex usage is to determine if there's prefix www, and to capture root domain, which will generate two variable, one is name capture variable $www, the other is numeric capture variable $2
numeric capture variable is not supported in if, or else there will be error thrown (unknown "1" variable), that's why ?<www> is added to assign $1 to $www

Reduce Redirect Times

The result is fulfilled by the above settings, but there's a flaw: http://www.chanvinxiao.com will redirect to https://www.chanvinxiao.com firstly, then redirect again to https://chanvinxiao.com. redirecting twice is definitely not as good as redirecting once, so one-stop would be better, and the http config will be modified as follow:

server {
  listen 80;
  server_name ~^(?:www\.)?(.+)$;
  return 301 https://$1$request_uri;
}

In the corresponding server of http, server_name also is changed to regex mode, and $host is substituted with captured root domain $1
Www will be removed directly, so it's not necessary to capture, use ?: symbol to fulfill grouping without capturing, so the following root domain becomes $1
Thus the result is that no matter there is www or not, it will be redirected to https domain without www

Summary

There is not need to appoint specific domain in the above config, so it will be convenient to be compatible and migrate, and the following feature of Nginx is used:

Regular expression matching of server_name
return directive which receive status code and address
$host and $request_uri embedded variables

Value as Attribute and Property with Vue.js

Chanvin Xiao — Sun, 17 May 2020 01:49:01 +0000

Attribute and property are confusing concepts in web development, and for value, because of its particularity, are more easy to puzzle us, I'm trying to distinguish them with examples

Concept of Attribute and Property

To put it simplely, attribute is for element tag, and property is for element object, such as:

<input id="input" value="test value">
<script>
let input = document.getElementById('input');
console.log(input.getAttribute('value')); // test value
console.log(input.value); // test value
</script>

Value attribute of input is defined through value="test value" of tag, and can be gotten via input.getAttribute('value'), and can be updated via input.setAttribute('value', 'New Value')
Value property of input can be gotten and updated via input.value，and the initial value is the same as attribute

Binding of Attribute and Property

At the very beginning, if the attribute value is updated, the property value will be changed too.

But if property value is updated (input in the input element or assign new value to input.value), the attribute value will not be changed, further more, if attribute value is updated again now, the property value will not be changed with it, such as this animation shown, and you can also try to operate in this page

Actually, the dirty value flag is taking effect. the initial value of dirty value flag is false, namely update of attribute value will be changed, but once property value is updated by user interaction, value of dirty value flag will become true, namely update of attribute value will not affect corresponding property value

So in the real world project, we're generally handling value as property

Value handled by Vue.js

Usually use :value

v-bind of Vue.js, is handling attribute normally, if need to be handled as property, we need to add .prop

But v-bind:value are mostly handling property value by default, because it's transformed forcibly

<input id="input" :value="'test value'" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let input = new Vue({
  el: '#input',
  mounted () {
    console.log(this.$el.getAttribute('value')); // null
    console.log(this.$el.value); // test value
    console.log(this._vnode.data) // {attrs: {id: "input"}, domProps: {value: "test value"}}
  }
});
</script>

Visible, Vue.js treat value as domProps of VNode's data, not attrs, so it will become value as property after mounted

In the source code of Vue.js, the handling of forcibly transfer property is as following

// src/compiler/parser/index.js
function processAttrs (el) {
...
        if ((modifiers && modifiers.prop) || (
          !el.component && platformMustUseProp(el.tag, el.attrsMap.type, name)
        )) {
          addProp(el, name, value, list[i], isDynamic)
        } else {
          addAttr(el, name, value, list[i], isDynamic)
        }

inside it, definition of platformMustUseProp in web platform is as following:

// src/platforms/web/util/attrs.js
const acceptValue = makeMap('input,textarea,option,select,progress')
export const mustUseProp = (tag: string, type: ?string, attr: string): boolean => {
  return (
    (attr === 'value' && acceptValue(tag)) && type !== 'button' ||
    (attr === 'selected' && tag === 'option') ||
    (attr === 'checked' && tag === 'input') ||
    (attr === 'muted' && tag === 'video')
  )
}

From the foregoing, value of input whose type is not button, textarea, option, select and progress will forcibly to be property, without the need to set :value.prop

For example, textarea tab does not support value attribute, so the value of following code will not shown in the textarea

<textarea value="test value"></textarea>

But in Vue.js, the following code can successfully bind to value property and show in the textarea

<textarea :value="'test value'"></textarea>

Explicitly use :value.prop

One more thing deserves attention in the above Vue.js source code is that, to be treated forcibly as property, !el.component need to be met, namely it's not a dynamical component, because el.component of dynamical component will be its is attribute value

Namely v-bind of dynamical component will be treated as attribute, if need to be as property, the .prop need to be added, such as:

<div id="app">
  <component :is="element" :value.prop="'test value'"></component>
  <button @click="change">Change</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
  el: '#app',
  data: {
    element: 'input'
  },
  methods: {
    change () {
      this.element = 'input' === this.element ? 'textarea' : 'input';
    }
  }
});
</script>

If in the above component, substitute :value.prop with .prop, when switch to textarea, the value will not show in the textarea, you can click to switch tab to see it in this page

Summary

The binding relationship of value as attribute and property will invalid after property value update by user interaction
Vue.js usually use :value to treat value as property
Dynamic component of Vue.js need to use :value.prop to treat value as property

Use Vue.js to rewrite React's Official Tutorial Tic Tac Toe

Chanvin Xiao — Tue, 05 May 2020 01:36:55 +0000

React's official tutorial tic tac toe do a good job to guide the newbie to enter React's world step by step, I think that similar tutorial will inspire Vue.js's newbie, so I use Vue.js to rewrite it

First you can see the final result, and try to click and experience, we will fulfill this effect gradually

Initial Code

Initial Effect

Open Initial status and edit directly, or copy the code to corresponding files in the same directory

For now it's just a simple tic tac toe grid, and a hard-coded "Next Player"

Initial Code Description

Now three component has been defined, which are Square, Board and Game respectively

Square is just a normal button now

Vue.component('Square', {
  template: `
    <button class="square">
      {{ /* TODO */ }}
    </button>
  `
})

After component is defined like this, other component can use <Square /> to reference this component directly

Board component is composed by current status and 9 Square

Vue.component('Board', {
  data() {
    return {
      status: `${nextLabel}X`,
      board: [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8]
      ]
    }
  },
  template: `
    <div>
      <div class="status">{{ status }}</div>
      <div class="board-row" v-for="(row, index) in board" :key="index">
        <Square v-for="square in row" :key="square" />
      </div>
    </div>
  `
});

the current status and value of board is defined in data, thus you can use {{ status }} to reference the value of status, and use v-for to iterate two dimension array board twice to compose tic tac toe grid
data in component must be a function which return a object, but not literal object
v-for must have key to make sure performance without alert

Game component is formed by Board, and status and history which will be added later

Vue.component('Game', {
  template: `
    <div class="game">
      <div class="game-board">
        <Board />
      </div>
      <div class="game-info">
        <div>{{ /* status */ }}</div>
        <ol>{{ /* TODO */ }}</ol>
      </div>
    </div>
  `
});

Add Data Handling

Add Props

Deliver a prop whose name is value to Square in Board

<Square v-for="square in row" :key="square" :value="square" />

:value is short for v-bind:value, which means that its value is an expression

Add value prop in the component definition and template of Square

Vue.component('Square', {
  props: ['value'],
  template: `
    <button class="square">
      {{ value }}
    </button>
  `
})

props are variables which parent component can deliver to child component, set corresponding attribute in tag when parent component invoke child component, and the usage method is the same as data in child component

Current code and effect: number 0 - 8 are filled into the tic tac toe respectively

Add Interactive

Add click event to button element to update value

Vue.component('Square', {
  //props: ['value'],
  data() {
    return {
      value: null
    }
  },
  methods: {
    setValue() {
      this.value = 'X';
    }
  },
  template: `
    <button class="square" @click="setValue">
      {{ value }}
    </button>
  `
})

@click is short for v-on:click, whose value is the function which will run when click, here set to setValue which is defined in methods of the component
Child component can not update data of parent directly, so change value from props to data
data's value will be updated, and corresponding template will update automatically to display the content.

Current Code and Effect: click the tic tac toe grip, the cell will be filled by X

Improve Game

Data Upward

To alternatively play and confirm winner, we need to determine status of every cell uniformly, so the value will be lifted to Board

Add data squares and method handleClick to Board

Vue.component('Board', {
  data() {
    return {
      ...
      squares: Array(9).fill(null),
    }
  },
  methods: {
    handleClick(i) {
      const squares = this.squares.slice();
      if (squares[i]){
        alert('Place was taken!');
        return
      }
      squares[i] = 'X';
      this.squares = squares;
    }
  },
  template: `
    ...
      <div class="board-row" v-for="(row, index) in board" :key="index">
        <Square v-for="square in row" :key="square" :value="squares[square]" @click="handleClick(square)" />

Init squares to a array with 9 null, so the tic tac toe grip will be empty
handleClick accepts parameter of corresponding cell number, and will update corresponding square element
the event handler is not the return value of handleClick(square), but handleClick, and square will be parameter when trigger

Trigger click event of Board in the click event handler of Square

Vue.component('Square', {
  props: ['value'],
  methods: {
    setValue() {
      this.$emit('click');
    }
  },

value need to be changed from data back to props
$emit can invoke event handler which parent component deliver
value of prop is updated in parent component, and the child template will update display content correspondingly

Current Code and Effect: click the tic tac toe grid, if it's not taken, it will be filled with X

Play Alternatively

Add data xIsNext, and switch when click

data() {
  return {
    ...
    xIsNext: true
  }
},
methods: {
    handleClick(i) {
      ...
      squares[i] = this.xIsNext ? 'X' : 'O';
      this.squares = squares;
      this.xIsNext = !this.xIsNext;
      this.status = `${nextLabel}${this.xIsNext ? 'X' : 'O'}`;

Init xIsNext as true, which means X will be first player
After click, reverse xIsNext to switch
Update status to the next player

current code and effect: click the tic tac toe grid, X and O will play alternatively

Determine Winner

Add function the calculate winner

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

Enumerate the combination which will win the game, and compare with value of squares array

Add winner logic of click handler function

if (calculateWinner(squares)) {
  alert('Winner was determined!');
  return;
}
...
const winner = calculateWinner(squares);
if (winner) {
  this.status = 'Winner: ' + winner;
  return;
}

After click, if there's winner before, than the clicking is invalid
After placement proceeding, judge winner again, and update status

Current code and effect: status and click handler will be updated after one side win

Add Time Tour

Save History Record

To fulfill functionality of retraction, we need to record entire status of every placement, equivalent to the snapshot of the chessboard, which will became a history record, upward to the Game component

Add history data in Game, transfer xIsNext, status and handleClick method from Board to Game

Vue.component('Game', {
  data() {
    return {
      history: [{
        squares: Array(9).fill(null),
      }],
      xIsNext: true,
      status: `${nextLabel}X`
    }
  },
  methods: {
    handleClick(i) {
      const history = this.history;
      const current = history[history.length - 1]
      const squares = current.squares.slice();
      ...
      squares[i] = this.xIsNext ? 'X' : 'O';
      history.push({
        squares: squares
      });
      ...
    }
  },
  template: `
    <div class="game">
      <div class="game-board">
        <Board :squares="history[history.length - 1].squares" @click="handleClick" />
  `
})

Utilize the last record of history to assign value to squares (only one record for now)
After placement, squares will record the placement, and history will add a record

Add prop squares to Board, and update handleClick to invoke event handler of parent component

Vue.component('Board', {
  props: ['squares'],
  methods: {
    handleClick(i) {
      this.$emit('click', i);
    }
  },

Current code and effect: status location is updated, and store history is recorded

Show History Step Record

Iterate history records to display, and bind click event, show record of corresponding step via update of stepNumber

Vue.component('Game', {
  data() {
    ...
      stepNumber: 0,
    ...
    }
  },
  methods: {
    handleClick(i) {
      const history = this.history.slice(0, this.stepNumber + 1);
      ...
      this.history = history.concat([{
        squares: squares
      }]);
      this.stepNumber = history.length;
      ...
    },
    jumpTo(step) {
      if(step === this.stepNumber){
        alert('Already at ' + (0 === step ? 'Beginning' : `Step#${step}!`));
        return;
      }
      this.stepNumber = step;
      this.xIsNext = (step % 2) === 0;
      this.status = `${nextLabel}${this.xIsNext ? 'X' : 'O'}`;
    }
  },
  template: `
    <div class="game">
      <div class="game-board">
        <Board :squares="history[this.stepNumber].squares" @click="handleClick" />
      </div>
      <div class="game-info">
        <div>{{ status }}</div>
        <ol>
          <li v-for="(squares, index) in history" :key="index" :class="{'move-on': index === stepNumber}">
            <button @click="jumpTo(index)">{{ 0 === index ? 'Go to start' : 'Go to move#' + index }}</button>
   ...
  `
})

Add stepNumber in Game, and init it as 0, record current display step
Utilize corresponding step of this.stepNumber to assign value to prop squares of Board
Handle history with current step as foundation in handleClick, and update stepNumber
Add method jumpTo to handle display of going back to history, update stepNumber, xIsNext and status

Current code and effect: there will be one more history step after every placement, and click the step can return to this step

Summarize

Game Accomplishment

Place cell alternatively
Determine Winner
Retract and play again

Technology Showcase

v-bind: bind data in template
v-for: Iterate array in template
v-on, $emit: transfer and trigger event between components
data: define in component and automatically update in template
prop: transfer between components and automatically update in template