2018年总结：

我是技术胖，我来参加征文了，其实我在2018年年底时，写过一篇总结文章了，看来是写早了。

开篇改版大江大河里的一句话：

作一个程序员12年了，我一直把技术当成理想，这理想是我心里的光，我愿意做一个失志前行的逐梦人，穷山距海，不可阻挡。不尽狂澜走沧海，一拳天与压潮头。我赶上了IT最好的时代，我不想辜负这个时代。胖子，继续加油。

2018年已经过去15天了，这是让人神往和欣喜的一年。既然是写给别人看的，就要有价值，所以本文不会唧唧歪歪说自己的收获，而是给别人带来了一些帮助的总结。

在这一年里，我录制了160多集视频。视频一年播放量260万（都是免费的，当然播放量高）我帮助了200多位前端爱好者走上了工作岗位（跟我反馈的，我相信还有没反馈的），帮助13位小伙伴走进了BAT这样的一线大厂（当然他们能进入，是自己的努力，我只是提供了些视频和内推机会）。

我在这一年里也遭到了很多利益熏心的教育机构的指责和唾骂：不专业，没水平，英语发音不准，有大阴谋....无所谓，因为相信善人有善报。

还有值得说的是，就在写这篇文章的时候，我刚出院不到10个小时，这次生病我经历了很多第一次：第一次接受抢救，第一次手术，第一次一晚上作四次胃镜（每次都生不如死，很痛苦），第一次感受有那么多医生在为我的生命而努力（价格也是不菲），第一次跟老婆嘱咐后世（把自己支付宝，微信里的小金库都转给了老婆）并简单写了一份遗嘱。

所以劝诫所有的程序小伙伴多注意身体，多运动，身体才是我们写代码的本钱。

我的288集免费视频

我把2018年所有我录制的视频发布到这里，希望可以帮助大家（其实之前发了，但是掘金的领导说让我重新写，才能参加活动）。在上次发的基础上，我又增加了20多集的Flutter实例视频。希望大家给我一个赞和评论。视频持续更新，每周三集免费视频教程。

我不是讲师，我还在一线写代码，视频都是晚上下班后和早上4点30起来录制的。站在代码一线，才知道程序员最需要的知识。

Flutter免费视频教程

1. 课程说明，有用的废话: jspang.com/post/flutte…

2. 认识一下Flutter : jspang.com/post/flutte…

3. Flutter开发环境搭建Windows版: jspang.com/post/flutte…

4. 安装AVD虚拟机 Flutter跑起来 :jspang.com/post/flutte…

5. VSCode下如何玩转Flutter :jspang.com/post/flutte…

6. 写一个HelloWorld程序: jspang.com/post/flutte…

7. Text Widget 文本组件的使用:jspang.com/post/flutte…

8. Container容器组件的使用1:jspang.com/post/flutte…

9. Container容器组件的使用2:jspang.com/post/flutte…

10. Image图片组件的使用: jspang.com/post/flutte…

11. ListView 列表组件简介: jspang.com/post/flutte…

12. 横向列表的使用：jspang.com/post/flutte…

13. 动态列表的使用:jspang.com/post/flutte…

14. GridView网格列表组件: jspang.com/post/flutte…

15. 水平布局Row的使用:jspang.com/post/flutte…

16. 垂直布局Column组件：jspang.com/post/flutte…

17. Stack层叠布局: jspang.com/post/flutte…

18. Stack的Positioned属性:jspang.com/post/flutte…

19. 卡片组件布局:jspang.com/post/flutte…

20. 一般页面导航和返回:jspang.com/post/flutte…

21. 导航参数的传递和接收（1）:jspang.com/post/flutte…

22. 导航参数的传递和接收（2）:jspang.com/post/flutte…

23. 页面跳转并返回数据:jspang.com/post/flutte…

24. 静态资源和项目图片的处理:jspang.com/post/flutte…

25. Flutter客户端打包:jspang.com/post/flutte…

26. 底部导航栏制作-1:jspang.com/post/flutte…

27. 底部导航栏制作-2:jspang.com/post/flutte…

28. 不规则底部工具栏制作-1:jspang.com/post/flutte…

29. 不规则底部工具栏制作-2:jspang.com/post/flutte…

30. 酷炫的路由动画-1:jspang.com/post/flutte…

31. 酷炫的路由动画-2:jspang.com/post/flutte…

32. 毛玻璃效果制作:jspang.com/post/flutte…

33. 保持页面状态:jspang.com/post/flutte…

34. 保持页面状态-2:jspang.com/post/flutte…

35. 一个不简单的搜索条-1:jspang.com/post/flutte…

36. 一个不简单的搜索条-2:jspang.com/post/flutte…

37. 流式布局 模拟添加照片效果:jspang.com/post/flutte…

38. 展开闭合案例:jspang.com/post/flutte…

39. 展开闭合列表案例:jspang.com/post/flutte…

40. 贝塞尔曲线切割:jspang.com/post/flutte…

41. 打开应用的闪屏动画案例:jspang.com/post/flutte…

42. 右滑返回上一页案例:jspang.com/post/flutte…

43. ToolTip控件实例:jspang.com/post/flutte…

44. Draggable控件实例:jspang.com/post/flutte…

Nginx免费视频教程

1. 初识Nginx和环境准备：jspang.com/post/nginx.…

2. Nginx的快速搭建：jspang.com/post/nginx.…

3. Nginx基本配置文件详讲:jspang.com/post/nginx.…

4. Nginx服务启动、停止、重启:jspang.com/post/nginx.…

5. 自定义错误页和访问设置:jspang.com/post/nginx.…

6. Nginx访问权限详讲:jspang.com/post/nginx.…

7. Nginx设置虚拟主机:jspang.com/post/nginx.…

8. Nginx使用域名设置虚拟主机:jspang.com/post/nginx.…

9. Nginx反向代理的设置:jspang.com/post/nginx.…

10. Nginx适配PC或移动设备：jspang.com/post/nginx.…

11. Nginx的Gzip压缩配置：jspang.com/post/nginx.…

TypeScript免费视频教程

1. 初识TypeScript:jspang.com/post/typesc…

2. 开发环境的安装: jspang.com/post/typesc…

3. 变量类型的那些事:jspang.com/post/typesc…

4. TypeScript的函数:jspang.com/post/typesc…

5. 三种函数的定义方式:jspang.com/post/typesc…

6. 函数中变量的作用域：jspang.com/post/typesc…

7. 引用类型-数组:jspang.com/post/typesc…

8. 引用类型-字符串：jspang.com/post/typesc…

9. 引用类型-日期对象:jspang.com/post/typesc…

10. 引用类型-正则表达式:jspang.com/post/typesc…

11. 面向对象编程-类的声明和使用:jspang.com/post/typesc…

12. 面向对象编程-修饰符:jspang.com/post/typesc…

13. 面向对象编程-继承和重写:jspang.com/post/typesc…

14. 面向对象编程-接口:jspang.com/post/typesc…

15. 面向对象编程-命名空间:jspang.com/post/typesc…

Vue2.x免费视频教程

1. 走起我的Vue2.0：jspang.com/post/vue2-1…

2. v-if v-else v-show 指令:jspang.com/post/vue2-1…

3. v-for指令 ：解决模板循环问题:jspang.com/post/vue2-1…

4. v-text & v-html:jspang.com/post/vue2-1…

5. v-on：绑定事件监听器:jspang.com/post/vue2-1…

6. v-model指令:jspang.com/post/vue2-1…

7. v-bind 指令:jspang.com/post/vue2-1…

8. 其他内部指令(v-pre & v-cloak & v-once):jspang.com/post/vue2-1…

9. Vue.directive 自定义指令:jspang.com/post/vue2-2…

10. Vue.extend构造器的延伸:jspang.com/post/vue2-2…

11. Vue.set全局操作：jspang.com/post/vue2-2…

12. Vue的生命周期（钩子函数）:jspang.com/post/vue2-2…

13. Template 制作模版:jspang.com/post/vue2-2…

14. Component 初识组件:jspang.com/post/vue2-2…

15. Component 组件props 属性设置:jspang.com/post/vue2-2…

16. Component 父子组件关系:jspang.com/post/vue2-2…

17. Component 标签:jspang.com/post/vue2-2…

18. propsData Option 全局扩展的数据传递:jspang.com/post/vue2-3…

19. computed Option 计算选项:jspang.com/post/vue2-3…

20. Methods Option 方法选项:jspang.com/post/vue2-3…

21. Watch 选项 监控数据:jspang.com/post/vue2-3…

22. Mixins 混入选项操作:jspang.com/post/vue2-3…

23. Extends Option 扩展选项:jspang.com/post/vue2-3…

24. 实例入门-实例属性: jspang.com/post/vue2-4…

25. 实例方法:jspang.com/post/vue2-4…

26. 实例事件:jspang.com/post/vue2-4…

27. 内置组件 -slot讲解:jspang.com/post/vue2-4…

Vue-cli 免费视频教程

1. Vue-cli，开始吧骚年：jspang.com/post/vue-cl…

2. Vue-cli项目结构讲解：jspang.com/post/vue-cl…

3. 解读Vue-cli的模板： jspang.com/post/vue-cl…

Vue-router免费视频教程

1. Vue-router入门:jspang.com/post/vue-ro…

2. vue-router配置子路由：jspang.com/post/vue-ro…

3. vue-router如何参数传递：jspang.com/post/vue-ro…

4. 单页面多路由区域操作：jspang.com/post/vue-ro…

5. vue-router 利用url传递参数：jspang.com/post/vue-ro…

6. vue-router 的重定向-redirect:jspang.com/post/vue-ro…

7. alias别名的使用: jspang.com/post/vue-ro…

8. 路由的过渡动画:jspang.com/post/vue-ro…

9. mode的设置和404页面的处理:jspang.com/post/vue-ro…

10. 路由中的钩子:jspang.com/post/vue-ro…

vuex免费视频教程

1. 初出茅庐 来个小Demo：jspang.com/post/vuex.h…

2. state访问状态对象：jspang.com/post/vuex.h…

3. Mutations修改状态:jspang.com/post/vuex.h…

4. getters计算过滤操作:jspang.com/post/vuex.h…

5. actions异步修改状态:jspang.com/post/vuex.h…

6. module模块组:jspang.com/post/vuex.h…

Vue免费实战视频-快餐店收银系统

1. Mockplus把我们的想法画出来：jspang.com/post/vuedem…

2. Vue-cli搭建开发环境:jspang.com/post/vuedem…

3. 搞定项目图标Iconfont：jspang.com/post/vuedem…

4. 编写独立的侧边栏导航组件 : jspang.com/post/vuedem…

5. 开启Element封印:jspang.com/post/vuedem…

6. 利用Element快速布局（1）:jspang.com/post/vuedem…

7. 利用Element快速布局（2）:jspang.com/post/vuedem…

8. Axios从远程读取数据: jspang.com/post/vuedem…

9. 订单模块制作 核心功能-1:jspang.com/post/vuedem…

10. 订单模块制作 核心功能-2:jspang.com/post/vuedem…

11. 项目打包和上线:jspang.com/post/vuedem…

WEEX免费视频教程

1. 课程介绍： jspang.com/post/weex.h…

2. 开发环境安装(1)：jspang.com/post/weex.h…

3. 开发环境安装(2):jspang.com/post/weex.h…

4. weex常用命令和热更新:jspang.com/post/weex.h…

5. Android Studio 开发设置:jspang.com/post/weex.h…

6. weex和vue的爱恨情仇:jspang.com/post/weex.h…

7. 自定义组件和Text组件:jspang.com/post/weex.h…

8. Input组件和初识内建模块:jspang.com/post/weex.h…

9. Image和video组件：jspang.com/post/weex.h…

10. 一起作个列表出来:jspang.com/post/weex.h…

11. 从后端服务器上获取数据:jspang.com/post/weex.h…

12. 作轮播图片效果:jspang.com/post/weex.h…

13. a组件和web组件：jspang.com/post/weex.h…

14. 通用事件和动画: jspang.com/post/weex.h…

15. 教会你自学weex：jspang.com/post/weex.h…

16. Navigator和webview模块:jspang.com/post/weex.h…

17. vue-router的使用: jspang.com/post/weex.h…

Nuxt.js免费视频教程 开启SSR渲染

1. 课程介绍：jspang.com/post/Nuxt.j…

2. Nuxt环境搭建和Hello World:jspang.com/post/Nuxt.j…

3. Nuxt目录结构详讲:jspang.com/post/Nuxt.j…

4. Nuxt常用配置项: jspang.com/post/Nuxt.j…

5. Nuxt的路由配置和参数传递:jspang.com/post/Nuxt.j…

6. Nuxt的动态路由和参数校验:jspang.com/post/Nuxt.j…

7. Nuxt的路由动画效果:jspang.com/post/Nuxt.j…

8. Nuxt的默认模版和默认布局:jspang.com/post/Nuxt.j…

9. Nuxt的错误页面和个性meta设置:jspang.com/post/Nuxt.j…

10. asyncData方法获取数据:jspang.com/post/Nuxt.j…

11. Nuxt的路由动画效果:jspang.com/post/Nuxt.j…

React免费视频教程-入门和组件

1. React课程介绍:jspang.com/post/react.…

2. 环境搭建和HelloWorld程序:jspang.com/post/react.…

3. 初识JSX语法:jspang.com/post/react.…

4. 进阶JSX语法:jspang.com/post/react.…

5. React组件：state成员:jspang.com/post/react.…

6. React组件：props和render成员:jspang.com/post/react.…

7. React组件：生命周期：jspang.com/post/react.…

8. React组件小实例-必做练习:jspang.com/post/react.…

9. React组件：this.props.children:jspang.com/post/react.…

10. React组件：props属性验证:jspang.com/post/react.…

11. React组件：获取真实DOM节点:jspang.com/post/react.…

React免费视频教程-表单的应用

1. 表单的事件响应和bind复用 : jspang.com/post/react-…

2. React表单name复用:jspang.com/post/react-…

3. React表单-可控组件:jspang.com/post/react-…

4. React表单-不可控组件:jspang.com/post/react-…

React项目构建和路由 免费视频教程

1. 构建：create-react-app 快速脚手架 : jspang.com/post/react-…

2. 构建：generator-react-webpack: jspang.com/post/react-…

3. 构建：webpack一步一步构建01:jspang.com/post/react-…

4. 构建：webpack一步一步构建02:jspang.com/post/react-…

5. 路由：Hello React路由:jspang.com/post/react-…

6. 路由：NavLink中常用选项:jspang.com/post/react-…

7. 路由：404设置和跳转设置:jspang.com/post/react-…

8. 路由：通过路由传值的方法:jspang.com/post/react-…

9. 路由：Router中的属性和路由模式:jspang.com/post/react-…

10. 路由：prompt用法讲解:jspang.com/post/react-…

Koa2免费视频教程

1. Koa开发环境搭建:jspang.com/post/koa2.h…

2. async/await的使用方法：jspang.com/post/koa2.h…

3. Get请求的接收:jspang.com/post/koa2.h…

4. POST请求如何接收（1）:jspang.com/post/koa2.h…

5. POST请求如何接收（2）:jspang.com/post/koa2.h…

6. koa-bodyparser中间件：jspang.com/post/koa2.h…

7. Koa2原生路由实现：jspang.com/post/koa2.h…

8. Koa-router中间件（1）入门:jspang.com/post/koa2.h…

9. Koa-router中间件（2）层级:jspang.com/post/koa2.h…

10. Koa-router中间件（3）参数:jspang.com/post/koa2.h…

11. Koa2中使用cookie :jspang.com/post/koa2.h…

12. Koa2的模板初识（ejs）:jspang.com/post/koa2.h…

13. koa-static静态资源中间件：jspang.com/post/koa2.h…

MongoDB免费视频教程

1. 认识和安装MongoDB：jspang.com/post/mongod…

2. Mongo基本命令-1:jspang.com/post/mongod…

3. Mongo基本命令-2:jspang.com/post/mongod…

4. 用js文件写mongo命令：jspang.com/post/mongod…

5. 批量插入的正确方法:jspang.com/post/mongod…

6. 修改：Update常见错误:jspang.com/post/mongod…

7. 修改：初识update修改器:jspang.com/post/mongod…

8. 修改：update数组修改器jspang.com/post/mongod…

9. 修改：状态返回与安全:jspang.com/post/mongod…

10. 查询：find的不等修饰符:jspang.com/post/mongod…

11. 查询：find的多条件查询:jspang.com/post/mongod…

12. 查询：find的数组查询:jspang.com/post/mongod…

13. 查询：find的参数使用方法:jspang.com/post/mongod…

14. 查询：find如何在js文本中使用:jspang.com/post/mongod…

15. 索引:构造百万级数据:jspang.com/post/mongod…

16. 索引：索引入门：jspang.com/post/mongod…

17. 索引：复合索引:jspang.com/post/mongod…

18. 索引：全文索引:jspang.com/post/mongod…

19. 管理:用户的创建、删除与修改:jspang.com/post/mongod…

20. 管理：备份和还原:jspang.com/post/mongod…

21. 管理：图形界面管理（完结）:jspang.com/post/mongod…

ES6免费视频教程

1. ES6的开发环境搭建：jspang.com/post/es6.ht…

2. 新的声明方式:jspang.com/post/es6.ht…

3. 变量的解构赋值:jspang.com/post/es6.ht…

4. 扩展运算符和rest运算符:jspang.com/post/es6.ht…

5. 字符串模版:jspang.com/post/es6.ht…

6. ES6数字操作:jspang.com/post/es6.ht…

7. ES6中新增的数组知识（1）:jspang.com/post/es6.ht…

8. ES6中新增的数组知识（2）:jspang.com/post/es6.ht…

9. ES6中的箭头函数和扩展:jspang.com/post/es6.ht…

10. ES6中的函数和数组补漏:jspang.com/post/es6.ht…

11. ES6中对象:jspang.com/post/es6.ht…

12. Symbol在对象中的作用:jspang.com/post/es6.ht…

13. Set和WeakSet数据结构:jspang.com/post/es6.ht…

14. map数据结构:jspang.com/post/es6.ht…

15. 用Proxy进行预处理:jspang.com/post/es6.ht…

16. promise对象的使用:jspang.com/post/es6.ht…

17. class类的使用:jspang.com/post/es6.ht…

18. 模块化操作:jspang.com/post/es6.ht…

CocosCreator从基础到实战

1. 简介和HelloWorld:jspang.com/post/cocosC…

2. 软件界面介绍和跳动的小球:jspang.com/post/cocosC…

3. Scene介绍和基本操作:jspang.com/post/cocosC…

4. 玩家输入事件监听: jspang.com/post/cocosC…

5. Prefab和计时器:jspang.com/post/cocosC…

6. 实战-游戏简介和项目分析:jspang.com/post/cocosC…

7. 实战-UI界面布局:jspang.com/post/cocosC…

8. 实战-主角的动作监听和跳动:jspang.com/post/cocosC…

9. 实战-随机生成地刺:jspang.com/post/cocosC…

10. 实战-点击生成地刺和移动:jspang.com/post/cocosC…

11. 实战-碰撞检测:jspang.com/post/cocosC…

12. 实战-倒计时和分数增加:jspang.com/post/cocosC…

13. 实战-欢迎界面代码编写:jspang.com/post/cocosC…

14. 实战-添加音效:jspang.com/post/cocosC…

15. 实战-发布游戏:jspang.com/post/cocosC…

Fabricjs 免费视频教程

1. 初识简单而且强大的Fabric.js库：http://jspang.com/post/fabricjs.html#toc-e13

2. 在Canvas上画简单的图形:jspang.com/post/fabric…

3. 在Canvas上插入图片并设置旋转属性:jspang.com/post/fabric…

4. Fabric.js用路径画不规则图形:jspang.com/post/fabric…

5. Fabric.js的动画设置：jspang.com/post/fabric…

6. Fabric.js的图像过滤器:jspang.com/post/fabric…

7. Fabric.js的颜色模式和相互转换:jspang.com/post/fabric…

8. Fabric.js的渐变填充:jspang.com/post/fabric…

9. Fabric.js的文本设置:jspang.com/post/fabric…

10. Fabric.js的事件系统:jspang.com/post/fabric…

CSS3免费视频

1. 嫁汉嫁汉穿衣吃饭：jspang.com/post/CSS3.h…

2. CSS3新特性简介和浏览器支持情况:jspang.com/post/CSS3.h…

3. CSS3伪类选择器1:jspang.com/post/CSS3.h…

4. CSS3伪类选择器2结构伪类选择器:jspang.com/post/CSS3.h…

5. CSS3伪元素:jspang.com/post/CSS3.h…

6. CSS3用border-radius画圆形:jspang.com/post/CSS3.h…

7. CSS3画三角形和对话框:jspang.com/post/CSS3.h…

8. CSS3画菱形和平行四边形:jspang.com/post/CSS3.h…

9. CSS3画菱形和平行四边形:jspang.com/post/CSS3.h…

10. CSS3 画五角星和六角星：jspang.com/post/CSS3.h…

11. CSS3画心形和蛋形:jspang.com/post/CSS3.h…

12. CSS3画太极阴阳图:jspang.com/post/CSS3.h…

13. CSS3制作透明背景层:jspang.com/post/CSS3.h…

14. CSS3的颜色模式(1)：jspang.com/post/CSS3.h…

15. CSS3的颜色模式（2）-实例仿天猫商品展示效果:jspang.com/post/CSS3.h…

16. CSS3线性渐变:jspang.com/post/CSS3.h…

17. CSS3径向渐变 radial-gradient:jspang.com/post/CSS3.h…

18. CSS3重复性渐变:jspang.com/post/CSS3.h…

19. CSS3盒子阴影效果box-shadow:jspang.com/post/CSS3.h…

20. CSS3制作缓慢变长的方形（transition特效）：jspang.com/post/CSS3.h…

21. CSS3过渡的timing-function属性详解:jspang.com/post/CSS3.h…

22. CSS3仿天猫专题过渡效果实例:jspang.com/post/CSS3.h…

23. CSS3仿天猫类别过渡效果制作:jspang.com/post/CSS3.h…

24. CSS3动画中的@keyframes关键帧讲解:jspang.com/post/CSS3.h…

25. CSS3动画animation复合属性讲解:jspang.com/post/CSS3.h…

26. CSS3动画综合实例制作-内容加载loading动画实现:jspang.com/post/CSS3.h…

27. CSS3 Loading动画效果实例2:jspang.com/post/CSS3.h…

28. CSS3制作发光字，立体字，苹果字体:jspang.com/post/CSS3.h…

29. CSS3 用text-overflow解决文字排版问题:jspang.com/post/CSS3.h…

30. CSS3 新的字体单位rem-大结局:jspang.com/post/CSS3.h…

2019年展望

2018年出现了很多新技术，特别是Flutter的出现，我个人觉的每个前端小伙伴都应该学习一下。

2019年我努力保持每周更新三集免费视频，但是为了维持博客服务器费用和像买个苹果的笔记本，也会出一套收费视频。

我2019年的计划：

1. 重新翻看一遍犀牛JS神书，巩固JS基础知识。
2. 开始学写日程笔记，每天一页那种。
3. 锻炼身体，减轻体重到180斤。
4. 每周录制3集视频教程。
5. 学习服务器知识，向全栈继续进发。
6. 重构自己的博客网站。
7. 还清房贷，并带着全家出去旅游一次。

其实每年的展望都很难达成，但是总是要立一下，万一实现了那。

最后希望

希望小伙伴们都能给一个赞，留一个言，万一我获得第一名了那。写这篇文章就是想获得个奖品，特别是印着掘金logo的东西。钱我舍了，虚荣心总该满足一下吧。288集前端视频，换你一个赞和留言不过分吧。