用 sublime text 一直有個小問題，就是我有個檔案是 .mk 副檔名，不過 Sublime 一直都沒辦法正確辨識他的 syntax 該用 Makefile，所以每次我都要手動切換。爬了爬文發現在有篇 Stack Overflow 下面的 comment 寫出了一個很簡單的解法。
首先打開你要設定的檔案，比如說我的例子是 common.mk，打開後先選擇你要指定的 syntax highlight，這個例子就是 Makefile Syntax。
指定完成後，到 Preferences-> Settings - More -> Syntax Specific - User，他會幫你建立一個新檔案在正確的位置還有正確的檔名，只要用以下的格式設定就可以增加新的副檔名了。
1 2 3 | {
"extensions": [ "mk" ]
}
|
重起 Sublime Text 之後就會用正確的 syntax highlight 顯示檔案囉。
自從在 Mozilla 工作一陣子後開始會有很多 bugzilla 來的 request，像是 review, needinfo 或是 feedback feedback request 之類的，之前我一直用 bugzilla 上面的 My Dashboard 來管理這件事情，不過後來我發現除了 request 以外，Dashboard 並不能幫我管理其他的工作項目，所以我就開始尋找我的 task 管理之路⋯。
今天去 g0v 真的是蠻有趣的，原本要幫 Kuang-Che Liu 弄鄉民關心你的聯絡人，不過因為他早上沒來的關係所以我就開始找看看有沒有其他有趣的 project 可以作。聽完大家非常大一輪的介紹後，我決定去找立委投票指南的朋友們看看那邊有沒有什麼需要幫忙的。
然後今天就幫忙弄了兩個小東西：
這兩個是有相關的，因為陽光法案李立委的財產申報資料裡面是有含土地資訊的，所以可以利用這個資訊進一步查詢到公告地價現值。
第一個爬完的資料已經放到 github 上面了，你可以看到一堆立法委員的公開財產資料（笑）
接下來就是可以利用 PDF 裡面的資料進一步了解立委所持有的土地的目前公告現值。這個功能目前還沒 merge，不過 pull request 在這如果你有興趣的話。首先你要有 nodejs，接下來用 npm 把相依套件裝一裝～
1 | npm i
|
好了，接下來就可以玩了，最近割闌尾的立委很夯，我就隨便挑一個來試試 XDD，我從他的公開財產資料表裡面得到一筆資訊：『臺北市信義區信義段三小段0018-0000』，而指令就是這樣下：
1 | node lq 信義區,信義段三小段,0018-0000 |
答案就會出來了：公告現值 (元/平方公尺): 848,000，因為財產資料裡面提到面積為 891 平方公尺，權力範圍為 2287/100000，依照這些資訊我們可以算出該資產目前的現值是多少：
1 | 848000 * 2287/100000 * 891 = 17279840.16 |
而根據該筆受贈的土地原本價格約為 900 餘萬，所以這筆土地幾乎漲了兩倍，算是很不錯的投資呢～
昨天踩到了一個讓人很沮喪的 bug。
一般來說在 Makefile 我們可以用 $(shell pwd) 拿到像這樣 style 的路徑
1 2 | $(shell pwd) /home/yurenju/gaia |
如果要在 Windows 的 MinGW 底下用的話，可以用大寫 W 參數可以拿到這樣 style 的路徑：
1 2 | $(shell pwd -W) C:/home/yurenju/gaia |
然後昨天踩到的雷是，如果你用 -include 引入了另外一個 Makefile 後（比如說 common.mk），你在 common.mk 裡面執行 $(shell pwd -W) 竟然會出錯！而且同樣的用法如果沒有用 -include 的時候是完全會動的。
解法呢？感謝 PostgreSQL 的先烈告訴我們了答案，用 sh -c 去執行竟然就好了
1 | $(shell sh -c "pwd -W") |
見鬼了，這哪招啊...
上週跟同事討論到 Facebook 的重導很慢（然後他也不想讓 Facebook 經手他看的內容），上週末的時候寫了一個簡單的 Firefox Addon，也跟大家分享一下 Firefox Addon 要怎麼開始。
(這篇部分的資訊我也寫到 MDN 上面去了。）
Gaia Build System 基本上是由 make, node.js script 跟 xpcshell script 所構成的（以前還有 Python Script 不過已經被消滅了）。前兩個大家都清楚，所以只介紹一下 xpcshell。
xpcshell 是一個放在 xulrunner 裡面的一個執行環境，它的用處跟 node.js 一樣，可以直接執行 javascript，所以可以拿它來處理一些 build system 要做的一些工作，另外 gaia 的 build system 也有使用 commonjs 的環境，所以基本上使用 xpcshell 跟用 node.js 寫東西差不多，只是可以用的 library 跟 API 不同。
CSS3 的 Selector 其實多了不少功能，以前需要用 javascript 才可以做出來的功能現在有時候只要用 CSS3 selector 就可以了，例如說：你有個 checkbox，如果按下這個 checkbox 後下面的 panel 才要顯示。一般來說我們可以用 javascript 對這個 panel 新增 class 來達到這個效果，不過用 CSS3 就又更簡單了。
你的 HTML 大概會長這樣：
1 2 3 4 5 | <input id="toggle" type="checkbox"> <label for="toggle">Show Panel</label> <div id="panel"> Panel </div> |
而 CSS 只要這樣寫就可以控制 panel 顯示/隱藏了。下面 CSS 的意思是如果沒有 (:not) 選取 (:checked) 的時候，跟他同層 (~) 的 #panel 元素就隱藏起來。如果是緊鄰的元素也可以用 + 取代 ~。
1 2 3 | #toggle:not(:checked) ~ #panel { display: none; } |
你也可以在 jsFiddle 上面玩玩（點下面的 result）。
假設今天你有這個網址：
1 | https://twitter.com/yurenju/status/402368329135816704 |
你要怎麼取得 https://twitter.com 呢？一般來說你可以用 regex 來達成：
1 2 3 4 5 6 7 8 | function getOrigin(url) { if (!url) { return null; } else { var matched = url.match(/^([a-zA-Z]+:\/\/.[^/]+).*/); return (matched.length > 1) ? matched[1] : null; } } |
不過如果你使用 Firefox 最新的 Nightly 就可以用 URL() 來達到這件事情（Chrome 似乎可以用 webkitURL）。
1 2 | var url = new URL(YOUR_URL); console.log(url.origin); |
有興趣可以到 jsFiddle 上面用 Nightly 玩玩。
Javascript 裡面有個很實用的功能 forEach，跟其他語言的 for-each 一樣，你可以不需要 index 的狀況把陣列裡面的 object 一個個的丟出來，用法如下：
1 2 3 4 | var arr = [1, 2, 3, 4, 5, 6]; arr.forEach(function(num) { // do something... }); |
但是有個小問題，當你用 document.getElementsByTagName() 或是 document.querySelectorAll() 的時候會回傳 HTMLCollection 或是 NodeList因為不是 Array 的關係所以無法使用 forEach 操作。
但我已經回不去用 index 做 loop 的方式了！MDN 上面很貼心地跟你說要如何透過 Array 的 prototype 操作 NodeList 與 HTMLCollection：
1 2 3 4 | var elements = document.getElementsByTagName('a'); Array.prototype.forEach.call(elements, function(a) { msg.innerHTML += a.innerHTML + '<br>'; }); |
你也可以直接在 jsFiddle 上面跑跑看。