Set default syntax for different file types in sublime text

用 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 顯示檔案囉。

common.mk

Bugzilla requests to trello

自從在 Mozilla 工作一陣子後開始會有很多 bugzilla 來的 request,像是 review, needinfo 或是 feedback feedback request 之類的,之前我一直用 bugzilla 上面的 My Dashboard 來管理這件事情,不過後來我發現除了 request 以外,Dashboard 並不能幫我管理其他的工作項目,所以我就開始尋找我的 task 管理之路⋯。

g0v Hackath8n

g0v Hackath8n

今天去 g0v 真的是蠻有趣的,原本要幫 Kuang-Che Liu 弄鄉民關心你的聯絡人,不過因為他早上沒來的關係所以我就開始找看看有沒有其他有趣的 project 可以作。聽完大家非常大一輪的介紹後,我決定去找立委投票指南的朋友們看看那邊有沒有什麼需要幫忙的。

然後今天就幫忙弄了兩個小東西:

  1. 陽光法案主題網把所有立委的財產申報資料全部都爬下來
  2. 指令界面版本的 臺北市 地價公告現值查詢

這兩個是有相關的,因為陽光法案李立委的財產申報資料裡面是有含土地資訊的,所以可以利用這個資訊進一步查詢到公告地價現值。

第一個爬完的資料已經放到 github 上面了,你可以看到一堆立法委員的公開財產資料(笑)

enter image description here

接下來就是可以利用 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 of Makefile in MinGW

昨天踩到了一個讓人很沮喪的 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")

見鬼了,這哪招啊...

Gaia Build System

(這篇部分的資訊我也寫到 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 不同。

2013 Review

2013 快要結束了,在最後一個月回顧一下今年做過的事情。

旅行

今年是非常瘋狂的一年,加入了 Mozilla 的緣故今年有非常多機會可以到國外出差,而今年也自己出去了兩個國家旅行,所以光是今年就造訪了七個國家,出差的有德國柏林西班牙馬德里、中國上海、挪威奧斯陸美國加州

自己則去了泰國曼谷跟日本的京都

國內旅遊今年比較少,說得出有印象的是去台中后里、新社騎腳踏車跟賞花還有到宜蘭釣小管,年初的時候還有去平溪走走。

CSS3 selector: not + checked + preceded

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)。

Get origin from an URL

假設今天你有這個網址:

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 玩玩。

Array.forEach for NodeList

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 上面跑跑看。