導讀：原文來自《Best “must know” open sources to build the new Web》，譯文由酷殼網陳皓整理編譯《開源中最好的Web開發的資源 》。文中收集的資料相當的齊全，供大家學習、參考。
學習HTML 5程式設計和設計
★ HTML5 Rocks : Major Feature Groups的學習HTML5的資源(HTML5示範，教程).源碼
很不錯的HTML5 Dashboard–Mozilla，效果很炫。
WhatWG Developers,一個清楚的HTML5技術規格說明書。
★ StackOverflow :大名鼎鼎的技術問答式論壇。
★ Addyosmani, jQuery和JavaScript文章教程
Sohtanaka, jQuery和JavaScript文章和教程
★ Nettuts+ 是一個面對Web開發人員和設計人員的網站，提供各種技術教程和文章，覆寫HTML, CSS,Javascript,CMS’s, PHP 和 Ruby on Rails.
Codrops,教程和web資源
WebAppers,最好的開源資源
Tutorialzine–PHP MySQL jQuery CSS 教程,資源和贈品
Mozilla JavaScript guide
codes snippets,作者自己收集的一些代碼片段
伺服器端的軟體
★ Node.js是伺服器端的JavaScript環境，其使用了異步事件驅動模式。其讓Node.js在很多網際網路應用體系結構下獲得非常不錯的性能。源碼和實時示範。
PhantomJS也是一個伺服器端的 JavaScript API的WebKit。其支援各種Web标準：DOM處理, CSS 選擇器, JSON, Canvas, 和 SVG
Lighttpd 一個輕量級的開源Web伺服器。新聞，文檔，benchmarks, bugs, 和 download. Lighttpd 支撐了幾個非常著名的 Web 2.0 網站，如：YouTube, wikipedia 和 meebo.
NGinx, 性能巨高無比的輕量級的Web伺服器。比Apache高多了。花了6年的時間，終于走到了1.0版。
Apache HTTP Server 是一個很流行的并支援多個流行的作業系統的Web伺服器。
★ PHP 可能是最流行的伺服器端的Web腳本動态處理語言。
當然，還有 Ruby, Python, Erlang, Perl, Java, .NET, Android, C++, Go,Fantom,CoffeeScript, D, …
PHP架構和工具
★ WordPress 是一個基于部落格系統的開源軟體。參看《WordPress是怎麼赢的？》
Drupal 是一個内容管理系統 (CMS).
Centurion 是一個新出現的開源 CMS ，一個靈然的 PHP5 Content Management Framework. 使用 Zend Framework, 其元件堅持通用，簡單，清楚和可重用的設計原則。
phpBB 一個開源的論壇（國内的Discuz！更多）
★ SimplePie : 超快的，易用的, RSS 和 Atom feed PHP解析。
★ PHPthumb, PHP 圖檔處理庫
★ PHPMailer 強大的全功能的PHP郵件庫
PubSubHubbub協定，一個簡單，開放， server-to-server 的 pubsub (publish/subscribe) 協定——Atom and RSS的擴充。
更多的請參看–20個你應該知道PHP庫 和 9個強大免費的PHP庫
資料庫
★ Apache CouchDB 是一個面向文檔的資料庫管理系統。它提供以JSON 作為資料格式的REST 接口來對其進行操作，并可以通過視圖來操縱文檔的組織和呈現。.源碼.
MonoQL 是一個采用PHP+ExtJS開發的MySQL資料庫管理工具。界面極像一個桌面應用程式，支援大部分常用的功能包括：表格設計，資料浏覽/編輯，資料導入/導出和進階查詢等。
MariaDB 是MySQL的一個分支，由MySQL 創始人Monty Widenius 所開發。GPL，用來對抗Oracle所有的MySQL的license的不測。自Oracle收購SUN以來，整個社群對于MySQL前途的擔憂就沒有停止過。
★ SQLite 不像常見的用戶端/伺服器結構範例，SQLite引擎不是個程式與之通信的獨立程序，而是連接配接到程式中成為它的一個主要部分。是以主要的通信協定是在程式設計 語言内的直接API調用。這在消耗總量、延遲時間和整體簡單性上有積極的作用。整個資料庫（定義、表、索引和資料本身）都在宿主主機上存儲在一個單一的文 件中。它的簡單的設計是通過在開始一個事務的時候鎖定整個資料檔案而完成的。庫實作了多數的SQL-92标準，包括事務，就是代表原子性、一緻性、隔離性 和持久性的（ACID），觸發器和多數的複雜查詢。不進行類型檢查。你可以把字元串插入到整數列中。某些使用者發現這是使資料庫更加有用的創新，特别是與無 類型的腳本語言一起使用的時候。其他使用者認為這是主要的缺點。
SQL 線上設計編輯器，這一節的那個圖檔就是這個線上編輯器的樣子了。一個畫資料庫圖表的線上工具。很強大。
API和線上資料
ProgrammableWeb, 最流行的Web Services 和 API 目錄大全。
Google Data Protocol 一組Google服務的資料服務API。
Yahoo! Developer Network – APIs 和 Tools
Yahoo! Pipes 可視化線上程式設計工具，它是一個用于過濾、轉換和聚合網頁内容的服務。
★ The Yahoo! Query Language 一個很像 SQL的網頁查詢工具。
線上代碼和媒體編輯器
★ CodeRun Studio一個基于JavaScript語言開發的跨平台的內建開發環境，它立足于雲計算的設計思路，友善開發者在浏覽器端便可以輕松開發、調試和部署網絡應用程式。（參看《Coderun.com 線上開發IDE》）
Cloud9 IDE – 一個基于Node.JS建構的JavaScript程式開發Web IDE。它擁有一個非常快的文本編輯器支援為JS, HTML, CSS和這幾種的混合代碼進行着色顯示。
★ jsFiddle – Javascript的線上運作展示架構，這個工具可以有效的幫助web前端開發人員來有效分享和示範前端效果，其簡單而強大 (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
Akshell，一種雲服務，它使用服務端的JavaScript和線上的IDE幫助開發者進行快速應用程式開發。 它還提供雲托管，是以部署是即時的。
JSONeditor, 一個好用的JSON 編輯器
★ TinyMCE 一個輕量級的基于浏覽器的所見即所得編輯器，支援目前流行的各種浏覽器，由JavaScript寫成。
Ext Designer 是一個桌面應用工具，幫助你快速開發基于ExtJS 的使用者界面。
★ LucidChart，一款基于最新的html5技術的線上圖表繪制軟體，功能強大，速度快捷，運作此軟體需要支援html5的浏覽器。
Balsamiq Mockups, 産品設計師繪制線框圖或産品原型界面的利器。
Color Scheme Designer 3 - 一個免費的線上調色工具
★ Pixlr, 是一個來自瑞典基于Flash的免費線上圖檔處理網站。除了操作介面和功能接近Photoshop，還是多語言版本，支援簡體中文。（以前酷殼介紹過）
Aviary, 是一個基于HTML5 的線上圖檔處理工具，可以很容易的對圖檔進行後期處理。Aviary API
Favicon Generator, 線上favicon(16×16)制作工具。
代碼資源和版本控制
★ GitHub 是一個用于使用Git版本控制系統的項目的基于網際網路的存取服務。
Git 是一個由Linus為了更好地管理linux核心開發而創立的分布式版本控制／軟體配置管理軟體。其巨快無比，高效，采用了分布式版本庫的方式，不必伺服器端軟體支援，使源代碼的釋出和交流極其友善。
Google Code 谷歌公司官方的開發者網站，包含各種開發技術的API、開發工具、以及開發技術參考資料。
Google Libraries API Google 将優秀的 JavaScript 架構部署在其 CDN 上，在我們的網站上使用 Google Libraries API 可以加速 JavaScript 架構的加載速度。
Snipplr 一個開放的源代碼技巧分享社群，号稱Code 2.0。和一般的源碼分享網站不同，它針對的并不是大型網站源碼，而是一些程式設計的代碼技巧。
JavaScript 桌面應用架構
★ jQuery 是一個快速、簡單的JavaScript library， 它簡化了HTML 檔案的traversing，事件處理、動畫、Ajax 互動，進而友善了網頁制作的快速發展。 源碼, API, API浏覽, 很不錯的文檔.
★ 官方的 jQuery User Interface (UI) library (示範和文檔). 源碼,Themes Roller,Download.
YUI 2 — Yahoo! User Interface Library
Mootools, 一個超級輕量級的 web2.0 JavaScript framework
Prototype 提供面向對象的Javascript和AJAX
Dojo The Dojo Toolkit，一個強大的無法被打敗的面向對象JavaScript架構。主要由三大子產品組成：Core、Dijit、DojoX。Core提供 Ajax,events,packaging,CSS-based querying,animations,JSON等相關操作API。Dijit是一個可更換皮膚，基于模闆的WEB UI控件庫。DojoX包括一些創新/新穎的代碼和控件：DateGrid，charts，離線應用，跨浏覽器矢量繪圖等。
★ Ext JS 4, 業内最強大的 JavaScript framework。
PHP.js, 一個開源的JavaScript 庫，它嘗試在JavaScript 中實作PHP 函數。在你的項目中導入PHP.JS 庫，可以在靜态頁面使用你喜歡的PHP 函數。
JavaScript 移動和觸摸架構
★ jQuery Mobile : 是 jQuery 在手機上和平闆裝置上的版本。jQuery Mobile 不僅會給主流移動平台帶來jQuery核心庫，而且會釋出一個完整統一的jQuery移動UI架構。支援全球主流的移動平台。jQuery Mobile開發團隊說：能開發這個項目，我們非常興奮。移動Web太需要一個跨浏覽器的架構，讓開發人員開發出真正的移動Web網站。我們将盡全力去滿 足這樣的需求。 Sources.
Zepto.js Zepto.js 是支援移動WebKit浏覽器的JavaScript架構，具有與jQuery相容的文法。2-5k的庫，通過不錯的API處理絕大多數的基本工作。 Sources.
MicroJS : Microjs網站應用列出了很多輕量的Javascript類庫和架構，它們都很小，大部分小于5kb。這樣你不需要因為隻需要一個功能就要加載一個JS的架。
★ PhoneGap :是一款開源的手機應用開發平台，它僅僅隻用HTML和JavaScript語言就可以制作出能在多個移動裝置上運作的應用。 Sources.
★ Sencha Touch Sencha Touch 是一個支援多種智能手機平台（iPhone, Android, 和BlackBerry）的 HTML5 架構。Sencha Touch可以讓你的Web App看起來像Native App。美麗的使用者界面元件和豐富的資料管理，全部基于最新的HTML5和CSS3的 WEB标準，全面相容Android和Apple iOS裝置。
JQtouch, 是一個jQuery 的插件，主要用于手機上的Webkit 浏覽器上實作一些包括動畫、清單導航、預設應用樣式等各種常見UI效果的JavaScript 庫。 Sources.
DHTMLX Touch 針對移動和觸摸裝置的JavaScript 架構。DHTMLX Touch基于HTML5，建立移動web應用。它不隻是一組UI 小工具，而是一個完整的架構，可以針對移動和觸摸裝置建立跨平台的web應用。它相容主流的web浏覽器，用DHTMLX Touch建立的應用，可以在iPad、iPhone、Android智能手機等上面運作流暢。
jQuery插件
Waypoints是一個jQuery 用來實作捕獲各種滾動事件的插件，例如實作無翻頁的内容浏覽，或者固定某個元素不讓滾動等等。支援主流浏覽器版本。
Lazy loader 插件可以實作圖檔的延遲加載，當網頁比較長的時候，會先隻加載使用者視窗内的圖檔，視窗外的圖檔會等到你拖動滾動條至後面才加載，這樣有效的避免了因圖檔過多而加載慢的弊端。
TweenJS : 一個簡單和強大的 tweening / animation 的Javascript庫。
Easings 類Css3的jQuery 動畫插件
Spritely 這個插件可以建立出如flash一樣的動畫效果，比如：在頁面上有一隻飛動的小鳥，一個動态滾動的背景等。
File Upload, jQuery 檔案上傳插件4.4.1
Slideshow/Carousel 插件. Sources.
Supersized – 全屏式的背景/幻燈片插件
Masonry i一款非常酷的自動排版插件，這款jQuery工具可以根據網格來自動排列水準和垂直元素，超越原來的css. Sources.
jQuery 簡單 Layout 示範，管理各種邊欄式，可改變大小式的布局。
Flexigrid – jQuery 資料表插件
Isotope絕對是一個令人難以置信的jQuery插件，你可以用它來建立動态和智能布局。你可以隐藏和顯示與過濾項目，重新排序和整理甚至更多。
Super Gestures jQuery 插件可以實作滑鼠手勢的功能。
MouseWheel 是由Brandon Aaron開發的jQuery插件，用于添加跨浏覽器的滑鼠滾輪支援。
AutoSuggest jQuery 插件可以讓你添加一些自動完成的功能。
qTip 一個漂亮的jQuery 的工具提示插件，這個插件功能相當強大。
jQuery Charts and graphic 用來制作圖表。
jQuery Tools– The missing UI library
其它jQuery資源
- http://www.smashingmagazine.com/2011/04/07/useful-javascript-and-jquery-tools-libraries-plugins
- http://webdesigneraid.com/weekly-html5-news-and-inspirations-%E2%80%93-tutorials-tools-resources-and-freebies-v-2/
- http://www.designer-daily.com/15-useful-jquery-plugins-and-tutorials-5207
- http://www.julien-verkest.fr/22/11/2007/240-plugins-jquery
- http://www.hotscripts.com/blog/10-great-html5-experiments-apps/
- http://www.noupe.com/jquery/excellent-jquery-navigation-menu-tutorials.html
- http://www.noupe.com/php/20-useful-php-jquery-tutorials.html
- http://aext.net/2010/04/excellent-jquery-plugins-resources-for-data-presentation-and-grid-layout/
- http://webdesigneraid.com/html5-canvas-graphing-solutions-every-web-developers-must-know/
- http://gestureworks.com/features/open-source-gestures/
- http://edtechdev.wordpress.com/2011/01/14/some-exciting-new-html5javascript-projects/
- http://net.tutsplus.com/articles/web-roundups/30-developers-you-must-subscribe-to-as-a-javascript-junkie/
HTML5視訊播放器
★ Popcorn.js 是一個HTML5 Video架構，它提供了易于使用的API來同步互動式内容，讓操作HTML5 Video元素的屬性，方法和事件變得簡單易用。 (來自Mozilla)
LeanBack Player HTML5視訊播放器,沒有依賴任何JavaScript架構。支援全屏播放，音量控制，在同一個頁面中播放多個視訊。 (來自Google)
Vid.ly 為你上傳的視訊提供轉換功能，并且為轉換後的視訊建立一個短網址。通過Vid.ly，讓你的視訊可以在14種不同的浏覽器和裝置上播放，不需要再去考慮将 要浏覽視訊的人使用什麼裝置了，以避免各各軟體巨頭之間的利益之争帶來了不相容，給使用者帶來了巨大的困擾，短網址讓你可以通過Twitter、 Facebook等方式友善分享視訊。Vid.ly還可以通過html代碼嵌入到其他網頁中。Vid.ly免費帳戶空間為1GB，免費帳戶也沒有播放或浏 覽限制。
JavaScript音頻處理與可視化效果
★ 使用HTML5 和 Flash, SoundManager V2 隻用單一API的提供了可靠，簡單和強大的跨平台的音頻處理。
DSP, JavaScript的聲音Digital Signal Processing
The Radiolab Hyper Audio Player v1, 帶給你 WNYC Radiolab, SoundCloud 和 Mozilla Drumbeat
jPlayer, 一個 jQuery HTML5 音頻/ 視訊庫，功能齊全的API
JavaScript圖形和3D
★ Processing.js是一個開放的程式設計語言，在不使用Flash或Java小程式的前提下, 可以實作程式圖像、動畫和互動的應用。其使用Web标準，無需任何插件。
★ Javascript 3D 引擎: ThreeJS 由 Mr Doob 開發，一個輕量級的 3D 引擎，不需要了解細節，傻瓜都能使用。這個引擎可以使用<canvas>, <svg> 和 WebGL.
Shader Toy, 一款使用WebGL的線上着色器編輯器(2D/3D). 基于線上的應用架構使您無需下載下傳任何軟體即可開始體驗. Shader Toy包含大量實用着色器, 諸如光線追蹤, 場景距離渲染, 球體, 隧道, 變形, 後期處理特效等.
PhiloGL, Sencha的PhiloGL是首個WebGL開發工具之一，提供了高水準的功能，來建構WebGL應用。Sencha建立了幾個示範，來描述架構互動式3D虛拟化的能力，比如3D view of global temperature changes。
WebGL Inspector 你就Firebug等Web調試工具一樣，這個是 WebGL的調試工具。
WebGL frameworks 由 Khronos Group 收集的一個WebGL架構清單。
EaselJS, 一個使用html5的canvas的 JavaScript 庫. Sources.
JavaScript Game Frameworks 免費的JS遊戲架構清單。另，可參看 JS遊戲架構清單。
Raphaël是一個小型的JavaScript 庫，用來簡化在頁面上顯示向量圖的工作。你可以用它在頁面上繪制各種圖表、并進行圖檔的剪切、旋轉等操作。參看Javascript向量圖Lib–Raphaël
jQuery SVG 插件讓你可以了 SVG canvas 進行互動。
Google chart tools – 參看本站的使用Google API做統計圖
Arbor.js, 是一個利用webworkers和jQuery建立的資料圖形可視化JavaScript架構。它為圖形組織和螢幕重新整理處理提供了一個高效、力導向布局算法。
JavaScript浏覽器接口(HTML5)
★ Modernizr – 是一個專為HTML5 和CSS3 開發的功能檢測類庫，可以根據浏覽器對HTML5 和CSS3 的支援程度提供更加便捷的前端優化方案.Sources. 一個有用的清單 cross-browser Polyfills
HTML5Shiv : 該項目的目的是為了讓IE 能識别HTML5 的元素。
Polyfills : 這個項目收集了一些代碼片段其用Javascript支援不同的浏覽器的特别功能，有些代碼需要Flash。
YepNopeJS : 一個異步的條件式的加載器。Sources.
jQuery CSS3 Finalise : 是否厭倦了為每一個浏覽器的CSS3屬性加字首？
★ Amplify.js :一套用于web應用資料管理和應用程式通訊的 jQuery 元件庫。 提供簡單易用的API接口。Amplify的目标是通過為各種資料源提供一個統一的程式接口簡化各種格式資料的資料處理。Amplify的存儲元件使用 localStorage 和 sessionStorage标準處理用戶端的存儲資訊，對一些老的浏覽器支援可能有問題。Amplify’為jQuery的ajax方法request 增加了一些額外的特性。 Sources.
History.js 優美地支援了HTML5 History/State APIs
Socket.IO Web的socket程式設計。
JavaScript 工具
★ {{mustaches}} 小型的 JavaScript 模闆引擎。
json:select(), CSS式的JSON選擇器
HeadJS, 異步JavaScript裝載。其最大特點就是不僅可以按順序執行還可以并發裝載載js。
JsDoc Toolkit是一款輔助工具，你隻需要根據約定在JavaScript 代碼中添加相應的注釋，它就可以根據這些注釋來自動生成API文檔。
Responsive image, 一個試驗性的項目，用來處理responsive layouts 式的圖檔。
UglifyJS是基于NodeJS的Javascript文法解析/壓縮/格式化工具，它支援任何CommonJS子產品系統的Javascript平台。
Dhteumeuleu, 互動式的 DOM 腳本和DHTML 的開源示範。
Backbone是 一個前端 JS 代碼 MVC 架構，被著名的 37signals 用來建構他們的移動用戶端。它不可取代 Jquery，不可取代現有的Template 庫。而是和這些結合起來建構複雜的 web 前端互動應用。如果項目涉及大量的 javascript 代碼，實作很多複雜的前端互動功能，首先你會想到把資料和展示分離。使用 Jquery 的 selector 和 callback 可以輕松做到這點。但是對于富用戶端的WEB應用大量代碼的結構化組織非常必要。Backbone 就提供了 javascript 代碼的組織的功能。Backbone 主要包括 models, collections, views 和 events, controller 。
用戶端和模拟器
BrowserShot, 檢查浏覽器的相容性，跨浏覽器平器的測試
Test everything… 輸入一個你想要測試的URL……
Android browser 模拟器
iPhone browser 模拟器
Opera browser 模拟器
★ Firebug 與 Firefox 內建，可以檢視和調試你的Web頁面。
CSS3和字庫
★ CSS3 Maker CCS3的生成器
容易地建立 CSS3 animations。 Sencha Animator 是一個桌面應用可以為WebKit浏覽器和觸摸式移動裝置建立 CSS3 animations 。
CSSwarp – CSS 文本扭曲生成器
Gradient Editor, 一個強大的Photoshop式的CSS 漸變編譯器。來自 ColorZilla
★ Google Web Fonts 通過Google Web Fonts API 可以浏覽所有的字型
@font-face Kit Generator, 為Web轉換字型
Typetester, 比較字型。
Media Queries. 一組 responsive web 設計。
Pattern TAP, UI元件。
Website (FULL)模闆
★ HTML5 Boilerplate是一個HTML5 / CSS / js模闆，是實作跨浏覽器正常化、性能優化，穩定的可選功能如跨域Ajax和Flash的最佳實踐。項目的開發商稱之為技巧集合，目的是滿足您開發一個跨浏覽器，并且面向未來的網站的需求。 Sources.
HTML5 starter pack是一個幹淨的和有組織的目錄結構，其可适合很多項目，還有一些很常用的檔案，以及簡單的Photoshop設計模闆。
★ Initializr是一個HTML5模闆生成器，其可以幫你在15秒内建立一個HTML5的項目。
Animated Portfolio Gallery （教程）
Slick MobileApp Website如果通過 jQuery 和 CSS 制作一個手機應用的網站。
RSS Reader如果通過jQuery Mobile 建立一個RSS Reader
★ Single Page Applications 使用jQuery的朋友們 (Backbone, Underscore,…)建立單一頁面。
Google TV Optimized Templates,傳統電視已經開始和網路融合，但現階段産業仍然正在摸索之中，為此将來的網頁亦會有結構上的改變。Google TV Optimized Templates是一個用HTML/JavaScript制成的開源軟體，一如其名是一個對Google TV作出了最佳化的的網頁範本，其特色是以遙控器作為操作的前提，令使用者無需輸入任何文字就可以進行控制。未來除了會有專用遙控器外，還會采用智能手機透過W-iFi控制Google TV的方法。Optimized Templates的界面中左方會展示分類，右方會顯示該分類下的影片截圖，影片播放、切換、全畫面表示都可透過鍵盤上的方向鍵、Backspace或Enter等鍵完成，友善今後的網站開發人員借鏡。HTML5版的模闆使用了Google TV UI library,jQuery和Closure。
譯文出自：酷殼