Skip to main content

Redux Saga 真好用

· 3 min read

最近相當常使用Redux Saga，簡單紀錄一下。

比較常見用來處理 Redux 非同步操作的 Middleware 有redux-thunk, redux-saga, redux-observable等。之前參與開發的Firefox Devtools使用的是修改版的redux-thunk。我在其中一個個人專案中也有試過redux-observable。使用 Rxjs 的感覺，是整個過去的開發觀念又被扭成另一個形狀😅。因為整套開發的觀念不同，當後續想要修改時常常遇到一些問題。目前則多使用redux-saga來處理非同步相關問題。

基本 Redux State 運作​

先簡單回顧一下基本的 Redux State 運作。Redux 統一儲存所有網頁前端的狀態 (State)。只能透過發送Action來通知狀態的改變，並透過Reducer修改當前的狀態。

基本的 Redux 僅支援同步的操作。若想支援非同步操作（promise, async, API 等）需要透過加裝Middleware來處理。Middleware 的功用，是改變收到Action後的處理流程。Redux Saga即是其中一種功能強大的 Middleware。

Redux Saga 運作​

Redux Saga 的運作模型，起始自收到 Action。Saga 透過takeLatest或take監聽想處理的 Action，並呼叫對應的 generator function。在 generator function 中，可以用yield語句來完成各種非同步操作。

例如使用select語句來從目前的State中取得資料，使用call語句來呼叫 API，用put語句來將新的 Action 傳回 Redux 處理。

一段簡單的範例：

function* handleAction(action) {
  // get state from state.auth
  const auth = yield select((state) => state.auth)
  // async get data. fetchData is the async function.
  const { result } = yield call((auth) => fetchData(auth))
  // dispatch action. saveData is the action creator.
  yield put(actions.saveData(result))
}

export default function* rootSaga() {
  yield takeLatest('ACTION', handleAction)
}

把兩張圖畫在一起的話，可以看到 Redux state 與 Redux Saga 之間整體的呼叫關係。使用 Redux/Redux Saga 能將「從 UI 呼叫 -> 參看現有狀態來與 API 溝通 -> 根據取回值更新狀態 -> 更新 UI」這樣的複雜流程，整個簡化為單向的操作。

當然Redux-saga還有提供一些其他的功能，但其實Redux-saga就是這麼簡單。使用Redux-saga可以很好地運用原有的非同步處理觀念，要將 React Component 中相應的非同步函式搬出來，也不像Redux-observable那樣需要全部改寫。

參考資料​

個人工具箱2018六月

· 4 min read

先記錄下來手邊使用的工具，才有機會從繁雜中歸納出簡單的使用規則。

2011 [^1] 年時紀錄了一次當時的個人工具箱，2016 年開始再次紀錄自己手邊工具箱的改變 [^2] [^3] [^4]🤹。 今年初工作上有了變化，也將家中的環境與筆記工具包含進配置列表中。

主要裝備​

  • :computer:Dell XPS 13 (8550), Windows 10, i7 4GHz x4, 8GB RAM, 13.3" LCD，作業系統：Elementary OS + Windows
  • 📱One Plus 3, Android, 6GB RAM, 5.5" AMOLED
  • :headphones:Sony WI-1000 降噪耳機

🏠家​

  • 🖥24" LCD
  • ⌨羅技 K375s 鍵盤
  • 🖱 羅技 M720 滑鼠
  • :package:Synology NAS: 電影，影集，照片，資料備份
  • :bulb:Yeelight LED 燈泡
  • :dark_sunglasses:Oculus Go: 看影片
  • 備用 :computer:Macbook Air 13", 2012 年版
  • 備用 :tv:Chromecast 一代
  • 備用 :speaker:Echodot
  • 備用 Respberry Pi 3
  • 備用 :orange_book:Kindle Voyage

和上一季相比的改變：​

主力用:computer:Dell XPS 13"，家中添購了一台🖥24" LCD 接筆電，搭配 3 轉 1 HDMI Hub，接🎮Nintendo Switch，可滿足影音相關需求。HDMI 設備通電時會自動切換到對應的設備。

還是比較少坐在 LCD 前，因此 Chromecast 用很少，另購入 Oculus Go 看影片 / Youtube。

⌨羅技 K375s 鍵盤與🖱羅技 M720 滑鼠，兩者特點都是同時支援使用 USB 或藍牙控制設備，讓我可以用一套鍵鼠控制多種設備。

🕸網站工具​

設計工具​

開發工具​

  • 編輯器：VS Code
    • Blank Line at the End
    • Diff Tool
    • EditorConfig for VSCode
    • Go
    • Guides: more guide line
    • GitLens: more git info
    • Python
    • Settings Sync
    • solidity
    • Trailing Spaces
  • 版本控制：git
  • 套件管理：apt (Linux), nvm, yarn, Chocolatey(windows)

若需要在 Windows 上開發，能用 Chocolatey 處理的就用 Chocolatey 處理。

娛樂工具​

  • 🎮Nintendo Switch
  • :dark_sunglasses:Oculus Go
  • :tv:Chromecast (少用)
  • 🎮Steam /vlc (少用)

因為攜帶便利，現在主要只玩 NS 上的遊戲。Steam 上看到喜歡的遊戲，也盡量等 NS 上出了再買。

:iphone:Android 手機應用​

  • 瀏覽器：Firefox for Android
  • 網頁更新通知：Web Alert
  • 閱讀：Feedly, Readmoo, Pocket
  • 信箱：Inbox, Gmail
  • 地圖：Google 地圖
  • 記事：Keep
  • 內建相機，內建時鐘
  • 相簿：內建相簿，Google 相簿，Dropbox
  • 社交：Facebook, LINE, Twitter
  • 待辦事項：Todoist
  • 密碼管理：Bitwarden
  • 記帳: Toshl
  • 線上影片：Youtube
  • 音樂：豆瓣 FM, Spotify
  • 有聲書：Audible, Podcast Addict
  • 健康：小米運動，Pokemon Go, 7Min workout

工具

  • 2 步驟認證：Duo Mobile
  • 旅遊：Google 翻譯，TripAdvisor
  • 影片播放：MX Player, DS video
  • 記錄看書狀況：Readmoo 分享書
  • 線上學習：Udemy, EggHead.io
  • IFTTT
  • 💳街口支付

筆記工具​

  • B5 方格筆記本
  • Storage.it 筆記本封套
  • 搭配 5 隻筆
    • Pilot FRIXION BALL Slim 0.38 藍色筆桿 + 0.5 魔擦筆筆芯
    • Pilot HI-TEC-C coleto 雙色筆桿 + 0.38 紅 / 綠筆芯
    • Pilot FRIXION light 水藍色魔擦螢光筆
    • Pilot FRIXION COLORS 褐，黑色魔擦筆

Reference​

做一個回覆食材營養成份的聊天機器人

· 5 min read

可以透過 QRCode 加入營養成份 LINE bot。

Update: 謝謝大家熱烈試用「營養成份 bot」, 因為測試帳號已達 50 人的上限，所以將遷移到新的無人數上限的「營養成份 2 bot」，請點選新的「營養成份 bot」邀請連結 https://line.me/R/ti/p/%40hoz2085q

歡迎分享新連結給可能需要的朋友，讓大家隨手查營養，吃得更健康。 (目前的 bot 仍然可以使用，但不再更新維護)

食物，運動，與身體平衡​

最近在看代謝型態飲食全書，裡面提到吃下的東西與運動，與體內的平衡和慢性病的產生有相當密切的關係。要讓身體重新回復到平衡的健康狀態，需要選擇適合自己的食物（營養素的比例）並搭配適當運動（有氧 + 無氧）與充足睡眠。

其中我們所選擇的一天三餐與餐間的飲食習慣，則是潛移默化地影響我們的健康。 當我們持續吃不好的食物或錯誤的營養素比例，則讓體內的系統處在有的養分過多，有的養分不足的持續不平衡的狀態。這些不平衡讓各種體內各種系統無法正常工作。例如一餐吃進過多的精製糖份可能造成血液中的糖份快速升高，胰臟必須快速分泌大量胰島素來協助細胞消化糖份，當這樣不平衡的狀態維持久了，就會造成胰臟的過度負擔。當體內的代謝開始失常時，我們可以先觀察到一些亞健康症狀，累積久了就成了各種慢性病。因此選擇適合自己的食物是相當重要的。

Bot 怎麼做成的​

要選擇適合自己的食物時，我除了先做了測驗了解個人飲食中三大營養素 (碳水化合物、蛋白質、脂肪) 的參考比例，也想知道每樣吃下的東西大致的營養成份。

我想到如果有各種食材的營養成份資料，就可以做成聊天機器人或 App 以供隨時查詢。我搜尋了一下，發現政府資料開放平台上有公開的「食品營養成分資料集」，提供 csv, json, xml 等格式下載。

下載開啟資料後，發現原始的 JSON 格式還是蠻.... 有趣的。

下載的 JSON 格式資料長這樣：

[{"食品分類":"魚貝類"},{"資料類別":"樣品基本資料"},{"整合編號":"J11101"},{"樣品名稱":"鮸魚"},{"俗名":"鮸仔,敏魚,鮸,敏仔魚"},{"樣品英文名稱":"Brown croaker; Mi-iuy croaker"}

... 對於這種 JSON 存法只能... 呵呵。

重新下載了 csv 檔，這次看到的格式總算正常了點，但解開後的 csv 檔案有接近 50MB 大小。寫了個腳本過濾掉不需要的資料，並轉換成需要的格式後，輸出總共不到 500KB，這樣的大小就算放到 App 裡也還合適。

這次使用bottender框架來連接到 LINE [^1]。由於 LINE 需要 HTTPS 連線，開發的過程中使用了ngrok來讓 LINE 可以連到開發中的電腦，免去另外架設公開網站的麻煩。

此外還使用了Fuse.js這個模糊搜尋函式庫，在搜尋的時候只要打部份內容，就可以搜出相關的條目。

整個 bot 的軟體架構如下

開發中遇到的小坑​

  • developer channel or free channel

剛開始申請用 developer channel ，因為所有 API 都可以使用，開發起來會比較順暢。但稍後就遇到了 Bot 只能加 50 人好友的限制。

  • Push Message vs Reply Message

developer channel 可以用 Push Message API (也就是 bottender 範例中接的 sendText)。free channel 的話不能使用 Push Message API (context.sendText)，只能用 Reply Message API。也就是不能推送訊息，但可以回覆使用者訊息（至多五筆）。查了一下文件 [^2]，雖然需要稍微改變一點寫法 (context.reply)，但還算容易解決。

現在上線讓大家使用的已是改用 Reply Message API 的版本。

我可以加這個 Bot 嗎？​

可以透過掃描 QRCode 加入營養成份 LINE bot。

或點選以下連結

因為使用免費的 Host，不能保證 bot 永遠在線，若第一次沒回應，可以稍等半分鐘後再試。

會不會 Open Source​

目前程式還沒有好好整理，尚不打算開源。

參考資料​

Advanced tuning for my daily Elementary OS usage

· 3 min read

I'm a happy Elementary OS user and use it as my default desktop OS (~95%) several month. There are some useful tweakings that help me live with the Linux desktop.

1. Package installer​

Elementary OS does not provide deb installer by default, need install manually:

sudo apt install gdebi
sudo apt install software-properties-common

And you can download ubuntu software center as well(optional).

2. Setup Fonts​

List system supported fonts

fc-list | cut -f2 -d: | sort -u

Setup fonts

gsettings set org.pantheon.terminal.settings font 'Roboto Mono'
gsettings set org.gnome.desktop.interface font-name 'Open Sans 9'
gsettings set org.gnome.desktop.interface document-font-name 'Open Sans 10'

If you like Fira code for coding font, you can follow https://github.com/tonsky/FiraCode/wiki/Linux-instructions#installing-with-a-package-manager to install it.

3. Pairing Bluetooth Mouse​

I can't use GUI Bluetooth manager to pair with bluetooth device, but these commandline works well for me.

$ bluetoothctl
$ agent on
$ default-agent
$ pairable on
$ scan on
$ devices (to see the devices and macs that you want to pair)
$ pair <dev mac>
$ trust <dev mac>
$ connect <dev mac>

4. Saving Power​

tlp is a good tool for auto power management

sudo add-apt-repository ppa:linrunner/tlp
sudo apt-get update
sudo apt-get install tlp
sudo tlp start

5. Auto adjust color temperature​

redshift is by far the great f.lux like app for linux.

$ sudo apt-get install redshift redshift-gtk
$ redshift-gtk

Then configue it as auto start in task bar.

6. Touchpad indicator​

Sometimes you may found the cursor is moving to the wrong place. Install Touchpad indicator solved this issue.

sudo add-apt-repository ppa:atareao/atareao
sudo apt-get update
sudo apt-get install touchpad-indicator

and Toggle Disable Touchpad on typing.

7. Dropbox icon​

Install Dropbox from its website, then configue to fix the missing icon.

8. Backup​

Install Timeshift for system backup. Its pretty easy to use via GUI.

sudo apt-add-repository -y ppa:teejee2008/ppa
sudo apt update
sudo apt install timeshift

參考資料​

Devtools的近期進展和新功能(2017)

· 8 min read

2017/9/22 我和 Ricky Chien 在台灣第一次舉辦的Mozilla Developer Conference中，一起為大家介紹 Firefox 開發者工具，也就是 Devtools 的近期進展和新功能 [^7]。

Devtools 架構的大幅改進，是過去一年中所有 Devtools 貢獻者共同努力的成果。在這講題中，我們可以看到 Devtools 如何持續改進，並提供各種新的工具，讓開發網頁的過程變得更有效率。

透過在 Firefox 57 新版的統一選單介面上開啟 Web Developer Tool，我們可以開啟 Devtools 的各種工具分頁分頁 (Panel)。

Devtools 簡單來說，就是各式各樣網頁開發者工具的集合。這些工具以一個個分頁（Panel）的形式組織在開發者工具區域中，我們稱這個區域為Toolbox，也就是工具箱。

Devtools 的過去​

Devtools 的前身叫做 Firebug [^1]。在 2006 年時，Firefox 的創始者之一 Joe Hewitt 寫出了 Firebug 這個 Firefox 的網頁開發工具 addon [^2]。 使用者可以利用它除錯、編輯、刪改任何網站的 CSS、HTML、DOM 與 JavaScript。也可以透過 addon 再次擴展它的功能。現在各家瀏覽器的網頁開發者工具都參考了 Firebug 功能。

過去的 Web 相關技術遠遠沒有今天成熟，Mozilla 發明了一些特有的技術 (XUL, XBL) 來製作瀏覽器的介面與呼叫特殊的 API (Addon API) 來和作業系統互動。因為原有的 addon 架構無法支援 FIrefox 新的多執行緒 (multiple process) 架構，因此 2016 年 Firebug 開發團隊決定將 Firebug 直接整合進 Devtools 中[^3]，原有的 Firebug 開發團隊也大多加入了 Firefox Devtools 團隊繼續貢獻，也因此我和 Ricky 有了和原 Firebug 維護者 Honza 直接共事的機會，在過去半年中我們合作開發 Network Monitor，透過 Daily Meeting 同步進度，也在合作的過程中得到許多難得的經驗。

Devtools 的現在​

Devtools 繼承 Firebug 的開發目標，也就是協助網頁開發者更有效率的製作網站。同時作為網頁開發者工具，我們希望開發者工具工具本身，也能用和網頁開發者使用的排版與框架來撰寫。

於是在 Mozilla Web Summit，大家可以看到我們的成果。我們已經在使用 HTML 和 Web Standard API 來製作 Devtools 開發者工具！

使用 HTML 與 Web Standard API 只是第一步。我們進一步評估，選用了 React 和 Redux 作為前端 UI 介面與狀態管理框架。經過 react 改寫後，我們有了可在不同工具間中重用的元件庫。透過 redux，每個工具也都有了清晰的 App 狀態管理機制。

我們將許多 Devtools 核心的專案放到 Github 上以方便開發者，並且將可以重用的元件，放到 Devtools-Core 專案中，將可以獨立運作的Debugger.html，Perf.html專案也放到 Github 上，讓參與專案變得更容易。

如果想開發自己所需的的開發者工具。現在也可以使用 Web Extension API 來製作新的開發者工具面板。面板中也可以重用Devtools-Core專案提供的 React 介面元件，更快地打造自己的開發者工具。

使用者介面的改進​

Firefox 57 上的 Devtools 分頁變得更美觀了。當然這些都已包成 React component，喜歡還可以拿去用。

對於新配色的選擇，我們的 UX 團隊有做過可用性 (Assessibility) 測試 [^5]。即使是辨色有障礙的人，也可以容易地分辨不同色塊的差異。

Inspector 工具的改進​

Inspector 工具是最常被使用的開發者工具。透過 Inspector，可以查看或修改 HTML。選到任一個 Element 時，可以查看並修改這個 Element 目前所有套用的 Style。

透過重構 Inspector，我們把原本使用的 XUL 與 addon SDK 替換為 HTML 和 web API。並使用 React + Redux 來組織程式的內部架構。

在整理所有 devtools 新增功能的時候，我最先注意到的就是 "Find Useless Rules" 這個超實用的功能。

過去在 Inspector 裡只會在不合法的樣式旁顯示警告標誌，現在我們也會在「合法，但無用」的樣式旁也顯示警告標誌。 比如在 grid 或 flex layout 中使用 float 屬性的話沒有作用，Inspector 就會在 float 屬性旁顯示警告標誌。

此外，Inspector 的 Box Model 會列出所有影響的這個元件位置，大小，或形狀的屬性。透過新的 box model 介面，可以更容易地查看並調整上下左右 position 參數，快速地將版面調整到理想狀態。

Firefox Devtools 也是最先支援 Grid Layout [^4] 的開發者工具。我們可以看到，在 Rules side panel 中的任何修改，都會直接反映到頁面上。

在 Layout Side panel 上會列出了頁面上所有的 Grid Layout。右側則可以選擇要顯示輔助線號碼，區塊名稱，或是要不要延長 Grid 格線以便排版。

不僅如此，在畫面上也可以見到，開發者也可以在 Layout Side panel 中快速的查看對應的網格。我們可以透過這些選項更好地查看頁面上的 Grid Layout。

Ｗeb Console​

Web Console 應該是 Javascript 開發者最常用的網頁工具吧。除了查看頁面上的 Javascript 錯誤，印 log 外，Web Console 可以即時執行 javascript，或是存取頁面上的 Ｇlobal Object。

去年 Web Console 也經過改寫。使用 React + Redux 來組織程式的內部架構。

我們在 console 中可以即時執行 javascript 並取得執行結果。不管是哪種類型的變數，無論是 boolean, array, object 都會用 Object logs 來顯示。

在 rewrite web console 的過程中，我們也將 Object logs 包裝起來變成一個可以重用的 React Component。

這個元件被大量地運用在 Debugger, Network 等其他 panel 上。

如果你想要開發自己的開發者工具或剛好需要類似的元件，reps 可以在 github 上找到。或是透過npm install devtools-reps命令來安裝到你的專案中。

Web console 近期也透過 tree 和 reps 元件，支援了 console group 功能 https://developer.mozilla.org/en-US/docs/Web/API/Console/group

現在透過 web console 實驗 XMLHTTPRequest 或 fetch 時，也可以透過 HTTP inspector 來即時查看 http request 的內容。整套 HTTP inspector 元件是來自 Network Monitor，只經過一點點修改就能完整套用。因此在 web console 中可以直接看到與在 network panel 中一樣的資訊，非常方便。

Perf.html 網頁效能監測工具​

最後我想介紹的是 Perf.html 這套工具。

要提升網頁的效能是相當考驗技術的。 透過 profiling，也就是量測的結果，我們可以更直觀地找出網頁效能的瓶頸並做出針對性地改善。perf.html 就是這樣的量測工具。

去年 perf.html 也經過改寫。使用 React + Redux 來組織程式的內部架構。有自己的網頁，可以脫離 devtools 獨立運作。程式碼 host 在 github 上。

perf.html 使用前需先到網站上安裝 addon，在要量測前後按下 start/stop，就可以得到量測的 profile。

perf.html 最棒的點是，量測好的 profile 可以透過 addon 直接上傳到網站上，我們是在一般網站的介面上查看量測的結果。可以直接分享這個網址，或是標註出關注的時間區間後分享。和其他人一起 trace 效能瓶頸。

經過 photon 更新後，perf.html 介面風格將變得更加簡潔，配色變得更大膽，用起來更舒服。

以上是我分享的部分。若您對 Devtools 感興趣，可以到firefox-dev.tools網站查看所有與 Firefox Devtools 相關的資訊。

參考資料​