Posted on | Edited on |

Display iphone screen on Mac

  1. Connect your iphone through wire.
  2. Open QuickTime Player
  3. File > New Movie Recording
  4. In the recording screen, select the dropdown > camera > your iphone name

Display Android Device on Mac

  1. Install scrcpy by brew install scrcpy
  2. If you don’t have adb, run brew cask install android-platform-tools
  3. Connect your Android phone through wire
  4. excute scrcpy

Posted on | Edited on |

To schedule backup mongodb to AWS S3 could be done extremely easy in any docker pipeline, here is an example using DroneCI docker pipeline and cronjob feature. The complete code example could be found here: https://github.com/Asing1001/mongodb-s3-backup.

  1. Create .drone.jsonnet file using docker pipeline
  2. Use mongodump in step1 to create archive

  3. Upload the archive by s3 plugin in step2

    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
    local backupLocation = 'mongo-archive.gz';

    [{
      kind: 'pipeline',
      name: 'default',
      steps: [
        {
          name: 'mongodump',
          image: 'mongo:3.6.5',
          environment: {
            DB_URI: {
              from_secret: 'db_uri'
            },
          },
          commands: [
            'mongodump --gzip --uri="$DB_URI" --archive=' + backupLocation,
          ],
        },
        {
          name: 'upload',
          image: 'plugins/s3',
          settings: {
            bucket: 'mongo-backup',
            access_key: {
              from_secret: 'aws_access_key_id',
            },
            secret_key: {
              from_secret: 'aws_secret_access_key',
            },
            source: backupLocation,
            target: '/',
          },
        },
      ],
      trigger: {
        event: ['cron', 'push'],
        branch: 'master'
      },
    }]

  4. Activate the project in DroneCI and fill up variables aws_access_key_id, aws_secret_access_key, db_uri

  5. Setup Cron jobs in Drone project’s settings
    drone-mongo

  6. Push the repository and verify the job :)

Reference

Posted on | Edited on |

For Android

Only type="search" is required on <input>

For IOS

It is required to wrap <input type="search"> inside a <form action>, note that the attribute action is must-have.

For all mobile devices

To sum up, the minimum requirement on mobile is:

1
2
3
4
5
<form action>
  <input
    type="search"
  >
</form>

To try on mobile device, here is a live example on JSFiddle :

Posted on | Edited on |

New syntax for pipeline and step

1
2
3
4
5
6
7
- pipeline:
-   custom-step:
-     image: some-image
+ kind: pipeline
+ steps:
+   name: custom-step
+   image: some-image

Custom plugin variables should be placed under settings

1
2
3
4
5
6
7
8
9
10
kind: pipeline
name: default
steps:
  name: custom-plugin
  image: some-image
- foo:
-   bar: baz
+ settings:
+   foo:
+     bar: baz

Posted on | Edited on |

Clone repository with submodule

1
git clone --recursive <repo_url>

Clone submodules after repository cloned

1
2
git submodule init
git submodule update --recursive

Add submodule

1
git submodule add <submodule_clone_url> <submodule_folder>

Remove submodule

Step1 - Remove submodule folder

1
2
git rm --cached /path/to/submodule
rm -rf /path/to/submodule

Step2 - Remove submodule config in .gitmodules

1
2
3
4
5
6
-[submodule "themes/next"]
- path = themes/next
- url = https://github.com/Asing1001/hexo-theme-next.git
[submodule "themes/next-reloaded"]
path = themes/next-reloaded
url = https://github.com/Asing1001/hexo-next.git

Update submodule to latest commit

Step1 - Checkout the target version of the submodule

1
2
3
4
# Go to the submodule folder
cd projB/projA
# Checkout the target commit
git pull origin master

Step2 - Commit the update

1
2
3
4
# Back to the parent folder
cd ..
git add projB/projA
git commit -m "submodule projA updated"

Reference

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 (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?