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)

cdnjs (其實我要說的是 Bootstrap...)

之前曾經提過 BootstrapCDN,不過我不是很喜歡用。主要的原因包括 netdna.bootstrapcdn.com 所使用的 CDN 在是不包含亞洲範圍 (會需要到美西抓),加上之前因為換 url 結構結果本來的 url broken...

cdnjs 是之前就知道的服務,剛剛看了一下發現東西愈來愈完整了... 雖然名稱裡是放 js,但實際上上面放的 Bootstrap 是完整的:

//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/img/glyphicons-halflings.png
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/img/glyphicons-halflings-white.png
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.css
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.min.css
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.css
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.js

剛剛在 CloudFlare 官方的 blog 上看到介紹 cdnjs 有點意外:「CDNJS: The Fastest Javascript Repo on the Web」。

翻了翻 cdnjs.cloudflare.com,看起來是包含亞洲的點,在 HiNetTWGate 上測試是導到香港的點,應該會用用看吧。至於其他 Google Hosted Libraries 有提供的應該是會用 Google 的服務,畢竟是直接從台灣的機房供應的...