ywwwtseng

import { useState, useMemo } from 'react'

class ArrayUtil {
  static range(...T) {
    let start, end;

    if (T.length === 1) {
      start = 0;
      end = T[0];
    } else {

ywwwtseng

/*
 * Easing Functions - inspired from http://gizma.com/easing/
 * only considering the t value for the range [0, 1] => [0, 1]
 */
EasingFunctions = {
  // no easing, no acceleration
  linear: t => t,
  // accelerating from zero velocity
  easeInQuad: t => t*t,
  // decelerating to zero velocity

ywwwtseng

在開發過程中，當需求變得龐大且模糊時，會延長開發週期，而無法在一個 sprint (2~4週) 完成，也就無法給顧客即時的回報，如果花費大量
的時間開發，最後與客戶的方向不同，會得不償失。

在 Scrum 的開發流程中，我們將需求依需求尺寸由大到小分成 Investment theme, epic, feature, user story, task.

Investment theme: 投資主題，主要定義主方向，像我們提供的 Investment theme 為教育服務，或許這個概念比較抽象，你可以把它想成 myViewBoard.com。

Epic: 顧名思義就是很長的敘事性詩篇，在 Scrum 的開發過程中，屬於 high level 的需求描述，你可以想成  myViewBoard.com 中各個
子網站，如 Start myViewBoard, myViewBoard classroom 等。

ywwwtseng

Introduction

• C-a == Ctrl-a
• M-a == Alt-a

General

:q        close
:w        write/saves
:wa[!]    write/save all windows [force]
:wq       write/save and close

ywwwtseng

### Node template
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Dependency directories
node_modules/

ywwwtseng

React Hooks

什麼是 React Hooks?

React Hooks 是 16.7 版推出的功能，使用 React Hooks 讓我們可以減少使用 Class Components 去建構我們的 React 應用程式。

useState

使用 useState 可以讓我們的 Functional Components 具備狀態，userState 的 setter 比 setState 更具可讀性。

ywwwtseng

class Socket {
  constructor(
    domain,
    { reconnection = true, reconnectionDelay = 1000 } = {
      reconnection: true,
      reconnectionDelay: 1000,
    }
  ) {
    this.ws = this.connect(domain);
    this.reconnection = reconnection;

ywwwtseng

Coercion

Coercion 指 JS Engine 將資料從一個型別轉換成另一種型別。

• Example 1: JS Engine 將 1 從 number 轉換成 string

var str = 1 + "2"; // "12"

ywwwtseng

Hoisting

為了提高 Javascript 在瀏覽器上的效能， Javascript 編譯器會進行名為 Hoisting（提升）的行為，當 JS engine對 Javascript 進行編譯時會同時進行變數及函式的宣告，將他們儲存在記憶體中，然後運行被編譯過的代碼。

sayHi();

function sayHi() {
  console.log(words);   // undefined
 var words = 'Hello';

ywwwtseng

Clean Code For Vue

✌️ Vue

聲明式渲染

善用 computed 屬性去描述一些條件式或可讀性不高的程式碼

<template>