一個前端的2018總結，2019展望 | 掘金年度徵文

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集前端視頻，換你一個贊和留言不過度吧。