Tag: js

jQuery UI 與 jQuery Mobile 進入維護模式

OpenJS Foundation (先前的 jQuery Foundation) 宣佈 jQuery UI 與 jQuery 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？

Mapbox GL JS 的授權改變，以及 MapLibre GL 的誕生

看到「MapLibre GL is a free and open-source fork of mapbox-gl-JS (github.com/maplibre)」這篇，翻了一下資料發現年初時 Mapbox GL JS 的軟體授權從 v2.0.0 開始變成不是 open source license (本來是 BSD license)，而社群也馬上 fork 最後一個 open source 版本並且投入開發，變成 MapLibre GL。

MapTiler 在年初的時候有提到這件事情：「MapLibre: Mapbox GL open-source fork」。

The community reacted swiftly: forks of the latest open-source version were made almost immediately by multiple parties. In another positive development, the community came together the next day and agreed to make this a joint effort, rather than splitting energies. A video call was organized and the MapLibre coalition was formed. It includes people working for MapTiler, Elastic, StadiaMaps, Microsoft, Ceres Imaging, WhereGroup, Jawg, Stamen Design, etc.

MapLibre GL 目前與本來 v1.13.0 相容，可以直接抽換過去 (後來在二月的時候有出一個 v1.13.1，不過那是在 v2.0.0 改 license 之後的事情了)：

  "dependencies": {
-    "mapbox-gl": "^1.13.0"
+    "maplibre-gl": ">=1.14.0"
  }

記錄一下，以後要在網站上用的話，得注意到 Mapbox GL JS 在沒有註冊的情況下不能使用，而且 SDK 會強制蒐集資料：

Mapbox gl-js version 2.0 or higher (“Mapbox Web SDK”) must be used according to the Mapbox Terms of Service. This license allows developers with a current active Mapbox account to use and modify the Mapbox Web SDK. Developers may modify the Mapbox Web SDK code so long as the modifications do not change or interfere with marked portions of the code related to billing, accounting, and anonymized data collection. The Mapbox Web SDK only sends anonymized usage data, which Mapbox uses for fixing bugs and errors, accounting, and generating aggregated anonymized statistics. This license terminates automatically if a user no longer has an active Mapbox account.

不過如果是抓 OpenStreetMap 資料的話，Leaflet 應該還是目前的首選...

Firefox 87 推出 SmartBlock 阻擋 3rd-party tracking

Firefox 87 推出了 SmartBlock，試著阻擋各種追蹤器：「Firefox 87 introduces SmartBlock for Private Browsing」，不過這不是一般的預設值，而是只有 Strict 模式與無痕模式會用到。

對於追蹤的問題，最早的作法是直接擋掉 3rd-party tracking javascript 的載入，但有很多網站會因為對應的變數沒有初始化而造成 javascript error。

這次的 SmartBlock 其實就是在各家阻擋套件實做很久的方式，插入一小段客製化的 javascript 讓網站裡的 javascript 可以呼叫，但實際上不會送任何資料出去，像是 uBlock Origin 的「unbreak.txt」。

不過 Firefox 重複搞這麼多東西，要不要考慮直接把 uBlock Origin 內建進來啊...

Firefox 在 Strict Tracking Protection 模式下閹割 Google Analytics

在 Twitter 上看到 Firefox 在 Strict Tracking Protection 模式下會閹割掉 Google Analytics：

剛好可以跟另外一篇「Google Analytics: Stop feeding the beast」一起看，這篇主要是對網站管理端的說明，你可以使用其他對隱私保護比較好的服務，或是考慮自己架設。

回到使用者端的部份，在 Firefox 裡面 Browser Privacy 預設是 Standard，換成 Strict 後就會觸發這個行為：

不是直接擋掉到 google-analytics.com 與 googletagmanager.com 的連線，而是把 javascript 抽換掉，讓呼叫的程式碼完全不會做事。

在 Strict 模式下，除了會閹割 Google Analytics 外，也有其他的 js 會被閹割 (像是 Facebook 的)，可以在 GitHub 上的「gecko-dev/browser/extensions/webcompat/shims/」這邊翻到。

這個功能很明顯在 Google Chrome 上不會內建，但很久前就有套件可以用了。目前比較常見的作法是透過 uBlock Origin 做，而且是在內建的「uBlock filters – Privacy」這組定義裡面就有實做，對應到 GitHub 上的 privacy.txt 這邊可以看到：

! Redirect to neutered Google Analytics 
||google-analytics.com/analytics.js$script,redirect=google-analytics.com/analytics.js

! Redirect to neutered Google Analytics Experiments
||google-analytics.com/cx/api.js$script,redirect=google-analytics.com/cx/api.js

不過 Firefox 上的 uBlock Origin 與其他套件也有類似的功能，真的在意的人應該早就使用了...

Load Impact 的 k6 網站壓測軟體

這幾天在 Hacker News 上看到 Load Impact 推出的 k6 壓測程式，結合了 Golang 的執行效率與 JavaScript 的操作語法，讓使用者可以很簡單的進行壓力測試，在 Hacker News 上也有蠻正向的反應：「K6: Like unit testing, for performance (github.com/loadimpact)」，我唯一會在意的應該是 AGPLv3 的部份...

先看了一下資訊，看起來「Load Impact」是公司名稱，「LoadImpact」則是產品名稱，然後現在要改名變成「k6」與「k6 Cloud」：

Load Impact is now k6

Due to the success and rapid growth of the k6 open source load testing tool we decided to rebrand the LoadImpact product as k6 Cloud!

k6 裡面設計了 VU (Virtual User) 的概念，如同字面上的意義，VU 是虛擬的使用者，就技術上來說，每個 VU 都是在獨立的 JavaScript runtime 裡跑：

Each virtual user (VU) executes your script in a completely separate JavaScript runtime, parallel to all of the other running VUs.

然後他們居然把 JavaScript 裡面最「經典」的 async 架構給拔了，所以就不需要一堆 callback & promise 架構，用起來就爽很多：

For simplicity, unlike many other JavaScript runtimes, a lot of the operations in k6 are synchronous. That means that, for example, the let response = http.get("https://test-api.k6.io/") call from the Running k6 example script will block the VU execution until the HTTP request is completed, save the response information in the response variable and only then continue executing the rest of the script - no callbacks and promises needed.

翻了一下 Hacker News 上的討論與程式碼，看起來 JavaScript runtime 這部份是用 Golang 寫的 goja。

文件裡面給了不少範例，像是在「Running k6」這邊有直接給出怎麼壓測，10 個 VU 跑 30 秒：

k6 run --vus 10 --duration 30s script.js

另外在 repository 裡面，「samples」這個目錄下有不少範例，可以直接先看過一次從裡面學到不少功能，之後再回去翻一次 manual，應該就會更熟悉...

隨便測了一下還蠻容易上手的，加上有 apt repository 可以直接納入系統管理，看起來應該會放著跑，之後找機會用看看，也許打 API 之類的...

用 picture + source + img 替代本來的 JavaScript 替換

目前我在 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>

換完後來觀察看看...

GPU.js

前幾天在 Hacker News Daily 上看到的專案：「GPU.js - GPU accelerated JavaScript」，對應的 GitHub 頁面在 gpujs/gpu.js 這邊。

看起來是用 WebGL 接進去的，不過他用來 benchmark 的硬體頗暴力啊：

Hardware: Xeon Gold 5217 + 8 x RTX 2080ti

這邊用了八張 2080Ti，如果一張就大約是 1/8 效能的話，看起來好像還好... 一張 2080Ti 跟 Xeon Gold 5217 跑出來差不多？價錢也在同一個範圍區間...

暫時不知道用途...

莎士比亞風格的 UUID

UUID 是個長 128 bits 的數字，轉成 16 進位也有 32 個字要記，對於人類記憶來說不太友善。

前幾天在 Hacker News 上看到的東西，把這 128 bits 的資訊轉成類莎士比亞的句子，相比前面 32 個 16 進位的數字來說好記不少：「uuid-readable」。

Generate Easy to Remember, Readable UUIDs, that are Shakespearean and Grammatically Correct Sentences

給的輸出範例包括了：

Loren Chariot Addy the Titbit of Cholame questioned Cele Garth Alda and 16 windy frogs

Drucill Hubert Lewse the Comer of Avera rejoices Fiann Craggy Florie and 5 hard trouts

Jacquette Brandt John the Pectus of Barnsdall doubted Glenn Gay Gregg and 12 noisy stoats

我不覺得有變簡單啊 XDDD 也許對於英文母語的人來說會簡單一些... 吧？