Try   HackMD

Frameworks

Ionic

  • CLI

npx ionic start [app name] tabs --type=angular

tabs : example name
–type= : choose a framework ex. Angular or React

or
npx ionic start [app name]

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

Mac/Linux

  • 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 git@github.com:<USERNAME>/<REPO>
git push -f git@github.com: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"
​ }
}
  1. git remote set-url origin git@github.com:<USERNAME>/<REPO>
  2. npm run predeploy
  3. npm run deploy

Angular

  1. edit angular.json



















{
...
​ "projects": {
​   ...
​     "architect": {
​       "build": {
​         ...
​         "options": {
​           "outputPath": "dist",
​           ...
​         },
​         ...  
​       },
​       ...
​     }
​   }},
​ ...
}
  1. 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 git@github.com:<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 -
  1. 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

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
    • npm install commitizen -g
    • commitizen init cz-conventional-changelog --save-dev --save-exact

configuration

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
git remote set-url origin git://new.url.here

2 . Delete remove origin
To remove a remote:
git remote remove origin

To add a remote:
git remote add origin yourRemoteUrl

Finally
git push -u origin master

Push to multiple remote url

Article

  • 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

  1. Delete the old-name remote branch and push the new-name local branch.
  • git push origin :old-name new-name
  1. 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
    git reset HEAD^

one ^ means a commit back, so ^^ mean 2 commits back

  1. sync to remote by force pushing the commit
    git push -f

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

ckeditor

online builder

custom

explanation

alternative: tinymce

Last changed by 
 
Nien-Ying Chou
If you find my notes helpful, feel free to also help others around :)
0
319

Read more

Macro

| | Amount | Calories | Protein | Fat| Fiber |

Apr 1, 2025
Munich-Salzburg-Hallstatt

09:13/09:06離開機場, 搭乘S1或S8到München Hbf/ Ost車站旁邊的 EDEKA 跟 dm 採買10:55 Hbf/ 11:04 Ost 出發Salzburg, 12:42 抵達

Nov 26, 2024
Thesis topic

Generate AI

Jun 8, 2024
Machine Learning Introduction

You can later watch this video to recap

May 1, 2024
Read more from Nien-Ying Chou
Published on HackMD