Notes - Bootstrap

Migration From 4 to 5

// 4
<li class="nav-item {{if eq .PageName `sharing`}}active{{end}}">
  <a class="nav-link" href="sharing-{{.Lang}}.html">

// 5
// Add the .active class on .nav-link to indicate the current page.
<li class="nav-item">
  <a class="nav-link {{if eq .PageName `sharing`}}active{{end}}" href="sharing-{{.Lang}}.html">

Badge

// 4
<span class="badge badge-danger badge-pill">2</span>

// 5
// 4
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu1">

// 5 - data-xxx to data-bs-xxx
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu1">

Video

// 4
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fZlgYLAtMFs" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
            
// 5
 <div class="ratio ratio-16x9">
    <iframe src="https://www.youtube.com/embed/fZlgYLAtMFs" allowfullscreen></iframe>
</div>

Dark Mode

// 4
<html lang="en">
...
<nav class="navbar fixed-top navbar-expand-lg navbar-dark">

// 5
<html lang="en" data-bs-theme="dark">
...

<nav class="navbar fixed-top navbar-expand-lg" data-bs-theme="dark">

CSS

// 4
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

// 5
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

JS

// 4
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

// 5
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Examples

Center Alignment

  • text-center: center the text inside the container row “r1”
  • justify-content-center: make all three columns “c1”, “c2”, and “c3” center as a group inside row “r2”; or make the button horizontal center inside column “r2”
  • d-flex align-items-center: make the button vertical center inside of the “c2” container; you can use align-items-start to move the button to the top of “c2” container
  • align-self-center: make the “c2” container as a whole to be center vertically inside column “r2” ;
<div class="container">
    <div id="r1" class="row">
        <div class="col">
            <h3 class="text-center">Check Threshold Remaining</h3>
        </div>
    </div>
    <div id="r2" class="row justify-content-center" style="min-height: 60vh;">
        <div id="c1" class="col-4 col-md-3 d-flex justify-content-end">
            <textarea name="asset-list" id="asset-list" style="min-width: 100%; overflow: scroll"></textarea>
        </div>
        <div id="c2" class="col-4 col-md-3 align-self-center d-flex align-items-center justify-content-center" style="background-color: lightyellow; height: 30vh">
            <button onclick="getThreshold()">Get Thresholds</button>
        </div>
        <div id="c3" class="col-4 col-md-3">
            <div id="result" style="min-height: 100%; min-width: 100%; overflow: scroll; background-color: aliceblue">
            </div>
        </div>
    </div>
</div>

Text

Line height

Change the line height with .lh-* utilities.

How to Get Client IP Information?

Get client information

How to get client IP address?

The X-Forwarded-For (XFF) HTTP header is a de facto standard for identifying the originating IP address of a client connecting to a web server through an HTTP proxy or load balancer.

Notes - UiPath

Work

How to update RLPath(UiPath project)?

// this works on the laptop
git stash
git pull

// If the above command doesn't work well, 
// try to re-clone to a new folder
git clone --depth 1 https://github.com/AngangGuo/RLPath.git RLPath

Control Flow

How to comment / un-comment an activity?

Select the activity

Notes - Davinci Resolve Video Editor

Tips

Shortcuts

  • Ctrl+Shift+,: Move clip to left
  • ctrl+Shift+.: Move clip to right
  • Ctrl+Shift+v: Paste insert

FAQ

How to grab a still picture from current timeline?

File menu > Export > Current Frame as Still. You can set a shortcut via Keyboard Customization. You can pick file type in the dropdown, inc. png, dpx or tiff for uncompressed. Resolution is timeline’s.

Notes - Protocol Buffers

Protocol buffers provide a language-neutral mechanism for serializing structured data. It’s like JSON, except it’s smaller and faster.

Step by step

mkdir pb
cd pb
go mod init pb

Create the people.proto file

syntax="proto3";
package tutorial;

option go_package = "./tutorial";

message Person{
  string name=1;
  int32 id=2;
}

Download compiler

Install protoc-gen-go

To generating Go package, you need to install Go protocol buffers plugin:

Notes - PowerShell & CMD

Tips

How to open terminal in the current folder?

  1. Right-click the folder > Open in Terminal
  2. From Windows Explorer address bar > wt -d .

Execute multiple commands on one line

Windows CMD: go build | try

* &: separate multiple commands on one command line.
* &&: run the command following && only if the command preceding the symbol is successful. `mkdir -p newApp && cd newApp`
* ||: run the command following || only if the command preceding || fails.

For Powershell or Bash(semicolon):

New version:

Notes - Church Sound System

Speaker

Active Speaker

An active speaker is simply a device that contains the amplifier and the speaker within the same unit. There are also other integral devices housed within the unit, such as onboard crossovers and subwoofers.