DEV Community: Peiwen Li

Git Workflow

Peiwen Li — Tue, 11 Aug 2026 14:09:58 +0000

Originally written on 2020-06-11. DEV's displayed publication date reflects this archive migration.

Git Workflow

When working within a team, it is essential to know some functions of git which you probably wouldn't use when working by yourself. The workflows are a bit different.

git clone `<address>`

To clone a repo which you wish to work on. Copy the address which indicates the specific branch. If you wish to clone a specific branch:

git clone -b `<branch_name>` `<repo_address>`

git pull

When others have made some changes and you wish to work locally in sync, run git pull

git checkout `<branch_name>`

You can switch to a branch by running the above command. When you just cloned a repo from master for example, you'd like to work on new features, run the following command to create a new branch:

git checkout -b <new_branch_name>

This is the equivalent of:

git branch <new_branch_name>
git checkout <new_branch_name>

Now you have a brand new branch to work on.

git checkout master

When you wish to switch back to the master branch, you can run the above command of course after you have committed the changes you have made on the <new_branch>:

git add . && git commit -m 'a comment to describe the changes'

git pull AGAIN

During the time you made the change, could be a few hours, could be a couple of days, there might be some changes happened to the branch you cloned/pulled from, give it the dev branch or whatnot. So it is ESSENTIAL that you git pull origin dev to retrieve the latest changes as well as resolving possible conflict you may have.

git merge

When you are done with your new feature on your <new_branch>, you can run the following command to merge the <new_branch> into the master branch:

git checkout master
git merge <new_branch>

git branch -d `<new_branch>`

When you have merged a branch, you can run the above command to delete the branch, for no need to keep it. It is the same branch as the master branch.

git mergetool

Use mergetool to resolve the conflict encountered when merging with a non-direct parent header(copy/version).

git push `<remote_server>` `<local_branch>`: `<remote_branch>`

Push request is a normal practice when you wish to merge after code review:

git push origin <new_branch>：<remote_branch>

Refs

TypeScript

Peiwen Li — Tue, 11 Aug 2026 14:09:52 +0000

Originally written on 2020-05-28. DEV's displayed publication date reflects this archive migration.

Typescript & React

Create React App

Install create-react-app

$ npm install -g create-react-app
# OR: if you happen to be in China, you can install cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install -g create-react-app

Then you can create a react app with TypeScript:

$ npx create-react-app my-app --template typescript

Extra: VSCode Extensions

Chinese for Chinese environment
ES7 React/... snippets for snippets (make your life easier)
TypeScript Importer for typescript support

Create a FunctionComponent with TS

Just as you normally would with a few minor changes:

const App: React.FC<AppProps> = ({ func })=> {
    return ...
}

Declare what kind of the function is: React.FunctionComponent (React.FC), and its props type: <AppProps>.

Declare the types of PROPS

There are 2 ways to declare this: interface and type, the latter with more specific notes when you hover over it.

interface AppProps {
  func?(): void;
  //a function or no function at all, it returns nothing
}

The second way:

type AppProps = {
  func?(): void;
};

This will provide more notes when you hover over AppProps.

Types or Interfaces

The rule of thumb is:

use interfacd for public API's definition
use type for React Component's Props and State

Declare default value of a prop

There are many ways to define a default value of a prop, but the one I like and I think the simplest way is:

// ////////////////
// function components
// ////////////////
type GreetProps = { age: number };

const Greet = ({ age = 21 }: GreetProps) => {
  /*...*/
};

Declare the types of HOOKS

const [searchValue, setSearchValue] = useState<string>();

You either have to specify right after useState statement, or implicitly decalre the type in the brackets like so:

const [searchValue, setSearchValue] = useState("");

Declare the types of `React.ChangeElement`

const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const v = event.target.value;
};

Now the file knows that you are aiming to get the value of an event happens in an HTML input field.

Full Code

import React, { useState } from "react";

type AppProps = {
  sendSearchQuery?(): void;
};

const App: React.FunctionComponent<AppProps> = ({
  sendSearchQuery = () => undefined,
}) => {
  const [searchValue, setSearchValue] = useState<string>();
  const onSearchInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchValue(e.target.value);
  };
  return (
    <div>
      <p>{searchValue}</p>
      <input onChange={onSearchInput} name="search" type="text" />
    </div>
  );
};

export default App;

Declare the types of `useRef`

You can declare a reference of any HTML element or null like so:

const ref = useRef<HTMLElement | null>(null);

If you want to be more specific you can always change the type:

const inputRef = useRef<HTMLInputElement>(null);

Then you can use it like so:

// ...
return <input ref={inputRef} type="text" />;

Comment in TS

TSDoc /** comment */ style: You can and are encouraged to leave descriptive comments on reusable components.

References

React TypeScript Cheatsheets

Daily Notes

Peiwen Li — Tue, 11 Aug 2026 14:09:41 +0000

Originally written on 2020-04-15. DEV's displayed publication date reflects this archive migration.

Styling scrollbar

-> WebKit customisation of scrollbars: explains the composition of a scrollbar

-> another css-tricks post

An example:

body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

`flex grow` & `overflow scroll` conflict

Sometimes overflow scroll wouldn't work in safari when flexbox is involved. This post is where I found the solution to solve this problem.

Simple solution is that you need to add overflow: scroll to whichever container holds the scrollable content. Meanwhile, this container can not be a flexbox.

to capitalize text with CSS `text-transform`

.lowercase {
  text-transform: lowercase;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}

`React.cloneElement`

When you want to pass a prop to undifined children elements, you can, instead using {children}, try {React.cloneElement(this.props.children, { loggedIn: this.state.loggedIn })}

From SO Post

Django and React Architecture Notes

Peiwen Li — Tue, 11 Aug 2026 14:09:35 +0000

Originally written on 2020-04-03. DEV's displayed publication date reflects this archive migration.

MVC - Model, View, Controller: traditional architecture, e.g. Rails, Phoenix, Laravel
MVT - Model, View, Template: Django

JavaScript Notes: DOM Manipulation Recap

Peiwen Li — Tue, 11 Aug 2026 14:09:30 +0000

Originally written on 2020-03-26. DEV's displayed publication date reflects this archive migration.

DOM manipulation

Selection

select the element with id="div1":

  const div1 = document.getElementById("div1");

select elements with class="unicycle":

  const unicycle = document.getElementsByClassName("unicycle");

be careful Elements is plural

select elements with class="unicycle" inside the div id="div1":

  const unicycle = div1.getElementsByClassName("unicycle");

be careful Elements is plural

select all <p></p> elements:

  const paragraphs = document.getElementsByTagName("p");

.querySelector: returns the FIRST element within the document that matches the specified group of selectors, or null if no matches are found This is more concise and a more modern way to select elements.

  const queryUnicycle = document.querySelector(".unicycle");
  const queryDiv2 = document.querySelector("#div2");

.querySelectorALL: returns an array of objects with the elements that match the specified group of selectors This is more concise and a more modern way to select elements.

  const queryAll = document.querySelectorAll(".unicycle, #div2");

### looping: You can use a forEach() method to loop through all the element selected

  let all_images = document.querySelectorAll(".article_image");

  all_images.forEach(image => {
    console.log("image: ", image);
  });

### You can always preview the select result by using console.table():

  let all_images = document.querySelectorAll(".article_image");

  console.table(all_images);

Changing elements

var.innerHTML

  const queryAll = document.querySelectorAll(".unicycle, #div2");

  let text = "<h1>Hello World</h1>";

  for (let i = 0; i < queryAll.length; i++) {
    queryAll[i].innerHTML = text;
  }

However, .innerHTML can be subject to cyber attack, so:

var.textContent

  const queryUnicycle = document.querySelector(".unicycle");

  let text = "<h1>Hello World</h1>";

  queryUnicycle.textContent = text;
  // will be replaced by plain text including <h1></h1> tags

changing style:
- var.style.color = 'red';
- var.style.background = 'red';
- var.style.boxShadow = "2px 2px 5px 1px blue";

Following settings will remove original inline style from the tag and replace it with the following settings, or you can do the above to set one style at a time to avoid this behavior:

var.style.cssText = "color: blue; border: 1px solid black";
var.setAttribute("style", "color: red; border: 1px solid blue;");

Refs:

console.log(var.style);, any var would do the trick, you can expand the output in the console to check out what styles have already and haven't been assigned to this variable, however, only including the inline style settings
console.log(window.getComputedStyle(var)); will get all the styles including the style defined in css files
more css style keyword refs

DOM EVENT Handlers

`onclick` event applied in html tags:

onclick="this.innerHTML='Passion Fruit!'"

  <h1 onclick="this.innerHTML='Passion Fruit!'">What's my favorite food?</h1>

onclick="changeColor(this)"

  <h1 onclick="changeColor(this)">What's the color "Peru"?</h1>

  function changeColor(obj) {
    obj.style.color = "Peru";
  }

use `id` to invoke a JS function:

document.getElementById("myBtn").onclick = changeColor;

  function changeColor(obj) {
    obj.style.color = "Peru";
  }
  document.getElementById("myBtn").onclick = changeColor; // no quotation marks needed and no function can be chained

`onload` event on a tag

`oninput` event in `<input />` tag

<input type="text" id="words" oninput="func()" /> do something on every keyboard stroke

`onmouseover` and `onmouseout` events

<div onmouseover="mOver(this)" onmouseout="mOut(this)" class="box">
  Mouse Over Me
</div>

function mOver(obj) {
  obj.innerHTML = "GET OFF ME!";
}

function mOut(obj) {
  obj.innerHTML = "Thank You! 😺";
}

All DOM Events: w3school.com ref

`addEventListener(event, function, useCapture)`

useCapture is default by false -- take effect from inside -> outside
if set to true -- from outside -> inside

// myP is a child of myDiv
const myDiv = document.getElementById("myDiv");
const myP = document.getElementById("myP");

myDiv.addEventListener("click", changeBackground, true);
myP.addEventListener("click", changeTextContent, true); //default useCapture value is false

function changeBackground(obj) {
  obj.style.background = "Peru";
}

function changeTextContent(obj) {
  obj.textContent = "Peru";
}

myP.addEventListener("mouseover", changeSomething);

Different to onclick, addEventListener() can add more than one function to the element, onclick can only apply one and the latter takes precedence.

`removeEventListener(event, function, useCapture)`

Remember to pass in exactly how corresponding addEventListener's argument are set.

DOM Nodes

Everything in an HTML document is a node. <html> is a root node, it can have numerous children. The most common ones include <body> node and <head> node, and they are, to each other, siblings. <html> node is their parent node.

common DOM Node creation methods:

const para = document.createElement('p')
const text = document.createTextNode("This is a Text Node")
para.appendChild(text)
para.innerHTML = "This is a new text node"
parent.insertBefore(para, child): insert para node before child node inside parent node
parent.replaceChild(para, child): Use para node to replace child node inside parent node
parent.removeChild(para): remove para node inside parent node

some CSS recap:

relative position:
- This element still takes its place, with its height and width intact
- it can be moved around with position properties like left: 10% or top:10%, The original position remains in the DOM tree, meaning it still occupies as the original before it's moved
absolute position:
- This removes the element from the DOM tree, as if it never happened
- its zero position refers to the first parent node which isn't in static position, OR refers to the viewport/window if all nodes are in default position
static position: default poisiton, goes with the flow, its position can NOT be manipulated

DOM Animation

If a child is to be animated, the parent element must be `relative` position, and the child should be `absolute` position.

You can use the traditional method:

let id = setInterval(func, 10);
clearInterval(id);
setTimeout(func, 3000): run this function after 3 seconds example code:

  animateBox.addEventListener("click", moveAcross);

  function moveAcross() {
    let pos = 0;
    let id = setInterval(frame, 1);
    function frame() {
      if (pos > 500) {
        clearInterval(id);
      } else {
        pos++;
        animateBox.style.top = pos + "px";
        animateBox.style.left = pos + "px";
      }
    }
  }

Another method is `Element.animate()`, checkout the Github Repo here

Example code:

var animation = aBox.animate(
  {
    opacity: [0.8, 1],
    transform: ["scale(0.1)", "scale(1)"]
  },
  {
    direction: "alternate",
    duration: 500,
    iterations: Infinity
  }
);

Window Object: Details on MDN

Each tab in a Web Browser has its own window Object.

Window Properties:

window.innerWidth
window.innerHeight

### Example of Usage:

  // create the node, has to be declared before adding the listener
  const pMonitor = document.createElement("h2");
  pMonitor.style.cssText = "text-align: center";
  document.body.insertBefore(pMonitor, animateDiv);

  // add event listener
  window.addEventListener("resize", updateSizeText);
  // run the update function to update the text shown in the node above
  updateSizeText();

  function updateSizeText() {
    pMonitor.textContent =
      "window's Height: " +
      window.innerHeight +
      ";\n window's Width: " +
      window.innerWidth;
  }

use window Object to OPEN a window

const openVABtn = document.querySelector("#openVABtn");
openVABtn.addEventListener("click", openVA);
let newWindowObj;
function openVA() {
  newWindowObj = window.open(
    "https://va-boutique.com",
    "newWindow",
    "menubar=false,location=true,resizable=true,scrollbars=true,width=800,height=500,top=-1000,left=00"
  );
}

use window Object to CLOSE a window

const closeVABtn = document.querySelector("#closeVABtn");
closeVABtn.onclick = closeWindow;
function closeWindow() {
  newWindowObj.close();
}

usage of `window name` ("newWindow" in the above example)

Use an anchor tag's target attribute to open a new link inside the "newWindow".

<a target="newWindow" href="https://DonLee.online">Visit Don Lee</a>

`move()` a window and gain `focus()`:

function move() {
  window.move(50, 0); // push the window to the right by 50px
  window.focus(); // pop the window to the top of the screen
}

BE CAREFUL where you define a const

const funcName = () => {...}

This function can not be accessed before it's been declared, however:

function funcName() {...}

CAN be accessed anywhere in the document.

Pop up boxes: window objects method

There are 3 kinds of pop up boxes, and ALL are methods of the window Object. The position of the pop up boxes can NOT be controled. Use with caution.

window.alert("message")

  alert("CAN NOT ACCESS");

window.confirm("message"): let user choose 'yes' or 'cancel', it returns a boolean

  if (confirm("want to quit?")) {
    // redirect to another page
  } else {
    // e.g. encourage user to stay
  }

window.prompt("message"): this can be used to interact with users, a bit like input() method in python

  let userName = prompt("Please type in your name");
  // userName will catch the input from user

  if (userName == null || userName === "") {
    console.log("user cancelled the prompt");
  } else {
    console.log("Hello " + userName + "!");
  }

`cookies` VS `localStorage` VS `sessionStorage`

The comparison table

	cookies	localStorage	sessionStorage
Capacity	4kb	10mb	5mb
Browsers	HTML4/HTML5	HTML5	HTML5
Accessible from	Any window	Any window	same tab
Expires	Manually set	Never	On tab close
Storage Location	Browser and server	Browser only	Browser only
Sent with requests	yes	No	No

USAGE: You can check in `Application tab` in the `Developer Tools` with Chrome Browser:

### localStorage examples:

  localstorage.setItem("breakfast", "cereal"); // items are defined by key-value pairs
  // to retrieve value
  console.log(localStorage.getItem("breakfast")); // cereal

### sessionStorage examples:

  sessionstorage.setItem("breakfast", "cereal"); // items are defined by key-value pairs
  // to retrieve value
  console.log(sessionStorage.getItem("breakfast")); // cereal

The Storage does not clear the storage data automatically, to clear the data:

// to clear the value stored in 'breakfast'
localStorage.removeItem("breakfast");
// clear all the items
localStorage.clear();

cookie examples:

a simple cookie

document.cookie = "hello=true"; // defined by key-value pair as well

cookie with expiration date

document.cookie = "person=don; expires=Fri, 31 Dec 9999 23:59:59 GMT";

cookie with expiration date and path

document.cookie =
  "person=don; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";

to delete a cookie Set the person to blank and set an passed date to expires

document.cookie = "person=; expires=Fri, 31 Dec 1970 23:59:59 GMT; path=/";

`history` property of the `window` Object

window.history has many methods, the most common ones:

history.back(): go back one page in history
history.forward(): go forward one page in history
history.go(-2): go back a number of pages in history (if the value is negative) or go forward (if the value is positive)
history.replaceState('something to pass on to the new page', null, 'a_link_or_to_replace_partial_domain_name_in_string'): replace current history page with the third value passed in, and pass on the first value as a state, you can console.log(history.state) to check it
history.pushState(null, null, a_link_or_to_replace_partial_domain_name_in_string'): to create a new history page with the link value passed in Note: the last two methods will NOT refresh the page or go to the link passed in, it merely changed the appearance of the link in browser

JavaScript Notes: Basics

Peiwen Li — Tue, 11 Aug 2026 14:09:23 +0000

Originally written on 2020-03-26. DEV's displayed publication date reflects this archive migration.

I decide to spend 3 hours to review all of the basics of JS, and make comments and record the basics of the stuff I don't quit remember.
Thanks for the amazing FCC video by Beau Carnes!

Comment

// single line comment
or;
/* multi line
comment */

var, let and const

var can be global
let is a block variable
const can never be changed

naming vars

camelCase ONLY

use backflash to escape

var myStr = "this is \"a string\" called myStr!"

/****
CODE    OUTPUT
\'      single quote
\"      double quote
\\      backslash
\n      newline
       carriage return
\t      tab
\b      backspace
\f      form feed
****/

common properties

String.length

Array

- mutable

  -front  +front         +back       -back
  shift() unshift("dog") push("dog") pop()

javascript

JSON.stringify(Arr) to print a readable array

return in functions

if a function does not return anything, the return value is 'undefined', meaning console.log(thisfunction()) will be 'undefined'

scope

vars with the same name: var in local scope take the precedence

switch() {}

function caseInSwitch(val) {
  var answer = "";
  // what switch function does is to compare the val param with what's after the case key word
  switch (val) {
    case 1:
    case 5:
    case 9:
      answer = "alpha";
      break;
    //will immediately break out of the loop, return, when answer is assigned
    case 2:
      answer = "beta";
      break;
    case 3:
      answer = "gamma";
      break;
    default:
      answer = "something";
      break;
  }

  return answer;
}

Object

use bracket notation to access properties when property name has space in it
use bracket notation to access properties when a variable is in the bracket
delete object.key to delete prperty
consider to replace a switch function with a dict/object to simplify your code
Object.hasOwnProperty(Prop) to check if an object has the property 'Prop'
an object can be within an array and vice versa

while loop

let i = 0;
while (i < 5) {
  // do something
  i++;
}

for loop

for (let i = 0; i < 6; i += 2) {
  // do something
}

do...while loop

let i = 0;
do {
  // do something
  i++;
} while (i < 5);

number

Math.random(): produce from 0-0.9999999...
Math.floor(): 9.9=>9, 12.4=>12, 34.8=>34

function randomRange(myMin, myMax) {
  // generate random number between myMin and myMax
  let num = Math.floor(Math.random() * (myMax - myMin + 1) + myMin);
  return num;
}

convert string to integer

parseInt(str); // a decimal number
parseInt(str, 2); // convert a binary number into a decimal number

ternary operator

// condition ? statement-if-true : statement-if-false
function () {
    // return a === b ? true : false;
    // or
    return a === b ? true : a > b ? 'a is greater than b' : 'b is greater than a';
}

"use strict";

to avoid common coding mistakes and unsafe actions, usually at the top of the js file or at the top of a function

let

declare variables with let: can not declare twice with the same name, however, var can
var variable can not be block scoped, let variables are

const

use all capital letters for a const variable name
read only
can not be reassigned
an array can be mutated, even it's declared with const key word
object can be mutated, even it's declared with const key word, however
- Object.freeze(OBJ_NAME) can prevent OBJ_NAME to mutate

Array.concat()

const arr1 = [1, 2];
const arr2 = [3, 4];
arr1.concat(arr2); // returns a new array, arr1 and arr2 remain unchanged

arrow function

When a function takes another function as an argument, it's a good place to use arrow function, e.g. inside arr.filter(num => num > 0).map(x => x**2)
Higher order arrow functions:

  const increment = (function() {
    return function increment(number, value = 1) {
      return number + value;
    };
  })();

  console.log(increment(5, 2)); // 7
  console.log(increment(5)); // 6

Rest Operator with Function Params

const sum = function() {
  return function sum(x, y, z) {
    const args = [x, y, z];
    return args.reduce((a, b) => a + b, 0);
  };
};

console.log(sum(1, 2, 3)); // 6

// Rest operator
const sum = function() {
  return function sum(...args) {
    // any number of arguments will be processed
    return args.reduce((a, b) => a + b, 0);
  };
};

console.log(sum(1, 2, 3, 4)); // 10 and any number of arguments will be processed

Destructuring assignment with Rest Operator

const source = [1, 2, 3, 4, 5, 6, 7];

function removeFirstTwo(list) {
  const [, , ...newList] = list;

  return newList;
}

console.log(removeFirstTwo(source)); // [3,4,5,6,7]

Spread Operator to evaluate arrays in-place

const arr1 = [1, 2, 3, 4];
let arr2;

arr2 = arr1; // POINTING: This only points arr2 to arr1's value

arr2 = [...arr1]; // SPREADING: This creates a new array, spreading/copying every item in arr1

Destructuring assignment to assign variables from objects

const TEMP = {
  today: 28,
  tomorrow: 32
};

const { today: tempretureToday } = TEMP;

console.log(tempretureToday); // 32

If the object is nested, then you need to destruct multiple times:

const FORCAST = {
  today: { min: 72, max: 83 },
  tomorrow: { min: 73.3, max: 85 }
};

const {
  tomorrow: { max: maxOfTomorrow }
} = FORCAST;
console.log(maxOfTomorrow); // 85

Destructuring assignment to assign vars from arrays

const [z, x, , , y] = [1, 2, 3, 4, 5, 6];
console.log(z, x, y); // 1, 2, 5

use this technique to 'swap' values between 2 vars

let a = 8,
  b = 6;
(() => {
  "use strict";
  [a, b] = [b, a];
})();

console.log(a); // 6
console.log(b); // 8

Destructuring Assignment to pass an Object as a function's params

const myObj = {
  max: 33,
  min: 12,
  something_else: "something",
  a_lot_other_info: "..."
};

const half = (function() {
  return function half({ max, min }) {
    return (max + min) / 2.0;
  };
})();

console.log(half(myObj)); // 22.5

Instead of passing in the entire object, this only pass in the property you need, commonly used with API calls.

Create strings using template literals (`string \${obj.prop.value} \`)

const person = {
    name: 'D L',
    age: 22
}

const string = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;

console.log(string); /* "Hello, my name is D L!
I am 22 years old."

The result format will be exactly the same as defined. Remember to add dollar sign before {var} inside template literals.

Write concise object literal declarations using simple fields

const createPerson = (name, age, gender) => {
  return {
    name: name,
    age: age,
    gender: gender
  };
};

// to make it much simpler

const createPerson = (name, age, gender) => ({ name, age, gender });

console.log(createPerson("DL", 22, "male")); // {name: "DL", age: 22, gender: "male"}

Write concise declarative functions

const bike = {
  gear: 2,
  // can be simplified
  setGear: function(newGear) {
    "use strict";
    this.gear = newGear;
  }
};

const bike = {
  gear: 2,
  // simplified <---------
  setGear(newGear) {
    "use strict";
    this.gear = newGear;
  }
};

bike.setGear(3);
console.log(bike.gear); // 3

Use class Syntax to define a constructor function

Old constructor function:

var SpaceShuttle = function(targetPlanet) {
  this.targetPlanet = targetPlanet;
};
var zeus = new SpaceShuttle("Jupiter");

console.log(zeus.targetPlanet);

NEW WAY with class:

class SapceShuttle {
  constructor(targetPlanet) {
    this.targetPlanet = targetPlanet;
  }
}
var zeus = new SpaceShuttle("Jupiter");

console.log(zeus.targetPlanet);

Wrapped in a function:

function makeClass() {
  class SpaceShuttle {
    constructor(name) {
      this.targetPlanet = targetPlanet;
    }
  }
  return SpaceShuttle;
}
const SpaceShuttle = makeClass();
const zeus = new SpaceShuttle("Jupiter"); // an instance of the class
console.log(zeus.targetPlanet);

Use getters and setters to control access to an object

So that the user won't have direct access to the obejct value

function makeClass() {
  class Thermostat {
    constructor(temp) {
      this._temp = (5 / 9) * (temp - 32);
    }

    // getter
    get temperature() {
      return this._temp;
    }
    // setter
    set temperature(updatedTemp) {
      this._temp = updatedTemp;
    }
  }
  return Thermostat;
}

const Thermostat = makeClass();
const thermos = new Thermostat(76);

// use getter to get the temperature
let temp = thermos.temperature;
console.log(temp); // 24.44

// use setter to update the temperature
thermos.temperature = 30;
temp = thermos.temperature;
console.log(temp); // 30

BE CAREFUL how getter and setter are defined and used. They act as properties.

export, import

export:

you can export const funcName = () => {...} directly before defining a variable or a function
you can also export { funcName }; at the end of the file
export a default: export default function subtract(x, y) { return y-x; }

import:

you can import { funcName } from "./file_name";
you can import all import * as var_name from "./file_name";, var_name is the variable/object_name stores the imported everything in
import a default export: import subtract from "./file_name"; no curly brackets needed

require is an old way of use code from another file

map, filter, reduce

Daily Notes: Understanding APIs

Peiwen Li — Tue, 11 Aug 2026 14:09:07 +0000

Originally written on 2020-03-21. DEV's displayed publication date reflects this archive migration.

Interface

A radio with buttons - user can interact with the machine without knowing what's behind the scene. From physical objects evolving to digital products:

GUI: Graphic User Interface

In cell phones, we interact with a music player by scrolling and clicking buttons - GUI. We don't have to know the mechanism behind it, the code or whatnot. But you can get the job done.

API: Application Programming Interface

When we say API, most likely we are referring to the web based API. It helps the web programmer to write programs much more easily without having to write every single code from scratch. For example, in python, like many other programming languages, there's string API: 'abc'.upper() to make 'abc' to an uppercase string. But the programmer doesn't have to worry about the mechanism behind that code.

REST: Representational State Transfer - Tutorials

Coined by Roy Fielding in his doctoral dissertation (2000), REST architectural style describes 6 constraints:

Uniform Interface
Stateless
Cacheable
Client-Server
Layered System
Code on Demand (optional)

ACNY:

URL - Universal Resource Locator

URI - Universal Resource Identifier

http - HyperText Transfer Protocol

JavaScript Notes: Recap

Peiwen Li — Tue, 11 Aug 2026 14:09:00 +0000

Originally written on 2020-03-20. DEV's displayed publication date reflects this archive migration.

The wired universe of JS

Thanks to Dan Abramov's amazing test course, I'm glad to be one of the guinea pigs.

In this universe, variables are wires connecting the values and where it's been used.

The format to assign a variable is:

let var_name = expression
var_name in small letters
expression can be complicated or primitive, values like 1 or 'value' are called literals.

In objects, properties are wires with names as well:
let sherlock = { surname: 'Holmes', address: {city: 'London'} };

mental model: sherlock_wire link with an object {}, and {} has two properties: surname and address, surname pointing to the string 'Holmes' and address pointing to another object {}, this {} has a property city pointing to the string 'London'

Primitive Values:

These values can be changed, i.e. no functions can directly change these values. They are stored in memory in their own boxes. Variables are wires linking the actual values in memory boxes and the place where it needs to be used.

Booleans(true, false) - logical operations
Numbers(int and float) - math calculations
- There's only ONE value for each distinct number, i.e. so only one 7 in a JS universe(memory)
- NaN => Not a Number is also a number for representing the value is supposed to be a number but isn't, like 0 / 0, furthur calculation with NaN will give you NaN as well
- -0, infinite, -infinite exist
Strings("anything quoted") - texts
Undefined(undefined) - unintentionally missing values
- maybe you forget to assign a value to a variable, falling back (JS point the variable directly) to this 'undefined' value
- No, it is not a string, it is one of its kind
- perhaps there's an error in your code, which you didn't expect - unintentionally
Null(null) - intentionally missing values
- You know this is a 'null' value - a valid missing data - intentionally assigned
- it is also one of its kind
Symbols(uncommon) - to hide implementation details
BigInts(uncommon and new) - math on big numbers

Objects and Functions

Objects ({} and others) - to group related data and code
- mutable
- can't destroy an object you created
- arrays (typeof([]))
- dates (typeof(new Date()))
- RegEx (typeof(/\d+/))
- class (typeof(Math))
- other non-primitive values
Functions (x => x*2 and others) - to refer to code
- when variables passed into functions, variables, the wires themselves are not passed in, the values they are pointing to do

EQUALITY in JS

'Same Value Equality' -- Object.is(a, b): see if a and b point to the same value, returns true if they do
'Strict Equality' -- a === b most often used, however, with special cases - something to memorize:
- NaN === NaN is ALWAYS false, whereas Object.is(NaN, NaN) is ALWAYS true >>> (NaN !== NaN) must be true. Since NaN is the only value that’s not equal to itself, size !== size can only mean that size is NaN. <<< it was designed like this, even designed before JS existed... so...
- -0 === 0 and 0 === -0 are ALWAYS true, whereas Object.is(0, -0) is ALWAYS false

Loose Equality: not recommended except:

if (x == null) {
// ...
}
// This code is equivalent to writing:
if (x === null || x === undefined) {
// ...
}

but still debatable...

Difference between `Object.is()` and `===`:

Mostly they are the same, but rare cases like this tell the difference:

let width = 0 / 0 // NaN
let height = width * 2 // NaN
console.log(width === height) // false
console.log(Object.is(width, height)) // true

Because Objects.is(a, b) evaluates wether a and b point to the same value box in memory, meanwhile, NaN === NaN is always false

How to check if a value is/isn't `NaN`

Number.isNaN(a)
Object.is(a, NaN)
a !== a

They will all return true if a is NaN

Daily Notes: Useful Commands

Peiwen Li — Tue, 11 Aug 2026 14:08:50 +0000

Originally written on 2020-03-10. DEV's displayed publication date reflects this archive migration.

Commands are difficult to remember, and easy to forget, so here's a common command repository

UPDATE pip packages

$ pip install --upgrade django-mailer==2.0.1
# pip <command> <option> <package-name>==<version.number>

COPY file from one dir to another

$ cp -i path/to/file.py path/to/dir/
# -i is for interactive, will be asked to replace any files

CREATE a directory with this date:

# create a directory with this date:
$ mkdir "$(date '+%Y-%m-%d')"
# dir name: 2020-03-10
$ mkdir "$(date '+%Y-%m-%d--%H-%M-%S')"
# dir name: 2020-03-10--11-03-01

$ mkdir "$(TZ=UTC-8  date '+%Y-%m-%d--%H-%M-%S')"
# dir name: 2020-03-10--13-10-59 (Beijing time)
$ mkdir "$(TZ=UTC-0  date '+%Y-%m-%d--%H-%M-%S')"
# dir name: 2020-03-10--05-11-05 (Greenwich time)

RSYNC a remote file to local through pipe

# rsync a remote file to local
$ rsync -avz -e ssh user@ip_add:~/remote_dir/file local_dir/
# '-e' is essential for creating an ssh connection

check mac environment variable
```
$ printenv
```
check a specific variable
```
$ echo $variable_name
```
If setting more permanent environment variables:

For system-wide operations, it should be in /etc/profile

For user based operations, it should be in ~/.bash_profile

For non-login interactive shells, it should be in ~/.bashrc

For better understanding, you better check out this: Unix Introduction — Shell
Look for files: whereis
```
$ whereis python3
/usr/bin/python3
```

locale

# check your locale setting
$ locale
# update it
$ sudo update-locale LANG="en_US.UTF-8" LANGUAGE="en_US.UTF-8"

make nested dir
```
$ mkdir -p _backups/_archives
```

vim basic

输入：
i (insert, start editing)
: w filename （将文章以指定的文件名filename保存）
: wq (输入「wq」，存盘并退出vim)
: q! (输入q!， 不存盘强制退出vim)

The Many Uses of Rsync

It’s faster than scp (Secure Copy) because rsync uses remote-update protocol which allows to transfer just the differences between two sets of files. First time, it copies the whole content of a file or a directory from source to destination but from next time, it copies only the changed blocks and bytes to the destination.

# basic format
# $ rsync <options> <source> <destination>

$ rsync -av path/to/directory1/ /path/to/directory2/ 
$ rsync -av path/to/directory1 /path/to/directory2/ 
# there's a difference: copy the files in that folder or the folder itself

The flags/options:

-a: archive mode, archive mode allows copying files recursively and it also preserves symbolic links, file permissions, user & group ownerships and timestamps
-v: As with many other commands, this option asks for verbose output. This is especially useful when copying large amounts of data.
-r : copies data recursively (but don’t preserve timestamps and permission while transferring data
-z : compress file data
-h : human-readable, output numbers in a human-readable format
–delete: This flag isn’t used here but it is a common feature of rsync. This option deletes any files or folders in the destination that aren’t at the source. Use with extreme caution!
-h or –help: This prints a help page that has useful information about using rsync.

zip, copy remotely, remove source files

# use tar command to archive the files, django-archive is used to backup databases in my project
$ tar -zcvf backup1.tar.gz path/to/files/
# or create with a timestamp
$ tar -zcvf "$(date '+%y-%m-%d').tar.gz" path/to/files/

$ rsync -avz --remove-source-files path/to/backup1 user@ip_add:/path/to/backups/
# with a timestamp
$ rsync -avz --remove-source-files "$(date '+%y-%m-%d').tar.gz" user@ip_add:/path/to/backups/

### More rsync commands: checkout this post
### More rsync flags: checkout this post <-- This post documented better with clearer appearance

Database: Remote PostgreSQL Backup and Restore

Peiwen Li — Tue, 11 Aug 2026 14:08:44 +0000

Originally written on 2020-03-10. DEV's displayed publication date reflects this archive migration.

First, the basics of backing up PostgresSQL db. Then I'll record how I back up my own database on server for future reference.

The Basics

pg_dump command

# on Ubuntu server
$ sudo -u postgres pg_dump dbname > dumpfile

Restore

# on Ubuntu server
$ sudo -u postgres psql dbname < dumpfile

By default, the psql script will continue to execute after an SQL error is encountered. You might wish to run psql with the ON_ERROR_STOP variable set to alter that behavior and have psql exit with an exit status of 3 if an SQL error occurs:

$ sudo -u postgres psql --set ON_ERROR_STOP=on dbname < dumpfile

You can always check the official Doc for more on this subject.

My commands for postgres db and media files backup

Two parts: django-archive to backup media files; pg_dump remotely to backup postgres db. My commands below as a record:

1. `django-archive`: media folder backup

* `settings.py`: Assuming `django-archive` installed, extra settings:

ARCHIVE_DIRECTORY = os.path.join(BASE_DIR, '_backups/_archives')
ARCHIVE_FILENAME = '%Y-%m-%d'

* command on server: create `archive data`

(venv)~/project_folder$ mkdir -p _backups/_archives
(venv)~/project_folder$ python manage.py archive

* local command: pull `archive data` from the server

$ rsync -avz --progress --remove-source-files -e ssh va-boutique:/home/don/VA-boutique/_backups/_archives/"$(date '+%Y-%m-%d')".tar.bz2 /Users/peiwen_li/Documents/GitHub/VA-boutique/_backups/_archives
# --progress option will show the downloading process
# --remove-source-files option will remotely delete the source file on server

2. `pg_dump` remotely to backup postgres db

You can run `pg_dump` on server, then pull it to local

$ sudo -u postgres pg_dump vadb > /home/don/VA-boutique/_backups/_pgdumps/vadbdump_"$(date '+%Y-%m-%d')"

BUT RATHER:

$ ssh -C va-boutique pg_dump -U postgres -h localhost vadb > vadbdump_"$(date '+%Y-%m-%d')"
# Success

# OR:

$ ssh va-boutique "pg_dump -U postgres -h localhost vadb" > vadbdump_"$(date '+%Y-%m-%d')"
# Success

$ ssh va-boutique "pg_dump -U postgres -h localhost -C --column-inserts vadb" > vadbdump_"$(date '+%Y-%m-%d')"_inserts
# option: create column inserts

# use '>' instead of '>>' to avoid writing to the end if file is not empty

Cron Jobs

For now all I have to do is to setup a cron job on server to run django-archive once a week and on the same day pull/send the archive to local machine

create a script file: archive.sh

#!/bin/bash
source .bashrc
source /path/to/venv/bin/activate
python /path/to/manage.py archive

make it executable:
```
$ chmod -rx archive.sh
```
set up cron command: $ crontab -e

Go to crontab guru for checking the crontab timer:
```
# “At 07:00 on Wednesday.”
0 7 * * 3 /path/to/archive.sh
```

So basically, in a word, run this locally every Wednesday:

Because of the time difference between Moscow and China, better run this after mid-day in Beijing Time:

$ rsync -avz --progress --remove-source-files -e ssh va-boutique:/home/don/VA-boutique/_backups/_archives/"$(date '+%Y-%m-%d')".tar.bz2 /Users/peiwen_li/Documents/GitHub/VA-boutique/_backups/_archives && ssh va-boutique "pg_dump -U postgres -h localhost vadb" > /Users/peiwen_li/Documents/GitHub/VA-boutique/_backups/_pgdump/vadbdump_"$(date '+%Y-%m-%d')" && ssh va-boutique "pg_dump -U postgres -h localhost -C --column-inserts vadb" > /Users/peiwen_li/Documents/GitHub/VA-boutique/_backups/_pgdump/vadbdump_"$(date '+%Y-%m-%d')"_inserts

My commands for postgres db restoration

Recorded how I set up local postgres database and take the database backup on server to replicate it locally.
Three parts: local pg db setup (Mac OS), get the dump file and media file, run the restoration command

Step 1: Setting up local pg database

1. Homebrew! everything is automated

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

That's all you have to do

2. Install Postgres

$ brew install postgresql

start Postgres running, and make sure Postgres starts every time your computer starts up. Execute the following command:

$ pg_ctl -D /usr/local/var/postgres start && brew services start postgresql

Check what version is running:

$ postgres -V

3. configuration

go in postgresql commandline
```
$ psql postgres
```
change password of the superuser
```
postgres=# \password
```

create a db user for your application

postgres=# CREATE ROLE db_user_name WITH LOGIN PASSWORD 'quoted_case_Sensitive_password';

You can use the newly created user to create database by switching to this user:

$ psql postgres -U db_user_name

create a database

postgres=# CREATE DATABASE db_name [OPTIONS];

create a database with options, e.g.

postgres=# CREATE DATABASE db_name WITH ENCODING='UTF8' LC_CTYPE='ru_RU.UTF-8' LC_COLLATE='ru_RU.UTF-8' OWNER=postgres TEMPLATE=template0;

grant all privileges to the user

postgres=# GRANT ALL PRIVILEGES ON DATABASE db_name TO db_user_name;

connect to the database
```
postgres=> \connect db_name
```

Step 2: Now get the backup files ready

Get the media files from django-archive, and put them into media root/folter
Get the dump file from server as well

Step 3: Restoration

This is the easy part, run command

$ psql dbname < path/to/dumpfile_backup

ALL DONE!!

refs for restoration:

Getting started with PostgreSQL on Mac OSX - Patrick Sears: library to install 'brew'
How to start a postgresql server on mac osx - latest info for running on postgresql app

Daily Notes: Django QuerySet Boost Efficiency

Peiwen Li — Tue, 11 Aug 2026 14:08:39 +0000

Originally written on 2020-03-07. DEV's displayed publication date reflects this archive migration.

In general, the results of a QuerySet aren’t fetched from the database until you “ask” for them. When you do, the QuerySet is evaluated by accessing the database. --lazy qeury

When querysets are evaluated

Caching and QuerySets

In general, attributes that are not callable will be cached.

In general, callable attributes cause DB lookups every time

`with` template tag link here

To make use of the caching behavior of QuerySet, you may need to use the with template tag.

Use foreign key values directly link here

If you only need a foreign key value, use the foreign key value that is already on the object you’ve got, rather than getting the whole related object and taking its primary key. i.e. do: entry.blog_id instead of entry.blog.id

@cached_property

It is up to you to implement caching when required. Say in your model and there's an expensive computation method in this model, you can cache this method so that if it's used once, it won't be loaded twice for it to use again.

Database Execution

When a query will be executed:

iteration: for i in Blog.objects.all(): ...
get:
- get an object with a unique field: e = Entry.objects.get(pk=5) and then another separate query if below:
- get a related object: b = e.blog
- ### to avoid: e = Entry.objects.select_related('blog').get(pk=5) only hit database once if more queries on Blog model/table

`select_related()` link here

`prefetch_related()` link here

diff between `if query` and if `query.exist()`

Does the same thing but the mechanisms are different, hence, the efficiency.

When to use:
- Just want to check whether the queryset is/isn't empty - has at least 1 result
- Just want to check whether a in b? - more efficient: b.filter(id=a.id).exist()
- Additional to the above, in a large queryset
when to not use
- NOT when you know you will run this query anyway later
Refs:
- ref1: official doc
- ref2: SO post

Overall ref django official doc:

Daily Notes: Ubuntu Commands

Peiwen Li — Tue, 11 Aug 2026 14:08:33 +0000

Originally written on 2020-03-06. DEV's displayed publication date reflects this archive migration.

Ubuntu Commands

### uninstall a package and remove its dependencies completely

  $ sudo apt-get purge --auto-remove packagename

### check out the packages installed

  $ dpkg --list

### switch user

  $ su username

### search file

  $ locate file_name

### list all files including hidden ones

  $ ls <file_dir> -la

### check system timezone

  $ cat /etc/timezone
  Europe/Moscow

DEV Community: Peiwen Li

Git Workflow

Git Workflow

git clone <address>

git pull

git checkout <branch_name>

git checkout master

git pull AGAIN

git merge

git branch -d <new_branch>

git mergetool

git push <remote_server> <local_branch>: <remote_branch>

Refs

TypeScript

Typescript & React

Create React App

Extra: VSCode Extensions

Create a FunctionComponent with TS

Declare the types of PROPS

Types or Interfaces

Declare default value of a prop

Declare the types of HOOKS

Declare the types of React.ChangeElement

Full Code

Declare the types of useRef

Comment in TS

References

Daily Notes

Styling scrollbar

An example:

flex grow & overflow scroll conflict

to capitalize text with CSS text-transform

React.cloneElement

Django and React Architecture Notes

JavaScript Notes: DOM Manipulation Recap

DOM manipulation

Selection

Changing elements

changing style:

DOM EVENT Handlers

onclick event applied in html tags:

use id to invoke a JS function:

onload event on a tag

oninput event in <input /> tag

onmouseover and onmouseout events

All DOM Events: w3school.com ref

addEventListener(event, function, useCapture)

removeEventListener(event, function, useCapture)

DOM Nodes

common DOM Node creation methods:

some CSS recap:

DOM Animation

If a child is to be animated, the parent element must be relative position, and the child should be absolute position.

Another method is Element.animate(), checkout the Github Repo here

Window Object: Details on MDN

Window Properties:

use window Object to OPEN a window

use window Object to CLOSE a window

usage of window name ("newWindow" in the above example)

move() a window and gain focus():

BE CAREFUL where you define a const

Pop up boxes: window objects method

cookies VS localStorage VS sessionStorage

The comparison table

USAGE: You can check in Application tab in the Developer Tools with Chrome Browser:

The Storage does not clear the storage data automatically, to clear the data:

cookie examples:

history property of the window Object

JavaScript Notes: Basics

Comment

var, let and const

naming vars

use backflash to escape

common properties

Array

- mutable

return in functions

scope

switch() {}

Object

git clone `<address>`

git checkout `<branch_name>`

git branch -d `<new_branch>`

git push `<remote_server>` `<local_branch>`: `<remote_branch>`

Declare the types of `React.ChangeElement`

Declare the types of `useRef`

`flex grow` & `overflow scroll` conflict

to capitalize text with CSS `text-transform`

`React.cloneElement`

`onclick` event applied in html tags:

use `id` to invoke a JS function:

`onload` event on a tag

`oninput` event in `<input />` tag

`onmouseover` and `onmouseout` events

`addEventListener(event, function, useCapture)`

`removeEventListener(event, function, useCapture)`

If a child is to be animated, the parent element must be `relative` position, and the child should be `absolute` position.

Another method is `Element.animate()`, checkout the Github Repo here

usage of `window name` ("newWindow" in the above example)

`move()` a window and gain `focus()`:

`cookies` VS `localStorage` VS `sessionStorage`

USAGE: You can check in `Application tab` in the `Developer Tools` with Chrome Browser:

`history` property of the `window` Object

Create strings using template literals (`string \${obj.prop.value} \`)

Difference between `Object.is()` and `===`:

How to check if a value is/isn't `NaN`

1. `django-archive`: media folder backup

* `settings.py`: Assuming `django-archive` installed, extra settings:

* command on server: create `archive data`

* local command: pull `archive data` from the server

2. `pg_dump` remotely to backup postgres db

You can run `pg_dump` on server, then pull it to local