⾃我探索的資訊教育
Chris@g0v summit 2020
有⼈是想轉職成⼯程師嗎?
有⼈是⽬前是管理職嗎?
I am Chris
現職

好想⼯作室 Web Camp mentor

Web Developer

HPXTN 台南讀書會 總召

⽇舞台南 swing dance 成員

找 Blog
Google: chris 技術
github.com/dwatow
Hexo > code block
github.com/dwatow
Jest > Doc > Testing Web Frameworks
github.com/dwatow
2019 The F2E 2th 精神時光屋 第四關 - 線上⽀付
github.com/dwatow
【⼤神來六⾓】六⽉直播主題:檔案傳輸
深入探討 HTML5 File API 操作細節
github.com/dwatow
github.com/dwatow
好想⼯作室有 4 個 Training Camp
Backend Web
Web Camp 第 3 梯 2015/10/01

我來 Web Camp 當學員 2017/2/17

忘了什麼時候成為 mentor…

1. Web Camp 第 5 梯 2018/06/04

2. Web Camp 第 6 梯 2019/02/25 ←開始進化

3. Web Camp 第 7 梯 2019/06/28

4. Web Camp 第 8 梯 2019/11/15

5. Web Camp 第 9 梯 2020/6/1
Web Camp 與我
培養優質⼯程師
的肥料
Web Camp
產出好的⼯程師
Training Camp
產出好的⼯程師
Training Camp
產出好的⼯程師
Training Camp
Camp ⽂化

團隊強度
開始進化
探索學員來⾃何處的源頭
Training Camp
?!
⼀開始
50%
50%
靠緣份招⽣
⾯談
Mentor
想學 錄取
Training
標準: 只確定有決⼼
隨時都可以把 web camp 補滿

但是,遇到更適合的⼈時,卻無法給他⼀個位⼦
最重要的事
避免無意義輸入
招募新學員
誰會來報名?
每個⼈都有⾃⼰
的故事
處在⼈⽣
迷網中
誰適合來Training?
30歲前?
有錢 + 有閒
有底⼦?
本科系?
有熱情?
先設計⾃⼰的⼈⽣
使⽤ Design Thinking 探索未知的下⼀步
先設計⾃⼰的⼈⽣
尋找⼈⽣羅盤

⼯作觀&⼈⽣觀=真北
奧德賽計畫

三種⼈⽣計畫

⽬前做的事

⽬前的備案

排除⾯⼦和錢的問
題,想做什麼?
⽣命設計診斷

健康 (運動)

⼯作 (⼯作)

遊戲 (旅⾏)

愛 (社交)
打造原型

原型對話-⽣命訪談

原型體驗-假裝就是
起點

就是現在這⼀刻
找出⼀條路

好時光⽇誌: ⼼流時刻

精⼒昇降因素
打造原型
1. 上線上課程: 獲取初步的知識
2. 練習題⽬: 做做看
3. 觀察⾃⼰⾯對壓⼒時的樣⼦
4. ⾃我探索「如何深入研究問題」
⼀定要
寫程式過活
學習是⼀輩⼦的事
確定未來要當⼯程師
但是學習不順利
就找這樣的⼈
靠緣份招⽣
Training Camp
?!
來試試看的⼈變少
50+%
50-%
招⽣⽂ + 整梯招⽣
招⽣⽂ ⾯談
MentorMentor
信件
Mentor
想學 寄信報名 錄取
Training
約⾯談
招⽣⽂ + 整梯招⽣
整梯招⽣: 讚!可以找到更需要我們的學員

但,我也是⼈,也有看走眼的時候。
試鏡
找同事⼀起⾯試新⼈
找學員⼀起⾯試新學員
未來要和新學員相處的是舊學員們
不是我
招⽣⽂ + 整梯招⽣
Training Camp
不適任?!!
適任?
歸納原因?!很難!
招⽣⽂ + 整梯招⽣
Training Camp
加入回授: 專注在好的部份
招⽣⽂ + 整梯招⽣ + 怕⾃⼰看走眼
想學
招⽣⽂
寄信報名
⾯談
錄取
Mentor + 學長姐
Training
Mentor
信件
約⾯談
Mentor
招⽣⽂ + 整梯招⽣ + 怕⾃⼰看走眼
對學員來說

進入 Web Camp 之後,不會是整個 Camp 都是陌⽣⼈

⾄少有⼀個⾒過、聊過⼀兩⼩時的⼈

對學長姐來說

會重新檢視⾃⼰的現況與在⾯試時的進步幅度

對 mentor 來說

決定的過程,不是⾃⼰靠腦袋判斷,⽽是會有⼈與⾃⼰進⾏對話

可以集中、收斂的保持相同的價值觀判斷
偷懶!
學長姐,實在太好⽤了
將 Camp 成為系統
錄取共識決 => 全部共識決
招⽣⽂ + 整梯招⽣ + 怕⾃⼰看走眼
Training Camp
加入回授: 專注在好的部份
招⽣⽂ + 整梯招⽣ + 怕⾃⼰看走眼
Training Camp
加入回授: 專注在好的部份
現⾏做法: 招⽣委員會
想學
招⽣⽂ ⾯談
Mentor + 學長姐
training
約⾯談
Persona
擬問題
想找什麼樣的⼈? 看信/有興趣約來⾯談
寄信 回覆 收信
辨護會議
入圍
⼈選
錄取
名單
決定第⼀天
現⾏做法: 招⽣委員會
對學長姐來說

投入 Camp 的招⽣,增加招⽣結果的認同感

對 mentor 來說

整個招⽣的過程,不是⾃⼰靠腦袋判斷,⽽是會有⼈與⾃⼰進⾏對話

可以集中、收斂的保持相同的價值觀判斷
更偷懶!
強健團隊→增加連結
Mentor
新學員
招⽣
強健團隊→增加連結
Mentor 學員
Training
強健團隊→增加連結
Mentor
新學員
學員
Training
招⽣ 招⽣
Trainng
Camp
報名
招⽣進化
Training Camp
加入回授: 專注在好的部份
?!
不良率降低
50++++%
50----%
風氣進化
學員⼀直寫糙 code

Mentor ⼀直 code review
寫糙 code 不可恥
只要看可不可以不要寫糙 code
漸漸的就不寫糙 code 了
但是要看懂
以切版的訓練為例
切版最好舉例了!!
找 mentor
找 mentor
找 mentor
學員 code review
學員Mentor
我想 code review
學員 code review
學員Mentor
給我看看...
學員 code review
學員Mentor
我想問問題
學員 code review
學員Mentor
(我想個辦法)
學員 code review
學員Mentor
先找學長姐
學長姐,實在太好⽤了
將 Camp 成為系統
以切版的訓練為例
切版最好舉例了!!
學員 code review
複習⼀些常⾒的問題,過程歷經多次之後

重複性太⾼,有點厭煩

常⾒問題的經驗值,失去了價值

原本可以複習,
後來都背下來了
Mentor 學員
請資深學員幫學員 code review
我想要問問題
中間來來回回的
開
始
看
問
題
獲
得
經
驗
值
Mentor 學員
請資深學員幫學員 code review
我想要問問題
中間來來回回的
怎麼⼜是...
剛剛才跟誰講過的問題
開
始
看
問
題
Mentor 學員
請資深學員幫學員 code review
我想要問問題
學長姐
不太會!!
中間來來回回的
請資深學員幫學員 code review
對學員來說

找得到⼈問問題

資深學員

複習不熟的東⻄

對我來說

等到問題問到我的時候,就是沒⾒過的新問題了

我也和學員⼀起學到的新東⻄
資深學員,學到後⾯,
前⾯的也快忘光了
強健團隊→增加連結
Mentor
學員
討論問題
強健團隊→增加連結
Mentor 學長姐(學員)
Review 學習狀態
強健團隊→增加連結
Mentor
學員
學長姐(學員)
Review 學習狀態
討論問題 討論問題
風氣進化
學習深度,鑽到底
學員
有問題想問你
Mentor
討論問題
好哇!來討論
討論問題
學員Mentor
這裡為什麼這樣寫?
我看了(你的) Blog 

裡⾯寫的!
討論問題
學員Mentor
網路的⽂章
討論問題
學員Mentor
所以你就相信了?
討論問題
學員Mentor
解決問題的過程
和喝符⽔沒兩樣!?
討論問題
學員Mentor
你知道問題的真相嗎?
討論問題
學員Mentor
真相!!?
想了解消失的 100 年?
沒錯!你要成為海賊王!
只要有⼈會知道
學員可以問
相信真相存在,是⼀種信仰
讓學員需要會想查
㝷找
接近真相的⽅法
怎麼找/怎麼看
去哪找/去哪看
讀懂歴史の本⽂(ポーネグリフ)?
要看漫畫
哦!不對!
讀懂 spec?
要慢慢習慣讀懂它
spec
2017 年 鐵⼈賽
邊看 spec 邊寫⽂章 30 天
⼀切始於前端新⼿村
學前端⼤約⼀年後的挑戰
前端新⼿村
概論
這⼀系列介紹的內容細說從頭,從空⽩⾴、設計載體的改
變、現代顯⽰器和HTML的淺談。
前端新⼿村 從空⽩⾴開始
前端新⼿村 從設計載體到RWD顯⽰原理
前端新⼿村 HTML的作⽤
前端新⼿村 @import 開⼼的結構化 CSS
都市傳說
都市傳說,為了調查⼀些奇怪現象⼜沒有真相的現象。
前端新⼿村 都市傳說之隱藏元素的⼿法
前端新⼿村 都市傳說之body範圍
CSS Selector
CSS Selector 全系列,希望透過正確的分類,學習 Selector
更好記。
前端新⼿村 CSS 簡單 Selector (上篇) & Groups
前端新⼿村 CSS 的 簡單 Selector (中篇)
前端新⼿村 CSS 的 簡單 Selector (下篇)
前端新⼿村 CSS Selector 的 Combinators
前端新⼿村 偽元素
排版邏輯
強調在「將東⻄排到你想排的地⽅」所以⼤多數都在介紹
layout 的觀念。希望有助於感覺到切版超容易踩雷的感覺的
⼈。
前端新⼿村 Block 和 Inline 排版
前端新⼿村 垂直排列 與 Box Model
前端新⼿村 橫向排列
前端新⼿村 橫向排列 & 實現純⼿⼯ RWD
前端新⼿村 Media Query
前端新⼿村 Position 定位
前端新⼿村 flex (上)
前端新⼿村 flex (下)
前端新⼿村 flex grow & shrink 演算法
CSS 運作
學會 CSS 之前,要先知道⼀些 CSS 的觀念以及運作⽅式。
前端新⼿村 CSS 的作⽤
前端新⼿村 CSS 的單位
前端新⼿村 再論 ex, em
前端新⼿村 CSS Cascade 串接
動畫效果
過場與動畫效果,其實是 CSS3 裡,容易讓作品吸引⼈的技
術之⼀。學起來可以讓元素在畫⾯上正確的⾶來⾶去。
前端新⼿村 Transition
前端新⼿村 Animations (前傳)
前端新⼿村 Animations (上)
前端新⼿村 Animations (下)
前端新⼿村 細說 Timing function
發現學 CSS
看 w3.org 其實不難
當時的我
想辦法讓學員養成習慣
看 w3.org 學 CSS
後來的我
BFC
float
behavior
Anonymous
block boxes
line-box
normal flow
media type
與問題周旋的時間,變久了
了解問題的深度,也變深了
學員
Mentor 不是絕對的
Spec
追根究柢 + 實事就是
保持懷疑 + 謹慎驗證
養成的學習⽂化
看 spec 討論問題
Mentor 學員
我想要 code
review
學長姐Spec
中間來來回回的
Camp 成為系統
不⼩⼼的知識管理
不⼩⼼的知識管理
Mentor
學員
Spec/官網⽂件
Update 知識
查⽂件
查⽂件
Code review
問問題
討論/分享
學習記錄/BlogCode review
不⼩⼼的知識管理
Mentor
學員
Spec/官網⽂件
Update 知識
查⽂件
查⽂件
Code review
問問題
討論/分享
學習記錄/BlogCode review
降低 Mentor 依賴
不⼩⼼的知識管理
讓⼈成為知識的載具,知識才會⽤出來

讓⼈成為知識的索引,知識才會好尋找

讓 spec 成為判斷真假的依據

知識才會去蕪存菁Wiki 系統、線上⽂件
加速你的⾃學
是我們的強項
並不是讓你學會程式,你是靠⾃⼰學習的
⾃學不應該
因為加入我們⽽開始
因為離開我們⽽結束
Questions

自我探索的資訊教育