Front-End-Develop-Guide
这份指南汇集了前端开发所使用语言的主流学习资源,并以开发者的视角进行整理编排而成,想了解该指南及前端开发更多信息的同学,可以阅读短文《致 Front-End Developers(2015)》,欢迎开发者一起维护,或反馈/投稿。
由@icepy负责整理,不足之处还望大家多多包容与提供建议。
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
- TypeScript
- React
- vue.js
- AngularJS
JavaScript 日志
开放网络标准
HTTP 文档
下面两篇文章不会对 HTTP 的细节进行深究,而是从够高和更结构化的角度将 HTTP 协议的元素进行分类讲解,可以先阅读HTTP 协议漫谈和图解Http协议来对HTTP有一个大概的了解。
深入全面了解,可阅读HTTP权威指南。
缓存策略
cache是提高应用性能重要的一个环节,必需要有所了解。
前端自动化工具
移动前端技术
动画
性能调优
Front-End Develop 项目与工具
工欲善其事,必先利其器。开源项目与工具的使用,将极大的提高前端开发之效率。
相关工具
1. 编辑器
- Visual Studio Code:好用到爆;
- Vundle.vim:使用vim开发前端的利剑,包括其他语言;
Visual Studio Code 常用的插件:大前端时代你的 VSCode 插件
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"
2.源代码管理工具
- Github:声望日盛-全球最大的“同性”网站;
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.梯子
5.服务
- Travis-CI
- Coveralls
- Slack
- js bin
- zenHub
- trello
- MDN Web docs
- HTML5 Please:HTML5与CSS3技术评估
- Mobile HTML5:HTML5兼容性速查表
- HTML5 Cross Browser Polyfills
- Can I use... Support tables for HTML5, CSS3, etc
Front-End Develop 开源项目
想查看优秀的开源项目,可以访问《Front-End Develop 项目精选》。
1. 有趣味的开源项目
- Web Developer技能树:类似《魔兽世界》中的天赋树;
- octotree:浏览器扩展(Chrome,Firefox,Safari和Opera)显示GitHub树格式的代码;
- passport-bnet:暴雪提供的Nodejs版SDK
- hexo:编写博客使用的工具
- traceur-compiler:可以运行未来的JavaScript的JavaScript;
- EpicEditor:可以嵌入网页的Markdown编辑器;
- gitbook:用于生成在线书籍的工具;
- kityminder:作为一款在线的脑图编辑工具,它有着不亚于 native 脑图工具的交互体验;
- api-wow-docs:暴雪提供的魔兽世界API文
其他工具:http://123.jser.us/
Front-End Questions
- Front-end-Developer-Interview-Questions:面试题集合;
- 中文前端开发面试题 中文前端开发面试题
- Mars - mobile needs a hero:腾讯出品的移动端实践;
- mobileTech:收集了移动端出现的问题以及解决思路与技巧;
- 移动web资源整理:移动web资源整理;
Front-End 需要了解的数据结构与算法
- Leetcode
- 数据结构与算法(JS 版) (@进击的Luke)
- What are the 10 algorithms one must know in order to solve most algorithm problems
- 基础算法
- 那些少人所知而又有用的数据结构(StackOverflow)
- 高级数据结构大全
延伸可扩展的方向(全栈)
延伸可扩展的方向是指,脱离了浏览器环境的编程。
关于编译,建议阅读 工程中的编译原理--Jison入门篇
如果你想发展为全栈,建议阅读 Growth: 全栈增长工程师指南
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。
Comments 1 条评论
博主 飞扬
系统前端学习教程