沒穿方服

Susy 實際做的事情

剛開始什麼 gutter、columns 的名詞都看不懂，但實際做一次，認識一下產生的 CSS，會發現 Susy 做的事其實不多。

※目前版本是 1.0.8，但以下會混用 2.0 alpha 未定的介面說明，我覺得更清楚。

1. 建立 grid（set-grid(960px 12 1/4)）

   主要是維護 grid 設定的工作，也就是定義「容器寬、欄數、欄間隔、留邊」等等變數； 一般會寫下幾組設定，用在不同的 media query 條件下。

   具體例子，v1.0.8 的語法

   $container-width: 970px;
   @include container;

   產生的 CSS 會包含 max-width: 970px; 以及 :after :before 的 clearfix。

2. 安排元素的佔有欄數與定位（span(last 3 of 5 isolate)）

   Susy 做掉兩個麻煩的算數問題，第一是元素本身的 width； 只要指定橫跨（span）寬度是 N 欄，Susy 就會根據當時的 grid 設定，把元素 width 設為應有的百分比。

   第二是為了將元素放在正確的水平位置上，所需要設定的左右 margin （理由：Susy 採用 float 加上負 margin 實作 grid，避免 % 除不盡時，瀏覽器處理最後一個 pixel 的問題，參考 Responsive Design’s Dirty Little Secret）。

   v1.0.8 使用 @include span-columns(3 omega, 5); 指定元素佔 5 欄中的 3 欄； omega 表示是該列的最後一個元素，預設會產生反方向的 float，倒過來算，否則那幾 % 有時還是會被擠到第二列。

   另有 isolate(3) 用來將元素定位在第 3 欄； 針對列表也能以 isolate-grid(4) 讓各 item 寬 4 欄、自動對齊，且 nth-child(4n+1) 會自動 clear，產生 CSS 如：

   #AllWorks ul.gallery li {
     width: 23.07692%;
     float: left;
     margin-right: 2.5641%;
     margin-right: -100%;
   }
   #AllWorks ul.gallery li:nth-child(4n + 1) {
     margin-left: 0%;
     clear: left;
   }
   #AllWorks ul.gallery li:nth-child(4n + 2) {
     margin-left: 25.64103%;
   } ... （後略）

3. Media query

   提供方便設定 media query 的 Mixin。 v1.0.8 用法

   $media-tablet:  640px  8 969px;
   @include at-breakpoint($media-tablet) {  // ... （block 後略）

   會產生 @media (min-width: 640px) and (max-width: 969px) { ... 的 CSS，且其中寬度會以 8 欄為標準計算。

---

遇到的問題

1. 容器已經有 max-width，但某個 header 想要背景佔滿畫面寬

   要讓 content 置中，header、footer 又要橫向佔滿整個畫面，自然的作法就是將 header、content、footer 放在同一層，各自設定寬度（分別為 100%、container width、100%）。

   如果想讓 header 的「內容」也遵守 grid 設定，讓它跟 content 對齊，就要在寬 100% 的 header 下，再加一層 wrapper 且設為 grid container 才行。

   

   結論：這個問題跟 Susy 沒有關係。終究無法只用一個 container 就達成需求。

   註：有個用 pseudo element 的做法，參考 css - How to handle full-width element outside of a 960 compass susy grid? - Stack Overflow。

2. 預設的垂直對齊，只能靠頂（top）對齊

   因為 CSS vertical-align 只對 layout 為 inline 或 table-cell 的元素有用，而 float 會把 layout 變成 block，正好 Susy 是使用 float 排版，結果就是「垂直對齊」變得不易做到。

   

   可能的解法是改用 display: inline-block;，就能使用 vertical-align 了，也是我們平常實作 gallery 的方式。 （Susy 有一個相關 feature request inline-block version · Issue #69，不過被拒絕掉了）

   這次我也沒用 vertical-align，設計師可能也比較中意 vertical rhythm…… 但總之想換 inline-block 的話，要注意的應該只有：

   1. Haml tag 要用 > 和 < 把多餘的空白去掉，因為空白會佔寬度：

      %li><
        %div.image

   2. 不使用 Susy isolate，改為自己指定 width 和 margin：

      li {
        width: columns(4, 16);
        margin-right: gutter(16);
        &:nth-child(4n) {
          margin-right: 0;
        }
      }

   

最後一張照片，親愛的 fuf

替代品當然是 unite.vim

之前寫過一篇簡介「試試新的萬能尋找器 unite.vim」，那時就它用來輔助 FuzzyFinder 了，選 action 的介面有時候真的比較方便，現成的實用 source 又多。

而且 2011 至今，幾乎每次跑 BundleInstall 都看到它在更新，相當驚人。 回報 bug 很快就會被處理，這點相當酷。

豪放的大視窗

Unite buffer 開出來整個外觀如下圖，分割位置、寬或高、buffer 名稱、訊息（兩行 [file_rec] 的部分）都可以調整。

輸入方式（narrowing 語法）的變更

需要重新習慣的不多：

1. FuzzyFinder 以 ; 分隔多個關鍵字，在 unite.vim 改用空白。
2. 離開 Insert Mode 不會直接退出 unite buffer，要用另外的 mapping 才行。

而關鍵字與候選範圍的比對關係，在 unite.vim 被抽出為 matcher，可以用 unite#filters#matcher_default#use()、unite#custom_source() 或 unite#set_substitute_pattern() 等方式作細部調整。

Matcher 可以換成 matcher_regexp、matcher_fuzzy、……，可惜文件不清，我只能邊改邊試。

set_substitute_pattern 可以做到輸入 $HOME 展開 $HOME，輸入 gem/ 展開 ruby gem path，理論上應該能自由調整 narrowing 用語。 ※我是參考這篇 unite.vim の設定を一部晒してみる - 永遠に未完成調的。

我的 mappings

註：我認為分享 key mapping 無聊透頂，尤其選的按鍵只是習慣、沒有語義，那你改個按鍵也要分享一篇嗎？

這裡只是形容一下操作的感覺，有些按鍵是預設的、沒改。

• ,ff - 開啟 Unite file 介面，由目前 buffer 所在目錄開始搜尋。
• ; - 在 unite buffer Insert Mode 向前刪除一個 word，反悔或打錯字時用。
• <Ctrl-J> 和 <Ctrl-K> - 移動到下一個／上一個候選。如果在 Insert Mode，會自動進入 Normal Mode，然後只要按 j k 就能上下移動。
• <Tab> - 對選中的項目，開始選擇 action。
• <CR> - 對選中的項目執行 default action，例如檔案的預設 action 我調成在新分頁開啟。
• ,<CR> - 對選中的項目執目第二 default action（目前 unite.vim 沒有所謂第二 action，要自己設 mapping），我設定成在目前分頁開啟檔案。
• <F5> - 在 unite buffer 中，重新整理，清除候選快取。
• ,q - 退出一層 unite buffer。
• ,Q - 退出全部 unite buffer。

API 與設定感覺

其實設計蠻漂亮的…… source、kind 是要處理的情境和候選物件類型， action 是要執行的動作， filter 包含 matcher、sorter、converter 的微調。 以上定義清楚，設定時的指令自然會乾淨，這部分做得不錯，比 FuzzyFinder 進步多了。

比較惱人的是文件趕不上開發速度，英文不太講究、repo 裡的 commit message 也敘述不清。 有點難搞。

目前常用的 source

※更多 source，參考 unite plugins · Shougo/unite.vim Wiki。

• file - 最常用的就是這個。
• file_mru (most recent used files)
  
• register - 多行內容也能顯示喔。
• bookmark - 目錄、檔案、位置都通，比 fuf 方便。
• help - 但要用 tags-caching 這個 branch 才有快取，否則實在太慢。
  
• session
• tab
• outline - 有了這個，幾乎就沒在開 Tagbar 了（雖然我本來就少用 tag）。
  

還不大會用的其他功能

1. file_rec source

   Fuf 要找深層目錄下的檔案，會使用 **/ 查詢。 Unite.vim 也能使用 **/ 寫法，我一般用這個就 OK 了。

   而 unite.vim 還有專門做深層搜尋的 file_rec source，作者也經常磨亮這個功能。 不過目錄樹很大時，總是會跑到 too many candiates（預設 1000 項），加大快取數又要跑很久。 解法應該是用另外的 file_rec/async source，可以非同步發動更快的搜尋，但需要裝別的東西，我就沒試了。

2. Quick Match

   類似 EasyMotion 的選擇法，打一個鍵就能對某個項目動作。 還沒想到要用在哪，也許適合用在 bookmark 吧。

   

總之一下子就能習慣，早就可以換了

我目前的設定放在 bootleq/vimrc_human/.vimrc#L808-923 at 500f59，沒什麼特別的，doc 裡也有範例，純擺設。

---

Alignta (h1mesuke/vim-alignta) 是什麼？

對齊文字用的 plugin，效果舉例如下，將多行文字依等號對齊：

  原文           :Alignta =
  ------------   ------------
  a = 1          a     = 1
  bbb = 10       bbb   = 10
  ccccc = 100    ccccc = 100

另一支比較有名的對齊 plugin 是 Dr. Chip 的 Align.vim，可惜用法難懂，不容易記； Alignta 或許功能沒那麼豐富 (?)，但實在清楚多了，名字也比較可愛。

---

SYNOPSIS of Alignta command (for v. 0.3.0, UNOFFICIAL)

                           (Shifting
                            Alignment)
                              <-
                              ->           n
                              <--
                              -->

:[range]Alignta [filter]  [align method][margin]    [-p] [-erER] pattern[/{count}] [pattern2 ...]

               g/pattern   (Padding                                       nunber
               v/pattern    Alignment)                                     'g'
                               <           n:n
                               |        [0-9][0-9]
                               >          [0-9]
                               =
                           (repeat as
                             LM[R]...)

• filter (doc#556)

  指定哪些特殊的行（通常是註解）要／不要進行對齊。

  g/pattern 只處理符合的行；v/pattern 不處理符合的行。

• align method

  Alignta 的對齊分為 Shifting 和 Padding 兩種，參數也分為兩套。

  Shifting Alignment (doc#153) 比較簡單，只是將 pattern 的開頭垂直排在一起。
  以下參數表示採 Shifting 對齊： (doc#445)

  • <- 將每一行符合 pattern 的部分，對齊到其中最靠左的 column
  • -> 同上，但對齊到最靠右的 column
  • <--
  • --> 兩個 dash 的版本表示用 tab 字元排版

  ---

  Padding Alignment (doc#121) 應該比較常用，依 patten 將文字拆成多個欄位，每行再補上空白（padding）使各欄等寬。

  各欄以 {L}{M}{R} 為一個單位，{M} 就是 pattern 符合的位置，{L}{R} 是它的左右側。 寫法是以 <、|、>、= 指定各單位靠左、靠中、靠右或保持原本方式對齊， 例如 :Alignta <|> = 會讓等號兩邊靠外對齊。 (doc#304)
  註：{R} 可省略，表示跟 {L} 相同，例如 <= 和 <=< 同義。
  註：若後面有指定多個 pattern，這裡可以重覆 {L}{M}{R} 來指定多個對齊方式。

• margin (doc#304)

  指定各欄位的間隔。

  Padding 對齊時，間隔是指 {L}、{R} 和 {M} 之間的空白數； 寫法是 {L-margin}:{R-margin}，例如 :Alignta <<3:1 =。
  可簡寫為 {L-margin}{R-margin} 或 {LR-margin}，但 margin 必須是個位數 [0-9]（10 就不行了），例如 46 即 4:6，4 即 4:4。
  

  Shifting 對齊時，間隔是指 pattern 左側至少要留的空白數。 單純寫個數字即可。

• -e -r -E -R (doc#227)

  明確指定後面 pattern 的解析方式。

  • -e 視為純文字
  • -r 視為 regexp pattern
  • -E 之後的 pattern 一律視為純文字
  • -r 之後的 pattern 一律視為 regexp pattern

  例如 :Alignta -e \d 是以 \d 對齊，而非以數字（\d）對齊。

• -p (doc#592 )

  若後面的 pattern 是特殊字，加上 -p 可確保它被視為 pattern。 例如 :Alignta -p << 中的 << 是指 pattern，而非對齊方式。

• pattern[/{count}]

  指定要用什麼來對齊。(doc#188)

  若 pattern 包含 \ 或 .，就會被視為 regexp 解析，否則一律以純文字處理。

  pattern 後面可以加 /{count}，指定可符合幾次，超過 count 就不再對齊(doc#254)， 例如 :Alignta ={2} 只會處理前兩個等號，之後的就保持原狀。
  另 count 使用 /g 表示有 pattern 符合時才對齊，否則不理它。

  註：count 預設值在 Shifting 對齊時是 /1，Padding 對齊時是 /g。
  註：Alignta 的參數若不符合其他任何 option 寫法，就會被視為 pattern。
  註：若有設定 alignta_default_arguments 變數，則此參數也能省略。

• pattern2 ...

  支援複數的 pattern，直接寫在後面即可，例如 :Alignta = /* */。 (doc#287)

---

可設定的變數 (doc#618)

• g:alignta_default_options
  :Alignta 的預設對齊選項。 參數中未指定對齊選項時，就會以此為準，預設為 "<<<1:1"。
• g:alignta_default_arguments
  直接下 :Alignta 不帶參數時，會使用的預設參數。 無預設值。

以上變數也可使用 b: 前綴設定 buffer local 版，例如 b:alignta_default_arguments。

---

Unite.vim 介面 (doc#654)

如果配合 Shougo/unite.vim 一起使用，可以做到：

• 先把常用的對齊方式定義好，以後選取文字 → 呼叫 :Unite alignta:arguments，就能在 unite 介面中直接選擇對齊方式，不必再想指令了。
• 直接呼叫 :Unite alignta:options，就可以在 unite 介面中調整 :Alignta 的預設選項（可事前定義），也有提供方便的 <RESET> 選項。

不過公司正式應徵管道是 104 喔
→ 「Fashion Cookie & Corpo-網站程式設計師 _ 潤泰全球股份有限公司─104人力銀行」 （考量 104 社會觀感，連結我加了 nofollow）

---

我們是潤泰全球（潤泰紡織）2010 成立的網路行銷部門，在台北市上班，網站是 fashioncookie.com.tw。

希望找到有「前端工程師」或／和「Rails 網站程式設計師」能力的人物。

我不是主管，但有興趣、疑問或其他（例如覺得這樣徵不到人的啦），都歡迎跟我討論～

bootleq@gmail.com 莊喬

一直忍到上週才死心面對，順便試試 Mozilla 的 Add-on Builder，結果完成一個小元件 Reset URL by Globe（未上 AMO，但 Builder 頁面即可下載 .xpi）。

Add-on Builder 初試樂趣

動手時間變很短，反而都在讀文件、想像、解謎； 寫寫直接在瀏覽器上測試，不用存檔也不用重開，感覺創造過程沒什麼干擾。

不過 Add-on SDK 已支援的東西還是跟傳統 XUL overlay 元件有點距離，寫複雜點的功能大概就沒這麼爽了。

---

準備開始，先了解問題

第一想知道 Firefox 為什麼改變。 很快查到 Site identity UI updates | Mozilla UX，原來 Firefox 14 把網址列的 favicon 改成一顆 site identity 按鈕——就是憑證合法時顯示綠色掛鎖，沒憑證時一律顯示小地球（其實我覺得比較像鳥頭）的按鈕—— 免得使用者看到奇怪的 favicon 誤以為是安全／不安全的網站。

要做 add-on？ 初步想法

至於為什麼「點擊時復原」消失就沒查到了，說不定只是漏掉，回報一下就會加回去了；
但因為是玩 Add-on Builder 的機會，就沒多想，草草動手了。

猜測復原網址的實作應該還在，只是點地球的時候少了事件觸發而已。 所以只要在 click 事件加幾行 code 就行了吧。

先看 DOM 結構

跟改網頁一樣，想調整某個元件，總要先了解它的構造。 這時方便的工具是 DOM Inspector，只要先選 File → Inspect Chrome Document → 隨便選一個文件，再點工具列上的 Inspect 按鈕，就會開啟類似 Firebug 檢測器的功能，在瀏覽器視窗點想觀察的部份，節點就會在 DOM Inspector 中展開了。

實際點選小地球，展開的是一個 xul:hbox 元素。

讀原始碼，看行為實作

再來就直接爬 code，不必把整個原始碼抓下來，利用 MXR (Mozilla Cross-Reference) 網站就行了。

搜尋過程省略，最後找到幾處：

• browser.xul#550 的 textbox#urlbar 就是網址列所在，上面有個 ontextreverted 事件，看來就是「復原」功能。
• urlbarBindings.xml#226 有前述事件 handler handleRevert 的實作。
  裡面的註解 //（前略）was scrolling when they hit escape 也透露一個我不知道的用法 —— 想復原 Awesome Bar 的輸入，只要按 Esc 就好了， 早知道這招，也許就不必寫這個 add-on 了……

開始寫啦……

第一次玩，亂寫一通，後來才發現驚人事實—— revision 是公開的啊！ 每次亂存檔都會被別人翻到，真是一件很糗的事啊。

總之照著 SDK 文件的 guide 就能寫出能動的元件了。 具體也就是找到小地球，幫他綁上 click 事件，請他被按的時候 gURLBar.handleRevert 而已。

我主要碰到的問題是：不知道如何存取 XPCOM 的 nsIDOMWindow（好讓我直接取用 window.gURLBar）。現階段 sdk/windows 拿不到它，只好用 unstable 的 sdk/window/utils，兩個混在一起用，最後成果也實在不太靠譜。

---

記憶體用量 好像有點多？

因為文章寫得有點久，所以這元件也用了一個禮拜了。
由 about:addons-memory 看來，這支小小 add-on 經常性地佔用不少記憶體，有空要再檢查一下。