為什麼要當助教呢？

學期初的時候原本投了學校IT部門UX Designer的工作，沒想到雖然面試很順利，但是卻遲遲沒有消息，完全就是一個被發無聲卡的節奏，同時間又看到系上開始在找研究助理，我就想說，不如兩個都投投看吧！反正原本自己就在做教學相關的工作，如果還能夠順便幫教授做做project應該蠻好玩的。

在還沒見到我的教授之前，看網路上的照片快被嚇死，我的教授看起來超兇，感覺剛被放出來（欸，但實際上見到人之後覺得意外的很和善，長得也完全不像照片上那樣。所以跟教授面試的時候，就開了課程的範例跟敘述一下自己在程式方面的經驗，打開codepen炫了炫。

當下有提到如果IT上了的話，我就要毅然決然的拋棄系上來去曼哈頓上班，享受一下在繁華大城市的感覺，因為我們校區在布魯克林，實在是相對比較悠閒跟沒那麼誇張的繁華。

想了一天之後，覺得如果是繼續做設計稿的話好像跟在台灣做的事情沒什麼差別，又很不甘願工作就只是在電腦前做做別人指定的設計稿，所以就直接聯繫教授說我想要這份工作了XD 現在想想好險是做這個決定，在開啟了我後面這一串莫名認真（？的助教進化之旅。

在這12週裡做的事情遠超乎自己的預料，雖然大部分是因為不甘心就只坐在那邊給人問問題，所以會自己給自己找事情做。這學期我把系上的助教體制從一開始的毫無規範，到建立了整套運作規則， 預約制、記錄表格、週報、成效分析與怎麼評估跟分配時間，也大幅的增強了自己建立人際關係的能力，跟知道要如何停損每個人花費的時間，陪養了很多的耐心，在看到一臉呆滯沒在思考的學生的時候不會暴怒XD

預約制規劃與規則制定

原本助教應該是不用約的，就是挑一張自己覺得愜意的桌子，捧著電腦把office hour 待好待滿，我一開始不知道其實蠻多研究生助理不會把時數做滿，教授還是會給滿20小時的薪水，所以就傻傻的每週排了20小時的助教時間再來崩潰，因為20小時實在太長，只靠乾等人來的話實在是無聊又無法預測到底要怎麼幫那些學生。

那時想起了在預約課程討論的時候，有用過一個好像不錯的軟體叫做calendly，於是我第一週閒暇之餘開始研究把助教時間改為預約制並要求至少要提早一天左右預約，就能看到日曆裡面自動隨著預約會冒出應該要出現在學校的時間。

還好一開始有想到預約制，隨著期中期末大家越來越崩潰，老是捧著電腦一個接著一個來，預約制讓我可以名正言順地留足夠的時間給每個人，當然，也會有提早結束的時候，就當做自己偷偷休息的時候，但尤其是外國人，問問題都沒在客氣的，常常雙手一攤就說，我不會做，把事情全部丟給我，如果東西簡單我還會好聲好氣的說你要多嘗試一下，更多是那種複製一堆別人的code來給我看，說我不會改的，整個怒火就會上來叫他回去自己努力一下再過來找助教。

地點跟流浪

原本以為我會有一間自己的辦公室，但夢想第一週就破滅了哈哈，我被告知找一個自己喜歡舒適的角落，學生找得到我就好，因此剛開始我待在系館外面，因為沒有固定座位每週都要換位置，兩週之後實在是很抓狂，覺得不能再這樣像是遊牧民族的當助教下去了。後來，我找到了原來系上的研究生有研究室可以用，一用角落的位置之後一試成主顧，又有超高級的外接螢幕可以用，整個超級方便，所以後半學期就定居在這個座位上了。

助教日誌的誕生

做助教做到後來已經養成了只要有人來問問題，就會直接紀錄下用了多少時間跟問了什麼問題，這樣的習慣也讓我在後續一樣的學生來問問題時，可以直接找到上次的紀錄，快速的掌握他得學習狀況跟弱點在哪，同時也能當作真的有在認真工作的證明給教授看XD 後來有幾個學生連續助教時間回去後都沒有動，隔週預約繼續來找我從上次進度開始也沒有試著搞懂

週報

在第一個禮拜結束的時候，總覺得結束的很沒有踏實感，意外想到了以前跟朋友聊天時，他說他每個禮拜都要寄一封整理的Email給老闆，報告這週自己做了什麼，或有什麼想法。仔細想像這樣的方式經營真的挺不錯的！

在國外的工作比較自由，我又深切的感受到其實我的教授自己很忙，完全沒有空理我，把輔導學生的工作都丟給我做，所以我就開啟草稿紀錄一下這週我做了些什麼事情，有哪些學生，然後開了一個表格把每個學生問的問題跟我幫忙解決的事情記錄下來，整個學期累積下來真的超級可觀的。

減少資訊不足的情況卡住

一開始填寫預約的時候只有填名字跟問題，直到做了兩週之後，我才發現原來我要負責的不是只有我們教授的班，而是系上這學期所有的班都是我要負責的，而且研究所跟大學部也都是來找我問問題（這堂課給大學部跟研究所的兩個版本）。

難怪每個學生來作業跟課綱都超級不同，發現這件事情的時候，痛苦了好一陣子，覺得自己被推坑做了超雷的工作，但後來整理好心情好之後就想要怎麼樣管理這麼多班級的學生，所以後來我就把預約表單一次問完。

有時候助教時間結束後，會需要寄一些參考資源給學生，原本還會很認真的一封一封弄，但是後來數量實在太多懶惰了，就做了一套罐頭信模板，可以直接把名字跟連結填一填複製信件寄出。

第一次領薪水

在美國第一次領薪水的時候真的很感動，目前大概薪水可以勉強打平房租＋生活費，硬是死撐著用著覺雖然大部分都會超過一些些，但是能有能力第一個學期就用專業支撐生活的感覺很棒，雖然跟學費相比真的是杯水車薪，不過就心態而言是告訴了自己，你有在國外好好過自己生活的能力了呢！

成效分析

最後兩週的時候，因為資料實在太多，一眼看不出到底有多少學生來跟問了多久問題，就又開始自己給自己找事情做，先是把所有學生這學期來的次數列出來，然後統計他們到底都是哪個教授的，有些東西實在是做出來才知道誇張，這學期教授丟了一個網頁小哥來給我，說是他們教授實在幫不了他，所以整個學期他不斷的預約來找我。
做完整理之後，發現這學期總共有四十幾個學生來找我，也發現了很多很常利用助教時間的學生，原來斷斷續續的這樣office hour下來，也真的教過很多次了呢。

在教學中誕生的眾多範例跟創作

在教學過程中，其實我自己也很常突然冒出意料之外的寫法或創意，就會趕快記錄下來或趁空擋實作出來，在這裡課堂上教的寫程式雖然東西沒有特別難，但是教授都用一種很設計系的方式在帶系上的課，很鼓勵學生冒出很多怪想法，互相討論可以做什麼很ㄎㄧㄤ的東西，和看很多案例，雖然會讓我當助教這邊的loading蠻重的，但能很清楚感覺到跟台灣一般在教程式一板一眼的感覺很不一樣！

一些小小心得

能在一個陌生的國度逐漸走穩腳步的感覺很珍貴， 所以自己才會花那麼多的心思在希望把第一份工作做好上，也因為很多來的學生其實是跟自己同一屆的同學，所以有時候助教時間做一做就變的比較熟，能夠有人聊聊天或一起吃個飯，也不會自己一個人悶在家裡做事情，雖然常常以學校為家到半夜兩三點弄完回去，但是過的真的蠻開心的～

對於這份工作心裡還是有些小小的不滿，原本工作描述是說有要幫老師做Project，結果所有時間都被助教佔掉了，教授好像也對我太過放心，所以就也沒什麼管我，每次跟我討論的時候還被說做的太拼了完全沒什麼好挑惕XD

下個學期可能會一起規劃系上的統一課綱的資源庫，也很想把整套學起來自己教哈哈哈，這個學期歷經數百個助教時間摧殘，總覺得已經能夠把把整套東西倒著講過一遍了，很希望有一天能把這整套課程帶回台灣，也許能夠為程式教育注入一些活水呢。

在紐約大學讀研當助教的進化日誌 was originally published in 老闆來點寇汀吧 on Medium, where people are continuing the conversation by highlighting and responding to this story.

而這堂「動態互動網頁特效入門」，便是一條尋找自我的旅程，深掘是什麼造就了對互動網頁跟程式的憧憬，所以在講到這堂課的製作過程之前，我想從這堂課的主題-數學以及教育開始講起。

數千年來，數學家與科學家花了大半輩子的時間，看著宇宙的星星月亮，推算出了萬有引力跟萬物運行的軌跡，在沙地上畫著三角形與方形，推算出了畢式定理跟得到了世界上居然有不能用分數表達的數字。

數學與科學真正的美，在於用一條式子可以預測未來，擺脫非理性的判斷跟控制，透過兩千多年來，人類不斷思考世界到底是什麼鬼東西的成果，我們終於在這混亂不堪的世界中找到了秩序，藉以預測今天月亮會怎麼變化，知道了怎麼藉由電力架構邏輯運算變成電腦，更激發了人類的潛能，蓬勃的促進了各種藝術跟互動科技的產生。

說得很美，但是從小開始，大多數的我們都很討厭數學，有時想著我學這些東西做題目到底要幹嘛

台灣的教育，讓數學在很多人的心中是學生時期的夢靨，提到便心生反感，更何況去主動接觸，於是多少人在一次又一次的小考中，執筆的手一緊，跟不上進度的失落感，壓垮了最後一根稻草，便從此放棄數學了，只好安慰自己說著：我真的做不到，我大概…一輩子不擅長這個吧！

後來的我們，在職場的某一刻察覺做遊戲用到了大量的演算法與數學，後來的我們，也許從商、從醫，也許從事設計，發現原來生活除了找錢做生意會用到加減乘除外，很多創作也能透過數學與演算法脫穎而出。

究竟是我們沒有這樣的可能性，還是因為從沒有人帶我們從有趣的角度去看見這些東西呢？

台灣教育環境中升學導向主義極為盛行，我們以分數判斷一個孩子的學習成果，老師也就針對成績盡力的填鴨提升，在我的記憶中，正課上很少老師在教學時說：

你看！比例真的很美，在建築、設計的歷史中像是黃金比例、出版頁的隔線系統設計，都有用到，也有他的歷史故事在，不只講數學，而是能綜合一些歷史、人文、心理學的角度來闡述一個學科。

也許在教自由落體的時候，直接把帶到戶外拿不同的重量的球投擲做實驗，試著劃下那些千變萬化的軌跡，讓我們親見原來，這樣看似複雜的運動可以單純用兩個方向加速度跟速度來描述，引燃與生俱來的好奇心，我們不是沒有可能性，而是沒有看見，也許順便了解下伽利略在比薩斜塔上扔的兩塊石頭確認了下落速度並非由空氣決定的驗證。

我們在乎的，大多是這題會不會考，考試會不會拿高分

常聽見的是考試少三分打10下，每堂課一下課就發著一張考卷接連著考，聯絡簿上寫著成績變成家長口中彼此比較的話題，今天不努力上課唸書長大你就找不到好工作，過不了好的生活，而過多的外部動機可以摧毀內部動機，讓我們失去做這些事的成就感，不再為了喜歡做這件事而開心，學習亦是如此。

「對於教育，我有著更為浪漫的想像」

雖然不切實際，我仍希望教師的角色是一盞明燈，帶著你撥開混沌的迷霧，看見世界真實的模樣，而不是拿著書本直接塞給你這東西那式子，然後就發下考卷只看分數。

最初的嘗試 — Youtube線上直播教學

2017 四月時，我嘗試經營直播「老闆，來點寇汀吧！」，以自己設計精緻的範例直播寫程式，吸引了一批熱愛技術與視覺設計的工程師跟設計師，雖然備受好評，卻在數次直播之後感到吃力，每次從基礎開始講解太久，後期講到用三角函數做特效時，在留言區大家總是一遍哀嚎。

數學好難，還是放棄來去做視覺吧，我們可能就是沒這天份

聽了當下真的是很生氣XD ，怎麼會還沒嘗試過就直接放棄了呢？於是出國前我花了一整年時間，製作了「動態互動網頁特效入門」，橫跨 基礎網頁、JS入門、Canvas與特效動畫到Vue進階應用，超過60個精緻範例與400張以上的投影片的課程，貪婪的把自己的所學化為精緻的教材，不到十個小時募資超過600%，至今已接近2300位學生。

「動態互動網頁特效入門」的掙扎與誕生

這堂課最初的點子，是來自於做在直播時做canvas動態時鐘，講到了畢式定理跟一些三角函數的應用，當時真的很害怕大家會一頭霧水，還好用到的部分數學還沒很難，所以順利的把範例寫出來，也直白的做到讓大家能懂，教東西虐待大家的時候還挺有成就感的XD

從那之後動機越來越強烈，延伸成第二門課的主題「動態互動網頁特效入門」，也觀察到一個現象，很多前端工程師或設計師在寫動畫或是特效的時候，都是用現成的函式庫或程式碼，我想讓大家看見，怎樣從基礎了解原理，如何去應用巧妙的概念或演算法。

用有趣的範例，從程式、數學、或設計，整合式的帶你走入絢麗的特效網頁世界，從解決真實的問題或創作來看見學習的目的。

從一個完整入門的角度開發各式互動網頁的經驗，敘述自己平常怎麼思考問題、如何理解程式運作，不只是會寫寫網頁語法，而是真的用這些工具，循序漸進的從自己的手中做出絢麗、夠專業的作品。

所以我從要怎麼做出特效動畫開始想起，首先用程式畫一些簡單的圖形，然後因為座標開始複雜了，就會學習如何使用向量來操作東西，接著東西要能互動就要引入物件的概念，並且賦予每個在畫面上的元素特性，最後是一些進階的數學，比如三角函數、極座標等等。

我把所有想要教的概念一個個放到Trello上，頓時覺得我好像在教高中數學啊XD 很希望一教完這些概念就能讓大家看見成果，所以我每個都設計了一個很精緻的案例，為的就是讓大家一學完就有感覺，更會愛上這些抽象卻又美好的工具。

首先起頭的系列單元是「HTML/CSS 快速入門」

因為畢竟是寫網頁，所以還是需要把基礎的元素、語法以及基本的html/css 以及pug/sass講清楚，但是因為很多人是舊生，所以我重新設計了全部的範例，並加入更多漂亮的示範帶大家精煉入門。

課程內容包含flex 、前處理語言模組使用，重新所有的設計範例，帶你熟悉網頁基礎語法，到使用sass/pug 做出漂亮介面，鍛鍊到能夠憑著純粹CSS就能寫出很漂亮的動態效果，我最喜歡的是裡面我做很久的時間盒子，可以切換動態的流星雨與白天，全部用html與css建構成。

接著是程式基礎：「JavaScript入門到進階 」

程式語言的邏輯非常重要，如果有學過任何一種語言，應該就能體會到其實有很多基本的概念要掌握，從變數、字串、迴圈到簡單的邏輯判斷、陣列操作，到開始加入時間的控制製作動畫，我認為程式的基礎重要在於說，知道我們要解決問題，然後用有邏輯的語言敘述邏輯給電腦執行，所以不僅是了解語法，而是了解 為什麼會有這個概念，又能用在哪裡。

教完字串操作跟動畫後有一個Project是做摩斯密碼翻譯器，除了可以打鐵趁熱的讓的大家練習怎麼操作字串跟動畫之外，更能夠完整練習函數的使用，把程式模組化、讓他們能夠重複應用。

我以10幾個有趣範例入門JS打基礎，到後面帶物件導向的概念，從寫義大利麵式的程式，到變成可以獨立完成有趣的小應用，開始加入程式之後，就有了能做互動的更多工具，最後一個完成的Project就結合鋼琴音效做了記憶遊戲，教大家遊戲控制跟流程的設計。

然後就進入主題 — Canvas與特效動畫了！

從數學座標、物理模擬、三角函數到音效設計，讓你結合數學跟程式，創造互動藝術與各種遊戲(agar.io / 小精靈 / 科幻碼表…等)，做10個範例與6個大專案，這是這次課程的最精華部分XD

在製作了第一個單元的繪圖練習之後，我加上了利用偏移跟調整座標系的工具，在一個範例裡面偷渡了九個範例，快速讓大家練習進階的繪圖跟狀態保存，用堆疊的概念保存畫布當下的轉換狀態，就能夠繪製非常複雜的圖形。

接著會了繪製之後，我們了解到畫布上面都是沒有狀態保存跟物件的概念的，所以開始要用es6的class語法製作一個球的物件，並加入滑鼠控制與偵測座標，讓我們可以去跟球互動，並學習物理概念，把位置、速度、加速度包在球的狀態中。

在這之後為了更複雜的座標跟數值計算，引入了向量跟三角函數的概念，讓我們能夠更容易與直觀的去了解物件旋轉、極座標跟電腦世界中這些形狀怎麼繪製出來的過程，如果稍微延伸下剛剛的球的範例，大量的產生物件就能夠變成漂亮的粒子系統。

接著利用三角函數的概念，就能夠繪製很漂亮的時鐘，製作FUI的科幻感。

而到這邊，大致上就是基礎概念都教完了，最重要的就是應用了，要如何結合不同的技術建構有趣的互動範例呢？

「直接實戰，大量從頭建構的完整範例練習」

所以接下來的就是直接建構一個大型的應用範例，比如我自己喜歡的遊戲或是互動藝術，分析我想要達到的效果，然後一步一步的解析 會用的原理，從頭開始建構出來。

如果結合繪製加上遞迴的概念製作生成式藝術，學會利用機率的概念長初樹枝，加上一點電腦圖學的烏龜繪圖法，就能夠畫出漂亮的大樹。

學習玩靜態的操作之後，如果使用TweenMax結合速度函數，可以操縱數值做出很漂亮的動畫，所以除了直接操作html元素，還能拿來針對js的物件製作連續的平滑數值，就能夠套用動畫法則讓畫面很生動。

如果學完用TweenMax動畫之後利用向量模型，可以製作引力、斥力，與接觸判斷，再結合物件導向從遊戲物件繼承到每個玩家，就能做出一個有幾乎完整功能的agar.io，再加一點點小判斷就能幫其他的球加上AI，我自己做完整個範例玩了很久XDDD

接著結合物理的概念，製作小朋友下樓梯的遊戲，樓梯有不同的種類、物理性質，加上遊戲控制邏輯之後，使用繼承的概念製作遊戲物件到延伸成不同類型的階梯，懷舊的小遊戲就在手中誕生了。

在後期的幾個大Project中，我自己最喜歡的是做了經典的小精靈，從地圖的設計、物件生成、牆面繪製，到如何去控制小精靈跟鬼的動畫，最後加上接觸判斷、鬼的吃食物機制，和會追隨玩家的AI，兩個小時的範例，但我用了將近兩個禮拜完成。

好啦我知道真的很多，所以製作課程的時候真的很崩潰，每次都在埋怨自己當初為什麼要開這麼多單元… 但是我既然答應了大家，我就要完整的完成這個東西，不僅是對自己負責任，而是真的燃盡生命，讓大家看見我所相信的世界。

最後系列是前端資料框架的使用 — Vue.js

因為現代前端框架真的很重要，所以最後從了解為什麼需要資料同步與前端框架，帶你從應用情景（車票、商品列表、電影選擇、撲克牌遊戲）入門，掌握如何將vue.js應用在互動網頁上，也特意設計了互動範例，不只是做個簡單的todolist，而是能拿來製作實務應用中精緻的互動遊戲或介面。

這個系列單元的Project是製作一個電影清單選擇的介面，結合Vue.js先將資料渲染成網頁上的元素，然後解構Vue.js中的事件觸發，加上TweenMax調整裡面使用者動作的觸發跟回饋，在裡面練習了CSS的調整介面、FlexBox、Vue的渲染跟計算屬性、方法、製作非同步的動畫狀態…等，當初也是構思非常的久，如何練習得到每個有教過的細節。

加碼單元

在最後加碼單元中，我介紹了 TimelineMax / D3 / Three.js ，幾乎每一個單元都可以當成獨立的課程來教了，裡面直接用60分鐘帶大家了解函式庫的特性、使用方式，比如用timelineMax+滑鼠來製作卷動動畫，或使用Three.js製作一個酷炫的原子轉轉畫面

課程內容介紹大概就到這

還有超過一半的範例並沒有放上來，但每一個都是熬了好幾天夜，白了好幾根頭髮才生出來的，好多失敗的草稿，好多覺得不夠好的範例都一再一再的雕琢，為的就是最後端上來，呈現在大家眼前的每個東西都看起足夠完美。

「結合物理、動畫、音效、藝術、文字、技術知識、古早遊戲，最大程度打開你對互動網頁的想像」

內容的深度、廣度、範例複雜度，如果把三者全部點好點滿…

原本以為這堂課最困難的地方會是範例設計，但是隨著準備投影片的過程，發現要把這些數學跟程式的概念講解的夠清楚直白實在是很難啊！不僅要從日常有趣的範例開始帶入主題，還要一些圖解跟動畫輔助才能一目瞭然，尤其要重新消化一遍自己熟悉的東西。

錄製過程中的困難

一直以來，我希望實作可以藉由完整的思路，能從零開始建構每個範例作品，因此在錄製課程時總是花很多的時間在不斷順內容，不斷重錄，以及一直修改投影片，雖然時間上的掌控一直沒能拿適當，常會花比預期長非常多的時間在準備課程。

因為對自己的標準提升，所以錄音、口條與後製都更完美主義了，想更清楚的講解概念，準備了數百張投影片跟說明圖，同時程式變得更難、更複雜，講解難度大幅提高，因為沒有人開設過這樣的課程，得要慢慢濃縮淬煉出整條課程的大綱路線。

這個影片大致上就是整堂課的流程，從開頭、講解投影片跟原理，然後到livecoding把整個案例實作出來，一刀未剪，完整的從零開始建構，一邊講解思考流程、為什麼這樣做，以及語法要用什麼。

對我而言，因為製課難度的大幅提升，每個單元的時間都非常難以掌握，常常因為想要設計一個很棒的範例，一兩個禮拜就過去了，再加上還要把觀念消化、講解、程式練習講過幾遍跟重構，所以其實單元上線拖了非常之久，也很感謝所有學生耐心的包容。

另外很感謝的是Hahow的負責Review我課程的詩涵，完整的把3000分鐘看過（真的很厲害），給予修改跟調整的建議，以及協助我把整體的課程時程規劃做好，和在過程中處理了很多對外的客服問題，雖然知道這堂課的時程延誤了很多，仍然耐心細心的一起處理完整堂課程。

那些瀕臨放棄的時刻

2018三月時是最黑暗的時期，課程上線進度落後，不斷被催稿，每次錄音看天逐漸亮了就覺得好崩潰，想到要連續講3小時的範例就覺得焦慮，要繃緊神經到極限，順暢、有調理、好吸收的把整個程式重新實作一遍。

總想著，我幹嘛把東西做那麼精緻，但是現在回頭看，就好似看到茫茫大雪中，一條深刻且扎實的足跡就這樣踏了過來，唯有熬過那樣的寒冬，才能留下在心中足夠完美的這一門課，迎來百花綻放的春天。

這一年來不斷的在攝取新的領域，同時規劃完整的基礎入門，比如我在音樂學到了合成器、聲音的基礎概念，就把他直接應用到範例中，或是看到了什麼真的很酷的遊戲，就想著怎麼把他用自己的技術與想法詮釋，很希望能夠在此留下一個里程碑，把至今探索數學跟程式的整合道路，以開發軟體、遊戲跟網頁十年左右一路學習過來的脈絡呈現。

為這條艱澀的道路點上一盞一盞的路燈，從此不再漆黑。

一場沒有終點的旅行

對於很多人來說，這一堂課就像是一場沒有終點的旅行，而對我來說是很大的里程碑，把從開始寫程式、開工作室到現在的功力都放在這裡，做一個完整的整理希望能幫上想要探索這條路的人，一方面也是告訴自己告一個段落，不要在已經會的東西裡頭打轉，再起步伐去探索未知的世界。

寫網頁真的只有如此嗎？

我們是否因為工作而忘記了創作的初衷？

學會數學或技術到底該怎麼用在日常生活中？

創作到底還能以什麼形式、什麼體驗展現呢？

這些疑問，想透過這堂課也充分的證明了我所相信的事物，而我也放下了至今的包袱，前往紐約攻讀碩士探詢對於這些想像的更多不同解法了

希望不管你什麼時候回來，這門課都能成為你堅實的後盾不只教程式，更打好數學、架構設計跟特效的內功實戰，不管是剛走上程式路途的你，正在路上跌跌撞撞的，還是已經身經百戰的工程師，都能在此得到收穫。

有一天，如果有人跟我說，嘿！ 我看了你的課程，謝謝你把這條足跡留下來，那一切的努力就值得了吧！

歡迎你一起加入這條通往未知的旅行

動態互動網頁特效入門，這堂課從html/css 講到 物件導向 講到 數學、音樂、遊戲的綜合應用，囊括JavaScript完整入門、es6物件導向，到後來自己了解原理並做一個遊戲引擎，範例從記憶遊戲、小精靈、生成式藝術到agar.io。

長達3085分鐘，超過60個精緻範例與400張的投影片以上，以及四個加碼單元vue-cli、GSAP、D3、Three.js的投影片，成為hahow上最長的課程。

特效課堂連結：https://hahow.in/cr/monoame-webdesign2

2016第一堂課的心得：從不只是一門線上課程-而是一場推動進化的豪賭

釀造一門結合網頁、設計、數學與特效的線上程式課程 was originally published in 老闆來點寇汀吧 on Medium, where people are continuing the conversation by highlighting and responding to this story.

(2016舊文整理)

在課程上線滿一個月的這天，啜著咖啡看到人數已逐漸來到了1667人，整理著每天到三四點睡留下來的瓶瓶罐罐跟咖啡杯，試圖留下些什麼紀錄，回神才發現準備課程這段漫長的道路已接近了尾聲，便打起了草稿想把這一切曲折離奇、燃燒生命的光芒記下

「寫網頁好難喔….每次看線上程式教學，都在講解功能沒講怎麼完成一個好看的網頁，總覺得自己做出來，離別人美美的網站就是有一段沮喪的距離」

我想，這句話是當初開始想開課的初衷，也是自己三年前開始踏入網頁領域自學的痛，總覺得無法掌控的各種超自然力量在影響網頁的排版，各種摸不清底細的屬性，總要擺兩包科學麵獻祭祈禱網頁乖乖的不要跑掉，光是用工程師思維把網站寫出來都很吃力了，更別提要如何處理視覺、文字，讓網頁不會看起來陽春的像小學電腦課做的。

三年前第一次接網頁案子(再之前做網頁是國中flash時代了..)

那時候第一次網頁還是脫離不了所見及所得軟體，要改東西直接拖拉，用adobe animate不顧結構做出一個還算可以用的網站，心想，做網站不過就如此嘛，我幹嘛那麼辛苦去寫html跟css，尤其當那時html只知道可以放元素，css只知道改改文字顏色改改框線的時候。

波折的三年有很多奇怪的案子

經過了波折的三年，接了數十個專案的歷練跟學習下來:

1. 從單純的html/css，開始踏入js、踏入各種svg/canvas動畫效果
2. 一開始接觸bootstrap之後狂用，但受限於風格跟不易改動後又捨棄，那時功力還沒有辦法秒速做到bootstrap水準。
3. 逐漸用很基本的css/Jquery 也能夠做出很漂亮精準的互動，開始不喜歡用別人的套件，用自己理解到的原理或概念重建parallax網站或互動
4. 開始研究物件結構跟演算法製作動態跟互動的網頁，愛上優雅的物件結構跟定義，把重力、3D、生物、遊戲等等概念濃縮到網頁上。
5. 因為要做售票系統跟會員開始入門後端php跟資料庫，到中期為了給客戶編輯自幹了一套還算不錯用的CMS，在這個時期建立了完整前後端的概念，體驗到了溝通問題也體驗到接案的窘境。
6. 摸過laravel/ruby on rails幾個月，覺得有趣但模板一半切完板之後交給後端處理，改動的可能性就消失了，回到原本輕型框架的網頁結構。
7. 寫了一年後發現資料在後端處理跟產生網頁真的太麻煩，觸碰到了前端框架angular.js/ Vue.js，愛上了用資料轉換網頁的樂趣，從快速變成極快速，尤其Vue.js的調性真的很簡潔大方。
8. 開始集大成，把手邊能用的技術逐漸都熟練，開始把實踐的功能寫成一個個模組，比如自動分析列表產生音波文字，用後期分析 的方式，以canvas為基礎動態產生靈活的動畫，操作聲音、數學，覺得網頁真的可能性無限。
9. 更加熟悉資料流/前端的互動，專案在規畫的時候會更全盤的思考如何在既有的架構跟畫面下創造更多可能性，讓網頁活起來，或是有個觸動心靈的點，甚至看到有趣可以實驗的案例就直接用網站實現出來(像是示波器)。

這些年來很多有趣的案例:

生活中很多有趣的案例都可以當作網頁的素材，所以對我而言，網頁是一種呈現媒介，很有力量跟可能性的呈現媒介，第一個：他快，可以迅速的把東西/產品上架/測試實驗性的想法，第二個：他會動，比起靜態的呈現，互動感會帶給我們很大的感受升級，第三個：他跨平台，只要有瀏覽器就有網站。

其他的範例可以到 hahow課程頁面 或我的codepen觀看。

「恩..說是要分享，但是要從哪裡開始呢?」

5月時，與hahow的魏敏討論市場上網頁技術的需求之後，決定開設一門讓大家可以輕鬆入門網頁，卻又不像是一般codeacademy / 一些免費的教學，只能大概了解概念，卻沒有辦法有系統的完成一個網頁跟調整視覺。

線上課程HAHOW平台

討論完之後，終於訂出了這次課程精準的目標，說是精準其實也有點惶恐，是一個大方向，很少人嘗試過的教學方式:

「我想要用設計的角度去教程式(恩?」

因此將課程的目標定為「用illstrator的概念了解並實作網頁」，並且每一個範例是貨真價實的，帶著把一個網頁從頭刻到尾，會碰到甚麼問題/要調整那些css/視覺的考量如何轉換成程式的架構…等，比起怎麼做，更重視 「想要達成甚麼效果」跟「為什麼要這樣做」，才不會讓東西過於枯燥。

原本的大鋼規劃有十三堂課，分別講解html基礎概念到css到帶入一些js的基礎概念，想說畢竟是”入門”課程嘛，就是每一個會用到的東西大概帶到就ok了:

///原本的課程規劃
1 - html/css/js 網站結構介紹- 一棵三種語言構成的大樹
2 - 規劃架構- 寫網頁前的規劃與準備
3 - 元素定位- 基礎元素定位 上下左右對齊與大小
4 - 基礎html/css - 網頁名片
5 - 開始開發- 架構原則- 使用 class 與 id 操作元素
6 - 開始開發- Codepen操作實務- 介紹sass與jade 快速開發入門
7 - 元素定位- padding、margin、align 元素之間彼此的關係
8 - 元素定位- div布局策略、overflow 有最好的棋盤才能下最好的棋
9 - 視覺介面- css 初階視覺調整
10 - 視覺介面- 顏色、大小、一切你在Illstrator會看到的美好事物
11 - 視覺介面- 字體 小小改變就能帶來超高CP值的調整
12 - 視覺介面- Illstrator 圖像匯入與png實用
13 - 靜態專案實作-實作模仿刻一個HAHOW的課程頁面
14 - 使用者互動- css 動畫-滑鼠的點擊、進入、滑動互動
15 - 使用者互動-基礎 css animation使用 用%影格概念操作動畫
16 - JS 基礎入門 - 使用Jquery改變元件外觀
17 - JS 基礎入門 - 使用Jquery 在各種事件中觸發網頁動態改變
18 - SVG - 向量不失真的網頁圖像格式
19 - SVG 動畫 - 讓你的LOGO或圖像動起來
20 - 動態專案實作- 做一個獨特動態的個人頁面
21 - 破除障礙- 問題解決與找資源的技巧
22 - 後續發展- 兩大路線 (前端網頁佈局/ 專攻動畫與圖形處理)

「錯了，錯了，全部都錯了」

隨著湧入的人越來越多，我一開始錄的時候發現，完全不是這麼回事啊!!!

如果稀哩呼嚕一堂講了兩個小時，誰聽得懂你在做甚麼，尤其當教學的東西到一個量之後沒有任何練習範例或看的到的產出，看的人就會開始覺得無趣抽象，抓不到你想傳述的概念，更別提去練習或了解了，這種教學方式，就像是拿著一本說明書一樣對著學生在念嘛，自己看著都覺得無趣了，更別提怎麼讓別人愉悅的把東西學進去。

想了好久好久，決定來進行一次大改造，想像自己如果是平面設計師，完全沒有程式基礎的時候，會怎麼樣去了解一個東西，為什麼要這樣做那樣做呢，到底什麼樣的範例事會讓大家覺得有趣的? 什麼才能讓大家再做中學，學中獲得成就感呢?

也因此課程暴增到了九十幾堂，每一堂原本預計5~10分鐘，但也時常超過20分鐘甚至到一個小時，就為了把最完整的思考流程、設計等等脈絡帶出來，才算是好的教學，想像自己是一個完全的新手，對於網站開始要有了解，有了全面的認知之後，再開始進入開發階段，一個個把小小的工具跟技能練好實作，再一個階段一個階段的把看似不可能的專案實踐出來，在小成就感中喜悅，逐漸成長。

Project 2 品牌視覺管理-使用sass/jade管理開發

///新的課程列表
 1 - 最新公告區(2016/9/28)-點擊"講義"查看最新課程消息
 2 - 楔子-課程進行模式說明 
 3 - 楔子-網頁前後端如何運作 
 4 - 基礎前期規劃-網站專案開發流程 
 5 - 基礎前期規劃-網站主題名稱logo 
 6 - 基礎前期規劃-網站瀏覽結構樹規劃 
 7 - 基礎前期規劃-網站排版規劃與分類 
 8 - 基礎前期規劃-網站視覺配色概念與資源 
 9 - 本機環境架設 - sublime 操作與瀏覽器預覽網頁 
 10 - 本機環境架設 - 伺服器瀏覽與原理講解 
 11 - Codepen環境架設 - 平台介紹/註冊與基礎設定 
 12 - Codepen環境架設 - 實際使用sublime中快速鍵 
 13 - 基礎HTML/CSS - html中元素&排列的概念 
 14 - 基礎HTML/CSS - html中結構&層級的概念 
 15 - 基礎HTML/CSS - <project 0> 簡易版本自我介紹 
 16 - 基礎HTML/CSS - css 直接調整外觀與顏色框線 
 17 - 基礎HTML/CSS - css 分開撰寫 - class&id概念 
 18 - 基礎HTML/CSS - css 顯示方式 display block/inline 
 19 - 基礎HTML/CSS - css 元素位置 - 相對 / 絕對定位 
 20 - 基礎HTML/CSS - css 內間隔/外間隔(padding/margin) 
 21 - 基礎HTML/CSS - css 字體變化與span-在文章段落中製作變化 
 22 - 基礎HTML/CSS - <project 1> html / css 大整合-製作獨特名片網頁 
 23 - ​基礎HTML/CSS - <homework 1> 功課說明-製作自己的技能網頁 
 24 - 系統性管理開發 - html縮寫模組-Emmet 介紹 
 25 - 系統性管理開發 - html樣板語言-jade (課程主要使用) 
 26 - 系統性管理開發 - css 樣板語言-sass (課程主要使用) 
 27 - 系統性管理開發 - sass - 變數概念管理色彩&內容 
 28 - 系統性管理開發 - sass - 動態產生模組mixin概念 
 29 - 系統性管理開發 - sass - 常用mixin與累積資源 
 30 - 系統性管理開發 - html參考資料轉換jade 
 31 - 系統性管理開發 - <project 2> 實作網頁品牌視覺指導套色 
 32 - 素材前期準備 - 如何在以拉中製作icon/圖像 
 33 - 素材前期準備 - 如何輸出圖片jpeg/png/svg 
 34 - 素材前期準備 - 將圖片上傳到imgur影像網站 
 35 - 素材前期準備 - 管理網頁色彩(guideline/sass/js) 
 36 - 前端基礎動畫互動-html attr 與自定義屬性名稱 
 37 - 前端基礎動畫互動 - css 綜合定位運用 absolute / relative 
 38 - 前端基礎動畫互動 - css 加入基礎滑鼠互動 :hover / :active 
 39 - 前端基礎動畫互動 - css 動畫基礎 transition-duration/delay 
 40 - 前端基礎動畫互動 - css 製作影格動畫 animation/keyframes 
 41 - 前端基礎動畫互動 - css 動畫速度曲線 fillmode/speed curve 
 42 - 前端基礎動畫互動 - SVG - 繪製向量網頁圖片 / logo 
 43 - 前端基礎動畫互動 - SVG - 讓你的LOGO或圖像動起來 
 44 - 前端基礎動畫互動 - <project 3> 動態互動天氣盒子 
 45 - 前端進階程式js-引言 
 46 - 前端進階程式js - jquery 動態改變css外觀/ html內容 
 47 - 前端進階程式js - jquery 初階滑鼠事件 - click/hover 
 48 - 前端進階程式js - jquery 變數概念- 儲存修改與判斷 
 49 - 前端進階程式js - json 物件陣列概念 & for 遍歷 
 50 - 前端進階程式js - jquery / json 動態產生購物車清單 
 51 - 前端進階程式js - Jquery ajax - 非同步載入與應用介紹 
 52 - 前端進階程式js - Jquery ajax - 實作導入資料代辦清單 
 53 - 前端進階程式js - <project 4> 實作購物車-動態新增購買物品與結算 
 54 - RWD原理與應用-內容流與概念說明 
 55 - RWD原理與應用-指定比例尺寸% 與max-width/min-width 
 56 - RWD原理與應用-重新排版的原理-特定條件css-media query 
 57 - RWD原理與應用-實作手機版面-模仿fb帳號頁面桌面/手機板變化 
 58 - RWD原理與應用-懶人工具- bootstrap 原理與結構講解 
 59 - RWD原理與應用-bootstrap 格線系統(container/row/column)原理 
 60 - RWD原理與應用-bootstrap 欄(xs/sm/md/lg) RWD應用 
 61 - RWD原理與應用-bootstrap 應用技巧 padding型規劃/多層div 
 62 - <project 5> 實際應用範例 bootstrap-常見企業品牌網頁 
 63 - 網頁視覺設計-流程-版面規劃軟體 AI/SKETCH/紙筆 
 64 - 網頁視覺設計-流程-與頁面結構/跳轉方式規劃 
 65 - 網頁視覺設計-元素-樣式 顏色規劃 
 66 - 網頁視覺設計-元素-元素動畫 反應規劃 
 67 - 網頁視覺設計-元素-從元素建構而上的設計 
 68 - 網頁視覺設計-元素-從頁面整體切分而下的設計 
 69 - 網頁視覺設計-元素-從設計轉換程式網頁的常用技巧 
 70 - <project 6> 實際網站應用案例-Material Design風UI/UX 
 71 - 前端框架Vue.js-為什麼要用資料導向做網頁(回顧js) 
 72 - 前端框架Vue.js-將變數代入模板中 
 73 - 前端框架Vue.js-v-for 列舉元素應用 
 74 - 前端框架Vue.js-v-model 使用者輸入雙向綁定 
 75 - 前端框架Vue.js- v-if / v-show 條件渲染與資料的後處理-實作博客來 
 76 - 前端框架Vue.js- v-on / method 建立js事件 
 77 - 前端框架Vue.js-與AJAX的對接 動態載入資訊 
 78 - 前端框架Vue.js-綜合案例-使用hahow課程資料 
 79 - <project 7> 客製化待辦清單Todo List 
 80 - 購買伺服器部署/網域-伺服器原理與規格說明 
 81 - 購買伺服器部署/網域-購買linux主機與網址DNS設置 
 82 - 購買伺服器部署/網域-購買不能ssh連線的主機設置 
 83 - 購買伺服器部署/網域-安裝apache/mysql 
 84 - 購買伺服器部署/網域-使用filezilla軟體連線與上傳 
 85 - 購買伺服器部署/網域-使用sublime sftp進行同步 
 86 - <project 7> 購買伺服器部署/網域-網站上線實作 
 87 - 實作案例分析-HAHOW-練習使用Bootstrap+Vue.js建構課程頁面 
 88 - 實作案例分析-Autodesk-影片式背景一頁式網頁+導覽列 
 89 - 實作案例分析-Medium-部落格-多資料首頁 
 90 - 破除障礙- 問題解決與找資源的技巧 
 91 - 後續發展- 兩大路線 (前端網頁佈局/ 專攻動畫與圖形處理)

我知道列表看起來有點長有點可怕，但是每個單元都是5–10分鐘(後期長超過20…)，一個功能一個功能帶入並詳細的分析、演示這會用在真正寫網頁的那些地方，帶著實作一次，也因為方法、結構都是一整套下來，照著思路練習過幾次，自然就能逐漸熟悉網頁撰寫的流程。

如果以前有人這樣帶著我這樣有趣的入門網頁，應該就可以少雷的一兩年的人了吧(笑，有些自己探索了很久去蕪存菁的重點，也是在時間歷練之下理出的心法，所以我不後悔做這樣的決定，更是與有榮焉希望有朝一日如果看到設計師們漸漸的不再懼怕程式，不管是溝通、還是台灣網頁界的現況都能夠得到極大的成長。

「每個人都是在雷人中成長，磨利了現在的自己，那為什麼要讓大家再自己坎坷的走一遍?」

曾經有一個建築廠商找我，希望能夠製作一個工地管理系統，方便能夠把工人的位置/狀態回報/或是建材等等的資訊，以一個APP或是網頁的方式呈現，在建材需要的數量/報價上也能夠及時的掌握數量跟回報，他們長期以來的人事都是email傳excel檔案管理，亂糟糟的毫無章法，更長漏東漏西或時間成本全砸在上面。

這是非常好的改變，但是一個晚上他打電話來，說他不想做了，因為不管怎麼做都沒有辦法防止有心人士看到系統，然後直接請工程師團隊模仿一個出來，他說：

「這樣不就自己花了錢來讓競爭對手變厲害嗎？ 我幹嘛這樣做」

然後就憤憤不平的掛電話了，當下我是十分錯愕的，談好已經幾乎要開始執行的案子突然就沒了。

但是更令我沮喪的是，他們寧可用各種複雜的excel報表在有時差的傳遞資料/手動計算，而不願意試圖改良前進，即使對手也許會看到跟進這樣的制度，台灣的傳統廠商到底發生了什麼問題，為什麼當我們踩穩了一個能夠賺錢跟成長的位置之後就放棄了進化呢？

同樣的道理套用在我的課程上，有很多人跟我說: 那是你的專業耶！ 你捨得這樣掏心掏肺的把課程設計的像蛋糕一樣容易吸收，把大量的經驗分享出去!?你不怕別人這樣學完之後就變成你的競爭對手嗎?

我們不願意進步，恐懼別人進步，因為潛意識知道自己沒在前進

課程錄製中大量的砲灰，大概三分之一

有有趣的對手交流較勁比自己獨鬥有趣，更何況，誰說我一輩子要靠這個吃飯，難道會寫網頁賺錢之後就要死命的抱著自己僅有的一點點技能嗎? 我從來都沒有放棄前進，放棄學習，也因此在課程中學到的儘管多，也僅僅是過去的我的巔峰，一轉眼又再成為遠方的背影。

雖然這陣子錄課程錄到回台北過家門而不入XD(喂，大量的不讀不回別人訊息XD 好多好多時間都砸在這個上面，還是真的很開心的，當然不是要催大家看，影片一直都會在，只希望你記得你曾經想學習，就不會忘記初衷。

「一場豪賭 一場自我進化」

台灣現況 設計師-在傳統的職場環境（台灣）中，設計師被稱作是美工，不過我想這雙方都有一點問題，一個是設計師被動地認為自己是接收工作並且直接執行美感轉換，像是一個人體Photoshop一般的存在，所以在面對不合理的修改要求、抱怨的時候會怨天尤人，心情也差了，但還是認命地改，不企圖反駁什麼，畢竟台灣社會從小到大的教育並不鼓勵我們表達想法，多得是你就照我說的做就對了的心態。

那時候做Remy Martin的APP介面設計做超久，無限的修改…

設計做到後期之後反而覺得真正重要的是「溝通」，比起美感，不管怎麼樣的風格都有它美的極限在且風格間並非誰比較好，而是誰比較適合這個載體資訊，網頁的本質是溝通媒介，所以當溝通的訊息沒有成功的傳遞，不管UI再絢麗再細緻都會很遺憾的無法發揮價值。

講到溝通的隔閡，從開始接網頁相關的案子也滿三年了，持續的成長茁壯後看到業界發生的大部分情況都是「設計師出稿 工程師刻板」，而且在中間會有很多時候無法溝通，設計師難以了解以程式方式網頁能夠做到的，工程師覺得設計師機車一直在調整小細節或出各種難搞的spec，當固守著自己領域的時候，就會出現像是丟皮球般的埋怨跟被動放棄溝通就會出現。

「設計師們，相信我，會了技術的你們根本是外掛，自產素材VI、想動態、實作細節，更可以去探索跟完成原本純視覺設計達不到的事情」

如果有著平面設計的基礎，在設計網站版面的時候自然能比純工程師有更高的彈性，可以改變的事情跟嘗試的就更多了，除了飛來飛去動來動去的花俏UI之外，一般中規中局的版面規劃也能以平面設計的角度關注細節，自然在介面的規劃上就拉開了一段距離，更別提很多設計師身兼插畫家，可以自己產出網頁用的素材，不用辛苦上google搜尋一堆不同風格的素材之後，苦惱怎麼拼在一起了，這樣的優勢真的是犯規級別。

所以如果設計師學習了網頁程式，有人以設計師的角度去分析，從「想要讓網站視覺變得好的時候要怎麼做」去層層剖析達到目的需要的方法跟教學，就能夠以很短的速度入門、昇華，融合原有的設計既能達到一個新的境界，這樣的境界是新時代的「雜學」，讓工具成為自己的左右手，而非最終的目的。

最後關於價錢的部分，有人跟我說

「2000元你傻啦，這樣的課程去外面xx電腦之類的根本是幾萬塊在收的」

其實我並不怎麼怕，因為你不看課程永遠損失的是自己，學到的東西永遠跟自己的努力成正比的付出。

我在教學中學到的事物，經過講過一遍之後 能力三級跳，基礎功更為扎實，其實也算是收穫很多，重點是現在的時代不一樣，群募的線上課程節省了講師用無限重複的時間去授課的缺點，所以這樣開2000元收一千多個學生，跟8000元收二十個學生，而且要不斷的重複一樣的事情，這樣的效果是跟可以帶來的影響力是乘倍數增加的，也是以前時代做不到的，而我也不用那麼大的時間成本重複的授課，可以鑽研自己喜愛的事物。

像是學生裡面就有很多讓我驚嘆的，才剛學會網頁就做出真的很不錯的作品:

一些有趣的大家看完後創作的作品

他們都是動態網站而不是純平面的作品，靠程式刻出來的! 右上 左上 右下 左下

很主動會去找各種資源/方法w 作品簡歷也簡潔有力

codepen 連結: 連結

他的動態超強大的QWQQ 而且超認真

附上Codepen連結 : 連結

有風格在的視覺Guideline (http://codepen.io/Pacpapapa/pen/vXkJvr)

目前，已經1600人修課 ，超過1/3的人開始第一堂課，將近100人開始完成第一個Project。

如果我們把工具當學科看 只會看到無趣，就像劇本設計一樣核心思想才是王道，希望所有買跟修這門課的同學，我都能夠幫助到你們，就像在幫助兩年前的自己一樣，不只傳授工具、更傳授了跨領域結合、我所信仰的雜學。

「我們無法一直在這片天空上飛翔，只能奮力保持著盡量不墜落」

一起進化吧，我把到目前為止的能量都放在這邊了， 如果有朝一日能夠讓即使1%的人開始踏出自己的領域，我也滿足了。 現在的各種平台盛行，很難觸及到所有人分享， 但願每個進來的人，都能收穫滿滿的離開，展開新的人生道路。 動畫互動網頁程式入門(HTML/CSS/JS)

p.s.如果這門課真的有幫助到你，讓你體會到網頁學習的樂趣， 再請不吝在給予評價與分享了:)

從不只是一門線上課程，而是一場推動進化的豪賭 was originally published in 老闆來點寇汀吧 on Medium, where people are continuing the conversation by highlighting and responding to this story.