Skip to main content

· 6 min read

今年比特幣 (Bitcoin)1與以太幣 (Ether)2價格紛紛到達新高。主因除了隨著更多支援加密貨幣 (Crypto Currency)- 當地貨幣的兌換 / 代購 / 交易所開張，取得虛擬貨幣 / 代幣的方式更加多元外，首次公開發行加密代幣 (ICO, Initial Coin/Crypto Token Offering)3 這種創新的投資 / 募資方式愈加熱絡，也讓一些個人與機構意識到虛擬貨幣作為貨幣或貨品的投資價值。

這些虛擬幣背後所使用的技術叫做區塊鏈 (blockchain)4，可以被用來解決各種「交易」相關的問題。

網際網路交換訊息，區塊鏈交換價值​

網際網路出現之前，不同的系統之間沒辦法用標準的協定來互相通訊和傳遞訊息。網際網路讓不同連網方式（撥接、光纖、4G）、不同設備間可以互相連接，滿足人與人之間對訊息的即時需求。人們的生活在網際網路發展起來的這 20 多年間，也因此產生了極大地改變。

2001 年時，Napter5開啟了透過點對點 (P2P) 網路交換 MP3 的風潮，這是第一次大眾意識到點對點網路可以被廣泛地應用在資訊交換上。隨後 BitTorrent (BT)6接過大旗，透過 BitTorrent 與配合的磁力連結 (Magnet Link)7，2009 年時已占據了近 50% 整體網際網路流量。

區塊鏈基於網際網路，點對點 (P2P) 網路，和以密碼學為基礎的共識紀錄機制，提供了一個可以不被地域限制，快速交換價值的方式，降低交易的不確定性 (uncertainty) 與風險。 網際網路和點對點網路解決了資訊交換的問題，而區塊鏈則進一步想解決價值交換與交易信任的問題。

graph TD 公開加密貨幣 --- 區塊鏈 公開加密貨幣 --- 激勵機制 區塊鏈 --- P2P 區塊鏈 --- 共識機制 共識機制 --- 密碼學 P2P --- 網際網路

區塊鏈不僅只是加密貨幣，透過區塊鏈，我們可以和各地的人做生意，用很低的手續費在不同國家收款與匯款 (都在同一個公開區塊鏈上)，而且幾分鐘內就可到帳；交易的過程中，所有的合約都由網路上的節點自動執行 (智能合約 Smart Contract)，可以避免人為操縱與詐欺等潛在的信任問題，讓人們可以更安心地交易；未來還可以透過瀏覽器使用智能合約，就像使用網站一樣容易 (分散式應用 DAPP)。

暢想未來的商業模型，可能是顧客透過易用的手機或網頁 DAPP 取得商家提供的資訊，經由可信任的智能合約，讓彼此能快速地交換價值與服務。

聯盟鏈​

區塊鏈根據型態，大致分為公有鏈，私有鏈、聯盟鏈幾種。公有鏈就是大眾比較常聽到的各種加密代幣。可以在 https://coinmarketcap.com/ 查看大部分的加密貨幣。除了公有鏈之外，多家銀行、支付機構、甚至 IBM、微軟等科技公司也相繼投入資源，參與區塊鏈研究與發展。多數機構採用的是聯盟鏈的形式。Apache 基金會下的 Hyper Ledger9計畫是目前發展較好的聯盟鏈。

聯盟鏈與公有鏈有許多不同點。其一是對資料一致性有更高地要求。其二因為相對來說聯盟鏈的節點比較可控，也不需要加入代幣激勵機制或浪費能源在比拚算力的 Prove-of-WOrk (PoW) 共識機制上。其三是需要對資源與智能合約存取設置權限，以符合企業內部的需求。

區塊鏈用到的加密技術​

可以在 Youtube 上查看 Blockchain 101 - A Visual Demo影片14，或前往對應的Block Chain Demo 網站15自行動手試驗。

參考資料​

· 5 min read

2009 年推出的 Node.js1是讓 Javascript 成為一門廣為通用的程式語言的關鍵。Node.js 將原專為 Chrome2瀏覽器開發的 V8 引擎抽離出瀏覽器，讓使用者在一般命令行環境中就可以執行 Javascript。

開發者的需求​

要完成一個全功能的現代網站，開發者除了需要至少理解某門語言相關的網站後端技術之外，Javascript 也是身在 Web 開發領域的開發者至少必須 "略懂" 的腳本程式語言 (scripting language)。

既然不管精通哪門程式語言的開發者，想在瀏覽器上發揮，都仍需要某種程度地熟悉 Javascript 程式語言。那麼，如果在瀏覽器之外，也可以拿 Javascript 來做事情不是很好嗎？

Node.js​

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.js 推出當時，除了擁有一個比其他相似競爭者快上幾倍的引擎之外，在隔年整合的 NPM (Node Package Manager)4套件管理工具，讓 Javascript 開發者擁有了更有效率地分享與重用函式庫的方式。到了今天，下載大多數使用 Javascript 語言撰寫的專案，只要執行npm install(或衍生的yarn install)，NPM 就能自行安裝與解決套件之間的依賴關係。NPM 實是今日 Node.js 之所以能形成圍繞著 Javascript 語言建立起龐大生態系的不可或缺的功臣。

Node.js 衍生發展​

隨著 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 的開發。

graph LR Javascript --> Browser Javascript --> Node Node --> Webframework[Web Framework] Node --> Build[Build tools] Build --> ReactNative[Mobile App] Node --> Electron[Desktop App] Electron --> Editor[Editor] Browser --> Electron

參考資料​

· 5 min read

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.😎

What Firefox Devtools team did last year​

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!🚅

graph LR clone[git clone] --> install[yarn install] install --> start[yarn start]

What 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.🚀

graph LR Firefox -- debugging --> netmonitor(Netmonitor.html) netmonitor -- mozilla-rdp --> Firefox Chrome -- debugging --> netmonitor Edge -- debugging --> netmonitor Safari -- debugging --> netmonitor

We are going to make more Devtools easy to debug and can be used for cross-browser debugging.

Current Status​

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:

graph LR debugger(Debugger.html) --> Nightly perf(Perf.html) --> Nightly webconsole(WebConsole.html) --> Nightly standalone[Github] --> debugger standalone --> perf refactor[mozilla-central] --> webconsole inspector(Inspector.html) --> Release netmonitor(Netmonitor.html) --> Release refactor --> inspector refactor --> netmonitor

What we have done in Netmonitor.html​

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.🤗

Imgur Picture: How current Netmonitor looks like

What we plan to do next​

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:

  • We’ve triaged all new Netmonitor bugs and identify good-first-bugs
  • We have Prove-Of-Concept branches to prove we can run netmonitor on the browser tab
  • We decide to keep using 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.
  • We stop Netmonitor.html phase I work immediately (convert XUL to HTML, MVP 100% completed)
  • We'll start Netmonitor.html phase II (To run Netmonitor on a browser tab so that we can debug Netmonitor with any browser's devtool)
    • All phase II bugs are filed in the Meta-bug

What could expect in the future​

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!😮

graph LR Firefox -- debugging --> netmonitor(Netmonitor.html) netmonitor -- mozilla-rdp --> Firefox Chrome -- debugging --> netmonitor netmonitor -- chrome-rdp --> Chrome netmonitor -- chrome-rdp --> Node[Node.js] Safari -- debugging --> netmonitor Edge -- debugging --> netmonitor

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!😇

graph LR debugger(Debugger.html) --> Firefox debugger --> browsertab[Browser Tab] debugger --> Editor debugger --> other[Other Browser]

Run with different remote debugging protocols is the next step once we make Netmonitor.html run on the browser tab.

· 3 min read

與其他人合作🤝使用 git 版本控制系統時，為了讓最後合併（Merge）的 commit 好看，常常會需要調整自己的 commit。

同時修改一個 commit​

剛開始工作時一次只修改一個 commit，最常用到的命令是：

修改 commit 訊息 (message)​

git commit --amend

在 commit 後加入--amend(修正) 參數，可以修改最後一個 commit 的訊息。

將後續修改合併成一個 commit​

git rebase -i HEAD~2

將要合併的 commit 從pick改成s(squish) 後儲存，修改 commit 訊息後，可以得到剩下的一個 commit。

同時修改多個 commit​

到後來為了讓審查 (Review) 更容易，漸漸開始嘗試在遇到某些較複雜的問題時，在同一個 Branch 堆疊多個 commit 的開發方式。

假設手上有 3 個疊在一起的 commit (commit 1,commit 2,commit 3. commit 3 是最新的 commit), 這時在修改的過程中會遇到的主要問題， 就是現在的修改與最新的 commit (commit 3) 無關，但與最前面的 commit (commit 1) 相關。 這時若想要將現在的修改與之前的 commit 1 合併，原本常使用的git rebase就不是那麼好用了。

為前面 commit 的打補釘​

要為前面 commit 的打補釘，可以使用命令

git commit --fixup <commit>

<commmit>代表之前 commit (commit 1) 的 hash。輸入後最新的 commit 中會出現fixup <commit 1>的註記。

合併所有的補釘​

當一系列修改完成後，只要使用命令

git rebase -i --autosquash

儲存後可以得到干淨的 commit 1,2,3🤘

修改任何之前的 commit 訊息​

如果只想修改之前的 commit 訊息，可以用命令

git rebase -i HEAD~3

將pick改成reword，儲存後就可以修改訊息。

參考資料​

· 3 min read

Imgur

在去年改用 Hexo1架部落格後，由於用 Markdown 寫起來更方便了，又有 Mermaid2語法支援可以快速畫出一些流程圖，因此多寫了幾篇。

在此期間，也陸續為這個部落格加了一些小功能。主要有

  • 將 Hexo 預設的 Markdown 引擎換成 markdown-it，以支援顏文字 (emoji)9 🎉
  • 加入類似 Medium 的文章預計閱讀時間 (每篇文章標題下方顯示 x min. read) ⏳
  • 支援腳注 (footnote)🔗 ，如下方的參考資料

為了折騰這些功能花了些時間，不知道這樣的投資能不能攤平到下個十年 :p

🔸 以下是在改進部落格的過程中發現的一些小知識:

將 Hexo 預設的 Markdown 引擎換成 markdown-it 🎉 ​

為了要支援 emoji，在網上找到的做法是改用hexo-renderer-markdown-it3引擎並同時安裝markdown-it-emoji4 最後必要的是在_config.yml 裡加入相應的markdown設定5

加入類似 Medium 的文章預計閱讀時間 ⏳ ​

原本我裝的是 hexo-reading-time6，整合好後一看，所有中文文章的閱讀時長都短得可以，讓我懷疑它根本沒有支援中文字數計算。後來找一找，才拿可支援中文字數計算的hexo-wordcount7來替換掉。隨後又丟了個 PR8過去來調整預設的閱讀時長，最終才接近想要的效果。

參考資料 📓 ​