這幾天在 Twitter 看到一則推文分享，只要一段程式碼，就能開啟 Google Chrome 瀏覽器內建開發者工具的編輯器功能，直接在網頁內進行內容編輯測試（對，直接編輯網頁中的文字），這對於網頁開發者來說很有用，尤其是當你想知道選單可以容納多少文字，或是標題、內文會在多少字以後換行，就能以更直覺的方式看到結果。相較於之前介紹過的「Edit Any Website 只要一行程式碼就能編輯任何網頁！直接把瀏覽器變身網頁測試工具」又要更簡單一些。
網頁開發
Caself 提供 800 種免費紋理背景圖片下載，網頁設計必備素材推薦
我在設計網頁時傾向使用單色背景，不過很多時候選擇合適的背景圖看起來會使網站更有質感，也讓視覺上不會過於呆板，那麼要去那裡找到這些素材呢？之前曾經介紹「Hero Patterns 免費 SVG 重複背景圖產生器，CSS 程式碼複製貼上快速套用」就是相當值得加入書籤收藏的背景產生器，透過它能建立出具有重複背景效果的圖案，除此之外，Subtle Patterns 和 Novapattern 分別提供 400 個高品質紋理背景素材和 Photoshop 可編輯的圖片讓使用者免費下載。
WhatRuns 查看網站背後使用那些第三方服務和技術（Chrome、Firefox）
對於開發或經營網站的朋友來說，應該很常會去研究其他網站使用那些技術，一來可知己知彼，另一方面也能從其他網站來找到更合適的功能。如果有經驗的話，通常透過瀏覽器或檢視原始碼就能知道一些什麼，但這比較耗費時間，因此有線上工具可以讓你在輸入網址後快速找出該網站使用的工具、第三方應用或程式庫技術等資訊，例如之前介紹過的 SimilarTech、Wappalyzer 分析網站使用什麼樣的架站程式和環境，找出其他類似的服務選項，對開發者來說很實用。
Varvy Pagespeed 免費搜尋引擎最佳化指南，找出讓網站更快的方法
我常說「搜尋引擎最佳化」（SEO）沒有捷徑，也沒有立竿見影的作法，你可以做的是遵循著大部分使用者的共同經驗，使網站在搜尋引擎中取得更好的搜尋結果排名。當然我認為最重要的是詳讀 Google 搜尋引擎最佳化初學者指南，這可能也是 Google 少數對外公開的說明文件，除了在 SEO 部分有所幫助，文件說明更能建立正確的網頁製作觀念，對我來說學習路上有很多想法都是從 Google 這份官方指南中獲得。
Type Hero 在瀏覽器即時測試 Google Fonts 效果，可切換字型和背景顏色
Google Fonts 可能是目前收錄最多免費英文字型的網站，去年大改版後，原本動線不佳和瀏覽不便等情形已經獲得改善，走向更簡約的設計風格，整體瀏覽感覺是很棒的！假如你不喜歡它的字型搜尋或測試功能，也有開發者自行開發第三方應用，例如 FontCDN 更好用的網頁字型搜尋工具，能直接在網頁快速套用 Google 字型的 Font Swap 外掛程式或是 Better Font Finder 更直覺的字型檢視器，都是這網站之外值得一試的免費服務。
