Trac 裡 <pre> 元素的換行...

公司用 Trac 當作 issue tracking system,預設的 <pre> 是不會斷行的,但好像也不是所有人都能夠接受換行,所以在自己的 browser 裡面處理掉。

在裝了 Stylish 後,針對內部網域建立以下 CSS 效果:

#content pre {
  word-wrap: break-word;
}

word-wrap 強制斷行,在大多數的情況下會看得比較清楚,也不會影響到 copy/paste 時的行為。

用 BrowserSync 測試多個平台...

BrowserSync 是用 node.js 寫的工具,可以同時測試一堆 device,修改後不用按 reload,印象中已經有套件可以做類似的事情?

一般用 npm 裝就可以了:

npm install browser-sync

最簡單的方法是直接執行 browser-sync,執行後會出現像這樣的訊息:

<script src='//192.168.1.1:3000/socket.io/socket.io.js'></script>
<script>var ___socket___ = io.connect('http://192.168.1.1:3000');</script>
<script src='//192.168.1.1:3001/client/browser-sync-client.0.6.0.js'></script>

把這段程式碼貼到 body 的最後面就可以了,當 BrowerSync 偵測到檔案有更新時會透過 server push 機制重刷頁面。

另外,也可以產生 bs-config.js 修改設定:

browser-sync --init

更完整的說明可以從「Options」這頁找到。

Firefox 將可以在 CSS 內使用變數...

Firefox 將在 29 版支援 CSS 變數 (現在是 26 版):「CSS Variables in Firefox Nightly」。標準是出自 W3C 的「CSS Custom Properties for Cascading Variables Module Level 1」(在寫這篇文章時還是 draft)。

程式碼會長這樣:(直接引用比較複雜的程式碼)

:root {
  var-companyblue: #369;
  var-lighterblue: powderblue;
  var-largemargin: 20px;  
  var-smallmargin: calc(var(largemargin) / 2);
  var-borderstyle: 5px solid #000;
  var-headersize: 24px;
}
.partnerbadge {
  var-companyblue: #036;
  var-lighterblue: #369;
  var-headersize: calc(var(headersize)/2);
  transition: 0.5s;
}
 
@media (max-width: 400px) {
  .partnerbadge {
     var-borderstyle: none;  
     background: #eee;
  }
}
 
/* Applying the variables */
body {font-family: 'open sans', sans-serif;}
 
h1 {
  color: var(companyblue);
  margin: var(largemargin) 0;
  font-size: var(headersize);
}
h2 {
  color: var(lighterblue);
  margin: var(smallmargin) 0;
  font-size: calc(var(headersize) - 5px);
}
 
.partnerbadge {
  padding: var(smallmargin) 10px;
  border: var(borderstyle);
}

本來用 Sass/SCSS 做的事情就可以把計算這部份推到 browser 上處理...

CSS 裡,px 的定義並沒有保證線性...?

在 Hacker News 上看到的舊文章,在「IN CSS, “PX” IS NOT AN ANGULAR MEASUREMENT AND IT IS NOT NON-LINEAR」這篇文章裡面,標題就直接提到「pixel 並非生而平等」...

文章裡的 pixel 的定義是:

a pixel is defined as the smallest object that can be displayed on a device

但我找不到這句話的出處...

到是 CSS 2.1 的 PDF 裡可以看到 px 的定義是:

px: pixel units — 1px is equal to 0.75pt.

以及 pt 的定義:

pt: points — the points used by CSS are equal to 1/72nd of 1in.

而連 in 都有定義:

in: inches — 1in is equal to 2.54cm.

然後 cm 這個縮寫定義到公制:

cm: centimeters

看起來不像是有問題啊?另外是還有對 reference pixel 的定義,看起來也很明確啊:

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).

暫時不考慮這個問題... 有機會再回頭來看好了 @_@

英國衛報對 Snowden 爆料 NSA 的特刊...

衛報 (The Guardian) 對 Snowden 爆料的事情開了一個特刊:「NSA files decoded: Edward Snowden's surveillance revelations explained」。

首先,Snowden 爆料 NSA 這件事情的熱潮一直在延續 (一直都很精彩),而且衛報本來就是在這整件事情裡面佔有很重要的角色,由衛報做這個特刊並不意外。

但衛報這個頁面利用 HTML5 video 與大量 CSS3 效果,向全世界展示了「網站上的特刊可以這樣做!」,強烈建議有在關注這個主題的企劃,以及視覺設計的人花時間去看看整體的呈現。

以往類似的東西要嘛就是主題不夠精彩,要嘛就是呈現不夠精彩。這次因為 Snowden 的爆料已經持續幾個月了,衛報自然願意花大量的資源專訪 (於是可以看到不少 video 短片) 以及整理。在手上素材夠多,以及一流的呈現方式,造就了這個精彩的特刊。

避免文件大量 Reflow...

今天的 Hacker News 文摘上看到關於 Reflow 的問題:「Preventing 'layout thrashing'」。

Reflow 指的是改變 DOM 後造成的畫面重新計算以及 render。

Google 有給過一些資訊:「Minimizing browser reflow」,Mozilla 也有給「Notes on HTML Reflow」,不過這兩篇都是概念性的文章...

文章的作者寫了 FastDom,把 read 與 write 包起來一起處理 (read 一包,write 一包),不過這樣寫的時候就要小心當下真正的 DOM 的值了...

不過如果只是處理 ordering 的問題,叫 FastDom 好像怪怪的...

Bootstrap 3 RC1

Bootstrap 3 RC1 放出來了。

官方在文件裡推薦使用 NetDNA 提供的 CDN Hosting,不過 NetDNA 給的點沒有很好,台灣與日本都會到美西。如果很要求速度的話 (尤其是第一次沒有 cache 時瀏覽的速度),還是放一份到自家的 server 或是自家的 CDN Hosting 上吧?

最大的改變在於扁平化,等一下就來測試看看感覺如何...

用 ap 版本的 vim-css-color

之前是在高見龍的文章「爽爽快快學Vim(3) - Vim Plugins」裡看到這個 plugin,高見龍的文章所附上的連結就已經是 ap 版了,不過前幾天把 vim 的套件管理系統換成 Vundle 後 (參考「從 pathogen.vim 換成 Vundle...」這篇),我是用 Google 把之前裝過的套件一個一個找回來,就裝到 skammer 的版本了。

skammer 的版本問題在「Very slow.」可以看到,懶的看原因的人可以直接看 comment 裡 ap 給的 fork。

用 Vundle 的人先改掉 .vimrc 的內容,然後重新啟動 vim 後跑 :BundleClean:BundleInstall 就會裝新版了。