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

疾管署的 COVID-19 每日送檢數的 Open Data

記者會上有提到現在疾管署的網站上有公開每日送檢數的資料,花了些時間找,在「台灣COVID-19冠狀病毒檢測每日送驗數」這邊可以看到,網站提供的 preview 的界面沒辦法看到最新的資料,但下載後可以看到檔案格式是 UTF-8 的 CSV 檔,應該還算能處理...

找到這個資料花了一些功夫 (因為用 DuckDuckGoGoogle 都沒直接找到),後來是靠這樣的步驟找到的:

本來點選熱門資料那邊的「COVID-19台灣最新病例、檢驗統計」結果發現只有一筆資料,而且看起來最後更新時間是 2020/04/24,所以得往其他地方翻。

首先點了上面的「最新消息」發現是個系統公告區,不是我要的,接下來才又找到正確的路線...

這時候就會看到最前面提到的「台灣COVID-19冠狀病毒檢測每日送驗數」了。

然後 data.cdc.gov.tw 這個網站看起來是放在 Microsoft Azure 的日本區?

美國政府發行的字型 Public Sans

Public Sans 是一套美國政府出資而產生的無襯線字型,專案放在 GitHub 上 (uswds/public-sans)。這套自行不是全部都自己刻,而是改自於 Libre Franklin Font (以 SIL Open Font License v1.1 授權,而 Public Sans 沿用同樣授權)。

第一個目標是授權:

Be available as a free, open source webfont on any platform.

另外是使用的廣度:

Have a broad range of weights and a good italic.
Perform well in headlines, text, and UI.

Have good multilingual support.
Allow for good data design with tabular figures.

在 GitHub 頁面上有整理與 Libre Franklin 的差異,可以看到配合現在的呈現媒體而做了不少調整。

DHS 要求郵件系統都必須使用 STARTTLS、DMARC,並且全面禁用 RC4 與 3DES

Twitter 上看到 18F 貼了 DHS 的新規定:「Enhance Email and Web Security」。

郵件系統的部份,要求要有 STARTTLS,並且設定 SPFDMARC。另外禁用 SSLv2 SSLv3,以及 RC43DES

網站的部份,則是要求 HTTPS 以及 HSTS。另外也與郵件系統一樣禁用 SSLv2、SSLv3,以及 RC4 與 3DES。

不只 18F 一個單位在推動,這樣整體的速度才會加快...

波蘭政府的官方網站將會使用 Let's Encrypt

Twitter 上看到這則 tweet,指出波蘭政府的官方網站使用了 Let's Encrypt 的憑證:

SSL Labs 上也可以看出來:「SSL Server Test: www.gov.pl (Powered by Qualys SSL Labs)」。

不過不確定目前是暫時性的 (之後會換成其他的 SSL certificate),還是本來就打算這樣設計了。

用手勢在會議中表達意思

英國內閣辦公室中的英國政府數位服務 (Government Digital Service) 發展了一套手勢 (六個),可以在不用打斷發言過程下表達出一些簡單的意見或是表示想要有進一步的討論:「Platform as a Service team takes even-handed approach to meetings」(網站好像有點熱門,讀取速度變慢不少 XD)。

提高會議溝通的效率...

18F 丟出 CSS 的代碼風格指南

好幾個禮拜前的東西,這幾天才上 Hacker News:「Introducing the CSS coding style guide」。

18F 是美國政府的官方單位,取名自辦公室所在的地址:(取自 Wikipedia 的「18F」說明)

Its name refers to its office location in northwest Washington, D.C., on 18th and F Streets.

不只是定義了 CSS Coding Style Guide,還給了 SCSS Lint 工具使用:

The styleguide provides a method of linting Sass (SCSS) code to ensure it conforms to the rules in the styleguide.

白宮 We the People 提高答覆連署人數

白宮宣佈提昇 We the People 的強制答覆連署上限,將原本 25k 人提昇至 100k 人:「Why We're Raising the Signature Threshold for We the People」。

因為最近參與的人變多太多:

另外白宮給了一份 Infograph,更詳細的說明參與的狀況:

Overview

英國有個 data.gov.uk,美國有個 We the People,再加上昨天看到的 alpha.data.gov (A collection of open data from the government, private sector, and non-profits that are fueling a new economy.),感覺台灣跟世界上的已開發國家愈差愈遠了...

data.gov.uk alpha.data.gov

英國政府所建議的「數位服務設計原則」

在 Hacker News 的摘要上看到的,對於政府提供數位服務,英國政府嘗試訂出設計原則 (雖然目前這份文件還是 alpha 版本):「Government Digital Service Design Principles」。

這份原則是延伸自原來的七大守則:

其中有幾點相當棒:

  • 第二條的「Do less」,如果有人已經做了類似的事情,就直接連出去,不要做重複的事情 (If someone else is doing it — link to it),政府只需要提供其他人無法提供的資訊 (We should concentrate on the irreducible core)。如果能夠提供 API 之類的介面幫助其他服務做的更好,就提供出去讓其他人再利用 (If we can provide resources (like APIs) that will help other people build things — do that.)。
  • 第四條的「Do the hard work to make it simple」直接提到,使用者會用政府的服務是因為沒有替代方案:如果不努力讓服務簡單易用,就是在浪費使用者的時間。(With great power comes great responsibility — very often people have no choice but to use our services. If we don’t work hard to make them simple and usable we’re abusing that power, and wasting people’s time.)
  • 第五條的「Iterate. Then iterate again.」,考慮風險,如果一次到位的風險太高,邊打邊跑推出服務:從 alpha 階段進入 beta 階段,再從 beta 階段趨近於成熟,每個階段去看實際的反應,而不是一開始就畫一張大餅猜測使用者需要什麼。
  • 第八條的「Build digital services, not websites」與第十條的「Make things open: it makes things better」,標題就說明得很清楚了。

即使是一般商業產品的設計也是通用的原則...