##Front-End-Develop-Guide 前端开发指南
创建此项目灵感从SwiftGuide而来，这份指南汇集了前端开发所使用语言的主流学习资源，并以开发者的视角进行整理编排而成。
GitHub：icepy/Front-End-Develop-Guide ｜ 网站：http://front-end-developers-hunan.github.io ｜ 欢迎开发者一起维护，或反馈/投稿
想了解关于该指南及 前端开发 更多信息的同学，可以阅读短文《致 Front-End Developers》。 想查看优秀的开源项目，可以访问《Front-End Develop 项目精选》。希望查看精选文章，可以访问《Front-End Develop 文章精选》。也欢迎企业招聘人才提供工作岗位(請附上薪資)，可以提交到工作岗位。
由@icepy负责整理
由于个人精力有限，不足之处还望大家多多包容与提供建议。
##目录
- Front-End Develop 文档
- 延伸可扩展的方向
- Front-End Developer Blog
- 通用Developer 社区
- 技术分享会议
初略读懂Front-End Develop要做些什么
Web Front-End Stack：这张图非常详细。
W3C组织提供了官网的地址：w3.org，可以去查询最近实现的标准以及将来可能实现的讨论。
web前端开发可能包括HTML,CSS,JavaScript,Web API,SVG,WebGL,MathML等，语言是编程的基础，火狐的MDN出了一份比较通略的文档，可以快速查看Web 技术文档。
===
- 无处不在的html：HTML是Web的核心语言，也是最基础的语言；
- XHTML2 Working Group Home Page
- HTML5 API Search：可以快速的查询某个HTML5的API；
- HTML5 Rocks：通过这个网站可以搜索到很多关于HTML5的教程；
书籍：
===
- 编码规范 by @mdo：开发灵活，稳定，可持续 HTML 和 CSS 代码的规范，每一项都有很详细的解释；
- css guide lines
- 通用 CSS 笔记、建议与指导：本文档第一部分将探讨语法、格式以及分析 CSS 结构；第二部分将围绕方法论、思维框架以及编写与规划 CSS 的看法；
- 学习CSS布局：教授的是现在广泛使用于网站布局领域的CSS基础；
- CSS3 Tutorial 《CSS3 教程》：CSS3 Tutorial 是一本关于 CSS3 的开源书，作者利用业余时间写了本书，图文并茂，用大量实例带你一步一步走进 CSS3 的世界；
- Magic of CSS
- CSS词汇表：查询CSS的词汇；
- CSS参考
- Sass基础知识：Sass官网，讲述Sass/SCSS应用的基础知识，变量、函数、条件、循环、宏等等；
- Sass中文网：中文大，给E文不好的小朋友们；
- Sass Guidelines：这是由Sass专家Hugo Giraudel撰写的一份“编写稳健、可维护和可扩展的Sass”的指南，这份指南已被翻译成中文；
- Sass meister：在线Sass/SCSS调试器；
===
注明：JavaScript文档将引用justjavac/free-programming-books-zh_CN#JavaScript所整理的免费图书以及自己所收集的资料；
- 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（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
- underscore.js
- backbone.js
- AngularJS
- AngularJS最佳实践和风格指南
- AngularJS中译本
- AngularJS入门教程
- 构建自己的AngularJS
- 在Windows环境下用Yeoman构建AngularJS项目
- 大型应用下的 AngularJS 性能
- Angular Modules 可以搜索Angular.JS可用的各种插件，模块等等。
- Zepto.js
- Sea.js
- impress.js
- CoffeeScript
- ExtJS
- Meteor
- TypeScript
- requirejs
- vue.js
下面两篇文章不会对 HTTP 的细节进行深究，而是从够高和更结构化的角度将 HTTP 协议的元素进行分类讲解，可以先阅读HTTP 协议漫谈和图解Http协议来对HTTP有一个大概的了解。
深入全面了解，可阅读HTTP权威指南。
cache是提高应用性能重要的一个环节，必需要有所了解。
现在的前端自动化工具主要如下三个流派，目测涵盖90%以上经常使用。
工欲善其事，必先利其器。开源项目与工具的使用，将极大的提高前端开发之效率。
####1. 开发工具
- Sublime Text：前端开发好用到爆；
- Atom：Github出品的一个类似Sublime Text编辑器，长的蛮像的，快捷键也非常类似；
- Vundle.vim：使用vim开发前端的利剑，包括其他语言；
Sublime Text常用的插件：
- Emmet：zen coding的升级版，对于前端来说，可是必备插件;
- sublimelint：用于代码的校验，支持 HTML、CSS、JS、PHP、Java、C++ 等16种语言;
- JsFormat：用于JavaScript格式化;
- jQuery：jQuery语法提示;
- Underscore：Underscore语法提示;
- DocBlockr：快速编写注释;
- SublimeCodeIntel：智能语法分析提示;
- ColorPicker：快速选取颜色
- HTML-CSS-JS Prettify：html/css/js 格式化
- Alignment：用于代码对齐;
- WakaTime：用于记录编程时间；
- Seti_UI：好看的主题，包括文件icon；
- OmniMarkupPreviewer：将MD文件渲染成网页，可以在浏览器中查看；
- Babel：ES6语法高亮；
Atom常用的插件：
- TypeScript：支持TypeScript编译；
- run-in-browser：支持运行网页；
- Emmet：快速编写HTML；
- minimap：右侧小地图；
- color-picker：CSS颜色取色器；
- autoprefixer：自动补全CSS前缀；
- autocomplete-paths：对路径选择进行增强；
- autocomplete-python：对Python提示进行增强；
- docblockr：编写注释好帮手；
- file-icons：美化编辑器图标；
- linter-jshint：JavaScript语法检查；
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工具
关于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上做开发的程序员在使用终端时更加得心应手；
- MacVim：Mac下GUI vim编辑器；
- Xcode：也许你用不上，安装Xcode主要是为了Xcode command line tools工具包，你也可以选择不安装Xcode，使用xcode-select --install跳过Xcode的安装；
- Postman Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。
####4. VPN
####5. ES6编译
####6. gulp工具
- gulp-clean：用于清理;
- gulp-notify：用于打印消息文本;
- gulp-rename：用于修改名字;
- gulp-concat：用于合并文件;
- gulp-zip：用于生成一个zip压缩包;
- gulp-minify-css：用于压缩css;
- gulp-autoprefixer：用于给css添加前缀;
- gulp-imagemin：用于给图片进行优化;
- gulp-uglify：用于压缩js;
- amd-optimize：用于AMD模块引用编译；
- gulp-import-css：如果css文件是通过import导入的可以使用此插件进行合并优化;
- gulp-rev-replace：用于替换;
- gulp-useref：引入使用build标记，进行替换;
- gulp-rev：生成md5文件名;
- gulp-filter：对文件进行过滤;
- gulp-header：压缩之后将注释写入到文件的头部
- gulp-if：进行逻辑判断
- gulp-size：获取文件大小
####7.webpack
- raw-loader：将文件require进来；
- url-loader：可以将图片require进来；
- css-loader：require css文件；
- eslint-loader：语法检查；
- less-loader：less loader；
- extract text plugin for webpack：CSS文件提取；
####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：JavaScript函数工具库；
- 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：Facebook出品的一个JavaScript静态编译器；
- avalon：用于构建Web界面的MVVM JavaScript框架；
- requirejs：JavaScript模块化的开山鼻祖；
- seajs：中国开发者编写的一个JavaScript模块化库；
- d3：基于JavaScript编写的一个图表库，非常强大。
- sugar.js：它扩展了现有的JS对象的方法，让你可以用更少的代码做更多的事情；
- lo_dash：JavaScript函数工具库；
####3. 开放平台
- wx：wx是极简设计的微信（公共平台）应用参考级框架，而并非微信接口在node.js下的幂等映射；
- api-wow-docs：暴雪提供的魔兽世界API文档
####4. 开源web网站系统
- candy：基于多说社交评论的社会化论坛系统，采用 Node.js/Mongodb 构建；
####5. 调试工具
- node-inspector：nodejs的调试工具；
- node-supervisor：nodejs用于无需重启的工具
其他工具：http://123.jser.us/
- Front-end-Developer-Interview-Questions：面试题集合；
- 中文前端开发面试题 中文前端开发面试题
- Mars - mobile needs a hero：腾讯出品的移动端实践；
- mobileTech：收集了移动端出现的问题以及解决思路与技巧；
- 移动web资源整理：移动web资源整理；
- 数据结构与算法（JS 版） (@进击的Luke)
- What are the 10 algorithms one must know in order to solve most algorithm problems
- 基础算法
- 那些少人所知而又有用的数据结构（StackOverflow）
- 高级数据结构大全
延伸可扩展的方向是指，脱离了浏览器环境的编程。
关于编译，强烈建议阅读工程中的编译原理--Jison入门篇
入门
文档
阅读
- 使用 Express + MongoDB 搭建多人博客
- Learn You The Node.js For Much Win! (中文版)
- Node debug 三法三例
- 深入浅出Nodejs读书笔记
- NodeJS的代码调试和性能调优
- 在 Node.js 应用中集成 Redis
- Node.js 应用程序的 5 条性能建议
- 国内Nodejs 2015汇总
可以先通过阅读V8引擎简介来了解JavaScript现在最好的引擎是怎样的，然后访问Chrome V8来获取最新的资料，API文档可以访问v8-docs。
中文 Front-End 开发博客列表，本博客列表会长期维护，如果有推荐的博客，请到此处提交博客信息
在Github上找到一个社区网站收集的项目-- front-end-collect
中文 Developer 社区列表，本社区列表会长期维护，如果有推荐的社区，请到此处提交社区信息
说明：技术分享会议引用了ufologist项目中的收集，与自己收集的资源整理而成。