預防 Cross-Site Request Forgery (CSRF) 的一些資料，以下兩個連結講了蠻多的:
其中看到比較特別的是 Double Submit Cookies。將 CSRF token 放到 POST 和 cookie 欄位中，接著 server 只要比對兩者一樣不一樣就可以了，還滿有趣的。
研究了一下 radio buttons 該怎麼排比較好:
個人結論：垂直排列會是比較好的作法，水平排列相對會有些問題:
不過在一些情況下，水平排列還是 OK ...
會看這個主要是很久之前看到的這篇文章: 使用 CSS:not 與 data-index 即時搜尋頁面。
最近剛好又用到，所以順便研究了一下 IE 的相容性問題，其中比較明顯的是 :not 這個 pseudo class 在 IE 上的相容性不太好: CSS3 :not Selector，IE 的支援從 9 才開始，不過我實際測 IE8 似乎也是可行，IE7 就真的不行了。
本來想到的解法是先把所有的都 display:none，然後再篩選符合的去做對應的 display，ex: table or block，不過後來測試會死在把 css 塞進已存在的 style 這步，查了一下發現舊 IE 對 style ...
鬼打牆了很久，後來才找到一個方法可以做。
// dropdown init:
$('.ui.dropdown').dropdown();
// 假如某個 dropdown 的 id 是 a
$('.ui.dropdown').is('#a').dropdown('restore defaults');
我有試圖用某個特定 id 做 dropdown init，再用這個 element 做 restore default，不過居然還是會有錯誤...。總之目前用這樣解。總覺得對 semantic UI 的怨念原來越深了...。
Ref:
用了個簡單的網站改成用 backbone.js 來套，之所以用 backbone 是因為不太喜歡在 html 上加一堆 attributes，backbone 這樣偏純 js，再加上 underscore 做 template 的方式覺得比較適合我，以後如果有興趣再碰看看 ember.js 吧，angular.js 現階段感覺還蠻流行的，不過就不太想碰就是 XD。
套完 backbone 之後，程式硬是多出了一倍的量，不知道到底有沒有幫助到我(炸)，而且 backbone 官網的 docuemtn 常會漏掉一些重要的資訊，讓我卡超久= =，這邊順便記錄一下這樣。架構的話，看到有篇 stackoverflow 上的問題，他的 example code 我還蠻喜歡的，也許可以參考看看: Backbone ...
g0v.tw 最近改版了，css framework 也改用 semantic-ui，看起來還蠻潮的，不過目前在用，感覺問題還蠻多的，其中一個大問題應該就是沒有 responsive layout 可以直接套用，所以大概就只能自己土炮吧～。不過這次修的問題跟這個無關，主要是要讓 nav menu 可以隨著在不同網頁，然後 highlight color 到不同 menu item 上，主要有遇到幾個問題：
所以就不能用 javascript 直接 assign class 到對應的 menu item 上，只能在 template 上動手腳，template 是用 jade。首先先在 nav menu 的 ...
之前在改網站的 style，明明套用了 brunch，但是修改後，卻沒辦法自動產生
build 好的 css，這個問題一直困擾我很久，每次都要重新跑一次
brunch watch --server 實在是很不爽，今天晚上剛好有一點時間就來修了。
網站是用 less，然後有一個主要的 less 檔來 @import 其他在 less
資料夾底下的 .less 檔，目錄架構大概像底下這樣：
├── less
│ ├── archives.less
│ ├── index.less
└── less_proxy.less
然後 config.ls (這邊是用 livescript) 裡對應的設定部分：
stylesheets:
joinTo:
'css/app.css': /^app\/styles\/\w+\.less ...修了一下 render 的問題，以結果來看其實並沒有完全做好，還是會有 render 過程中偏移的問題 orz，不過也比原來的情況好多了(汗)，之後功力如果好一點再來深入研究吧 = =+。
commit diff
主要修正幾個地方：
fb button 基本上最大就 60px 的樣子，原本設了 500px，導致一開始預留的空間過大，整個會往左邊撐開，render 完後又變一個小按鈕，所以整個看起來很囧，解決方法就是不去限制大小，反正按鈕最大也就那樣而已。
原本的方法是直接把 button 用 css 加上 transform + scale
放大，不過如果有多個 button 的話，這樣兩者之間的 margin
會很難去設定，因為 margin ...
簡單說就是在 link 內容如果是 float 的情況下，這個 link 沒辦法在按 tab
鍵的時候得到 focus。Google 了一下，好像是 Webkit 的
bug，不過好像沒有打算要修的樣子(汗)。
Link 如果在下面的情況是 OK 的：
<a href="#">
<div>test</div>
</a>
但是如果加了 float 後就會出問題：
<a href="#">
<div style="float:left;">test</div>
</a>
我的解決方法很簡單，就是乾脆把 float 移到外面的 element
上(炸)。目前看來是沒問題，Firefox ...
查了一些資料，看起來 style.width 是如果 css 沒指定 element 的 width
的話，就會拿到空值，即使它本身的確佔有一個大小。這時候如果想拿到實際大小的話可以用
offsetWidth，另外要注意的是 offsetWidth 是
readonly，所以如果要設寬度，還是得從 style.width 著手。還有 這篇
是 style.width 和 offsetWidth 的效能比較，看來 offsetWidth
效能好很多，看來以後抓寬度就直接抓這個值就好了@@。
參考資料：
原生js获取宽高与jquery获取宽高的方法的关系
offsetWidth和width有什么不同啊?
How to find the width of a div