2018年總結:
我是技術胖,我來參加徵文了,其實我在2018年年底時,寫過一篇總結文章了,看來是寫早了。
開篇改版大江大河裡的一句話:
作一個程式設計師12年了,我一直把技術當成理想,這理想是我心裡的光,我願意做一個失志前行的逐夢人,窮山距海,不可阻擋。不盡狂瀾走滄海,一拳天與壓潮頭。我趕上了IT最好的時代,我不想辜負這個時代。胖子,繼續加油。
2018年已經過去15天了,這是讓人神往和欣喜的一年。既然是寫給別人看的,就要有價值,所以本文不會唧唧歪歪說自己的收穫,而是給別人帶來了一些幫助的總結。
在這一年裡,我錄製了160多集視訊。視訊一年播放量260萬(都是免費的,當然播放量高)我幫助了200多位前端愛好者走上了工作崗位(跟我反饋的,我相信還有沒反饋的),幫助13位小夥伴走進了BAT這樣的一線大廠(當然他們能進入,是自己的努力,我只是提供了些視訊和內推機會)。
我在這一年裡也遭到了很多利益薰心的教育機構的指責和唾罵:不專業,沒水平,英語發音不準,有大陰謀....無所謂,因為相信善人有善報。
還有值得說的是,就在寫這篇文章的時候,我剛出院不到10個小時,這次生病我經歷了很多第一次:第一次接受搶救,第一次手術,第一次一晚上作四次胃鏡(每次都生不如死,很痛苦),第一次感受有那麼多醫生在為我的生命而努力(價格也是不菲),第一次跟老婆囑咐後世(把自己支付寶,微信裡的小金庫都轉給了老婆)並簡單寫了一份遺囑。
所以勸誡所有的程式小夥伴多注意身體,多運動,身體才是我們寫程式碼的本錢。
我的288集免費視訊
我把2018年所有我錄製的視訊釋出到這裡,希望可以幫助大家(其實之前發了,但是掘金的領導說讓我重新寫,才能參加活動)。在上次發的基礎上,我又增加了20多集的Flutter例項視訊。希望大家給我一個贊和評論。視訊持續更新,每週三集免費視訊教程。
我不是講師,我還在一線寫程式碼,視訊都是晚上下班後和早上4點30起來錄製的。站在程式碼一線,才知道程式設計師最需要的知識。
Flutter免費視訊教程
-
課程說明,有用的廢話: jspang.com/post/flutte…
-
認識一下Flutter : jspang.com/post/flutte…
-
Flutter開發環境搭建Windows版: jspang.com/post/flutte…
-
安裝AVD虛擬機器 Flutter跑起來 :jspang.com/post/flutte…
-
VSCode下如何玩轉Flutter :jspang.com/post/flutte…
-
寫一個HelloWorld程式: jspang.com/post/flutte…
-
Text Widget 文字元件的使用:jspang.com/post/flutte…
-
Container容器元件的使用1:jspang.com/post/flutte…
-
Container容器元件的使用2:jspang.com/post/flutte…
-
Image圖片元件的使用: jspang.com/post/flutte…
-
ListView 列表元件簡介: jspang.com/post/flutte…
-
橫向列表的使用:jspang.com/post/flutte…
-
動態列表的使用:jspang.com/post/flutte…
-
GridView網格列表元件: jspang.com/post/flutte…
-
水平佈局Row的使用:jspang.com/post/flutte…
-
垂直佈局Column元件:jspang.com/post/flutte…
-
Stack層疊佈局: jspang.com/post/flutte…
-
Stack的Positioned屬性:jspang.com/post/flutte…
-
卡片元件佈局:jspang.com/post/flutte…
-
一般頁面導航和返回:jspang.com/post/flutte…
-
導航引數的傳遞和接收(1):jspang.com/post/flutte…
-
導航引數的傳遞和接收(2):jspang.com/post/flutte…
-
頁面跳轉並返回資料:jspang.com/post/flutte…
-
靜態資源和專案圖片的處理:jspang.com/post/flutte…
-
Flutter客戶端打包:jspang.com/post/flutte…
-
底部導航欄製作-1:jspang.com/post/flutte…
-
底部導航欄製作-2:jspang.com/post/flutte…
-
不規則底部工具欄製作-1:jspang.com/post/flutte…
-
不規則底部工具欄製作-2:jspang.com/post/flutte…
-
酷炫的路由動畫-1:jspang.com/post/flutte…
-
酷炫的路由動畫-2:jspang.com/post/flutte…
-
毛玻璃效果製作:jspang.com/post/flutte…
-
保持頁面狀態:jspang.com/post/flutte…
-
保持頁面狀態-2:jspang.com/post/flutte…
-
一個不簡單的搜尋條-1:jspang.com/post/flutte…
-
一個不簡單的搜尋條-2:jspang.com/post/flutte…
-
流式佈局 模擬新增照片效果:jspang.com/post/flutte…
-
展開閉合案例:jspang.com/post/flutte…
-
展開閉合列表案例:jspang.com/post/flutte…
-
貝塞爾曲線切割:jspang.com/post/flutte…
-
開啟應用的閃屏動畫案例:jspang.com/post/flutte…
-
右滑返回上一頁案例:jspang.com/post/flutte…
-
ToolTip控制元件例項:jspang.com/post/flutte…
-
Draggable控制元件例項:jspang.com/post/flutte…
Nginx免費視訊教程
-
初識Nginx和環境準備:jspang.com/post/nginx.…
-
Nginx的快速搭建:jspang.com/post/nginx.…
-
Nginx基本配置檔案詳講:jspang.com/post/nginx.…
-
Nginx服務啟動、停止、重啟:jspang.com/post/nginx.…
-
自定義錯誤頁和訪問設定:jspang.com/post/nginx.…
-
Nginx訪問許可權詳講:jspang.com/post/nginx.…
-
Nginx設定虛擬主機:jspang.com/post/nginx.…
-
Nginx使用域名設定虛擬主機:jspang.com/post/nginx.…
-
Nginx反向代理的設定:jspang.com/post/nginx.…
-
Nginx適配PC或移動裝置:jspang.com/post/nginx.…
-
Nginx的Gzip壓縮配置:jspang.com/post/nginx.…
TypeScript免費視訊教程
-
初識TypeScript:jspang.com/post/typesc…
-
開發環境的安裝: jspang.com/post/typesc…
-
變數型別的那些事:jspang.com/post/typesc…
-
TypeScript的函式:jspang.com/post/typesc…
-
三種函式的定義方式:jspang.com/post/typesc…
-
函式中變數的作用域:jspang.com/post/typesc…
-
引用型別-陣列:jspang.com/post/typesc…
-
引用型別-字串:jspang.com/post/typesc…
-
引用型別-日期物件:jspang.com/post/typesc…
-
引用型別-正規表示式:jspang.com/post/typesc…
-
物件導向程式設計-類的宣告和使用:jspang.com/post/typesc…
-
物件導向程式設計-修飾符:jspang.com/post/typesc…
-
物件導向程式設計-繼承和重寫:jspang.com/post/typesc…
-
物件導向程式設計-介面:jspang.com/post/typesc…
-
物件導向程式設計-名稱空間:jspang.com/post/typesc…
Vue2.x免費視訊教程
-
走起我的Vue2.0:jspang.com/post/vue2-1…
-
v-if v-else v-show 指令:jspang.com/post/vue2-1…
-
v-for指令 :解決模板迴圈問題:jspang.com/post/vue2-1…
-
v-text & v-html:jspang.com/post/vue2-1…
-
v-on:繫結事件監聽器:jspang.com/post/vue2-1…
-
v-model指令:jspang.com/post/vue2-1…
-
v-bind 指令:jspang.com/post/vue2-1…
-
其他內部指令(v-pre & v-cloak & v-once):jspang.com/post/vue2-1…
-
Vue.directive 自定義指令:jspang.com/post/vue2-2…
-
Vue.extend構造器的延伸:jspang.com/post/vue2-2…
-
Vue.set全域性操作:jspang.com/post/vue2-2…
-
Vue的生命週期(鉤子函式):jspang.com/post/vue2-2…
-
Template 製作模版:jspang.com/post/vue2-2…
-
Component 初識元件:jspang.com/post/vue2-2…
-
Component 元件props 屬性設定:jspang.com/post/vue2-2…
-
Component 父子元件關係:jspang.com/post/vue2-2…
-
Component 標籤:jspang.com/post/vue2-2…
-
propsData Option 全域性擴充套件的資料傳遞:jspang.com/post/vue2-3…
-
computed Option 計算選項:jspang.com/post/vue2-3…
-
Methods Option 方法選項:jspang.com/post/vue2-3…
-
Watch 選項 監控資料:jspang.com/post/vue2-3…
-
Mixins 混入選項操作:jspang.com/post/vue2-3…
-
Extends Option 擴充套件選項:jspang.com/post/vue2-3…
-
例項入門-例項屬性: jspang.com/post/vue2-4…
-
內建元件 -slot講解:jspang.com/post/vue2-4…
Vue-cli 免費視訊教程
-
Vue-cli,開始吧騷年:jspang.com/post/vue-cl…
-
Vue-cli專案結構講解:jspang.com/post/vue-cl…
-
解讀Vue-cli的模板: jspang.com/post/vue-cl…
Vue-router免費視訊教程
-
Vue-router入門:jspang.com/post/vue-ro…
-
vue-router配置子路由:jspang.com/post/vue-ro…
-
vue-router如何引數傳遞:jspang.com/post/vue-ro…
-
單頁面多路由區域操作:jspang.com/post/vue-ro…
-
vue-router 利用url傳遞引數:jspang.com/post/vue-ro…
-
vue-router 的重定向-redirect:jspang.com/post/vue-ro…
-
alias別名的使用: jspang.com/post/vue-ro…
-
路由的過渡動畫:jspang.com/post/vue-ro…
-
mode的設定和404頁面的處理:jspang.com/post/vue-ro…
-
路由中的鉤子:jspang.com/post/vue-ro…
vuex免費視訊教程
-
初出茅廬 來個小Demo:jspang.com/post/vuex.h…
-
state訪問狀態物件:jspang.com/post/vuex.h…
-
Mutations修改狀態:jspang.com/post/vuex.h…
-
getters計算過濾操作:jspang.com/post/vuex.h…
-
actions非同步修改狀態:jspang.com/post/vuex.h…
-
module模組組:jspang.com/post/vuex.h…
Vue免費實戰視訊-快餐店收銀系統
-
Mockplus把我們的想法畫出來:jspang.com/post/vuedem…
-
Vue-cli搭建開發環境:jspang.com/post/vuedem…
-
搞定專案圖示Iconfont:jspang.com/post/vuedem…
-
編寫獨立的側邊欄導航元件 : jspang.com/post/vuedem…
-
開啟Element封印:jspang.com/post/vuedem…
-
利用Element快速佈局(1):jspang.com/post/vuedem…
-
利用Element快速佈局(2):jspang.com/post/vuedem…
-
Axios從遠端讀取資料: jspang.com/post/vuedem…
-
訂單模組製作 核心功能-1:jspang.com/post/vuedem…
-
訂單模組製作 核心功能-2:jspang.com/post/vuedem…
-
專案打包和上線:jspang.com/post/vuedem…
WEEX免費視訊教程
-
課程介紹: jspang.com/post/weex.h…
-
開發環境安裝(1):jspang.com/post/weex.h…
-
開發環境安裝(2):jspang.com/post/weex.h…
-
weex常用命令和熱更新:jspang.com/post/weex.h…
-
Android Studio 開發設定:jspang.com/post/weex.h…
-
weex和vue的愛恨情仇:jspang.com/post/weex.h…
-
自定義元件和Text元件:jspang.com/post/weex.h…
-
Input元件和初識內建模組:jspang.com/post/weex.h…
-
Image和video元件:jspang.com/post/weex.h…
-
一起作個列表出來:jspang.com/post/weex.h…
-
從後端伺服器上獲取資料:jspang.com/post/weex.h…
-
作輪播圖片效果:jspang.com/post/weex.h…
-
a元件和web元件:jspang.com/post/weex.h…
-
通用事件和動畫: jspang.com/post/weex.h…
-
教會你自學weex:jspang.com/post/weex.h…
-
Navigator和webview模組:jspang.com/post/weex.h…
-
vue-router的使用: jspang.com/post/weex.h…
Nuxt.js免費視訊教程 開啟SSR渲染
-
Nuxt環境搭建和Hello World:jspang.com/post/Nuxt.j…
-
Nuxt目錄結構詳講:jspang.com/post/Nuxt.j…
-
Nuxt常用配置項: jspang.com/post/Nuxt.j…
-
Nuxt的路由配置和引數傳遞:jspang.com/post/Nuxt.j…
-
Nuxt的動態路由和引數校驗:jspang.com/post/Nuxt.j…
-
Nuxt的路由動畫效果:jspang.com/post/Nuxt.j…
-
Nuxt的預設模版和預設佈局:jspang.com/post/Nuxt.j…
-
Nuxt的錯誤頁面和個性meta設定:jspang.com/post/Nuxt.j…
-
asyncData方法獲取資料:jspang.com/post/Nuxt.j…
-
Nuxt的路由動畫效果:jspang.com/post/Nuxt.j…
React免費視訊教程-入門和元件
-
React課程介紹:jspang.com/post/react.…
-
環境搭建和HelloWorld程式:jspang.com/post/react.…
-
初識JSX語法:jspang.com/post/react.…
-
進階JSX語法:jspang.com/post/react.…
-
React元件:state成員:jspang.com/post/react.…
-
React元件:props和render成員:jspang.com/post/react.…
-
React元件:生命週期:jspang.com/post/react.…
-
React元件小例項-必做練習:jspang.com/post/react.…
-
React元件:this.props.children:jspang.com/post/react.…
-
React元件:props屬性驗證:jspang.com/post/react.…
-
React元件:獲取真實DOM節點:jspang.com/post/react.…
React免費視訊教程-表單的應用
-
表單的事件響應和bind複用 : jspang.com/post/react-…
-
React表單name複用:jspang.com/post/react-…
-
React表單-可控元件:jspang.com/post/react-…
-
React表單-不可控元件:jspang.com/post/react-…
React專案構建和路由 免費視訊教程
-
構建:create-react-app 快速腳手架 : jspang.com/post/react-…
-
構建:generator-react-webpack: jspang.com/post/react-…
-
構建:webpack一步一步構建01:jspang.com/post/react-…
-
構建:webpack一步一步構建02:jspang.com/post/react-…
-
路由:Hello React路由:jspang.com/post/react-…
-
路由:NavLink中常用選項:jspang.com/post/react-…
-
路由:404設定和跳轉設定:jspang.com/post/react-…
-
路由:通過路由傳值的方法:jspang.com/post/react-…
-
路由:Router中的屬性和路由模式:jspang.com/post/react-…
-
路由:prompt用法講解:jspang.com/post/react-…
Koa2免費視訊教程
-
Koa開發環境搭建:jspang.com/post/koa2.h…
-
async/await的使用方法:jspang.com/post/koa2.h…
-
Get請求的接收:jspang.com/post/koa2.h…
-
POST請求如何接收(1):jspang.com/post/koa2.h…
-
POST請求如何接收(2):jspang.com/post/koa2.h…
-
koa-bodyparser中介軟體:jspang.com/post/koa2.h…
-
Koa2原生路由實現:jspang.com/post/koa2.h…
-
Koa-router中介軟體(1)入門:jspang.com/post/koa2.h…
-
Koa-router中介軟體(2)層級:jspang.com/post/koa2.h…
-
Koa-router中介軟體(3)引數:jspang.com/post/koa2.h…
-
Koa2中使用cookie :jspang.com/post/koa2.h…
-
Koa2的模板初識(ejs):jspang.com/post/koa2.h…
-
koa-static靜態資源中介軟體:jspang.com/post/koa2.h…
MongoDB免費視訊教程
-
認識和安裝MongoDB:jspang.com/post/mongod…
-
Mongo基本命令-1:jspang.com/post/mongod…
-
Mongo基本命令-2:jspang.com/post/mongod…
-
用js檔案寫mongo命令:jspang.com/post/mongod…
-
批量插入的正確方法:jspang.com/post/mongod…
-
修改:Update常見錯誤:jspang.com/post/mongod…
-
修改:初識update修改器:jspang.com/post/mongod…
-
修改:update陣列修改器jspang.com/post/mongod…
-
修改:狀態返回與安全:jspang.com/post/mongod…
-
查詢:find的不等修飾符:jspang.com/post/mongod…
-
查詢:find的多條件查詢:jspang.com/post/mongod…
-
查詢:find的陣列查詢:jspang.com/post/mongod…
-
查詢:find的引數使用方法:jspang.com/post/mongod…
-
查詢:find如何在js文字中使用:jspang.com/post/mongod…
-
索引:構造百萬級資料:jspang.com/post/mongod…
-
索引:索引入門:jspang.com/post/mongod…
-
索引:複合索引:jspang.com/post/mongod…
-
索引:全文索引:jspang.com/post/mongod…
-
管理:使用者的建立、刪除與修改:jspang.com/post/mongod…
-
管理:備份和還原:jspang.com/post/mongod…
-
管理:圖形介面管理(完結):jspang.com/post/mongod…
ES6免費視訊教程
-
ES6的開發環境搭建:jspang.com/post/es6.ht…
-
新的宣告方式:jspang.com/post/es6.ht…
-
變數的解構賦值:jspang.com/post/es6.ht…
-
擴充套件運算子和rest運算子:jspang.com/post/es6.ht…
-
ES6數字操作:jspang.com/post/es6.ht…
-
ES6中新增的陣列知識(1):jspang.com/post/es6.ht…
-
ES6中新增的陣列知識(2):jspang.com/post/es6.ht…
-
ES6中的箭頭函式和擴充套件:jspang.com/post/es6.ht…
-
ES6中的函式和陣列補漏:jspang.com/post/es6.ht…
-
ES6中物件:jspang.com/post/es6.ht…
-
Symbol在物件中的作用:jspang.com/post/es6.ht…
-
Set和WeakSet資料結構:jspang.com/post/es6.ht…
-
map資料結構:jspang.com/post/es6.ht…
-
用Proxy進行預處理:jspang.com/post/es6.ht…
-
promise物件的使用:jspang.com/post/es6.ht…
-
class類的使用:jspang.com/post/es6.ht…
-
模組化操作:jspang.com/post/es6.ht…
CocosCreator從基礎到實戰
-
簡介和HelloWorld:jspang.com/post/cocosC…
-
軟體介面介紹和跳動的小球:jspang.com/post/cocosC…
-
Scene介紹和基本操作:jspang.com/post/cocosC…
-
玩家輸入事件監聽: jspang.com/post/cocosC…
-
Prefab和計時器:jspang.com/post/cocosC…
-
實戰-遊戲簡介和專案分析:jspang.com/post/cocosC…
-
實戰-UI介面佈局:jspang.com/post/cocosC…
-
實戰-主角的動作監聽和跳動:jspang.com/post/cocosC…
-
實戰-隨機生成地刺:jspang.com/post/cocosC…
-
實戰-點選生成地刺和移動:jspang.com/post/cocosC…
-
實戰-碰撞檢測:jspang.com/post/cocosC…
-
實戰-倒數計時和分數增加:jspang.com/post/cocosC…
-
實戰-歡迎介面程式碼編寫:jspang.com/post/cocosC…
-
實戰-新增音效:jspang.com/post/cocosC…
-
實戰-釋出遊戲:jspang.com/post/cocosC…
Fabricjs 免費視訊教程
-
初識簡單而且強大的Fabric.js庫: http://jspang.com/post/fabricjs.html#toc-e13
-
在Canvas上畫簡單的圖形:jspang.com/post/fabric…
-
在Canvas上插入圖片並設定旋轉屬性:jspang.com/post/fabric…
-
Fabric.js用路徑畫不規則圖形:jspang.com/post/fabric…
-
Fabric.js的動畫設定:jspang.com/post/fabric…
-
Fabric.js的影象過濾器:jspang.com/post/fabric…
-
Fabric.js的顏色模式和相互轉換:jspang.com/post/fabric…
-
Fabric.js的漸變填充:jspang.com/post/fabric…
-
Fabric.js的文字設定:jspang.com/post/fabric…
-
Fabric.js的事件系統:jspang.com/post/fabric…
CSS3免費視訊
-
嫁漢嫁漢穿衣吃飯:jspang.com/post/CSS3.h…
-
CSS3新特性簡介和瀏覽器支援情況:jspang.com/post/CSS3.h…
-
CSS3偽類選擇器1:jspang.com/post/CSS3.h…
-
CSS3偽類選擇器2結構偽類選擇器:jspang.com/post/CSS3.h…
-
CSS3偽元素:jspang.com/post/CSS3.h…
-
CSS3用border-radius畫圓形:jspang.com/post/CSS3.h…
-
CSS3畫三角形和對話方塊:jspang.com/post/CSS3.h…
-
CSS3畫菱形和平行四邊形:jspang.com/post/CSS3.h…
-
CSS3畫菱形和平行四邊形:jspang.com/post/CSS3.h…
-
CSS3 畫五角星和六角星:jspang.com/post/CSS3.h…
-
CSS3畫心形和蛋形:jspang.com/post/CSS3.h…
-
CSS3畫太極陰陽圖:jspang.com/post/CSS3.h…
-
CSS3製作透明背景層:jspang.com/post/CSS3.h…
-
CSS3的顏色模式(1):jspang.com/post/CSS3.h…
-
CSS3的顏色模式(2)-例項仿天貓商品展示效果:jspang.com/post/CSS3.h…
-
CSS3線性漸變:jspang.com/post/CSS3.h…
-
CSS3徑向漸變 radial-gradient:jspang.com/post/CSS3.h…
-
CSS3重複性漸變:jspang.com/post/CSS3.h…
-
CSS3盒子陰影效果box-shadow:jspang.com/post/CSS3.h…
-
CSS3製作緩慢變長的方形(transition特效):jspang.com/post/CSS3.h…
-
CSS3過渡的timing-function屬性詳解:jspang.com/post/CSS3.h…
-
CSS3仿天貓專題過渡效果例項:jspang.com/post/CSS3.h…
-
CSS3仿天貓類別過渡效果製作:jspang.com/post/CSS3.h…
-
CSS3動畫中的@keyframes關鍵幀講解:jspang.com/post/CSS3.h…
-
CSS3動畫animation複合屬性講解:jspang.com/post/CSS3.h…
-
CSS3動畫綜合例項製作-內容載入loading動畫實現:jspang.com/post/CSS3.h…
-
CSS3 Loading動畫效果例項2:jspang.com/post/CSS3.h…
-
CSS3製作發光字,立體字,蘋果字型:jspang.com/post/CSS3.h…
-
CSS3 用text-overflow解決文字排版問題:jspang.com/post/CSS3.h…
-
CSS3 新的字型單位rem-大結局:jspang.com/post/CSS3.h…
2019年展望
2018年出現了很多新技術,特別是Flutter的出現,我個人覺的每個前端小夥伴都應該學習一下。
2019年我努力保持每週更新三集免費視訊,但是為了維持部落格伺服器費用和像買個蘋果的筆記本,也會出一套收費視訊。
我2019年的計劃:
- 重新翻看一遍犀牛JS神書,鞏固JS基礎知識。
- 開始學寫日程筆記,每天一頁那種。
- 鍛鍊身體,減輕體重到180斤。
- 每週錄製3集視訊教程。
- 學習伺服器知識,向全棧繼續進發。
- 重構自己的部落格網站。
- 還清房貸,並帶著全家出去旅遊一次。
其實每年的展望都很難達成,但是總是要立一下,萬一實現了那。
最後希望
希望小夥伴們都能給一個贊,留一個言,萬一我獲得第一名了那。寫這篇文章就是想獲得個獎品,特別是印著掘金logo的東西。錢我舍了,虛榮心總該滿足一下吧。288集前端視訊,換你一個贊和留言不過分吧。