Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/windiest/Front-end-tutorial

:smiley_cat:猫的前端回忆录 Cat's front memory, these share data are from my usual work and learning, hoping to help you, and hoping slowly improve, if you like you can star
https://github.com/windiest/Front-end-tutorial
Last synced: 1 day ago
JSON representation
:smiley_cat:猫的前端回忆录 Cat's front memory, these share data are from my usual work and learning, hoping to help you, and hoping slowly improve, if you like you can star
Host: GitHub
URL: https://github.com/windiest/Front-end-tutorial
Owner: windiest
Created: 2015-09-10T10:19:34.000Z (about 9 years ago)
Default Branch: master
Last Pushed: 2020-07-01T07:05:01.000Z (over 4 years ago)
Last Synced: 2024-08-02T08:07:40.471Z (3 months ago)
Homepage:
Size: 602 KB
Stars: 4,458
Watchers: 306
Forks: 2,180
Open Issues: 10
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

README

        :smiley_cat:_These share data are from my usual work and learning，hoping to help you，If you like you can star_

更多详情可关注作者:小猫[wscat](https://github.com/Wscats)和猫主人[windiest](https://github.com/windiest),谢谢~

## Javascript

| Article | Article |

| --------- | --------- |

|[Javascript深浅拷贝](https://github.com/Wscats/Good-text-Share/issues/57)|[Javascript中的apply和call继承](https://github.com/Wscats/Good-text-Share/issues/56)|

|[Javascript的jsonp原理](https://github.com/Wscats/Good-text-Share/issues/55)|[Javascript监听触摸事件](https://github.com/Wscats/Good-text-Share/issues/49)|

|[Javascript中的var self = this](https://github.com/Wscats/Good-text-Share/issues/52)|[Javascript面向对象编程](https://github.com/Wscats/Good-text-Share/issues/32)|

|[Javascript滑屏切换场景](https://github.com/Wscats/Good-text-Share/issues/14)|[Javascript获取经纬度，关于调用百度API的问题](https://github.com/Wscats/Good-text-Share/issues/16)|

|[妙用Javascript运算符](https://github.com/Wscats/Good-text-Share/issues/3)|[深入理解Javascript函数编程](https://github.com/Wscats/Good-text-Share/issues/1)|

|[Javascript的setTimeout详细用例](https://github.com/Wscats/Good-text-Share/issues/4)|[sessionstorage，localstorage和cookie](https://github.com/Wscats/Good-text-Share/issues/42)|

|[JS日期对比](https://github.com/Wscats/Good-text-Share/issues/11)|[JSONP参考文章](https://github.com/Wscats/Good-text-Share/issues/10)|

|[Javascript的createElement](https://wscats.github.io/angular-demo/createElement.html)|[Javascript的createDocumentFragment](https://wscats.github.io/angular-demo/createDocumentFragment.html)|

|[sessionStorage和localStorage](https://wscats.github.io/angular-demo/sessionStoragelocalStorage.html)|[像素帧动画](https://wscats.github.io/angular-demo/像素动画.html)|

| **Reference** | **Reference** |

|[收集最全前端学习资料](https://github.com/windiest/Front-end-tutorial)|[最全前端教程-猫的回忆录](https://github.com/Wscats/Good-text-Share)|

|[JavaScript中的this陷阱的最全收集--没有之一](https://segmentfault.com/a/1190000002640298)|[JS函数式编程指南](https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html)|

|[JavaScript Promise迷你书（中文版）](http://liubin.github.io/promises-book)|[阮一峰 Javascript](http://javascript.ruanyifeng.com)|

|[前端 TOP 100](https://www.awesomes.cn/rank)|[小白的零基础JavaScript全栈教程](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000)|

## UI

| Reference | Reference |

| --------- | --------- |

|[WeUI](https://github.com/weui/weui)|[Bootstrap](http://www.bootcss.com)|

|[MUI-最接近原生APP体验的高性能前端框架](http://dev.dcloud.net.cn/mui/)|[Amaze UI中国首个开源HTML5跨屏前端框架](http://amazeui.org)|

|[Frozen UI](http://frozenui.github.io/)|[Foundation](http://foundation.zurb.com/)|

|[SUI](http://sui.taobao.org/sui/docs/)|[ZUI](https://github.com/easysoft/zui)|

|[淘宝HTML5前端框架](http://m.sui.taobao.org)|[KISSY - 阿里前端JavaScript库](http://docs.kissyui.com)|

|[网易Nej - Nice Easy Javascript](http://nej.netease.com)|[Kendo UI MVVM Demo](http://demos.telerik.com/kendo-ui/mvvm/index)|

|[Smart UI](http://smartui.chinamzz.com)|[雅虎UI - CSS UI](http://developer.yahoo.com/yui/grids)|

## CSS

| Article | Article |

| --------- | --------- |

|[CSS Flex布局](https://github.com/Wscats/Good-text-Share/issues/41)|[移动前端开发CSS3](https://github.com/Wscats/Good-text-Share/issues/38)|

|[响应式布局 媒体查询](https://github.com/Wscats/Good-text-Share/issues/43)|[CSS图片响应式布局](https://github.com/Wscats/Good-text-Share/issues/34)|

|[lessDemo的less文件](https://wscats.github.io/angular-demo/stylesheets/styles.less)||

| **Reference** | **Reference** |

|[CSS 语法参考](http://tympanus.net/codrops/css_reference)|[CSS3动画手册](http://isux.tencent.com/css3/index.html)|

|[腾讯css3动画制作工具](http://isux.tencent.com/css3/tools.html)|[animate.css](http://daneden.github.io/animate.css)|

|[Animated Books with CSS 3D Transforms](http://tympanus.net/Development/AnimatedBooks/)|[Browserhacks](http://browserhacks.com/)|

## HTML

| Article | Article |

| --------- | --------- |

[HTML5有哪些让你惊艳的demo](http://www.zhihu.com/question/24398907)|[Wallpaperbetter](http://www.wallpaperbetter.com/)|

## Angular

| Article | Angular文档 |

| --------- | --------- |

|[Angular源码解读publishExternalAPI函数](https://github.com/Wscats/Good-text-Share/issues/26)|[Angular源码解读setupModuleLoader函数](https://github.com/Wscats/Good-text-Share/issues/25)|

|[Angular的ng-style用法](https://github.com/Wscats/Good-text-Share/issues/35)|[Angular判断在那个浏览器下打开的服务](https://github.com/Wscats/Good-text-Share/issues/29)|

|[Angular文字折叠展开组件的原理分析](https://github.com/Wscats/Good-text-Share/issues/28)|[Angular服务Request异步请求的详细分析](https://github.com/Wscats/Good-text-Share/issues/21)|

|[Angular自定义service服务详解](https://github.com/Wscats/Good-text-Share/issues/24)|[Angular自定义判断上一页是否存在的服务](https://github.com/Wscats/Good-text-Share/issues/22)|

|[Angular操作cookies方法](https://github.com/Wscats/Good-text-Share/issues/19)|[Angular打印错误的minErr函数](https://github.com/Wscats/Good-text-Share/issues/18)|

|[Angular的fromJson与toJson方法](https://github.com/Wscats/Good-text-Share/issues/17)|[Angular用ng-repeat生成表单并绑定ng-click时的一个细节](https://github.com/Wscats/Good-text-Share/issues/12)|

|[Angular的run方法巧妙运用](https://github.com/Wscats/Good-text-Share/issues/6)|[Angular处理Html转义问题](https://github.com/Wscats/Good-text-Share/issues/5)|

|[ng-repeat绑定事件和嵌套](ng-repeat绑定事件和嵌套)|[Angular的post请求后台接受不了数据的解决方法](https://github.com/Wscats/angular-demo/issues/4)|

|[ionic总结](https://github.com/Wscats/angular-demo/issues/19)|[ui-route和ng-route](https://github.com/Wscats/angular-demo/issues/17)|

|[ng-options&&ng-switch](https://github.com/Wscats/angular-demo/issues/15)|[directive组件作用域](https://github.com/Wscats/angular-demo/issues/14)|

|[表单认证](https://github.com/Wscats/angular-demo/issues/13)|[$broadcast,$emit and $on](https://github.com/Wscats/angular-demo/issues/11)|

|[自定义过滤器](https://github.com/Wscats/angular-demo/issues/9)|[自定义手势指令ng-touch](https://github.com/Wscats/angular-demo/issues/8)|

|[ng-animate](https://github.com/Wscats/angular-demo/issues/7)|[单页面应用的技术点](https://github.com/Wscats/angular-demo/issues/3)|

| **Guess you like** |**AppDemo**|

|[Angular商城Demo](https://wscats.github.io/angular-demo/spa/mobie-b2bdemo1/index.html)|[Angular的Cnode社区](https://wscats.github.io/angular-demo/spa/CNode/index.html)|

|[AngularStovepipe](https://wscats.github.io/angular-demo/spa/Stovepipe/index.html)|[Angular的新闻客户端](https://wscats.github.io/angular-demo/spa/TT/index.html)|

|[Angular商城Demo](https://wscats.github.io/angular-demo/spa/mobie-b2bdemo1/index.html)|[Angular的Cnode社区](https://wscats.github.io/angular-demo/spa/CNode/index.html)|

|[Angular内联编辑器](https://wscats.github.io/angular-demo/angularjs5examples/inline-editor/index.html)|[Angular即时搜索](https://wscats.github.io/angular-demo/angularjs5examples/instant-search/index.html)|

|[Angular导航菜单](https://wscats.github.io/angular-demo/angularjs5examples/navigation-menu/index.html)|[Angular订单表单](https://wscats.github.io/angular-demo/angularjs5examples/order-form/index.html)|

|[Angular切换网格](https://wscats.github.io/angular-demo/angularjs5examples/switchable-grid/index.html)|[Angular新闻＋WEUI DEMO](https://wscats.github.io/angular-demo/spa/news/index.html) [源码](https://github.com/Wscats/angular-demo/tree/gh-pages/spa/NodeServerAndApi-Weui-News)|

| **Controller** |**控制器**|

|[Angular控制器demo](https://wscats.github.io/angular-demo/view/student.html)||

| **SPA DEMO** |**单页面应用**|

|[Angular+Weui单页面应用DEMO-每日笑话](https://wscats.github.io/angular-demo/weui每日笑话.html)||

| **Service** |**服务**|

|[Angular自定义服务的常用方法](https://github.com/Wscats/angular-demo/blob/gh-pages/%E5%B8%B8%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9C%8D%E5%8A%A1%E6%96%B9%E6%B3%95.md)|[Angular部分服务demo](https://wscats.github.io/angular-demo/部分服务demo.html)|

|[Angular自定义Canvas画图服务](https://wscats.github.io/angular-demo/Angular自定义Canvas画图服务.html)|[Angular自定义http服务 面向对象封装](https://wscats.github.io/angular-demo/自定义http服务.html)|

| **Directive** |**组件与指令**|

|[Angular自定义手势指令](https://wscats.github.io/angular-demo/自定义手势事件.html)|[Angular自定义轮播图组件](https://wscats.github.io/angular-demo/自定义directive轮播图.html)|

|[Angular自定义下拉刷新组件1](https://wscats.github.io/angular-demo/下拉刷新.html)|[Angular自定义下拉刷新组件2](https://wscats.github.io/angular-demo/Angular自定义下拉刷新组件.html)|

| **Router** |**路由**|

|[Angular路由嵌套](https://wscats.github.io/angular-demo/UI路由嵌套DEMO.html)|[Angular路由单页多个ui-view](https://wscats.github.io/angular-demo/uiRoute/index.html)|

| **Filter** |**过滤器**|

|[Angular自带过滤器](https://wscats.github.io/angular-demo/angular自带过滤器.html)|[Angular自定义关键词检索过滤器](https://wscats.github.io/angular-demo/自定义关键词检索过滤器.html)|

| **Animate** |**动画**|

|[Angular ng-animate动画1](https://wscats.github.io/angular-demo/ng-animate动画.html)|[Angular ng-animate动画2](https://wscats.github.io/angular-demo/ng-animate动画2.html)|

| **Other** |**其他**|

|[Angular中使用iframe](https://wscats.github.io/angular-demo/iframesdemo.html)|[Angular三级联动(1)](https://wscats.github.io/angular-demo/%E4%B8%89%E7%BA%A7%E8%81%94%E5%8A%A8.html)|

|[Angular中使用ng-switch](https://wscats.github.io/angular-demo/ngSwitch.html)|[百度定位DEMO](https://wscats.github.io/angular-demo/百度地图定位DEMO.html)|

|[Angular三级联动(2)](https://wscats.github.io/angular-demo/三级联动改进.html)|[Angular事件监听](https://wscats.github.io/angular-demo/事件监听.html)|

|[jQuery模拟ng-repeat](https://wscats.github.io/angular-demo/jquery模拟ng-repeat.html)|[lessDemo](https://wscats.github.io/angular-demo/lessDemo.html)|

|[Angular自定义cookie服务和ngCookie的使用](https://wscats.github.io/angular-demo/ngCookie.html)|[图灵机器人](https://wscats.github.io/angular-demo/图灵机器人.html)|

|[Angular利用angular.module()实现模块化](https://wscats.github.io/angular-demo/angular模块化.html)|[Angular的form表单验证](https://wscats.github.io/angular-demo/form表单验证.html)|

|[Angular的ng-repeat嵌套](https://wscats.github.io/angular-demo/ng-repeat嵌套.html)|[Angular利用angular.module()实现模块化2](https://wscats.github.io/angular-demo/angular模块化2.html)|

| **PHP** | **PHP** |

|[PHP CURL请求的小细节](https://github.com/Wscats/Good-text-Share/issues/53)||

| **Reference** | **Reference** |

|[最流行的PHP 代码规范](https://segmentfault.com/a/1190000000443795)|[最流行的PHP 代码规范](https://github.com/hfcorriez/fig-standards/blob/zh_CN/%E6%8E%A5%E5%8F%97/PSR-2-coding-style-guide.md)|

|[Angular.js的一些学习资源](http://blog.aijc.net/AngularLearning/)|[Angularjs中文社区](http://angularjs.cn)|

|[一些扩展Angular UI组件](https://github.com/angular-ui)|[Angular UI](http://mgcrea.github.io/angular-strap)|

|[AngularJS在线教程](http://each.sinaapp.com/angular)|[Angular学习笔记](http://www.zouyesheng.com/angular.html)|

## React

| React | Reference |

| --------- | --------- |

|[React教程 菜鸟教程](http://www.runoob.com/react/react-tutorial.html)|[React Router 使用教程](http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu)|

|[React开发中文手册-极客学院](http://wiki.jikexueyuan.com/project/react/)|[React教程-汇智网](http://www.hubwiz.com/course/552762019964049d1872fc88/)|

|[React.js快速开始](http://www.phperz.com/article/15/0712/140537.html#)|[Reactjs 2016最佳实践](http://www.alloyteam.com/2016/01/reactjs-best-practices-for-2016/)|

|[React 入门教程](https://hulufei.gitbooks.io/react-tutorial/content/introduction.html)|[汇智网 React教程](http://www.hubwiz.com/course/552762019964049d1872fc88/?ch=alloyteam)|

|[轻松入门React和Webpack](https://segmentfault.com/a/1190000002767365)|[React中文索引](http://nav.react-china.org/#docs)|

|[Redux 中文文档](http://cn.redux.js.org/)|[React Router官方文档中文翻译](https://github.com/react-guide/react-router-cn)|

|[React入门教程](http://www.cnblogs.com/kunyashaw/p/5619256.html)|[React介绍及实践教程](http://www.ibm.com/developerworks/cn/web/1509_dongyue_react/index.html)|

|[React.js 官方网址](https://facebook.github.io/react/index.html)|[React.js 官方文档](https://facebook.github.io/react/docs/getting-started.html)|

|[React.js material UI](http://material-ui.com/#)|[React.js TouchstoneJS UI](http://touchstonejs.io)|

|[React.js amazeui UI](http://amazeui.org/react)|[React 入门实例教程 - 阮一峰](http://www.ruanyifeng.com/blog/2015/03/react.html)|

|[React Native 中文版](http://wiki.jikexueyuan.com/project/react-native)|[Webpack 和 React 小书 - gitbook](https://fakefish.github.io/react-webpack-cookbook)|

## Vue

| Vue |AppDemo|Demo|

| --------- | --------- | --------- |

|[NewsDemo](https://wscats.github.io/vue-demo/news/index.html)|[vue计算属性](https://wscats.github.io/vue-demo/vue计算属性.html)|[vue生命周期](https://wscats.github.io/vue-demo/vue生命周期.html)|

| **Article** |**Vue文档**||

|[Vue-cli脚手架](https://github.com/Wscats/vue-demo/issues/2)|[Vue组件](https://github.com/Wscats/vue-demo/issues/3)|[vue自定义指令](https://github.com/Wscats/vue-demo/issues/8)|

|[Vue过渡动画](https://github.com/Wscats/vue-demo/issues/9)|[Vue指令](https://github.com/Wscats/vue-demo/issues/7)|[Vue api文档](https://github.com/Wscats/vue-demo/issues/6)|

|[Vue执行ajax请求](https://github.com/Wscats/vue-demo/issues/5)|[vue实现类似angular服务的方法](https://github.com/Wscats/vue-demo/issues/4)|[Vue源码参考文档](https://github.com/Wscats/vue-demo/issues/10)|

| **Router** |**路由**||

|[路由demo](https://wscats.github.io/vue-demo/路由.html)|[路由demo2](https://wscats.github.io/vue-demo/路由2.html)||

| **Directive** |**指令**||

|[指令demo](https://wscats.github.io/vue-demo/指令.html)|[自定义指令demo](https://wscats.github.io/vue-demo/自定义指令.html)|[滑动手势demo](https://wscats.github.io/vue-demo/滑动手势指令.html)|

| **Filter** |**过滤器**||

|[过滤器demo](https://wscats.github.io/vue-demo/过滤器.html)|[过滤器实现分页demo](https://wscats.github.io/vue-demo/vue使用过滤器实现分页.html)|[过滤器读写数据](https://wscats.github.io/vue-demo/vue过滤器读写数据.html)|

| **Transition** |**过渡**||

|[过渡demo](https://wscats.github.io/vue-demo/过渡.html)|[过渡demo2](https://wscats.github.io/vue-demo/过渡2.html)||

| **Form** |**表单**||

|[获取表单值](https://wscats.github.io/vue-demo/vue获取表单值.html)|||

| **Computed** |**计算**||

|[计算属性](https://wscats.github.io/vue-demo/vue计算属性.html)|||

| Component |组件||

|[组件demo](https://wscats.github.io/vue-demo/组件.html)|||

| **Reference** | **Reference** | **Reference** |

|[Vue官网](http://cn.vuejs.org)|[Vue论坛](http://forum.vuejs.org)|[Awesome-vue](https://github.com/vuejs/awesome-vue)|

## Node

| Node | Article |

| --------- | --------- |

|[node技巧](https://github.com/Wscats/Good-text-Share/issues/44)|[NodeJs静态服务器](https://github.com/Wscats/angular-demo/tree/gh-pages/diyNodeServer)|

| **Reference** | **Reference** |

|[Node.js 包教不包会](https://github.com/alsotang/node-lessons)|[七天学会NodeJS](http://nqdeng.github.io/7-days-nodejs/)|

|[从零开始nodejs系列文章](http://blog.fens.me/series-nodejs)|[Node入门](http://www.nodebeginner.org/index-zh-cn.html)|

|[Node初学者入门，一本全面的NodeJS教程](http://ourjs.com/detail/529ca5950cb6498814000005)||

## Gulp 

| Gulp | Article |

| --------- | --------- |

|[Gulp Demo](https://github.com/Wscats/glup)||

| **Gulp** | **Reference** |

|[Gulp官网](http://gulpjs.com)|[Gulp中文网](http://www.gulpjs.com.cn)|

|[Gulp资料收集](https://github.com/Platform-CUF/use-gulp)|[Gulp：任务自动管理工具 - ruanyifeng](http://javascript.ruanyifeng.com/tool/gulp.html)|

|[Gulp插件](http://gulpjs.com/plugins])|[Gulp不完全入门教程](http://www.ido321.com/1622.html)|

|[Gulp 入门指南](https://github.com/nimojs/gulp-book)||

## 其他

| Other | Article |

| --------- | --------- |

|[关于Pornographic website的一些前端分析](https://github.com/Wscats/node-demo/issues/4)|[微信公众号开发](https://github.com/Wscats/Good-text-Share/issues/50)|

|[Atom技巧总结](https://github.com/Wscats/Good-text-Share/issues/30)|[Mac小技巧](https://github.com/Wscats/Good-text-Share/issues/46)|

|[CSDN页面内JS跳转脚本](https://github.com/Wscats/Good-text-Share/issues/9)|[CSDN博客隐藏配置](https://github.com/Wscats/Good-text-Share/issues/8)|

|[百度设置小度机器人出现](https://github.com/Wscats/Good-text-Share/issues/7)|[前端冷知识，妙用浏览器地址栏](https://github.com/Wscats/Good-text-Share/issues/2)|

|[Vim笔记](https://github.com/Wscats/Good-text-Share/issues/27)|[Cordova配置&&Ionic配置（WebApp混合开发环境）](https://github.com/Wscats/Good-text-Share/issues/48)|

|[IE8及以下按钮超链接无法跳转的问题](https://github.com/Wscats/Good-text-Share/issues/33)||

## 分享功能

| Share | Reference |

| --------- | --------- |

|[百度分享(PC)](http://share.baidu.com)|[JiaThis(PC)](http://jiathis.com)|

|[社会化分享组件(Mobile)](http://developer.baidu.com/soc/share)|[ShareSDK轻松实现社会化功能(Mobile)](http://www.mob.com)|

|[友盟分享(Mobile)](http://dev.umeng.com/social/android/quick-integration)||

## 在线演示

| Reference | Reference |

| --------- | --------- |

|[js 在线编辑 - runjs](http://runjs.cn)|[js 在线编辑 - jsbin](http://jsbin.com)|

|[js 在线编辑 - codepen](http://codepen.io)|[js 在线编辑 - jsfiddle](http://jsfiddle.net)|

|[java 在线编辑 - runjs](http://ideone.com)|[js 在线编辑 - hcharts](http://code.hcharts.cn)|

|[js 在线编辑 - jsdm](http://jsdm.com)|[sql 在线编辑 - sqlfiddle](http://sqlfiddle.com)|

|[mozilla 在线编辑器](https://thimble.mozilla.org)||

## 富文本编辑器

| Reference | Reference |

| --------- | --------- |

|[百度ueditor](http://ueditor.baidu.com/website)|[ckeditor](http://ckeditor.com)|

|[tinymce](https://www.tinymce.com)|[kindeditor](http://kindeditor.net)|

|[wysiwyg](http://www.bootcss.com/p/bootstrap-wysiwyg)|[BachEditor](http://integ.github.io/BachEditor)|

|[simditor](https://github.com/mycolorway/simditor)|[summernote](https://github.com/summernote/summernote)|

|[Squire](http://neilj.github.io/Squire)|[wangEditor](https://github.com/wangfupeng1988/wangEditor)|

## Chrome

| Reference | Reference |

| --------- | --------- |

|[Chrome - 基础](http://www.cnblogs.com/constantince/p/4565261.html)|[Chrome - 进阶](http://www.cnblogs.com/constantince/p/4579121.html)|

|[Chrome - 性能](http://www.cnblogs.com/constantince/p/4585983.html)|[Chrome - 性能进阶](http://www.cnblogs.com/constantince/p/4607497.html)|

|[Chrome - 移动](http://www.cnblogs.com/constantince/p/4624241.html)|[Chrome - 使用技巧](http://www.cnblogs.com/liyunhua/p/4544738.html)|

|[Chrome - Console控制台不完全指南](http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html)|[chrome开发工具快捷键](http://anti-code.com/devtools-cheatsheet)|

|[Chrome 开发工具 Workspace 使用](http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace)|[Chrome神器Vimium快捷键学习记录](http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html)|

|[Sass调试-w3cplus](http://www.w3cplus.com/sassguide/debug.html)|[如何更专业的使用Chrome开发者工具-w3cplus](http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html)|

|[Chrome调试canvas](http://sentsin.com/web/253.html)|[神器——Chrome开发者工具(一)](https://segmentfault.com/a/1190000000683599)|

|[奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍](https://xinranliu.me/2015-05-22-qiqu-performance)|[Chrome 开发者工具的 15 个小技巧](http://frontenddev.org/link/15-tips-of-chrome-developer-tools.html)|

|[Chrome开发者工具不完全指南](http://1ke.co/course/361)|[Chrome 开发者工具使用技巧](http://segmentfault.com/a/1190000003882567)|

## 性能优化

| Reference | Reference |

| --------- | --------- |

|[Javascript高性能动画与页面渲染](http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering)|[移动H5前端性能优化指南](http://isux.tencent.com/h5-performance.html)|

|[给网页设计师和前端开发者看的前端性能优化](http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers)|[张鑫旭——前端性能](http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/)|

|[web前端性能优化进阶路](http://www.aliued.cn/2013/01/20/web%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html)|[Hey——前端性能](http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD)|

|[YSLOW中文介绍](http://www.cnblogs.com/yslow)|[Yahoo!团队实践分享：网站性能](http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml)|

|[加载，不只是少一点点](http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml)|[由12306谈谈网站前端性能和后端性能优化](http://coolshell.cn/articles/6470.html)|

|[【高性能前端1】高性能HTML](http://www.alloyteam.com/2012/10/high-performance-html)|[【高性能前端2】高性能CSS](http://www.alloyteam.com/2012/10/high-performance-css)|

|[前端工程与性能优化（上）：静态资源版本更新与缓存](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1)|[前端工程与性能优化（下）：静态资源管理与模板框架](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2)|

|[HTTPS连接的前几毫秒发生了什么](http://blog.jobbole.com/48369)|[Yslow](http://uicss.cn/yslow/#more-12319)|

|[阿里无线前端性能优化指南(Pt.1 加载期优化)](https://github.com/amfe/article/issues/1)|[毫秒必争，前端网页性能最佳实践](http://www.cnblogs.com/developersupport/p/3248695.html)|

## CDN

| Reference | Reference |

| --------- | --------- |

|[Jquery&Bootstrap中文网开源项目免费 CDN 服务](http://www.bootcdn.cn/jquery)|[Bootstrap中文网开源项目免费 CDN 服务](http://www.bootcdn.cn)|

|[新浪CDN](http://lib.sinaapp.com)|[百度静态资源公共库](http://cdn.code.baidu.com)|

|[开放静态文件 CDN - 七牛](http://staticfile.org)|[CDN加速 - jq22](http://www.jq22.com/cdn)|

|[微软CDN](http://www.asp.net/ajax/cdn)|[Angular CDN](https://code.angularjs.org/1.5.8/)|

|[360网站卫士常用前端公共库CDN服务](http://libs.useso.com)||

## Git

| Article | Article |

| --------- | --------- |

|[Git操作](https://github.com/Wscats/Good-text-Share/issues/20)|[Git CSDN Blog](http://blog.csdn.net/qq_27080247/article/details/49942991)|

| **Reference** | **Reference** |

|[Git-scm](http://git-scm.com)|[Git-for-windows](https://git-for-windows.github.io)|

|[廖雪峰-Git教程](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000)|[Gogithub](http://www.worldhello.net/gotgithub/index.html)|

|[Git常规命令练习](http://pcottle.github.io/learnGitBranching)|[Git的资料整理](https://github.com/xirong/my-git)|

|[我所记录的git命令（非常实用）](http://www.cnblogs.com/fanfan259/p/4810517.html)|[GitHub 漫游指南](https://github.com/phodal/github-roam)|

|[GitHub秘籍](https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md)|[动画方式练习git](http://onlywei.github.io/explain-git-with-d3)|

## Sass&Less

| Article | Article |

| --------- | --------- |

|[Less教程](https://github.com/Wscats/less-demo/issues/1)||

| **Reference** | **Reference** |

|[Sass](http://www.w3cplus.com/sassguide)|[Sass中文文档](http://sass.bootcss.com)|

|[Less](http://less.bootcss.com)||

## Markdown

| Reference | Reference |

| --------- | --------- |

|[Markdown 语法说明 (简体中文版)](http://wowubuntu.com/markdown)|[Markdown入门参考](https://github.com/LearnShare/Learning-Markdown/blob/master/README.md)|

|[Mdeditor(一款国内的在线markdown编辑器)](https://www.zybuluo.com/mdeditor)|[Stackedit(国外的在线markdown编辑器，功能强大，同步云盘)](https://stackedit.io)|

|[Mditor一款轻量级的markdown编辑器](http://bh-lay.github.io/mditor)|[lepture-editor](https://github.com/lepture/editor)|

|[Markdown-editor](https://github.com/jbt/markdown-editor)||

## 前端文档

| Reference | Reference |

| --------- | --------- |

|[前端知识结构](https://github.com/JacksonTian/fks)|[Web前端开发大系概览](https://github.com/unruledboy/WebFrontEndStack)|

|[免费的编程中文书籍索](https://github.com/justjavac/free-programming-books-zh_CN)|[前端书籍](https://github.com/dypsilon/frontend-dev-bookmarks)|

|[前端免费书籍大全](https://github.com/vhf/free-programming-books)|[重新介绍JavaScript（JS教程）](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript)|

|[Gitbook](https://www.gitbook.com 国外的在线markdown可编辑成书)|[Front-End-Develop-Guide 前端开发指南](https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide)|

|[前端开发笔记本](https://li-xinyang.gitbooks.io/frontend-notebook/content)|[大前端工具集](https://github.com/nieweidong/fetool)|

|[前端开发者手册](https://dwqs.gitbooks.io/frontenddevhandbook/content)|[结合个人经历总结的前端入门方法](https://github.com/qiu-deqing/FE-learning)|

|[2016最新前端学习计划](http://blog.csdn.net/qq_25827845/article/details/53079094)|

## 前端规范

| Reference | Reference |

| --------- | --------- |

|[通过分析github代码库总结出来的工程师代码书写习惯](http://alloyteam.github.io/CodeGuide/)|[HTML&CSS编码规范 by @mdo](http://codeguide.bootcss.com)|

|[前端编码规范之js - by yuwenhui](http://yuwenhui.github.io)|[前端编码规范之js - by 李靖](http://www.cnblogs.com/hustskyking/p/javascript-spec.html)|

|[Airbnb JavaScript 编码规范（简体中文版）](https://github.com/yuche/javascript#table-of-contents)|[AMD与CMD规范的区别](http://www.zhihu.com/question/20351507)|

|[AMD与CMD规范的区别](http://www.cnblogs.com/tugenhua0707/p/3507957.html)|[KISSY 源码规范](http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/kissy-source-style.html)|

|[前端代码规范及最佳实践](http://blog.jobbole.com/79075)|[百度前端规范](http://coderlmn.github.io/code-standards)|

|[JavaScript风格指南/编码规范（Airbnb公司版）](http://blog.jobbole.com/79484)|[网易前端开发规范](http://nec.netease.com/standard)|

|[前端规范资源列表](https://github.com/ecomfe/spec)|[Web 前端开发规范文档](http://codecloud.net/5622.html)|

## 前端面试

| Reference | Reference |

| --------- | --------- |

|[2016校招内推 -- 阿里巴巴前端 -- 四面面试经历](http://www.cnblogs.com/imwtr/p/4685546.html)|[那几个月在找工作（百度，网易游戏，华为）](https://www.nowcoder.com/discuss/3196)|

|[前端开发面试题](https://segmentfault.com/a/1190000000465431)|[Front-end-Interview-questions](https://github.com/hawx1993/Front-end-Interview-questions)|

|[5个经典的前端面试问题](http://ourjs.com/detail/5%E4%B8%AA%E7%BB%8F%E5%85%B8%E7%9A%84%E5%89%8D%E7%AB%AF%E)|[Front-end-Developer-Interview-Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese)|

|[BAT及各大互联网公司2014前端笔试面试题：JavaScript篇](http://blog.jobbole.com/78738/)|[前端开发面试题大收集](https://github.com/paddingme/Front-end-Web-Development-Interview-Question)|

|[收集的前端面试题和答案](https://github.com/qiu-deqing/FE-interview)|[前端开发面试题](https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md)|

|[前端面试大全](https://segmentfault.com/a/1190000005947094)|[关于前端面试](https://mdluo.github.io/blog/about-front-end-interview/)|

## 前端网站

| Reference | Reference |

| --------- | --------- |

|[掘金](https://gold.xitu.io/)|[百度FEX](http://fex.baidu.com/)|

|[阿里UED](http://www.aliued.com/)|[菜鸟教程](http://www.runoob.com/)|

|[QDFuns](http://www.qdfuns.com/portal.php)|[幕课网](http://www.imooc.com/)|

|[Codepen](http://codepen.io/)|[Sentsin](http://sentsin.com/daohang/)|

|[CTOLib](http://www.ctolib.com/javascript/)|[CTOLib/Node](http://www.ctolib.com/nodejs/)|

## JS练习

| Reference | Reference |

| --------- | --------- |

|[Codewars](https://www.codewars.com/)|[Javascript-puzzlers](http://javascript-puzzlers.herokuapp.com/)|

|[Freecodecamp中文版](https://freecodecamp.cn/)|[ES6katas](http://es6katas.org/)|

|[Now Coder牛客网](https://www.nowcoder.com/ta/js-assessment)|[Leetcode](https://leetcode.com/)|

|[Nodeschool](https://nodeschool.io/)|[Hackerrank](https://www.hackerrank.com/)|

## 算法

| Reference | Reference |

| --------- | --------- |

|[数据结构与算法 JavaScript 描述. 章节练习](https://github.com/Ralph-Wang/algorithm.in.js)|[常见排序算法（JS版）](https://github.com/twobin/twobinSort)|

|[经典排序](https://github.com/luofei2011/jsAgm/blob/master/js/sort.js)|[常见排序算法-js版本](https://github.com/hechangmin/jssort)|

## ES

| Reference | Reference |

| --------- | --------- |

|[Exploring-ES6翻译](http://es6-org.github.io/exploring-es6/)|[阮一峰 ES6](http://es6.ruanyifeng.com)|

|[ECMA-262，第 5 版](http://yanhaijing.com/es5)|[ES5](http://es5.github.io)|