用 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 的話沒列出來...

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

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 時處理...

測了一下 Pale Moon...

找資料時發現 Windows XP 上還是有瀏覽器可以用,是舊版 Firefox fork 出來的 Pale Moon 再 fork 出來的 Mypal (因為 Pale Moon 不再支援 Windows XP 了,所以為了 Windows XP 而 build 的版本)。

不過我這邊不是在 Windows XP 上面測試 Mypal,而純粹就只是測 Pale Moon,所以是在 Linux 的桌機環境上測試。

用了兩天發現真的只是加減用,最容易遇到的問題還是在 javascript 上,開 GitHub 可以看到錯誤訊息,畫面上也有一些資料出不來:

TypeError: window.customElements is undefined

查了「Window.customElements」這邊發現 Firefox 要 63+ 才支援,難怪 Pale Moon 會噴錯誤訊息...

另外 single process 加上沒有對 threading 最佳化,用起來果然還是有點辛苦,開個 Twitch 就卡卡的,當日常用會需要磨一下耐心... 不過如果是還在跑 Windows XP 的使用者可能本來就很有耐心了?

CloudFront 把本來的 Lambda@Edge 產品線拆細,推出 CloudFront Functions

Amazon CloudFront 本來的 Lambda@Edge 產品線拆細,多出一個 CloudFront Functions:「Introducing CloudFront Functions – Run Your Code at the Edge with Low Latency at Any Scale」。

就產品面的角度就是限制比 Lambda@Edge 多,但價錢變便宜很多。

先看價錢的部份,CloudFront Functions 的價錢只有 request:

Invocation pricing is $0.10 per 1 million invocations ($0.0000001 per request).

而 Lambda@Edge 則是兩筆費用,光是 request 費用就是六倍:

Request pricing is $0.60 per 1 million requests ($0.0000006 per request).

Duration is calculated from the time your code begins executing until it returns or otherwise terminates. You are charged $0.00005001 for every GB-second used.

當然,CloudFront Functions 便宜帶來的限制也不少,最主要的限制可以從最大執行時間只有 1ms,以及記憶體只能用 2MB 就可以看出來:

但這對於輕量的操作來說已經夠用了,主要就是對 HTTP header 的操作...

另外比較表上看到個有趣的點「JavaScript (ECMAScript 5.1 compliant)」,這樣應該就不會是 Node.js (V8 engine),而是其他的 JS engine?