
macOS 10.14 Mojave 加入全新「深色模式」功能,iOS 13 預告也會加入此模式,如果你曾經將電腦切換為深色,應該會發現有些應用程式可完美支援,也會一併轉為暗色介面,但在不支援深色模式的應用程式表現出來的顏色會更刺眼,嚴重影響到使用體驗。如果你是應用程式開發者,可能後續都得再加上對於深色模式的支援,讓顏色更接近暗色,亦可在使用者選擇不同模式時自動調整為最合適的配色效果。
macOS 10.14 Mojave 加入全新「深色模式」功能,iOS 13 預告也會加入此模式,如果你曾經將電腦切換為深色,應該會發現有些應用程式可完美支援,也會一併轉為暗色介面,但在不支援深色模式的應用程式表現出來的顏色會更刺眼,嚴重影響到使用體驗。如果你是應用程式開發者,可能後續都得再加上對於深色模式的支援,讓顏色更接近暗色,亦可在使用者選擇不同模式時自動調整為最合適的配色效果。
去年在 WordCamp Taipei 活動中分享經營網站多年的心得,其中我認為最重要、也不斷重複提及的是「速度」,這兩個字說來簡單,要認真鑽研必須耗費不少時間,如何兼顧速度和使用者體驗確實有相當難度。網站速度一直是我努力的方向,但也深知所有事物都有極限,除了使用近年比較熱門的 Google AMP 技術,網站速度就像一道難以跨越的高牆,許多人努力許久依然徒勞,很難突破的就屬 Time to First Byte(TTFB)。
趁著最近空閒時間較多,介紹一些特殊、趣味性十足的小工具吧!如果你是網站開發者,一定知道瀏覽器都會內建「開發人員工具」,也就是打開後有很多輔助開發功能,例如最常用的是檢查打開網頁時載入那些圖片、程式或檔案,這也可用於瞭解網站是否有被拖慢速度的問題,還能點選網頁中的元件,快速查看相關程式碼、CSS 等資訊,非常好用!當然開發人員工具功能不少,這只是其中幾項,那還有沒有其他的應用方式呢?
如果要在個人網站、部落格、作品集或社交媒體放入影片,大部分開發者可能會選擇使用線上影音平台提供的播放器語法,而不會自行托管影片,因為影音檔案容量較大,也會影響整體網站載入速度。不過一般播放器不一定能呈現最佳效果,運用一些小技巧能讓影片嵌入時效果更理想,例如「如何嵌入 YouTube 影片設定自動重播、隱藏 Logo 或靜音播放?」或「嵌入 YouTube 影片為音樂播放器教學,僅保留音樂點擊自動播放」。
對於網頁設計或開發者來說,想要改善使用者網頁瀏覽體驗通常會從參考其他網站設計著手,我在發現不錯的網站都會去看一下原始碼或樣式表,雖然 Google Chrome 本身就有強大的開發人員工具可以使用,但如果遇到要查詢某個網頁使用的字型或色彩時還是習慣以 Fontface Ninja、Type Sample 這類工具快速找到我要的資訊。
若你有接手編輯過他人網頁,或是複製其他頁面版型的經驗,應該會發現最困難的往往不是編輯網站,而是將現有的程式碼整理乾淨,讓它能夠格式化,呈現出一致的效果。尤其對於一些較為複雜的頁面,可能經過許多人無數次編輯後已經有些四不像,這時候就必須將不必要的部份代碼刪除,只留下最基本的部分,而這些過程大部分都是手動進行,不但很耗費時間心力,而且很可能因為修改錯誤而讓整個頁面跑掉。
在更新網站時,經常透過網站檢測工具來檢查網站有沒有可以改進的部份,例如我個人相當常用 PageSpeed Insights 和 Think With Google,通常會出現 CSS、JavaScript 程式碼可以被壓縮的最佳化提示資訊。如果沒有特別設定,大部分情況下會維持程式碼的可讀性,對於開發者在編輯來說會很有用,但其實放在網路上只要求能夠越快被下載越好,利用壓縮方式將不必要的空格、註解或換行清除,讓檔案盡量維持在最小狀態,不僅可提高下載效率,也能節省網站流量耗費。
這幾天在 Twitter 看到一則推文分享,只要一段程式碼,就能開啟 Google Chrome 瀏覽器內建開發者工具的編輯器功能,直接在網頁內進行內容編輯測試(對,直接編輯網頁中的文字),這對於網頁開發者來說很有用,尤其是當你想知道選單可以容納多少文字,或是標題、內文會在多少字以後換行,就能以更直覺的方式看到結果。相較於之前介紹過的「Edit Any Website 只要一行程式碼就能編輯任何網頁!直接把瀏覽器變身網頁測試工具」又要更簡單一些。
對於開發或經營網站的朋友來說,應該很常會去研究其他網站使用那些技術,一來可知己知彼,另一方面也能從其他網站來找到更合適的功能。如果有經驗的話,通常透過瀏覽器或檢視原始碼就能知道一些什麼,但這比較耗費時間,因此有線上工具可以讓你在輸入網址後快速找出該網站使用的工具、第三方應用或程式庫技術等資訊,例如之前介紹過的 SimilarTech、Wappalyzer 分析網站使用什麼樣的架站程式和環境,找出其他類似的服務選項,對開發者來說很實用。