大家好
三個月前，我在這個版上 po 了這樣一篇文：[分享] 免費程式教學(前端)
https://www.ptt.cc/bbs/Soft_Job/M.1488469002.A.E34.html
基本上就是找一些人，然後我會出作業、改作業跟規劃課程，一切都是免費的
如今三個月過去了，課程剛結束兩週左右，我有整理了一篇心得
裡面有我規劃課程的理念跟課程結束後學生給我的回饋
但因為滿長的，而且有滿多連結跟一張圖片，貼到這邊不太適合閱讀
所以我下面只節錄部分心得，有興趣的話可以看原文，先跟大家說聲不好意思
原文：http://huli.logdown.com/posts/1913623-frontend-tutorial-experiment
以下節錄部分心得並修改自原文：
==================
這堂課我一開始擬定的大綱長這樣：
1. 練習實作 Twitch 遊戲畫面排版（基本 html, css）
2. 讓畫面變得更動態（css transition）
3. 改用 Less, Sass 或是 Stylus（知css 預處理器的使用）
4. 串接 Twitch API （看懂文件、API 串接、Ajax、CORS）
5. 加上 infinite scroll 與 placeholder
6. 改用 vanilla js 實作
7. 加上多國語言（i18n, library）
8. 把 CSS, JS 全部都 inline 到 html（gulp、為什麼需要 gulp）
9. 我們為什麼需要用 Webpack？
10. 改用 React.js
會擬出這個課程大綱，主要有兩個因素
第一個是因為裡面教的那些東西，剛好都跟我近期的工作內容有相關
因此教起來我會比較得心應手，畢竟自己就在碰這些東西
第二個原因是因為我在工作上接觸到這些東西的時候，我原本也是什麼都不懂
不知道 webpack 跟 gulp 在幹嘛、不知道 infinite scroll 到底怎麼做
可是當我花一段時間理解之後，我知道為什麼當初的我覺得這麼難了
因為我不知道是用在哪裡，我不知道是幹嘛的，或是說，我不知道「我為什麼要用」
我在網路上找了一大堆教學，每一篇都在跟我說「怎麼用」
卻很少有資料能告訴我：「為什麼要用」、「如果不用會怎樣」
在幾次教學經驗的累積過後，我找到一個我認為比較有效的教學方式
原則就是：「要先痛到，才會得到」
這是什麼意思呢？
我有一陣子很喜歡看大公司的一些架構文章
裡面寫說他們怎麼把機器架構調整成適合規模化
講說他們碰到了什麼問題，用什麼解法解決了超大資料量所帶來的 Bug
我一開始覺得很有收穫：「哇，這些感覺好厲害啊，學到很多」
可是過一陣子之後，才發現自己什麼都沒學到
那些東西過一週之後我就全部忘掉了，好像文章根本沒看過一樣。
後來我忘記在哪邊看到一篇文章，裡面有一段傳達的意思我記得特別深刻
（如果有人也看過同樣一篇，麻煩在底下留言，小弟感激不盡）
文章裡面寫說，那些都是大公司的高手們痛苦過、經歷過所淬煉出來的「精華」
你怎麼可能期望你看了十分鐘，就能夠擁有他們十年的功力？
「痛過」，是一件很重要的事。
與其直接教他們寫 SCSS，不如先讓他們寫 CSS
然後一直叫他們改顏色，叫他們改東改西
這時候他們就只能一直用文字編輯器尋找->取代，不斷重複這個循環
等到你確認他們真的痛了，再教他們 SCSS。
這時他們會有種「重獲新生」的感覺
「靠！原來還有這種東西喔，這樣就不用改這麼辛苦了，用變數就可以了」
這樣子的學習方式我認為會比起直接教有效許多。
在教他們一樣東西之前，我一定會想辦法讓他們知道說：「為什麼我需要這個」
我認為當這個問題搞懂也同意之後，才會更有動力去學習
也才能知道自己到底在學什麼，學了之後可以幹嘛。
還有另外一件事，那就是比起每一個不同的小作業
比較好的做法是「一個逐漸加強的作業」
這樣在做作業的時候，學生可以不斷地看見自己的進步，不斷地看見專案的成長
而且最後會做成一個完整的，而不是一堆零碎的、破碎的小專案
因此，我就以這幾個概念規劃出了這些課程大綱，後來有稍作調整：
1. 基本 HTML/CSS 練習：以 Twitch 為例
2. 讓畫面變得更動態：神奇的 CSS transition
3. 寫 CSS 必備神器：CSS 預處理器
4. 從假資料到真資料：Ajax 與 API 串接
5. 讓網頁變得更完整：加上 placeholder 與 infinite scroll
6. 返璞歸真：vanilla js
7. 走向國際：i18n
8. 當我們包在一起：Webpack
9. 節省 Request 的極致：一為全，全為一
10. 改掉你的壞習慣：ESLint 與 standard
第十週原本是 React.js，我後來拿掉了，原因有兩個
第一個是我認為 React 放在這邊不適合，還沒到教的時機點
還不夠「痛」，而且跟前面的也沒有什麼關聯
第二個是我改作業發現很多人的 coding style 不好
所以第十週放這個，前面九週作業寫越醜的要花越多時間改，讓他們「痛」一下
我必須先承認，上面這個規劃並沒有很好地使用「痛到才會得到」這個教學原則
這個是我還可以再做得更好的部分，進步空間還很大很大
而由一個小作業逐漸加強我覺得我算是滿好的掌握到了
一開始先讓他們刻一個靜態版面，再來把 CSS 換成 SCSS
然後把假資料換成真的資料，串 API
接著加上佔位圖以及無限滾動，讓頻道可以一直滾動加載
第六週的作業目的是拋棄 jQuery，節省檔案大小
也讓他們知道原來不靠 jQuery 還是可以寫 JavaScript 的
第七週把中文換成中英雙語，可以支援兩個語言，第八週改用 webpack 實作模組化
第九週用 gulp 讓他們知道原來很多事情都可以自動化
最後一週修正自己的 coding style
這樣子逐漸優化的過程，他們在做下一個作業的時候
就可以直接接續上一個，把一個專案變得越來越完整
如同我一再強調的
寫程式不是重點，重點在「解決問題」，幾乎所有事情的重點都在這個
解決問題又可以分成以下幾點來思考：
1. 你要解決什麼問題？
2. 你用什麼方法解決？
3. 這個方法有什麼優缺點？
我很喜歡一個詞叫做 trade-off，中文可以翻作：權衡、取捨
尤其是在寫程式的領域中，你做什麼事其實都是一種 trade-off
最常見的例子就是時間換空間或空間換時間，沒有那麼好康的事情讓你又有空間又有時間
好啦，其實有，但那都是用錢換來的
我在每一週的作業說明裡面，都會提到說我們這週碰到了什麼問題。那解法呢？
解法當然就是那一週要教大家的東西囉
比起「webpack 是一個打包工具」這種介紹
你讓初學者們知道 webpack 到底是幹嘛的、是要解決什麼問題會有用的多
再次強調，問為什麼很重要，知道為什麼也很重要
知道背後的原因，你就可以決定你要不要用這一套解法
你用一個東西，背後必須要有一個「好理由」。
A：我們改用 TypeScript 吧
B：為什麼？
A：因為潮啊！
如果「潮」這個理由不夠有說服力的話而 A 又提不出其他更好的理由
那就沒有必要改用 TypeScript
之前有一篇很紅的文章，叫做：
在 2016 年學 JavaScript 是一種什麼樣的體驗( https://goo.gl/HM66el )
我覺得有一個很可惜的點，那就是有些人看完之後的心得都只有：
「唉，對啊！前端現在也太複雜了吧！」
但我覺得這篇文章你應該去思考的是：
「裡面那些工具是不是真的需要？那些工具想解決，到底是不是我碰到的問題？」
這才是這篇文章的重點
舉例來說，裡面有一段這樣寫：
「可別用 jQuery！現在哪還有人用 jQuery，
現在是 2016 年了，你絕對應該用 React。」
這個理由跟上面的一樣薄弱，一個字：潮！
當然，他也可能是其他意思，也有可能是想表達說 React 是近年趨勢
jQuery 可能會慢慢被淘汰並且不再維護，以後就有維護性的問題
這時候你就可以考慮說：這樣的情形是不是有可能發生？
如果真的發生的話，會有怎樣的影響？
用 React 帶來的複雜性跟 jQuery 的可維護性哪一個損害較小？
總之呢，重點應該是「你要解決什麼問題，這問題用哪些工具來輔助最適合」
而不是一味的覺得前端怎麼那麼複雜那麼多東西
是啊，本來就一堆東西啊，可是裡面可能有八成你根本用不到啊！
如果你寫一個一頁式的行銷 landing page
還硬要用 React + Redux + Rx + Webpack 的話，那我也是醉了
這堂課程的進行方式如上所述，總共十個作業，每一個作業一週，必須「先做作業」
但做不出來也沒關係
每個禮拜二我會直播講解上一週作業並且實際示範如果是我的話，我會怎麼做
會這樣規劃是因為「自學」無論在哪個領域，都是一個重要的技能
我想先讓同學們對於我要教的內容有概念，甚至是把作業做出來以後，我再重新講解一遍
我覺得唯有這樣，才能讓同學們對我教的東西更熟悉。
這就呼應到我上面提過的「要先痛到，才會得到」
事後有很多同學都反應他們課前預習時覺得有些東西好難，怎麼看都看不懂
可是一看完我的直播教學，就有種茅塞頓開的感覺：「哇！原來這麼簡單」
如果相反過來呢？假如是我先上課，他們就只會覺得：「喔，是這樣寫」
接著寫作業的時候就直接抄我的解法就好了
他們學到了什麼？學到模仿我的程式碼，然後過一個禮拜完全忘記這個解法
為什麼？因為他們沒有痛過，所以沒有去思考
來，再次強調，你寫程式的時候要思考！要思考！要思考！
只有思考過，深思熟慮過的東西才是你的，你才記得住
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 39.109.247.62
※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1498571187.A.3EB.html
推
06/27 21:49, , 1F
06/27 21:49, 1F
推
06/27 21:50, , 2F
06/27 21:50, 2F
推
06/27 21:58, , 3F
06/27 21:58, 3F
推
06/27 21:59, , 4F
06/27 21:59, 4F
→
06/27 22:01, , 5F
06/27 22:01, 5F
推
06/27 22:01, , 6F
06/27 22:01, 6F
推
06/27 22:29, , 7F
06/27 22:29, 7F
推
06/27 22:49, , 8F
06/27 22:49, 8F
推
06/27 22:50, , 9F
06/27 22:50, 9F
推
06/27 22:52, , 10F
06/27 22:52, 10F
推
06/27 22:56, , 11F
06/27 22:56, 11F
推
06/27 23:00, , 12F
06/27 23:00, 12F
→
06/27 23:01, , 13F
06/27 23:01, 13F
如果只是想示範同樣的效果但不同方式，其實也不一定要用 git branch 啦
這跟 git 沒什麼關係，反倒是切成兩個檔案我倒覺得比較好一點
但若是想要順便示範一下 git 的分支功能，這倒是個好提議，感謝建議XD
推
06/27 23:06, , 14F
06/27 23:06, 14F
推
06/27 23:09, , 15F
06/27 23:09, 15F
推
06/27 23:09, , 16F
06/27 23:09, 16F
推
06/27 23:11, , 17F
06/27 23:11, 17F
推
06/27 23:12, , 18F
06/27 23:12, 18F
推
06/27 23:12, , 19F
06/27 23:12, 19F
推
06/27 23:13, , 20F
06/27 23:13, 20F
推
06/27 23:27, , 21F
06/27 23:27, 21F
推
06/27 23:28, , 22F
06/27 23:28, 22F
推
06/27 23:28, , 23F
06/27 23:28, 23F
推
06/27 23:35, , 24F
06/27 23:35, 24F
推
06/27 23:39, , 25F
06/27 23:39, 25F
推
06/27 23:41, , 26F
06/27 23:41, 26F
推
06/27 23:42, , 27F
06/27 23:42, 27F
推
06/27 23:47, , 28F
06/27 23:47, 28F
推
06/27 23:47, , 29F
06/27 23:47, 29F
推
06/27 23:50, , 30F
06/27 23:50, 30F
推
06/28 00:05, , 31F
06/28 00:05, 31F
推
06/28 00:07, , 32F
06/28 00:07, 32F
推
06/28 00:31, , 33F
06/28 00:31, 33F
推
06/28 00:37, , 34F
06/28 00:37, 34F
推
06/28 01:07, , 35F
06/28 01:07, 35F
推
06/28 01:24, , 36F
06/28 01:24, 36F
推
06/28 02:42, , 37F
06/28 02:42, 37F
推
06/28 02:56, , 38F
06/28 02:56, 38F
推
06/28 03:21, , 39F
06/28 03:21, 39F
→
06/28 07:17, , 40F
06/28 07:17, 40F
推
06/28 07:21, , 41F
06/28 07:21, 41F
推
06/28 07:26, , 42F
06/28 07:26, 42F
推
06/28 07:37, , 43F
06/28 07:37, 43F
推
06/28 08:15, , 44F
06/28 08:15, 44F
推
06/28 08:31, , 45F
06/28 08:31, 45F
推
06/28 08:32, , 46F
06/28 08:32, 46F
推
06/28 08:52, , 47F
06/28 08:52, 47F
推
06/28 08:59, , 48F
06/28 08:59, 48F
※ 編輯: Y78 (39.109.247.62), 06/28/2017 09:07:51
推
06/28 09:08, , 49F
06/28 09:08, 49F
推
06/28 09:08, , 50F
06/28 09:08, 50F
推
06/28 10:39, , 51F
06/28 10:39, 51F
推
06/28 11:06, , 52F
06/28 11:06, 52F
推
06/28 11:14, , 53F
06/28 11:14, 53F
推
06/28 11:33, , 54F
06/28 11:33, 54F
推
06/28 11:39, , 55F
06/28 11:39, 55F
→
06/28 11:58, , 56F
06/28 11:58, 56F
推
06/28 12:26, , 57F
06/28 12:26, 57F
推
06/28 16:04, , 58F
06/28 16:04, 58F
推
06/28 20:03, , 59F
06/28 20:03, 59F
推
06/28 21:08, , 60F
06/28 21:08, 60F
推
06/28 22:03, , 61F
06/28 22:03, 61F
推
06/28 22:33, , 62F
06/28 22:33, 62F
→
06/28 22:36, , 63F
06/28 22:36, 63F
→
06/28 22:38, , 64F
06/28 22:38, 64F
推
06/28 23:26, , 65F
06/28 23:26, 65F
→
06/29 00:22, , 66F
06/29 00:22, 66F
推
06/29 01:53, , 67F
06/29 01:53, 67F
推
06/29 09:03, , 68F
06/29 09:03, 68F
推
06/29 09:42, , 69F
06/29 09:42, 69F
推
06/29 10:31, , 70F
06/29 10:31, 70F
推
06/29 11:09, , 71F
06/29 11:09, 71F
→
06/29 11:09, , 72F
06/29 11:09, 72F
→
06/29 11:09, , 73F
06/29 11:09, 73F
→
06/29 11:09, , 74F
06/29 11:09, 74F
推
06/29 11:49, , 75F
06/29 11:49, 75F
推
06/29 13:39, , 76F
06/29 13:39, 76F
推
06/29 15:46, , 77F
06/29 15:46, 77F
推
06/29 23:09, , 78F
06/29 23:09, 78F
推
06/30 00:27, , 79F
06/30 00:27, 79F
推
07/01 04:39, , 80F
07/01 04:39, 80F
推
07/02 08:28, , 81F
07/02 08:28, 81F
推
07/02 11:56, , 82F
07/02 11:56, 82F
推
07/03 07:44, , 83F
07/03 07:44, 83F
推
07/04 12:41, , 84F
07/04 12:41, 84F
推
07/06 10:13, , 85F
07/06 10:13, 85F
推
07/16 21:44, , 86F
07/16 21:44, 86F
推
07/19 17:10, , 87F
07/19 17:10, 87F
推
07/20 18:49, , 88F
07/20 18:49, 88F
推
05/02 22:56, , 89F
05/02 22:56, 89F
推
02/21 18:04,
6年前
, 90F
02/21 18:04, 90F