Tag: web

便宜小主機的選擇

在「Low Cost Mini PCs (lowcostminipcs.com)」這邊看到有趣的 side project，作者從 eBay 上面掃出來的資料做成網頁直接可以選擇：「Low Cost Mini PCs」。

看原始碼可以看到直接把所有 item 都放進 html element，速度還蠻快的，我用 iPhone SE 3 開只要一秒鐘 (而且是 cold start，寫文章才想到用 iPhone 打開)，比起很多搞「現代前端」的網站都快超多...

另外這讓我想到去翻 Intel 的規格網站，看一下這幾顆的差異：「Intel® Processor N200」、「Intel® Processor N100」、「Intel® Processor N97」、「Intel® Processor N95」。

其中 N97 是掛在 Embedded 區塊下的，而其他三顆都是掛在 Mobile 下，不過 N200 的 Embedded Options Available 是 Yes，不過意思跟想像的好像不太一樣：

“Embedded Options Available” indicates the SKU is typically available for purchase for 7 years from the launch of the first SKU in the Product family and may be available for purchase for a longer period of time under certain circumstances. Intel does not commit or guarantee product Availability or Technical Support by way of roadmap guidance. Intel reserves the right to change roadmaps or discontinue products, software and software support services through standard EOL/PDN processes. Product certification and use condition information can be found in the Production Release Qualification (PRQ) report for this SKU. Contact your Intel representative for details.

功耗標示上面，N200 與 N100 的 TDP 都是 6W，而 N97 到 12W，N95 則是到 15W。

如果把 N200 與 N100 抓出來比較，看起來 N200 的時脈可以衝高一點，然後內建的 GPU 強一些，但其他就沒什麼差異了，難怪 N100 變成新一代的小主機首選...

七歲小朋友用 HTML 寫的網站

如同標題提到的，是在「My daughter (7 years old) used HTML to make a website (naya.lol)」這邊看到的，作者的七歲女兒直接用 HTML 寫了一個網站，在 naya.lol 這邊。

小朋友把想呈現的東西直接呈現出來，有種... 很率真的感覺？

另外看 html code 可以看到很懷舊的用法：

  • <body background="animals"> 指定背景的用法。
  • <center> 置中的用法。

就技術上來說沒有 semantic 的概念，差不多是 pre-HTML4 的用法 (也許更舊)，但對小朋友來說應該是蠻新鮮的體驗，做出一個他自己看了喜歡的東西。

Ladybird 瀏覽器計畫在 2026 夏天推出 Alpha 版

在「Welcome to Ladybird, a truly independent web browser (ladybird.org)」這邊看到的，指到官網 Ladybird 上。

最主要的資訊應該是這個日期，目前計畫是 2026 夏天在 Linux 與 macOS 上推出 alpha 版：

We are targeting Summer 2026 for a first Alpha version on Linux and macOS. This will be aimed at developers and early adopters.

也就是大約再兩年，看起來得花不少時間開發... 畢竟是要完全獨立開發不使用現有瀏覽器的 code。

Popover API

看到「Popover API (developer.mozilla.org)」這個討論，引用的資料是 MDN 上面的「Popover API」，從名字也可以看出來與 pop over 有關 (話說查單字發現 popover 這個詞在字典裡居然是泡芙，英文維基百科上的 Popover 也可以看到...)。

Anyway，馬上有想到的是 modal 類的操作，在 MDN 上面的文件裡面有範例，可以用純 HTML 的方式操作：

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

效果就是在畫面正中央出現，預設有 border。

另外也可以透過 JavaScript 的方式操作：

HTMLElement.togglePopover()

MDN 文件把這個功能標成 Baseline 2024：

Since April 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

因為是很新的東西 (就支援度來說)，要注意如果使用者是舊版瀏覽器的 fallback 行為。

翻文件底部的支援情況，可以看到最後支援的主流瀏覽器是 Firefox 125 (2024/04/16)，而 Firefox 還是有人會用 ESR 版本，目前還是 115，但照著 Firefox ESR 的節奏，應該是暑假會出下一版，但如果是現在要用的話，應該得考慮用 polyfill 去支援不原生支援的瀏覽器。

UI Event 的順序

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

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

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

Web Audio API 當做 fingerprint 的方式

三年前的文章「How the Web Audio API is used for audio fingerprinting」講解了 AudioContext 是怎麼被拿來 fingerprint 的，最近在「How We Bypassed Safari 17's Advanced Audio Fingerprinting Protection」這篇看到的。

AudioContext 可以完全跟錄音設備無關，單純計算，然後因為不同瀏覽器實作上面有差異，就被拿來當作 fingerprint 了。

文章裡介紹的方法是透過 Oscillator 產生 440Hz 的正弦波，然後過 Compressor 降低音量 (運算)：

The Web Audio API provides a DynamicsCompressorNode, which lowers the volume of the loudest parts of the signal and helps prevent distortion or clipping.

降低音量的運算再這塊各家的實作不同，就能夠區分不同的瀏覽器 (甚至是版本)：

Historically, all major browser engines (Blink, WebKit, and Gecko) based their Web Audio API implementations on code originally developed by Google in 2011 and 2012 for the WebKit project.

Since then browser developers have made a lot of small changes. These changes, compounded by the large number of mathematical operations involved, lead to fingerprinting differences. Audio signal processing uses floating point arithmetic, which also contributes to discrepancies in calculations.

Additionally, browsers use different implementations for different CPU architectures and OSes to leverage features like SIMD. For example, Chrome uses a separate fast Fourier transform implementation on macOS (producing a different oscillator signal) and other vector operation implementations on different CPU architectures (used in the DynamicsCompressor implementation). These platform-specific changes also contribute to differences in the final audio fingerprint.

而這東西平常也不會用到，所以對 Tor Browser 這種特別重視 privacy 的瀏覽器就直接關掉他了：

Tor

In the case of the Tor browser, everything is simple. But unfortunately, web Audio API is disabled there, so audio fingerprinting is impossible.

用 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...

nginx 分家：freenginx

在 Hacker News 上看到 Maxim Dounin 決定分家到 freenginx 的消息：「Freenginx: Core Nginx developer announces fork (nginx.org)」，原文在 mailing list 上：「announcing freenginx.org」，這邊提到分家的原因：

Unfortunately, some new non-technical management at F5 recently decided that they know better how to run open source projects. In particular, they decided to interfere with security policy nginx uses for years, ignoring both the policy and developers’ position.

在 freenginx 的 mailing list 上有提到更多，在 2024-February/000007.html 這篇：

The most recent "security advisory" was released despite the fact that the particular bug in the experimental HTTP/3 code is expected to be fixed as a normal bug as per the existing security policy, and all the developers, including me, agree on this.

And, while the particular action isn't exactly very bad, the approach in general is quite problematic.

這邊提到的 security advisory 是「[nginx-announce] nginx security advisory (CVE-2024-24989, CVE-2024-24990)」這個，看起來是個沒有 enabled by default 的功能：

Two security issues were identified in nginx HTTP/3 implementation,
which might allow an attacker that uses a specially crafted QUIC session
to cause a worker process crash (CVE-2024-24989, CVE-2024-24990) or
might have potential other impact (CVE-2024-24990).

The issues affect nginx compiled with the ngx_http_v3_module (not
compiled by default) if the "quic" option of the "listen" directive
is used in a configuration file.

The issue affects nginx 1.25.0 - 1.25.3.
The issue is fixed in nginx 1.25.4.

在 id=39373804 這邊有些目前 nginx 組成的資訊可以讀，目前 nginx 的 core devs 應該就三位 (在 Insights/Contributors 這邊看起來只有兩位，這是因為 GitHub 上面的 mirror 看起來是從 Mercurial 同步過去的，而 Sergey Kandaurov 沒有 GitHub 帳號)：

Worth noting that there are only two active "core" devs, Maxim Dounin (the OP) and Roman Arutyunyan. Maxim is the biggest contributor that is still active. Maxim and Roman account for basically 99% of current development.

So this is a pretty impactful fork. It's not like one of 8 core devs or something. This is 50% of the team.

Edit: Just noticed Sergey Kandaurov isn't listed on GitHub "contributors" because he doesn't have a GitHub account (my bad). So it's more like 33% of the team. Previous releases have been tagged by Maxim, but the latest (today's 1.25.4) was tagged by Sergey

現在就是單方面的說法，可以再讓子彈多飛一點時間... 看 F5 要不要回應，以及 F5 的說法 (如果要回應的話)。

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 好像會方便一些...