幹壞事是進步最大的原動力
在 Hacker News 上看到「Tree views in css」這篇，講怎麼用純 CSS 技巧達到可折疊的 tree view：
主要是用了 ul 與 li 的 html 結構來搭建 tree view 的意義，再透過 <summary> 與 <details> 這兩個本身就有 toggle 能力的元素來操作展開與收合，後面就是 visual effects 的設計了。
從 Can I use 這邊可以看到支援度沒什麼問題 (連 Android 4.4 的 WebView 都支援)，除非你還得跟 IE11 奮戰：「Details & Summary elements」。
在「Using :has() as a CSS Parent Selector and much more」這邊看到 Safari 宣佈對 :has() 的支援，查了一下 Can I use... 上面的資料「:has() CSS relational pseudo-class」，看起來是從 15.4 (2022/05/14) 支援的。
隔壁 Google Chrome 將在下一個版本 105 (目前 stable channel 是 104) 支援 :has()，沒意外的話 Microsoft Edge 應該也會跟上去，看起來只剩下 Firefox 要開了。
先前在「Chromium 的 :has() 實做進展」這邊有翻一下進度，看起來 Chromium 這邊要進入收尾階段了。
等普及後一些延伸套件裡的寫法也可以用 :has() 來處理了，就不用自己在 javascript 裡面檢查半天...
RSS Please 是一套簡單設定 (但應該是對 programmer 簡單)，可以把網頁內容轉成 RSS/Atom feed 的軟體。
我把官網上範例的註解拿掉，可以看到你需要去讀 HTML 頁面的結構，然後找出對應的 css selector：
output = "/tmp" [[feed]] title = "My Great RSS Feed" filename = "wezm.rss" [feed.config] url = "https://www.wezm.net/" item = "article" heading = "h3 a" summary = ".post-body" date = "time"
跟我在 feedgen 上用 Python 做的事情其實差不多，他用了彈性換方便性：rsspls 可以簡單設定一些值就生出一個 feed，而我這邊的 feedgen 需要寫一段 code (雖然不長)；但因為 feedgen 是用 Python 處理事情，所以可以不只可以讀 HTML 也可以讀 JSON API，另外也可以設計一些轉換邏輯 (像是 summary 的部份)。
但有人寫起來推廣總是不錯...
在 Hacker News Daily 上看到「Web Data Render」這個有趣的東西，這個網頁本身是個 JSON，透過一些技巧載入 javascript 後就可以讀取資料 render...
不過網頁本身就不是合法的 HTML 了：「Showing results for https://webdatarender.com/」，只能算是個有趣的作法...
目前我在 blog 上使用 Imgur 的圖檔主要是用 WebP 格式，然後針對不支援 WebP 的瀏覽器 (主要就是蘋果家的 Safari) 是用 JavaScript 換回 JPEG 格式...
昨天早上看到「AVIF has landed」這篇，提醒我有 <picture> 這個原生支援的方式可以用，翻了一下 Can I Use 上面的支援程度，看起來除了 IE11 以外幾乎都支援了 (參考「Picture element」)，而且 IE11 應該也會因為語法的關係走到正確的 JPEG fallback，大概是這樣：
<picture>
<source type="image/webp" srcset="https://i.imgur.com/xxxxxx.webp" />
<img src="https://i.imgur.com/xxxxxx.jpg" alt="" />
</picture>
換完後來觀察看看...
一樣還是 Hacker News Daily 上看到的東西，不過這個東西主要就是趣味性為主而已。這次看到的是純 HTML + CSS 做出來的踩地雷 (Minesweeper)，沒有 JavaScript 在內：「css-sweeper from PropJockey」。
自從 HTML + CSS3 證明是 Turing-complete 後，再加上 CSS 本身又一直加各種互動性質的操作，出現這些東西好像不太意外就是了 XDDD
依照他的說明，這邊用到的 CSS 技巧主要是 Space Toggle 這個技巧 (也就是 --toggler 這個)，但試著找了對應的文獻說明居然沒翻到，有人可以給個 hint 嗎...
在「html-to-svg」這邊看到的，專案在 GitHub 上的「as-a-service/html-to-svg」這邊。
整個服務的程式碼其實很短 (大約 50 行？)，因為主要的業務是透過 Chrome (headless) 生出 PDF 檔，再用 Inkspace 把 PDF 轉成 SVG：「htmltosvg.js」。
主要是 Inkspace 可以做 PDF 轉 SVG 這件事情算是新知...
這次 jQuery 3.5.0 修正了一個安全性漏洞：「jQuery 3.5.0 Released!」，不過實測了一下，不完全算是 jQuery 的自己出的問題，比較像是幫使用者擦屁股。
jQuery 的說明如果看不懂，可以交叉參考「XSS Game」這篇的說明，搜尋 htmlPrefilter 應該就可以看到了。
這次修正的函數是被 html() 用到的 htmlPrefilter()，這個函數會在 3.5.0 之前會把 <tag/> 這樣的元素轉成 <tag></tag>，而 3.5.0 之後會保留本來的形式。
利用這個特性，就可以用這樣的字串來打穿 WAF：
<style><style/><script>alert(1)<\/script>
原因是 WAF 在看到時會以為 <script> 是 <style> 內部的 data 而認為不是 XSS 攻擊而穿過 WAF 的檢查，但實際上被 jQuery 展開後變成：
<style><style></style><script>alert(1)<\/script>
而最前面的 <style><style></style> 被當作是一包，後面的 <script> 就成功被拉出來執行了。
這是相同程式碼使用 jQuery 3.4.1 與 jQuery 3.5.0 的差異，我把 alert(1) 改成 document.write(1)，比較容易在 JSFiddle 上看出差異：
不過回過來分析，會發現一開始用 html() 才是問題的起點，要修正問題應該要從這邊下手，而不是用 WAF 擋...
看到「MVP.css — Minimalist stylesheet for HTML elements」這個，目標是只需要寫 semantic html，剩下的就交給 css 處理：
No class names, no frameworks, just semantic HTML and you're done.
這種專案主要是看樣式喜不喜歡，畢竟選這種方案主要目的就是「懶」而不是要做太多效果，之後有機會來用看看...
在「HTML attributes to improve your users' two factor authentication experience」這邊看到關於讓使用者輸入 2FA (通常是數字) 比較流暢的設定。
原始是上面這張這樣，目標是希望下面這張這樣，當透過 SMS 2FA 時可以提供選項直接貼上，而且也自動帶出數字鍵盤：
給出的幾個重點在於 inputmode、pattern 以及 autocomplete：
<input type="text" name="token" id="token" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" />
查了一下 caniuse.com 上面的支援度，pattern 基本上都支援了，autocomplete 在這邊用到的 one-time-code 基本上也沒問題，只有 inputmode 這邊支援度比較差，IE11 (基本上不會更新了)、Firefox 與 Safari 沒支援。