Hank X Front-End Engineer Run, Build, 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.


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:



And then save.

works like a charm :D


How to remove experimentalDecorators warning in VSCode


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.


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.


zsh 主题 powerlevel9k 安装配置记录

zsh with powerlevel9k theme


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


编辑 `~/.zshrc`

  • 启用


  • 改变配置








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

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


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



安装 Homebrew

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

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

安装 iTerm2


也可以利用上面安装好的 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 还是其他编辑器,均有这个风格的皮肤,非常清新。预览图如下:



$ 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.




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"



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