Gatsby Starter Blog RSS Feed

Client-side / Server-side Rendering, CSR or SSR

Thu, 19 Mar 2020 17:00:00 GMT

將資料與 HTML 之間的整合放在伺服器做還是瀏覽器做。

目前 Single Page Application 架構下的前端在討論 CSR/SSR 時只著重在首屏載入的部分，因為依目前盛行的 Single Page Application 的架構，網站後續的變化通常都會是由前端 Rounter 來處理，也就是 Client-side Rendering。

Server-side Rendering

傳統渲染方式（例如 JSP ），由 Server 渲染好 HTML 後再吐給前端瀏覽器，每次畫面的變化瀏覽器都必須由 Server 取得一個完整的新 HTML，所以如果網頁的互動頻繁, 網速不佳的話，會影響用戶體驗。

但比起純 Client-side Rendering 可以減少一些初期的 HTTP 請求，一般用於首屏優化。

Client-side Rendering

依賴在瀏覽器端執行的 JavaScript，一開始只會從 Server 端獲得相對簡單的 HTML，接下來藉由前端 Router 發出更多 HTTP Request 去取得資料並渲染畫面。

比較

	優勢	劣勢
SSR	- SEO - 初始畫面載入快速 - 適合靜態網站	- 每次畫面變化都要與 Server 溝通 - 每次畫面變化都要重新渲染整份 HTML - 網站互動麻煩
CSR	- 適合多樣互動 - 適合做 Web Application	- 不利 SEO - 初始畫面載入可能較慢

References

SSR VS CSR ,一次讲个通透 - 知乎

[React] SSR 筆記 | PJCHENder 私房菜

【SEO】SPA、SSR 差別 - Neil Yang - Medium

Cookie, Session, LocalStorage 的相同與相異

Sun, 23 Feb 2020 14:45:00 GMT

Server 端要存資料在瀏覽器端的三種方式。

Cookie

Server 在 response 中利用 set-cookie 存在瀏覽器上，可以同時設定失效時間
瀏覽器會在接下來每一次送 request 到相同 domain name 時自動帶上 Cookie
最常被用來保持使用者的登入狀態
大小限制約 4kb，每個 domain 可以存的容量有限制，各瀏覽器不同

Web Storage API

localStorage, sessionStorage 是在 HTML5 新增的瀏覽器資料儲存解決方案，

為了解決 Cookie 一些已知的缺點

容量小,
每次傳送都要夾帶，Cookie 過多後的性能問題

所以後來提出的 localStorage, sessionStorage 就有了幾個特點：

容量有 5 mb
不會每次 request 都夾帶

API 介面

localStorage, sessionStorage 為相同的 API 介面, Web Storage API - Web APIs | MDN

存入資料：localStorage.setItem(key, value)
取得資料：let storageValue = localStorage.getItem(key, value)
刪除資料：localStorage.removeItem(key)
刪除全部資料：localStorage.clear()
value 必須用 JSON.stringify 轉成 String 存入，用 JSON.parse 轉 Object 取出

相異之處：

localStorage

存在 localStorage 的資料不會主動過期，除非被刪除。

sessionStorage

生命週期存在於單一分頁，關閉分頁後該分頁的 sessionStorage 就會被清除。若是另開新分頁的話，新分頁會有一個獨立的新 sessionStorage。

應用場景

user session

帳號登入狀態
購物車

個人化

user setting, theme

追蹤

user behavior tracking

References

cookie、session、local storage、session storage 差異 | Jimmy's Blog

Web Storage API - Web APIs | MDN

Cookie and Session

Sun, 23 Feb 2020 14:40:00 GMT

HTTP 是無狀態的

對 server 而言，每一次收到的 request 都是不相關的。不同 request 之間關係的狀態管理機制就稱為 Session 。

Session 實作方式

利用網址的 query string： user 原本在 shopping.com 購物，對 apple 按下加入購物車後，將 user 導到 shopping.com?buy=apple 接著再對 banana 按下加入購物車，將 user 導到 shopping.com?buy=apple,banana 最後 user 結帳的時候，server 就會知道 user 要買 apple 跟 banana
Cookie： user 對 apple 按下加入購物車，Server 發送 Set-Cookie: buy=apple

Cookie 安全性

Cookie 存在瀏覽器，所以使用者其實是可以隨時檢視並更改的。

解決方法

加密 Cookie 內容，把資訊內容存在使用者的瀏覽器端稱為 Cookie-based session ，缺點是內容有可能過多，超過瀏覽器限制。
Server-side data storage 瀏覽器 Cookie 中只存一個 Session ID ，其他資料都存在 Server 中。（可以是存在記憶體或是資料庫中）

express-session

expressjs/session: Simple session middleware for Express

const express = require('express')
const session = require('express-session')

const app = express()
const port = 8888

// use session middleware
app.use(session({
  secret: 'keyboard cat'
}))

// root route
app.get('/', function(req, res, next) {
  // 可以用 req.session 拿取存在 session 的值
  // 這邊判斷有沒有 req.session.viewsjj
  // 如果有的話就 +1，反之初始化成 1
  // 所以 req.session 可讀也可寫
  if (req.session.views) {
    req.session.views++
    res.write('views: ' + req.session.views)
    res.end()
  } else {
    req.session.views = 1
    res.end('welcome to the session demo. refresh!')
  }
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}!`)
})

avoid_react_re-rendering

Sun, 09 Feb 2020 22:00:00 GMT

Example Component: Counter

常見的範例 React Component: Counter

const Title = () => {
  console.log('Title rendering!');
  return (
    <div>
      <h1>Counter</h1>
    </div>
  );
};

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Title />
      <span>{`目前計數：${count}`}</span>
      <button type="button" onClick={() => { setCount(count + 1); }}>
        點我加一
      </button>
    </div>
  );
};

每次點下 add 1 按鈕，
Counter 的 state 都會更新，
整個 Counter 會進行 re-render。

連帶會使沒有任何改變的 <Title /> 也進行 re-render。

PureComponent, shouldComponentUpdate

上述中的 <Title /> 的 re-render 就沒有實質作用，
可以被節省的情況。

在傳統的 Class based Component 中，
可以用 PureComponent 或 shouldComponentUpdate 處理

React.memo

在使用 Function Component 的狀況下，
想要有 PureComponent 的效果，
最直接的方法就是在外面套上 React.memo()

const Title = props => {
    ...
}

const ReactMemoTitle = React.memo(Title)

此時的 ReactMemoTitle 就具有 PureComponent 的特性，
在 props 沒有變動的情況下不會 re-render


import React, { useState } from 'react'

const Title = props => {
  const { title } = props

  console.log(`${title} is rendering!`)

  return (
    <div>
      <h1>{title}</h1>
    </div>
  )
}

const ReactMemoTitle = React.memo(Title)

const Counter = props => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <section>
        <Title
          title='Normal Title'
        />
      </section>
      <section>
        <ReactMemoTitle
          title='ReactMemo Title'
        />
      </section>

      <div>{`current count:：${count}`}</div>

      <button
        type='button'
        onClick={() => {
          setCount(count + 1)
        }}
      >
        add 1
      </button>
    </div>
  )
}

export default Counter

useMemo

useCallback

references

React | 關於 Component 效能優化的那件小事 - StarBugs Weekly 技術專欄 - Medium

github

sss63232/avoid_react_re-rendering

encode101, 網頁上的 `編碼` 基礎知識

Fri, 05 Jul 2019 00:00:00 GMT

編碼的作用？

用數字代表某一個文字

ASCII 編碼

Char 代表文字符號, Dec 代表相對應的十進位數字

Unicode

使用十六進制的方式來表示一個數值
把數字和全世界文字符號間做一對一的轉換

進位制

JavaScript 中：

二進制數字，需在數字的最前面加上 0b
八進制數字，需在數字的最前面加上 0 或 0o 。
十六進制數字，需在數字的最前面加上 0x。

U+<十六進制數值>

例如 U+0061 就表示英文字母的 a

其中的 0061 是十六進位制的數值，轉換成 10 進位的話是 97，這和當初的 ASCII 表示相對應的

沿用 ASCII 編碼

Unicode 直接沿用原本 ASCII 的編號與文字符號的對應，所以 ASCII 中 a 的編號會和 Unicode 中 a 的編號相同，用十進位表示都是97。

Code Point 碼點

文字或符號對應到的編號稱為「碼點」，Unicode 中指的就是 U+ 後面的數字，每個碼點都是唯一的

碼點與文字轉換

ES6 str.codePointAt() 和 String.fromCodePoint()

ES5 str.charCodeAt() 和 String.fromCharCode()

文字符號 to Unicode 碼點

'A'.codePointAt()            // 回傳 '65'（十進制）
(65).toString(16)            // 回傳 41，將 65 轉成十六進制
// 表示 A 為 U+0041

Unicode 碼點 to 文字符號

String.fromCodePoint(65)     // A，使用 10 進位
String.fromCodePoint(0x0041) // A，使用 16 進位
String.fromCodePoint(0o101)    // A，使用 8 進位

Code Point in JavaScript

只使用到 Unicode 基本平面時（\u <碼點>）
有使用到 Unicode 輔助平面時（\u {<碼點> }）
只使用到 ASCII 字符時（\x <碼點>）

// A = U+0041 = \x41 = \u0041 = \u{41} = \u{0041}

console.log('\u0041')          // 'A'
console.log('\u{41}')          // 'A'
console.log('\u{0041}')        // 'A'
console.log('\x41')            // 'A'

UTF-8, UTF-16, UTF-32

Unicode（萬國碼）讓所有國家的文字符號都有個唯一的碼點可以在電腦內被辨，但是碼點（從 U+0000 到 U+10FFFF）要如何儲存則不在 Unicode 規範中

UTF-8, UTF-16 或 UTF-32 則都可以視為是 Unicode 實做的一種方式，它們用不同的方式來規範要如何將 Unicode 中的碼點儲存在電腦中以被使用，如果直接把整個 Unicode 代碼搬進電腦裡儲存，可能會佔用太多不必要的空間（例如，UTF-32）。

在網際網路上最常被使用的則是 UTF-8 的編碼方式，而在 JavaScript 引擎中主要支援的則是 UTF-16。

HTML Encode

HTML Encode 的特點在於，它會用 & 開始 ; 結束

也可以用十六進位或十進位的方式表示

例如：

! = &excl; = ! = !，&excl 字串經過 HTML 後會顯示成 !

https://dev.w3.org/html5/html-author/charref

URI Encode

encodeURI

不編碼字符有 82 個

只是對中文字符做了編碼，編碼後的地址在瀏覽器裡可以直接打開

要編碼的 url 沒有參數存在，使用 encodeURI

encodeURIComponent

不編碼字符有 71 個

比 encodeURI 編碼的範圍更大

將 "/" 符號也已經轉碼了

編碼後的位置在瀏覽器裡不能被直接訪問

url 中有參數存在，使用 encodeURIComponent

Example

鏈結串列（Linked List)

Sun, 23 Jun 2019 00:00:00 GMT

有序的元素集合
不同於陣列，鏈結串列中的元素在記憶體中並不是連續（Sequential）放置的
每個節點（Node）元素由一個存放元素本身資料（Data）和一個指向下一個元素的指標鏈結（Next Pointer）組成
如同火車一般的結構

與陣列 (Array) 的比較

陣列（Array）優點：

可支援循序及隨機存取
可靠度高，不會因為鏈結斷裂而遺失資料
循序存取速度快

陣列（Array）缺點：

因占用連續的記憶體空間可能會浪費不必要之記憶體
刪除或插入新元素造成資料移動頻繁（在大多數程式語言中陣列大小是固定的）
各元素型態皆相同
不支援串列之共享

鏈結串列（Linked List）優點：

元素在記憶體中可以非連續
方便動態刪除或插入新元素
各節點資料型態不必一定相同
支援串列之共享

鏈結串列（Linked List）缺點：

僅支援循序存取
指標斷裂，資料就遺失
循序存取速度慢，因需要先讀取指標

Implementation

export class Node {
  constructor(element) {
    this.element = element;
    this.next = null;
  }
}

export class LinkedList {
  constructor() {
    this.length = 0;
    this.head = null;
  }

  append(element) {
    const node = new Node(element);

    if (this.head === null) {
      this.head = node;
    } else {
      let current = this.head;
      while (current.next) {
        current = current.next;
      }
      current.next = node;
    }

    this.length++;
  }

  insert(position, element) {
    if (position < 0 || position >= this.length) {
      return null;
    }

    const node = new Node(element);

    let current = this.head;
    if (position === 0) {
      this.head = node;
      this.head.next = current;
    } else {
      let previous = null;
      let index = 0;
      while (index < position) {
        previous = current;
        current = current.next;
        index++;
      }

      previous.next = node;
      node.next = current;
    }

    this.length++;
  }

  removeAt(position) {
    if (position < 0 || position >= this.length) {
      return null;
    }

    let current = this.head;
    if (position === 0) {
      this.head = current.next;
    } else {
      let index = 0;
      let previous = null;
      while (index < position) {
        previous = current;
        current = current.next;
        index++;
      }
      previous.next = current.next;

      return current.element;
    }
    this.length--;
  }

  remove(element) {
    const index = this.indexOf(element);
    this.removeAt(index);
  }

  indexOf(element) {
    let current = this.head;
    let index = 0;
    while (current) {
      if (current.element === element) {
        return index;
      }
      current = current.next;
      index++;
    }

    return -1;
  }

  isEmpty() {
    return this.length === 0;
  }

  size() {
    return this.length;
  }

  toString() {
    let current = this.head;
    const elements = [];

    while (current) {
      elements.push(current.element);
      current = current.next;
    }

    return elements.join(" ");
  }

  getHead() {
    return this.head;
  }
}

Recursion in JavaScript

Sun, 23 Jun 2019 00:00:00 GMT

call stack

Any time a function is invoked it's placed(pushed) on the top of the call stack.
When seeing the return keyword or when the function ends, the compiler will remove(pop)

When we write recursive functions, we keep pushing new functions onto the call stack!

How recursive functions work

Invoke the same function with a different input until you reach your base case.

base case: The condition when the recursion ends.

SO, 2 essential parts of a recursive function:

Base Case
Different Input

Basic recursive function

const sumRange = num => {
  if (num === 1) {
    return 1
  }

  return num + sumRange(num - 1)
}

console.log('--------')
console.log(sumRange(10))
console.log(sumRange(5))
console.log('--------')

Regular Expression in JavaScript

Sun, 23 Jun 2019 00:00:00 GMT

Test method

return boolean

Match Literal Strings

let testStr = "freeCodeCamp";
let testRegex = /Code/;
let testRegex2 = /free|code/;

testRegex.test(testStr); // return true
testRegex2.test(testStr); // return true

Ignore case

use flag : i

let myString = "freeCodeCamp";
let fccRegex = /freecodecamp/i;
let result = fccRegex.test(myString); // return true

Extract Matches

get found matches

"Hello, World!".match(/Hello/);
// Returns ["Hello"]

find more than the first match

use flag : g

let testStr = "Repeat, Repeat, Repeat";
let singleRegex = /Repeat/;
let globalRegex = /Repeat/g;

testStr.match(singleRegex); // Returns ["Repeat"]
testStr.match(globalRegex); // Returns ["Repeat", "Repeat", "Repeat"]

Match Single Character with Multiple Possibilities

wildcard character: `.`

let humStr = "I'll hum a song";
let hugStr = "Bear hug";
let huRegex = /hu./;

humStr.match(huRegex); // Returns ["hum"]
hugStr.match(huRegex); // Returns ["hug"]

character classes

placing a group of characters inside square ([and ]) brackets.

let bigStr = "big";
let bagStr = "bag";
let bogStr = "bog";

let bgRegex = /b[aiu]g/;

bigStr.match(bgRegex); // Returns ["big"]
bagStr.match(bgRegex); // Returns ["bag"]
bogStr.match(bgRegex); // Returns null

character set

Using the hyphen (-) to match a range of characters

let catStr = "cat";
let batStr = "bat";
let matStr = "mat";

let bgRegex = /[a-e]at/;

catStr.match(bgRegex); // Returns ["cat"]
batStr.match(bgRegex); // Returns ["bat"]
matStr.match(bgRegex); // Returns null

negated character sets

place a caretcharacter (^) after the opening bracket and before the characters you do not want to match.

Match 0 or more times

use the + character to check if that is the case. Remember, the character or pattern has to be present consecutively.

0 or more times

the asteriskor star: *

let soccerWord = "gooooooooal!";
let gPhrase = "gut feeling";
let oPhrase = "over the moon";
let goRegex = /go*/;
soccerWord.match(goRegex); // Returns ["goooooooo"]
gPhrase.match(goRegex); // Returns ["g"]
oPhrase.match(goRegex); // Returns null

1 or more times

use the + character. Remember, the character or pattern has to be present consecutively.

const regex = /a+/gi;

"abc".match(regex);  // return ['a']
"aabc".match(regex); // return ['aa']
"abab".match(regex); // return ['a','a']

Quantity specifiers

with curly brackets ({and }). You put two numbers between the curly brackets - for the lower and upper number of patterns.

let A4 = "aaaah";
let A2 = "aah";
let multipleA = /a{3,5}h/;
multipleA.test(A4); // Returns true
multipleA.test(A2); // Returns false

let atLeast3A = /a{3,}h/;
let exact3A = /a{3}h/;

Lazy matching

const greedyRegex = /t[a-z]*i/
const lazyRegex = /t[a-z]*?i/

const str = 'titanic'
str.match(greedyRegex); // return ['titani']
str.match(lazyRegex);		// return ['ti']

Regular expressions are by default greedy, so the match would return ["titani"]. It finds the largest sub-string possible to fit the pattern.

The alternative is called a lazymatch, which finds the smallest possible part of the string that satisfies the regex pattern.

Match Beginning/Ending

`^` Beginning

(^) inside a character set, create a negated character setin the form [^thingsThatWillNotBeMatched].

===

(^) outside of a character set, used to search for patterns at the beginning of strings.

let firstString = "Ricky is first and can be found.";
let firstRegex = /^Ricky/;
firstRegex.test(firstString); // Returns true

let notFirst = "You can't find Ricky now.";
firstRegex.test(notFirst); // Returns false

`$` Ending

let theEnding = "This is a never ending story";
let storyRegex = /story$/;
storyRegex.test(theEnding); // Returns true

let noEnding = "Sometimes a story will have to end";
storyRegex.test(noEnding); // Returns false

shorthand character classes

\w is equal to [A-Za-z0-9_], words
\W is equal to [^A-Za-z0-9_]
\d is equal to [0-9], digital cahracters
\D is equal to [^0-9]
\s is equal to [ \r\t\f\n\v], matches whitespace, but also carriage return, tab, form feed, and new line characters.
\S is equal to [^ \r\t\f\n\v], non-whitespace characters

React, how to avoid re-render every time

Sat, 22 Jun 2019 00:00:00 GMT

避免每次 props/state 更新都 re-render

React.Component 裡，如果 props/state 發生改變即會觸發重新渲染 (re-render) ， parent component 重新渲染時會觸發重新渲染 child components 。

可以透過 shouldComponentUpdate 這個 lifecycle 方法來選定只有特定的 props 有改變時才更新 component ，或是改使用 React.PureComponent ，這樣就能僅在任何 props/state 有改變時才觸發更新。

shouldComponentUpdate 比較 props/state 是否相等的基準是使用 shallowEqual ，特性是會以 object 的第一層 key 做 strict equal (===)，換言之即使是同樣的值，若 reference 的物件不同就會被視為是不同的物件。

E2E test

Tue, 26 Mar 2019 15:54:15 GMT

Page Objects Pattern

通常會攥寫兩類檔案：

page.js: 將一些供整個專案使用的底層 API 在此封裝，各個 xx.page.js 會繼承該 page.js
xx.page.js: 特定頁面，定義該頁的屬性（頁面上元素）與方法

Example

CodeceptMixin 相當於 page.js
SPHelper 相當於 xx.page.js

class SPHelper extends CodeceptMixin(ECHelper) {
  constructor (config) {
    super(config)
    this.SPCookie = null

    // setup account storage
    let mockStorage = null
    if (this._isOSX()) {
      const MOCK_SHP_PL_HEADLESS_PWD = process.env.MOCK_SHP_PL_HEADLESS_PWD
      mockStorage = {
        [SHP_HEADLESS_SHP_PL_ID]: MOCK_SHP_PL_HEADLESS_PWD
      }
    }
    this.setupAccountStorage({ [SHP_HEADLESS_SHP_PL_ID]: '' }, mockStorage)
    this.createTestFiles()
  }

    // 方法
  setSPCookie (cookies, isLoginAccount) {
    const expirationDelay = 3 * 3600 * 1000
    const futureTime = `${Date.now()}${expirationDelay}`
    const browser = this._browser()
    const baseUrl = options.url || options.baseUrl
    const parsedURL = URL.parse(baseUrl)
    const secure = (parsedURL.protocol === 'https:')

    let localCookies = _.filter(cookies, c => !_.isEmpty(c.value))
    localCookies.push(mockOktaAtCookie)

    const getCookie = function (name) {
      const cookie = _.find(localCookies, { name })
      const value = _.get(cookie, 'value', '')
      const ret = {
        name: name,
        value: value,
        path: '/',
        domain: domain,
        secure: secure,
        expiry: futureTime
      }

      return ret
    }

    const cookiesTobeSet = _.map(cookies, (cookie) => {
      return getCookie(cookie.name)
    })

    if (this._isNightmare()) {
      return browser
        .goto(LOGIN_URL)
        .cookies.set(cookiesTobeSet)
    } else if (this.isIE()) {
      // grabCookie, seeCookie, setCookie will cause IE crash, bypass them
      return Promise.resolve()
    }

    return browser.url(baseUrl + '/error?SET_COOKIE_URL')
      .setCookie(getCookie(spCookieKey))
      .setCookie(getCookie(secretDashboardCookieKey))
      .setCookie(getCookie(oktaAtCookieKey))
      .setCookie(getCookie(oktaItCookieKey))
  }

  async loginAsOktaHeadless () {
      // ...
  }

    // 方法
  async loginAsShpPl (simulatedId) {
    await this.loginAsOktaHeadless()
    return this.loginSupplierPortalAsShpPl(SHP_HEADLESS_SHP_PL_ID, simulatedId)
      .then((cookies) => {
        return this.setSPCookie(cookies)
      })
  }


}

目前目前的 E2E 測試工具有哪些？

WebDriverIO 測試撰寫 pattern

Page Objects Pattern on WebDriverIO - Eden Liujj

Insertion Sort with ES6

Mon, 25 Mar 2019 16:12:32 GMT

Concept

打麻將或完撲克牌時我們很自然會用的排序法，假設從牌面的最左邊開始好了，第一輪就會從左邊數來第二張牌開始，姑且稱它為 unsortedCard，第二輪 unsortedCard 就是左邊數來第三張牌... 以此類推，有 n 項，便有共 n-1 輪

我們每一輪的任務便是，讓 unsortedCard 一一跟它左邊的牌比大小並交換位置，就像氣泡排序法一樣，直到正確的位置

Solution

//// 這是我一開始自己思考後的解法
const testArr=[34,23,566,342,1337,86,6,99]

const insertionSort = arr => {
  const cloneArr = [...arr];
  const cloneLength = cloneArr.length;
  // 第一張牌沒有可以比的對象，
  // 所以從第二張牌開始進行插入排序
  for (let i = 1; i < cloneLength; i++) {
    const unsortedCard = cloneArr[i];
    // 這一輪 "unSortedCard" 的位置，
    // 有機會往左移動
    let unsortedIndex = i;
    // j 是往前第幾張牌的 index
    for (let j = 1; j < i + 1; j++) {
      const sortedIndex = i - j;
      if (cloneArr[sortedIndex] > unsortedCard) {
        [cloneArr[unsortedIndex], cloneArr[sortedIndex]] = [cloneArr[sortedIndex], cloneArr[unsortedIndex]];
        // unsortedCard 與左邊一張牌交換後，
        // 位置 index 也要更新
        unsortedIndex--;
      } else {
        // 如果 unsortedCard 比 sortedCard 大的話，
        // 那就是位置正確了
        break;
      }
    }
  }
  return cloneArr;
};

//// 這是參考範例後的解法
// 主要差在，既然我的內迴圈有用 break，
// 代表迴圈次數並不固定，
// 那就可以使用 while 迴圈

const insertionSortWithWhile = arr => {
  const cloneArr = [...arr];
  const cloneLength = cloneArr.length;

  for (let i = 1; i < cloneLength; i++) {
    const unsortedCard = cloneArr[i];
    let unsortedIndex = i;

    while (cloneArr[unsortedIndex - 1] > unsortedCard) {
      [cloneArr[unsortedIndex - 1], cloneArr[unsortedIndex]] = [cloneArr[unsortedIndex], cloneArr[unsortedIndex - 1]];
      unsortedIndex--;
    }
  }

  return cloneArr;
};
console.log('--------');
console.log('unsorted arr', testArr);
console.log('insertionSort arr', insertionSort(testArr));
console.log(`insertionSortWithWhile arr`, insertionSortWithWhile(testArr));
console.log('--------');

Digestion from Writing Resilient Components

Tue, 19 Mar 2019 16:29:44 GMT

Digestion from Writing Resilient Components

from Writing Resilient Components — Overreacted

There are 4 helpful principles.

Don't Stop the Data Flow

When somebody uses your component, they expect that they can pass different props to it over time, and that the component will reflect those changes.

Keep the rendering result consistent with prop changes.

const Button = ({ color, children }) => {
  return (
    // ✅ `color` is always fresh!
    <button className={'Button-' + color}>
      {children}
    </button>
  );
}

// usage
<Button color={isOk ? 'blue' : 'red'} />

確保傳進 Component 的 props 總是會直接影響最後 render 的結果

Common Mistake

copy props into state:

class Button extends React.Component {
  state = {
    color: this.props.color
  };
  render() {
    const { color } = this.state; // ❌ `color` is stale!
    return (
      <button className={'Button-' + color}>
        {this.props.children}
      </button>
    );
  }
}

Computed Value

Computed values are another reason people sometimes attempt to copy props into state.

Use memoization.

function Button({ color, children }) {
  const textColor = useMemo(
    () => slowlyCalculateTextColor(color),
    [color] // ✅ Don’t recalculate until `color` changes
  );
  return (
    <button className={'Button-' + color + ' Button-text-' + textColor}>
      {children}
    </button>
  );
}

even optimizing expensive computations isn’t a good reason to copy props into state. Our rendering result should respect changes to props.

Keep the Local State Isolated

如何決定什麼該存在 Component 的 local state，什麼該存在 Component 外部,

If you’re not sure whether some state is local, ask yourself: “If this component was rendered twice, should this interaction reflect in the other copy?” Whenever the answer is “no”, you found some local state.

For example, imagine we rendered the same Post twice.

Post content. We’d want editing the post in one tree to update it in another tree. Therefore, it probably should not be the local state of a Post component. (Instead, the post content could live in some cache like Apollo, Relay, or Redux.)
List of comments. This is similar to post content. We’d want adding a new comment in one tree to be reflected in the other tree too. So ideally we would use some kind of a cache for it, and it should not be a local state of our Post.
Which comments are expanded. It would be weird if expanding a comment in one tree would also expand it in another tree. In this case we’re interacting with a particular Comment UI representation rather than an abstract “comment entity”. Therefore, an “expanded” flag should be a local state of the Comment.
The value of new comment input. It would be odd if typing a comment in one input would also update an input in another tree. Unless inputs are clearly grouped together, usually people expect them to be independent. So the input value should be a local state of the NewComment component.

Express101

Mon, 18 Mar 2019 16:04:05 GMT

Template Helpers

Express/Response Properties: `res.locals`

This property is useful for exposing request-level information such as the request path name, authenticated user, user settings, and so on.

app.use(function(req, res, next){
  res.locals.user = req.user;
  res.locals.authenticated = ! req.user.anonymous;
  next();
});

將 helpers 放入 res.locals 中

就可以在 template 中（如 pug 中）使用 helpers

Sieve of Eratosthenes

Tue, 24 Jul 2018 22:47:51 GMT

Concept

// return an array contains primes which is < num
function sieveOfEratosthenes(num){
    ...
}

輸入一個數 num，找出所有小於 num 的質數(prime)

質數 Prime

質數 (prime number): 指在大於 1 的自然數中，除了 1 和該數自身外，無法被其他自然數整除的數。
合數 (composite number)：指在大於 1 的自然數中，因數除了 1 和其本身外具有另一因數的正整數。
0 和 1 既不是質數也不是合數。

Solution Code

先列出所有範圍內正整數， 0, 1 不為質數，先排除，從 2 開始找質數，同時把它們倍數都篩掉。

所以從 2 開始，篩掉所有 2N，再來是 3，篩掉所有 3N， 4 在 2N 時就已經被篩掉了，所以再來是 5，篩掉所有 5N，以此類推...

const sieveOfEratosthenes = num => {
    // 我們要用 Array 的 index 來代表數字，所以要先建立一個長度為 num+1 的 array
    // 並先全預設為 true
    const isPrimeList = new Array(num + 1).fill(true);
    // 0, 1 不是 prime，一開始就可以先排除
    isPrimeList.fill(false, 0, 2);

    // 從 2 開始檢查起一個個檢查
    for (let i = 2; i <= num; i++) {
        const val = isPrimeList[i];
        // 如果 i 是 prime ，則它所有的倍數都會是 composite
        if (val) {
            for (let j = 2; i * j <= num; j++) {
                isPrimeList[i * j] = false;
            }
        }
    }

    // 收集 value 為 true 的 index
    const primesList = [];
    isPrimeList.forEach((val, index) => {
        if (val) primesList.push(index);
    });

    return primesList;
};

console.log(sieveOfEratosthenes(100));
/*
[ 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43,
47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97 ]
*/

優化

其實要找出 num 之前的所有 prime，不需要一一對每一個數進行 篩掉其所有倍數 的動作，只需要檢查到 num 的平方根就可以了。

要解釋這個需要先從如何判斷一個數是否為質數開始

判斷某數 N 是否為質數

要判斷某數 N 是否為質數的方法為：

判斷 (1 ～ N 的平方根) 這個範圍中有無 N 的因數，有的話，N 便是合數

原理在於，

先假設 N 是合數，a × b = N，則 a, b 兩個數中必有一個大於或等於 √N，一個小於或等於 √N。因此，只要小於或等於 √N 的數中（1 除外）找不到可以整除 N 的數，也就是 N 的因數，則 N 一定是質數。

判斷質數合數的「開根號法」的數學原理？怎麼推導的？ @ 百度

`篩掉質數的所有倍數` 到 num 的平方根

要找 1~num 間的所以質數，從 2 開始進行 篩掉其所有倍數 的動作，一路篩到 num 的平方根就夠了

因為我們已經知道，假設一個正整數 N 是合數，則它必有至少一個小於或等於 √N 的質因數。

反過來說，我們如果找到小於或等於 √N 的所有質數，則 N 一定存在於這些質數的倍數中。

所以回到我們的函式 sieveOfEratosthenes(num) 中，一開始我們有一堆數字，範圍是 1～ num，只要我們找到（1 ～ num 的平方根）這個範圍中的所有質數，並且篩掉所有它們小於或等於 num 的倍數，就可以確保留下來的都是質數。

舉例來說，要找 1~~25 間的質數，只要先找到 1~~5 之間的質數，並且刪掉他們所有小於等於 25 的倍數，剩下的就是答案。

要找 1~~50 間的質數，找到 1~~7 間的質數，刪掉它們所有小於等於 50 的倍數。

Solution Code

總結而言：

要得到自然數 num 以內的全部質數，必須把不大於 num 平方根的所有質數的倍數剔除，剩下的就是質數

// 基本作法與上面相同，只有檢查範圍縮小成 2~ num 的平方根
const sieveOfEratosthenesFaster = num => {
    const isPrimeList = new Array(num + 1).fill(true);
    isPrimeList.fill(false, 0, 2);

    // 從 2 開始檢查到 num 的平方根
    for (let i = 2; i <= Math.sqrt(num); i++) {
        const val = isPrimeList[i];
        if (val) {
            for (let j = 2; i * j <= num; j++) {
                isPrimeList[i * j] = false;
            }
        }
    }

    const primesList = [];
    isPrimeList.forEach((val, index) => {
        if (val) primesList.push(index);
    });

    return primesList;
};

const num = 1000;
console.time('a');
console.log(sieveOfEratosthenes(num));
console.timeEnd('a');
console.time('b');
console.log(sieveOfEratosthenesFaster(num));
console.timeEnd('b');
/*
[ 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43,
47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97 ]
*/

Code from Stack Overflow

目前看到最簡潔的實現方式，效能也很好。

From https://stackoverflow.com/questions/11966520/how-to-find-prime-numbers-between-0-100/12287599#12287599

function getPrimes(max) {
    var sieve = [], i, j, primes = [];
    for (i = 2; i <= max; ++i) {
        if (!sieve[i]) {
            // i has not been marked -- it is prime
            primes.push(i);
            for (j = i << 1; j <= max; j += i) {
                sieve[j] = true;
            }
        }
    }
    return primes;
}

Resources

https://www.wikiwand.com/zh-tw/%E5%9F%83%E6%8B%89%E6%89%98%E6%96%AF%E7%89%B9%E5%B0%BC%E7%AD%9B%E6%B3%95

http://acm.nudt.edu.cn/~twcourse/PrimeNumberGeneration.html

Reverse Words 倒反單字中的英文字母順序

Tue, 24 Jul 2018 22:47:34 GMT

concept

// return a new string
function reverseWords (string) {
    ...
}

輸入句中的單字順序不變，但倒反每一個單字英文字母順序。

不可以使用 array.reverse()

example code

const reverseWords = str => {
    const _getReversedWord = word => {
        let reversedWord = ``;
        for (let i = word.length - 1; i >= 0; i--) {
            reversedWord += word[i];
        }
        return reversedWord;
    };

    const _getReversedWordList = wordListArr => {
        const reversedWordList = [];
        wordListArr.forEach(word => {
            const reversedWord = _getReversedWord(word);
            reversedWordList.push(reversedWord);
        });
        return reversedWordList;
    };

    const reversedWordList = _getReversedWordList(
        str.split(` `)
    );

    return reversedWordList.join(` `);
};

console.log('--------');
console.log(reverseWords(`this is a string of words`));
console.log(reverseWords(`Coding JavaScript`));
console.log('--------');

Code from `Learning Algorithms`

function reverseWords(string) {
  var wordsArr = string.split(' ');
  var reversedWordsArr = [];

  wordsArr.forEach(word => {
    var reversedWord = '';
    for (var i = word.length - 1; i >= 0; i--) {
      reversedWord += word[i];
    };
    reversedWordsArr.push(reversedWord);
  });

  return reversedWordsArr.join(' ');
}

reverseWords('Coding JavaScript');

References

https://www.wikiwand.com/zh-tw/%E5%87%B1%E6%92%92%E5%AF%86%E7%A2%BC

Reverse Array In Place 就地倒反陣列

Tue, 24 Jul 2018 22:47:08 GMT

Concept

// return the same arr, but it has to be reversed
function reverseArrayInPlace (arr) {
    ...
}

不建立新的 arr，直接將輸入的 arr 改變順序

不可以使用 array.reverse()

Solution Code

const reverseArrayInPlace = arr => {
    const length = arr.length;

    // 使用 ES6 的交換語法，
    // 將第一個數與倒數第一個數交換,
    // 第二個數與倒數第二個數交換...
    // 要注意這個迴圈的結束條件，
    // 因為是前後交換，所以我們只需要做到 arr 長度一半就好
    for (let i = 0; i < length / 2; i++) {
        [arr[i], arr[length - 1 - i]] = [arr[length - 1 - i], arr[i]];
    }
    return arr;
};

console.log('--------');
console.log(reverseArrayInPlace([3, 4, 5, 6]));
console.log('--------');

Code from `Learning Algorithms`

function reverseArrayInPlace(arr) {
  for (var i = 0; i < arr.length / 2; i++) {
    var tempVar = arr[i];
    arr[i] = arr[arr.length - 1 - i];
    arr[arr.length - 1 - i] = tempVar;
  }

  return arr;
}

reverseArrayInPlace([1, 2, 3, 4, 5, 6, 7, 8]);

References

https://www.udemy.com/learning-algorithms-in-javascript-from-scratch/

Mean Median Mode

Tue, 24 Jul 2018 22:46:42 GMT

Concept

// return an object, which contains the mean, median and mode of the arr
function meanMedianMode (arr) {
    ...
}

計算輸入 arr 的平均數, 中位數, 眾數

Solution Code

const meanMedianMode = arr => {
    return {
        mean: getMean(arr),
        median: getMedian(arr),
        mode: getMode(arr),
    };
};

// 平均數
const getMean = arr => {
    // 用 Array.prototype.reduce() 來進行加總 array 的加總
    const sum = arr.reduce(
        (preValue, curValue) => preValue + curValue
    );
    return sum / arr.length;
};

// 中位數
const getMedian = arr => {
    // 由小到大排序，要注意 Array.prototype.sort() 中的參數 compareFunction 的寫法
    // 如果不給 Array.prototype.sort() 參數 compareFunction 的話，會將 array 每一項轉 string 後，再依照 ASCII 排序
    arr.sort((a, b) => a - b);

    const length = arr.length;
    const halfLength = length / 2;
    const isOddLength = length % 2 === 1;

    if (isOddLength) {
        return arr[Math.floor(halfLength)];
    } else {
        // 長度為偶數時，中位數是最中間兩項的平均數
        const sumOfMiddleTwo =
            arr[halfLength - 1] + arr[halfLength];
        return sumOfMiddleTwo / 2;
    }
};

// 眾數，出現最多次的數
const getMode = arr => {
    const hashTable = {};
    arr.forEach(num => (hashTable[num] = 0));
    arr.forEach(num => hashTable[num]++);

    let maxFrequencyValue = 0;
    // 最後輸出的眾數為 array 形式，因為有可能有出現次數相當的數
    let mode = [];
    Object.keys(hashTable).forEach(key => {
        const frequencyValue = hashTable[key];
        if (frequencyValue > maxFrequencyValue) {
            mode = [key];
            maxFrequencyValue = frequencyValue;
        } else if (frequencyValue === maxFrequencyValue) {
            mode.push(key);
        }
    });

    // 如果每一項的出現次數都相同，則沒有眾數
    if (mode.length === arr.length) mode = null;

    return mode;
};

console.log('--------');
console.log(testArr);
console.log(meanMedianMode(testArr));
console.log('--------');

Code from `Learning Algorithms`

function meanMedianMode(array) {
  return {
    mean: getMean(array),
    median: getMedian(array),
    mode: getMode(array)
  }
}

function getMean(array) {
  var sum = 0;

  array.forEach(num => {
    sum += num;
  });

  var mean = sum / array.length;
  return mean;
}

function getMedian(array) {
  array.sort(function(a, b){return a-b});
  var median;

  if (array.length % 2 !== 0) {
    median = array[Math.floor(array.length / 2)];
  }
  else {
    var mid1 = array[(array.length / 2) - 1];
    var mid2 = array[array.length / 2];
    median = (mid1 + mid2) / 2;
  }

  return median;
}

function getMode(array) {
  var modeObj = {};

  // create modeObj
  array.forEach(num => {
    if (!modeObj[num]) modeObj[num] = 0;
    modeObj[num]++;
  });

  // create array of mode/s
  var maxFrequency = 0;
  var modes = [];
  for (var num in modeObj) {
    if (modeObj[num] > maxFrequency) {
      modes = [num];
      maxFrequency = modeObj[num];
    }
    else if (modeObj[num] === maxFrequency) modes.push(num);
  }
  // if every value appears same amount of times
  if (modes.length === Object.keys(modeObj).length) modes = [];
  return modes;
}


meanMedianMode([9,10,23,10,23,9]);

References

https://www.udemy.com/learning-algorithms-in-javascript-from-scratch/

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Max Stock Profit

Tue, 24 Jul 2018 22:45:56 GMT

Concept

// return max profit
function maxStockProfit (priceArr) {
    ...
}

輸入一個陣列，代表股票一天個時間點的價錢，求最高利潤，

利潤 < 0 的話，一律給 -1

Solution Code

const maxStockProfit = arr => {
    const length = arr.length;
    const profitList = [];
    for (let i = 0; i < length - 1; i++) {
        const buyingPrice = arr[i];
        let profit = -1;
        for (let j = i + 1; j < length; j++) {
            const sellPrice = arr[j];
            const possibleProfit = sellPrice - buyingPrice;
            if (possibleProfit > profit) {
                profit = possibleProfit;
            }
        }
        profitList.push(profit);
    }
    return profitList.sort((a, b) => a - b).reverse()[0];
};

Code from `Learning Algorithms`

function maxStockProfit (pricesArr) {
  var maxProfit = -1;
  var buyPrice = 0;
  var sellPrice = 0;

  var changeBuyPrice = true;

  for (var i = 0; i < pricesArr.length; i++) {
    if (changeBuyPrice) buyPrice = pricesArr[i];
    sellPrice = pricesArr[i + 1];

    if (sellPrice < buyPrice) {
      changeBuyPrice = true;
    }
    else {
      var tempProfit = sellPrice - buyPrice;
      if (tempProfit > maxProfit) maxProfit = tempProfit;
      changeBuyPrice = false;
    }
  }

  return maxProfit;
}

maxStockProfit([10, 18, 4, 5, 9, 6, 16, 12]);

is Palindrome

Tue, 24 Jul 2018 22:45:14 GMT

concept

// return true/false
function isPalindrone (string) {
    ...
}

判斷字串是否為 Palindrome， Palindrome 例子：

race car
Madam, I'm Adam

example code

const isPalindrome = string => {
    // 去除所有非英文字母
    const pureCharacters = (str => {
        const validCharacters = `abcdefghijklmnopqrstuvwxyz`.split(``);
        return str
            .toLowerCase()
            .split(``)
            .filter(char => validCharacters.includes(char));
    })(string);

    return (
        pureCharacters.join(``) ===
        pureCharacters.reverse().join(``)
    );
};

console.log('--------');
console.log(isPalindrome(`Madam, I'm Adam.`)); // true
console.log(isPalindrome(`race car`)); // true
console.log(isPalindrome(`I'm Adam.`)); // false
console.log('--------');

Harmless Ransom Note 計算特定字串出現次數

Tue, 24 Jul 2018 22:44:46 GMT

concept

// return true/false
function harmlessRansomNote (noteText, magazineText) {
    ...
}

判斷 magazineText 中是否有足夠單詞供 noteText 使用。

example code

  // 為了簡化問題，假設 text 都使用小寫的一般單字
const harmlessRansomNote = (noteText, magazineText) => {
  const noteArray = noteText.split(` `)
  const magazineArray = magazineText.split(` `)

  // hash table like this:
  // {
  //   apple: 1,
  //   cat : 2,
  //   ...
  //	}
  const magazineHashTable = magazineArray.reduce((acc, cur) => {
    acc[cur] = acc[cur] ? acc[cur] + 1 : 1
    return acc
  }, {})

  for (let i = 0; i < noteArray.length; i++) {
    const word = noteArray[i]
    if (magazineHashTable[word]) magazineHashTable[word]--
    else return false
  }
  return true
}

console.log("--------")
console.log(
  harmlessRansomNote(`this is for`, `this is a testing article for testing`)
)
console.log("--------")

Time Complexity

O(n)+O(m) => O(n+m) =>O(n)

有兩個 Linear 迴圈，但是彼此沒有嵌套關係。

實務上，我們最終會把這種函數的時間複雜度寫成 O(n)

Fizz Buzz

Tue, 24 Jul 2018 22:43:21 GMT

concept

給定一個數字 num，輸出 1~ num，但是遇到 3 的倍數時輸出 Fizz，遇到 5 的倍數時輸出 Buzz，遇到紀事 3 又是 5 的倍數時輸出 FizzBuzz

modulus operator

console.log('------------------------------------');
console.log(7 % 3);
console.log(100 % 30);
console.log('------------------------------------');

example code

const fizzbuzz = num => {
    for (let i = 1; i <= num; i++) {
        const is3n = i % 3 === 0;
        const is5n = i % 5 === 0;
        if (is3n && is5n) console.log(`FizzBuzz`);
        else if (is3n) console.log(`Fizz`);
        else if (is5n) console.log(`Buzz`);
        else console.log(i);
    }
};

fizzbuzz(20);

Fibonacci

Tue, 24 Jul 2018 22:42:23 GMT

Concept

// return the num at the position of Fibonacci Sequence
function fibonacci (position) {
    ...
}

Fibonacci Sequence: 1, 1, 2, 3, 5, 8, 13 ...

輸入一個位置， return 對應 Fibonacci Sequence 該位置的數字

Solution Code

const fibonacci = index => {
    if (index < 0) {
        return null;
    } else if (index < 2) {
        return 1;
    } else {
        return fibonacci(index - 1) + fibonacci(index - 2);
    }
};

Code from `Learning Algorithms`

// 課程中把 Fibonacci Sequence 第一位的 position 當作 1
function fibonacci(position) {
  if (position < 3) return 1;
  else return fibonacci(position - 1) + fibonacci(position - 2);
}

fibonacci(6);

Fibonacci with Memorization

單純的 Fibonacci 函數屬於 O(n^2)

O(n^2) 的特性是當數入的數字越大時，運算時間會爆炸性增長...

fibonacci(10) ，需要執行 109 次該函式
fibonacci(20) ，需要執行 13259 次該函式
fibonacci(30) ，需要執行 1664079 次該函式

所以我們前面的函式還有很大的改善空間。

Memoization, cache

我們可以使用類似 cache 的做法，每次要運算 fibonacci(num) 時：

先檢驗 fibonacci(num) 在 cache 中是否已經有結果
如果有，則為該次 fibonacci(num) 之解
如果沒有，另行計算本次 fibonacci(num) 的解，而且算出來後要放到 cache 中

// 原始的 fibonacci
const fibonacci = index => {
    if (index < 0) {
        return null;
    } else if (index < 2) {
        return 1;
    } else {
        return fibonacci(index - 1) + fibonacci(index - 2);
    }
};

const fibMemo = index => {
    const _cache = [];
    const _fib = index => {
        if (_cache[index]) {
            return _cache[index];
        } else if (index < 2) {
            _cache[0] = _cache[1] = 1;
        } else {
            _cache[index] =
                _fib(index - 1) + _fib(index - 2);
        }
        return _cache[index];
    };

    return _fib(index);
};

function fibMemo2(index, cache) {
    cache = cache || [];
    if (cache[index]) return cache[index];
    else {
        if (index < 3) return 1;
        else {
            cache[index] =
                fibMemo(index - 1, cache) +
                fibMemo(index - 2, cache);
        }
    }
    return cache[index];
}

console.log('--------');
console.time('fibonacci');
console.log(fibonacci(20));
console.timeEnd('fibonacci');
console.time('fibMemo');
console.log(fibMemo(20));
console.timeEnd('fibMemo');
console.time('fibMemo2');
console.log(fibMemo2(20));
console.timeEnd('fibMemo2');
console.log('--------');

output:

Fibonacci with Memorization 這種函式的演算法是屬於 O(n)，運算的時間會只會以線性成長，效率方面的表現優秀

References

https://www.udemy.com/learning-algorithms-in-javascript-from-scratch/

https://pjchender.blogspot.com/2017/09/fibonacci-cache-memoization.html

Caesar Cipher 凱撒密碼

Tue, 24 Jul 2018 22:40:55 GMT

Concept

// return a new string
function caesarCipher (string, num) {
    ...
}

給一字串與偏移量，會返回經過偏移的新字串。（string 有大小寫， num 有正負數）

Caesar Cipher example

Bee, 3 => Ehh

B 向後三位變 E e 向後三位變 h 以此類推...

圖片來源：https://www.wikiwand.com/zh-tw/%E5%87%B1%E6%92%92%E5%AF%86%E7%A2%BC

Example Code

const caesarCipher = (str, num) => {
    // % 的計算不管正負，最後
    // 結果的正負號會與被除數一樣
    num = num % 26;
    const alphabet = [...`abcdefghijklmnopqrstuvwxyz`];

    const _getNewIndex = (currentIndex, shiftNum) => {
        const newIndex = (currentIndex + shiftNum) % 26;
        return newIndex < 0 ? newIndex + 26 : newIndex;
    };

    const _getLetterInCipher = (letter, i) => {
        const currentLetterIndex = alphabet.indexOf(letter);
        if (currentLetterIndex < 0) {
            // 如果找不到， indexOf 的結果會是 -1，代表該字非英文字母
            return letter;
        } else {
            const newIndex = _getNewIndex(
                currentLetterIndex,
                num
            );
            const newLetter = alphabet[newIndex];
            // 判斷該字母在原始 str 中是否為大寫
            const isUpperCase =
                str[i] === letter.toUpperCase();
            return isUpperCase
                ? newLetter.toUpperCase()
                : newLetter;
        }
    };

    // 將 str 一個個字母經過位移後，再組合成新 string
    let newStr = ``;
    str.toLowerCase()
        .split(``)
        .forEach(
            (letter, i) =>
                (newStr += _getLetterInCipher(letter, i))
        );

    return newStr;
};

console.log(caesarCipher('A*-*BcDe', 25));
console.log(caesarCipher('apple', 2));
console.log(caesarCipher('Bee!!', -28));

最需要注意的就是大小寫判斷的地方，因為我們的 alphabet 陣列為了方便，只有列出小寫的字母。

Code from `Learning Algorithms`

function caesarCipher(str,num) {
  num = num % 26;
  var lowerCaseString = str.toLowerCase();
  var alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
  var newString = '';

  for (var i = 0; i < lowerCaseString.length; i++) {
    var currentLetter = lowerCaseString[i];
    if (currentLetter === ' ') {
      newString += currentLetter;
      continue;
    }
    var currentIndex = alphabet.indexOf(currentLetter);
    var newIndex = currentIndex + num;
    if (newIndex > 25) newIndex = newIndex - 26;
    if (newIndex < 0) newIndex = 26 + newIndex;
    if (str[i] === str[i].toUpperCase()) {
      newString += alphabet[newIndex].toUpperCase();
    }
    else newString += alphabet[newIndex];
  };

  return newString;
}
caesarCipher('Zoo Keeper', 2);

References

https://www.wikiwand.com/zh-tw/%E5%87%B1%E6%92%92%E5%AF%86%E7%A2%BC

Binary Search

Tue, 24 Jul 2018 22:38:54 GMT

Concept

// return true of false to show that the sortedNumArr contains key
function binarySearch (sortedNumArr, key) {
    ...
}

輸入一個排序好的陣列，找出裡面是否還有 key

Solution Code

const binarySearch = (sortedArr, num) => {
    const length = sortedArr.length;
    const middleIndex = Math.floor(length / 2);
    const middleOne = sortedArr[middleIndex];
    if (middleOne === num) {
        return true;
    } else if (length === 1) {
        return false;
    } else {
        if (middleOne > num) {
            return binarySearch(
                sortedArr.splice(0, middleIndex),
                num
            );
        } else {
            return binarySearch(
                sortedArr.splice(
                    middleIndex,
                    length - middleIndex
                ),
                num
            );
        }
    }
};

console.log('--------');
console.log(
    binarySearch([5, 7, 12, 16, 36, 39, 42, 56, 71], 3)
);
console.log('--------');

Code from `Learning Algorithms`

function binarySearch(numArray, key) {
    var middleIdx = Math.floor(numArray.length / 2);
    var middleElem = numArray[middleIdx];

    if (middleElem === key) return true;
    else if (middleElem < key && numArray.length > 1) {
        return binarySearch(numArray.splice(middleIdx, numArray.length), key);
    }
    else if (middleElem > key && numArray.length > 1) {
        return binarySearch(numArray.splice(0, middleIdx), key);
    }
    else return false;
}

binarySearch([5, 7, 12, 16, 36, 39, 42, 56, 71], 56);

References

https://www.udemy.com/learning-algorithms-in-javascript-from-scratch/

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Big O Notation, Time Complexity 衡量程式碼效率

Tue, 24 Jul 2018 22:20:00 GMT

同樣的需求，
可能可以寫出很多種不同的 function 來解決，
那我們如何判斷哪一種解法比較好呢？

Big O, Time Complexity 便是用來衡量 function 運行效率的兩種指標，我們通常根據 輸入函式的資料量增加時，執行時間會拉長多少？ 來作為衡量效率的標準

Big O Notation 代表演算法時間函式的上限（Upper bound），表示在最壞的狀況下，演算法的執行時間不會超過 Big-Ο。

Big O 種類

Constant Run Time, `O(1)`

這個演算法（函式）的執行時間不會隨著輸入資料量的增加而增加。

let arr1 = [1,2,3,4,5]
let arr2 = [1,2,3,4,5,6,7,8,9,10]

/**
 * Constant Run Time：不會隨著輸入的資料量越大而使得執行時間變長
 * Big O Notation: "O(1)"
 **/
function log (arr) {
  console.log(arr[0])
  console.log(arr[1])
}
log(arr1)    // 1, 2
log(arr2)    // 1, 2

Linear Run Time, `O(n)`

輸入資料越多，執行時間會等比例增加

let arr1 = [1,2,3,4,5]
let arr2 = [1,2,3,4,5,6,7,8,9,10]

/**
 * Linear Run Time: 隨著資料量的增加，執行時間會等比增加
 * Big O Notation: "O(n)"
 **/
function logAll(arr) {
  for (let item of arr) {
    console.log(item)
  }
}

logAll(arr1)  // 1, 2, 3, 4, 5
logAll(arr2)  // 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

Exponential Run Time, `O(n^2)`

隨著輸入資料的增加，執行時間呈現指數增長。

let arr1 = [1,2,3,4,5]
let arr2 = [1,2,3,4,5,6,7,8,9,10]

/**
 * Exponential Run Time:  隨著資料量的增加，執行時間會誇張的增長
 * Big O Notation: "O(n^2)"
 **/
function addAndLog (arr) {
  for (let item of arr) {
    for (let item2 of arr) {
      console.log ('First', item + item2)
    }
  }
}
addAndLog(arr1)  // 輸出 25 筆結果
addAndLog(arr2)  // 輸出 100 筆結果

Logarithmic Run Time, `O(log n)`

隨著資料量增加，執行時間雖然會增加，但增加率是越來越低的。

let arr1 = [1,2,3,4,5]
let arr2 = [1,2,3,4,5,6,7,8,9,10]

/**
 * Logarithmic Run Time: 隨著資料量增加，執行時間雖然會增加，但增加率會趨緩
 * Big O Notation: "O (log n)"
 **/
function binarySearch (arr, key) {
  let low = 0
  let high = arr.length - 1
  let mid
  let element

  while (low <= high) {
    mid = Math.floor((low + high) / 2, 10)
    element = arr[mid]
    if (element < key) {
      low = mid + 1
    } else if (element > key) {
      high = mid - 1
    } else {
      return mid
    }
  }
  return -1
}

console.log(binarySearch(arr1, 3))
console.log(binarySearch(arr2, 3))

JavaScript 中的 NaN, isNaN

Thu, 05 Jul 2018 01:02:00 GMT

雖然 NaN 本身名字為非數字, 但是利用 typeof 來判斷 NaN 的時候, 卻會返回 number.

產生 NaN 的時機

1. 計算失敗時

錯誤計算

對於未定義的運算 (Infinity 相關) 或錯誤數學公式計算時 (對負數進行開偶次方; 對負數進行對數運算; 對小於 - 1 或大於 + 1 的數進行反正弦或反餘弦運算), 得到的計算結果為 NaN

document.write(Math.sqrt(-1));      // 結果為 NaN
document.write(0/0);                // 結果為 NaN
document.write(5/0);                // 結果為 Infinity
document.write(Infinity/Infinity)   // 結果為 NaN
document.write(0/Infinity);         // 結果為 0
document.write(0*Infinity);         // 結果為 NaN

加法以外的四則運算

帶有減號 (-) 乘號 (*) 或除號 (/) 運算符時, JavaScript 引擎會先嘗試將待計算單項轉換成 Number 類型 (使用 Number(x) 做轉換), 如果轉換失敗, 整個計算結果即為 NaN

10 - '5a'           // NaN
'5a' * 5            // NaN
'10' / '5a';        // NaN

undefined - 5;      // NaN  Number(undefined) == NaN
'' * 5              // 0    Number('') == 0
true * 5            // 5    Number(true) == 1
[] * 5              // 0    Number([]) == 0
null - 5;           // -5   Number(null) == 0

加法四則運算

如果加號 (+) 兩端單項有任意一個是字符串 js 會進行拼接操作, 只有加號 (+) 兩端單項都是數字 Number 類型的時, 才會進行相加計算

document.write(1 + 2 + '3'         + "<br/>");    // 計算結果為 33
document.write(1 + '2' + 3         + "<br/>");    // 計算結果為 123
document.write(1 + undefined + 3   + "<br/>");    // 計算結果為 NaN
document.write(1 + '' + 3          + "<br/>");    // 計算結果為 13

2. 解析數字失敗

任何一個字符串當不能被 parseInt, parseFloat 或 Number 成功轉換時, 就返回 NaN, 表示該字符串無法被識別為 Number 類型, 這是一個異常狀態, 並不是一個確切的值 :

被轉換值中不含任何數字

使用 parseInt, parseFloat 或 Number 進行轉換時, 直接返回 NaN

parseInt('bluetata')     // NaN
parseFloat('bluetata')   // NaN
Number('bluetata')       // NaN

被轉換值中含任何數字時

parseInt 和 parseFloat 會將被轉換值中第一個無效字符之前的數字字符串進行轉換;

Number 會將被轉換值當做一個整體來轉換, 這樣對於 Number() 來說, 即使被轉換值中包含數字, 也不會將數字轉換出來

parseInt('123abc')         // 轉換結果 123
parseInt('123abc45')       // 轉換結果 123
parseInt('abc123def')      // 轉換結果 NaN
parseFloat('123.45abc')    // 轉換結果 123.45
parseFloat('123abc')       // 轉換結果 123
Number('123abc')           // 轉換結果 NaN

3. 與 NaN 有關的計算

任何涉及與 NaN 的計算, 返回結果為 NaN

document.write("NaN === NaN     :" + (NaN === NaN)   + "<br/>");             // false

document.write("isNaN(NaN + 10) :" + isNaN(NaN + 10) + "<br/>");             // true
document.write("isNaN(NaN - 10) :" + isNaN(NaN - 10) + "<br/>");             // true
document.write("isNaN(NaN * 10) :" + isNaN(NaN * 10) + "<br/>");             // true
document.write("isNaN(0/NaN)    :" + isNaN(0/NaN)    + "<br/>");             // true
document.write("isNaN(NaN/1)    :" + isNaN(NaN/1)    + "<br/>");             // true

isNaN

為什麼要用 `isNaN` 函式

因為 NaN 不與任何值相等

NaN 不能通過相等操作符（== 和 ===）來判斷, 因為 NaN 不與任何值相等, 即使是 NaN 自己本身

isNaN 可以視為：

isNaN = function(value) {
    Number.isNaN(Number(value));
}

如果 isNaN 函數的參數不是 Number 類型, isNaN 函數會首先嘗試將這個參數轉換為數值, 然後才會對轉換後的結果是否是 NaN 進行判斷. 因此, 對於能被強制轉換為有效的非 NaN 數值來說（空字符串和布爾值分別會被強制轉換為數值 0 和 1）, 會返回 false 值

一些 NaN 判斷結果

isNaN(NaN);                 // true
isNaN(undefined);           // true
isNaN({});                  // true

isNaN(Infinity)             // false
isNaN(5/0)                  // false  5/0 返回 Infinity 認為是無限大數字
isNaN(0/0)                  // true   為 NaN 。零除以零的會是 NaN——不過把其他數字除以零則不是 NaN
isNaN("0/0")                // true   為 NaN
isNaN(Infinity/Infinity);   // true

isNaN(true);                // false: true 被轉換成 1 同樣如果是'false'會被轉換成 0
isNaN(null);                // false  null 被轉換成 0
isNaN(37);                  // false

// strings
isNaN("37");                // false: 可以被轉換成數值 37
isNaN("37.37");             // false: 可以被轉換成數值 37.37
isNaN("");                  // false: 空字符串被轉換成 0
isNaN(" ");                 // false: 包含空格的字符串被轉換成 0
isNaN("bluetata")           // true: "blabla" 不能轉換成數值

// dates
isNaN(new Date());                // false 時間會被轉換成毫秒 + 1
isNaN(new Date().toString());     // true

資料參考

https://blog.csdn.net/dietime1943/article/details/79867562

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/isNaN

JavaScript Design Pattern: Singleton

Tue, 26 Jun 2018 00:43:00 GMT

簡述 Singleton 單例

一個 class 只能有一個 instance，就算多次 new 該 class，也只會 return 第一次 new 出來的 instance

from "Learning JavaScript Design Patterns"

Classically, the Singleton pattern can be implemented by creating a class with a method that creates a new instance of the class if one doesn't exist. In the event of an instance already existing, it simply returns a reference to that object.

ES6 實踐方式

一般 class

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

let man1 = new Person('Mike', 20);
let man2 = new Person('Newt', 99);

singleton class

class SingletonPerson{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }

  static getInstance(name, age){
    if(this.onlyIntance){
      this.onlyIntance = new SingletonPerson(name, age);
    }
    return this.onlyInstance;
  }
}

let man1 = SingletonPerson.getInstance('Bob', 99);
let man2 = SingletonPerson.getIntance('Peter', 77);
console.log(man1 === man2); // true

References

https://zhuanlan.zhihu.com/p/34754447

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

用 Gulp 架設靜態網頁開發環境

Tue, 21 Mar 2017 10:35:00 GMT

滿足平時快速開發所需，用 Gulp 滿足 SCSS 編譯、檔案壓縮與 LiveReload 需求。

簡單的 Gulp 配置，可快速架設開發靜態網頁所需的環境。詳情請查看 StaticPagesDevSet

本環境可以幫你做的事

本環境滿足之需求為以下 3 項：

SCSS / Sass 的編譯與完善
檔案（CSS、JavaScript、HTML與圖片檔）的壓縮
瀏覽器 LiveReload 即時呈現

專案結構

StaticPagesDevSet
    |
    └── src // 原始檔資料夾，在這裡編寫網頁
    |   └── img
    |   └── js
    |   └── scss
    |   └── index.html 
    |
    └── dist // 由 gulp 自動產生的發佈檔
    |   └── css
    |   └── img
    |   └── js  
    |
    └── node_modules
    |
    └── gulpfile.js
    |
    └── index.html
    |
    └── package.json
    |
    └── README.md

各個 gulp.task 說明

詳細配置請查看 gulpfile.js

processSCSS

gulp processSCSS

編譯 src/scss 裡的 .scss 檔案成 .css，同時加上前綴與最小化。

最後存入 dist/css 。

processJS

gulp processJS

利用 jshint 檢查 src/js 裡的 .js 檔案，然後進行醜化。

最後存入 dist/js 。

proceeIMG

gulp processIMG

壓縮 src/img 裡的圖片檔。

最後存入 dist/img 。

processHTML

gulp processHTML

壓縮 src/index.html。

最後存入根目錄。

cleanDist

gulp cleanDist

刪除舊的 dist 資料夾，並免不必要的錯誤。

watch 監視任務

gulp watch

開啟 web server 後，監視 src 裡的原始檔，一有變化就執行處理程序並 reload 頁面。

預設任務

gulp

執行任務如下:

cleanDist

-> (異步執行 processSCSS、processJS、processIMG、processHTML)

-> watch

使用

安裝 Node.js，請參閱 Node.js Downloads
安裝 Gulp，請參閱 Gulp
複製下載本 Repo

Clone git@github.com:sss63232/StaticPagesDevSet.git

安裝 npm 套件

npm install

執行 gulp 任務

gulp

按照順序執行 gulp task

Wed, 27 Jul 2016 15:44:17 GMT

最近在嘗試配置自己的Gulp流程，方便日後有需要的時候可以直接拿出來使用。但卻發現寫好的 gulp.task竟然沒有按照希望的順序執行，後來發現是因為我忽略了 Node.js有非同步執行的特性。也就是說假設我今天按順序寫好了task1和task2，但真正執行程式的時候 task1執行過久，task2並不會等它結束才開始自己的工作，而會逕自執行。這樣會造成有相依性的任務出錯，也就是我一定要 task1先跑完才能跑 task2。

同步（sync）與非同步（async）

我搞混了這兩個概念好一陣子...因為同步字面上會讓你以為是同步進行的意思，然後事實卻不是這樣。同步與他的字面意義正好相反，反而是代表一步一步來，按照順序進行的意思。反之，非同步就是不強制按照順序執行。

我在這裡只是簡單講一下概念而已，想知道更多請看：同步與非同步的差異怎樣理解阻塞非阻塞與同步異步的區別？

gulp.task 執行順序

重新講一下我遇到的問題：我要按順序執行兩個任務，分別是 task1和 task2。但是因為 task1的執行速度過慢，所以在非同步執行的狀況之下會出現錯誤。

原本的程式碼示意

gulp.task('task1', function() {
    gulp.src('./source/*.js')
     .pipe(do _sth())
     .pipe(gulp.dest('./build'));
});

gulp.task('task2', ['task1'], function() {
    gulp.src('build')
     .pipe(do_sth_differently())
     .pipe(gulp.dest('./dist'));
});

gulp.task('default',['task2']);

大意是：task1處理過後的 js檔要放到 build之下，然後 task2再將這些 js檔經過二次處裡後放到 dist下。

問題根源：非同步執行

在上面程式碼中，task2執行前會先執行 task1，但是在非同步執行的狀況之下，不等 task1完成，task2就會逕自開始運作，導致錯誤發生。所以我們的問題點就在於要如何讓 task1結束時才通知 task2開始動作。

如何讓 Gulp同步執行

官方文件中提到的幾種作法：

return
callback
promise

在本篇中，我用的是最間單易懂好操作的第一種方法。

修改後的程式碼示意

// with return
    gulp.task('task1', function() {
    // ↓↓↓↓↓↓↓ add this return
        return gulp.src('source/*.js')
         .pipe(do_sth())
         .pipe(gulp.dest('build'));
    });

    gulp.task('task2', ['task1'], function() {
    // ↓↓↓↓↓↓↓ add this return
        return gulp.src('build/*.js')
         .pipe(do_sth_differently())
         .pipe(gulp.dest('dist'));
    });

結果

如此一來，gulp 便會按照順序，先執行完 task1後，再執行 task2。

參考與學習資料

Gulp.js task, return on src? Running tasks in series, i.e. Task Dependency

GitHub中 Watch、Star和 Fork的使用差異

Sun, 24 Jul 2016 11:33:01 GMT

GitHub Repo頁面右上角有3個我們可以使用的操作，分別是 Watch、Star和Fork。不過，他們的使用時機與差異在哪裡呢？說實在的，我剛開使用Github的時候有好一陣子也不是很清楚，看了不少文章之後才有比較了解他們的差別。

Watch

有三種狀態，預設為 Not watching。

Watching：表示願意收到該 Repo的所有消息，以後只要有 issue或 pull request之類的事件發生，你都會收到通知。此外如果你有在 GitHub設置電子信箱的話，也會同時收到電子郵件通知喔，所以如果動不動就 Watching別人的專案的話，很容易被給滿滿的訊息給淹沒啊...
Not watching：只有在被加入成該 Repo的參與者或是被別人用 @your_id呼叫的時候才有收到通知。
Ignoring：完全不會收到任何通知。

總結一下，3種狀態的通知機率（吵你的機率）就是：
Watching >>> Not watching > Ignoring

Star

簡單來說就是按讚啦！可以是一種對作者的支持，也可以方便自己以後在 GitHub中的 your stars列表中找到自己有興趣的專案。

Fork

拷貝一份 Repo副本到自己的帳號之下，可以對它有完整的權限，簡單來說就是可以複製別人的程式碼回自己家隨便玩。很多人（包括我自己）誤把它當作收藏在使用，結果導致自己的 Repo數量爆棚...其實要收集有感趣的專案，應該用 Star就好了。因為 Fork是複製當下的程式碼狀態，所以如果該專案日後有更新，那我們複製回家的那一份過時程式碼基本上就是廢了，要另外取得更新，那我們一開始就等真的有需要的時候再來 Fork最新版的專案回去就好了啊～

Fork 另外一個主要用途是當你想要對該專案有貢獻的時候，可以 Fork一份回家，修修改改之後提交 pull request。

參考與資料來源

如何正確接收 GitHub的消息郵件如何用好 GitHub中的watch star fork

npm 缺陷，路徑太長的解決方法

Tue, 24 May 2016 15:26:14 GMT

似乎是因為套件相依性的關係，當我在使用npm下載套件或是要刪除套件時，接連發生過好幾次"資料夾名稱太長"導致windows無法新增刪除的狀況...

經過google一些資料後，確認這是npm在Windows平台上的天生缺陷，因為 Windows 作業系統有路徑檔名的限制（完整的檔名必須少於 260 個字元，並且目錄名稱必須少於 248 個字元）。

兩個問題

我目前遇到它會造成的問題就是：

套件抓不下來
套件資料夾（node_modules）刪不掉

以下依序介紹兩種問題的解決方法。

套件抓不下來—解法

這是從大神保哥網站上看到的解決方法，但是不一定有效！我們要做的就是變更 Node.js / npm 全域模組的預設安裝路徑。

預設安裝路徑

由於在 Windows 平台預設的 npm 全域模組安裝路徑為 %APPDATA%\npm，當使用者帳號比較長一點，例如常用的Administrator時，npm的安裝路徑就會是 C:\Users\Administrator\AppData\Roaming\npm，超過Windows限制字元數的機率就是很大。

縮短路徑

改變 Node.js / npm 全域模組的預設安裝路徑(例如 C:\Users\Administrtor\AppData\Roaming\npm），把路徑縮短，那麼成功率就會提高，但還是有可能會失敗，就是當套件本身的資料夾層級就已經超過Windows限制時，那我們就也真的沒有法子了...

新創npm資料夾為預設路徑

先準備好一個資料夾 ( C:\npm )

mkdir c:\npm

修改npm的設定檔

npm config set prefix "C:\npm" -g

這樣一來預設安裝路徑就會變成C:\npm，是不是短了很多呢！

修改PATH環境變數

將原本的 npm 安裝路徑變更到新指定的目錄下，因為你安裝的全域模組預設會在 prefix 目錄下建立一個相對應的 .cmd 批次檔，方便你在命令提示字元下執行 node.js 工具程式，所以得要跟著一起修改它的設定。

node_modules刪不掉—解法

要刪除層級太深的資料夾比較簡單，我們要借助linux中的刪除指令，將它們全數刪除。

方法一：使用rm指令

進入專案資料夾。

cd work_directory

刪除資料夾

rm -rf node_modules

到此就清除乾淨囉！

rm指令簡介

指令名稱：rm 功能說明：刪除檔案或目錄語法：rm [options] file

[options] -d：直接刪除一個目錄，既使目錄不是空的，super user 才可以用。 -f：--force 就是強制刪除檔案或目錄。 -i：執行前提供使用者確認。 -r, -R：--recursive遞迴處理，將指定的目錄下所有的檔案與子目錄一併處理。

範例： 1.刪除目錄node_modules中所有的檔案和子目錄

rm -rf node_modules

注意

使用這個指令時一定要再三確認要刪除的資料夾是不是對的，有沒有進錯路徑，有沒有打錯字。不然刪錯資料就死定囉～

方法二：使用7-zip

偶然在網路上發現有人分享的小方法，可以借助7-zip來刪除過長路經的資料夾。開啟7-zip之後，對要刪除的資料夾用 shift + 點擊上面的刪除即可。有在使用7-zip的人嘗試看看，我是覺得還滿方便的啦！

參考與資料來源

rm 刪除檔案或目錄

如何在 Windows 平台變更 Node.js / npm 全域模組的預設安裝路徑

meta tag 簡單介紹

Tue, 24 May 2016 15:25:19 GMT

meta tag 是html中用來描述額外資訊的tag，它可以告訴瀏覽器很多關於我們這個網頁的相關訊息，幫助瀏覽器正確且順利的解讀我們辛苦寫出來的網頁。

擺放位置

一般放在<head> </head> 之間。

快速範例

<meta name="author" content="作者名稱">
<meta name="copyright" content="版權所有人名稱">

<link rel="author" href="google plus 個人頁網址/posts">
<link rel="publisher" href="google plus 個人頁網址">
<meta name="description" content="網頁描述">

<meta itemprop="name" content="網站名稱或標題">
<meta itemprop="image" content="要顯示的縮圖網址">
<meta itemprop="description" content="網頁描述">

<meta property="og:title" content="網站名稱或標題" >
<meta property="og:url" content="網址">
<meta property="og:image" content="要顯示的縮圖網址">
<meta property="og:description" content="網頁描述" >

參考與學習資源

SEO 老兵不死的 META TAG 美學
 結構化資料 SEO 與 meta 標籤

favicon初探

Sun, 22 May 2016 16:36:44 GMT

最近開始研究客製化自己用hexo架設在github上的blog，要打造具備個人魅力的網站，第一步我想從favicon開始著手！不過我的美術天份實在不算好，目前也沒有熟識的設計師之類的可以幫我的忙，所以最重要的"圖檔"的話...就只好先自行創作一番囉...但是其他細節也得要好好研究才可以，以下就是我紀錄一下目前查到的關於favicon的資料。

favicon簡介

有時被稱為網頁小圖標或網站縮圖，是識別網站的一個重要元素，好的favicon不僅可以提昇網站質感，也可以藉此增加網站使用者的好感。

favicon.ico

雖然瀏覽器開始支援使用.png的favicon，但一般用法還是會使用.ico的專屬格式，.ico格式有以下特點：

一張圖片包含多個版本和格式。
基本建議包含16x16、32x32、48x48等版本。

favicon.png的崛起

隨著html5的盛行，再加上螢幕的解析度越來越高，同時間還有行動裝置的瞬間籠罩，在現代網路環境的改變之下，.ico的使用逐漸受到限制，多種格式的.png圖標逐漸作為favicon的更好選擇。

輔助工具

網頁favicon、APP、windows metro...等，現在零零總總不同裝置設備各自需要不同尺寸的圖檔才能有最佳的效果呈現，我們如果要一個個去客製化的話，肯定會耗費大量的間...

所以這個時候就需要使用工具來幫助我們產生各種不同size的圖檔，或許不夠精緻，但我想對比於自己一個一個親手做，使用工具的效益會大一點吧。

工具推薦：RealFaviconGenerator

參考與學習資源

教你製作完美的Favicon圖標(附神器)

CSS 版面設定基礎

Mon, 08 Jun 2015 14:44:55 GMT

主要包含 box-sizing與 position，
CSS排版就是魔鬼藏在細節裡，
一個小地方沒有弄好就可以讓你瞬間跑版...

box-sizing:border-box

content	padding	border	margin
V	V	V
有 V表示為 width範圍

box-sizing:content-box => (預設)

content	padding	border	margin
V
有 V表示為 width範圍

設定元件消失差異

屬性	空間保留
display:none	不會保留空間
visibility : hidden	會保留空間

position 差異

position : relative: 人家以它為準原本位子仍佔著可以使用 top, left…
position: absolute 以上一層的 relative為準原本位子不存在跳出文件流
position: absolute 以視窗進行定位，不佔原本位子

參考及學習資源

學習CSS版面配置

gulp 入門

Sun, 10 May 2015 22:05:36 GMT

gulp是一個自動化工具，可以用來輔助開發流程，功用據說與grunt大同小異，但比較好理解，不過我之前也沒有用過grunt，所以無從比較起...但是以目前的討論熱度而言，gulp明顯熱門得多。這裡主要紀錄一下粗略的gulp安裝與使用方式。

初步設置：

安裝node.js
全域環境安裝gulp
```
npm install -g gulp
```

使用上操作指令:

移至專案目錄下初始化專案，同時生成 package.json(整理gulp plugin)
```
npm init
```
當前項目安裝gulp
```
npm install gulp --save-dev
```
（為什麼要有--save-dev呢？當我們寫--save-dev，會將這個模組添加到package.json的devDependencies裡頭，如果是寫--save，就會添加到dependencies裡，這兩個的差異在於讓使用具備這個package.json專案的人，可以清楚的知道這個模組，是開發使用，還是執行專案時使用的。）

下載所需外掛

npm install gulp gulp-util gulp-jade gulp-coffee gulp-watch...

簡寫：
npm i -D gulp-watch

生成gulpfile.js並撰寫 gulpfile.js
操作gulpfile.js

gulpfile.js 指令起手式

gulp.task 定義工作內容
gulp.watch 關注指定檔案是否異動
gulp.src 指定檔案來源
gulp.dest 指定檔案存放位置

啟動gulp

進入專案資料夾，開啟cmd，輸入gulp即可。

參考及學習資源

CP 值很高的 Gulp
設定 Bootstrap/SASS/Bower/gulp (Windows平台)
gulp入門指南
 Gulp 學習 1 - 安裝與執行
 livereload使用範例

Hello World

Fri, 01 May 2015 22:12:03 GMT

This is my first post on my new fake blog! How exciting!

I'm sure I'll write a lot more interesting things in the future.

Oh, and here's a great quote from this Wikipedia on salted duck eggs.

A salted duck egg is a Chinese preserved food product made by soaking duck eggs in brine, or packing each egg in damp, salted charcoal. In Asian supermarkets, these eggs are sometimes sold covered in a thick layer of salted charcoal paste. The eggs may also be sold with the salted paste removed, wrapped in plastic, and vacuum packed. From the salt curing process, the salted duck eggs have a briny aroma, a gelatin-like egg white and a firm-textured, round yolk that is bright orange-red in color.

使用github SSH key省去Deploy時需要輸入帳密

Sun, 26 Apr 2015 13:30:09 GMT

利用SSH key進行deploy，除了安全性的優點之外，我自己覺得最方便的地方在於我要上傳東西到github的時候可以不用再手動輸入帳號密碼，雖然這不過是1分鐘就可以完成的事情，但可以讓事情更自動化，我們又何樂而不為呢！

設置ssh key

先看是否有已經存在的ssh key

輸入以下指令：

ls -al ~/.ssh

一般狀況下，如果沒有在該台電腦上使用過相關服務或程式的話，是不會有ssh key的。

產生ssh key

輸入指令：

ssh-keygen -t rsa -C "youremail@xxx.com"

這會產生一個用youremail@xxx.com作為標籤的ssh key，為了方便，輸完指令後所跳出的幾個選項，我們都直接enter到底，設為空值。

ssh Agent

輸入:

ssh-agent -s

只可以出現一行 Agent pid XXXX 這樣的字樣，若不行則輸入:

eval $(ssh-agent)

確定最後出現只有一行的Agent pid XXXX字樣之後，輸入：

ssh-add ~/.ssh/id_rsa

此步驟即算完成。

將ssh key加入github

打開github的setting頁面，點選add ssh key。

title欄位輸入自己可以記憶的名稱，例如可以輸入電腦名稱，好讓自己可以辨別這個key是哪一台電腦所用。
另外用記事本打開id_rsa.pub，把所有內容複製，貼到key欄位中。

這樣就算加入完畢了。

測試

輸入以下指令：

ssh -T git@github.com

應該會顯示：

The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

輸入yes，若顯示

Hi username! You've successfully authenticated, but GitHub does not
provide shell access.

這樣就代表ssh 設定完成了，以後可以輕輕鬆鬆發佈hexo blog了

Gatsby Starter Blog RSS Feed

Client-side / Server-side Rendering, CSR or SSR

Server-side Rendering

Client-side Rendering

比較

References

Cookie, Session, LocalStorage 的相同與相異

Cookie

Web Storage API

API 介面

localStorage

sessionStorage

應用場景

user session

個人化

追蹤

References

Cookie and Session

HTTP 是無狀態的

Session 實作方式

Cookie 安全性

解決方法

express-session

avoid_react_re-rendering

Example Component: Counter

PureComponent, shouldComponentUpdate

React.memo

useMemo

useCallback

references

github

encode101, 網頁上的 `編碼` 基礎知識

編碼的作用？

ASCII 編碼

Unicode

進位制

U+<十六進制數值>

沿用 ASCII 編碼

Code Point 碼點

碼點與文字轉換

文字符號 to Unicode 碼點

Unicode 碼點 to 文字符號

Code Point in JavaScript

UTF-8, UTF-16, UTF-32

HTML Encode

URI Encode

encodeURI

encodeURIComponent

Example

鏈結串列（Linked List)

與陣列 (Array) 的比較

Implementation

Recursion in JavaScript

call stack

How recursive functions work

Regular Expression in JavaScript

Test method

Match Literal Strings

Ignore case

Extract Matches

find more than the first match

Match Single Character with Multiple Possibilities

wildcard character: .

character classes

character set

negated character sets

Match 0 or more times

0 or more times

1 or more times

Quantity specifiers

Lazy matching

Match Beginning/Ending

^ Beginning

$ Ending

shorthand character classes

React, how to avoid re-render every time

E2E test

Page Objects Pattern

Example

目前目前的 E2E 測試工具有哪些？

wildcard character: `.`

`^` Beginning

`$` Ending

Express/Response Properties: `res.locals`

`篩掉質數的所有倍數` 到 num 的平方根

Code from `Learning Algorithms`

Code from `Learning Algorithms`

Code from `Learning Algorithms`

Code from `Learning Algorithms`

Code from `Learning Algorithms`

Code from `Learning Algorithms`