Posted on   |   1,308 words, 1 min. read

Imgur

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

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

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

食物，運動，與身體平衡

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

graph LR 食物 --> 身體吸收 身體吸收 -- 影響 --> 體內系統的平衡 運動 --> 強化身體 強化身體 -- 影響 --> 體內系統的平衡 睡眠 --> 修補身體 修補身體 -- 影響 --> 體內系統的平衡

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

graph LR 吃錯食物 --> 身體吸收 身體吸收 -- 影響 --> 體內系統不平衡 體內系統不平衡 --> 代謝失常 代謝失常 --> 亞健康症狀 亞健康症狀 --> 慢性病

Bot 怎麼做成的

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

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

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

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

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

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

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

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

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

整個bot的軟體架構如下

graph LR subgraph 資料處理 公開資料(csv) -- 轉換/過濾 --> JSON end subgraph Node JSON --> fuse.js fuse.js --> bottender bottender --> ngrok-cli end ngrok-cli --> ngrok ngrok --> ngrok-cli ngrok --> LINE LINE --> ngrok ngrok-cli --> bottender

開發中遇到的小坑

  • 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

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

參考資料

Posted on   |   399 words, 1 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'

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.

參考資料

Posted on   |   2,061 words, 1 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 的前身叫做 Firebug1。在2006年時，Firefox 的創始者之一Joe Hewitt 寫出了Firebug這個Firefox 的網頁開發工具addon2。 使用者可以利用它除錯、編輯、刪改任何網站的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命令來安裝到你的專案中。

https://github.com/devtools-html/devtools-core/tree/master/packages/devtools-reps#readme

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 相關的資訊。

參考資料