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 就會裝新版了。

IE7 與 IE8 上的 :nth-child...

Zite 推薦快兩年前的文章... 在「Poor man’s nth-child selector for IE 7 and 8」看到用 + 來硬幹 nth-child()...

一般是這樣寫:

/* standard nth */ul.menu li:nth-child(3)
{
    /* styles for the 3rd LI */}

遇到 IE{7,8} 時可以這樣幹:

/* IE nth */ul.menu>li + li + li 
{
    /* styles for the 3rd LI */}

或是:

/* alternate, more specific IE nth */ul.menu>li:first-child + li + li 
{
    /* styles for the 3rd LI */}

印象中很久前有看到一堆這類硬幹的技巧,不過都忘光了... 寫一篇記錄下來 XD

node.js 版的 YUICompressor...

看「Fantastic front-end performance Part 1 – Concatenate, Compress & Cache – A Node.JS Holiday Season, part 4」的時候發現 node.js 版的 YUICompressor 比起 Perl 版本更早之前就 porting 完成了:「UglifyCSS」,甚至是官方版本的「yuicompressor / ports / js / cssmin.js」也都遠早於 Perl 版本...

npm 裝 uglifycss 就可以用了...

sitespeed.io 網站測速

sitespeed.io 是一個 open source 軟體,讓開發者可以測試網站的效能,然後輸出 html 報表:「Do you sitespeed?」。

執行需要 Java 1.7+ 以及 PhantomJS,我是在 FreeBSD 上跑 (Java 的部份是用 java/openjdk7),另外根據文章裡第三個 comment,在 Windows 上用 Cygwin 也可以跑。

./sitespeed.io -u http://ptt.cc/ -d 1 -o img 跑出來後會有一整個目錄的報告,包括了 summary 以及所有頁面的清單 (後面這兩個連結是跑完後用 s3cmd sync 丟上 S3 的):「ptt.cc - Summary of the sitespeed.io result」、「ptt.cc - All pages information」。

每一頁都有細項說明,像是首頁 /index.html:「Page data, collected by sitespeed.io for page - http://www.ptt.cc/index.html」。

不過我更感興趣的是 PhantomJS,不知道可以做多少事情...

Perl 版本的 YUICompressor (CSS 的部份)

看到 Booking.comYUICompressor 移植到 Perl 上:「Efficient CSS Compression in Perl」。模組在 CSS::Compressor 這裡,看日期其實放出來蠻久的了?

開發的起因是因為 Java 啟動速度太慢,所以用 Perl 改寫... 雖然只能處理 CSS 的部份,但因為現在 JS 的主力應該是 UglifyJS2 或是 UglifyJS,理論上是可以把 Java 版本的 YUICompressor 了放到旁邊了?

據開發者自己的說法,因為 Java 啟動的 overhead 實在太重,就算是處理很大的 CSS 檔案,也可以省 40% 的時間,如果是小一點的檔案甚至可以省一半...

惡搞的 pull request 被人嫌到不行...

GitHub 上總是有人會送一些奇怪的 pull request 出來,把整個 code repository 砍掉換成惡搞的東西... 這次是 CoderDojo / CoderDojo-Kata 這個專案被人發 pull request 要惡搞,結果一堆人利用 comment 的功能開始嫌東嫌西:「pull 1」。

看完一次後覺得實在是太... 有趣 XDDD 乾脆列出來:

  • 沒有 doctype。
  • <style> 沒有指定 type。
  • <script> 指定的版本居然是 JavaScript 1.2... XDDD
  • 「你的 code 疑似抄自 1995 年的 sample,請考慮加回 GPL statement」
  • jslint 掛得很慘 XDDD
  • javascript 裡使用不必要的全域變數。
  • 可以用三元表示式讓 code 更清楚。
  • 變數名稱不具意義 XD
  • setInterval() 只是要呼叫一個 function,可以直接用 function name 而不需要用字串。
  • 為什麼你不縮排呢,很難讀耶...
  • 為什麼結尾不加上分號呢 (然後就呼叫 Douglas Crockford XDDD)
  • body 加上 bgcolor 被罵 XDDD
  • bgcolor 的顏色用 #000000 也被罵 XDDD 應該用 #111111... XDDD
  • 用 <br/> 排版被罵應該用 css 排 XD
  • table 排版再被罵...
  • single-quote 與 double-quote 混用也被罵不一致...
  • 用 inline css 被糾正 XD
  • 裡面用到圖片被稱讚 XDDD 被問圖片裡的鍵盤哪裡可以買 XDDD
  • 然後圖片沒有 alt 也被刁 XD
  • 沒用 safe color 被揍...
  • 下面有 alt 的圖片,但 alt 內容是空白而被人罵,但就有人很認真的回他說「alt 空白是合法而且某些 case 下是正確的語意,blah blah blah...」XDDD
  • 用 <b> 被提醒 deprecated,然後又有人很認真的回「在 HTML5 裡面被 undeprecated 了」XDDD
  • 出現 "click here" 但卻不能按啊啊啊

(倒地不起)

對於現在的瀏覽器,CSS 是否還需要加上 vendor prefix...

在「Do we need box-shadow or border-radius prefixes anymore?」這篇文章開頭就先給懶人包:

  • 如果沒有圓角 (border-radius) 或是陰影 (box-shadow) 會造成使用者不順。
  • 如果這四個平台 (以及瀏覽器) 的量夠大的話:Firefox 3.6-、Safari 4-、iOS 3.2-、Android 2.3-。

在這兩種情況下,你仍然需要加上 vendor prefix...

而比較長的說明,可以參考原文後半段,把這兩個效果分開說明。

如果是 Sass (SCSS) 使用者,就直接加吧,反正程式都幫你做好了... 雖然 validator 會叫 CSS 不合法,但也沒印象看過哪家瀏覽器會因為 css vendor prefix 就罷工... (真的有嗎?XD)