Hank X Front-End Engineer Run, Build, Enjoy

Use Husky to manage git hooks

Git hooks is a powerful tool to make your life easier.

It fires off custom scripts when certain important actions occur. one common scene like: you want to lint your code every time when you commit changes, so that your code has a good style and following your team’s code specification. Or you want to run test before pushing your code/

Like many other Version Control Systems, Git has a way to fire off custom scripts when certain important actions occur. There are two groups of these hooks: client-side and server-side. Client-side hooks are triggered by operations such as committing and merging, while server-side hooks run on network operations such as receiving pushed commits. You can use these hooks for all sorts of reasons.

With git hooks, you can make these actions automatically.

While husky is a tool to make Git hooks easier to use. To use it is very easy

First you install it as a development dependency with npm:

npm install husky --save-dev

OR yarn:

yarn add husky -D

Then in your package.json , add:

{
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint",
      "pre-push": "yarn test",
      "...": "..."
    }
  }
}

In the example, we added 2 hooks, pre-commit and pre-push, they are meant what they named.

  • pre-commit means, every time you run git commit, it will run yarn lint first, and commit the code if yarn lint passes without error.
  • pre-push run command yarn test when you run git push
  • yarn lint and yarn test are commands that you define in your scripts in package.json. normally those commands that you runs manually, like yarn start or yarn dev, etc. you can add any command you want and run the, in the hooks.

Pretty straight forward and easy :)

Use document.execCommand to set value in editable field and trigger events

NOTE: This document.execCommand api has been marked as Obsolete. However, given the situation that new API is still under construction, so it’s still safe to use it for now and maybe for next few years.

To set value in editable filed like input, textarea with javascript is a common requirement in browser extension or other script development. Normally you just need to do something like document.querySelector('input').value="text you want to set" to get the job done easily and quickly.

But life is not always so easy. Actually most of the time you need to do more in browser extension development. The input fileds always bond many events like beforeinput, input,change, or even focus, active. If you just set the value by javascript, you will also need to trigger these events manually in next steps.

And before that you will need to find out what events you need to trigger. It gonna take you some time.

With this document.execCoomand, you can do it easily.

The syntax is like this:

document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

There is a insertTest you can use to set value.

Inserts the given plain text at the insertion point (deletes selection).

so to insert text in to a field, you just, focus the field -> select the field -> execute the command, like so:

const element = document.querySelector("#target")
element.focus()
element.select()
document.execCommand("insertText", false, "text you want to set")

The best of this API is that, it imitates user input event, make it like human being activity, trigger all bond events on the filed.

This API is very powerful, there are a bunch of commands you can use to make you life easier.

You can read it’s doc on MDN to get more details: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

How to trigger click event in Gmail

If you want to hack Gmail UI, to build web extension or any other similar tool that works on top of Gmail, you always want or need to trigger some DOM events in Gmail UI, like you want to click on some buttons/icons, to send out email, to make the compose window pop out, etc.

You can’t do it by simply use click function, either by Vanilla JS or jQuery, either click or trigger function can not achieve your goal.

You need to do this by using Document.createEvent().

Take click for example, you want to click an icon:

  const mouseDown = document.createEvent('MouseEvents');
  mouseDown.initEvent('mousedown', true, false);
  icon.dispatchEvent(mouseDown);

  const mouseUp = document.createEvent('MouseEvents');
  mouseUp.initEvent('mouseup', true, false);
  icon.dispatchEvent(mouseUp);

You may want to make it as a function so that you can use it click any element.

Boost your Frontend development speed in China

Waiting for something is wasting time, especially when development, you always need to wait for compiling, wait for install dependencies…

And if you are in China, this waiting time will be much longer because of some well known reason.

Here are some changes that will save you some time in China if you are doing frontend development.

Ruby and Rails

change your gem source to China mirror, source: https://ruby-china.org/

gem source -a https://gems.ruby-china.com

npm

change your npm source to China mirror, source , source: https://developer.aliyun.com/mirror/NPM

npm config set registry https://registry.npm.taobao.org

or you can also install a cnpm, use cnpm rather than npm, to avoid change the source url permanently.

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

yarn

Same as npm.

yarn config set registry https://registry.npm.taobao.org --global

there is no cyarn though

ubuntu

change sourcelist, check this post

homebrew

change homebrew core source and repo to USTC (University of Science and Technology of China) Mirror.

  • change brew.git:

     cd "$(brew --repo)"
     git remote set-url origin https://mirrors.ustc.edu.cn/brew.git
    
  • change homebrew-core.git

     cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
     git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git
    
  • change homebrew bottles source

    for bash user

     echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles' >> ~/.bash_profile
     source ~/.bash_profile
    

    for zsh user

     echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles' >> ~/.zshrc
     source ~/.zshrc
    

RIP, Kobe Bryant

RIP

RIP, Kobe Bryant

2019 nCoV

It’s 23th Jan already.

2019-nCoV virus is raging in China and some other countries, and also lunar new year tomorrow.

Just like 17 years ago, SARS everywhere. Back then I was a senior middle school student. Sat in the classroom every day, the teachers tried sterilization by boiling vinegar in the classroom.

Luckily it’s spring soon, SARS gone quietly just like how it came. Hundreds of people died, lots of them were doctors and nurses. Feel so sad about them.

Then in 2009, there was H1N1. I was at university. I only saw the news on TV and the internet. Weird thing is, in my memory, it was not as bad as in 2003. I was busying getting prepared for job, nothing different. But I just found out today on the internet, about 648 people died in China mainland, while it was 349 in 2003 SARS. Kind of shock news to me.

And now, more than 600 people in China mainland got this virus, 17 of them dead. Heard from some news there would be more soon since Wuhan is a big city and many people who work there will go back to their own town to celebrate the lunar new year.

In the meantime in the US, CDC says about 6600 died because of the flu.

And in Australia, the fire has burnt for months and it’s still burning.

So many disasters this year. I just wish everything will be OK for everyone and no more disaster to every country and every human being.

how to keep preview file in VS Code quickly

You are a VS Code master, you barely use mouse when coding.

You want to edit a file A in your project.

You open A via hotkey, CMD+Shif+R (yes, I came from eclipse).

Before you editing A, you want to check some reference in another file B.

You open B with same hotkey, you got your information.

Then you want to go back to A to make your editing.

Where is my file A? That one with 1000 rows of code, it was there just before.

Alright I can just open it again, CMD SHIFT R, yes, it comes back.

WTF, Why is B gone?

This happens a lot before to me, I have to double click the file in the project file list to keep it open.

It’s because VS Code thinks that you just want to preview the file when you single click the file or open it with hotkey.

But it’s really annoying that you want to open multiple files in editor and keep them open.

So here is a quicky way to do this:

Press a CMD + S (Ctrl+S on Windows, that’s hotkey for save ) once you open the file. You will notice that the file name font in tab becomes regular from italic.

Change Ubuntu 18.04 update source to mirror site in China

To use ubuntu is not a easy thing, and if you are in China, it’s even more difficult. Once you want to update your ubuntu. you’d find it’s very slow. Because of some well known reason.

So it’s better to change the update source to some mirror site in China.

Here are several famous mirror sites. What you need todo is pick one from below and edit etc/apt/sources.list, replace the content in this file.

Better backup you etc/apt/sources.list before you do this

163 (netease)

source:http://mirrors.163.com/

deb http://mirrors.163.com/ubuntu/ bionic main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ bionic-security main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ bionic-updates main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ bionic-proposed main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ bionic-backports main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ bionic main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ bionic-security main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ bionic-updates main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ bionic-proposed main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ bionic-backports main restricted universe multiverse

alibaba (aliyun)

source:https://opsx.alibaba.com/mirror

deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse

And here are also two Chinese university mirror, use them only if you are in Chinese university.

tsinghua university

deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic main restricted universe multiverse
deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-updates main restricted universe multiverse
deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-updates main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-backports main restricted universe multiverse
deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-backports main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-security main restricted universe multiverse
deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-security main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-proposed main restricted universe multiverse
deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-proposed main restricted universe multiverse

ustc (university of science and technology of China)

deb https://mirrors.ustc.edu.cn/ubuntu/ bionic main restricted universe multiverse
deb-src https://mirrors.ustc.edu.cn/ubuntu/ bionic main restricted universe multiverse
deb https://mirrors.ustc.edu.cn/ubuntu/ bionic-updates main restricted universe multiverse
deb-src https://mirrors.ustc.edu.cn/ubuntu/ bionic-updates main restricted universe multiverse
deb https://mirrors.ustc.edu.cn/ubuntu/ bionic-backports main restricted universe multiverse
deb-src https://mirrors.ustc.edu.cn/ubuntu/ bionic-backports main restricted universe multiverse
deb https://mirrors.ustc.edu.cn/ubuntu/ bionic-security main restricted universe multiverse
deb-src https://mirrors.ustc.edu.cn/ubuntu/ bionic-security main restricted universe multiverse
deb https://mirrors.ustc.edu.cn/ubuntu/ bionic-proposed main restricted universe multiverse
deb-src https://mirrors.ustc.edu.cn/ubuntu/ bionic-proposed main restricted universe multiverse

Enjoy:)

Disable Web Search Result in Windows Search 2019

TL;DR: download this windows reg file and double click to import it. OR

  • copy the code from below
  • open you favourite text editor, or just use notepad
  • paste the code into it
  • save the file with .reg extension
  • double click the file
Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows Search ]
"ConnectedSearchUseWebOverMeteredConnections"=dword:00000000
"AllowCortana"=dword:00000000
"DisableWebSearch "=dword:00000001
"ConnectedSearchUseWeb"=dword:00000000

[HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Search]
"CortanaConsent"=dword:00000000
"BingSearchEnabled"=dword:00000000
"AllowSearchToUseLocation"=dword:00000000

Windows is promoting it’s Cortana and Bing search for a long time. One of the most annoying thing is that it’s showing web search content when you search in start menu.

So you press Windows button, type some keywords, all you want to do is just access your installed app or file quickly, but then you saw some shitty stuff in the result list.

Yes, it’s showing web search content and even some so called search suggesttion. it’s based on your keywords and some trends on the web, since you are searching how to disable this, I know that you also think it’s totally garbage.

In the beginning, Windows gave us an option in the search menu to turn this off. But then Windows known that most of the users hated it, so it just removed this option…

I have to use group policy, regeditor to disable it, and have to search for this every time when it updates.

To do it step by step is a bit complicated and it’s totally a waste of time. So I just create this reg file so that anyone who want to do this can do it by one click.

Comment for these reg code in case someone doubt it:


"ConnectedSearchUseWebOverMeteredConnections"=dword:00000000 // _disable web search use mobile connection

"AllowCortana"=dword:00000000// disable Cortana

"DisableWebSearch "=dword:00000001 // disable web search

"ConnectedSearchUseWeb"=dword:00000000 // disabled web searech connection

"CortanaConsent"=dword:00000000 // disable Cortana

"BingSearchEnabled"=dword:00000000 // disable bing search in start menu

"AllowSearchToUseLocation"=dword:00000000 // disable search feature access your location


Enjoy :)

MySQL: Sort Number in String Format

TL;DR: use key_name * 1; like

 select id, name, age from users order by salary * 1

Well, it’s better to store number data in number format in the database. But there is always accident, sometimes you or your colleague just stored some number into database with string format, of cause with some reason.

And one day you need to get data from that table and sort the result by that string-number column. Then you found something is not right.

If you run command like this:

select "1000" > "2"

you will find that the result is 0. it means, 100 < 2. that’s because mysql just compare these 2 values in as string. thus 2 > 1.

There are several work around to make this works, like use conv(). So write your sql like this:

select * from users order by conv(`salary`, 10, 10)

conv(original_value, from_base, to_base) is a mysql function, to convert a value from a base to another base, like you can also convert a numeric base system 2 to numeric base system 10.

But there is another shorter and cooler way to do this. that’s mul the value by 1. Like so:

select * from users order by salary * 1

Work like a charm.

Need to notice that if the value is too large, the result will be in Scientific notation like 1e17.

-EOF-

Chrome team just released several new official themes

I never use Chrome theme before, not a fan of customized theme because most of them are too stylish for me.

But Chrome team just released sever official themes days ago, they are clean and fresh, most of them seem for programmers. Like Oceanic, High Contrast Colorful.

You can get them from here:  https://chrome.google.com/webstore/category/collection/chrome_themes

How to block HTTPS websites on Router with Merlin

Merlin is a very powerful Router OS.

The best feature I like is its plugin system. there you can install many third-party apps like Adblock, web shell, AppleDNS. Most of the great apps are already in its built-insoftware center you can just install them with 1 click.

It also has a `Firewall`,  here you can add some rules to let the router block some URL or hosts or even IP that you don't want the users access.  

But as it says, it has some limitations:

So basically, since almost all websites are with HTTPS now, this Firewall has actually been useless now.

Of cause, since it's a mini Linux system, you can log in to it in shell and edit  hosts, but it's not that convenient to do things with the shell. 

Here is a killer app, it's been taken down because of Chinese policy, it's called shad0w20cks(you know it). 

In it's DNS Settings, there is a textarea called customize dnsmayou can just add your hosts like rules in it. like if you want to block baidu.com and weibo.com:

address=/baidu.com/127.0.0.1

address=/weibo.com/127.0.0.1

And then save.

works like a charm :D

End.

How to remove experimentalDecorators warning in VSCode

Problem

Working on a Vue project with VSCode as code editor. Using typescript in the Vue component.

While VSCode keeps warning this message on the declaration of Component class name. Which is very annoying.

Experimental support for decorators is a feature that is subject to change in a future release. Set the ‘experimentalDecorators’ option to remove this warning.

Tried to search a bit, in the VSCode github, they tell you to set experimentalDecorators to true in VSCode settings, and restart, however it's not working.

Solution

you need to modify the typescript configuration. In tsconfig.json file (if you don't have one, create it in your project's root folder). Add this:

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "allowJs": true
    }
}

Both experimentalDecorators and allowJs needs to be set to true

And then restart VSCode.

Done.

zsh 主题 powerlevel9k 安装配置记录


zsh with powerlevel9k theme

安装:

git clone https://github.com/bhilburn/powerlevel9k.git ~/.oh-my-zsh/custom/themes/powerlevel9k

启用和配置

编辑 `~/.zshrc`

  • 启用

ZSH_THEME="powerlevel9k/powerlevel9k"

  • 改变配置

POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(dir vcs) #左侧显示全路径和Git状态

POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=(time ram) #右侧显示时间和内存

我本人需要的就这些,显示结果如题图。更多详细配置见:https://github.com/bhilburn/powerlevel9k

遇到乱码在iterm2的配置里面修改字体即可。

Github中国加速hosts列表

因为众所周知的原因,github对很多中国用户来说有些慢。特别在clone的时候。

可以通过修改hosts来解决。最新的hosts列表如下:

# GitHub Start  updated 15-1-2019
192.30.253.112 github.com
192.30.253.118 gist.github.com
151.101.112.133 assets-cdn.github.com
151.101.184.133 raw.githubusercontent.com
151.101.112.133 gist.githubusercontent.com
151.101.184.133 cloud.githubusercontent.com
151.101.112.133 camo.githubusercontent.com
151.101.112.133 avatars0.githubusercontent.com
151.101.112.133 avatars1.githubusercontent.com
151.101.184.133 avatars2.githubusercontent.com
151.101.12.133 avatars3.githubusercontent.com
151.101.12.133 avatars4.githubusercontent.com
151.101.184.133 avatars5.githubusercontent.com
151.101.184.133 avatars6.githubusercontent.com
151.101.184.133 avatars7.githubusercontent.com
151.101.12.133 avatars8.githubusercontent.com
# GitHub End

iTerm2 + zsh + oh my zsh 安装和配置


https://cdn-images-1.medium.com/max/1600/1*QCDLBTPMt3S7G0JOQbD68A.png

OSX的默认终端terminal功能比较基础,对于普通用户来说不是非常友好,界面也丑丑的。以上是使用iterm2 + zsh + oh my zsh 之后的效果。

除了界面很好看而外,还能实现诸如显示当前路径、系统资源占用、git状态等信息。且拥有丰富的可定制化选项,让你可以打造自己的终端。

接下来就来一步步定制自己的终端吧。

安装 Homebrew

打开终端,粘贴如下代码, 这将在你的机器上安装Homebrew,这是一个包管理工具。类似ubuntu里面的 apt.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装 iTerm2

这是用来替代terminal的工具,既可以去官网下载:https://www.iterm2.com/downloads.html

也可以利用上面安装好的 Homebrew 直接安装:

brew cask install iterm2

安装 zsh

还是直接用 homebrew 来安装:

brew install zsh

安装 oh-my-zsh

如果不安装 oh-my-zsh的话,zsh会比较难用。OMZ 是一个开源的 zsh 配置管理工具,拥有很多丰富的功能、扩展和皮肤来让定制你的zsh。安装代码如下

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

自定义皮肤:

网上有很多的自定义皮肤可以供下载使用。个人比较喜欢现在比较流行的 Material 风格,无论是 vscode 还是其他编辑器,均有这个风格的皮肤,非常清新。预览图如下:


https://github.com/MartinSeeler/iterm2-material-design/blob/master/img/screen-mock-1.jpg

1.下载皮肤,在终端中粘贴以下代码:

$ cd Downloads
$ curl -O https://raw.githubusercontent.com/MartinSeeler/iterm2-material-design/master/material-design-colors.itermcolors

2. 打开 iTerm2, 然后到设置(preferences)—— 用户(profiles)—— 颜色(colors)

3. 点击底部的 预设颜色... (Color Presets...)

4. 点击导入,然后找到下载文件夹里面刚才下载的扩展名为itermcolors的文件

5. 再从下拉菜单中选择刚导入的皮肤文件。


加载皮肤配置

管理扩展

oh-my-zsh 内绑定了不少扩展,这里是列表:https://github.com/robbyrussell/oh-my-zsh/wiki/Plugins

绝大多数的扩展都未默认启用,若你想启用某些扩展,需要修改其配置文件。

在 iterm2 中输入以下代码来编辑其配置文件:

nano ~/.zshrc

在文件中找到如下代码:

# Add wisely, as too many plugins slow down shell startup.
plugins=(
  git
)

这里就是配置扩展的地方,可以看到其默认启动了git扩展。要添加新扩展只要在括号里加名字即可,要注意的是,扩展越多,终端启动和运行就越慢,所以按需添加,比如我加入python常用工具pip:

plugins=(
  git
  pip
)

这样就差不多配置好了。更多配置见这里:https://github.com/robbyrussell/oh-my-zsh/wiki

Git: 删除本地所有分支并保留其中一个

本地分支多了想删掉一些。(下面所有的命令中运行时均需要把 BRANCH_NAME 换成自己要操作的分支的名字)

常用的命令是

git branch -D `BRANCH_NAME`

可是这样只能一个个删除。批量删除并保留一个分支,比如 master 分支的命令可以用下面这条命令:

git branch | grep -v "BRANCH_NAME" | xargs git branch -D 

如果你要经常这么做的话,还可以给这条命令添加个短名:

alias gdbm="git branch | grep -v "BRANCH_NAME" | xargs git branch -D"

如果要保留多个分支,可以在足命令中添加多个分支的名字:master\|develop\|test_branch。

上面的命令就变成:

git branch | grep -v "master\|develop\|test_branch" | xargs git branch -D 

I won't reinstall my server again

So I reinstalled my server again.

lost all data.

won't do this again