Wk-notes-11-11-migrating-typescript-git-remote-label-Emotion-controlled-component

• Add Definition ts (.d.ts) for vscode only, remember to install @types dev dependency for external types to make it work

Attention: js code will not be checked unless adding // @ts-check

• For <Toggle/>/<Switch/> control Component, label solution: <react-switch/> there is a recommended way to wrap control by <label/>, more for accessibility and semantic html.

• Emotion css-in-js solution

  • A pure css-in-js solution, framework agnostic (use css() to create class, cx() to compose)

  • Allow nested css, e.g. mediaquery, nested tag and className

  • Able to edit element directly

• Use "Reflection" to check if the Component is controlled or not. A pattern for mixed control component

class C extends React.Component{
  static isControlled = props => typeof props.checked === 'boolean';
  
  getCheckedState = () =>
    Toggle.isControlled(this.props) ? this.props.checked : this.state.checked;
}
​

• Git remote command

$ git remote -v
> origin  https://github.com/YOUR_USERNAME/YOUR_FORK.git (fetch)
> origin  https://github.com/YOUR_USERNAME/YOUR_FORK.git (push)
​
$ git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git
​
$ git remote -v
> origin    https://github.com/YOUR_USERNAME/YOUR_FORK.git (fetch)
> origin    https://github.com/YOUR_USERNAME/YOUR_FORK.git (push)
> upstream  https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git (fetch)
> upstream  https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git (push) 
​
# To get sync
$ 'congcongcong250/runway/master' git fetch qantas master
$ 'congcongcong250/runway/master' git pull qantas master

• Keep forked repo up-to-date