Skip to main content

2-7

CSS Preprocessors with calc()​

在 CSS 預處理器中若要使用 calc 功能搭配 variable 來計算，各預處理器的寫法如下：

Stylus:

max-width: "calc(100vw - %s - %s)" % ($icon-size * 1.1 $icon-position * 2)

Scss Sass: height: calc(#{$xl-height} + 7px);

window.open()​

各家瀏覽器實作在行為上有些差異，歸納如下：(Safari、Firefox、Chrome 為實測，IE、Edge 為查資料而來)

  • window.open(url)，未指定 width、height，除了 IE 其他瀏覽器都會在新頁籤開啟網頁
  • 在瀏覽器全螢幕的情況下：不論設置為何都會在新頁籤開啟網頁，除了 IE
  • window.open(url,'name','width=320,height=200')，指定 width、height，各家瀏覽器都會依寬高開新視窗
  • window.open() 時指定 width 或 height 其一， Chrome、Edge 則會無視設定值，沿用瀏覽器目前的寬高開啟新視窗，其他瀏覽器會在新視窗開啟指定寬或高網頁，另一項數值沿用原網頁
  • IE 的 window.open() 是在 showModalDialog 開的網頁裡執行，強制視窗沒有頁籤概念，所以只能開新視窗

Date.toLocaleString()​

  • 首個參數為 locales 字串，能輸出成該語言的時間格式，第二個參數為 options 物件，能控制要輸出哪些時間欄位與顯示方式

範例程式碼：

const d = new Date(1625673600000)
const dateFormat = `${d.toLocaleString('en', {year: 'numeric'})}-${d.toLocaleString('en', {month: '2-digit'})}-${d.toLocaleString('en', {day: '2-digit'})}`
// dateFormat = "2021-07-08"
d.toLocaleString('ja', { year: '2-digit', month: 'long', day: 'numeric', weekday: 'long' })
// "21年7月19日月曜日"

  • numeric，完整顯示數字
  • 2-digit，顯示數字，若只有一個的話前面會補零，超過兩個則會留最後兩個
  • long，顯示該語言的月份或星期完整名稱，month 與 weekday 可用

MDN 上提醒： 別用 toLocaleString() 得到的字串和其他相同的字串做比對，在 IE 與 Edge 下會是 false。

Certbot​

  • Certbot 是一種用於申請免費 HTTPS 憑證的 cli 工具，使用 Let's Encrypt 的免費 HTTPS 服務，Let's Encrypt 是由 Mozilla、Cisco、Google 等大公司共同贊助推動的服務，主要是要推廣大家都來簽 HTTPS，讓網路更安全。
  • 首先在要申請憑證的 server 上安裝 cerbot 工具 (因作業系統的差異，安裝指令不太一樣，例 apt-get install certbot 、yum install certbot)
  • 接著如果有用 Nginx 或 Apache 等等的伺服器的話也可以接著安裝 python-certbot-nginx，此套件可以幫你自動寫入憑證需要的相關配置在該伺服器的配置檔上。
  • 接著執行 certbot，certbot 指令後面可以帶許多參數，詳情可以看官方文件。例如 certbot --nginx，即會使用上述安裝的 python-certbot-nginx 套件。
  • 接著輸入些資料就可以等指令完成裝好憑證了
  • 上述流程為自動申請，也可以依照個人需求使用手動申請

ACME​

任何實作 ACME 協定，都可以向 Let's Encrypt 的免費 HTTPS 憑證，效期為三個月，到期後可用 certbot renew 刷新憑證。 certbot 在上面的自動申請會幫你配置好並跑過 ACME 的流程，若用手動申請則需要下列的步驟：

  • certbot certonly
  • 接著詢問是否同意條款，輸入信箱等等
  • 接著是準備發出憑證請求，有兩個挑戰可以任意選一個完成 (dns-01, http-01)，(若要申請的 SSL 憑證網域為萬用網域則並須得用 dns-01)
  • dns-01 沒有實際操作過，可參考其他網上其他資源
  • http-01 挑戰要你在官網建立一個特殊網址路徑的文字檔案，而且必須可以讓 Let's Encrypt 網站能夠公開存取該網址，而且一定只能走 Port 80 進行 HTTP 連線，不能使用任何其他埠號，如此一來才能驗證你就是該網站的擁有者。
  • 網址路徑：/.well-known/acme-challenge/XXXXXX-XXXXXXX-XXXXX
  • 檔案內容：XXXXXX-XXXXX-XXXX.XXXXX
  • 認證完成後會產生4個檔案：
  • cert.pem : 主要的伺服器憑證
  • privkey.pem : 伺服器憑證的私密金鑰(private key)（注意：此憑證並未設定密碼）
  • chain.pem : 中繼憑證，有些網站伺服器會需要特別安裝（e.g. OCSP stapling in Nginx >=1.3.7）
  • fullchain.pem: 完整的憑證鏈，裡面包含所有憑證（伺服器憑證+中繼憑證）
  • 接著如果是用 Nginx 架設的伺服器的話，則需要在該 config 檔中配置上列憑證的位置在哪
  • 完成手動申請

Crontab​

Crontab 在 Linux 和 Ubuntu 主機上可以設置排程工作。

crontab -e // 編輯排程內容
crontab -l // 查看目前的排程
crontab -r // 刪除目前所有排程

範例：

0 0 1 */2 * certbot renew >> /srv/certbot-auto-renew.log 2>&1

關於前面 5 個符號表示時間規則可以參考此網站來練習符合需求的時間規則。 上述範例是每兩個月執行一次 certbot renew 並將輸出寫到指定的 log 檔內。 續前日筆記的 SSL 免費憑證有效期只有三個月的問題，可用此排程自動重新刷新憑證有效期。

service crond reload // 使新的 crontab 設置生效
Last updated on