Loaders 為開發者提供免費動態載入圖示 React、HTML、CSS 程式碼

Loaders 為開發者提供免費動態載入圖示 React、HTML、CSS 程式碼

如果在開發網站、應用程式或軟體專案時需要讀取中的動態圖示,UI Ball 有個名為「Loaders」網站收錄 24 種類型獨特、可自訂且輕量化的載入動態圖,Loaders 也是一個 React.js 套件資料庫,打開網站就能在線上直接預覽這些很眼熟的動畫圖,對於要取用拿去開發專案來說非常有用,也不用上網到處尋找動態圖,Loaders 所有動態圖示都有提供對應的 React、HTML 和 CSS 原始碼。

Mesh 漸層色背景產生器,加入顏色以拖曳方式扭曲漸變效果

Mesh 漸層色背景產生器,加入顏色以拖曳方式扭曲漸變效果

如果你喜歡 iPhone、Mac 漸層顏色背景圖片,其實也可以自己動手做,之前介紹過不少漸層色的背景產生器,像是「Gradient Backgrounds」就是一站式的漸層背景產生工具整合各種服務(有點像是 The Stocks 2 整合免費圖庫、影片、圖示和字型的感覺),或是 WebGradients 收錄超過 180 種漸層色背景免費下載,產生 CSS 3 語法在取用顏色更方便。 其他還有像是 BlendColorSparkCoolHue 都是類似的圖案產生器服務。

Alwane 網頁配色擷取工具,輸入網址就能取得顏色代碼相關資訊

Alwane 網頁配色擷取工具,輸入網址就能取得顏色代碼相關資訊

如果想知道某個網站配色方式,除了打開開發人員工具或是檢視原始碼,也有第三方服務可以使用,即使無法完整複製別人的配色,也能快速得知網站使用的顏色代碼或配色模式,取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡單的方式來完成這些工作呢?若你有類似的需求,接下來要介紹的服務或許可以滿足,這項服務會擷取特定網頁使用的顏色,讓顏色相關資訊更一目瞭然。

SEO Checker 專業 SEO 報告工具,找出各種網頁問題並提供解決方案

SEO Checker 專業 SEO 報告工具,找出各種網頁問題並提供解決方案

如果說到要怎麼改善搜尋引擎最佳化(SEO)成效,我通常會說先把程式碼寫對寫正確,然後檢查一下網站速度使用者體驗,尤其是 Google 已經將網站使用體驗核心指標(Core Web Vitals)列為搜尋排序的因素,如何最佳化三項指標:LCP、FID 和 CLS 就是目前最重要的工作,另一方面,必須要仔細閱讀「Google 搜尋引擎最佳化入門指南」有助於建立起正確的觀念。以往各項網站最佳化操作依然可行,也是網站管理者必須要注意而且時時刻刻檢視的項目,透過一些工具進行分析有助於找出並且釐清應該進行的相關操作。

WebPageTest 網站效能檢測工具,協助將使用體驗核心等各項指標最佳化

WebPageTest 網站效能檢測工具,協助將使用體驗核心等各項指標最佳化

大家都知道 Google 今年已將網站使用體驗核心指標(Core Web Vitals)列為搜尋排序因素之一,也就是說管理者需要努力讓網站三項指標:LCP、FID 和 CLS 維持在良好狀態,因此除了速度也要考量到各種網頁元件放置,透過不斷修改調整和測試來使瀏覽者獲得更好的體驗,如果是 Cloudflare 使用者不妨開啟「啟用 Cloudflare Browser Insights 收集網站 Web Vitals 和效能指標」功能來分析數據,Google 自家提供的 PageSpeed Insights 也能在輸入網址後進行檢測並獲得相關數據表現。

FAKE INFO GENERATOR 個資產生器建立隨機帳號、信用卡、電話地址

FAKE INFO GENERATOR 個資產生器建立隨機帳號、信用卡、電話地址

這項產品已經無法使用,請搜尋其他替代方案。

如果開發人員有測試上的需要,例如要產生很多的人頭帳號,用於測試系統功能操作或介面開發等等,可使用線上產生器取得各種隨機個資,例如 FakeNa.meFake Name Generator 可隨機產生姓名、Email、電話號碼、帳號、密碼、生日、地址等等個人資訊,而這些資料其實都是不存在的,可以用在測試、提高線上隱私(註冊帳號不想被服務取得真實身份),而且也比隨意亂填來得更像真的。

bbburst 線上產生五顏六色繽紛效果的 SVG 圖片

bbburst

bbburst 是一個很簡單的線上工具,可以輕鬆產生有爆炸效果的彩色形狀 SVG 圖片,看起來就像文章上面這張擷圖一樣很繽紛,帶著邊緣模糊效果,非常適合使用於背景、封面或按鈕,為設計加入生動活潑的元素,當使用者透過自訂工具產生合適的圖片時,只需點選下載 SVG 圖片或複製 SVG 標記,使用 SVGOMG 等工具最佳化產生的 SVG 程式碼。

Coding Font 從 27 種免費字型找出最符合自己編寫程式碼的選擇

Coding Font 從 27 種免費字型找出最符合自己編寫程式碼的選擇

如果你是軟體工程師,每天可能會花大量時間瀏覽、閱讀、修改程式碼,至少有八個小時會緊盯著編輯器,俗話說「工欲善其事,必先利其器」,適合閱讀程式碼的字型對於工作效率和舒適度來說有很大的幫助,不過那麼多的字型應該要怎麼選擇呢?Dev Fonts 提供超過 36 種開發者會用到的字型,直接在線上預覽程式碼,選擇不同的編輯器配色、程式語言,幫助使用者找出最符合閱讀習慣的字型選擇。

Credit Card Generator 測試用信用卡產生器,含 CVV 安全碼

Credit Card Generator 測試用信用卡產生器,含 CVV 安全碼
Copyright: hin255

如果要開發具有購物車系統的網站或應用程式,可能會需要串接線上付款功能,雖然我沒有相關的開發經驗,但聽過的案例大多會使用第三方支付平台,若在製作付款系統時需要測試信用卡的驗證功能,之前介紹過「Dummy Card Generator」線上工具可以產生電子商務開發測試時使用的信用卡卡號,需要更多的資料可使用身分產生器 Fake Name GeneratorFakeNa.me,它們的功能是產生虛擬的使用者個資,也能用於開發網站或應用程式使用。

LINE 分享連結網站縮圖標題錯誤、無法顯示?PagePoker 可強制更新

LINE 分享連結網站縮圖標題錯誤、無法顯示?PagePoker 可強制更新

當使用者將網址複製、貼上 LINE 時會在對話視窗顯示網頁標題、描述和縮圖,這些資訊是從頁面的 Open Graph 標籤抓取而來,簡單來說,網頁開發者會透過 Open Graph 標籤指定網站標題、說明、固定網址、語言和圖片鏈結等資訊,讓搜尋引擎、社群網站或即時通訊軟體使用這段內容來呈現出預覽效果,因此完善 Open Graph 標籤資訊很重要,有助於讓網頁在各種平台顯示正確資訊。