jQuery 3.6.2

看到 jQuery 出新版的消息:「jQuery 3.6.2 Released!」。

這個版本的說明裡面針對了 :has() 這個功能著墨,主要還是因為這功能 jQuery 支援很久了,而 ChromiumSafai 在最近都開始支援了:「Issue 669058: CSS selectors Level 4: support :has()」、「Using :has() as a CSS Parent Selector and much more」。

不過看起來 jQuery 要整合原生的 :has() 還是有技術困難,因為裡面可能會包括 jQuery 自己定義的 selector extension:

That was problematic in cases where :has() contained another jQuery selector extension (e.g. :has(:contains("Item"))) or contained itself (:has(div:has(a))).

總之,難得又看到 jQuery 的消息... 前一版的 3.6.1 是 2022/08/26,而 3.6.0 則是再一年多前的 2021/03/02,再往前面是 3.5.1 的 2020/05/04 與 3.5.0 的 2020/04/10。

是個歷史...

SQLite 官方自己下來搞 WASM/JS 計畫

先前在「把 SQLite 的 VFS 掛上 WebTorrent 的 PoC Demo」有提過 sql.js 這個專案,把 SQLite 移植到網頁上,這些都算是非官方的社群弄出來的專案。

現在官方直接跳下來玩,宣佈自己也要搞 WASM/JS 了:「sqlite3 wasm docs: About the sqlite3 WASM/JS Subproject」。

Folks have been building sqlite3 for the web since as far back as 2012 but this subproject is the first effort "officially" associated with the SQLite project, created with the goal of making WASM builds of the library first-class members of the family of supported SQLite deliverables.

但不太確定 D. Richard Hipp 的想法,官方支援 WASM/JS 的目的會是什麼?放給社群繼續發展有什麼問題嗎...

JavaScript 上的 fuzzy search library

Hacker News Daily 上看到 Show HN (作者自己或是主要的 contributor 上來發表的作品) 給了一個號稱速度很快,吃資源很少的 fuzzy search library:「Show HN: uFuzzy.js – A tiny, efficient fuzzy search that doesn't suck (github.com/leeoniya)」。

這種已經發展許久,但突然有一天有人說他的東西超好超棒棒的,除非是有新的基礎演算法突破,不然馬上就會想到很經典的「Three circles model」,中間的那些區塊就懶的畫上去了:

依照他的「測試」,可以看到他宣稱完全領先的狀態:

但回過頭來看評論:

Thank you for this!

I am also quite frustrated with the current state of full text search in the javascript world. All libs I've tried miss the most basic examples and their community seems to ignore it. Will give yours a try but it already looks much better from the comparison page.

Edit: Nope, your lib doesn't seem to handle substitution well (THE most common type of typo), so yep, we are back to square one ...

From fuzzy search I expected that entering "super meet boy" or "super maet boy" will return "Super Meat Boy" but unfortunately currently it doesn't work this way and it's quite disappointing.

https://leeoniya.github.io/uFuzzy/demos/compare.html?libs=uF...

看起來這個 library 沒有辦法解決 fuzzy search 最常見的 case (小 typo),依照範例描述的更像是 substring 搜尋加上一些額外的的功能,反而比較像是 auto completion library,或是講的比較廣一點,可以算是 auto suggestion library。

不過我覺得真正的重點 (對我來說的重點) 是下面的比較表格,因為列出了目前市場上的方案,這份清單之後可以拿來參考...

用 JavaScriptCore 實做的一站式方案 Bun

前幾天在 Hacker News 上討論得很熱烈的 Bun:「Bun: Fast JavaScript runtime, transpiler, and NPM client written in Zig (bun.sh)」。

從 Hacker News 上的標題上就可以看到 Bun 做了不少事情,看起來想要打造一個 all-in-one 環境,把所有開發與 server 端 JavaScript 所需要的東西就一次包進來,不需要在自己東挑西挑...

比較特別的是 Bun 在選 JavaScript Engine 的時候是選擇 Apple 家推出的 JSC (或者稱 JSCore,正式名稱是 JavaScriptCore),而不是現在主流的 V8 (Google 家),據說這樣比較省記憶體,但 server 端應用應該是不缺這個記憶體才對?

JavaScript runtime with Web APIs like fetch, WebSocket, and several more built-in. bun embeds JavaScriptCore, which tends to be faster and more memory efficient than more popular engines like V8 (though harder to embed)

另外一個是強調啟動速度,這對開發應該有幫助,但對 server 應用來說好像還好:

Bun.js uses the JavaScriptCore engine, which tends to start and perform a little faster than more traditional choices like V8.

在官方宣稱的效能測試上可以看到很多改善,感覺是個還蠻「有趣」的方案,可以繼續觀察看看,畢竟現在是 beta 版,另外也讓子彈飛一下,是不是只有列出來的那些會比較快...

AWS 也推出了 GitHub Copilot 的競爭對手 Amazon CodeWhisperer

AWS 推出了 Amazon CodeWhisperer,可以看做是 GitHub Copilot 的競爭產品:「Now in Preview – Amazon CodeWhisperer- ML-Powered Coding Companion」,在 Hacker News 上的討論還不多:「Copilot just got company: Amazon announced Codewhisperer (amazon.com)」。

目前還是 Preview 所以是免費的,但也還沒有提供價錢:

During the preview period, developers can use CodeWhisperer for free.

另外目前提供的程式語言只有 PythonJavaJavaScript

The preview supports code written in Python, Java, and JavaScript, using VS Code, IntelliJ IDEA, PyCharm, WebStorm, and AWS Cloud9. Support for the AWS Lambda Console is in the works and should be ready very soon.

至於 training 的資料集,這邊有提到的是 open source 專案與 Amazon 自家的東西:

CodeWhisperer code generation is powered by ML models trained on various data sources, including Amazon and open-source code.

開發應該需要一段時間,不知道是剛好,還是被 GitHub Copilot 轉 GA 的事件強迫推出 Preview 版...

GOV.UK 拔掉網頁上的 jQuery

英國政府的網站拔掉 jQuery 了:「GOV.UK drops jQuery from their front end.」,Hacker News 上的討論也可以看一下:「Gov.uk drops jQuery from their front end (web.dev)」。

當年會選擇用 jQuery 大概有幾個原因,第一個是當年 (很舊的 browser 版本) 對 DOM 的操作非常的混亂,像是:

而 jQuery 在那個年代就已經把這堆 DOM operation 都窮舉支援了 (可以直接看「Category: DOM Insertion, Around」、「Category: DOM Insertion, Inside」、「Category: DOM Insertion, Outside」這三個大分類),可以注意 jQuery 1.0 就已經把基本界面都弄出來了,而 jQuery 1.0 是 2006 年八月出的,另外 IE7 是在 2006 年十月出,也就是說在 IE6 的年代就提供一整套完整的方案。

另外 jQuery 幫忙處理了早期 IE 與 W3C 標準的不一致行為,像是經典的 attachEvent (出自 DOM events):

Microsoft Internet Explorer prior to version 8 does not follow the W3C model, as its own model was created prior to the ratification of the W3C standard. Internet Explorer 9 follows DOM level 3 events, and Internet Explorer 11 deletes its support for Microsoft-specific model.

就功能面上來說,jQuery 提供的 Sizzle engine 也提供了 CSS selector 的能力,這在早期還沒有 querySelectorAll() (IE9+) 的時候方便不少,而且就算有了 querySelectorAll(),Sizzle 支援的 CSS selector 更完整。

上面提到的解決 browser 早期的各種亂象,jQuery 其實也帶入了不少好用的 pattern,其中一個是 fluent interface 讓人寫起來很舒服:(這個範例只是要介紹 fluent interface,不要管實際上在亂搞什麼 XD)

$('#foo').html('<p>bar</p>').css('width: 100px;');

另外就是不需要對 null object 做太多處理:

$('#foo').css('width: 100px;');

與這樣比較:

let elem = document.querySelector('#foo');
if (elem) {
    // ...
}

不過在這些年,負面的部份已經大幅改善了,所以也陸陸續續可以看到很多人在討論要怎麼拔掉 jQuery。而這次英國的 GOV.UK 拔掉 jQuery 有看到一些效果:

  • Less front end processing time overall.
  • 11% less blocking time at the 75th percentile.
  • 10% less blocking time for users at the 95th percentile. These are users who experience seriously adverse network and device conditions, and every performance gain matters especially for them.

但說實話,~10% 左右的 performance 改變比預期中少很多耶?可以看出來 John Resig 當年在上面為了效能花了多少功夫...

這次的結果反倒是讓我在思考,如果可以用 jQuery 降低開發的瓶頸,我還蠻偏好就拿 jQuery 進來用...

處理 EasyPrivacy 讓 bookwalker.com.tw 無法購買書籍的問題

有時候在 www.bookwalker.com.tw 上面買書會出現地區問題:

先講解法再講找問題的過程以及解釋原因好了,把這行白名單設定加進 uBlock Origin 的 My filters 列表裡面就可以了:

@@||www.cloudflare.com/cdn-cgi/trace$xhr,domain=www.bookwalker.com.tw

應該有些人看到上面敘述的問題,以及白名單的設法,就大概知道發生什麼事情了,不過這邊還是會從頭說明除錯的過程。

我一開始先確認在無痕模式下是可以看到的 (也就是在沒有延伸套件的情況下),如果是這類 case,最常見的就是延伸套件的鍋,所以接下來研究是哪個套件造成的;然後透過經驗,從容易中獎的套件開始關,一路抓下來就可以抓到是 uBlock Origin。

然後把 uBlock Origin 裡面的 Filter lists 裡面開始關,一路關就可以測出來是 EasyPrivacy 這組造成的。

然後就是拉 uBlock Origin 提供的 Logger 去看 EasyPrivacy 擋了什麼,可以看到有這條:

||cloudflare.com/cdn-cgi/trace$3p,domain=~isbgpsafeyet.com|~wyndhamdestinations.com

而熟知 Cloudflare 的人應該就知道,在 https://www.cloudflare.com/cdn-cgi/trace 裡面有 geolocation 資訊,這樣看起來應該是被 bookwalker.com.tw 拿來跑地區資訊 XD

有興趣的也可以自己跑 curl -v https://www.cloudflare.com/cdn-cgi/trace 看傳回結果。

不過這個部份居然做在前端 javascript,看起來... 好像... 可以...?

C 語言的兩個笑話 (以及他的惡搞原理)

Twitter 上看到兩則 C 語言的笑話:

第一個的 "-0.5"char[],補了 + 1 會往後一格,所以會變成移到 "0.5" 的部份。

所以如果改成 -0.6,你會發現輸出變成 0.6

第二個的 50 ** "2" 則是利用了 2 的 ascii code 是 0x32,換成十進制剛好是 50,然後中間的 ** 其實是一個乘號與一個 pointer 的用法,實際上剛好會是 50*50=2500 的運算。

如果你改成 "3" 的話會輸出 2550

作者在 Twitter 的後續有提到,這些都是特別挑過的數字所造成的「巧合」,你換掉這些數字的話通常會爛掉
(除非你也很精心挑過),不要誤解亂用 XDDD

The State of JS 2021

Hacker News 上看到「The State of JS 2021」這個,另外也翻了一下 Hacker News 上的討論「State of JavaScript 2021 (stateofjs.com)」,算是年度總結看一下今年 JS 圈子又搞出了什麼新東西,或者說又喜新厭舊了哪些東西 XDDD

看了幾張比較有趣的,首先是「The State of JS 2021: Libraries」這張總表,右上角的表示用的人比較多,而且評價正面的選擇:

然後同一頁也有直接依照滿意度分級列出來:

在「The State of JS 2021: Front-end Frameworks」這頁可以看到 JS 前端喜新厭舊的情況,2018 的時候 Vue.js 上來,然後 2019 下去,2020 時 Svelte 上來,2021 下去,換 Solid 上來:

在「The State of JS 2021: Back-end Frameworks」這邊則是看 JS 後端的喜新厭舊,2020 時 Next.js 爬上來,2021 就被踢下去,換 SvelteKit 上來:

其他的也都可以看出來一直在「迭代」,整個 JS ecosystem 的概念一直都是砍掉重練 XD

Amazon CloudWatch 推出 RUM (Real-User Monitoring) 的功能

看到 AWSCloudWatch 推出 RUM (Real-User Monitoring) 的功能:「New – Real-User Monitoring for Amazon CloudWatch」。

從畫面截圖可以看到目前支援 javascript 的版本:

一定都會有的全站分析:

另外給了 client 端的一些情況:

然後可以針對比較慢的頁面進行了解:

然後有觀看頁面的記錄:

價錢是每 1M events 是 US$10,感覺不算便宜?

CloudWatch RUM is available now and you can start using it today in ten AWS Regions: US East (N. Virginia), US East (Ohio), US West (Oregon), Europe (Ireland), Europe (London), Europe (Frankfurt), Europe (Stockholm), Asia Pacific (Sydney), Asia Pacific (Tokyo), and Asia Pacific (Singapore). You pay $1 for every 100K events that are collected.

功能上的競爭對手,可以想到 Datalog 有 RUM 產品,如果也是沒有 commit 的話是 US$0.65 (Per 1,000 sessions, per month)。

另外 New Relic 有 Browser Monitoring 的功能應該也是類似的東西,但價錢好像沒有單獨列出來。

Mixpanel 這邊 $25/month 的套餐可以吃 100K MTUs (monthly tracked users),每個 MTU 可以吃 1K events,好像也可以做到類似的功能,隔壁 Amplitude 的話沒列出來...

不過就帳單的立場來說是方便不少...