100+ 值得收藏的 Web 開發資源

對於 Web 工程師來講作好和最糟糕的事都是 Web 技術的突飛猛進。這也意味着做爲一個 Web 開發者來講必定要不斷的學習，適應變化。

所以，做者列舉出了本身開發和學習過程當中遇到的好工具和資源，在這裏分享給你們：

JavaScript Libraries

• jQuery：最知名的 JavaScript 庫。
  

• BackBoneJS：爲複雜 WEB 應用程序提供 MVP 結構。
  

• D3.js：最流行的 Javascript 可視化圖形庫之一。
  

• React：Facebook 開源的 JavaScript 庫。
  

• jQuery UI：以 jQuery 爲基礎的開源 JavaScript 網頁用戶界面代碼庫。
  

• jQuery Mobile：jQuery 框架的一個組件，提供完整統一的移動 UI 框架。
  

• Underscore.js：提供了一整套函數式編程的實用功能，可是沒有擴展任何 JavaScript 內置對象。
  

• Moment.js：一個JavaScript 日期處理類庫，用於解析、檢驗、操做、以及顯示日期。
  

• Lodash：一個具備一致接口、模塊化、高性能等特性的 JavaScript 工具庫。
  

前端框架

• Bootstrap：著名的快速開發響應式 Web 應用程序的前端工具包。
  

• Foundation：一個易用、強大並且靈活的前端框架，用於構建基於任何設備上的 Web 應用。
  

• Semantic UI：全語義化的前端界面開發框架。
  

• uikit：一款輕量級開源的前端框架。
  

數據庫

• MySQL：最流行的關係型數據庫管理系統。
  

• MariaDB：由 MySQL 早期員工開發，屬於 MySQL 的一個分支。
  

• MongoDB：基於分佈式文件存儲的數據庫。
  

• Redis：一個開源、支持網絡、基於內存、鍵值對存儲數據庫。
  

• PostgreSQL：開源的對象 - 關係型數據庫管理系統，Uber 早期就是用得這個。

Task Runners / Package Managers

• Grunt：JavaScript 世界的構建工具。
  

• Gulp：基於流的自動化構建工具。
  

• Bower：Web 包管理器，包括 HTML，CSS，JavaScript，字體、甚至圖片資源。
  

• NPM：Node 包管理器。

CSS 預處理器

• Sass：一個強大、成熟、穩定的 CSS 擴展。
  

• Less：做爲一個 CSS 的擴展，其兼容性很是好，學習成本很低。
  

• Stylus：提供更有效、優雅的方式來生成 CSS。
  

Markdown 編輯器

• StackEdit：一個開放源碼無償使用的 MarkDown 編輯器, 基於 PageDown。
  

• Dillinger：也是在線編輯器，提供雲存儲，並支持 HTML5，PDF 等多種導出格式。
  

• Mou：Mac OS X 上一款出色的 Markdown 編輯器。
  

• Texts：同時支持 Windows 和 Mac OS X。
  

Icon 資源

• Font Awesome
  

• IconMonster
  

• IconFinder
  

• Fontello
  

Git Clients / Services

• SourceTree：一款免費而且很酷的 Git 客戶端，支持 Windows 和 Mac。

• GitKraken (Beta)：一款免費、直觀、漂亮的跨平臺 Git 客戶端。

• Tower 2：APP 很漂亮，需付費。
  

• GitHub Client：官方客戶端。
  

• Gogs：一個極易搭建的自助 Git 服務。
  

• GitLab：對私有項目也免費。

本地開發環境

• XAMPP：徹底免費，容易安裝的 Apache 分佈式環境。包括：MariaDB，PHP，Perl。
  

• MAMP：Apache + MySQL + PHP + Python + Perl。
  

• WampServer：Windows 下的 Web 開發環境，能夠建立基於 Apache 2，PHP 和 MySQL 的 Web 應用。
  

• Vagrant：安裝和配置簡單、輕量級。
  

• Laragon：快速、容易搭建的 Windows 本地開發環境。包括：MySQL，PHP，Redis，Apache。

文件比對

• Diffchecker：文件比對的在線網站。
  

• Beyond Compare：老牌軟件，能快速比較文件和文件夾，功能強大。
  

Code Sharing / Experimenting

• codeshare：能和其餘開發者實時共享代碼。
  

• JS Bin：能夠將編輯後的代碼保存到本地，或將 URL 地址發給其餘人，讓其協助調試代碼。支持 HTML，CSS，JavaScript，Markdown，Jade 和 Sass。
  

• JSfiddle：能自定義環境來測試你的 HTML，CSS，JavaScript 代碼。
  

• Dabblet：Web playground，交互效果不錯。
  

團隊協做

• Slack：爲團隊打造的交流應用，咱們部門就在用，強力推薦。
  

• Trello：徹底免費，靈活性高，可視化，和任何人一塊兒管理任何事情。
  

• Glip：支持實時消息、視頻、視頻會議、日曆分享等等功能。

• Asana：幫助追蹤、記錄團隊成員的工做狀況。
  

• Jira：這個你們應該都用過吧，老牌團隊協做應用。
  

激發靈感

• CodePen：能在上面分享和找到出色的設計，還會有其餘開發者爲你提出建議。
  

• Dribble：一個設計師分享他們做品的社區。
  

網站性能測試

• Website Speed Test：KeyCDN 提供的免費網站調試工具。

• Google PageSpeed Insights：測試以後還會提出優化意見。

• WebPageTest：支持全球多地區速度測試和多種瀏覽器。
  

• Pingdom：測試頁面加載速度，爲你找出性能瓶頸。
  

• GTmetrix：不光能測試速度，還能幫助分析是否有法律風險，並提出優化建議。

Web 開發者社區

• Stack Overflow：有超過 470 萬的活躍開發者在其中互相幫助。

• Hashnode：全球性的開發者社區，大牛不少。
  

• Refind：面向創業者、開發者、設計師的 Web 項目分享社區。
  

• Google+ Web Developers Group：Web 開發者的 Google+ 社區。
  

• Facebook WordPress Front-end Developers Group：WordPress 的前端工程師 Facebook 小組，討論開發問題、技術趨勢。
  

• LinkedIn Web Design and Development Professionals Group：領英上的專業 Web 從業者小組。
  

• LinkedIn PHP Developer Group：領英上的 PHP 開發者小組。
  

• Sitepoint Forums：Web 開發者論壇。
  

• /r/perfmatters：Reddit 上主要討論網站性能優化的 subreddit，由 KeyCDN 發起。
  

• /r/webdev：Reddit 上討論 Web 開發的 subreddit。
  

Web 開發資訊

• wdrl.info：每週推送精心挑選的 Web 開發相關文章。
  

• web tools weekly：主要推送 Web 開發工具。
  

• webopsweekly.com：每週推送關於 Web 運營、部署等方面的文章。
  

• /dev tips：每週分享開發小技巧。
  

• friday front-end：天天在 twiiter 發開發相關資訊，可訂閱而後每週發彙總郵件。
  

• front-end dev weekly：手工挑選的 Web 開發、工具和創意資訊，每週推送。
  

• smashingmagazine.com：面向 Web 設計師和開發者的一款在線雜誌，內容質量很高，每月的第二個星期二發佈。

  
  

原文地址：100+ Useful Web Development Tools and Resources.