Knowledge worth sharing

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

Background

XAMPP is the most popular PHP development environment including a great GUI - phpMyAdmin, I would like to connect it to a cloud MySQL DB - Google Cloud Platform MySQL.

Requirement

1. XAMPP installed
2. Create a Google Cloud Platform (GCP) account

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 cask install <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 cask install Karabiner-Elements
  • Keyboard mapper, if you use mechanical keyboard you should install it!
• nvm
  • Handle Nodejs environment
• Alfred
  • Replacement for Spotlight
• 超注音
• spectacle
  • Shortcut for docking windows
• awesome-vim-configuration
• manico
  • Best tool for launching app with custom shortcut
• insomniaX
  • Prevent mac sleep behavior
• Beyond compare
  • brew cask install beyond-compare
  • Best diff tool ever
• Scroll Reverser
  • brew cask install 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
• Evernote shorcut for mac
• 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 + `

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

# 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

https://vim.rtorr.com/

Use relative line mode with vim

In vim, you will frequently need to manipulate multi line with 3dd 4yy or something else, relative line mode in IDE could help you easy to count the line number.
if you are using VScode like me, you could enable it by add the line to user setting:

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

Useful vim command combination list

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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


# replace word with yanked word
viwp

Common command

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

# get recent command list
q:

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

# Next word
w

# Previous word
b

# copy (yank)
y

# copy line
yy

# paste
p

# delete
d

# Undo
u

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!