前端開發經常使用免費資源，顯著提高工做效率

Jatin Rao 原做，受權 New Frontend 翻譯。

最近幾個月我收集了大量能夠顯著提高開發效率的資源連接，在這篇文章中我會分享其中一些。這些資源對我頗有幫助，但願對你也是如此。閒話少敘，下面是一些很棒的免費資源！

HTML

• W3C Markup Validator 檢查網頁文件的標記是否合法
• Meta Tags 編輯生成用於社交網絡等站點的元標籤，並預覽效果
• Favicon Generator 將 GIF、PNG、JPG 格式的圖像文件轉換爲 ICO 格式

CSS

• W3C CSS Validator 檢查 CSS 文件是否合法
• Animate.css 開箱即用的跨瀏覽器 CSS 動畫效果
• animista 按需定製 CSS 動畫效果
• CSSeffectsSnippets CSS 動畫效果收集，點擊某個效果便可複製相應的代碼片斷至剪貼板
• SpinKit 聚集了實現各類加載效果的 CSS 代碼片斷
• CSS Minifier 在線 CSS 代碼極簡化/壓縮工具

JavaScript

• JavaScript 30 使用原生 JavaScript 在 30 天內完成 30 個項目
• Codewars 和其餘人一塊兒完成真實的代碼挑戰，提高你的技術
• ESLint 檢測、修正 JavaScript 代碼的問題
• Prettier 格式化 JavaScript 代碼

圖標

• Font Awesome 網站開發最流行的圖標集
• Feather 簡潔美觀的開源圖標
• Ionicons 精心繪製的開源圖標
• Simple Icons 常見品牌的 SVG 圖標
• Material Design Icons 輕快、精美的符號圖標，包括常見操做和事項
• Tabler Icons 681 枚可定製的開源 SVG 圖標

色彩

• Material Design Colors Material Design 色彩
• Flat UI Colors 2 14 組配色、280 種顏色
• Color Hunt 分享色彩搭配的自由開放平臺，包括成千上萬人工選取的配色，能夠從中獲取配色的靈感
• Color Space 配色方案、CSS 顏色漸變生成工具
• uiGradients 美觀的顏色漸變
• Colors and Fonts 色彩和字體工具
• Coolors 配色方案生成工具

插畫

• Undraw 持續更新的精美的 SVG 插畫集
• manypixels 免費插畫集
• IRA Design 經過調配漸變色、搭配手繪組件定製插畫
• Free Illustrations by Lukasz Adam 免費 SVG 插畫
• Blobmaker 在線 SVG 形狀生成器
• Get Waves 在線 SVG 波形生成器

圖片

• Unsplash 可供無償使用的圖片
• Pexels 精美的免費圖片和視頻
• Burst 免費高分辨率圖片，可用於網站和商業用途
• ISO Republic 使用 CC0 許可的免費高分辨率圖片和視頻
• Pixabay 使人驚歎的免費（公共領域）圖片和視頻站點
• StockSnap.io 精美的免費圖片，一樣使用 CC0 許可
• Photopea 在線圖片編輯工具，支持大量高級功能
• Online Image Compressor 在線圖片壓縮工具，一次能夠壓縮多達 20 張圖片
• Bulk Resize Photos 最快的在線圖片縮放工具（圖片縮放和壓縮在本地完成，無需上傳到服務器）

參考

• Front-end Developer Handbook 2019 前端開發者手冊 2019 版，如何學習前端開發實踐的全面指引
• HackerRank 2020 Developer Skills Report HackerRank 的 2020 年開發者技能報告，有 116648 名開發者參與調查
• Stack Overflow Developer Survey 2020 Stack Overflow 的 2020 年開發者調查報告，將近 65000 名開發者參與調查
• HTML & CSS 很好的學習 HTML、CSS 的資料
• Refactoring UI 從開發者的角度講解如何應用特定的策略來設計美觀的用戶界面
• Airbnb JavaScript Style Guide Airbnb 的 JavaScript 風格指南，算是目前業界最流行的 JavaScript 代碼風格指南
• JavaScript & jQuery 很好的學習 JavaScript 和 jQuery 的資料
• You Don't Know JS 深刻理解 JavaScript 語言的核心機制
• Eloquent JavaScript 面向編程初學者的 JavaScript 教程
• Learning JavaScript Design Patterns JavaScript 設計模式，面向 JavaScript 和 jQuery 開發者
• Web Content Accessibility Guidelines (WCAG) 2.1 各類讓網站的可訪問性更好的建議

可訪問性

• NV Access Windows 平臺下的屏幕閱讀器
• ChromeVox Chrome Extension Google 出品的 Chrome 屏幕閱讀插件
• axe Chrome Extension 給 Chrome 開發者工具增長可訪問性測試的插件

部署

• GitHub Pages GitHub 提供的免費靜態網站託管服務
• Netlify 30 秒內部署你的網站
• Vercel 快速部署你的網站
• Surge 只需一個命令就能夠發佈你的網站
• Heroku 在雲端構建、運行你的應用

其餘

• web.dev 評測網站性能（基於 Lighthouse）
• Shape Divider 定製各類形狀的網站分區 SVG 的工具
• GTmetrix 網頁性能分析工具
• Can I Use 前端技術的瀏覽器支持狀況
• Carbon 代碼轉圖片工具
• Wappalyzer 檢測某個網站使用的技術棧