Tag: html

把 PostgreSQL 的 EXPLAIN 轉成 Flamegraph

在 Hacker News Daily 上看到 mgartner/pg_flame 這個專案，可以把 PostgreSQL 的 EXPLAIN 結果 (JSON 格式) 轉成 Flamegraph (用 HTML 呈現)：

不過我是直接看 EXPLAIN 的輸出比較習慣... 但如果需要做投影片的時候，應該是個好工具？

HTML 裡 head 的整理...

「HEAD - A free guide to <head> elements」這篇整理了 HTML 裡 <head> 的標準，以及網路上夠大的廠商所定義的標準 (另外還把中國的瀏覽器也拉出來)。

從目錄就可以看出來講了哪些：

另外一種看法就是，你要怎麼樣讓你的 <head> 塞滿垃圾然後變得很肥... XD

Chrome 將不會在 HTTPS 頁面上載入 HTTP 資源...

現在 Google Chrome 的穩定版是 77，到了十二月會推出的 79 的時候，就會有一連串的避免 HTTPS 頁面使用 HTTP 資源的措施：「No More Mixed Messages About HTTPS」。

首先是 79 的時候會有新的界面，讓使用者可以修改阻擋類的設定。

到了 80 的時候會試著將 HTTP 的影音 <audio> 與 <video> 升級到 HTTPS 連線，如果 HTTPS 讀不到的話就當作讀取失敗。但圖片 <img> 的部份則是會讀進來，只是安全性上會顯示 Not Secure。

到了 81 就是這系列的最終階段，包括 <img> 也會一使用 80 時影音的邏輯，沒辦法在 HTTPS 上讀到就當作讀取失敗。

Hacker News

早上看到「Tell HN: Thank you for not redesigning Hacker News」這篇，作者在網路速度受限的地區，上各種網站幾乎都不會動，但 Hacker News 沒有改用一堆前端框架，而是保留使用 HTML 反而讓頁面維持極小：

I’m currently in a country with low speed internet and the entire ‘modern’ web is basically unusable except HN, which still loads instantly. Reddit, Twitter, news and banking sites are all painfully slow or simply time out altogether.

To PG, the mods and whoever else is responsible: thank you for not trying to ‘fix’ what isn’t broken.

順手開了一下網路工具來看，發現單一元件最大的居然是 favicon XDDD：

照 Wikipedia 上列出來的相容性，如果只支援 IE11+ 的話，看起來可以改用 PNG，大小就已經有明顯的改善了：

-rw-r--r-- 1 gslin staff 7527 Sep  2 09:50 favicon.ico
-rw-r--r-- 1 gslin staff 2598 Sep  2 09:51 favicon.png

補上 WordPress 編輯器的 accesskey

在 WordPress 編輯文章時我還是習慣用傳統編輯界面自己修改主要的 html tag，像是這樣：

上面那些按鈕在很久以前的版本透過 accesskey 用鍵盤快速輸入各種連結與效果，但後來就被拿掉了... 不過可以在「Adding WordPress Custom QuickTags」這邊看到一些文章有提到過。

研究了一下 WordPress 的 minimal plugin 有哪些東西，看起來也不難寫，就花了些時間用 js 操作，這樣編輯起來方便多了... 程式包起來放到 gslin/wp-editor-accesskey 上，有需要的也可以拿去用，不過我猜現在還這樣寫文章的人不多了...

把 HTML 資料都塞到 URL 裡的服務

如標題說的，專案叫做「URL Pages」，是一個把 HTML 的原始碼都放到 url string 裡的服務。服務本身可以在 http://jstrieb.github.io/urlpages 這邊使用。

現在網路上有很多地方可以塞 demo page (像是 GitHub 自己提供的 GitHub Pages)，這個方式需要依賴 JavaScript 提供各種轉換機制，應該會有不少 side-effect bug，看起來會有不少技術瓶頸，就當作是個實驗性質的專案來看，真的需要放 demo page 的還是可以隨便找空間放比較簡單，像是前面提到的 GitHub Pages 其實可以直接在 GitHub 的網頁上操作...

自產生程式的 HTML 版：看到的頁面就是 HTML 程式碼

自產生程式，或是更常用的英文名 Quine 指的是「程式輸出的結果」與「程式碼本身」相同的程式，算是一種趣味性的程式...

在 Hacker News 上看到「Show HN: This page is a truly naked, brutalist HTML quine (secretgeek.github.io)」這個連結，裡面是 HTML 版的 Quine，原始網頁在「This page is a truly naked, brutalist html quine.」，頁面長這樣 (取前面的部份)：

你在網頁上看到的所有文字，就是程式碼本身 (有一個小地方例外，可以直接看原始碼確認)，而且這個 HTML 還說明怎麼做到這件事情。

裡面是一層一層解，第一個提到的是 * { display:block; }，這使得所有的元素都會顯示出來，包括了像是 <title> 這樣本來放在 <head> 裡的元素。

唯一的例外是 <style> 本身避不開：

The only other style that is special is "style" itself, which has to include an escape character to avoid being taken literally.

翻了一下 Hacker News 裡的討論，大家都還蠻欣賞的，主要是有些感嘆很有趣，像是說這個網站的可讀性反而比其他新聞站台好很多：

This is more readable than many news websites I've come across

話說回來，我對新聞類的網站還蠻喜歡關掉 javascript 的，通常效果都很好...

在 DOM 操作時的 insertAdjacentElement

看到「Why I'm still using jQuery in 2019」這篇，裡面提到了 jQuery 很多操作上相較於 vanilla javascript 簡單很多，其中一個例子提到了 DOM 操作的 insertAdjacentElement()：

el.insertAdjacentElement('afterend', other) undoubtedly works, but $(el).after(other) is actually palatable.

其實我不知道 insertAdjacentElement() 這個功能，我知道的操作都是透過 parentElement、firstChild 在移動位置，然後用 appendChild() 與 insertBefore() 放進去。

跑去 MDN 上查了「Element.insertAdjacentElement() - Web APIs | MDN」後才發現有這個好用的東西：

targetElement.insertAdjacentElement(position, element);

position 的四個變化減少了以前組積木組多了會頭暈的情況。

接下來是研究支援度的問題，才發現可能是因為 Firefox 一直到 48 才支援 (從「Firefox version history」可以看到 48 是 2016 年八月釋出)，所以網路上大多數的文章都還是用組積木的方式在介紹 DOM 操作，以避免相容性的問題：

Firefox 48 was released on August 2, 2016 for both desktop and Android.

另外還看到 insert​Adjacent​HTML() 與 insert​Adjacent​Text() 可以用，其中讓我注意到 MDN 上面提到 insert​Adjacent​HTML() 居然是 Firefox 8+？本來以為是 48+ 的誤植，但從 Mozilla 的記錄「Implement insertAdjacentHTML」這邊可以看到，應該是在 Firefox 8 的時候實作的，這樣的話可以當作 insertAdjacentElement() 的替代品 (如果考慮到古早的相容性)，只是這邊需要輸入 html string，跟其他操作是是用 element 不太一致...

意外的學到不少歷史故事... @_@

用 CSS 貼 3D 場景的圖

看到一個 demo 展示瀏覽器內 CSS 的處理能力，看起來已經足夠到可以處理不少貼圖與光線效果的部分了：「CSS FPS」。

This is demo of a CSS powered 3D environment. Geometry is created with HTML elements and CSS transforms. Textures and lightmaps are composed by layering multiple background-images and colour is applied using CSS blend-modes.

不過遊戲應該會需要更多種類的效果，這部份目前應該還是得靠 javascript 來產生... (如果要在瀏覽器裡面跑)

Mercury Web Parser 開源

看到「Mercury Goes Open Source!」這篇，Postlight 的團隊開源了 Mercury Web Parser，程式碼在 GitHub 上的 postlight/mercury-parser 可以取得。

這個版本是用 Node.js 寫的，可以從範例看出用法以及結果：

import Mercury from '@postlight/mercury-parser';
Mercury.parse(url).then(result => console.log(result););
{
  "title": "Thunder (mascot)",
  "content": "<div><div><p>This is the content of the page!</div></div>",
  "author": "Wikipedia Contributors",
  "date_published": "2016-09-16T20:56:00.000Z",
  "lead_image_url": null,
  "dek": null,
  "next_page_url": null,
  "url": "https://en.wikipedia.org/wiki/Thunder_(mascot)",
  "domain": "en.wikipedia.org",
  "excerpt": "Thunder Thunder is the stage name for the horse who is the official live animal mascot for the Denver Broncos",
  "word_count": 4677,
  "direction": "ltr",
  "total_pages": 1,
  "rendered_pages": 1
}

先前其他的軟體與服務可以參考「Evaluating Text Extraction Algorithms」這篇的整理與比較，不過這篇連原網站都不見了... 只能從 Internet Archive 上翻出來。

這個主題有不少團隊都做過 (給一個 html 網頁，抓出實際的內容塊落)，但也死了不少團隊... 比較有印象的是 Readability，在 2016 年收掉了：「The Readability bookmarking service will shut down on September 30, 2016.」。

要撈資料可以拿來用...