以开发者的视角整理编排的前端开发所使用语言的主流学习资源
来自: https://github.com/icepy/Front-End-Develop-Guide
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 文档
- Welcome to Front-End Develop
- Front-End Develop Language
- HTML&HTML5 文档
- CSS&CSS3 文档
- CSS Style Guide
- CSS Language
- Sass Guide
- PostCss
- JavaScript 文档
- JavaScript Style Guide
- JavaScript Language
- Front-End Develop Fly
- 常用库与框架的使用文档
- JavaScript 日志
- 开放网络标准
- HTTP 文档
- 缓存策略
- 前端自动化工具
- React&React Native生态-探索学习
- 移动前端技术
- 动画
- 性能调优
- Front-End Develop 项目与工具
- 相关工具
- Front-End Develop 开源项目
- Front-End Questions
- Front-End 需要了解的数据结构与算法
- Front-End Develop 优秀文章
- 延伸可扩展的方向
- Node.js
- Mongodb
- WebGL
- Chrome扩展开发
- 桌面应用程序开发
- 移动应用程序开发
- V8 引擎文献
- 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的教程;
书籍:
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
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
如果你想飞起来,这正是好去处。
了解常用库与框架的使用文档
- jQuery
- underscore.js
- backbone.js
- AngularJS
- Zepto.js
- Sea.js
- impress.js
- CoffeeScript
- ExtJS
- Meteor
- TypeScript
- requirejs
- vue.js
JavaScript 日志
开放网络标准
HTTP 文档
下面两篇文章不会对 HTTP 的细节进行深究,而是从够高和更结构化的角度将 HTTP 协议的元素进行分类讲解,可以先阅读 HTTP 协议漫谈 和 图解Http协议 来对HTTP有一个大概的了解。
深入全面了解,可阅读 HTTP权威指南 。
缓存策略
cache是提高应用性能重要的一个环节,必需要有所了解。
前端自动化工具
现在的前端自动化工具主要如下三个流派,目测涵盖90%以上经常使用。
React&React Native生态-探索学习
移动前端技术
动画
性能调优
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 :用于代码对齐;
- 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的安装;
4. V*N
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文件;
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:非死book出品的一个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 优秀文章集合
延伸可扩展的方向
延伸可扩展的方向是指,脱离了浏览器环境的编程。
关于编译,强烈建议阅读 工程中的编译原理--Jison入门篇
Node.js
入门
文档
阅读
- 使用 Express + MongoDB 搭建多人博客
- Learn You The Node.js For Much Win! (中文版)
- Node debug 三法三例
- 深入浅出Nodejs读书笔记
- NodeJS的代码调试和性能调优
- 在 Node.js 应用中集成 Redis
- Node.js 应用程序的 5 条性能建议
- 国内Nodejs 2015汇总
Mongodb
Chrome扩展开发
桌面应用程序开发
移动应用程序开发
WebGL
v8 引擎文献
可以先通过阅读 V8引擎简介 来了解JavaScript现在最好的引擎是怎样的,然后访问 Chrome V8 来获取最新的资料,API文档可以访问 v8-docs 。
Front-End Developer Blog
中文 Front-End 开发博客列表,本博客列表会长期维护,如果有推荐的博客,请到此处提交博客信息
通用Developer 社区
在Github上找到一个社区网站收集的项目--front-end-collect
中文 Developer 社区列表,本社区列表会长期维护,如果有推荐的社区,请到此处提交社区信息
技术分享会议
说明:技术分享会议引用了ufologist项目中的收集,与自己收集的资源整理而成。