寫程式必備!Microsoft Docs 收錄數千個程式碼範例,還可連結到 GitHub

寫程式必備!Microsoft Docs 收錄數千個程式碼範例,還可連結到 GitHub

雖然平常很少去看 Microsoft Docs 說明文件,但得知微軟將網站內部的程式碼範例集合起來還是相當興奮,畢竟這些程式碼可能四散在不同服務上,對開發者來說,範例通常有助於學習一項新技術,就像按圖索驥可以從現有的程式碼來拼湊出雛形,而開發者選擇使用 Microsoft 產品或服務時就能透過說明中心的程式碼範例輕鬆入門。

HEAD 網頁開發參考手冊,收錄 HTML5 在 head 可用標籤及範例說明

HEAD 網頁開發參考手冊,收錄 HTML5 在 head 可用標籤及範例說明

如果你是自行架站的網站管理者,對網頁原始碼結構應該不陌生,若以 WordPress 架設網站通常會有完整 <head> 段落,取決於你使用的佈景主題,這部份是用來描述一個頁面的相關資訊,例如網頁標題、語言、樣式表、說明、關鍵字和略縮圖等等,很多時候會透過 SEO 外掛工具產生各種常用的 Meta Tags 以擴充佈景主題不足的部分,如果你要從頭開始寫一個網頁或佈景主題,就必須知道 <head> 有那些可用的標籤。

修復 WordPress Gravatar 大頭貼圖片遺失 ALT 標籤 SEO 問題

修復 WordPress Gravatar 大頭貼圖片遺失 ALT 標籤 SEO 問題

本文參考資料 Missing WordPress Gravatar ALT tag value? How to fix, 原作者 App Shan。

如果有使用 WordPress 架站的話一定對 Gravatar 不陌生,Gravatar 算得上十年來最流行的大頭貼服務,只要在網站上以 Email 註冊一個帳號,上傳頭像與該信箱地址連結,在支援大頭貼功能的部落格留言後就會顯示你的頭像,而最多人使用的 WordPress 平台就支援 Gravatar(畢竟他們也是同一家公司 Automattic 旗下的項目)。即使現在比較多網站直接使用 Facebook 留言框取代內建的留言功能,依然會在作者介紹的欄位使用 Gravatar 大頭貼。

Freebies.ByPeople 各種免費素材集散地,設計師開發人員必須收藏

Freebies.ByPeople 各種免費素材集散地,設計師開發人員必須收藏

免費資源網路社群本身已經是一個收錄超過六千篇文章的免費資源網站,因此我就比較少介紹同類型的服務,不過網路上確實有不少類似網站,例如 Evernote Design 設計師必備懶人包就在單一網站上整合各種設計相關素材資源;或是 The Stocks 精選免費圖庫,一站收錄更方便搜尋等等,這些集合式免費資源都非常值得加入書籤以備不時之需。

Codeimg 程式碼轉圖片,可自訂視窗陰影效果更適合分享社群網站

Codeimg 程式碼轉圖片,可自訂視窗陰影效果更適合分享社群網站

如果想把一小段程式碼分享到社群網站,透過 GitHub Gist 產生鏈結是個不錯的方式,或是參考我之前介紹的「5個程式碼分享服務,貼上後立即產生鏈結並加入高亮效果」,若要轉為精美的圖片,我也推薦過 CarbonCodeZen 可以將程式碼轉成圖片、加上視窗陰影和上色效果的線上工具,對於要分享至社群網站來說更好用。大家都知道社群網站在不同區塊或類別都有不一樣的圖片尺寸限制,接下來要介紹的這項服務就是整合社群網站模版和程式碼轉圖片工具,讓你可以做出更適合分享的程式碼圖片。

MailtoUI 強化 Email 連結,點選後可選擇在 Gmail、Outlook 或複製地址

MailtoUI 強化 Email 連結,點選後可選擇在 Gmail、Outlook 或複製地址

在網頁裡如果要放入 Email 鏈結,就必須在超連結加上 mailto: 語法,事實上不建議在網站裡直接顯示電子郵件地址,一來有可能變成垃圾郵件(SPAM)寄送的目標,另一方面點選電子郵件鏈結後經常跳出的不是使用者慣用的 Email 工具也會造成困擾,之前我曾介紹過一個瀏覽器外掛「I hate mailto 點選 Email 不自動打開郵件軟體,將郵件地址複製到剪貼簿」就是為了解決類似問題,可以在點選郵件鏈結時自動複製 Email 地址而不是打開郵件軟體。

Superbar 強化 Mac 選單列讓常用操作一鍵快速開啟

Superbar 強化 Mac 選單列,讓常用操作一鍵快速開啟

如果你還有印象,前段時間我剛介紹過「MacMenuBar 收錄超過 200 個支援選單列 Mac 應用程式」,對於平常使用 macOS 而且很習慣從選單列進行各項操作的朋友來說特別有用,而且也更節省時間,利用下拉式選單可以做很多事情。若你想讓 Mac 選單列更精簡整齊的話,也可試著以 DozerVanilla 等應用程式隱藏用不到的應用程式圖示,在調整後只留下比較常用到的功能,如此一來也能改善使用上的效率。

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

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

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

為 Facebook Comments 留言外掛程式加入延遲載入 Lazy Load 功能教學

為 Facebook Comments 留言外掛程式加入延遲載入 Lazy Load 功能
Copyright : dolphfyn / 123RF Stock Photos

幾天前在「CommentBox.io 沒有廣告、不追蹤用戶隱私的網站留言系統」一文有提到當今網站或部落格使用的幾種留言服務,而目前最多網站使用就屬 Facebook Comments 臉書留言外掛程式,可透過幾行程式碼快速串接,也不用自己建置相關系統或資料庫,整合使用者的 Facebook 帳戶在管理上更容易,我在幾年前就已經將 WordPress 內建的迴響功能關閉並替換為臉書留言外掛,在資源耗用和安全性方面更為理想。

CodeCopy 在程式碼旁加一個「複製到剪貼簿」按鈕,支援 GitHub 等網站

CodeCopy 在程式碼旁加一個「複製到剪貼簿」按鈕,支援 GitHub 等網站

身為開發者一定對於 GitHub 不陌生,有許多開放原始碼(Open Source)專案都能在這裡找到,其他像是 StackOverflow 則是尋找解決方案絕佳去處,在搜尋問題時很多時候都可以在這網站找到網友提供的解法,如果要用於網站呈現原始碼,我個人習慣選擇 GitHub Gist,我在「5個程式碼分享服務,貼上後立即產生鏈結並加入高亮效果」曾經推薦,要分享程式碼或嵌入文章都非常值得一試。