Skip to main content

2-12

Firefox & Safari image render​

以下情形是使用 Krpano 套件，在 hotspot 使用 append img 標籤的方式時遇到的圖片解析度問題。

  • 在 FF 瀏覽器上，若 img 標籤的圖片是以非原尺寸顯示的話，因為經過縮放故會讓此圖畫質降低甚至是模糊。
  • Chrome 看起來是還好，但是 FF 或 Safari 上就非常模糊。
  • 故在 FF 的做法是設置 css 屬性：image-rendering: optimizeQuality; 去定義要圖片渲染使用的演算法。
  • Safari 是透過重置 CSS 設定：因 krpano 在外層會使用 transform3d 使其定位在對應的環景空間，故內層 img 縮放過後會導致圖片解析度下降(Chrome & Firefox 不會大概是其渲染的演算法寫得比較好)，所以要解決 Safari 問題需要額外加 transform: translate3d(0, 0, 0);

Promise.race()​

  • 取第一個 resolve 或 reject 的 promise 做後續的動作，但其他的 promise 還是會繼續執行，只是不會有後續動作而已。

which​

用於查找該指令的執行檔在哪個位置。 遇到 Node 與 Yarn 版本不相符的問題時，很常使用 which 來排查。(通常這情況都是 Node 與 Yarn 其中有個是另外安裝的，不是使用 nvm 管理 Node 版本。)

which node
// output: /Users/username/.nvm/versions/node/v10.21.0/bin/node

上述只會輸出找到的第一個位置，若要查看所有的位置需要加 -a 

which -a npm
// output: /Users/username/.nvm/versions/node/v10.21.0/bin/npm
// /usr/local/bin/npm

上述例子就是 npm 有 Node 本身的版本與額外自己安裝的版本。(若額外安裝的版本排在第一個則很容易出現版本相異問題，故盡量統一使用 Node 底下的 npm)

Redux 概念 review​

三大支柱：

  • action
  • state
  • reducer

action：

  • 為物件： { type: ACTION_TYPE, payload: ACTION_DATA }
  • type 相當於此 action 的名稱，payload 為要傳的資料

state：

  • 資料狀態存放的地方
  • 更新資料狀態時，若要改動的資料是廣義物件(包含陣列等等)，需要直接給新的 ref (常用展開運算符 ... )
  • 承上，若使用 redux-toolkit 則可以在 reducer 內直接改動 state (底層使用了 immer 套件使我們可以直接改，因為 reducer 內拿到的 state 已經被深拷貝過了)

reducer：

  • 處理資料更新邏輯的函式
  • 接收 action，判斷 type 決定要怎麼處理資料
  • 在 combineReducer 之後，只要有 action 被 dispatch，所有 reducer 都會接收這個 action 並運行，所以在不同的 reducer 中接受同一個 action type 做事是可以的。
  • 如不使用 redux-toolkit，在 reducer 內需要給定初始 state，並給 default (return initialState)，原因是在 combineReducer 時會運行一次所有 reducer 建立初始的 state tree。

補充 redux-toolkit：

  • 以前使用 redux 時需要寫很多重複的 boilerplate code，使用 redux-toolkit 通過它提供的 slice 方法快速寫好 reducer，並會自動產生 action generator 可用。
  • 初始 state 也不用寫在 reducer 內，給在呼叫 slice 方法時的參數物件下即可。
  • 建立一個 slice 時也要給定 name，借此區分各個 slice 內的 action、state、reducer

SNS & Lambda​

若要新增 SNS 主題並要觸發 Lambda 執行，SNS 類型必須要選標準，選 FIFO 會無法讓 Lambda 訂閱

Last updated on