只放拖鞋的鞋櫃(已移至 julianchu.net)

前一陣子發現自己的硬碟的聲音有點怪怪的，擔心出了問題而在緊急的時刻壞掉，開始著手換新硬碟的事情。雖然平常有備份的習慣，仍然把所有的生活照片都放在筆電裡頭，畢竟照片要是弄丟可是再多錢也買不回來，帶在身邊總是比較安心。身邊有阿宅勸敗 SSD，著實讓我心動了一下，經常編譯 image 的人都知道，花上一兩個小時編譯的時間有多麼煩人。不過拿 SSD 儲存照片感覺有點浪費

耳聞 SSD 有壽命問題，也有人說硬碟並不見得比較長壽。無論如何，如果我要用 SSD 必定是為了工作，也一定會用很粗暴的方式對待。看了 x220 的 [手冊] 才注意到有 mSATA 這個東西。

無論是選用 SSD 或是一般的 HDD (硬碟)，都還有另外一個 mSATA，因此我選用 HDD + mSATA，它的優點是

• 我仍然有足夠容量的 HDD 放我的照片
• 工作中的程式碼就丟到 mSATA 上面
• 系統放在 HDD 上頭，不必擔心 mSATA 掛掉，也因為吃重的工作都丟給 mSATA，HDD 的壽命應該要比之前還要久一點

把最繁重的讀寫隔離在獨立的裝置上，對我個人而言，這大概是最好的解決方案了。在 Facebook 的 [Thinkpad 正體中文社團] 詢問鄉親的意見之後，我買了 Plextor 64M5M，現在的 Android BSP 一份大概是 20+G，64G 已經足夠我用好一陣子。(等到玩壞了，128G 應該也降價了XD)，再買個 WD 500G 的硬碟，兩個加起來 3990，還算能接受。

「mSATA 爛掉，程式碼找不回來怎麼辦？」身為一個阿宅，當然要隨時用 git 管理，隨時把程式碼備份在遠端呀！

底下稍微紀錄一下這兩天做的事情，給未來的我當作筆記 (兩天後的我一定會忘光光怎麼做=.=)

Install mSATA

mSATA 也不過兩片 SD-Card 大小，拆下幾顆螺絲之後，把鍵盤跟支撐手腕的蓋子打開，撥開天線之後就可以看到插槽，整個安裝非常簡單，Youtube 上面有許多教學。只是看到天線用膠帶很隨意地黏在那裡，感覺有點....(聳肩)

藍色與白色天線底下的就是放置 mSATA 的空間

裝完之後用 gparted 分割一下就好，最前端留了 1MB 之後我用 ext4 當作 filesystem。接著在 fstab 讓它 mount 起來即可

/dev/sdb1 /mnt/msata     auto    defaults,noatime,nodiratime,discard,errors=remount-ro  0       0

Change HDD

HDD 比較費工，由於 x220 有 7mm 的限制，我選的是 WD 藍標 500G 的硬碟，硬體的更換 x220 已經相當簡單了，也是 Youtube 看一下，隨便拆幾顆螺絲就搞定。軟體部份，我把 home 整個 tar 起來放到外接硬碟，裝完系統之後再解開放回(恰好我的 uid 都是 1000 :P)。

備份

# 先把 X window 關掉吧，然後該 umount 的東西先卸載，沒用的東西先清掉
$ cd /media/external_storage
$ rm -rf /home/myid/.cache
$ sudo tar cf myid.tar /home/myid

接著匯出安裝過的 packages list

$ sudo dpkg --get-selections > dpkg_selections

那 etc 目錄的東西也可以備份一下

安裝系統

安裝 Debian 很輕鬆，抓下 netinst 的 CD ISO 檔之後，直接 dd 塞到 usb stick，就可以用 usb 開機安裝了。x220 有兩個 USB2.0 以及一個 USB3.0 的 port，如果 usb 碟插在 3.0 的 Port 會在接下來的安裝過程找不到檔案，不知詳細原因為何，換到 USB 2.0 的 port 就沒問題了

因為我習慣對系統加密，安裝的時候記得要進 Advanced Options/Expert install。一直到磁碟分割的階段，我用 GPT 對 HDD 分出四個 Partition

1. /boot - 不加密
2. / - 加密
3. /swap - 加密
4. /home - 加密

第一個 Partition 是 boot，當然不能加密，否則就不能開機了。建立完 boot 之後，依序再建立三個 partition，但是在各個 partition 的細項設定，把「用途」設定為「要進行加密的 Physical Volume」



接著再選擇上方的「設定已加密的 Volume」來真正為該 partition 加密。系統會先清光該 Partition 上頭的東西，因為這是新硬碟沒必要浪費時間，所以清空的步驟可以取消跳過。


此時會多出三個已加密的 Partition，依序再為他們設定 mount point 與 filesystem 即可



安裝的時候可以不用安裝 desktop 的東西，基本系統安裝完成之後會把之前的 package 全部裝回來

回復備份

盡可能在 console 底下下指令，把之前的 packages 裝回來

# dpkg --set-selections < dpkg_selections
# apt-get update
# apt-get dselect-upgrade

重開機之後如果沒問題，關掉 X 回到 console 繼續把 home 給倒回來

# rm -rf /home/myid
# cd /home
# tar xf /media/external_storage/myid.tar

其他

其他一些眉眉角角的東西就順便紀錄一下吧

救回 Touchpad 中鍵

按住中鍵並且用 Trackpoint scroll，把 /etc/X11/xorg.conf 的 Synaptics 的區塊清掉 (對，我不想用它) 並加入以下這段

Section "InputClass"
 Identifier "Trackpoint Wheel Emulation"
 MatchProduct "TPPS/2 IBM TrackPoint"
 MatchDevicePath "/dev/input/event*"
 Option "EmulateWheel" "true"
 Option "EmulateWheelButton" "2"
 Option "Emulate3Buttons" "false"
 Option "XAxisMapping" "6 7"
EndSection

盡可能少用 swap

記憶體目前還滿夠用，叫系統沒事不要亂寫到 swap，在 /etc/sysctl.conf 加入

vm.swappiness=0

把 tmp 掛在記憶體上面

目前用 tmpfs 的方式把 tmp 掛起來，這樣讀寫都是在記憶體上頭。但我還不確定用 tmpfs 或是 ramfs 哪個好。(許多大廠的工程師會在 BSP build script 假設 /tmp 用不完，然後寫入一兩 G 的暫存檔 =.=)

我指定的大小是 200M，不夠的時候再重新 mount /tmp -o remount,size=300m 就好了

tmpfs /tmp tmpfs defaults,size=200m,mode=1777 0 0

安裝舊的 package

需要一些超舊，只存在於 stable 的 package，如 ia32-libs 與 sun-jdk。所以把 stable 加進 sources.list

deb http://debian.nctu.edu.tw/debian/ squeeze main contrib non-free

指定 Firefox 的 Cache Directory 到 mSATA

在 Firefox 的網址列打開 about:config，新增以下兩個 key 與 value

• browser.cache.disk.parent_directory = /mnt/msata/myid/cache
• browser.cache.offline.parent_directory = /mnt/msata/myid/cache


重開 Firefox 再打開 about:cache 就可以看見 cache 目錄放在 mSATA 上面了



前兩天看到了 CSS3 定義了 Flex 的排版方法，玩了一下效果如圖

每個方塊的大小會亂數改變，在一個固定寬度的 container 之中排放，如果超出 container 的寬度就自動換行，還能夠指定相反的 order。

不過這個 layout 的 spec 歷經許多重大改變，詳情可以閱讀 W3C Flexbox 或是 MDN 的 Using CSS flexible，話雖如此，現在的 Firefox 仍不支援 flexbox 的換行，上面那張圖我是從 chrome 裡面測試的。



一個簡單的 html

然後一個簡單的 css，主要的功能目前還需要註明 vendor (就是 chrome 用的 webkit)

.element {
 min-width: 100px;
 min-height: 100px;
 margin:10px;
 border: 5px;
 border-style:solid;

 display:-webkit-box;
 display:box;
 -moz-box-pack:center;
 -moz-box-align:center;
 -webkit-box-pack:center;
 -webkit-box-align:center;
}

#container {
 width: 50%;
 border: 1px;
 border-style:solid;
 border-color:#AAA;
 display: -webkit-flex;
 display: flex;
 flex-direction: row;
 -webkit-flex-direction: row;
 flex-wrap: wrap;
 -webkit-flex-wrap: wrap-reverse;
}

js code 也只是產生幾個方塊之後亂數改變大小

'use restrict';

function start(container) {
  var nodes,
      MAX = 9;

  function randomColor() {
    // 000000000000 to 000000FFFFFF, it might be 000000FF
    var num = '000000' +
      (((0xFFFFFF) * Math.random()) | 0).toString(16);
    return '#' + num.substring(num.length - 6);
  };

  function randomInt() {
    // -25 ~ 25
    return ((Math.random() * 51) | 0) - 25;
  };

  function Node(i) {
    this.elmnt = document.createElement('div');
    this.elmnt.className = 'element';
    this.elmnt.style.backgroundColor = randomColor();
    this.elmnt.style.borderColor = randomColor();
    this.elmnt.style.webkitOrder = i;
    this.elmnt.textContent = i;
  };

  Node.prototype.adj = function() {
    this.elmnt.style.width = 150 + randomInt();
    this.elmnt.style.height = 150 + randomInt();
    return this;
  };

  function init() {
    var node,
      counter;
    nodes = new Array();
    for (counter = 0; counter < MAX; counter++) {
      node = new Node(counter);
      container.appendChild(node.adj().elmnt);
      nodes.push(node);
    }
  };

  init();
}

html/js/css 上手之後還挺好玩的，只是現階段的 css 排版真痛苦，CSS3 的功能彷彿看得見吃不到，我覺得 fragment 的情況比 Android 還要慘烈。

不知道哪天我會在什麼地方用到這樣的一張圖，就隨手畫了一下，授權是 CC-BY-SA，只要在 Metadata 裡面把作者名字放進去，想要把左下角的圖示拿掉也沒關係。(我自己也覺得在那邊放張圖有點醜)



比較麻煩的是站名擺放的位置，一方面要貼近站點，又要保持間距增加可讀性，還不能讓圖片拉成太大張。反正捷運網站的圖片英文字小到眼睛都快瞎了，我也就懶得把英文站名放上去。(再加上英文站名的排版會瘋掉)

畫得沒有很好看，應該還算堪用，有需要的人就隨意挾去用吧，附 svg 檔，看不慣的鄉親歡迎發揮黑手精神動手改。

• Downalod PNG from Picasa
• Download PNG from Dropbox
• Download SVG from Dropbox

ps. svg 檔我有分幾個 Layer，圖片背景白色，要修改的時候記得 set layer as editable。

update:

• 根據鄉親的建議，我放到了 github 的 taipei-mrt-map
• But 大神學長的這篇值得一看： 手機用的捷運路線圖

昨天 (Dec 28, 2012) 與幾位熱衷 Open Data 的阿宅朋友一同到立法院旁聽。既然現階段的焦點放在開放政府機關的資料，走訪一趟立法院實地感受乃是必然。

政治乃眾人之事，大到國家認同，小到兒童優惠票的衡量基準，無一不與政治有關。以前視政治話題如洪水猛獸，能避則避。長大才知道政治好像氧氣，攸關生死卻沒察覺無時無刻吸著它。

害怕政治議題無非是害怕遇上有理說不清的政治狂熱者，或是跟親朋好友吵起來。我認為反倒要有盡可能清楚的論述讓大家了解議題，才可能降低不理性者的噪音。因為是親朋好友擁有互信的基礎，委婉的討論更有機會取得共識。

離題了，總之，一般市井小民願意參與政治，了解前線現況絕對是好事。做些筆記，希望給想要去立法院旁聽的朋友些許幫助。

如何申請旁聽

旁聽的各種小細節散落在立法院網站各處，link 很有可能隨即失效就不貼了。基本上需要申請才方便行事(現階段，也許會有委員提出動議修改[1])

三人以上即可以團體身份在三天前送交旁聽的申請，送交的名冊會記載身份證字號，屆時進入立法院查驗身份證。立法院的工作人員告知，以團體單位送請會比較好。

一開始因為溝通有誤，我們五個人一起以個人身份進入，感受到不少關心，我想是因為平常太少鄉民會直接殺過去，一次來五人總不免會嚇一跳。會客室所讀到的申請規則，除了訂定三人以上三天前送交的規則，還有人數最高上限是一百人，我印象中並沒有閱讀到一、二人的臨時情況。沒有明定此規則，是否有什麼技術細節的問題我就不知道了。幸虧當時有黃委員的助理幫忙，讓我們順利進入旁聽。

旁聽限制

當然不能去叫囂，畢竟不是去抗議的，而且會有人陪伴你左右隨時提供協助。不過我們只有聽到九點至十點之間的國是論壇，十點之後休息時間由於多數委員正在他室協商，直至四十分左右才開始準備法案的表決。

此時我們就被請出去了

根據工作人員的說法，表決過程都能在網站上找到 (我沒找過，不確定)，既然如此為何不能同時在場旁聽？工作人員沒有明白解釋。僅為走馬看花一下，沒有詳讀規則也不打算爭取些什麼，當然是十分配合地離開。不過注意到現場有幾位記者可以持續紀錄，我想媒體的優勢仍然勝過我們許多，希望他們多珍惜，而我們要多爭取。

筆記

既然走了一趟就隨手記記，並非原音呈現，僅表達接收方所被傳遞的訊息。委員的言詞有務實也有虛幻，言詞中挾著立場與想法，或是把意識形態以中立口吻掩蓋，台下雖然專注力各異，台上的表現還是要足夠專業。政治的精妙細節就是藏其中。

根據工作人員的解說，國是論壇會在 8:40 前抽籤決定，中籤委員每位可以上台發言三分鐘，三分鐘後會斷話請下台，頗有 lightening talk 的 fu。

依據上台的順序，委員的發言主旨是

• 林正二委員：請歸還馬蘭部落土地

• 李桐豪委員：關於馬總統的教育改革作為，高度肯定 12 年國教的方向，但是入學方案十分複雜，可能會造成一些階級的進入障礙，主張入學方案應通過立法院一關。

• 李貴敏委員：少年 Pi 的影片看見了台灣的實力，但是人才應該要來自世界各地，所以行政團隊應該鬆綁外來人才的政策

• 蘇清泉委員：要提昇醫療救護品質。好比提升救護車或公共場所的設備，且針對阻擾或濫用救護車的情事，修法全面加裝記錄器。

• 張慶忠委員：無設限的環境乃毒品氾濫的核心，K 他命的刑責應該比照二級毒品

• 廖國棟委員：交通部應該及期完成花東快速道路

• 詹凱臣委員：社會各界對於景氣看好的比率有大幅提昇，我們應該予以肯定。而為了避免受到國際的景氣影響....blahblah  (抱歉本人才疏，除了讚揚之外抓不到重點)

• 潘維剛：頁岩氣占美國的能源比例將會大幅提昇，反觀台灣？我們沒有能源政策，朝野應該要以愛止恨，合作開創新局。

• 王育敏委員：擴大兒童優惠票，修改兒少法，以年齡取代身高，並且持續監督各單位避免民眾的福利縮水。

• 許忠信委員：國內瀰漫著自由貿易的幻想，回頭看俾斯麥時代卻是取消了自由貿易而加強工業。自由貿易要看本事，我們卻大幅開放農業及服務業，削弱台灣的工作機會。

• 張曉風委員：不需要金小刀上台，立法院就一直是個造口業的地方。每位美國總統宣示的時候，都會按著一本書發誓，是什麼書呢？是這本聖經 (接著張委員就開始讀經，直到三分鐘時間到了被斷話依然不停止，直至講完一個段落。我的宗教信仰是飛天拉麵神教，對於委員以半強迫的方式要我聆聽他教教義，本人在此提出嚴重抗議)

• 陳鎮湘委員：由於在野黨擾民，使得本會期法案通過數量最少。深感 113 遊行不妥，會破壞投資信心，我們應該要共同支持馬總統的改革。

• 陳碧涵委員：解決教育資源的「反重分配」。弱勢學生不應該因為經濟問題無法繼續升學，推內公費留學的台灣版，在台灣唸書的弱勢學生也能有獎學金補助，最快 102 年 8 月試辦。

• 邱文彥委員：台灣的石頭最美，有資源就需要保護。陸客來台後有的撿拾，有的破壞石頭，相關單位卻無法保護。

• 陳歐珀：寒凍水傷害農產，政府應該專案補助，並且及早提出因應對策，避免短期缺乏造成物價波動。

References

[1] 黃志雄委員便在立法院第8屆第2會期教育及文化委員會第22次全體委員會議提案，根據立法院議事規則第第61條規定，各種委員會開會時，除出、列席及會務工作人員外，不得進入旁聽。此提案並未通過，可以下載會議概況表看一看，其他紀錄可以在各委員會最新消息裡面下載，該提案紀錄在更新日期 2012-12-28 的檔案之中。

在 blogger/blogspot 想要貼程式碼並且提供比較清晰的外觀，之前找到的方法不外乎幾種

1. 把程式碼貼到一些 formatting tool，把程式碼轉成帶有顏色的 html code 之後再貼回 blogger
2. 把 javascript 檔放到另外一個 host，開啟網頁的時候載入 js 檔對 source code 做修改

第一個方法我不是很喜歡，文章的原始檔變成一堆 html code 完全看不出文意。第二個方法比較貼近我的需求，可惜要額外載入一些 js 檔，我希望盡量保持簡單。

恰好最近學了一點點 js，自己動手做很簡單的 pretty code。先定義幾個 css 格式，網頁下載完成之後，透過 javascript 對於帶有 code 類別的 pre 區塊做修改。

修改的邏輯也很簡單，僅僅只是用 regular expression 找出一些定義好的字串上點顏色罷了。我也不常貼上太多程式碼，因此正規表示式沒有寫得很認真，剛好我夠用而已。

使用方法

貼上程式碼的時候為 pre 加上類別 code 即可，好比

<pre class="code">
int main(void) {
    printf("blah\n"); 
}
</pre>

會變成

int main(void) {
    printf("blah\n")
}

設定方法

打開 blogspot 的設計，直接編輯 html，在 css 的部份加上這一塊

pre {
margin: 5px 20px;
border: 1px dashed #666;
padding: 5px;
color: #000;
background: #f8f8f8;
white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
span.control{
font-weight: bold;
color: #A00;
}
span.type {
font-weight: bold;
color: #0A0;
}
span.literal {
color: #00C;
}
span.comment {
font-weight: bold;
color: #AAA;
}

接下來找到 javascript 的區塊貼上程式碼，請注意「這一塊不能直接貼上」，這邊是看網頁原始碼的時候看到的結果。真正要貼上的是底下那一塊

onload = function () {
    var elmts,
        count = 0,
        regLiteral = /(('.*?'|".*?"))/g, // 'foo' or "foo"
        regType = /(\W|)(void|int|float|double|byte|struct)(\W)/g, // int foo
        regControl = /(\W|)(for|if|fi|while|do|done|return|each)(\W)/g, // while()
        regClearCmt = /(\/\*.*?)()(.*?)(<\/span>)/g,
        regClearCmts = /(\/\/.*?)()(.*?)(<\/span>)/g,
        regCmtsStart = /\/\*/g, //for /*
        regCmtsEnd = /\*\//g,   //for  */
        regCmt = /\/\/(.*)/g,   //for  //

        replaceLtGt = function (pre) {
            var text = pre.innerHTML;
            // <a> to &lt;a&gt;
            pre.innerHTML = text.replace(/<(.+?)>/gi, "<$1>");
        },

        setColor = function (pre) {
            var text = pre.innerHTML;

            text = text.replace(regLiteral, "$1");
            text = text.replace(regType, "$1$2$3");
            text = text.replace(regControl, "$1$2$3");
            text = text.replace(regClearCmt, "$1$3");
            text = text.replace(regClearCmts, "$1$3");
            text = text.replace(regCmtsStart, "/*");
            text = text.replace(regCmtsEnd, "*/");
            text = text.replace(regCmt, "//$1");
            pre.innerHTML = text;
        };

    elmts = document.querySelectorAll("pre.code"),
    count = elmts && elmts.length;
    while (count > 0) {
        count--;
        replaceLtGt(elmts[count]);
        setColor(elmts[count]);
    }
};

因為貼上的對象是 blogger 的 template，因此要把 & 或 < 或 > 再做一次轉換，實際上真正要貼進 blogger 的 js code 是這一段(看不懂了吧！所以我才要先貼上面比較有人性的部份XD)

onload = function () {
    var elmts,
        count = 0,
        regLiteral = /(('.*?'|".*?"))/g, // 'foo' or "foo"
        regType = /(\W|)(void|int|float|double|byte|struct)(\W)/g, // int foo
        regControl = /(\W|)(for|if|fi|while|do|done|return|each)(\W)/g, // while()
        regClearCmt = /(\/\*.*?)(<span class=".*?">)(.*?)(<\/span>)/g,
        regClearCmts = /(\/\/.*?)(<span class=".*?">)(.*?)(<\/span>)/g,
        regCmtsStart = /\/\*/g, //for /*
        regCmtsEnd = /\*\//g,   //for  */
        regCmt = /\/\/(.*)/g,   //for  //

        replaceLtGt = function (pre) {
            var text = pre.innerHTML;
            // <a> to <a>
            pre.innerHTML = text.replace(/<(.+?)>/gi, "<$1>");
        },

        setColor = function (pre) {
            var text = pre.innerHTML;

            text = text.replace(regLiteral, "<span class=\"literal\">$1</span>");
            text = text.replace(regType, "$1<span class=\"type\">$2</span>$3");
            text = text.replace(regControl, "$1<span class=\"control\">$2</span>$3");
            text = text.replace(regClearCmt, "$1$3");
            text = text.replace(regClearCmts, "$1$3");
            text = text.replace(regCmtsStart, "<span class=\"comment\">/*");
            text = text.replace(regCmtsEnd, "*/</span>");
            text = text.replace(regCmt, "<span class=\"comment\">//$1</span>");
            pre.innerHTML = text;
        };

    elmts = document.querySelectorAll("pre.code"),
    count = elmts && elmts.length;
    while (count > 0) {
        count--;
        replaceLtGt(elmts[count]);
        setColor(elmts[count]);
    }

};

要把「貼上 template 的醜陋內容再轉一次變成能夠貼上 blog 文章」這樣轉來轉去自己都快被搞混了，希望我沒有貼錯