Posted on | Edited on |

What is Device Pixel Ratio?

The term device pixel ratio plays the crucial role in different languages’ styling. The definition of Device pixel ratio from MDN:

The devicePixelRatio of Window interface returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.

My translation:

1
Device pixel ratio = (Device physical pixel width) / (Width of a device in a program)

For instance an iPhone12:

  • Physical Width: 1170px
  • CSS width: 390px
  • Device Ratio Pixel: 1170px / 390px = 3

How to select a proper width image

1
Proper image size = devicePixelRatio * width

If you setup a image with style width:150px, the phone will use 150 * 3 = 450 physical pixel to render, so the proper width of the image should be 450

Common Device Pixel Ratio

Reference

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