語意化的 CSS 設定 (Contextual awareness) 減少 side effect

前幾天在 Hacker News 上看到 CSS-Tricks 上的文章「You want enabling CSS selectors, not disabling ones」這篇,在講 CSS 的設計問題,對應的 Hacker News 討論在「You want enabling CSS selectors, not disabling ones (css-tricks.com)」這邊。

文章裡面引用文章裡面提到的文章也都蠻值得看的:「You want enabling CSS selectors, not disabling ones (2021/03/08)」、「Axiomatic CSS and Lobotomized Owls (2014/10/21)」。

其中 2014 年那篇居然是 A List Apart 上的文章,好久沒看到了這個站了... 也發現居然不在 RSS/Atom feed 清單裡面,重新訂起來。

這邊拿 A List Apart 上面的圖來說明,出自「CONTEXTUAL AWARENESS」這個段落的例子。

在很多段落時,我們常使用 margin-top (或是 margin-bottom,例子可以自己變換) 來設定間距,也就是 (a) 的例子。但可以看到第一個元素就會「多出來」:

A List Apart 裡面提到的解法是 * + * (或是 p + p,看你怎麼選 CSS selector),也就是前面有相鄰的元素才需要設定 margin-top

回到 CSS-Tracks 上的文章,有些人會這樣指定 CSS (這邊用 margin-bottom,所以搭搭配的是 :last-child):

.card {
  margin-bottom: 1rem;
}

/* Wait but not on the last one!! */
.parent-of-cards :last-child {
  margin-bottom: 0;
}

也就是全部都先加上 margin-bottom,然後針對最後一個元素拿掉 margin-bottom。而另外的版本則是:

.card:not(:last-child) {
  margin-bottom: 1rem;
}

或是:

/* Only space them out if they stack */
.card + .card {
  margin-top: 1rem;
}

這樣就不用蓋來蓋去,可以降低 side effect:margin-bottom 可能會在其他地方指定,你設為 0 可能是不對的值;另外寫成兩組時 CSS 的優先順序其實是不同的,Mozilla 的 Specificity 可以參考,Specifishity 這個網站給了很有趣的 cheatsheet (你要先了解才能當 cheatsheet 用):

在文章最後面有提到 gap 這個用法,查了一下「CSS property: gap: Supported in Grid Layout」,看起來現代的瀏覽器應該是都支援了,不過如果要支援舊的瀏覽器的話就是問題...

另外順便提一下,早期大家會偏好用 + 是因為 IE7+,而 :last-child 則是 IE9+ 了:「CSS Selectors and Pseudo Selectors and browser support」。雖然現在看起都是時代的眼淚了,但可以了解一下 2014 年的時候為什麼會偏好 + 的設計。

Mozilla 對 Alexa Top 1M Sites 的分析

MozillaAlexa Top 1M Sites 偏安全面向的分析:「Analysis of the Alexa Top 1M Sites」。

對一般情況比較有用的應該是看絕對數字,也就是哪些功能是大家都優先採用了... 然後可以看出 HPKPSRI 果然是大家都懶得上的功能 (事倍功半 XDDD)。

另外也可以當作是安全性確認的 list,把 HTTP header 類的安全性設定都放上去了。

AWS WAF 提供隨時更新的 Managed Rules

AWS WAF 推出了隨時更新的 Managed Rule:「Ready-to-Use Managed Rules Now Available on AWS WAF」。

這些 ruleset 是由 3rd-party 提供的:

Choose from preconfigured RuleGroups provided in the AWS Marketplace by industry leading security experts: Alert Logic, Fortinet, Imperva, Trend Micro and TrustWave.

然後隨時更新:

Rules are automatically updated as new threats emerge and offer a wide range of protections, including OWASP Top 10 mitigations, bad-bot defenses, and virtual patching against recent CVE’s.

然後是要收費的:

Each RuleGroup is the product of a Seller’s unique expertise, made available to you at an affordable pay-as-you-go price.

AWS Marketplace 的「Managed Rules for AWS WAF - Web Application Firewall」裡拿兩家來看看。

趨勢的「Trend Micro Managed Rules for AWS WAF - WebServer (Apache, Nginx)」與「Trend Micro Managed Rules for AWS WAF - Content Management System (CMS)」都是:

Charge per month in each available region (pro-rated by the hour) $5.00 / unit
Charge per million requests in each available region $0.20 / unit

Imperva 則是提供不一樣的選擇,在「Imperva - Managed Rules for WordPress Protection on AWS WAF」是:

Charge per month in each available region (pro-rated by the hour) $30.00 / unit
Charge per million requests in each available region $0.60 / unit

而「Imperva - Managed Rules for IP Reputation on AWS WAF」則是:

Charge per month in each available region (pro-rated by the hour) $40.00 / unit
Charge per million requests in each available region $0.40 / unit

Alexa Top 1M 網站使用 HTTPS 的改善

Mozilla 觀測 Alexa Top 1M 網站,對 HTTPS 使用情況的分析:「Analysis of the Alexa Top 1M sites」。

可以看到比較明顯的是 HTTPS 以及 HTTP → HTTPS Redirection 這兩塊:

不過用 Alexa 的資料有種怪怪的感覺啊... 在討論 HTTPS (有點在推廣的感覺),但 Alexa 的網站現在是做反過來的 HTTPS → HTTP Redirection XDDD

SaltStack 的 Masterless 模式

最近在試 SaltStack,先從 Masterless 模式開始玩,可以拿來練習寫 SaltStack 專門的 sls 檔。相關的文件可以參考「Standalone Minion」這篇。

我是裝 Ubuntu 14.04.1 LTS,然後用 ppa 裝 SaltStack 最新版,避免與與官方的文件差異太大:

# apt-add-repository ppa:saltstack/salt
# apt-get update
# apt-get install salt-minion

然後建立 /srv/salt 後就可以在這個目錄下面開始做事。這個目錄是 SaltStack 的預設值 (可以參考 /etc/salt 下面的檔案),所以不需要另外再設定:

# mkdir /srv/salt
# cd /srv/salt

SaltStack 讀取的起點預設是 top.sls,這個檔案預設的格式是 YAML

base:
    '*':
        - default

然後就可以寫 default.sls

most:
  pkg:
    - installed

locale:
  cmd.run:
    - name: locale-gen zh_TW.UTF-8

然後在機器上呼叫 salt-call 執行:

# salt-call --local state.highstate

或是開 debug 訊息:

# salt-call --local -l debug state.highstate

這樣就可以看到各種輸出結果了。這樣應該就會看到 most 被裝起來,另外 zh_TW.UTF-8 的 locale 應該也會生出來。

OWASP's Top 10,2013 版

Slashdot 上看到 OWASP 給出 2013 年的網站安全威脅 Top 10 名單:「OWASP Top 10 2013 Released」。

一如往常,Slashdot 的第一個 comment 還是很經典 XDDD

The offered list of vulnerabilities is in a pdf.

這... XD

在 Wiki 上有一份非 PDF 的版本可以看:「Category:OWASP Top Ten Project」,可以跟「Rails' Insecure Defaults」(副標題「13 Security Gotchas You Should Know About」) 一起看 (不是看 Rails 的問題,是看有哪些攻擊技巧)。

memkeys:用 C++ 寫的 mctop (memcache top)

在「mctop:memcache top」介紹過由 Etsy 所開發的 memcache top 工具 mctop

這套軟體用 Ruby 寫,其實就是個 sniffer + packet analyzer,但這套軟體有效能問題。在流量很高的時候無法處理所有封包,而變成 sampling 類型的監控。

Tumblr 用 C++ 新寫了一個版本,叫做 memkeys。依照軟體的說明,在 1Gbps 滿載時 mctop 約 50% 到 75% 的 packet drop (sampling rate 約 25% 到 50%),而 memkeys 只有 3% packet drop (sampling rate 約 97%):「Open Source - Memcache Top」。

This was originally inspired by mctop from etsy. I found that under load mctop would drop between 50 and 75 percent of packets. Under the same load memkeys will typically drop less than 3 percent of packets. This is on a machine saturating a 1Gb network link.

效能好不少 :p

mctop:memcache top

mctop 其實是個看得懂 L7 packet 的 sniffer XDDD

軟體是由 Etsy 所開發,出自:「mctop - a tool for analyzing memcache get traffic」。跑起來像這樣 (官方的範例圖):

GitHub 頁面上官方有提到因為是透過 ruby-pcap,目前沒有辦法完全承載大流量 (會有 packet loss),不過看起來是 profiling 必備工具 :p