Posted on | Edited on |

Google Tag Manager(GTM) is a back office for quickly managing HTML on webpages, basically, it enables the maintainer to do Everything on their website without changing the code base. There are three major elements in GTM which are Tag, Variable, and Trigger.

Tag

A Tag will be triggered by the Trigger you set and passing both the system defined variables and the user-defined variables to your Tag, then you could take the action such as sending it to GA or manipulate DOM on your pages.

Variable

Other than System defined variables, you could create your own by Javascript:
Select User-Defined Variables, then select the type Custom Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function() {
  try {
    var element = {{Click Element}}
    var elementClass = {{Element class}}
    if (!element || !elementClass) return
    var selector = '.' + elementClass.split(' ').join('.')
    var list = document.querySelectorAll(selector)
    var order = [].indexOf.call(list, element) + 1
    return order
  } catch (e) {
    if (window.dataLayer.filter(function (obj) {
      return obj.errorMsg === e.message;
    }).length == 0) {
      window.dataLayer.push({
        'event': 'variable error',
        'errorMsg': e.message
      });
    }
  }
}

Trigger

Posted on | Edited on |

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 :)

  • 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 command + F3 or (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
  • 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

Posted on | Edited on |

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

正視你的無知

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

大意

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

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

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

Posted on | Edited on |

Recommend plugins

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.

Posted on | Edited on |

Determine progressive JPEG by it’s content

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

Short name Bytes Payload Name
SOF0 0xFF, 0xC0 variable size Start Of Frame (baseline DCT)
SOF2 0xFF, 0xC2 variable size Start Of Frame (progressive DCT)

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.

Read more »

Posted on | Edited on |

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

Posted on | Edited on |

Mode

  • insert
  • normal
  • visual
  • command

Insert mode

  • i
    • insert before the cursor
  • I
    • insert before the start of line
  • a
    • append after the cursor
  • 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

Command mode

: + <command>

1
2
3
:wq
:cq
:set rnu

Cursor movement

Char

  • h (left)
  • j (down)
  • k (up)
  • l (right)
  • Combile with number to move, 2k to jump 2 lines up
  • Relative line numbers :set rnu

Word

  • w or W
    • jump forwards to the start of a word
  • e or E
    • jump forwards to the end of a word
  • b or B
    • jump backwards to the start of a word
  • Capital case can contain punctuation

Single line

  • $ - end of line
  • ^ - start of the line after the indentation
  • 0 - move to the column 0

Text Object motion

  • {}
    • paragraphs forward/backward
  • ()
    • sentences forward/backward
  • []
    • backward/forward sections

Pair

  • %
    • go to the match bracket

Screen

  • H
    • move to top of screen
  • M
    • move to middle of screen
  • L
    • move to bottom of screen

File

  • gg
    • Start
  • G
    • end of file
  • :<absolute-line-numbers>
    • move to the absolute line

Scroll

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

Search char in single line

  • 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<> , move 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
    • The behavior is identical to /word

Edit

  • Undo/Redo
    • u / Ctrl+r

Insert

  • insert line before/after the current line
    • o, O
  • join two line (keep mode)
    • J

Copy

  • y + motion
    • combine with any motion, e.g. yt; or yw
  • yy = Y
    • yank (copy) the current line

Paste from clipboard registry

  • p

    • paste after

  • P

    • paste before

Cut and switch to insert mode

  • c + motion
    • Cut
  • C
    • Cut to end of line
  • s
    • Substitute the char under the cursor
  • S
    • Substitube the line
  • r
    • replace a char
  • R
    • Enter the insert-replace mode

Cut and keep in normal mode

  • d
    • d3j or 3dd
  • D
    • Delete to end of the line
  • dd
    • Delete the entire line
  • x and X
    • delete and backspace

inside / around

1
2
3
4
5
6
7
8
9
10
11
# edit neariest word inside symbol, e.g. }
ci}

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

# delete inside tag
dit

# replace word with yanked word
vi]p

Repeat action

  • repeat action
    • .

Macro

  • q + a~z
    • record macro to 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 the last position

Registers

  • " + a~z 0~9 "+*/:%-
    • :reg see all registers
    • " the default(unnamed) register
    • 0 the default register for y(yank)
    • +, * the system clipboard
    • / the latest search keyword
    • : the latest used command
    • % the current file path
    • # the last edited file

“adw : delete the word and save to register a

===

Registers - Advance

  • "0p - paste from last yank
  • Use the register in the Search and Command mode
    • ctrl + r + <register>

*:%s/<ctrl+r>//abc/gc to replace the lastest search keyword(*) to abc with confirmation dialog

Change multi line

  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

More

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# increase the first right number in the line
Ctrl + A

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

# Make a word uppercase
gUe

# 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

More…and more

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

vim X IDE

Setup

  • Ideavim

    1. click the V icon on the right bottom corner
    2. open ~/.ideavimrc
    3. edit and save

  • VScode

Reference

Get the difference before saving in vim

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

Posted on | Edited on |

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.

Posted on | Edited on |
  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!