幹壞事是進步最大的原動力
目前我在 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 沒支援。
在 Hacker News Daily 上看到 mgartner/pg_flame 這個專案，可以把 PostgreSQL 的 EXPLAIN 結果 (JSON 格式) 轉成 Flamegraph (用 HTML 呈現)：
不過我是直接看 EXPLAIN 的輸出比較習慣... 但如果需要做投影片的時候，應該是個好工具？
「HEAD - A free guide to <head> elements」這篇整理了 HTML 裡 <head> 的標準，以及網路上夠大的廠商所定義的標準 (另外還把中國的瀏覽器也拉出來)。
從目錄就可以看出來講了哪些：
另外一種看法就是，你要怎麼樣讓你的 <head> 塞滿垃圾然後變得很肥... XD
現在 Google Chrome 的穩定版是 77，到了十二月會推出的 79 的時候，就會有一連串的避免 HTTPS 頁面使用 HTTP 資源的措施：「No More Mixed Messages About HTTPS」。
首先是 79 的時候會有新的界面，讓使用者可以修改阻擋類的設定。
到了 80 的時候會試著將 HTTP 的影音 <audio> 與 <video> 升級到 HTTPS 連線，如果 HTTPS 讀不到的話就當作讀取失敗。但圖片 <img> 的部份則是會讀進來，只是安全性上會顯示 Not Secure。
到了 81 就是這系列的最終階段，包括 <img> 也會一使用 80 時影音的邏輯，沒辦法在 HTTPS 上讀到就當作讀取失敗。
早上看到「Tell HN: Thank you for not redesigning Hacker News」這篇，作者在網路速度受限的地區，上各種網站幾乎都不會動，但 Hacker News 沒有改用一堆前端框架，而是保留使用 HTML 反而讓頁面維持極小：
I’m currently in a country with low speed internet and the entire ‘modern’ web is basically unusable except HN, which still loads instantly. Reddit, Twitter, news and banking sites are all painfully slow or simply time out altogether.
To PG, the mods and whoever else is responsible: thank you for not trying to ‘fix’ what isn’t broken.
順手開了一下網路工具來看，發現單一元件最大的居然是 favicon XDDD：
照 Wikipedia 上列出來的相容性，如果只支援 IE11+ 的話，看起來可以改用 PNG，大小就已經有明顯的改善了：
-rw-r--r-- 1 gslin staff 7527 Sep 2 09:50 favicon.ico -rw-r--r-- 1 gslin staff 2598 Sep 2 09:51 favicon.png