前端開發指南：匯集主流學習資源

創建此項目靈感從SwiftGuide而來，這份指南匯集了前端開發所使用語言的主流學習資源，并以開發者的視角進行整理編排而成。

GitHub： w3crange/Front-End-Develop-Guide ｜ 網站： http://w3crange.github.io ｜ 歡迎開發者一起維護，或反饋/投稿

由@icepy負責整理

歡迎大家加入 一起來學JS（HN）QQ群：347349470 ，加入后還請修改備注為，所在地-昵稱。

主要討論：前端范圍內的技術，HTML CSS JavaScript使用技巧，瀏覽器開發工具使用討論，iOS Android等Mobile App使用的技術，一起來學習，共同進步。

讓web前端，JS開發在湖南可以成為大家熱愛的工作與成熟的產業。

Front-End Developers Hunan

由于個人精力有限，不足之處還望大家多多包容與提供建議。

• Front-End Develop 文檔
  • Welcome to Front-End Develop
  • Front-End Develop Language
    • HTML&HTML5文檔
    • CSS&CSS3文檔
      • CSS Style Guid
      • CSS Language
    • JavaScript 文檔
      • JavaScript Style Guide
      • JavaScript Language
      • 常用庫與框架的使用文檔
      • Node.js
      • Mongodb
      • Chrome擴展開發
  • Front-End Questions
  • Front-End Developer Blog
  • 通用Developer 社區
• 技術分享會議
• Front-End Develop 項目與工具
  • 相關工具
  • Front-End Develop 開源項目
• Front-End 需要了解的數據結構與算法
• Front-End Develop 優秀文章

Front-End Develop 文檔

Welcom to Front-End Develop

W3C組織提供了官網的地址： w3.org ，可以去查詢最近實現的標準以及將來可能實現的討論。

Front-End Develop Language

web前端開發可能包括HTML,CSS,JavaScript,Web API,SVG,WebGL,MathML等，語言是編程的基礎，火狐的MDN出了一份比較通略的文檔，可以快速查看 Web 技術文檔 。

HTML&HTML5 文檔

• 無處不在的html ：HTML是Web的核心語言，也是最基礎的語言；
• XHTML2 Working Group Home Page
• HTML5 API Search ：可以快速的查詢某個HTML5的API；
• HTML5 Rocks ：通過這個網站可以搜索到很多關于HTML5的教程；

書籍：

• 圖靈程序設計叢書:HTML5權威指南

CSS&CSS3 文檔

CSS Style Guid

• 編碼規范 by @mdo ：開發靈活，穩定，可持續 HTML 和 CSS 代碼的規范，每一項都有很詳細的解釋；
• css guide lines
• 通用 CSS 筆記、建議與指導 ：本文檔第一部分將探討語法、格式以及分析 CSS 結構；第二部分將圍繞方法論、思維框架以及編寫與規劃 CSS 的看法；

CSS Language

• 學習CSS布局 ：教授的是現在廣泛使用于網站布局領域的CSS基礎；
• CSS3 Tutorial 《CSS3 教程》 ：CSS3 Tutorial 是一本關于 CSS3 的開源書，作者利用業余時間寫了本書，圖文并茂，用大量實例帶你一步一步走進 CSS3 的世界；
• Magic of CSS
• CSS詞匯表 ：查詢CSS的詞匯；
• CSS參考

JavaScript 文檔

注明：JavaScript文檔將引用 justjavac/free-programming-books-zh_CN#JavaScript 所整理的免費圖書以及自己所收集的資料；

JavaScript Style Guide

• Google JavaScript 代碼風格指南 ：Google風格指南不但指出每條規范，還解釋了為什么這樣寫的原因，同時給出了對與錯的實例；
• Airbnb JavaScript 規范 ：A mostly reasonable approach to JavaScript，跟Google規范類似；
• Google JSON 風格指南：該風格指南是對在Google創建JSON APIs而提供的指導性準則和建議。總體來講，JSON APIs應遵循JSON.org上的規范。這份風格指南澄清和標準化了特定情況，從而使Google的JSON APIs有一種標準的外觀和感覺。這些指南適用于基于RPC和基于REST風格的API的JSON請求和響應；
• Javascript編程指南 (源碼)

JavaScript Language

• 重新介紹 JavaScript（JS 教程） ：是火狐推出的一系列的JS教程，為什么會有這一篇“重新介紹”呢？因為 JavaScript 堪稱世界上被人誤解最深的編程語言。雖然常被視作“玩具語言”，但它看似簡潔外衣下，還隱藏著強大的語言特性。 JavaScript 目前廣泛應用于一大批知名應用中，對于網頁和移動開發者來說，深入理解 JavaScript 就尤有必要；
• JavaScript 標準參考教程（alpha）
• javascript 的 12 個怪癖
• JavaScript 秘密花園
• JavaScript核心概念及實踐 ：(PDF) (此書已由人民郵電出版社出版發行，但作者依然免費提供PDF版本，希望開發者們去購買，支持作者)；
• 《JavaScript 模式》：“JavaScript patterns”中譯本；
• 命名函數表達式探秘 ：(注:原文由 為之漫筆 翻譯，原始地址無法打開，所以此處地址為我博客上的備份)；
• 學用 JavaScript 設計模式 ：(開源中國)
• 深入理解JavaScript系列 ：湯姆大叔2011年翻譯的一系列的文章，很值得一讀；
• ECMAScript 6 入門 ：(作者：阮一峰)
• JavaScript Promise迷你書 ：講述Promise實現；
• You-Dont-Know-JS：(深入JavaScript語言核心機制的系列圖書)；

了解常用庫與框架的使用文檔

• jQuery
  • jQuery 解構
  • 簡單易懂的JQuery魔法
  • How to write jQuery plugin
• underscore.js
  • Underscore.js中文文檔
• backbone.js
  • backbone.js入門教程 (PDF)
  • Backbone.js入門教程第二版
  • Developing Backbone.js Applications(中文版)
• AngularJS
  • AngularJS最佳實踐和風格指南
  • AngularJS中譯本
  • AngularJS入門教程
  • 構建自己的AngularJS
  • 在Windows環境下用Yeoman構建AngularJS項目
• Zepto.js
  • Zepto.js 中文文檔
• Sea.js
  • Hello Sea.js
• React.js
  • React.js 中文文檔
  • React webpack-cookbook
• impress.js
  • impress.js的中文教程
• CoffeeScript
  • CoffeeScript Cookbook
  • The Little Book on CoffeeScript中文版
  • CoffeeScript 編碼風格指南
• ExtJS
  • Ext4.1.0 中文文檔
• Meteor
  • Discover Meteor

Node.js

• Node入門
• 七天學會NodeJS
• Nodejs Wiki Book (繁體中文)
• express.js 中文文檔
• koa 中文文檔
• 使用 Express + MongoDB 搭建多人博客
• Express框架
• Node.js 包教不包會
• Learn You The Node.js For Much Win! (中文版)
• Node debug 三法三例
• nodejs中文文檔

Mongodb

• the-little-mongodb-book-cn

Chrome擴展開發

• Chrome擴展及應用開發

Front-End Questions

• Front-end-Developer-Interview-Questions ：面試題集合；
• Mars - mobile needs a hero ：騰訊出品的移動端實踐；
• mobileTech：收集了移動端出現的問題以及解決思路與技巧；

Front-End Developer Blog

中文 Front-End 開發博客列表，本博客列表會長期維護，如果有推薦的博客，請到此處提交博客信息

通用Developer 社區

在Github上找到一個社區網站收集的項目--front-end-collect

中文 Developer 社區列表，本社區列表會長期維護，如果有推薦的社區，請到此處提交社區信息

技術分享會議

說明：技術分享會議引用了ufologist項目中的收集，與自己收集的資源整理而成。

Front-End Develop 項目與工具

相關工具

1. 開發工具

• Sublime Text ：前端開發好用到爆；
• Atom ：Github出品的一個類似Sublime Text編輯器，長的蠻像的，快捷鍵也非常類似；
• Vundle.vim：使用vim開發前端的利劍，包括其他語言；

Sublime Text常用的插件：

• Emmet：zen coding的升級版，對于前端來說，可是必備插件;
• sublimelint：用于代碼的校驗，支持 HTML、CSS、JS、PHP、Java、C++ 等16種語言;
• Alignment ：用于代碼對齊;
• JsFormat ：用于JavaScript格式化;
• jQuery ：jQuery插件;

Atom常用的插件：

• TypeScript：支持TypeScript編譯；
• run-in-browser ：支持運行網頁；

vim常用的插件：

Bundle 'christoomey/vim-run-interactive'
Bundle 'Valloric/YouCompleteMe'
Bundle 'croaky/vim-colors-github'
Bundle 'danro/rename.vim'
Bundle 'majutsushi/tagbar'
Bundle 'kien/ctrlp.vim'
Bundle 'pbrisbin/vim-mkdir'
Bundle 'scrooloose/syntastic'
Bundle 'slim-template/vim-slim'
Bundle 'thoughtbot/vim-rspec'
Bundle 'tpope/vim-bundler'
Bundle 'tpope/vim-endwise'
Bundle 'tpope/vim-fugitive'
Bundle 'tpope/vim-rails'
Bundle 'tpope/vim-surround'
Bundle 'vim-scripts/ctags.vim'
Bundle 'vim-scripts/tComment'
Bundle "mattn/emmet-vim"
Bundle "scrooloose/nerdtree"
Bundle "Lokaltog/vim-powerline"
Bundle "godlygeek/tabular"
Bundle "msanders/snipmate.vim"
Bundle "jelera/vim-javascript-syntax"
Bundle "altercation/vim-colors-solarized"
Bundle "othree/html5.vim"
Bundle "xsbeats/vim-blade"
Bundle "Raimondi/delimitMate"
Bundle "groenewege/vim-less"
Bundle "evanmiller/nginx-vim-syntax"
Bundle "Lokaltog/vim-easymotion"
Bundle "tomasr/molokai"
Bundle "klen/python-mode"
Bundle "leafgarland/typescript-vim"
Bundle "scrooloose/nerdcommenter" 

• HTML5 Please ：HTML5與CSS3技術評估
• Mobile HTML5 ：HTML5兼容性速查表
• HTML5 Cross Browser Polyfills

2. 源代碼管理工具

• Github：聲望日盛-全球最大的“同性”網站；
• Github For Mac：設計的非常美觀的git管理客戶端，它能取代命令行所獲得的功能；
• Gitcafe ：國內的Github，相比之下擁有速度優勢；
• Git@OSC ：也是類似的項目，在國內，可以免費建立1000+私有項目；

3. Mac工具

• HomeBrew ：OS X上非常優秀的包管理工具；
• HomeBrew-Cask ：簡潔優雅的Mac OS X軟件安裝體驗；
• iTerm 2 ：OS X上一個增強版的shell終端；
• oh-my-zsh ：OS X上用來增強shell命令行的工具；
• Dash ：Dash is an API Documentation Browser and Code Snippet Manager. Dash stores snippets of code and instantly searches offline documentation sets for 150+ APIs (for a full list, see below). You can even generate your own docsets or request docsets to be included；
• tmux ：終端復用神器，幫助在Mac或者Linux上做開發的程序員在使用終端時更加得心應手；

• 云梯V*N

Front-End Develop 開源項目

1. 有趣味的開源項目

• Web Developer技能樹：類似《魔獸世界》中的天賦樹；
• octotree：瀏覽器擴展(Chrome,Firefox,Safari和Opera)顯示GitHub樹格式的代碼；
• react-native：出品的一個可以使用JavaScript來構建Native UI的庫；
• ionic：Ionic是一個強大的HTML5 原生應用（native app） 開發框架，幫助你用HTMLL，css和javascript構建具有原生味道的移動應用（mobile apps）；
• passport-bnet：暴雪提供的Nodejs版SDK
• hexo：編寫博客使用的工具
• traceur-compiler：可以運行未來的JavaScript的JavaScript；
• EpicEditor：可以嵌入網頁的Markdown編輯器；
• gitbook：用于生成在線書籍的工具；
• kityminder：作為一款在線的腦圖編輯工具，它有著不亞于 native 腦圖工具的交互體驗；

2. 開源庫

• three.js：three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。Three.js 是一款運行在瀏覽器中的 3D 引擎，你可以用它創建各種三維場景，包括了攝影機、光影、材質等各種對象；
• fullPage.js：fullPage.js 是一個基于 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網站；
• angular-ui-router：angular-ui-router是AngularJS的路由框架，和默認的$route不同，它將所有路由包裝成可劃分層級的狀態機狀態,路由路徑在ui-router中不是必須的。由于ui-router的路由狀態機是分層級的，所以使用ui-router可以非常方便地創建包含多個嵌入的子模板；
• marked：markdown解析器；
• tsd：在TypeScript中替換第三方庫所使用的引用文件；
• react：可以用一種聲明性、高效和靈活的JavaScript來構建用戶界面的框架；
• hammer.js：處理觸摸事件，以及手勢的JavaScript庫；
• resumable.js：這是用于HMLT5 File Api封裝可以方便操作文件的一個庫；
• commander.js：可以幫助快速開發Nodejs命令行工具的一個包；
• persistencejs：是一個異步的Javascript庫的對象關系映射框架；
• artTemplate： JavaScript模板引擎；
• TypeScript：JavaScript的超集，擴展了類型，類，接口等語法，兼容ES6；
• fastclick：FastClick是一個簡單的、易于使用的庫，消除在移動瀏覽器上觸發click事件與一個物理Tap(敲擊)之間的300延遲；
• node-browserify：Browserify是一個node.js模塊，主要用于改寫現有的CommonJS模塊，使得瀏覽器端也可以使用這些模塊；
• socket.io：Socket.io是使用得非常普遍的前端調用Websocket的庫；
• superagent：superagent 是nodejs里一個非常方便的客戶端請求代理模塊；
• cheerio：它可以從一坨html的片斷中構建DOM結構，然后提供像jquery一樣的css選擇器查詢；
• express：它用于構建Web網站，非常快速；
• node-mongodb-native：nodejs用于操作mongodb；
• ejs：JavaScript模板引擎；
• riot：一個小巧的UI和代碼結構的框架；
• JavaScript-MD5：JS版的MD5;
• zepto：在瀏覽器(Safari、Chrome和Firefox)上開發頁面應用或者構建基于html的web-view本地應用，如PhoneGap，使用Zepto是一個不錯的選擇；
• async：JS實現的一個方便快捷異步編程的庫；
• echarts：基于Canvas，純Javascript圖表庫，提供直觀，生動，可交互，可個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力；
• koa：下一代編寫Web網站的nodejs框架；
• vue：MVVM框架；
• underscore：JS函數工具庫；
• backbone：Backbone.js為復雜WEB應用程序提供模型(models)、集合(collections)、視圖(views)的結構。其中模型用于綁定鍵值數據和自定義事件；集合附有可枚舉函數的豐富API； 視圖可以聲明事件處理函數，并通過RESRful JSON接口連接到應用程序。
• jquery：jQuery 是一個高效、精簡并且功能豐富的JavaScript 工具庫；
• angular.js：AngularJS是為了克服HTML在構建應用上的不足而設計的，通過為開發者呈現一個更高層次的抽象來簡化應用的開發。如同其他的抽象技術一樣，這也會損失一部分靈活性。換句話說，并不是所有的應用都適合用AngularJS來做。AngularJS主要考慮的是構建CRUD應用。幸運的是，至少90%的WEB應用都是CRUD應用。但是要了解什么適合用AngularJS構建，就得了解什么不適合用AngularJS構建。
• Flow：非死book出品的一個JavaScript靜態編譯器；
• avalon：用于構建Web界面的MVVM JavaScript框架；
• requirejs：JavaScript模塊化的開山鼻祖；
• seajs：中國開發者編寫的一個JavaScript模塊化庫；
• d3：基于JavaScript編寫的一個圖表庫，非常強大。

3. 開放平臺

• wx：wx是極簡設計的微信（公共平臺）應用參考級框架，而并非微信接口在node.js下的冪等映射；
• api-wow-docs：暴雪提供的魔獸世界API文檔

4. 開源web網站系統

• candy：基于多說社交評論的社會化論壇系統，采用 Node.js/Mongodb 構建；