├── .DS_Store ├── 算法设计 ├── .DS_Store └── imgs │ ├── 原理图.jpg │ ├── 流程图.jpg │ ├── .DS_Store │ ├── 弹幕导图.jpg │ ├── 轨道设计图.jpg │ └── 播放器效果图.jpg ├── 源码系列 ├── React │ └── index.md └── Vue │ └── index.md ├── LICENSE ├── .gitignore └── README.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beupgo/fe-material/HEAD/.DS_Store -------------------------------------------------------------------------------- /算法设计/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beupgo/fe-material/HEAD/算法设计/.DS_Store -------------------------------------------------------------------------------- /算法设计/imgs/原理图.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beupgo/fe-material/HEAD/算法设计/imgs/原理图.jpg -------------------------------------------------------------------------------- /算法设计/imgs/流程图.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beupgo/fe-material/HEAD/算法设计/imgs/流程图.jpg -------------------------------------------------------------------------------- /算法设计/imgs/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beupgo/fe-material/HEAD/算法设计/imgs/.DS_Store -------------------------------------------------------------------------------- /算法设计/imgs/弹幕导图.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beupgo/fe-material/HEAD/算法设计/imgs/弹幕导图.jpg -------------------------------------------------------------------------------- /算法设计/imgs/轨道设计图.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beupgo/fe-material/HEAD/算法设计/imgs/轨道设计图.jpg -------------------------------------------------------------------------------- /算法设计/imgs/播放器效果图.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beupgo/fe-material/HEAD/算法设计/imgs/播放器效果图.jpg -------------------------------------------------------------------------------- /源码系列/React/index.md: -------------------------------------------------------------------------------- 1 | ## React源码分析 2 | 3 | - [精简版](https://github.com/lanjingling0510/blog/issues/1) 4 | - [完整版](https://icepy.gitbooks.io/react/content/di_yi_zhang_ff1a_mu_lu_yi_ji_wen_jian_fen_xi.html) 5 | -------------------------------------------------------------------------------- /源码系列/Vue/index.md: -------------------------------------------------------------------------------- 1 | ## Vue源码分析 2 | 3 | - [入门版](https://github.com/answershuto/learnVue) 4 | - [完整版 v2.2.6](https://github.com/liutao/vue2.0-source) 5 | - [源码注释版](https://github.com/Ma63d/vue-analysis) 6 | - [图文版](http://jiongks.name/blog/vue-code-review/) 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 快乐动起来 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## fe-material 2 | 3 | 整理最有趣的前端技术教程及文档，欢迎大家都来补充让更多的多学找到学习一手好资料 4 | 5 | ### 前端工具 6 | 7 | - Git 8 | 1. [入门篇](https://backlog.com/git-tutorial/cn/intro/intro1_1.html) 9 | 2. [高级篇](https://backlog.com/git-tutorial/cn/stepup/stepup1_1.html) 10 | 3. [索引篇](https://backlog.com/git-tutorial/cn/reference/) 11 | 4. [原版](https://www.atlassian.com/git/tutorials/merging-vs-rebasing) 12 | 5. [原版翻译](https://github.com/geeeeeeeeek/git-recipes/wiki/1.1-%E6%9E%9C%E5%A3%B3%E4%B8%AD%E7%9A%84-Git) 13 | 6. [Git 的奇技淫巧](https://github.com/cucygh/git-tips) 14 | - Shell 15 | 1. [shell简明教程](https://www.zhaixue.cc/shell/shell-intro.html) 16 | 2. [linux 150 常用命令](https://cloud.tencent.com/developer/article/1540697) 17 | - Webpack 18 | 1. [文档](https://doc.webpack-china.org/concepts/) 19 | 2. [插件](https://doc.webpack-china.org/plugins/) 20 | - Paracle 21 | 1. [文档](https://parceljs.org/) 22 | - Gulp 23 | 1. [文档](https://www.gulpjs.com.cn/) 24 | - Grunt 25 | 1. [文档](http://www.gruntjs.net/) 26 | - Rollup 27 | 1. [文档](http://www.rollupjs.com/) 28 | - Browserify 29 | 1. [官方文档](http://browserify.org/) 30 | - Lerna 31 | 1. [官方文档](https://github.com/lerna/lerna) 32 | 2. [入门介绍](https://www.jianshu.com/p/63ec67445b0f) 33 | - 代码质量 34 | 1. [vue eslint](https://mysticatea.github.io/vue-eslint-demo/) 35 | 2. [htmlhint](https://htmlhint.io/) 36 | 3. [stylelint](https://stylelint.io/) 37 | - http-server 38 | 1. [静态服务器](https://www.npmjs.com/package/http-server) 39 | - ast 40 | 1. [业界 AST 库](https://github.com/cucygh/AST-) 41 | - 自动化测试 42 | 1. [jest](https://jestjs.io/zh-Hans/) 43 | - Docker 44 | 1. [发布 Node 程序](https://nodejs.org/zh-cn/docs/guides/nodejs-docker-webapp/) 45 | 2. [Docker 从入门到实践](https://yeasy.gitbooks.io/docker_practice/introduction/why.html) 46 | - 逆向工程 47 | 1. [压缩逆向恢复](http://www.jsnice.org/) 48 | - SVG 49 | 1. [SVG入门](https://flaviocopes.com/svg/) 50 | 2. [SVG基础教程](https://github.com/brucewar/svg-tutorial) 51 | 3. [SVG描边动画](https://juejin.cn/post/6844903906061860878) 52 | 53 | ### 前端框架 54 | 55 | - Vue 56 | 1. [基本教程](https://cn.vuejs.org/) 57 | 2. [路由](https://router.vuejs.org/) 58 | 3. [Vuex](https://vuex.vuejs.org/) 59 | 4. [SSR](https://ssr.vuejs.org/) 60 | 5. [Nuxt.js](https://zh.nuxtjs.org/) 61 | 6. [Vue 源码分析·免费](http://hcysun.me/vue-design/) 62 | - React 63 | 1. [文档](https://doc.react-china.org/) 64 | 2. [Redux 官方文档](http://cn.redux.js.org/) 65 | 3. [Redux 中文社区](http://www.redux.org.cn/) 66 | 4. [Next.js](https://zeit.co/blog/next4) 67 | 5. [Next.js 中文文档](http://nextjs.frontendx.cn/docs) 68 | 6. [Next.js 掘金博客](https://juejin.im/entry/59791d8f6fb9a03c391b557e) 69 | - Angular 70 | 1. [官方文档](https://angular.cn/) 71 | - Riot 72 | 1. [文档](http://riotjs.com/v2/zh/) 73 | - Koa 74 | > Express 升级后的框架，抽象设计更彻底，强大、自由、灵活 75 | 1. [文档](https://koa.bootcss.com/) 76 | 2. [Koa2 进阶学习笔记](https://chenshenhai.github.io/koa2-note/) 77 | 3. [基于 Koa2 搭建 Node.js 实战项目教程](https://github.com/ikcamp/koa2-tutorial) 78 | - Express 79 | > Node.js 开发最容易上手的业务应用开发框架 80 | 1. [文档](http://expressjs.com/zh-cn/) 81 | - MobX 82 | > 简单、可扩展的状态管理 83 | 1. [教程](http://cn.mobx.js.org/) 84 | - RxJS 85 | > 函数式编程最经典的框架 86 | 1. [中文文档](http://cn.rx.js.org/) 87 | - Three.js 88 | > 3D 和游戏必用的 JS 库 89 | 1. [官方网站](https://threejs.org/) 90 | 2. [基础入门-中文网](http://www.hewebgl.com/article/articledir/1) 91 | 3. [中文文档+示例](https://teakki.com/p/58a3ef1bf0d40775548c908f) 92 | - 数据图表 93 | > 数据图表中最强的类库 94 | 1. [D3 官方网站](https://d3js.org/) 95 |    2. [中文文档](https://github.com/xswei/d3js_doc) 96 | 2. [network 图表](http://visjs.org/) 97 | 3. [MapBox](https://www.mapbox.com/) 98 | - HTML5 动画库 99 | > 标准动画库和 SVG 动画库 100 | 1. [Raphael](http://dmitrybaranovskiy.github.io/raphael/) 101 | 2. [segment](http://lmgonzalves.github.io/segment/) 102 | 3. [GSAP](https://greensock.com/gsap) 103 | 4. [anime](http://animejs.com/) 104 | 5. [免费 SVG 图标](https://icomoon.io) 105 | 6. [跨端动画方案](https://svga.io/) 106 | 7. [Canvas 礼花效果](https://www.kirilv.com/canvas-confetti/) 107 | - 视频播放器 108 | > 好用的视频播放器 109 | 1. [xgplayer](https://github.com/bytedance/xgplayer) 110 | 2. [video.js](https://github.com/videojs/video.js) 111 | 3. [mediaelement](https://github.com/mediaelement/mediaelement) 112 | 113 | ### 前端技术 114 | 115 | - 内存泄漏 116 | 1. [JavaScript 内存泄露和 CSS 优化](https://github.com/cucygh/js-leakage-patterns?organization=cucygh&organization=cucygh) 117 | 2. [内存泄漏](https://developers.google.com/web/tools/chrome-devtools/memory-problems/?hl=zh-cn) 118 | 119 | ### CSS 教程 120 | 121 | - Less 122 | 1. [文档](http://less.bootcss.com/) 123 | - Sass 124 | 1. [文档](http://sass.bootcss.com/docs/sass-reference/) 125 | - CSS3 布局 126 | 1. [学习布局](http://zh.learnlayout.com/) 127 | 128 | ### JavaScript 教程 129 | 130 | - ES6 131 | 1. [权威教程:ECMAScript 6](http://es6-features.org/#Constants) 132 | 2. [入门教程](http://es6.ruanyifeng.com/) 133 | - Node 134 | 1. [官方网站](http://nodejs.cn/) 135 | 2. [官方教程](http://nodejs.cn/api/) 136 | - ES3 137 | 1. [入门教程](http://www.runoob.com/js/js-tutorial.html) 138 | - ES5 139 | 1. [ES5 新特性与 ES3 的对比](http://www.hahack.com/wiki/javascript-es5.html#es5-%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7) 140 | 2. [ES5 新特性博客](http://pij.robinqu.me/JavaScript_Core/ECMAScript/es5.html) 141 | 142 | ### 服务端教程 143 | 144 | - [Nginx 入门](http://cnt1992.xyz/2016/03/18/simple-intro-to-nginx/) 145 | - [Nginx 入门与精通（高级）](http://tengine.taobao.org/book/#) 146 | - [Nginx 配置大全](https://nginxconfig.io/) 147 | - [Dgraph](https://dgraph.io/) 148 | - [GraphQL](https://graphql.cn/) 149 | 150 | ### 好玩的网站 151 | 152 | - [刷题的酷站：leetcode](https://leetcode.com/) 153 | - [各种精美的微型前端库](http://microjs.com/) 154 | - [代码高亮](https://c7sky.com/syntax-highlighting-with-prismjs.html) 155 | 156 | ### 开源图标 157 | 158 | - [NPM 图标](https://nodei.co/) 159 | - [小图标](https://shields.io/) 160 | - [免费 SVG](https://icomoon.io/app/#/select) 161 | - [免费 矢量图](http://www.iconfont.cn/) 162 | 163 | ### 视频技术 164 | 165 | - [ flv 转 fmp4 ](https://blog.csdn.net/g332065255/article/details/71158863) 166 | - [ MSE ](https://www.w3.org/TR/media-source/) 167 | - [ webassembly ](https://webassembly.org/) 168 | - [asm.js](http://asmjs.org/) 169 | 170 | ### 动画技术 171 | 172 | - [lottie](http://airbnb.io/lottie/) 173 | - [贝塞尔曲线扫盲](https://blog.csdn.net/VickyTsai/article/details/90044515) 174 | - [帧补偿工具](https://gka.js.org/#/?id=%E5%AE%89%E8%A3%85) 175 | - [简单的动画库](http://dynamicsjs.com/) 176 | - [webassembly](https://webassembly.org/) 177 | - [asm.js](http://asmjs.org/) 178 | - [easing functions](https://easings.net/) 179 | - [贝塞尔曲线演示](https://cubic-bezier.com/) 180 | 181 | ### 游戏方向 182 | 183 | - [3D 编辑器](https://docs.blender.org/manual/zh-hans/dev/getting_started/index.html) 184 | - [cocos2d 引擎](http://www.cocos.com/docs/native/) 185 | - [three.js](https://threejs.org/) 186 | - [unity3d](https://unity3d.com/cn) 187 | - [webassembly](https://webassembly.org/) 188 | - [asm.js](http://asmjs.org/) 189 | - [Babylon.js](https://github.com/BabylonJS/Babylon.js) 190 | 191 | ### 硬件方向 192 | 193 | - [Robotics & IoT Platform](http://johnny-five.io/) 194 | 195 | ### 神秘工具 196 | 197 | - [表格工具](https://help.gnome.org/users/gnumeric/stable/gnumeric.html#chapter-welcome) 198 | - [shelljs](https://github.com/shelljs/shelljs) 199 | - [ip 离线库](https://www.ipip.net/) 200 | - [录屏转 gif 工具](https://getkap.co/) 201 | - [图片服务](https://picsum.photos/) 202 | - [免费图标](https://www.easyicon.net/) 203 | - [在线转换字体](https://transfonter.org/) 204 | - [数据转图片](https://quickchart.io/) 205 | - [SVG Edit](https://www.svgviewer.dev/) 206 | - [SVG visualizer](https://svg-path-visualizer.netlify.app/) 207 | 208 | ### 文档&文章 209 | 210 | - [会议 PPT](https://myslide.cn/) 211 | - [技术文档](https://devdocs.io/) 212 | 213 | ### 数据 214 | 215 | - [全国 POI 信息数据库](http://www.poilist.cn/) 216 | --------------------------------------------------------------------------------