iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
2
Modern Web

完美 Camp 進化論系列 第 23

好想工作室 web camp 切版怎麼 training (一)

  • 分享至 

  • xImage
  •  

警語!!
照著 Kata 練習,會遇到許多的困難。
我會在這盡可能的把 Kata 講清楚,但是不保證照練就成功。

我剛進來時的切版 KATA 是這樣

我剛接觸 Web Camp 的 KATA 版本!裡,沒細說的切版 training。

當時安排是切七個版。每兩個版一個主題。

第幾個版 訓練主題 code review
1 原生寫法
2 原生寫法 要找學長姐 1 位
3 Bootstrap
4 Bootstrap 要找學長姐 1 位
5 Sass
6 Sass 要找學長姐 1 位
7 git branch

每個主題的訓練,都是寫兩個練習,code review 一次。

這個版怎麼來的呢?就是到搜集網站的網站上截圖下來當題目練習。(還不用現代尺寸稿)
依從畫面簡單,慢慢到畫面複雜。

如何學切版?

相信這是初學的困擾,我也曾經為此問題困擾過。前端是一個有趣的領域,可以說是前端設計師程式設計師的綜合體,所以如果都使用工程師的邏輯來學,也不是。如果都當作設計師來訓練,也不太對,因為這畢竟是程式環運作的環境,靠感性直覺,是不夠的。

那是怎麼做的呢?
還記得那一篇設計師之路中,我去成大工業設計系上課嗎?
他上課的方式就是設計科系特有的評圖。(評圖也是我上了設計邊境才知道)

設計系的實作課

一學期 18 週,每 1 個題目做 2 週。

在要舉的例子之前是做「字型設計」所以會有自己設計「要放在字體裡的特色」,並且有四個字的作品。

要舉的這個例子,這一週做「抽象表達」

把字打散成元素,重新編排在白色的紙上,構成抽象的圖形
四個構圖、不具象、均衡、抽象的美感
可出血(一個變兩個)
白紙、黑色

第一週做出來的作品

看完第一週作品之後,老師會在課堂上說說他覺得好與不好的重點,並且解釋個題目的重點在哪裡,要怎麼透過作品表現?

第二週做出來的作品

然後在第二週有了不一樣的進步 (也看我做的看不出進步啦~可以看看其它同學的作品哦)

在這樣兩週的安排之下,是什麼意思呢?

第一週,照自己的想法做,做自己想做的事情。

也許會做出像藝術家盤的驚人之作,也許也會做出像初學者一樣的糞作。這都沒關係,重點是你參與了這個過程,面對了這些困難,結果的好壞只是試圖著解決問題的手法的差異而已。

第一週交作業

老師講的比較可以聽懂,因為作品有做,知道困難點在哪。也容易和其它的同學交流,問問題與回答的,都還滿順利的,只是可能我比較害羞,當時的我沒有常常和同學交流。

另外,老師也會請大家都說說,當作是交流經驗

  1. 自己這一週做了什麼?
  2. 喜歡誰的作品?為什麼?

如果只是來上課,沒有做作業,老師覺得這樣會養成「眼高手低」的人,反而不是他樂見的成果。所以跟著做作業,是唯一要求。

第二週,再做一次。

實作的過程就擁有了自己想法、自己的經驗以及別人的經驗。以此為基礎再做一次,就可以明顯的感覺到自己的成長,以及將新吸收到的東西用上成為經驗。未來再次使用,會比較容易回想起來

切版 KATA 的演化

現行的版本,改成切六個版。一樣每兩個版一個主題。
而我覺得真正要在 training camp 要透過什麼方式可以獲得比自學更多的東西,又不是上課,那就是 code review 或者 pair programming。而這兩個也是敏捷式開發的手法,這樣很適合。

第幾個版 訓練主題 code review
1 原生寫法 找所有學長姐 + mentor
2 原生寫法 任選 1 位
3 Bootstrap 找所有學長姐 + mentor
4 Bootstrap 任選 1 位
5 Sass 找所有學長姐 + mentor
6 Sass 任選 1 位

其中,找所有學長姐 + mentor 其實是一個大挑戰。因為這個過程,除了會花時間寫 code ,還要和每一個學長姐約時間 code review,等待也會花時間,之後還要改再花時間。

高手條款:

只要連續兩個人說 OK,就可以跳過找所有學長姐,直接找 mentor

許多新學員,會跟我說「我想跳過切版,因為我覺得我會了,可以直接跳過嗎?」後來就直接將這種方式做為高手條款。

「沒有跳過,只有快速通過,如果你是高手,請證明給我看」

「切版」要解決的是什麼問題?

切版的問題,永遠只有在談「元素與容器」的問題。

  • 元素與元素的關係
  • 元素與容器的關係

而之前在「抽象表達」的題目,在講幾件事

  • 透過調整元素與元素間的關係,表達不同的感覺
  • 不要改變元素,如果改變了就是自己沒辦法了

剛好呼應到,前端在做的工作就是將「關係用 code 描述」。
這又是設計又是工程師的 training 方式,再配合「看規範」的訓練過程,就是現行好想工作室的方式。

明天來講講,怎麼會想到看規範。


上一篇
如何紮紮實實的學習?
下一篇
好想工作室 web camp 切版怎麼 training (二)
系列文
完美 Camp 進化論30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ytyubox
iT邦新手 5 級 ‧ 2020-10-08 12:25:39

建議 code review 可以分開來寫

-|第幾個版|訓練主題|codereview|
+|第幾個版|訓練主題|code review|
看更多先前的回應...收起先前的回應...
Chris iT邦新手 3 級 ‧ 2020-10-08 12:46:53 檢舉

它把我的語法拿掉了 QQ

Chris iT邦新手 3 級 ‧ 2020-10-08 12:47:46 檢舉

(重複的留言)

ytyubox iT邦新手 5 級 ‧ 2020-10-08 13:08:31 檢舉

<br> 嗎 XD

Chris iT邦新手 3 級 ‧ 2020-10-08 19:34:03 檢舉

對~ QQ

我要留言

立即登入留言