2017 年開始紀錄自己使用的自動化紀錄工具。今年的自動化程度其實退步了不少，主要是一些以前依賴的第三方服務如 Anobii (不維護) 或豆瓣 (要實名認證) 都紛紛出現了問題。用一年下來，Joplin 確實解決了我隨時筆記與累積的問題。
有人會問，Facebook/Twitter 不就可以記錄大小事了嗎？如果會這麼回答，那就實在太天真了😏 。FB 上也許包含了自己覺得值得分享的事，但生活中還有諸多事情值得記錄，而不適合與大眾分享。
或是想整理過去公開紀錄，造訪過去使用過的社交平台（Plurk, Google+, Blogger）已非常難以找出過去的隨筆或評論。
擁有自己的一份完整數位化生活記錄，是我持續的個人目標之一。要達成這個目標，需要藉助一些自動化紀錄工具，好讓整個過程變得自然而不困難。
2017 年開始紀錄自己使用的自動化紀錄工具。
有人會問，Facebook/Twitter 不就可以記錄大小事了嗎？如果會這麼回答，那就實在太天真了😏 。FB 上也許包含了自己覺得值得分享的事，但生活中還有諸多事情值得記錄，而不適合與大眾分享。
或是想整理過去公開紀錄，造訪過去使用過的社交平台（Plurk, Google+, Blogger）已非常難以找出過去的隨筆或評論。
擁有自己的一份完整數位化生活記錄，是我持續的個人目標之一。要達成這個目標，需要藉助一些自動化紀錄工具，好讓整個過程變得自然而不困難。
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 的前身叫做 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 繼承 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，可以查看或修改 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。
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 這套工具。
要提升網頁的效能是相當考驗技術的。 透過 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 相關的資訊。
2017 年開始紀錄自己使用的自動化紀錄工具，今年更新。
有人會問，Facebook/Twitter 不就可以記錄大小事了嗎？如果會這麼回答，那就實在太天真了😏 。FB 上也許包含了自己覺得值得分享的事，但生活中還有諸多事情值得記錄，而不適合與大眾分享。 擁有自己的一份完整數位化生活記錄，是我持續的個人目標之一。要達成這個目標，需要藉助一些自動化紀錄工具，好讓整個過程變得自然而不困難。
Cloud Sync從 Dropbox 同步照片。現已不再帶小米手環 2，覺得記錄睡眠與步數，並無法改善健康狀況，意義不大。 同時為了降低多走路所需要的意志力，把每日步數改成更容易達成的 300 步，只要開始走，通常都會超過需要的步數。
Update: 四月開始為了減重需要，又再戴起小米手環 2。並將體重計換成體脂計。因應生活型態的改變，行走目標也改為每天 4000 步。
延續用 IFTTT 做自動生活紀錄這篇的思路，我把看過的書籍、電影，喜歡的 Youtube 影片，貼過的文章，每日完成的事項都記錄到 Google 日曆中，以方便之後回顧。
對於書籍與電影，我使用 RSS + IFTTT + Google Calendar 來自動紀錄。 當我在豆瓣上修改狀態，豆瓣的 RSS 也跟著改變，這時 IFTTT 會將 RSS 中的新事項紀錄到 Google 日曆上。 對於 Youtube 上 like 的影片，Facebook 或 Twitter 上新貼的文章，也會透過 IFTTT 紀錄到 Google 日曆上。
透過 RSS 轉 IFTTT 紀錄
直接透過 IFTTT 紀錄
這部份是自動紀錄的核心。使用 Todoist + IFTTT + Google Calendar 即可達成。
我在 Google Calendar 上使用一個單獨的日曆 (成功日記) 來紀錄每日完成的事項。
If task completed in Todoist, Then log into Google Calendar
為了更方便地蒐集待辦事項，我參考這份影片 https://youtu.be/V7Dk7pzjJmM?t=11m30s 來將 Todoist#Inbox 設定為 Email 聯絡人，這樣處理 Email 的過程中也能快速地新增待辦事項。
此外也透過 IFTTT，將設為Reference標籤的信件備份到 Evernote 中。
事實上這兩種設定都很少使用。
我會將待看的文章搜集到 Pocket。
除了瀏覽 Facebook 或 Twitter 上的文章，我也使用 Feedly 訂閱一些自己挑選過的網站。並將 Feedly 設定成當我做標記時，就將本篇文章轉存到 Pocket 稍候閱讀列表，我可以掃過 Feedly 列表，標記感興趣的新聞，稍後再到 Pocket 閱讀。
這樣讓我在看到文章連結當下不需急著看完整篇文章，而是在有空閒的時候才閱讀這些文章。
我唯一的待辦事項收件夾是 Todoist，若看到值得閱讀 (紀錄) 的網頁，桌面上我使用瀏覽器的Pocket外掛插件 (Firefox 瀏覽器內建)，將待看網頁記錄到 Pocket 中。
若這個網頁非看不可，我會在按下插件時填入一個自訂標籤fox，然後透過 IFTTT，若發現 Pocket 中新增了一筆含fox標籤的網頁，就新建一筆 Todoist 代辦事項。
在手機上就直接使用 Todoist 和 Pocket 等 App 達到一樣的效果。
有些網站並未提供 RSS 訂閱，手機上我會使用Web Alert來取得網頁更新提醒。
使用 VS Code Settings Sync ，只需剛開始時設定一次，之後可同步各種 VS Code 中的設定與插件。
目前已使用 Github 來放我的個人網站與部落格，透過與 Travis CI 整合，我所修改的任何內容，在幾分鐘之內都會自動部署到網站上。
如何做可參考 Hello Hexo (個人網站自動化部署) 和 Automatically deploy new commit to github pages via Travis CI
Auto website deploy flow
一些可以直接運作在瀏覽器的專案 (如 BlocklyDuino 和 Saihubot)，我會直接將 gh-pages 設為預設分支，所有改動直接 push 到這分支中。這樣一有改動即可在網頁上看到更新成果。
透過翻看 Todoist 或 Google Calendar，我可以輕易地將過去一週達成的事項整理出來，再送 PR 到 Github 上。 也可以說這塊目前只能算半自動化地列出過去事項列表，可以再繼續改進。
我在 Todoist 中增加一個Template項目，裡面放了周檢視 / 月檢視 / 季檢視 / 年檢視樣板，透過重複時間設定，每段時間自動提醒該做檢視了。
撰寫本文的目的之一，也是讓我有回顧我的自動化運作的機會。
由於 Dropbox 空間有限，會不定期將 Dropbox 上的照片移動到到 NAS 上按年月份分類的photo/資料夾.
我的照片並不算多，但若有出遊的月份通常照片會暴增。所以我的基本備份規則是依年份，並以雙月份命名資料夾，若是當月有重大活動則直接在檔名中標注。
例如 2016 年的照片資料夾裡會有2016_10_11，或是2016_06_london這樣的命名。
在整理照片的時候，每當遇到特別喜歡的，我會另存到 Dropbox 中的一個依年份歸檔的資料夾，例如 2017 年的精彩照片我會另存到 dropbox/spot/2017資料夾中，這樣隨時可以找出來欣賞。
另外每年累積的一些螢幕截圖，也放在當年度的screenshots資料夾裡。
透過 Feedly 訂閱 RSS Feed 太容易，但是不小心每天收到的新聞量就遠高於自己能吸收的量，這時可以到 https://feedly.com/i/organize/my 把那些失效的連結清掉，並快速檢視一下現在仍在訂閱的網站，是否還對這些主題感興趣。
為了平衡日常太依靠電子產品的趨向，前年開始就嘗試使用實體筆記本作一些紀錄，2018 一月中開始嘗試養成更頻繁地使用實體筆記本的習慣。在幾經調整後，目前我使用 B5 方格筆記本做基礎，搭配不同的魔擦筆來作筆記。實體筆記本的好處是除了一般的紀錄，還可以隨意畫心智圖，黏照片，貼紙，蓋印章等。參考各種筆記術書籍，我在每本筆記本前幾頁會空出索引區，將筆記本內容索引起來，以便之後查找。
暫時還沒想好（也還沒需求）該如何數位化。
隨著 Firefox 56，57 版的推出，我參與製作的 Firefox Onboarding 功能也正式和大眾見面了。
在 Firefox 56 版中當新使用者開啟瀏覽器時，會看到一個可愛的狐狸頭。
點進去可以看到一些功能導覽頁面。
點擊導覽頁面右下方的按鈕的話，會聚焦到瀏覽器對應的功能區塊上，使用者可以快速嘗試這些功能。
我們也加入了 Web assessibility，使用者可以只用鍵盤來瀏覽整個使用者導覽頁面。
經過使用者研究 (User research)，在 Firefox Quantum (57) 版上我們針對 Onboarding 的體驗又做了不小的修改。
這次的更新除了主視覺與一些互動元素都變得不一樣之外，也加了個小彩蛋：新使用者 (全新的 profile) 和從過去版本升級的使用者，所看到的功能導覽項目是不盡相同的喔。
有興趣進一步了解我們怎麼製作 Onboarding Tour，可參考Onboarding 文件
2009 年推出的 Node.js1是讓 Javascript 成為一門廣為通用的程式語言的關鍵。Node.js 將原專為 Chrome2瀏覽器開發的 V8 引擎抽離出瀏覽器，讓使用者在一般命令行環境中就可以執行 Javascript。
要完成一個全功能的現代網站，開發者除了需要至少理解某門語言相關的網站後端技術之外，Javascript 也是身在 Web 開發領域的開發者至少必須 "略懂" 的腳本程式語言 (scripting language)。
既然不管精通哪門程式語言的開發者，想在瀏覽器上發揮，都仍需要某種程度地熟悉 Javascript 程式語言。那麼，如果在瀏覽器之外，也可以拿 Javascript 來做事情不是很好嗎？
Node.js 並不是第一款讓使用者在一般命令行環境中就可以執行 Javascript 的工具 (最早推出的可能是 Mozilla 的 Rhino 或 XULRunner3)，但它跟上了潮流。 2008 年推出的 Chrome 瀏覽器，裡面使用了同被 KDE 與 Apple 使用的 Webkit 作為渲染引擎 (Render)，並自行開發了全新的 Javascript 引擎 (V8 引擎)。Chrome 瀏覽器的 V8 引擎率先支援 JIT (Just in Time) 編譯技術，使得當年 Javascript 的執行效率一舉提升了 8 倍以上📈 。基於 V8 引擎的 Node.js 也比其他 Javascript 運行環境有更強的競爭力。由於執行速度的改善，Javascript 語言終於有了和其他程式語言在瀏覽器之外的環境同場競技的實力。
Node.js 推出當時，除了擁有一個比其他相似競爭者快上幾倍的引擎之外，在隔年整合的 NPM (Node Package Manager)4套件管理工具，讓 Javascript 開發者擁有了更有效率地分享與重用函式庫的方式。到了今天，下載大多數使用 Javascript 語言撰寫的專案，只要執行npm install(或衍生的yarn install)，NPM 就能自行安裝與解決套件之間的依賴關係。NPM 實是今日 Node.js 之所以能形成圍繞著 Javascript 語言建立起龐大生態系的不可或缺的功臣。
隨著 Node.js 更加成熟，Web 開發者也圍繞著 Node.js 重新發明他們常用的工具。最先是 Web 開發框架（如 Express.js5, hapi, koa）與資料庫接口，再來是相關的編譯工具（grunt, gulp, webpack6）。同時，也有人開始嘗試將 Node.js 與原有的瀏覽器環境結合，讓開發者得以使用網頁相關技術打造桌面應用（nw.js, electron7)。基於此技術還發展了數個流行的程式編輯器（atom, Visual Studio Code8）。時至今日，也可透過 Node.js 相關編譯工具，使用網頁相關技術來做行動裝置 App 開發（Cordova, React Native9）。圍繞著 Node.js 的種種發明，讓使用網頁技術的開發者，得以從開發到部署，全都在圍繞網頁技術的生態系中完成。並由此誕生了稱之為 "Full Stack" 全端工程師（前端，後端，整合，測試）和大前端工程師的工作。全端工程師除了需處理網頁端（前端）頁面版型與互動效果外，也要兼顧伺服器端（後端）與資料庫處理。大前端工程師則是除了網頁端之外，也須兼顧行動裝置 App 的開發。
Update: Full instructions are avaiable on Netmonitor Readme to run the Network Monitor in the browser tab.
Firefox Devtools is in progress of modernizing its infrastructure to use the same toolset that modern web developers are familiar with. When talking about modern web developers toolset, I mean React, Redux, Immutablejs, and npm modules.😎
Firefox Devtools was no different from Firefox itself. The Devtools panels are written in XUL, an HTML-like syntax language, and use several Firefox internal API called XPCOM or Chrome privileged API(Nothing related to Chrome Browser) to make the browser works.👽
In last year(2016), Firefox Devtools team's main goal is to convert the code base from XUL to pure HTML. The second goal is convert each tool with React/Redux structure for maintenance. Debugger, Inspector, Web Console are the first batch in the conversion progress. Debugger.html is the very first attempt from Firefox Devtools team to embrace the modern web developers' toolset. Now new Debugger and Web Console are available in Firefox Nightly🍸
Debugger.html, Perf.html(Performance) has their standalone repository hosted on Github. A developer could use git clone to get the repository, and then do yarn install, yarn start(similar to npm command) to debug the debugger.html/perf.html with any browser's devtools!🚅
Run on the Browser tab means?Run on the Browser tab is a term versus Run inside of the developer panel. Traditionally Devtools are running inside of the browser's developer panel. But some of new Firefox Devtools support run as normal web pages. Those pages can be opened in a browser tab by any modern browser such as Chrome, Safari, or Edge. The benefit is we can improve Firefox Devtools with any Browser's Devtools, its an unfair advantage.🚀
We are going to make more Devtools easy to debug and can be used for cross-browser debugging.
To replacing the jet engine while still flying is a challenging engineering work. To make it happen, we take several engineering experiments around Devtools.
Here are the projects in progress and where they are hosted from:
Ricky Chien and I joined the effort of convert Object Inspector from XUL to HTML. Object Inspector is a more complicated tool to convert, so Object Inspector is still half React and without Redux in the playground.
When the Object Inspector is fully converted to HTML, we shift our focus on convert the next important Devtool: Netmonitor. With Honza, Janda, Steve Chung, and other contributors' help, at the end of Feb we have reached our first phase tangible goal: Converted the whole Netmonitor panel from XUL to HTML, with React, Redux, and Immutablejs. Now we have confidence that the code base is easy to read and contribute.🤗
Picture: How current Netmonitor looks like
We just finished the Netmonitor workweek (Fred, Honza, Ricky) in Taiwan, plenty of discussions have occurred, and we have good progress for what should be going on for the Netmonitor.
Here they are:
mozilla-central(The gecko) repo. Beside the current workflow, a developer would able to run yarn start command to debugging Netmonitor on the browser tab with any browser's devtool.Currently, Debugger.html have supported both Firefox and Chrome remote debugging protocols, so Debugger.html could be used to debug Firefox, Chrome, or even Node.js!😮
Since Debugger.html's pure web stack nature, you can imagine one day the debugger.html can be embedded into some editors(Atom, Visual Studio Code) as plugins, or even in other browsers!😇
Run with different remote debugging protocols is the next step once we make Netmonitor.html run on the browser tab.
聊天機器人（Chat bot）已存在許久，常見於各種即時通訊工具中。一般人最可能接觸到的，還是銀行的語音服務（Voice Response System）。
當我們打電話到銀行免付費專線，會有語音提示我們輸入驗證資料，然後輸入對應的數字來得到銀行服務。 只有在根據一串語音提示，輸入特定數字時才轉接到真人回應的專線。這個過程跟使用聊天機器人基本上是一樣的。
銀行的語音服務流程
近年來聊天機器人能重新進入公眾視線，主因還是行動裝置的完全普及： 幾乎所有的人都擁有一台智慧型手機。而且所有人的手機上都有一至數個聊天 App（LINE, Facebook Messenger, Wechat）。
邏輯思維 2017 年跨年演講1裡提到，美國，中國想上網的人基本都已經能上網（上網人口已經接近飽和），人們每周平均花 24 小時上網，而這些數字都已經沒有太大的提升空間。因此所有的網路服務都得從有限的總量中搶占使用者的上網時間與關注。
換句話說，2016 年我們已正式進入行動網路（移動互連網）的下半場，廠商除了需要想方法佔用更多使用者上網時間之外，另一條路或是協助使用者更有效地利用上網的時間。
2016 年初的調查顯示，人們每天平均在手機和在電腦上所花的時間差不多。 隨著手機 App 的發展，人們能透過手機完成的事也越來越多。可以預見到的是人們每天花在手機上的時間佔比會再增加。 人們在手機上花費最多時間的是聊天 App 和社交 App。而今天的聊天 / 社交 App 都已內建網頁檢視（webview）功能。 看到「朋友」分享的新聞連結，點選後可以直接瀏覽內容，完全不需要另外再開啟瀏覽器來查看新聞。
由於聊天 App 佔用了使用者多數的時間，依照「使用者在哪，機會就在哪」的原則，聊天機器人，或是對話式界面 (Conversational UI) 成了一個選項。
這波新一代聊天機器人的濫觴，也許可以歸功於 2011 年蘋果推出的 Siri2，雖然 Siri 並不存在於聊天 App 中。 iPhone 的使用者可以透過手機上的 Siri 智能助理應用，做到用口語詢問近期天氣，日程表，查詢地圖，餐廳，設定鬧鐘等行動，從而用更便利的方式取得服務。 雖然今天 Siri 與其他選擇相比，已盡顯不足之處，但當時 Siri 的推出，讓人們感知到與機器直接對話已不再遙不可及，這直接鼓勵了眾家廠商願意加大投入。
近幾年語音辨識，人工智能 AI 的爆發式進展，與此必然有著千絲萬縷的聯繫。
Reddit 曾有用戶提問，如果某個 1950 年代的人突然出現，最難向他解釋的現代事物是什麼？
最多人推的回答是： 「我擁有一部機器，就放在我的口袋裡，我可以用它來存取任何人類已知的知識。
我常用這個來看貓咪的圖片，還有跟陌生人筆戰。」
-- @wastemobile
就像现在手机 App 一样，大部分的 App 其实没什么用，用了只是消耗自己的时间。 但是像 Siri 所能做的，使用者透過聊天機器人簡化日常的瑣事，或是快速得到常見問題的答案。 Slack 平台上已有許多機器人，可以同步 Github Bug，同步代辦事項資訊，提醒今日任務等。這些 Bot 能省下使用者寶貴的線上時間。 我們更多需要的是這類型（用更便利的方式取得服務）的聊天機器人。
在網際網路上，沒人知道你是一隻狗
聊天軟體原本的功用是讓使用者可以和「另一個使用者」或「一群使用者」交流。聊天機器人則是取代「另一個使用者」的角色3，讓使用者和「聊天機器人」一對一交流，或是讓聊天機器人加入群組，和「一群使用者」交流。
一對一
群組（多對多）
除了「一對一」，「群組」（多對多）之外，依據聊天機器人的應對方式，還可以分為通知型（Notify），模式型（Pattern Matching），對話型（Context Aware）等幾種聊天機器人4。
通知型機器人會根據使用者「訂閱」的資訊，傳訊息通知使用者。例如明日天氣預報機器人可以定時告訴使用者明天氣象狀況與溫度，出門需不須要帶傘。 使用者一般不需要輸入任何訊息與機器人對話。
模式型機器人會比對使用者送出的訊息，如果符合機器人設定好的一些模式，就做出對應的回應。
例如使用者可以透過天氣機器人，輸入 "weather in Taipei" 查詢當前台北的天氣。
基本的模式型機器人沒有對話的概念，並不會根據使用者過去的應對而改變回應的結果。 例如使用天氣機器人時每次都需要指定想查詢的地點，或是透過預先設定地點 / 偏好溫度格式來簡化使用方式。
除了傳統使用正則表達式 (Regex) 來比對模式外，Facebook Messenger bot 則提供更接近口語的自然語言處理（Nature language Processing）模式比對。 多數聊天機器人框架目前都仍偏向模式型。
對話型機器人會從與使用者過去的對話中提取使用者的偏好，並運用到後續的對話中。
例如 Google Assistant 會根據你之前的查詢，去進一步找到你想听的音樂。
能理解與使用者過去的對話，也是對話型人工智能的重要特徵。當使用者在聊天軟體中新加入一個 bot 服務，使用者與這個服務的對話都與和一般服務員的交談無異，那麼服務的後面是不是真人還重要嗎？
有人會問，Facebook/Twitter 不就可以記錄大小事了嗎？如果會這麼回答，那就實在太天真了😏 。FB 上也許包含了自己覺得值得分享的事，但生活中還有諸多事情值得記錄，而不適合與大眾分享。 擁有自己的一份完整數位化生活記錄，是我今年的個人目標之一。要達成這個目標，需要藉助一些自動化紀錄工具，好讓整個過程變得自然而不困難。
我的照片並不算多，但若有出遊的月份通常照片會暴增。所以我的基本備份規則是依年份，並以雙月份命名資料夾，若是當月有重大活動則直接在檔名中標注。
例如 2016 年的照片資料夾裡會有2016_1011，或是2016_06倫敦這樣的命名。
在整理照片的時候，每當遇到特別喜歡的，我會另存到 Dropbox 中的一個依年份歸檔的資料夾，例如 2017 年的精彩照片我會另存到 dropbox/spot/2017資料夾中，這樣隨時可以找出來欣賞。
今年將每天預定的步數由 3000 步提高到4000步，略高於平常的活動數字，
每天要達成這個目標的話，需要特意地多走幾步路。
update (9/1): 後來不再帶小米手環 2，覺得記錄睡眠與步數意義不大。同時為了降低多走路所需要的意志力，把每日步數改成更容易達成的 300 步，只要開始走，通常都會超過需要的步數。
延續用 IFTTT 做自動生活紀錄這篇的思路，我把看過的書籍、電影，喜歡的 Youtube 影片，貼過的文章，每日完成的事項都記錄到 Google Calendar 中，以方便之後回顧。
對於書籍與電影，我使用 RSS + IFTTT + Google Calendar 來自動紀錄。 當我在 Anobii 或豆瓣上修改狀態，Anobii 或豆瓣的 RSS 也跟著改變，這時 IFTTT 會將 RSS 中的新事項紀錄到 Google Calendar 上。 對於 Youtube 上 like 的影片，Facebook 或 Twitter 上新貼的文章，也會透過 IFTTT 紀錄到 Google Calendar 上。
透過 RSS 轉 IFTTT 紀錄
直接透過 IFTTT 紀錄
這部份是自動紀錄的核心。使用 Todoist + IFTTT + Google Calendar 即可達成。 我在 Google Calendar 上使用一個單獨的日曆 (成功日記) 來紀錄每日完成的事項。
If task completed in Todoist, Then log into Google Calendar
為了更方便地蒐集待辦事項，我參考這份影片 https://youtu.be/V7Dk7pzjJmM?t=11m30s 來將 Todoist#Inbox 設定為 Email 聯絡人，這樣處理 Email 的過程中也能快速地新增待辦事項。
因為我唯一的收件夾是 Todoist，所以若看到值得閱讀 (紀錄) 的網頁，桌面上我使用自己開發的瀏覽器 Web Extension，搭配 IFTTT 去紀錄網頁到 Todoist，或加個短評分享到 Facebook 或 Twitter。 在手機上就直接使用 Todoist 和 Facebook 等 App 達到一樣的效果。
If new task then create new Todoist item, If share then share to Facebook and Twitter.
除了偶而瀏覽 Facebook 或 Twitter 上充滿同溫層的快餐短文，我也使用 Feedly 訂閱一些自己挑選過的網站。 然而有些網站並未提供 RSS 訂閱，手機上我會使用Web Alert來取得網頁更新提醒。 搭配 Todoist 稍候閱讀列表，我可以不在看到文章連結當下急著消費，而是在有空閒的時候才閱讀這些文章。
透過翻看 Todoist 或 Google Calendar，我可以輕易地將過去一週達成的事項整理出來，再送 PR 到 Github 上。 也可以說這塊目前只能算半自動化地列出過去事項列表，可以再繼續改進。
目前已使用 Github 來放我的個人網站與部落格，透過與 Travis CI 整合，我所修改的任何內容，在幾分鐘之內都會自動部署到網站上。
如何做可參考 Hello Hexo (個人網站自動化部署) 和 Automatically deploy new commit to github pages via Travis CI
Auto website deploy flow
一些可以直接運作在瀏覽器的專案 (如 BlocklyDuino 和 Saihubot)，我會直接將 gh-pages 設為預設分支，所有改動直接 push 到這分支中。 這樣一有改動即可在網頁上看到更新成果。
今年隨著 Firefox OS 退場，工作內容有了不小的改變。年初時嘗試了一些不同的方向，也修了一些 Firefox 界面 bug，後半年則主要專注於開發者工具改進這塊。 以下是我今年主要參與或建立的開源專案。
It's playable online
https://gasolin.github.io/aframe-href-component/
After migrated my blog from blogger to github, at the end of 2016, I've migrated my blog and home page to host on github as well.
Both sites are fully stored in github and deployed automatically via Travis CI.
Before apply auto deploy method, the usual workflow to hosting web page on github are 2 steps:
First, user commit changes to local git master branch.
Then, user run the build process to generate contents for deploy.
Then, use git commands to push generated contents to github gh-pages branch
At this time, our source code is still stored in local machine, we have to push the changes to github as well for safety.
Of course the manual works can be improved. After apply auto deploy method, all I have to do is commit to github and let the web services do the rest.
Here's what my current workflow looks like
The dot line process are automatically done for you.
After auto deploy, I am able to run test, do lint check, and build source with a few changes on .travis.yml(The travis configuration file),
the only thing I need to care about is the content.
The bonus is github now become my online web page editor. Web page is auto updated after each commit.
All these automation only needs one time setup, which is a pretty good deal to save foreseeable deploy time. For security concern, my current workflow add the github token into Travis environment variables(to let Travis able to commit gh-pages), and make the actual git push quiet to prevent showing the token on Travis.
To not reinvent wheels myself, I distilled the auto deploy scripts and instructions into ghpage-auto-deploy project. you can use it to deploy your next web page as well.
Fork the ghpage-auto-deploy project to get start, feel free to add new issues to send suggestions or pull request to me if you want to imporove it.
Not like previous article about general workflow on Mozilla Gecko project, This article is like a cookbook that I encountered during debugging Firefox devtools (mostly around inspector and network monitor).
According to MDN, first of all you need to go through Developer > Toggle Tools > Toolbox Options > Advance settings to check 2 options:
Then use Shift+Option+Command+i on Mac or Ctrl+Shift+i on linux to open the remote debugger.
Once I'm developing toolbar web extensions or any popup windows, I feel very appreciate this feature.
https://developer.mozilla.org/zh-TW/Add-ons/WebExtensions/Debugging#Disable_autohide
Add these settings in mozconfig file
# Enable debug version of the pre-build binary artifact
export MOZ_DEBUG="1"
# Automatically download and use compiled C++ components:
ac_add_options --enable-artifact-builds
# Write build artifacts to:
mk_add_options MOZ_OBJDIR=./objdir-frontend-debug-artifact
If you just develop frontend UI(JS, CSS, XUL, HTML), the artifact build prebuild the C++ and the static part of the code so you can download and link it automatically during mach build, it saves you tremendous build time and helps you move quicker.
You can use the command
./mach build faster
to further boost the build time.
Add these settings in mozconfig file
ac_add_options --enable-debug-js-modules
It will turn on React and other JS debugging message. Note that will influence performance while running.
You may not know its possible to open a website with opened devtool with the command:
./mach run --devtools --jsdebugger www.yahoo.com.tw
Mozilla Try Server let you run tests on all supported platforms. You can pick which test set and which platform to run by providing command arguments. Here's what I used for test devtools related bugs on Windows, Mac, and Linux.
try: -b do -p linux64,macosx64,win64 -u mochitest-dt,mochitest-e10s-devtools-chrome -t none --artifact
Add --artifact argument will both save total running time and computing resources.
Many modern editor ex sublime, visual studio code provide great support of global search. Ctrl + Shift + f is your good friend.
DXR and searchfox is a code search and navigation tool for large projects like Mozilla-center. It supports full-text and regex searches as well as structural queries.
forEach is a good way to loop array, but is not compatible with the generator(because the need of implement iterator interface), so if you use yield inside of forEach loop, it will not behave as you expect.
The better choice is use for..of loop or map instead.
The powerful => arrow syntax sugar is not just for replacing bind(this), it gives the developer a clear way to write more compact code.
For example
promise.then(function(a , b) {
return a + b;
});
can be written as
promise.then((a, b) => a + b);
You may think its pretty hard to setup everything on windows. But after I found chocolatey the process is deadly simple. Chocolatey is the package manager for windows. Like homebrew for Mac, you can use Chocolatey to install all react-native dependencies and let chocolatey setup system PATH for you automatically.
Sounds good? let's install react-native on windows.
The very first step is install chocolatey via [following its instuction]https://chocolatey.org/install).
Then install git, node, android-sdk
C:\> choco install git nvm android-sdk
And you can download the latest node version via command
nvm install 8.4.0
Note that Java Development Kit (JDK) is also installed when you install android-sdk, neat!
As I mentioned earlier, the SYSTEM PATH are automatically set so you can run android command on cmd or the alternative to open up the SDK manager after install is complete!
Once you can open android SDK manager, check Getting Started section in React Native doc to find out which android SDK versions to download.
You can also check Chocolatey's package list to install a editor. Since its windows, I'll give Visual Studio Code a try:
c:\> choco install visualstudiocode
Now you are on the fast track to install react-native, its all node related instructions now.
c:\> npm install -g create-react-native-app
c:\> create-react-native-app sample
c:\> cd sample
c:\sample> npm start
Happy coding!