Knowledge worth sharing

Recently I start to use Macbook Pro for software development. It is really painful that so many shortcut and software are different from Windows. I hope log it down could help some MAC new comers :)

Recommended install list

• homebrew
  • You could almost install everything through brew install <program name> or brew install --cask <program with GUI>
• iterm2
  • Better terminal in MAC
• Oh-My-Zsh
  • Change default shell to zsh with chsh -s $(which zsh)
• vscode
• Karabiner-Elements
  • brew install --cask Karabiner-Elements
  • Keyboard mapper, if you use your own keyboard you should install it!
• nvm
  • Handle Nodejs environment
• 超注音
  • Enable the ability to switch language by shift
• spectacle
  • Shortcut for docking windows
• awesome-vim-configuration
• manico
  • Best tool for launching app with custom shortcut
• Scroll Reverser
  • brew install --cask scroll-reverser
  • Seperate mouse / touchpad scroll direction setting
• diff-so-fancy
  • Make your git diff so fancy
  • brew install diff-so-fancy
  • git config --global core.pager "diff-so-fancy | less --tabs=4 -RFX"

Shortcut

• Mac shortcuts
• Spotify
• Chrome
• Zsh Git Alias
• Print screen area: command + control + shift + 4 (control is optional for copy to clipboard)
• Open link in new tab: command + click
• Delete file: command + backspace
• Lock screen: ctrl + command + q
• Close window: command + w
• Quit app: command + q
• Fullscreen/Normalscreen: ctrl + command + f
• Hide window: command + m
• Show window: Hold command + tab to the app, then hold option then release command
• Open application preference: command + ,
• Switch different window in same application: command + `
• Show desktop (fn) + F11

Settings

• Finder
  View > Show Status Bar, Show Path Bar
• Iterm
  Menu bar > iterm2 > Make iIerm2 default term

• VSCode

  • To use zsh, edit user settings:

    1 2	"terminal.integrated.shell.osx": "zsh", "terminal.integrated.fontFamily": "Menlo for Powerline"

  • Use terminal to open vscode:
    Command + Shift + P then Shell Command : Install code in PATH, then you can type code <folder path> to open vscode

• zsh
  • osx
  • zsh-completions
• Disable firefox and other apps notification sound
  • System Preferences > Notifications Choose Firefox and uncheck Play sound for notifications to get rid of the sound.

Things you need to know

• If you command + tab switch window and nothings come up, it is because there is no window for this application, to quit application just simply command + q, or you could open window for this application by top menu bar
• Spotlight is search engine inside your Mac
• Finder is File Manager
• Preview has functionality of painter

Read more

• Mac輸入法教學

學徒模式一書的架構是以一篇篇的主題連接起完整的學徒Roadmap，每篇中以情境 問題 解決方案 行動來引領學徒如我邁向軟體工藝之路，本次再讀此書深覺應身體力行，決定把一些書中提及的的行動實行於部落格內

正視你的無知

明天我將顯得更加愚昧，並習慣他。

大意

本篇訴說儘管已經熟悉某些技能並讓他人倚重，但總是會遇到自身所缺的知識，此時勇於放下自尊顯露無知，說不知道，問身邊的專家為什麼才是最快的學習途徑，特別是當你問問題的對象認為你知道問題的答案！

行動 - 列出五件工作中你不理解的事放在大家看的到的地方並持續更新這份清單

1. WebAssembly
2. Web Worker
3. How Vue core works?
4. How to write a Compiler?
5. How to build a LIFF Application?

Recommend plugins

• Make your diff so fancy - diff-so-fancy
• ZSH Git alias

Commands

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

# Remove untracked files
git clean -fd

# Delete local branch
git -D <branch_name>

# Delete remote branch, there are two options
git push <remote_name> :<branch_name>
git push <remote_name> --delete <branch_name>

# Remove tracking branches no longer on remote
git fetch -p && for branch in `git branch -vv | grep ': gone]' | awk '{print $1}'`; do git branch -D $branch; done

# Roll back only one folder to one commit
git checkout <hash_of_commit> <folder_name>

# Discard every change
git reset --hard

# Undo most recent commit
git reset HEAD~

# Rebase pull
git pull --rebase

# Push to target remote, -u is short for --set-upstream
git push -u <remote-name> <branch>

# Check commit's message and change(-p)
git log -p -2

# Update to latest submodules
git submodule update --recursive --remote

# Rebase
git rebase <commit SHA or branch>

# Rebase in interactive mode
git rebase -i <commit SHA or branch>

# Rebase interactive mode commands
git rebase --skip # you will need this if no change in some steps
git rebase --continue # After resolving conflict and git add <conflict file>

$ git rebase -i HEAD~3 # You need to edit "pick" part to tell git to do commands on the commit
pick 8b9100d commit message 1
pick f175572 commit message 2
pick 9bac799 commit message 3

# Rebase 9a4f60e..9bac799 onto 9a4f60e (3 commands)
#
# Commands:
# p, pick <commit> = use commit
# r, reword <commit> = use commit, but edit the commit message
# e, edit <commit> = use commit, but stop for amending
# s, squash <commit> = use commit, but meld into previous commit
# f, fixup <commit> = like "squash", but discard this commit's log message
# x, exec <command> = run command (the rest of the line) using shell
# d, drop <commit> = remove commit
# l, label <label> = label current HEAD with a name
# t, reset <label> = reset HEAD to a label
# m, merge [-C <commit> | -c <commit>] <label> [# <oneline>]
# .       create a merge commit using the original merge commit's
# .       message (or the oneline, if no original merge commit was
# .       specified). Use -c <commit> to reword the commit message.

Determine progressive JPEG by it’s content

From wiki-JPEG, we could see a baseline/progressive JPEG have byte marker mapping differently as following:

So to tell the image is progressive JPEG, we need to check if it contains 0xFF, 0xC0 which is c2ff in Two-byte hexadecimal display.

Measure compressed request size with curl, gzip and wc

To measure gzip sizing for a request, you don’t need to actually gzip it, just use pipe | to pipe the stream from curl to gzip to wc :

1
2
3
4
5
6
7
8
9
10
11
12
13

# before gzip
$ curl https://www.paddingleft.com | wc -c
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 57847    0 57847    0     0  99114      0 --:--:-- --:--:-- --:--:-- 99053
   57847

# after gzip
$ curl https://www.paddingleft.com | gzip | wc -c
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 57848    0 57848    0     0   111k      0 --:--:-- --:--:-- --:--:--  110k
   10443

As you can see, before gzip it’s 57847 bytes, after gzip it’s 10443 bytes.

Measure file size after gzip

You could do same things to measure a file gzip sizing by gzip with -c option, so it won’t actually gzip it.

1
2

$ gzip -c foo.jpg | wc -c
    53688

Switch mode

Insert mode

• i
  • insert before the char
• I
  • insert before the start of line
• a
  • append after the char
• A
  • append at the end of line

Normal mode

• ESC

Visual mode

• v
  • select a char
• V
  • select a line
• Ctrl + v
  • visual block mode

Move cursor(Normal mode)

char

• h
• j
• k
• l

Word

• w
  • go to next start of word
• e
  • go to end of word
• b
  • back to start of word

Block & Paragraph

• {}
  • paragraphs forward/backward
• ()
  • sentences forward/backward
• []
  • goto []
• [{ or }] or [( or )] or [[ or ]]
  • goto start/end of { or ( or [
• %
  • go to the match bracket

Window

• H
  • Top of window
• L
  • Last of window
• M
  • Middle of window

File

• gg
  • Start
• G
  • end of file

Others

• ctrl+o
  • previous jump position
• ctrl+i
  • next jump position
• g;
  • previous Change position
• g,
  • next Change position

Scroll

• zt
  • scroll current line to top
• zb
  • scroll current line to bottom
• zz
  • scroll current line to middle

Search

Search char in single line (keep normal mode)

• f/F
  • find char, forward/backward
  • abcABCabc, fC to find middle C
• t/T
  • Go to previous char before the char, forward/backward
  • foo.bar<> , go to r by t<
• ;
  • Repeat t/T/f/F
• ,
  • Reverse t/T/f/F

Search in file

• /
  • Search forward
• ?
  • Search backward
• n and N
  • next and previous
• *, #
  • search next/previous current word

Edit

• insert line before/after the current line
  • o, O
• join two line (keep mode)
  • j
• yank (copy) the current line
  • yy, Y
• Cut and change to insert mode
  • c
    • Change
  • s
    • substitute
  • C
    • Cut to end of line
  • S
    • Delete line and go to insert mode
• delete
  • d(keep mode)
    • d3j or 3dd
  • x and X
    • delete and backspace
• replace
  • r
• repeat action
  • .
• Macro
  • q + a~z
    • record macro to key in a~z
  • normal mode + q to quit recording
  • @ + a~z to excute macro
• Bookmark
  • m + a~z
    • bookmark current location to a~z
  • ` + a~z
    • go to a~z bookmark
  • ``
    • go to last position
• registers
  • “ + registerKey (a~z, 0~9, “+*/:%-)
    • :reg to see all registers
    • " is the default(unnamed) register
    • 0 is the default register for y(yank)
    • +, * is the system clipboard
    • / stores the latest search keyword
    • : stores the latest used command
    • % has the current file path
    • # has the last edited file
    • In command mode, ctrl+r+<register> to paste the register content into the command.
    • e.g. *:/s/<ctrl+r>//abc/gc to replace the lastest search keyword(*) to abc with confirmation dialog
    • e.g. "adw : delete the and save it to register a
    • e.g. "0p : paste from last yank
    • e.g. to copy foo and replace it with bar, yw then /bardw"0p
  • In search mode, you could press ctrl + r + register key to use the value in register
• Join lines
  • J

Concept

• There are three dimention in vim
  • window, file, project
• Use vim like your mouse
  • e.g. delete Bar in fooBarBeBaz, fBdfe

Useful vim command combination list

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# Make a word uppercase
gUe

# edit neariest word inside symbol, e.g. }
ci}

# edit neariest word outside symbol, e.g. ]
ca]

# edit and delete from cursor to next symbol, e.g. )
ct)

# edit and delete from cursor to previos symbol, e.g. )
cT)

# delete inside tag
dit

# replace word with yanked word
viwp

# Comment multi line, for example using # for comment
1. Ctrl + v to enter "Visual block mode"
2. Move cursor to select lines that need to be edited
3. Shift + i
4. #
5. Esc

# Show Line numbers
:set number

# Set relative line number
:set rnu

# get recent command list
q:

# Replace word A with word B
:%s/A/B/g

# Undo/Redo
u / Ctrl+r

# increase the first right number in the line
Ctrl + A

# decrease the first right number in the line
Ctrl + X

Use relative line mode with vim

In vim, you will frequently need to manipulate multi line with y3j 4yy or something else, relative line mode in IDE could help you easy to count the line number.

• In vim

1

:set rnu

• In VSCode:

1

"editor.lineNumbers": "relative",

Get difference before save

1

:w !diff % -

Explanation

• w without filename will save to stdin
• ! will excute bash in vim
• % is current file in vim
• diff with - will read content from stdin

vimrc

" is the comment symbol in .vimrc, could only be placed at the start of line

1
2
3
4
5
6
7
8
9
10

"Enable copy paste from system clibboard
set clipboard^=unnamed,unnamedplus

"Show differt cursor in different mode
let &t_SI = "\<Esc>]50;CursorShape=1\x7"
let &t_SR = "\<Esc>]50;CursorShape=2\x7"
let &t_EI = "\<Esc>]50;CursorShape=0\x7"

"Show relative line number
set rnu

Reference

• https://vim.rtorr.com/
• http://vimdoc.sourceforge.net/htmldoc/motion.html
• https://www.brianstorti.com/vim-registers/

When creating fixed navigation bar with padding, we got :

1
2
3

position: fixed;
width: 100%;
padding: 15px;

However you will find padding-right disappear, the reason is the width is window width + padding-left + padding-right. It is exceed the window, to fix it just use width: calc(100% - 30px) to reduce the width

1
2
3

position: fixed;
width: calc(100% - 30px);
padding: 15px;

See the Pen Fixed nav with correct padding by AsinChen (@Asing1001) on CodePen.

1. Go to create my applet page in IFTTT
2. Choose this > Webhooks > Receive a web request
3. Set any event name and click create trigger
4. Choose that > Line > Send message
5. Set Message as value1
6. Go to Webhooks
7. Click Documentation on the top right corner
8. Fill up the event name and value1 then try the curl example on the page
9. You could see a message deliver to LINE immdiately!

Steps to install windows service

1. Create a start.bat file with content npm start
2. Download nssm
3. Extract it and go to nssm/win64 folder
4. Type nssm install service-name from command prompt
5. Select start.bat as Application Path, you could also add your startup Arguments here
6. Start service with nssm start service-name
7. You could find it already registered as windows service :)

NSSM commands reference

You could type nssm anytime to see this document

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

M:\nssm-2.24\win64>nssm
NSSM: The non-sucking service manager
Version 2.24 64-bit, 2014-08-31
Usage: nssm <option> [<args> ...]

To show service installation GUI:

        nssm install [<servicename>]

To install a service without confirmation:

        nssm install <servicename> <app> [<args> ...]

To show service editing GUI:

        nssm edit <servicename>

To retrieve or edit service parameters directly:

        nssm get <servicename> <parameter> [<subparameter>]

        nssm set <servicename> <parameter> [<subparameter>] <value>

        nssm reset <servicename> <parameter> [<subparameter>]

To show service removal GUI:

        nssm remove [<servicename>]

To remove a service without confirmation:

        nssm remove <servicename> confirm

To manage a service:

        nssm start <servicename>

        nssm stop <servicename>

        nssm restart <servicename>

        nssm status <servicename>

        nssm rotate <servicename>

Reference

http://nssm.cc

Before start

1. Download and install redis from official site
2. redis excutable commands are under bin folder, configs are under etc folder, logs are under var folder
   Read more »