web 前端必备学习指南-精华

布满荆棘的人生 2022-07-13 23:43 275阅读 0赞

## 工具 ##

*  [box-shadow generator][]
    
    生成 box-shadow 的工具。
 *  [gradient-generator][]
    
    渐变生成器。
 *  [Ultimate CSS Gradient Generator][]
    
    也是渐变生成器
 *  [CSS Generators -CSSREFLEX][]
    
    CSS3 生成器
 *  [图床 https://sm.ms/][https_sm.ms]
    
    有 API 可用。
 *  [新浪微博图床 Chrome扩展][Chrome]
 *  [Unix 时间戳 Unix timestamp][Unix _ Unix timestamp]

## 编程语言 ##

### JavaScript ###

*  [前端资源教程 i5ting][i5ting]
 *  [廖雪峰JavaScript教程][JavaScript]
 *  [JavaScript 标准参考教程（alpha） -阮一峰][JavaScript _alpha_ -]
 *  [JavaScript Promise迷你书 -azu][JavaScript Promise_ -azu]
 *  [前端的异步解决方案之Promise和Await Async][Promise_Await Async]
 *  [You Don’t Know JS (book series)][You Don_t Know JS _book series]
 *  [You Don’t Need jQuery][You Don_t Need jQuery]
    
    前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法，暂时只支持 IE10+ 以上浏览器。
 *  [JavaScript 秘密花园][JavaScript 1]
 *  [JavaScript 设计模式 系列 AlloyTeam][JavaScript _ _ AlloyTeam]

### ES2015(ES6) ###

*  [《ECMAScript 6入门》 -阮一峰][ECMAScript 6_ -]
 *  [EcmaScript6 全规范（含node） -ouvens][EcmaScript6 _node_ -ouvens]
 *  [30分钟掌握ES6/ES2015核心内容（上）][30_ES6_ES2015]
 *  [30分钟掌握ES6/ES2015核心内容（下）][30_ES6_ES2015 1]
 *  [ES2015规范 英文][ES2015_]

### TypeScript ###

*  [TypeScript语法][TypeScript]

### 前端博文 ###

*  [前端 JSer 装逼手册][JSer]
 *  [6周学习计划，攻克JavaScript难关][6_JavaScript]

### NodeJS ###

*  [七天学会NodeJS -Nanqiao Deng][NodeJS -Nanqiao Deng]
 *  [Node入门到精通 i5ting][Node_ i5ting]
 *  [高可用架构专用《全栈工程师之路-Node.js》 i5ting][-Node.js_ i5ting]
 *  [前后端分离的思考与实践][Link 1]

### 框架&脚手架&部署工具 ###

### Babel ###

[Babel 入门教程][Babel]

### Bower ###

[基础教程][Link 2]

### Yeoman ###

*  [yeoman 安装和使用 - 快速构建web应用][yeoman _ - _web]

### Gulp ###

*  [Gulp学习总结][Gulp]
 *  [Gulp不完全入门教程][Gulp 1]

### Grunt ###

*  [用grunt搭建自动化的web前端开发环境-完整教程][grunt_web_-]

### webpack ###

*  [Webpack 中文指南 -赵达][Webpack _ -]
 *  [Webpack傻瓜式指南（一） -前端外刊评论 知乎专栏][Webpack_ -_]
 *  [Webpack傻瓜指南（二）开发和部署技巧 -前端外刊评论 知乎专栏][Webpack_ -_ 1]
 *  [Webpack傻瓜指南（三）和React配合开发 -前端外刊评论 知乎专栏][Webpack_React_ -_]
    
    上述傻瓜指南的原始出处 [ https://github.com/vikingmute/webpack-for-fools][https_github.com_vikingmute_webpack-for-fools] Webpack傻瓜式指南
 *  [Webpack，101入门体验 -Yika][Webpack_101_ -Yika]
 *  [Webpack 入门指迷 -题叶][Webpack _ - 1]
 *  [https://webpack.github.io/ Webpack 官网][https_webpack.github.io_ Webpack]

### Vue ###

*  [awesome-vue][]
 *  [Vue.js 和 Webpack（一） -Randy Lu][Vue.js _ Webpack_ -Randy Lu]
 *  [Vue.js 和 Webpack（二） -Randy Lu][Vue.js _ Webpack_ -Randy Lu 1]
 *  [Vue.js 和 Webpack（三） -Randy Lu][Vue.js _ Webpack_ -Randy Lu 2]
 *  [Vuejs 1.0 中文系列视频教程 -Laravist][Vuejs 1.0 _ -Laravist]
 *  [Vuejs-QQ群 相关资料][Vuejs-QQ_] 来自豪情

### React ###

*  [深入理解 React -Thinking in React 中文版][React -Thinking in React]
 *  [Thinking in React][]

### AngularJS ###

*  [AngularJS api 官网][AngularJS api]
 *  [AngularJS入门教程——AngularJS中文社区提供][AngularJS_AngularJS]
 *  [AngularJS 教程 | 菜鸟教程][AngularJS _ _]
    
    类似 w3school 的入门 AngularJS 教程。

### React-Native ###

*  [React-Native学习指南][React-Native]

### WEEX ###

*  [Weex中文文档 官方][Weex_]
 *  [Weex详解：灵活的移动端高性能动态化方案][Weex]

### 测试 ###

*  [测试框架 Mocha 实例教程 阮一峰][Mocha _]

## 类库与插件 ##

*  [Masonry][]
    
    瀑布流布局库。
 *  [jssor][]
    
    图片轮播图其 GitHub 地址 [jssor/slider][jssor_slider]
 *  [cssslider][]
    
    纯 CSS 的图片轮播图。

## 模块化 ##

*  [后端程序员的 JavaScript 之旅 - 模块化（一）][JavaScript _ -]
 *  [后端程序员的 JavaScript 之旅 - 模块化（二）][JavaScript _ - 1]
 *  [后端程序员的 JavaScript 之旅 - 模块化（三）][JavaScript _ - 2]
 *  [CommonJS 规范 -来自 阮一峰 JavaScript 标准参考教程(alpha)][CommonJS _ -_ _ JavaScript _alpha]

## 技巧 ##

*  [将footer固定在页面底部的实现方法][footer]

## 编辑器 ##

### Atom 中常用插件 ###

*  auto-beautify
 *  autoprefixer
 *  block-comment
 *  color-picker
 *  docblockr
 *  emmet
 *  jquery-snippets
 *  jshint
 *  linter
 *  linter-csslint
 *  linter-htmlhint
 *  minimap
 *  minimap-git-diff
 *  minimap-codeglance 滑过 minimap 显示代码
 *  minimap-find-and-replace 在 minimap 中显示 `ctrl+D` 选中的内容
 *  open-in-browser
 *  uglify
 *  active-power-mode
 *  atom-terminal-panel
 *  linter-scss-linter
 *  atom-ternjs
 *  file-icons 将图标变成彩色
 *  autocomplete-paths 自动补充路径
 *  symbols-tree-view A symbol treeview like taglist

常用的主题：

UI Theme: One Dark

Syntax Theme: Atom Dark or One Dark

## GitBook 及其插件 ##

*  [Gitbook 的使用和常用插件 -赵达][Gitbook _ -]
 *  [gitbook-plugin-expandable-chapters][]
    
    折叠左侧目录章节。

## Chrome 插件 ##

*  [Chrome扩展及应用开发 -图灵电子书][Chrome_ -]
 *  [有哪些鲜为人知却非常有意思、好用的 Chrome 扩展？ -知乎][Chrome _ -]
 *  [Dribbble New Tab][]
    
    新建 tab 时，显示 dribbble 上的精选作品。

## Other blogs ##

*  [进击的马斯特 http://pinkyjie.com/][http_pinkyjie.com]
    
    马斯特，87年生人，爱溜冰的码农。技术： Javascript、Python、Mac、iOS
 *  [Jerry Qu][]
    
    JerryQu，奇虎 360，前端开发，前百度前端。
 *  [码志 https://mazhuang.org/][https_mazhuang.org]
    
    我是马壮，码而生，码而立。就职sogou。
 *  [小胡子哥 http://www.barretlee.com/][http_www.barretlee.com]
    
    李靖，阿里巴巴。
 *  [Xcat Liu http://blog.xcatliu.com/][Xcat Liu http_blog.xcatliu.com]
    
    Microsoft Software Engineer II, Meituan Senior Front-End Engineer
 *  [极限前端 http://ouvens.github.io/][http_ouvens.github.io]
    
    Ouvenzhang, 前端工程师，对前端领域的技术知识具有较高的职业能力和探究精神。对响应式页面设计、工程构建组件化、mv\*设计实现、前端优化、ES6开发体系等有深入的研究与项目实践。来自腾讯科技。
 *  [凳子\_Joinery 邓智容 http://www.dengzhr.com/][Joinery _ http_www.dengzhr.com]
 *  [赵达的个人网站 腾讯高级前端开发工程师][Link 3]
 *  [Randy][]

转载： [WEB前端必备学习指南][WEB]

[box-shadow generator]: http://www.cssmatic.com/box-shadow
[gradient-generator]: http://www.cssmatic.com/gradient-generator
[Ultimate CSS Gradient Generator]: http://www.colorzilla.com/gradient-editor/
[CSS Generators -CSSREFLEX]: http://www.cssreflex.com/css-generators/
[https_sm.ms]: https://sm.ms/
[Chrome]: https://github.com/Suxiaogang/WeiboPicBed
[Unix _ Unix timestamp]: http://tool.chinaz.com/Tools/unixtime.aspx
[i5ting]: https://cnodejs.org/topic/56ef3edd532839c33a99d00e
[JavaScript]: http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
[JavaScript _alpha_ -]: http://javascript.ruanyifeng.com/
[JavaScript Promise_ -azu]: http://liubin.org/promises-book/
[Promise_Await Async]: https://scq000.github.io/2016/11/05/%E5%89%8D%E7%AB%AF%E7%9A%84%E5%BC%82%E6%AD%A5%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E4%B9%8BPromise%E5%92%8CAwait-Async
[You Don_t Know JS _book series]: https://github.com/getify/You-Dont-Know-JS
[You Don_t Need jQuery]: https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README.zh-CN.md
[JavaScript 1]: http://bonsaiden.github.io/JavaScript-Garden/zh/
[JavaScript _ _ AlloyTeam]: http://www.alloyteam.com/2012/10/common-javascript-design-patterns/
[ECMAScript 6_ -]: https://github.com/ruanyf/es6tutorial
[EcmaScript6 _node_ -ouvens]: https://github.com/ouvens/es6-code-style-guide
[30_ES6_ES2015]: http://segmentfault.com/a/1190000004365693
[30_ES6_ES2015 1]: http://segmentfault.com/a/1190000004368132
[ES2015_]: http://www.ecma-international.org/ecma-262/6.0/
[TypeScript]: https://zhongsp.gitbooks.io/typescript-handbook/content/
[JSer]: https://segmentfault.com/a/1190000005987011
[6_JavaScript]: https://zhuanlan.zhihu.com/p/23412169
[NodeJS -Nanqiao Deng]: https://nqdeng.github.io/7-days-nodejs
[Node_ i5ting]: https://i5ting.github.io/wechat-dev-with-nodejs/
[-Node.js_ i5ting]: https://github.com/i5ting/nodejs-fullstack
[Link 1]: http://blog.jobbole.com/65513/
[Babel]: http://www.ruanyifeng.com/blog/2016/01/babel.html
[Link 2]: https://segmentfault.com/a/1190000000349555#articleHeader6
[yeoman _ - _web]: http://yijiebuyi.com/blog/a427ce8c25dd1339517ffa0a0b8f5896.html
[Gulp]: http://www.cnblogs.com/morong/p/4469637.html
[Gulp 1]: https://github.com/dwqs/blog/issues/23
[grunt_web_-]: http://blog.csdn.net/wangfupeng1988/article/details/46418203/
[Webpack _ -]: https://www.gitbook.com/book/zhaoda/webpack/details
[Webpack_ -_]: http://zhuanlan.zhihu.com/FrontendMagazine/20367175
[Webpack_ -_ 1]: http://zhuanlan.zhihu.com/FrontendMagazine/20397902
[Webpack_React_ -_]: http://zhuanlan.zhihu.com/FrontendMagazine/20522487
[https_github.com_vikingmute_webpack-for-fools]: https://github.com/vikingmute/webpack-for-fools
[Webpack_101_ -Yika]: http://www.html-js.com/article/3009
[Webpack _ - 1]: https://segmentfault.com/a/1190000002551952
[https_webpack.github.io_ Webpack]: https://webpack.github.io/
[awesome-vue]: https://github.com/vuejs/awesome-vue
[Vue.js _ Webpack_ -Randy Lu]: http://djyde.github.io/2015/08/29/vuejs-and-webpack-1/
[Vue.js _ Webpack_ -Randy Lu 1]: http://djyde.github.io/2015/08/30/vuejs-and-webpack-2/
[Vue.js _ Webpack_ -Randy Lu 2]: http://djyde.github.io/2015/08/31/vuejs-and-webpack-3/
[Vuejs 1.0 _ -Laravist]: https://laravist.com/series/vue-js-1-0-in-action-series
[Vuejs-QQ_]: https://github.com/jsfront/src/blob/master/vuejs.md
[React -Thinking in React]: http://reactjs.cn/react/docs/thinking-in-react.html
[Thinking in React]: http://facebook.github.io/react/docs/thinking-in-react.html
[AngularJS api]: https://docs.angularjs.org/api
[AngularJS_AngularJS]: https://github.com/zensh/AngularjsTutorial_cn
[AngularJS _ _]: http://www.runoob.com/angularjs/angularjs-tutorial.html
[React-Native]: https://github.com/reactnativecn/react-native-guide
[Weex_]: https://github.com/weexteam/article/wiki/Weex%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3
[Weex]: http://www.infoq.com/cn/articles/introducing-weex/
[Mocha _]: http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html
[Masonry]: http://masonry.desandro.com/
[jssor]: http://www.jssor.com/
[jssor_slider]: https://github.com/jssor/slider
[cssslider]: http://cssslider.com/
[JavaScript _ -]: http://lishaopeng.com/2016/02/05/js-module/
[JavaScript _ - 1]: http://lishaopeng.com/2016/02/11/js-module2/
[JavaScript _ - 2]: http://lishaopeng.com/2016/02/19/js-module3/
[CommonJS _ -_ _ JavaScript _alpha]: http://javascript.ruanyifeng.com/nodejs/module.html
[footer]: https://segmentfault.com/a/1190000004453249
[Gitbook _ -]: http://zhaoda.net/2015/11/09/gitbook-plugins/
[gitbook-plugin-expandable-chapters]: https://plugins.gitbook.com/plugin/expandable-chapters
[Chrome_ -]: http://www.ituring.com.cn/minibook/950
[Chrome _ -]: https://www.zhihu.com/question/23228162#answer-28057391
[Dribbble New Tab]: https://chrome.google.com/webstore/detail/dribbble-new-tab/hmhjbefkpednjogghoibpejdmemkinbn
[http_pinkyjie.com]: http://pinkyjie.com/
[Jerry Qu]: https://imququ.com/
[https_mazhuang.org]: https://mazhuang.org/
[http_www.barretlee.com]: http://www.barretlee.com/
[Xcat Liu http_blog.xcatliu.com]: http://blog.xcatliu.com/
[http_ouvens.github.io]: http://ouvens.github.io/
[Joinery _ http_www.dengzhr.com]: http://www.dengzhr.com/
[Link 3]: http://zhaoda.net/
[Randy]: http://djyde.github.io/
[WEB]: https://segmentfault.com/r/1250000007424132?shareId=1210000007424133