jQuery UI 與 jQuery Mobile 進入維護模式

OpenJS Foundation (先前的 jQuery Foundation) 宣佈 jQuery UIjQuery Mobile 進入維護模式:「jQuery maintainers update and transition jQuery UI as part of overall modernization efforts」、「jQuery maintainers continue modernization initiative with deprecation of jQuery Mobile」。

jQuery UI is in maintenance-only mode. Users should not expect any new releases, though patches may be issued to resolve critical security, interoperability, or regression bugs.

The team announced that the cross-platform jQuery Mobile project under its umbrella is fully deprecated as of October 7, 2021.

應該就是沒有足夠的動能繼續開發了,維持個窗口在有 security issue 時處理...

DST Root CA X3 將在今天 22:01:15 過期

先前提到 Let's Encrypt 發出的憑證在 9/30 會產生問題,主因是 IdenTrustDST Root CA X3 會在 9/30 過期,交叉簽名加上 OpenSSL 1.0.2 的判斷條件太嚴格導致的:「OpenSSL 1.0.2 與 Let's Encrypt 在這個月月底的相容性問題」。

本來以為是 UTC 的 2021/09/30 23:59:59 之類的時間,結果因為要面對這個問題,需要確認正確的時間,結果發現不是 UTC 的 2021/09/30 23:59:59,而是一個奇怪的時間:

Validity
    Not Before: Sep 30 21:12:19 2000 GMT
    Not After : Sep 30 14:01:15 2021 GMT

所以是 2021/09/30 22:01:15 (台灣時間) 會過期,今天晚上可以看一下情況...

NLB 接 ALB?

AWS API Changes 上看到這個修改:「2021/09/27 - Elastic Load Balancing - 3 updated api methods」。

說明是這樣:

Adds new ALB-type target group to facilitate forwarding traffic from NLB to ALB

所以是 NLB 可以接到 ALB 嗎,這看起來讓彈性變大不少...

美國聯邦政府 CIO 以資安理由建議安裝 ad block 軟體

Hacker News Daily 上看到的,美國聯邦政府的 CIO Clare Martorana 行文建議行政管理和預算局 (Office of Management and Budget) 安裝 ad block 軟體以確保資訊安全:「The NSA and CIA Use Ad Blockers Because Online Advertising Is So Dangerous」。行文的文件在「Wyden Letter to OMB on Ad-Blocking」這邊可以看到,另外在 Hacker News 上的討論「The NSA and CIA use ad blockers (vice.com)」也可以翻。

有很多惡意軟體 (像是 malware) 會透過合法的 ad network 散布,然後竊取資料,甚至是透過麥克風監聽環境音:

I write to urge the Office of Management and Budget (OMB) to protect federal networks from foreign spies and criminals who misuse online advertising for hacking and surveillance, by setting clear new rules for agencies in its forthcoming “zero trust” cybersecurity policy.

I have pushed successive administrations to respond more appropriately to surveillance threats, including from foreign governments and criminals exploiting online advertisingto hack federal systems. This includes seemingly innocuous online advertisements, which can be used to deliver ‘malware to phones and computers—often without requiring users to click anything. This ‘malware can steal, modify or wipe sensitive government data, or record conversations by remotely enabling a computers built-in microphone.

記得我是從 Firefox 還叫做 Phoenix 的時代就在用 ad blocker 了... 建議大家一定要裝啊,以現在來說應該都是裝 uBlock Origin,在有支援 extension 的瀏覽器都有商店可以直接安裝。

用 Gecko Engine 寫的另外一個瀏覽器 Dot

Hacker News 首頁上看到 Dot 這個瀏覽器,平常看各種標語已經麻木了 (什麼 privacy enhanced 之類的),讓鄉民看上眼的是,這是一個 Gecko 寫的瀏覽器,也就是 Firefox 的底層,而不是 Blink (就 Google Chrome 那個系列):「Dot Browser – privacy-conscious web browser (github.com/dothq)」。

抓下來跑了一下,看起來就如同 GitHub 頁面上的警告:

Dot Browser is alpha software, and you will most likely experience bugs and issues!

目前功能也超陽春,還沒支援 extension 之類的東西... 不過是有內建 ad blocking 與 usercss 的能力,算是基本盤吧。

可以放著看看發展的如何...

Cloudflare Images

Cloudflare Images 開放付費使用了:「Cloudflare Images Now Available to Everyone」。

檔案傳到 Cloudflare 上面,然後另外收處理費用:

You pay $5/month for every 100,000 stored images and $1 per 100,000 delivered images. There are no additional resizing, compute or egress costs.

檔案大小的限制是 10MB,所以 $5/month 的 storage 最多可以提供 1TB 的空間,$0.005/GB 算是很漂亮的數字,如果是小圖的話就會比較虧一些?看起來丟大圖會開心一點...

Cloudflare Images offers multiple ways to upload your images. We accept all the common file formats including JPEG, GIF and WEBP. Each image uploaded to Images can be up to 10 MB.

然後支援的檔案格式有常見的 GIFJPEGPNG 以及 WebP

When a client requests an image, Cloudflare Images will pick the optimal format between WebP, PNG, JPEG and GIF.

另外有計畫要支援 AVIF

We’re just getting started with Cloudflare Images. Here are some of the features we plan to support soon:

AVIF support for even smaller file sizes and faster load times.

沒提到 durability,不知道會有多少...

弄個 whoogle.hasname.com 給大家玩

先前提到的 Whoogle:「自架的 Google Search Proxy 伺服器專案:Whoogle Search」與「改寫「Press "g" to Google (DuckDuckGo)」讓他支援 Whoogle」,後來想一想還是讓沒打算自己架的人可以用好了,指到國外的 latency 還是比較高...

如果你是 Chromium 類的瀏覽器,可以把搜尋引擎改成:

https://whoogle.hasname.com/search?q=%s

如果是我寫的 userscript (「Press "g" to Google (DuckDuckGo)」這個),可以改成:

https://whoogle.hasname.com/search?q=

然後 nginx 這邊先 access_log off; 了,理論上這樣應該是差不多了?

目前機器是放在客廳 (加 UPS),之後可能會丟到台灣的 VPS 上?

Firefox 支援 HTTPS RR

在「Firefox 92.0, See All New Features, Updates and Fixes」這邊看到支援 HTTPS RR:

More secure connections: Firefox can now automatically upgrade to HTTPS using HTTPS RR as Alt-Svc headers.

在「Enabling HTTPS RR on release」這邊決定啟用的,使用的標準是「Service binding and parameter specification via the DNS (DNS SVCB and HTTPS RRs)」這個,可以看到目前還是 draft (draft-ietf-dnsop-svcb-https-07)。

HSTS 是 Trust on first use,也就是在第一次連線時 server side 會送出 HSTS header,之後瀏覽器遇到同一個網站時就會都強制使用 HTTPS。

如果要確保第一次也是強制使用 HTTPS,在這之前必須靠瀏覽器內建的清單 HSTS Preload List 才能確保安全性,這次的 HTTPS RR 算是補上這個缺口。

在使用者環境有 DNS over HTTPS (DoH) 或是 DNS over TLS (DoT),再加上 DNS resolver 會檢查 DNSSEC 的前提下,整條環境就接起來了。

不過實際讀了 spec 會發現 SVCB RR 與 HTTPS RR 想做的事情太多了,話說愈複雜的東西愈容易出包,先放著觀望看看好了...

改寫「Press "g" to Google (DuckDuckGo)」讓他支援 Whoogle

前幾天提到了 Whoogle 這個專案 (參考「自架的 Google Search Proxy 伺服器專案:Whoogle Search」),用 Docker 跑起來後就改寫「Press "g" to Google (DuckDuckGo)」這個專案,讓他可以支援設定 Whoogle,大概像是這樣:

使用者可以自己設定對應的 Whoogle 伺服器,這樣應該會方便一些...

語意化的 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 年的時候為什麼會偏好 + 的設計。