回頭用 WordPress 寫部落格

網路上有一個笑話：有在寫部落格的工程師，都至少有寫過一次自己的靜態網頁編譯軟體，而且比起真正寫部落格，會花更多時間在重構這個軟體或是調整模板。回頭看看我自己網站上面的文章，自從發出 Blog Redesigned 這篇文章之後，文章數量從每年幾篇，直接掉到每三年一篇。為什麼呢？

閱讀全文 回頭用 WordPress 寫部落格

桔梗花的種植與照顧

桔梗（學名：Platycodon grandiflorus），别名包袱花、鈴鐺花，擁有可愛的小花，帶有獨特的紙張質地和可見的花脈。我所在地區（日本東京）的常見品種有紫色和白色的花朵。這種植物的一個顯著特徵是它的花苞在完全打開之前像氣球一樣膨脹。

閱讀全文 桔梗花的種植與照顧

桔梗（キキョウ）の花の植え付けと手入れ

桔梗（キキョウ）は一般に「バルーンフラワー」として知られ、独特の紙のような質感と 目に見える葉脈のある美しい小さな花を持っています。私の地域（東京、日本）の一般的 な品種には紫と白の花があります。この植物の顕著な特徴は花のつぼみです 完全に開く 前に風船のように膨らみます。

閱讀全文 桔梗（キキョウ）の花の植え付けと手入れ

JSON Web Tokens

JSON Web Tokens 是什麼？它真的可以用來取代傳統的 session cookies 嗎？ 本篇為研究 JWT 時所做的筆記。

閱讀全文 JSON Web Tokens

Simpler way to load CSS asynchronously

在 Smashing Newsletter 看到的，只要 <link> 標籤就可以簡單把 CSS 變成非同步讀取：

<link rel="stylesheet" href="/path/to/my.css"
        media="print" onload="this.media='all'">

有用過 Google PageSpeed Insight 分析網站的，應該都有看過如下的結果：

PageSpeed screenshot

原因是因為瀏覽器在處理 CSS 與 JavaScript 檔案的時候會阻擋其他資源的載入。解決的 方法裡，JavaScript 類型的資源可以標示 defer 或是 async 屬性讓瀏覽器知道我們 希望可以非同步的載入執行此 JavaScript 檔案，可惜 CSS 並沒有類似的屬性可以使用。

一般處理 CSS 的載入有兩個策略：

  1. 盡量把最重要的樣式內嵌(inline)在 HTML 內，
  2. 用 JavaScript 動態的插入 <link> 標籤。

策略 1. 應該不難理解，因為都已經要下載 HTML 了，不如把少部份最重要的樣式直接也寫 在裡面，可以省下一次網路請求。策略 2. 則是把其他剩餘的樣式集中在一起，用 JavaScript 在網頁讀取完畢後再動態的插入 <link> 標籤讓瀏覽器套用。LoadCSS 似乎是個常用的 library 但是我沒有用過，因為我不喜歡這種需要很多 JavaScript 的解 法。

這次看到的這個方法非常簡單，原本的 CSS 標籤如下：

<link rel="stylesheet" href="/path/to/my.css">

只要再加上 media="print" 以及 onload="this.media='all'" 就可以讓瀏覽器非同步載入 CSS 了！

原理是，瀏覽器在遇到非使用中的 media 時，只會下載但是不會套用樣式，所以設定 media 為 print 可以避免套用 CSS 的時候延遲其他的資源的載入，而 onload 的部 份則是在等到其他資源都載入完畢後，才把 media 切回 all 或是 screen 讓瀏覽器 套用樣式。雖然還是需要一點點 CSS，整體看起來清爽許多，也不需要額外的 library！

如果需要支援沒有開啟 JavaScript 的瀏覽器，記得加上 fallback：

<noscript><link rel="stylesheet" href="/path/to/my.css"></noscript>

完整的範例如下：

<link rel="stylesheet" href="/path/to/my.css"
        media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="/path/to/my.css"></noscript>

我迫不及待的立刻試用了? ∎