Skip to main content

· 5 min read

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

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

主要裝備​

  • 💻 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
  • 🎧 Sony WI-1000 降噪耳機

🏠 家​

  • 🖥️ 24" LCD
  • ⌨️ 羅技 K375s 鍵盤
  • 🖱 羅技 M720 滑鼠
  • 📦 Synology NAS: 電影，影集，照片，資料備份
  • 💡 Yeelight LED 燈泡
  • 🕶️ Oculus Go: 看影片
  • 備用 💻 Macbook Air 13", 2012 年版
  • 備用 📺 Chromecast 一代
  • 備用 🔈 Echodot
  • 備用 Respberry Pi 3
  • 備用 📙 Kindle Voyage

和上一季相比的改變：​

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

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

graph LR LCD -- DVI --- Notebook LCD -- HDMI --- hub{HDMI Hub} hub --- ns[Nintendo Switch] hub --- Chromecast hub --- rpi[Respberry Pi]

⌨️ 羅技 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
  • 🕶️ Oculus Go
  • 📺 Chromecast (少用)
  • 🎮Steam /vlc (少用)

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

📱 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​

· 7 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​

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

參考資料​

· 2 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

參考資料​

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

參考資料​

· 3 min read

查看 從 gitbook 遷移到 docusaurus

把過去半年本部落格上關於區塊鏈的文章整理放到 Gitbook。命名為Ethereum 區塊鏈！智能合約 (Smart Contract) 與分散式網頁應用 (DApp) 入門，對區塊鏈，智能合約，分散式應用 (DApp) 感興趣的讀者不妨前往一觀。

這不是我寫的第一本書1，也不是我第一本用 Markdown 寫的電子書 (以前用 Leanpub 出版過Firefox OS 開發書)，但絕對是我編輯過程最順暢的一本書（雖然還未完成 XD）。

一路 Markdown​

編輯過程最順暢不是因為對主題很熟悉或寫得快，而是因為從部落格文章初稿到 Gitbook，在寫作的過程中可以一路使用 Markdown。而且由於原本部落格圖片皆使用外連，因此引用圖片時也不用像以前編書時需要重新導入的過程。由於 gitbook 也支援mermaid.js插件，支援我常常使用的 flowchart 語法，因此這些流程圖也不需要重新截圖或繪製，節省了大量時間。

所見即所得編輯器...​

我已有Ｍarkdown 格式的初稿，但剛開始我使用 gitbook 提供的所見即所得的編輯器。使用起來感覺非常不自在。

線上編輯器提供的new change request，所見即所得編輯等功能，特別是 gitbook 提供的所見即所得編輯器無法切換回純 Markdown 模式，對於已熟悉 git, Markdown 語法的我來說並沒有變得好用。直接將 Markdown 格式貼到編輯器上時，也無法順利辨識格式，反而是貼上已輸出的部落格網頁時效果好很多。

所以最後我放棄使用線上編輯器，而是在本機編輯 Markdown 後直接 git 推送到專案上。

gitbook 在同步收到新的改動後，會自動編譯並發布新版本，相當方便。接下來應該會繼續使用這個流程。

參考資料​