Skip to content

Latest commit

 

History

History
517 lines (390 loc) · 30.5 KB

README.md

File metadata and controls

517 lines (390 loc) · 30.5 KB
Raw

Front-End-Develop-Guide 前端开发指南

这份指南汇集了前端开发所使用语言的主流学习资源，并以开发者的视角进行整理编排而成。

GitHub：icepy/Front-End-Develop-Guide ｜欢迎开发者一起维护，或反馈/投稿

想了解关于该指南及 前端开发 更多信息的同学，可以阅读短文《致 Front-End Developers》。 想查看优秀的开源项目，可以访问《Front-End Develop 项目精选》。希望查看精选文章，可以访问《Front-End Develop 文章精选》。也欢迎企业招聘人才提供工作岗位(請附上薪資)，可以提交到工作岗位。

由@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 文档

===

书籍：

CSS&CSS3 文档

===

CSS Style Guide

CSS Language

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

Front-End Develop Fly

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

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

JavaScript 日志

前端代码异常日志与监控

开放网络标准

理解OAuth 2.0

HTTP 文档

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

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

缓存策略

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

Web缓存机制系列

前端自动化工具

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

React&React Native生态-探索学习

移动前端技术

移动web UI框架

动画

性能调优

Front-End Develop 项目与工具

工欲善其事，必先利其器。开源项目与工具的使用，将极大的提高前端开发之效率。

相关工具

1. 开发工具

  • Sublime Text：前端开发好用到爆；
  • Atom：Github出品的一个类似Sublime Text编辑器，长的蛮像的，快捷键也非常类似；
  • Vundle.vim：使用vim开发前端的利剑，包括其他语言；

Sublime Text常用的插件：

Atom常用的插件：

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：声望日盛-全球最大的“同性”网站；
  • 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工具

7.webpack

8.服务

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 需要了解的数据结构与算法

延伸可扩展的方向（全栈）

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

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

如果你想发展为全栈，强烈建议阅读Growth: 全栈增长工程师指南

Node.js

入门

文档

阅读

Mongodb

Chrome扩展开发

桌面应用程序开发

移动应用程序开发

WebGL

v8 引擎文献

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

社区

访问：社区列表

码农周刊JavaScript和前端部分优秀文章集合

访问：码农周刊JavaScript和前端部分优秀文章集合