##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 文档

初略读懂Front-End Develop要做些什么

Web Front-End Stack：这张图非常详细。

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 Guide

编码规范 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参考

Sass Guide

Sass基础知识：Sass官网，讲述Sass/SCSS应用的基础知识，变量、函数、条件、循环、宏等等；
Sass中文网：中文大，给E文不好的小朋友们；
Sass Guidelines：这是由Sass专家Hugo Giraudel撰写的一份“编写稳健、可维护和可扩展的Sass”的指南，这份指南已被翻译成中文；
Sass meister：在线Sass/SCSS调试器；

PostCss

Post 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语言核心机制的系列图书)；

Front-End Develop Fly

如果你想飞起来，这正是好去处。

了解常用库与框架的使用文档

JavaScript 日志

前端代码异常日志与监控

开放网络标准

理解OAuth 2.0

HTTP 文档

下面两篇文章不会对 HTTP 的细节进行深究，而是从够高和更结构化的角度将 HTTP 协议的元素进行分类讲解，可以先阅读HTTP 协议漫谈和图解Http协议来对HTTP有一个大概的了解。

深入全面了解，可阅读HTTP权威指南。

缓存策略

cache是提高应用性能重要的一个环节，必需要有所了解。

Web缓存机制系列

前端自动化工具

现在的前端自动化工具主要如下三个流派，目测涵盖90%以上经常使用。

React&React Native生态-探索学习

React&React Native生态-探索学习

移动前端技术

动画

搞定这些疑难杂症，向css3动画说yes

性能调优

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种语言;
JsFormat：用于JavaScript格式化;
jQuery：jQuery语法提示;
Underscore：Underscore语法提示;
DocBlockr：快速编写注释;
SublimeCodeIntel：智能语法分析提示;
ColorPicker：快速选取颜色
HTML-CSS-JS Prettify：html/css/js 格式化
Alignment：用于代码对齐;

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的安装；

####4. VPN

云梯VPN

####5. ES6编译

babel

####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：获取文件大小

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：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用于无需重启的工具

Front-End Questions

Front-end-Developer-Interview-Questions：面试题集合；
中文前端开发面试题中文前端开发面试题
Mars - mobile needs a hero：腾讯出品的移动端实践；
mobileTech：收集了移动端出现的问题以及解决思路与技巧；
移动web资源整理：移动web资源整理；

Front-End 需要了解的数据结构与算法

数据结构与算法（JS 版） (@进击的Luke)
What are the 10 algorithms one must know in order to solve most algorithm problems
基础算法
那些少人所知而又有用的数据结构（StackOverflow）
高级数据结构大全

Front-End Develop 优秀文章集合

从码农周刊抓取的Front-End Develop 优秀文章集合

延伸可扩展的方向

延伸可扩展的方向是指，脱离了浏览器环境的编程。

关于编译，强烈建议阅读工程中的编译原理--Jison入门篇

Node.js

入门

文档

阅读

使用 Express + MongoDB 搭建多人博客
Learn You The Node.js For Much Win! (中文版)
Node debug 三法三例
深入浅出Nodejs读书笔记
NodeJS的代码调试和性能调优
在 Node.js 应用中集成 Redis
Node.js 应用程序的 5 条性能建议

Mongodb

the-little-mongodb-book-cn

Chrome扩展开发

Chrome扩展及应用开发

桌面应用程序开发

移动应用程序开发

WebGL

WebGL 中文版

v8 引擎文献

可以先通过阅读V8引擎简介来了解JavaScript现在最好的引擎是怎样的，然后访问Chrome V8来获取最新的资料，API文档可以访问v8-docs。

Front-End Developer Blog

中文 Front-End 开发博客列表，本博客列表会长期维护，如果有推荐的博客，请到此处提交博客信息

博客地址	RSS地址
Plane Art	http://www.planeart.cn/?feed=rss2
王玮的博客	http://imvirgo.com/feed/
UED TEAM	http://www.ued163.com/?feed=rss2
随网之舞	http://feeds.feedburner.com/dancewithnet
不名一格	http://www.microidc.com/feed/
Hugo Web前端开发	http://www.ghugo.com/feed/
阿里巴巴（中文站）用户体验设计部博客	http://www.aliued.cn/feed
何畏	http://www.lzlu.com/blog/?feed=rss2
PlanABC - 怿飞’s Blog	http://feed.planabc.net/
Designsor	http://www.designsor.com/feed
Time Machine	http://rlog.cn/?feed=rss2
为之漫笔	http://www.cn-cuckoo.com/feed
博客园_风流涕淌	http://www.cnblogs.com/Philoo/rss
彬Go	http://blog.bingo929.com/feed
Gracecode.com	http://feeds.gracecode.com/gracecode/
Koubei UED	http://ued.koubei.com/?feed=rss2
Alibaba.com UED	http://www.aliued.com/feed/
Taobao UED Team	http://ued.taobao.com/blog/feed/
博客园-振之博文	http://www.cnblogs.com/zhenn/
Kejun's Blog	http://hikejun.com/blog/feed/
博客园_纸头折飞机	http://www.cnblogs.com/xueduanyang/rss
最前端的生活	http://www.bq69.com/feed
腾讯CDC	http://cdc.tencent.com/?feed=rss2
博客园_叶小钗	http://www.cnblogs.com/yexiaochai/rss
Hua's View	http://huaview.com/feed
RainBlog-烟雨空间	http://rain520.net/Feed/rss.xml
web前端开发工程师的随记--黑妞haha	http://www.heiniuhaha.cn/blog/?feed=rss2
蓝色理想	http://www.blueidea.com/common/rss.asp
博客园_Ruby's Louvre	http://www.cnblogs.com/rubylouvre/rss
hax的技术部落格	http://hax.javaeye.com/rss
CssRain-前端技术	http://www.cssrain.cn/?feed=rss2
MED	http://mux.alimama.com/feed/
W3CPLUS	http://feed.feedsky.com/W3CPlus
博客园_winter-cn	http://www.cnblogs.com/winter-cn/
走走停停看看	http://shawphy.com/feed
Hi, I'm Adam Lu.	http://adamlu.com/?feed=rss2
WEB前端开发	http://www.css88.com/feed
岁月如歌	https://lifesinger.wordpress.com/feed/
Web开发中需要了解的东西	http://coolshell.cn/feed
样式之美	http://feeds2.feedburner.com/aoao
時計坂一刻館三号室	http://feed.quchao.com/
CSS森林(CSS Forest)	http://www.cssforest.org/blog/index.php?atom=1
Ross Wan's World!	https://mrwlwan.wordpress.com/feed/
博客园_汤姆大叔的博客	http://www.cnblogs.com/TomXu/rss
前端观察	https://www.qianduan.net/rss/
张云龙个人博客	https://github.com/fouber/blog

通用Developer 社区

在Github上找到一个社区网站收集的项目-- front-end-collect

中文 Developer 社区列表，本社区列表会长期维护，如果有推荐的社区，请到此处提交社区信息

中文 Developer 社区列表	地址
领略前端技术阅读奇舞周刊	http://www.75team.com/weekly/
div.io	http://div.io/#/welcome
稀土掘金	http://gold.xitu.io
开发者头条	http://toutiao.io/
码农周刊	http://weekly.manong.io/
InfoQ	http://www.infoq.com/cn/
Segmentfault	http://segmentfault.com/
Get社区	http://get.jobdeer.com/
极客头条	http://geek.csdn.net/hotest
极客头条－前端	http://geek.csdn.net/forum/47

技术分享会议

说明：技术分享会议引用了ufologist项目中的收集，与自己收集的资源整理而成。

会议组织列表	地址
D2前端技术论坛	http://www.d2forum.org/
WebReBuild	http://webrebuild.org
Velocity	http://velocity.oreilly.com.cn
JSCONF.CN	http://jsconf.cn/
阿里技术嘉年华	http://adc.taobao.com
中国CSS开发者大会	http://css.w3ctech.com/
w3ctech	http://www.w3ctech.com/event
HTML5梦工厂	http://www.html5dw.com/
前端圈	http://www.fequan.com/
QCon北京	http://qconbeijing.com/
QCon上海	http://qconshanghai.com/
QCon@InfoQ	http://www.infoq.com/cn/qcon
ArchSummit	http://www.archsummit.com/
阿里技术沙龙	http://club.alibabatech.org
Apple WWDC	https://developer.apple.com/wwdc/
Google I/O	https://events.google.com/io2015/

xingline/Front-End-Develop-Guide

ErrorLooks like something went wrong!

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages