Sing's Log

Knowledge worth sharing


  • Home

  • Tags

  • Timeline

  • Portfolio

  • Search

Display iphone/android screen on Mac

Posted on 2020-11-16 | Edited on 2023-09-14 |

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

Schedule backup Mongodb to AWS S3 with DroneCI cronjob

Posted on 2019-10-18 | Edited on 2023-09-14 |

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

  • Drone
  • mongodump
  • drone S3 plugin

Show "Search" button on mobile keyboard

Posted on 2019-09-18 | Edited on 2023-09-14 |

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 :

[Drone CI] migrate pipeline config from 0.x to 1.x

Posted on 2019-09-11 | Edited on 2023-09-14 |

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

GIT submodule note

Posted on 2019-08-20 | Edited on 2023-09-14 |

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

  • https://stackoverflow.com/questions/8191299/update-a-submodule-to-the-latest-commit

[VSCode] settings and shortcuts

Posted on 2019-06-18 | Edited on 2023-09-14 |
  • command 0 - Focus on sidebar
  • cmd+d - For don’t save
  • gb - For multi cursor in vim mode
  • cmd+shift+. - show breadcumb

Settings.json

1
2
3
4
{
"editor.autoIndent": true,
"editor.snippetSuggestions": "top",
}

References

  • http://vimdoc.sourceforge.net/htmldoc/motion.html

[GTM] Get the item order in a list

Posted on 2019-02-21 | Edited on 2023-09-14 |

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

Connect to GCP MySQL through XAMPP

Posted on 2018-11-18 | Edited on 2023-09-14 |

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
Read more »

New to Macbook guide for developer

Posted on 2018-09-19 | Edited on 2023-09-14 |

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輸入法教學

Apprentice pattern 學徒模式重點筆記

Posted on 2018-09-18 | Edited on 2023-09-14 |

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

正視你的無知

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

大意

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

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

  1. WebAssembly
  2. Web Worker
  3. How Vue core works?
  4. How to write a Compiler?
  5. How to build a LIFF Application?
123…8
Sing Ming Chen

Sing Ming Chen

Sing's log, a developer's blog

79 posts
208 tags
GitHub E-Mail Linkedin Facebook StackOverflow
© 2023 Sing Ming Chen
Powered by Hexo v3.9.0
|
Theme — NexT.Gemini v6.3.0