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

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

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

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

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

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

Screen Sizes 收錄 Apple 裝置顯示器、解析度和安範圍等技術資訊

Screen Sizes 收錄 Apple 裝置顯示器、解析度和安全範圍等開發技術資訊

做為應用程式開發者應該會需要檢索各種裝置的顯示器大小,雖然在網路上搜尋一下就能查到資料,如果整合為單一工具會更易於查找,例如我之前推薦過「Screen Sizes 常用手機、平板電腦和顯示器螢幕尺寸大小、寬度等資訊查詢」就收錄常見的智慧型手機、平板電腦和筆電顯示器資訊,不過比較可惜的是網站似乎沒有提供較新的裝置,若是有所疏漏還是只能到其他網站搜尋。

Lucid Index 收錄各種可自行架站程式,以分類或搜尋找出最適合選擇

Lucid Index 收錄各種可自行架站程式,以分類或搜尋找出最適合選擇

記得以前剛開始練習自己架站時,什麼都會想要自行搭建,像是內容管理系統、討論區、Email、DNS 和網站監測工具等等,通常在這過程可以獲得不少成就感,更重要的是自己架設比較省錢。那段時期我摸索了不少現今依然存在且持續開發維護的開放原始碼專案,現在回想起來覺得很有趣,也累積很多對日後有用的經驗。

useAnimations 免費動態圖示下載,可用於應用程式或網站介面開發

useAnimations 免費動態圖示下載,可用於應用程式或網站介面開發

如果要開發應用程式或製作網站,我們通常會尋找適合的免費圖示,如此一來就能減少開發成本,也能更快製作出符合期待的介面,像是 IkonatePotlab IconsUniconsillustrio 都可以直接套用到使用者操作介面的圖示集,而且也具備一定程度的可自訂性,對於開發者來說是不可多得的資源。

Mockdown 線上將軟體介面、網頁或應用程式擷圖轉為 Mockup 視覺稿

Mockdown 線上將軟體介面、網頁或應用程式擷圖轉為 Mockup 視覺稿
Copyright: filborg / 123RF Stock Photo

如果從事網頁設計相關工作應該很常聽到一個名詞「Mockup」,中文稱為模型或原型,若翻譯成「視覺稿」可能比較容易理解,Mockup 通常在「Wireframe」(線框圖)之後,為了讓整體畫面更貼近最終成果,會將一開始的草稿線條圖加入更多視覺元素,例如將排版、圖形和配色呈現出來,也就能夠得出最後設計稿,而在我向設計師朋友詢問後得知 Mockup 通常是透過 Photoshop、Sketch 或 Adobe XD 等軟體繪製。

OpenMoji 開放原始碼免費表情符號,彩色單色 SVG、PNG 格式免費下載

OpenMoji 開放原始碼免費表情符號,彩色單色 SVG、PNG 格式免費下載

除了聊天會用到表情符號(Emojis),在做設計或開發介面也可能使用這些小圖案,不過圖片有版權規範,若沒有付費購買授權相信大家也不敢貿然使用,更不用說是系統輸入法內建的表情圖案。當然如果有預算,直接付費購買你需要的圖案設計是最簡單、最安全的作法,或是選擇以 CC0 授權方式釋出的圖示就能減少日後可能會有的侵權疑慮,畢竟現在網路發達,搜尋一下很多資訊就會攤在電腦前,要盡量減少被別人抓到把柄的機會。

Screen Sizes 常用手機、平板電腦和顯示器螢幕尺寸大小、寬度等資訊查詢

Screen Sizes 常用手機、平板電腦和顯示器螢幕尺寸大小、寬度等資訊查詢
Copyright: georgejmclittle / 123RF Stock Photo

無論是智慧型手機、平板電腦或一般桌上型電腦螢幕都擁有各種螢幕尺寸,雖然是照著通用解析度比例下去設計,但開發人員往往很難馬上意會到某個品牌、型號的螢幕大小為何,還好現在只要幾秒鐘就能 Google 找到官方的技術資訊,對於網站或應用程式開發很有用,如果你會需要用到關於裝置、螢幕大小和寬度等資料,可將本文介紹的網站加入書籤。

Device Metrics 應用程式開發必備!Google 收錄筆電、行動裝置及穿戴裝置螢幕規格細節查詢

Device Metrics 應用程式開發必備!Google 收錄各種常見筆電、行動裝置螢幕規格細節查詢
(Copyright: suziria / 123RF Stock Photo

伴隨著各種大小尺寸的行動裝置問世,對開發者來說,這也是另一個不得不克服的問題,尤其是如何讓應用程式支援更多螢幕尺寸或在各種平台使用,當然最好的方式是先鎖定最大、最廣泛使用族群,目前來說行動裝置為 iOS、Android,電腦則是 Windows 和 macOS 兩大作業系統。如果你是應用程式或軟體開發者,應該會需要一份包含各種主流裝置的技術細節。