首先需要先安裝 Docker Toolbox，工具包包含下面幾種工具

如何自己簽一張 SSL 憑證用於測試

概覽

下面簡易介紹了 SSL 是如何實作以及在整個流程中各個憑證所扮演的角色。

一般網頁傳輸是透過非加密的方式，意思是每一個人只要透過工具都可以存取，並且窺視所有的傳輸內容。
可以見得的，這可能造成一些問題。尤其是在安全和隱私方面，例如信用卡與銀行交易的資訊。
安全套接層協議(Secure Socket Layer)也就是 SSL 是用來加密這些伺服器與客戶端傳輸的資料。
簡單說就是保證兩個應用程式之間通訊的機密和完整性，也可驗證對方的身份。

其實…我想說這可能是最令我感到興奮..但又害怕頭痛的功能… - 原文連結

你曾經想要使用某個 CSS 的新功能，但是最後卻因為這個功能瀏覽器還未全面支援而放棄了嗎？甚至更糟糕的狀況，瀏覽器已經支援了但卻充滿問題。我敢打賭這些情況你肯定遇過了。如果上面這種情形你曾經遇過，那麼你是應該關心一下 Houdini。

• 瀏覽器 cache 是一種機制，透過特定狀態告知瀏覽器不需要重新下載檔案
• cache 最早使用 Expires 和 Pragma，現今主要使用 Cache-Control 來控制
• cache 大略流程，在實際下載檔案之前發生：
  0. cache 的實際處理機制存在瀏覽器中，也就是我們需要透過指令(cache-directives)告訴瀏覽器該怎麼處理
  1. 瀏覽器設定為不提供 cache ，完全忽略下面步驟直接請求資源
  2. 瀏覽器發送請求，此時可包含 cache-request-directive 這部分的資訊主要是拿來和 server 協商比對用的
  3. 伺服器判斷是否有更新並回傳通知 cache-response-directive

line-height 歸納

• line-height 有五種屬性可用，預設是 normal 他會拿 font-size * 1.2
  • normal
  • number ex: 1.2, 1.8 => 倍數
  • unit ex: 18px, 2em, 3rem, etc…
  • percentage ex: 90%
  • inherit => line-height from parent

安裝完 NOOBS 之後…

前言

原文在此，對於 Axel 的文章一直有種雖然短卻難以讀透的感覺。這篇文章是再讀一次的翻譯搭配自己的理解說明，如有錯誤歡迎指教。

說來汗顏，一直以來對於 css 常常是不求勝解。直到自己需要打造自己的輪子才發現對 z-index 完全不熟悉。
關於 z-index 的問題其實非常少人完全明白它到底是怎麼運作的。事實上這並不複雜，不過如果你不曾花些時間閱讀規範可能你不曾察覺一些重要的觀念。

關於下面這三種宣告的差異

當我們使用 Vue.js 搭配 slim 時(事實上 Angular 應該也有相同的問題)時

1
2
3
4
5
6
7
8
9
10

div id="app"
  p {{message}}

javascript:
  new Vue({
    el: '#app',
    data: {
      message: "Hello, Vue.js"
    }
    })

立馬收到Slim::Parser::SyntaxError的錯誤訊息。

但是改成這樣卻又正常

1

div id="app" {{ message }}

好啦！答案很明顯了就是我們有地方寫錯，讓 slim engine 誤會了。

這邊紀錄一下解法：

補上屬性

第一個最簡單的方式就是幫 p 補上隨意一個屬性

1
2
3
4
5
6
7
8
9
10

div id="app"
  p class="" {{ message }}

javascript:
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js',
    }
  })

加上 [], (), {} 任何一種

1
2
3
4
5
6
7
8
9
10

div id="app"
  p () {{ message }}

javascript:
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js',
    }
  })

使用 |

1
2
3
4
5
6
7
8
9
10
11

div id="app"
  p
    | {{ message }}

javascript:
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js',
    }
  })

修改設定

上面的解法都是因為 slim 預設會把 {} () [] 和 tag 後面接的 property=value 當作屬性(attributes)來解析。
所以我們只要把 {} 拿掉就正常了。

新增或修改 config/initializers/slim.rb 加入

1

Slim::Engine.set_options :attr_list_delims => {'(' => ')', '[' => ']'}