Darkmode.js 為網站加入深色模式,只要一段程式碼就能實現

Darkmode.js 為網站加入深色模式,只要一段程式碼就能實現
Copyright : Brian Jackson / 123RF Stock Photos

macOS 10.14 Mojave 加入全新「深色模式」功能,iOS 13 預告也會加入此模式,如果你曾經將電腦切換為深色,應該會發現有些應用程式可完美支援,也會一併轉為暗色介面,但在不支援深色模式的應用程式表現出來的顏色會更刺眼,嚴重影響到使用體驗。如果你是應用程式開發者,可能後續都得再加上對於深色模式的支援,讓顏色更接近暗色,亦可在使用者選擇不同模式時自動調整為最合適的配色效果。

使用 Cloudflare Workers 提高 WordPress 速度和效能教學

使用 Cloudflare Workers 提高 WordPress 速度和效能教學

去年在 WordCamp Taipei 活動中分享經營網站多年的心得,其中我認為最重要、也不斷重複提及的是「速度」,這兩個字說來簡單,要認真鑽研必須耗費不少時間,如何兼顧速度和使用者體驗確實有相當難度。網站速度一直是我努力的方向,但也深知所有事物都有極限,除了使用近年比較熱門的 Google AMP 技術,網站速度就像一道難以跨越的高牆,許多人努力許久依然徒勞,很難突破的就屬 Time to First Byte(TTFB)。

Console.chat 在瀏覽器的開發人員工具加入一個文字聊天室

Console.chat 在瀏覽器的開發人員工具加入一個文字聊天室

趁著最近空閒時間較多,介紹一些特殊、趣味性十足的小工具吧!如果你是網站開發者,一定知道瀏覽器都會內建「開發人員工具」,也就是打開後有很多輔助開發功能,例如最常用的是檢查打開網頁時載入那些圖片、程式或檔案,這也可用於瞭解網站是否有被拖慢速度的問題,還能點選網頁中的元件,快速查看相關程式碼、CSS 等資訊,非常好用!當然開發人員工具功能不少,這只是其中幾項,那還有沒有其他的應用方式呢?

OneLinePlayer 免費網頁影音播放器,嵌入影片可自訂各種模式和按鈕樣式

OneLinePlayer 免費網頁影音播放器,嵌入影片可自訂各種模式和按鈕樣式

如果要在個人網站、部落格、作品集或社交媒體放入影片,大部分開發者可能會選擇使用線上影音平台提供的播放器語法,而不會自行托管影片,因為影音檔案容量較大,也會影響整體網站載入速度。不過一般播放器不一定能呈現最佳效果,運用一些小技巧能讓影片嵌入時效果更理想,例如「如何嵌入 YouTube 影片設定自動重播、隱藏 Logo 或靜音播放?」或「嵌入 YouTube 影片為音樂播放器教學,僅保留音樂點擊自動播放」。

CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表(Chrome 擴充功能)

CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表(Chrome 擴充功能)

對於網頁設計或開發者來說,想要改善使用者網頁瀏覽體驗通常會從參考其他網站設計著手,我在發現不錯的網站都會去看一下原始碼或樣式表,雖然 Google Chrome 本身就有強大的開發人員工具可以使用,但如果遇到要查詢某個網頁使用的字型或色彩時還是習慣以 Fontface NinjaType Sample 這類工具快速找到我要的資訊。

RawGit 將 GitHub 的 Raw 檔案轉為 CDN 格式直接存取使用

RawGit 將 GitHub 的 Raw 檔案轉為 CDN 格式直接存取使用

GitHub 是一家透過 Git 進行版本控制的軟體原始碼代管平台,你應該很常在一些免費軟體或線上工具網站看到鏈結指向 GitHub,用以放置產品的程式碼或相關檔案,除了讓個人或組織托管程式碼,整合社群功能還能讓其他開發者直接建立副本(Fork),方便進行修改、變更,最終將修改後的部份推送(Pull Request)回到原專案,讓擁有者決定是否要將修改部分合併到原始專案,對於開發者來說真是不可多得的好工具。

HtmlWasher 網頁程式碼清理工具,快速去除雜亂代碼保留基本標籤

HtmlWasher 網頁程式碼清理工具,快速去除雜亂代碼保留基本標籤
(Copyright: photovibes / 123RF Stock Photo

若你有接手編輯過他人網頁,或是複製其他頁面版型的經驗,應該會發現最困難的往往不是編輯網站,而是將現有的程式碼整理乾淨,讓它能夠格式化,呈現出一致的效果。尤其對於一些較為複雜的頁面,可能經過許多人無數次編輯後已經有些四不像,這時候就必須將不必要的部份代碼刪除,只留下最基本的部分,而這些過程大部分都是手動進行,不但很耗費時間心力,而且很可能因為修改錯誤而讓整個頁面跑掉。

CSS & JavaScript Compressor 線上程式碼壓縮工具,有效提高網站速度

CSS & JavaScript Compressor

在更新網站時,經常透過網站檢測工具來檢查網站有沒有可以改進的部份,例如我個人相當常用 PageSpeed Insights 和 Think With Google,通常會出現 CSS、JavaScript 程式碼可以被壓縮的最佳化提示資訊。如果沒有特別設定,大部分情況下會維持程式碼的可讀性,對於開發者在編輯來說會很有用,但其實放在網路上只要求能夠越快被下載越好,利用壓縮方式將不必要的空格、註解或換行清除,讓檔案盡量維持在最小狀態,不僅可提高下載效率,也能節省網站流量耗費。

超實用!一行程式碼將瀏覽器變身網頁編輯器,支援各種常見瀏覽器

超實用!一行程式碼將瀏覽器變身網頁編輯器

這幾天在 Twitter 看到一則推文分享,只要一段程式碼,就能開啟 Google Chrome 瀏覽器內建開發者工具的編輯器功能,直接在網頁內進行內容編輯測試(對,直接編輯網頁中的文字),這對於網頁開發者來說很有用,尤其是當你想知道選單可以容納多少文字,或是標題、內文會在多少字以後換行,就能以更直覺的方式看到結果。相較於之前介紹過的「Edit Any Website 只要一行程式碼就能編輯任何網頁!直接把瀏覽器變身網頁測試工具」又要更簡單一些。

WhatRuns 查看網站背後使用那些第三方服務和技術(Chrome、Firefox)

WhatRuns 查看網站背後使用那些第三方服務和技術(Chrome、Firefox)

對於開發或經營網站的朋友來說,應該很常會去研究其他網站使用那些技術,一來可知己知彼,另一方面也能從其他網站來找到更合適的功能。如果有經驗的話,通常透過瀏覽器或檢視原始碼就能知道一些什麼,但這比較耗費時間,因此有線上工具可以讓你在輸入網址後快速找出該網站使用的工具、第三方應用或程式庫技術等資訊,例如之前介紹過的 SimilarTechWappalyzer 分析網站使用什麼樣的架站程式和環境,找出其他類似的服務選項,對開發者來說很實用。