沒穿方服

首頁

移除 Web Developer 後發現少了「清除 domain cookie」功能,於是補寫一個 FireGestures script,設定為 ← ↓ → ↑ ↓ (LDRUD)Cookie、上下為關閉)取代之。

先詢問再砍 結束時 alert 找不到 domain cookie 時

// Require Firefox 17
const {classes: Cc, interfaces: Ci, utils: Cu, results: Cr} = Components;
Cu.import("resource://gre/modules/Services.jsm");

var
  manager = Services.cookies,
  prompter = Services.prompt,
  hostname = gBrowser.currentURI.host,
  cookies = manager.getCookiesFromHost(hostname),
  cookie,
  dialogTitle = 'FireGestures script',
  kills = [];

while (cookies.hasMoreElements()) {
  cookie = cookies.getNext().QueryInterface(Ci.nsICookie2);
  if (cookie.rawHost === hostname || hostname.endsWith('.' + cookie.rawHost)) {
    kills.push(cookie);
  }
}


if (kills.length) {
  if (prompter.confirm(
        null,
        dialogTitle,
        [
          hostname,
          '移除 ' + kills.length + " 個曲奇?",
          "\n  " + kills.map(function (cookie) { return cookie.name; }).join("\n  ")
        ].join("\n")
      )) {
    kills.forEach(function (cookie) {
      manager.remove(
        cookie.host,
        cookie.name,
        cookie.path,
        false
      );
    });
    window.alert('已移除 ' + kills.length + " 個曲奇。");
  }
} else {
  prompter.alert(
    null,
    dialogTitle,
    hostname + "\n沒有需移除的曲奇。"
  );
}

Gblame 運用

Gblame 是什麼

tpope/vim-fugitive 提供的指令,把 git blame 結果顯示在分割視窗。
裡面按 -~P 可以對其它版本再 blame(詳見 doc),比直接在 command line 操作方便多了。

Gblame 畫面


開啟後自動 resize 到作者名

:Gblame 打開後,預設會顯示到 Date,很佔畫面,按 A 可以縮到 Author。

煩的是沒有選項能自動這件事,只好另設一個 command,在 :Gblame 後多送一個 A

command! -nargs=0 GBlameA Gblame | call <SID>fugitiveblame_after()
function! s:fugitiveblame_after() "{{{
  call feedkeys('A')
endfunction "}}}

然後用 tyru/vim-altercmd 方便輸入……

AlterCommand gb[lame] GBlameA

bling/vim-airline 狀態列

很微小的修改,原本狀態列會顯示 fugitive tmp file 的名稱,我把它改成 "Gblame"。

function! AirlineGblame(...)
  if &filetype == 'fugitiveblame'
    let w:airline_section_a = ''
    let w:airline_section_b = ''
    let w:airline_section_c = 'Gblame'
    let w:airline_section_y = ''
  endif
endfunction
let g:airline_statusline_funcrefs = []
call airline#add_statusline_func('AirlineGblame')

Git compare

配合 bootleq/vim-gitdiffall 使用, 按 gf 將檔案變更以 vim diff 開在新 tab,看那個 revision 改了什麼:

gitdiffall 開在新 tab

<LocalLeader>gf 則是開啟新的 tmux window,把該版本變更的檔案全部打開:

gitdiffall 開在新的 tmux window

function! s:fugitiveblame_gitdiffall(all) "{{{
  let rev = matchstr(getline('.'), '\v^\w{7}')
  let buffer = fugitive#buffer(bufname(b:fugitive_blamed_bufnr))
  if a:all
    call TmuxNewWindow({
          \   "text": "gitdiffall @" . rev,
          \   "title": '⎇',
          \   "directory": buffer.repo().tree()
          \ })
  else
    execute printf("tabnew %s | silent GitDiff @%s", buffer.path(), rev)
  endif
endfunction "}}}

autocmd! my_vimrc FileType fugitiveblame
      \ nnoremap <buffer> gf :call <SID>fugitiveblame_gitdiffall(0)<CR> |
      \ nnoremap <buffer> <LocalLeader>gf :call <SID>fugitiveblame_gitdiffall(1)<CR>
function! TmuxNewWindow(...) "{{{
  let options = a:0 ? a:1 : {}
  let text = get(options, 'text', '')
  let title = get(options, 'title', '')
  let directory = get(options, 'directory', getcwd())
  let cmd = 'tmux new-window -a '
        \ . (empty(title) ? '' : printf('-n %s', shellescape(title)))
        \ . printf(' -c %s', shellescape(directory))
  call system(cmd)
  if !empty(text)
    let cmd = printf('tmux set-buffer %s \; paste-buffer -d \; send-keys Enter', shellescape(text))
    call system(cmd)
  endif
endfunction "}}}

這裡比較悶的是 Gblame 的 mapping 都寫死死,最後只好選 gf 來用。
看 issue 感覺是 tpope 不大想理 mapping 的彈性。

一、tpope/vim-rails

我最常用的是 :RT:Tmodel foo:A


二、basyura/unite-rails

可設定按下 ,fR 就打開 Unite 介面,選擇 Rails 相關的 source。

nnoremap [unite] <Nop>
nmap <LocalLeader>f [unite]
nnoremap <silent> [unite]R :<C-U>Unite -start-insert -input=rails/ source<CR>

於是按下 ,fR 就顯示
Unite rails/xxx

接著選擇 initializer,就能進入 rails/initializer 這個 source 的畫面了。
※下圖我按了 ke 示範一下 filter 功能
搜尋 initializers


這兩個 plugin 的功能都不限於「尋找檔案」,這篇就不多說了。

沒有 LiveReload 也過得很好

「雙螢幕 + FireGestures 搖擺手勢(按住滑鼠右鍵再按左鍵)重新載入網頁」 —— 至少比按 F5 快多了。

目前環境

Windows 7 的 Firefox 21 beta + LiveReload Firefox extension,
Ubuntu VM 的 Rails + guard-livereload

我的 LiveReload 大概已經一兩年沒辦法用了,I Don't Know Why,最近被問到才重啟調查,發現在瀏覽器直接測試 WebSocket(可以用 WebSocket.org | Echo Test 測)是可以和 VM 裡的 LiveReload server 來往的,那八成是瀏覽器的擴充套件出狀況。

惱人的 LiveReload Firefox 擴充套件

LiveReload 官網提供的 2.0.8 版 xpi 因為還沒包含 Pull Request #8,所以應該是不堪用的,此外還有按鈕無法移除、連線錯誤沒有警告(有時甚至毫無反應)等煩人問題。

另一關鍵是沒有選項可以調整連線的 hostport,預設是 127.0.0.1 和 35729,我 VM 裡的 server 就不是用這兩個,當然連不上。

註:LiveReload 現在的設計是 server 在頁面插入 livereload.js,讓 client 從中取得 host 和 port。 所以也許是我的 guard-livereload 版本太舊(0.3.1),或者頁面需要另做修改。

最後對策是改 xpi 內容,讓它讀取 Firefox 自訂選項 extensions.livereload.fc.hostportfc 只是隨便定的名字),具體是在 global.js 的 beforeEnablingFirst 加入:

// Use custom preferences
var prefs = Components.classes["@mozilla.org/preferences-service;1"]
  .getService(Components.interfaces.nsIPrefService);
prefs = prefs.getBranch("extensions.livereload.fc.");
if (prefs.getCharPref('host')) {
  this.host = prefs.getCharPref('host');
}
if (prefs.getCharPref('port')) {
  this.port = prefs.getCharPref('port');
}

第一次嘗試 Responsive Design 和 Grid System

公司的活動頁,明明趕得要死,我還是忍不住把 Susy 用上了,為什麼?

因為前陣子在規劃新版面,我認為像樣的 grid system 能幫助我們,減少設計師、上稿人員和我,煩惱或溝通一些不必要的問題,例如某元素 margin 多少、某版位我做了多寬、……,不如先定個標準出來,要改再說,不改就我處理。

RWD 也是早就想做的事情,目前網站拆為桌面版和手機版(m.網址),結果因為 m 的功能不完整,造成 tablet 使用者處在不上不下的局面,想想 RWD 還是最輕鬆的解法。

找了不少解決方案,感覺都很難搞,最後只有 Susy 給我嘗試的勇氣。

Susy 可愛之處

  • 不用自己算寬度。 比如 960px 分成 16 欄,每欄是多寬? 我不可能算對啊!
  • 不用在 HTML 加入像 .row4 .span3 的噁心 class,那根本無法維護嘛。

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 才行。

    若 container 寬未佔滿全畫面,如何實現全畫面寬的 header?

    結論:這個問題跟 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 排版,結果就是「垂直對齊」變得不易做到。

    預設的 grid 定位,總是垂直置頂對齊。

    可能的解法是改用 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;
        }
      }

    項目改用 inline-block 就能 vertical-align 了。