因為工作緣故我經常測試各種瀏覽器,除了現今主流的 Google Chrome、Mozilla Firefox 和近期很熱門的 Microsoft Edge 還有不少選擇,像是 Safari、Opera 和 Brave,如果你追求速度和安全隱私可以試試看 Brave 瀏覽器(曾經有一段時間我在 Mac 將它做為預設瀏覽器)。Brave 最大特色是內建廣告和追蹤程式封鎖功能,相較於其他瀏覽器來說速度可快至六倍。
JavaScript
Brave Together 免費線上視訊會議,可分享螢幕畫面和 YouTube 影片
隨著台灣新冠肺炎(COVID-19)疫情趨緩,許多公司開始解除在家工作,恢復原本的辦公室工作模式,如果還有遠端開會的需求,有不少線上視訊會議服務可以做到,例如之前推薦過的 Google Meet 或微軟 Meet Now 都是效果很好的選擇,這些服務特色是不用額外下載軟體,只要以瀏覽器開啟和登入帳號就能進行視訊通話或螢幕分享,亦有文字聊天室讓沒有麥克風或不方便說話的人也能參與討論,更重要的就是線上會議服務的隱私及安全問題。
instant.page 官方 WordPress 外掛程式,在網站頁面產生立即載入效果
我去年曾介紹過一個很有用的網站工具「instant.page 讓你的網頁載入更即時,只需加入一段程式碼」,透過只有 200 行、壓縮後僅有 1 Kb 左右的 JavaScript 程式碼來讓網站速度變得更快,而它的原理也不難懂,利用瀏覽器 prefetch
技術在使用者點選鏈結前預先取得網頁內容,雖然只有幾毫秒差距,但確實有助於改善網頁的瀏覽體驗。現在這項服務也被不少國際知名公司使用。如果你是一般使用者,透過 FasterChrome 瀏覽器擴充功能也能提升瀏覽網頁時的速度。
store-badge 判斷使用者裝置顯示對應 App Store、Google Play 商店按鈕
今天在整理瀏覽器的瀏覽紀錄時,無意間發現之前存下來的一個服務 store-badge,對於應用程式開發者來說或許會有用處,特別是開發的應用程式包括 iOS 和 Android 版本,就能提供給不同使用者特定的應用程式商店下載鏈結。簡單來說,大部分網站會顯示 App Store 和 Google Play 的下載按鈕,分別對應不同平台,使用者可依照需求點選並連接到特定的應用程式商店,透過 store-badge 就可以自動判斷使用者的裝置類型。
Hexometer Website Analyzer 分析網站使用那些第三方服務或工具(Chrome、Firefox)
通常一個網站背後是由許多的技術和服務組成,舉例來說,使用 WordPress 做為內容管理系統,再以 Cloudflare 加速並保護網站、對圖片進行分流,透過 Google Analytics 分析流量等資訊,搭配 Google AdSense 和 Google DFP 管理廣告和營利等等,雖然可以直接從原始碼得知網站可能使用那些技術,但也有更快速的查詢工具,像是 SimilarTech 和 WhatRuns 都能立即顯示某個網站使用的第三方服務或程式庫。
MailtoUI 強化 Email 連結,點選後可選擇在 Gmail、Outlook 或複製地址
在網頁裡如果要放入 Email 鏈結,就必須在超連結加上 mailto:
語法,事實上不建議在網站裡直接顯示電子郵件地址,一來有可能變成垃圾郵件(SPAM)寄送的目標,另一方面點選電子郵件鏈結後經常跳出的不是使用者慣用的 Email 工具也會造成困擾,之前我曾介紹過一個瀏覽器外掛「I hate mailto 點選 Email 不自動打開郵件軟體,將郵件地址複製到剪貼簿」就是為了解決類似問題,可以在點選郵件鏈結時自動複製 Email 地址而不是打開郵件軟體。
Darkmode.js 為網站加入深色模式,只要一段程式碼就能實現

macOS 10.14 Mojave 加入全新「深色模式」功能,iOS 13 預告也會加入此模式,如果你曾經將電腦切換為深色,應該會發現有些應用程式可完美支援,也會一併轉為暗色介面,但在不支援深色模式的應用程式表現出來的顏色會更刺眼,嚴重影響到使用體驗。如果你是應用程式開發者,可能後續都得再加上對於深色模式的支援,讓顏色更接近暗色,亦可在使用者選擇不同模式時自動調整為最合適的配色效果。
使用 Cloudflare Workers 提高 WordPress 速度和效能教學
去年在 WordCamp Taipei 活動中分享經營網站多年的心得,其中我認為最重要、也不斷重複提及的是「速度」,這兩個字說來簡單,要認真鑽研必須耗費不少時間,如何兼顧速度和使用者體驗確實有相當難度。網站速度一直是我努力的方向,但也深知所有事物都有極限,除了使用近年比較熱門的 Google AMP 技術,網站速度就像一道難以跨越的高牆,許多人努力許久依然徒勞,很難突破的就屬 Time to First Byte(TTFB)。
Console.chat 在瀏覽器的開發人員工具加入一個文字聊天室
趁著最近空閒時間較多,介紹一些特殊、趣味性十足的小工具吧!如果你是網站開發者,一定知道瀏覽器都會內建「開發人員工具」,也就是打開後有很多輔助開發功能,例如最常用的是檢查打開網頁時載入那些圖片、程式或檔案,這也可用於瞭解網站是否有被拖慢速度的問題,還能點選網頁中的元件,快速查看相關程式碼、CSS 等資訊,非常好用!當然開發人員工具功能不少,這只是其中幾項,那還有沒有其他的應用方式呢?
OneLinePlayer 免費網頁影音播放器,嵌入影片可自訂各種模式和按鈕樣式
如果要在個人網站、部落格、作品集或社交媒體放入影片,大部分開發者可能會選擇使用線上影音平台提供的播放器語法,而不會自行托管影片,因為影音檔案容量較大,也會影響整體網站載入速度。不過一般播放器不一定能呈現最佳效果,運用一些小技巧能讓影片嵌入時效果更理想,例如「如何嵌入 YouTube 影片設定自動重播、隱藏 Logo 或靜音播放?」或「嵌入 YouTube 影片為音樂播放器教學,僅保留音樂點擊自動播放」。