公司用 Trac 當作 issue tracking system,預設的 <pre> 是不會斷行的,但好像也不是所有人都能夠接受換行,所以在自己的 browser 裡面處理掉。
在裝了 Stylish 後,針對內部網域建立以下 CSS 效果:
#content pre { word-wrap: break-word; }
用 word-wrap
強制斷行,在大多數的情況下會看得比較清楚,也不會影響到 copy/paste 時的行為。
幹壞事是進步最大的原動力
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 將在 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 上處理...
在 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).
暫時不考慮這個問題... 有機會再回頭來看好了 @_@
衛報 (The Guardian) 對 Snowden 爆料的事情開了一個特刊:「NSA files decoded: Edward Snowden's surveillance revelations explained」。
首先,Snowden 爆料 NSA 這件事情的熱潮一直在延續 (一直都很精彩),而且衛報本來就是在這整件事情裡面佔有很重要的角色,由衛報做這個特刊並不意外。
但衛報這個頁面利用 HTML5 video 與大量 CSS3 效果,向全世界展示了「網站上的特刊可以這樣做!」,強烈建議有在關注這個主題的企劃,以及視覺設計的人花時間去看看整體的呈現。
以往類似的東西要嘛就是主題不夠精彩,要嘛就是呈現不夠精彩。這次因為 Snowden 的爆料已經持續幾個月了,衛報自然願意花大量的資源專訪 (於是可以看到不少 video 短片) 以及整理。在手上素材夠多,以及一流的呈現方式,造就了這個精彩的特刊。
今天的 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 好像怪怪的...
Twitter 公告了 Bootstrap 3.0 的發行:「Bootstrap 3.0」。
This is how we dooo it! Bootstrap 3 ya'll. http://t.co/i5KlLDtP0F
— Bootstrap (@twbootstrap) August 19, 2013
可以試著把 2.3.2 的移植過去看看...
CSS Zen Garden 是相當經典的站:「CSS Zen Garden: The Beauty in CSS Design」,在 Hacker News Daily 上看到復活了 :p
可以用手機開看看,另外也可以試著把瀏覽器大小切到 1024x768 看看 :p
之前是在高見龍的文章「爽爽快快學Vim(3) - Vim Plugins」裡看到這個 plugin,高見龍的文章所附上的連結就已經是 ap 版了,不過前幾天把 vim 的套件管理系統換成 Vundle 後 (參考「從 pathogen.vim 換成 Vundle...」這篇),我是用 Google 把之前裝過的套件一個一個找回來,就裝到 skammer 的版本了。
skammer 的版本問題在「Very slow.」可以看到,懶的看原因的人可以直接看 comment 裡 ap 給的 fork。
用 Vundle 的人先改掉 .vimrc
的內容,然後重新啟動 vim 後跑 :BundleClean
與 :BundleInstall
就會裝新版了。