---
title: my note
tags: common
---

# Frameworks
## Ionic
* CLI

:::info
***tabs*** : example name
***--type=*** : choose a framework ex. ***Angular*** or ***React***
:::
or

## Angular
* CLI

`npx -p @angular/cli ng new [name]`

`npx ng generate component [component name] `
It will directly become a folder just inside app folder, so if you wanna put everything inside components folder, go for...
`npx ng generate component components/[component name] `

`npx ng generate service [service name] `
No folder, so if you wanna put them in a folder, go for...
`npx ng generate service service/[service name] `

Allow local ip rather than just localhost
`npx ng serve --host 0.0.0.0 --disable-host-check`

## React
* CRA
`npx create-react-app my-app`
`npx create-react-app my-app --template redux-typescript`
* Next.js
`npx create-next-app my-app`
`npx create-next-app my-app --example with-chakra-ui-typescript`

### React my shortcut
`npm i -D eslint@7 @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-plugin-react eslint-import-resolver-typescript`

`npm i -D eslint-config-prettier prettier`

* new file ==.eslintrc==

{
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      },
      "typescript": {}
    }
  },
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["plugin:react/recommended", "airbnb", "prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "import/no-cycle": "warn",
    "import/prefer-default-export": "off",
    "jsx-a11y/click-events-have-key-events": "off",
    "jsx-a11y/no-static-element-interactions": "off",
    "no-console": "off",
    "no-param-reassign": "warn",
    "no-promise-executor-return": "warn",
    "no-use-before-define": "off",
    "react/function-component-definition": [
      2,
      {
        "namedComponents": "arrow-function",
        "unnamedComponents": "arrow-function"
      }
    ],
    "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }],
    // suppress errors for missing 'import React' in files
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/no-unused-vars": [
      "error",
      { "argsIgnorePattern": "^_" }
    ]
  }
}

* add ==tsconfig.json==

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "typeRoots": ["node_modules/@types"],
    "incremental": true
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

* install ==material ui==
`npm install @mui/material @emotion/react @emotion/styled`

* install ==styled-components==
`npm i styled-components`
`npm i -D @types/styled-components`
`import styled from 'styled-components'`

* install ==react router==
`npm i react-router-dom@6`

* others
`npm i @material-ui/core`
`npm i -S prop-types`
`import PropTypes from 'prop-types'`

---

comment: select the lines again and then press ctrl + / (in windows) Command ⌘ + / (in mac)

imp→ import moduleName from 'module'
exp→ export default moduleName
nfn→ const functionName = (params) => { }
imr→ import React from 'react'
impt→ import PropTypes from 'prop-types'

clg→ console.log(object)  

## Vue
* CLI
`npx @vue/cli create [name]`
* Nuxt.js
`npx create-nuxt-app [name]`
* font-awesome nuxt module
`npm install nuxt-fontawesome`
// the icon packages.
`npm install @fortawesome/free-brands-svg-icons`
`npm install @fortawesome/free-solid-svg-icons`
// solid style
`<fa :icon="['fas','lightbulb']" />`
`<fa :icon="['fab','github']" />`
//will use style from first import
`<fa icon="lightbulb" />`

* OR just install this
`@fortawesome/fontawesome-free`

---

<vue for file scaffolding snippets
<template for template scaffolding snippets
<style for style scaffolding snippets
<script for script scaffolding snippets

## Express
### Init the repo
`npm init -y`

### Install packages
`npm i express cors`
`npm i -D @types/cors @types/express @types/node cross-env ts-node ts-node-dev typescript`

`npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-airbnb-typescript eslint-config-prettier eslint-plugin-import prettier`

* new file ==.eslintrc==

{
  "env": {
    "es2021": true,
    "node": true
  },
  "extends": [
    "airbnb-typescript/base",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": ["import"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "rules": {}
}

### Modify scripts and type in package.json

  "scripts": {
    "start": "npm run build && cross-env NODE_ENV=production node --trace-warnings dist/index.js",
    "build": "rimraf dist && tsc -p tsconfig.json",
    "dev": "cross-env NODE_ENV=development ts-node-dev src/index.ts",
    "lint": "eslint . --ext .ts",
    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
    "release": "standard-version"
  }

### Create ==tsconfig.json==

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "isolatedModules": true,
    "moduleResolution": "node",
    "strict": true,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
    "typeRoots": ["node_modules/@types", "src/@types"],
    "baseUrl": "src/",
    "outDir": "./dist"
  },
  "include": ["./src/**/*.ts"],
  "exclude": ["node_modules"]
}

### Connect to db via TypeORM
* Install packages
`npm i typeorm reflect-metadata mysql`

* add ==ormconfig.js==

module.exports = [
  {
    name: 'development',
    type: 'mysql',
    host: process.env.DB_HOST_DEV,
    port: process.env.DB_PORT,
    username: process.env.DB_USERNAME,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
    synchronize: false,
    logging: false,
    entities: ['src/orm/entities/index.ts'],
    migrations: ['src/orm/migrations/index.ts']
  },
  {
    name: 'production',
    type: 'mysql',
    host: process.env.DB_HOST_PROD,
    port: process.env.DB_PORT,
    username: process.env.DB_USERNAME,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
    synchronize: false,
    logging: false,
    entities: ['dist/orm/entities/index.js'],
    migrations: ['dist/orm/migrations/index.js']
  }
];

- Connect to db, modify ==index.ts== (entry file)

(async () => {
  try {
    const options = await getConnectionOptions(
      process.env.NODE_ENV || 'development'
    );

    await createConnection({
      ...options,
      name: 'default',
      synchronize: false
    });
    console.log('database ok');
  } catch (e) {
    console.log(e);
    console.log('database connection failed!');
  }
})();

## Prettier
* new file ==.prettierrc==

{
  "semi": true,
  "trailingComma": "none",
  "tabWidth": 2,
  "arrowParens": "avoid",
  "singleQuote": true,
  "printWidth": 80,
  "htmlWhitespaceSensitivity": "ignore"
}

## Commit

`npm i -D cz-conventional-changelog husky lint-staged standard-version`

* new file ==.czrc==

{
  "path": "cz-conventional-changelog"
}

* modify ==package.json==

...
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,json}": [
    "eslint --fix"
  ],
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
    "prettier --write"
  ]
}
...

---

# NPM
### Create package.json without asking
`npm init -y`

---

### show all the package have been installed on the computer

`npm list -g --depth 0`

---
### Note

-D is short for --save-dev and -S is short for --save

# NVM
## Install nvm
### Windows
* nvm can't run on Windows!!! So you have to install Windows version.
* [nvm for windows](https://github.com/coreybutler/nvm-windows/releases)

## Mac/Linux
* [nvm](https://github.com/nvm-sh/nvm) site
* Execute something like this to install the lastest version of nvm
`curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash`
* Re-open your terminal, is you see `nvm: command not found`, it's because your OS doesn't have ==.bash_profile==, so just do `touch ~/.bash_profile`, then re-install nvm again.
* If still can't solve the problem, open ==.bash_profile==, add this `source ~/.bashrc`

---
# Deployment
### execute script
`sh deploy.sh`

## React
### Solution1
* modify ==package.json==

{
 ...
  "homepage": "http://wolfzxcv.github.io/react-repos",
 ...
}

* add ==deploy.sh==

# build
npm run build

# navigate into the build output directory
cd build

# commit
git init
git add -A
git commit -m 'deploy'

# if you are deploying to [e-mail]:<USERNAME>/<REPO>
git push -f [e-mail]:wolfzxcv/react-repos.git master:gh-pages

* run `sh deploy.sh`

### Solution2
1. `npm i -D gh-pages`
2. edit package.json

 {
  ...
  "homepage": "http://wolfzxcv.github.io/[repo_name]",
  ...
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
  },
...
  "devDependencies": {
    "gh-pages": "^2.0.1"
  }
}

3. `git remote set-url origin [e-mail]:<USERNAME>/<REPO>`
4. `npm run predeploy`
5. `npm run deploy`

## Angular

1. edit angular.json

{
...
  "projects": {
    ...
      "architect": {
        "build": {
          ...
          "options": {
            "outputPath": "dist",
            ...
          },
          ...  
        },
        ...
      }
    }},
  ...
}

2. edit deploy.sh

# build
# if you are deploying to https://<USERNAME>.github.io/<REPO>
# put REPO name between slashes
npx ng build --prod --base-href=/ng-todo/

# upload to GitHub
cd dist

git init
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f [e-mail]:<USERNAME>/<USERNAME>.github.io.git master

# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f https://github.com/wolfzxcv/ng-todo.git master:gh-pages

cd -

3. execute script
`sh ./deploy.sh`

---

# Ubuntu

`Ctrl + Alt + T => open terminal`
`Ctrl + Shift +W => close current window`

### Port is used!!!!!!
`sudo lsof -i :5000`

`sudo kill -9 56412`

### gedit can't display Chinese
[link](https://samwhelp.github.io/note-ubuntu-17.10/read/subject/gedit/candidate-encodings "gedit can’t display Chinese")

### MySQL
* mysql workbench access denied for user 'root'@'localhost' ubuntu

sudo mysql -u root -p
SHOW VARIABLES LIKE 'validate_password%';
SET GLOBAL validate_password.policy = 0;

ALTER USER 'root'@'localhost' IDENTIFIED BY '0000';

---

# Eclipse shortcut
`ctrl + N => wizard`
`ctrl +shift +O => organize import`
`ctrl +shift +F => formatting`
`shift + alt +S => list`
`fn+F3 => check interface`

---

# Git
// delete branch locally
`git branch -d localBranchName`

// delete branch remotely
`git push origin --delete remoteBranchName`

// update remote branch list =>sync remote branch
`git fetch --prune`

### Git tag
`git tag -a v1.4 -m "my version 1.4"`

`git push origin --tags`

### Commit
* [git cz](https://github.com/commitizen/cz-cli#making-your-repo-commitizen-friendly)
* `npm install commitizen -g`
* `commitizen init cz-conventional-changelog --save-dev --save-exact`

[configuration](https://juejin.cn/post/6844903606815064077)

### Change remote origin when creating another one (ex.GitHub->Gitlab)

前言
當你將本機端的 Git 加入到遠端的 repository 像是 GitHub …等，若之後你又另外建立新的的 repository 或是要將它搬移至其他遠端數據庫例如 GitLab。此時要刪除原本的 remote origin 該怎麼做？

解決方法
1 . Change the URI (URL) for a remote Git repository

2 . Delete remove origin
To remove a remote:

To add a remote:

Finally

### Push to multiple remote url
[Article](https://yami.io/git-multiple-origin/)

* check existing settings
`git remote -v`

* add another remote url
`git remote set-url origin --push --add [remote git url]`

### Rename a local and remote branch in git
1. Rename your local branch.
If you are on the branch you want to rename:

* ```git branch -m new-name```
If you are on a different branch:

* ```git branch -m old-name new-name```

2. Delete the old-name remote branch and push the new-name local branch.

* ```git push origin :old-name new-name```

3. Reset the upstream branch for the new-name local branch.
Switch to the branch and then:

* ```git push origin -u new-name```

### Delete commits locally and remotely
1. reset locally

:::info
 one ^ means a commit back, so ^^ mean 2 commits back
:::
2. sync to remote by force pushing the commit

---

# GraphQL keyboard shortcut in Linux
// run query
`cmd + enter`

// auto complete
`ctrl + space`

---

# CSS 權重
!important(即使是標註在class底下) > Inline Styles > id > class (後declare的權重較高)

---

May 06, 2019 日記
不寫 return 嫌 function怎沒反應
typo 在哭到底錯在哪
括號{} () 分號逗號 , ; 打錯..在哭到底錯在哪
人家要你回傳字串 不是回傳 console.log 題目要求什麼,看清楚!!!
. # 到底要 id 還是要 class 還是指定 element ???

---

# 專案卡片分配

* 專案作業=>公告事項/專案資訊/專案會議/教育訓練/開發環境/環境建置
* 系統分析與UI設計(for SA&UI)
* 前端開發
* 後端開發
* 系統功能測試(for QA)
* 待部署正式區
* 完成結案

---

# YApi explanation
[YApi](https://ithelp.ithome.com.tw/articles/10214329)

---

# ckeditor
[online builder](https://ckeditor.com/ckeditor-5/online-builder/)

[custom](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html#using-a-custom-ckeditor-5-build)

[explanation](https://recodeblog.com/posts/9/CKEditor-5-%E6%95%99%E5%AD%B8%E4%BA%8C%E5%AE%A2%E8%A3%BD%E5%8C%96%E7%B7%A8%E8%BC%AF%E5%99%A8%E7%9A%84%E5%8A%9F%E8%83%BD%E5%88%97-post)

alternative: tinymce