jQuery 官方鼓勵大家記得使用新版的 jQuery...

的確是很多人掛完 jQuery 後就沒動過了:「Upgrading jQuery: Working Towards a Healthy Web」。

jQuery 官方提供的三個切入點都是安全性的問題,Security Vulnerabilities、Security Best Practices 以及 Compliance Requirements。

相容性是 jQuery 的強項,有些 deprecated 的功能,官方還是有提供 jQuery Migrate 讓這些功能先補回來繼續用。

目前 jQuery 3.x 支援的瀏覽器環境,以今天的角度來看其實還是很誇張:「Browser Support」,桌機上有 IE9+ (在 Windows Vista SP2 以及之後的版本),而行動裝置上 Android 是 4.0+ (2011 年),Safari 是 iOS 7+ (iPhone 4,CDMA 版 2011 年)。

即使是 jQuery 4 (目前是 beta,參考「jQuery 4.0.0 BETA!」) 也還是支援 IE11 (Windows 7 SP1),算是對於舊系統照顧的很好的 javascript library。

Gitea 預定淘汰掉 jQuery + Fomantic-UI + Semantic-UI,改用 Tailwind CSS

在「So long jQuery, and thanks for all the fish」這邊宣佈了 jQuery 的退役計畫,會改用 Tailwind CSS

We would like to celebrate the significant work done to remove a significant portion of jQuery in our codebase and the start of the switch to using Tailwind CSS.

We would also like to thank the creators and maintainers of jQuery, Fomantic-UI, and Semantic-UI which we have used for many years, and while the usage of these projects in Gitea will be going away, they have powered Gitea's interface for almost an entire decade.

不確定是不是一個好的方向,因為在這十年前端的「蓬勃發展」後,jQuery 其實比較起來變得非常輕量 (87KB,如果是 gzipped 後則是 30KB),而且從一開始 John Resig 就很在意執行速度,不像現在各種 framework 都是抽象再抽象,沒在管效能的...

目前應該會在 Gitea 1.22 亮相,到時候可以看看改出來的結果...

Cloudflare Workers 支援 Python (是 open beta)

Cloudflare 宣佈 Cloudflare Workers 支援 Python:「Bringing Python to Workers using Pyodide and WebAssembly」。

不過比較特別的是,並不是原生支援 Python 環境,而是透過轉譯成 WebAssembly 丟進 V8 engine 執行,就如同文章標題提到的。

另外是套件的部分,照這個文字的說明,應該不是所有的套件都可以丟進去用 (can import a subnet of popular Python packages),支援的套件看起來是預先 compile 好:

All bindings, including bindings to Vectorize, Workers AI, R2, Durable Objects, and more are supported on day one. Python Workers can import a subset of popular Python packages including FastAPI, Langchain, Numpy and more. There are no extra build steps or external toolchains.

看起來是打算全部都用 javascript 當作基礎?

UI Event 的順序

othree 寫了一篇「UI Event Order」在講滑鼠 (或是更廣廣義的 pointer 類) 以及鍵盤 (包括輸入法) 在瀏覽器上會產生的 event。

裡面有些是歷史 (提到 IE 上的實作方式),現在都不太會碰到了,可以直接看目前的幾份標準就好,然後蠻多標準都還是在 draft 階段,各家瀏覽器更新的速度不一樣,所以會有不同的行為冒出來。

我決定先把文章保留起來,等遇到的時候再回來看 XD

用 Brave 的 brave://flags 設定

因為 Brave 會繼續支援 webRequest 的完整功能,所以早早就已經跳槽過來,不過 Brave 的垃圾功能太多 (一堆 cryptocurrency 相關的功能),有需要全部關掉,所以裝好後第一件事情就是到 brave://flags 裡面把所有 Brave 自家功能的設定關光光,只留下 Brave Sync V2 的功能。

先前都是用滑鼠一個一個關,剛剛覺得太累了,研究一下 js 直接在 dev console 裡面關:

document.querySelector('flags-app').shadowRoot.querySelectorAll('flags-experiment[id^=brave]').forEach(flag => {
  flag.shadowRoot.querySelectorAll('option').forEach(o => {
    if (o.innerText === 'Disabled') {
      o.selected = 'selected';
      o.parentElement.dispatchEvent(new Event('change'));
    }
  });
});

這樣會全部把 brave 開頭的 feature flag 都關掉;最後再手動把 Sync V2 開回來就可以重開 Brave 了。

後續就是 GUI 上面的選單再調整成自己要的。

這邊搞 javascript 的部分有遇到四個地方要處理... 第一個是現在 dev console 預設不讓你貼東西進去,貼了以後會顯示要輸入 allow pasting 後才行,這個字串以及方法之後不知道會不會改。

第二個是遇到 querySelectorAll 穿不過 shadow DOM,所以可以看到程式碼裡面需要先選出 shadow DOM 元素,用 shadowRoot 鑽進去再 querySelectorAll 一次。

第三個是 css selector 沒辦法針對 innerHTML 或是 innerText 的內容判斷,所以得自己拉出 option 後對 innerText 判斷。

最後一個是改變 select 的值後,得自己觸發 change event,這樣才會讓 Brave 偵測到並且儲存。

各家首頁 JavaScript 的大小

看到「JavaScript Bloat in 2024 (tonsky.me)」這篇在講各家首頁 JavaScript 的大小,原文在「JavaScript Bloat in 2024」這邊。

作者 Nikita Prokopov 創造了很多 open source project,我比較有印象的是 Fira Code,這篇比較像是他在抱怨現在的網站...

裡面站台一堆都是 10MB+ 的 JavaScript 在跑的,突然提到 P 站只有 1.4MB 的時候笑了出來 (在 Hacker News 的 comment 裡面也有人提到這個):

Compare it to people who really care about performance — Pornhub, 1.4 MB:

另外 Jira 也被拿出來鞭:

Here, Jira, a task management software. Almost 50 MB!

但趨勢看起來不可逆?現在開發網站一堆都搞前後端分離,用 JavaScript 產生出所有頁面,然後再想辦法補 SEO...

展開所有 GitHub comment 的 Bookmarklet

看到 Eric Meyer 弄了一個可以展開 GitHub comment 的 bookmarklet:「Bookmarklet: Load All GitHub Comments」。

分析他的程式碼,稍微手動排一下,可以看出來邏輯蠻簡單的,就是去找出對應的 button,然後模擬按下去的 event:

javascript:function start() {
  let buttons = document.querySelectorAll('button');
  let loaders = [];
  for (let i = 0; i < buttons.length; i += 1) {
    if (buttons[i].textContent.trim() == 'Load more%E2%80%A6') {
      loaders.push(buttons[i]);
      buttons[i].dispatchEvent(new MouseEvent('click', {
        view: window,
        bubbles: false
      }))
    }
  }
  if (loaders.length > 0) {
    setTimeout(start, 5000)
  }
}
setTimeout(start, 500);
void(20240130);

意外可以看到一些應該是作者以前寫習慣的寫法 (畢竟 Eric Meyer 這個名字二十年前就聽過了?),現在 for 拿來當 iteration 應該會用 of 的語法了,另外是 letconst 的差異...

還好這邊還是用 querySelectorAll(),而不是直接看到 getElementsByTagName(),不然就更有考古感了...

拿「Quadratic time internal base conversions #90716」這個測了一下還行,不過我不是那麼常用到,大概不會掛到 bookmark bar 上面...

作者有提到考慮過寫成 userscript,不過看起來是懶 XD

jQuery 4.0.0 Beta (啊,居然)

看到 jQuery 的公告「jQuery 4.0.0 BETA!」這篇,有種「啊,居然」的感覺冒出來...

要注意這個版本放掉了 IE10 以及更早的版本,但還是有支援 IE11,目前計畫到 jQuery 5.0 才會拔掉:

jQuery 4.0 drops support for IE 10 and older. Some may be asking why we didn’t remove support for IE 11. We plan to removes support in stages, and the next step will happen in jQuery 5.0.

另外一個頗大的改變是 source 端改成 ES module 了,這樣對 jQuery 團隊開發上應該會方便不少 (很多現代工具的引入):

jQuery source migrated to ES modules

It was a special day when the jQuery source on the main branch was migrated from AMD to ES modules. The jQuery source has always been published with jQuery releases on npm and GitHub, but could not be imported directly as modules without RequireJS, which was jQuery’s build tool of choice. We have since switched to Rollup for packaging jQuery. And we also run tests on the ES modules before packaging them.

這有種古蹟改建的味道啊...

SQLite 官方提供的網頁版 playground

Hacker News 上看到「Sqlite3 Utility in the Browser (sqlite.org)」這個,看了一下是官方提供的 playground:「SQLite3 Fiddle」。

https://sqlite.org/fiddle/fiddle.js 這邊可以看到 2022 年就有的東西,在 Internet Archive 上也可以看到也是差不多時間被記錄下來的:「Saved 21 times between August 12, 2022 and January 24, 2024.」。

看起來是用 WebAssembly 包起來的,不過如果是自己的機器,本機跑 sqlite3 好像會方便一些...

Ruffle 對 crossdomain.xml 的處理方式

ruffle 是一個 open source 的 Flash 模擬器,用 JavaScript (以及 WebAssembly) 讓使用者可以在瀏覽器裡面直接執行。

不過想到 Flash 的 crossdomain.xml 在技術上應該是沒辦法繞過瀏覽器對 CORS 的限制,所以找了一下目前的情況... 在「Ideas for getting arounds CORS restrictions #8972」這邊有提到兩個方法,另外 comment 提到了「Add setting to spoof URLs in network requests #1486」這個。

看起來這個問題還在「有點子,但沒解決」的情況。

不過找了一下當年有玩的小遊戲 Zookeeper,在「Zookeeper - Flash Games Archive | FlashArch」這邊可以玩,看起來功能都還算正常,讓人懷念啊...