Category Archives: Blog

把 Blog 上的 PNG 圖片換成 WebP 格式

WebP 格式的大小比起 JPEG 或是 PNG 都小不少,支援度也都還行,但 Safari 不支援是個大問題,因為在行動裝置裡面 iOS 還是大宗...

目前想到的方法是只對 Imgur 的圖片使用 WebP (.webp),當遇到不支援的 WebP 的平台時透過 JavaScript 改用 PNG (.png)。

這邊有判斷有沒有支援 WebP 的程式碼出自「Detect WEBP Support with JavaScript」,用 createImageBitmap() 建看看有沒有成功:

(() => {
  let supportsWebP = async () => {
    if (!self.createImageBitmap) return false;
    const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
    const blob = await fetch(webpData).then(r => r.blob());
    return createImageBitmap(blob).then(() => true, () => false);
  };

  (async () => {
    if (!await supportsWebP()) {
      document.addEventListener('DOMContentLoaded', () => {
        for (let el of document.getElementsByTagName('img')) {
          let src = el.getAttribute('src');
          if (src.match(/\.webp/)) {
            el.setAttribute('src', src.replace(/\.webp/, '.png'));
          }
        }
      });
    }
  })();
})();

這邊比較有趣的是網路上的文件 (MDNCanIuse) 都說 Safari 不支援 createImageBitmap(),但實際上好像沒問題 :o

然後再用 WordPress 的延伸套件「Search Regex」把所有文章理出現 /https:\/\/i\.imgur\.com/(\w+)\.png/ 的字串換成 https://i.imgur.com/$1.webp,接下來就可以拿 Safari 測試了,這樣有點 hack 但看起來還行...

Pornhub 想買 Tumblr?

看到 Pornhub 想要買 Tumblr 的新聞:「Pornhub wants to buy Tumblr and restore site to former porn-filled glory」。

如果是其他家買可能還沒感覺,但如果是 Pornhub 買的話真的有機會恢復往日榮光的感覺?當然本來已經被迫離開的那些人應該是不會回來...

WordPress 5.0 的編輯界面大改...

WordPress 升級到 5.0 後發現完全不會用新的編輯器了 (我是自己編 html 習慣了),去官方的 forum 上看一下有沒有其他人抱怨 (以及解法),看到「READ THIS FIRST WordPress 5.0 Master List」這篇公告。

公告裡提到可以裝「Classic Editor」這個 plugin 把舊的 editor 弄回來寫文章,而且這個 plugin 至少維護到 2022 年:

Classic Editor is an official WordPress plugin, and will be maintained until at least 2022.

本來打算要 downgrade 回舊版... 目前看起來還可以撐一段時間。

批評 Medium 不適合當作 Blogging Platform...

這篇文章批評了 Medium 不適合當作 Blogging Platform:「Medium is a poor choice for blogging」。

文章裡提到的情況我之前也常遇到 (然後默默的點 X 關掉...),我是還蠻建議把 [*.]medium.com 放到 Google Chrome 的 javascript 禁止清單裡面,這樣畫面會乾淨很多,而且也省很多 CPU 資源...

不過自訂網域的部分就沒辦法用這個方式擋了,有點可惜...

把 Blog 換成 PHP 7.2

去年十一月出 PHP 7.2,現在已經更新到 7.2.5,各家軟體的相容性也都修的差不多了,差不多該升級了。

在「PHP 7.2 的效能改善」這邊有提到與 PHP 7.1 的效能改善主要來自於同時間有多人同時存取時的最佳化。

同樣 wiki 也跟著更新了,來看看效果如何...

WordPress 在 Internet 上的情況

WordPress 在 Internet 有很大的佔有率,在「Usage statistics and market share of WordPress for websites」這邊有一直更新的資料,現在是:

WordPress is used by 59.9% of all the websites whose content management system we know. This is 29.1% of all websites.

這數字可以參考看看。而在「State of the WordPress ecosystem」這邊就看到有人在分析 WordPress 在整個 Internet 上的情況。可以看到裡面有蠻多都是透過 BigQuery 分析出來的...

在分析整個頁面的平均下載量時,可以看到 WordPress 的頁面比較肥:

We get 1590 KB for wordpress=false and 1897 KB for wordpress=true.

但是在 WordPress 上未最佳化的圖片比較少,原文裡猜測是歸功於 plugin 的關係:

@amedina I wonder if this has to do with the availability of tools/plugins in the WordPress ecosystem that optimize images effortlessly, as opposed to other web development pipelines that require manual image optimization or installation of specialized tools.

所以就跑去分析了 WordPress 上使用了哪些 plugin,不過這是看 web request 以及 path 得到的,如果 plugin 是純粹在內部執行的話就看不到了:

整個分析還蠻有趣的,而且還在進行...

靜態站台的選擇...

Hacker News 首頁上看到的文章,講 Jekyll 一路跟 Amazon S3Amazon CloudFront 接上去的步驟:「Jekyll CBCD Pipeline to the Cloud」。

我看了以後覺得好麻煩 @_@

然後回頭看 Hacker News 上的評論:「Jekyll Static Web Hosting – Deployment Pipeline on AWS | Hacker News」,看到這段:

What a nightmare. I'm sure there are use cases for a setup like this, but this is not the system I'd like to maintain. I use Jekyll because of it's simplicity. I edit my site in my favorite text editor and rsync to shared hosting.

好多人都有同感啊 XDDD

另外有人提到 Netlify 這個服務:

After I discovered Netlify, I'm kind of thinking "why bother". It's free, I just push to my repo and they take care of all the building/publishing/hosting/CDNs, and they're very responsive for support and have high availability. I'm a very happy customer (or rather leech, as I don't pay anything).

下面評價看起來還算不錯,而且有 free tier 可以用,也許可以找機會玩看看...

AWS 推出新的 Cost Explorer API,不過 API 不是重點啦...

AWS 的「New – Interactive AWS Cost Explorer API」這篇文章在一開頭就提到了 Cost Explorer API 的情況,所以他們要推出新的 API 改進:

We launched the AWS Cost Explorer a couple of years ago in order to allow you to track, allocate, and manage your AWS costs. The response to that launch, and to additions that we have made since then, has been very positive. However our customers are, as Jeff Bezos has said, “beautifully, wonderfully, dissatisfied.”

不過讓我笑出來的是選圖啊... 大概是 Jeff Barr 夠硬的關係,直接選了這張:

我喜歡這張 XD (尤其配合著出現在官方 blog 上的時候)

為什麼我還繼續用 RSS (Feed)

最近在一些地方冒出兩篇文章 (應該是 NuzzelHacker News,放在 tab 上好幾天,不是那麼確定來源...),一篇是最近發的「The Case for RSS」,另外一篇是五月的文章「RSS: there's nothing better」。這邊講的 RSS 比較廣義,不侷限於 RSS {0.91,1.0,2.0},而是包括了各式的 feed,像是後來標準化的 Atom

消息的來源大致分成兩種:

  • 已知的來源:這些人只要有新的文章你就會想看。
  • 未知的來源:你可能也會有興趣的文章。

前者你不會想要漏掉 (你就是想看才會訂啊)。而後者在早期有 Zite 這類用演算法推薦的產品,後來在 Zite 併入 Flipboard 整個爛掉後我就跳去用 Nuzzel (透過好友機制推薦,演算法相對單純)。

Facebook 將這兩者混在一起,讓「已知的來源」未必會出現,而是用演算法包起來並且用 PR 手段混淆:美其名稱為「個人化推薦」,實際上是想辦法讓內容提供者掏錢出來。這點在 Instagram 上也可以看到一樣的作法:把 timeline 打散,用演算法包裝起來,再美其名為「個人化推薦」。

而 RSS reader 可以避免「已知的來源」這塊漏掉。

另外也因為 RSS reader 因為設計的目標就是「有效率的閱讀」而不是「賺錢」,所以大多數都會有「已讀」與「未讀」的功能,這讓你同樣的資訊你不需要讀很多次。

而 RSS reader 容易分群閱讀 (有些 RSS reader 會提供 folder 或是 tag 的功能) 也讓你可以帶著不同的 mindset 看不同群的文章,像是科技類的文章與心靈雞湯文就可以分開。