學生心得:RZ
Opened this issue · 1 comments
《程式導師實驗計畫第三期》課後心得
請詳閱公開說明書
先來個簡單的自我介紹。
學歷與工作經歷
高職的統測,因為狗屎運猜了一整頁的專業科目還答對,進而分發上了國立科大,機械系學士畢業。大學的班排名普普,不上不下。
畢業後到現在這三年期間,都在做機械領域相關的工作,有半導體的,有機台設備商的,所學到和所用到的技能都是機械相關的。
程式經歷
大學期間學過 C++、Matlab、Python,除了 Python,其它都是系的必修課程,但是當時學習的心態都只是應付考試能及格則已。
Python 是我自學的,上線上課程,在 Coursera、ShareCourse、Udemy 等平台。
曾經想過轉職成為資料數據分析師,也考過統計類的國考,但這門檻很高,評估過後覺得短時間內無法轉職成功,就沒再繼續走這條下去。
個人特質
喜歡嘗鮮,也很容易放棄一件事,只要那件事開始變得無趣與乏味就不會再去碰它。
很愛鑽牛角尖,很愛觀察細節與研究細節,所以一件事情我可以從早做到晚,只要它符合第一段所說的相反條件-「有趣」。不過這種特質讓我沒辦法同時一次做好幾項重要的事,否則都會做不好。
擅長慣性思考與循序漸進的脈絡思考,跳 Tone 的思考與好幾層邏輯的事情會讓我的腦袋嚴重打結,除非慢慢一步一步去研究。
可能有點孤僻(?
在這門課的優勢
碰過變數、迴圈、函式、判別式這些基本的程式語言概念,雖然沒學過 JavaScript 和 PHP,可是對前述那些程式的專有名詞與基本用法不陌生。
雖然不是資工或資處等等與程式有關的科系,不過工程背景的思維模式與解決問題的方法大同小異。
因為離職,可以全心專注在這門課程上,而有較充裕與自由的時間去計劃與調配學習進度。
優勢的另一面-劣勢
對於規劃事情的架構沒有一套固有的邏輯去搭建,缺乏組織性。
學過別的程式語言,會覺得以前的我學得一蹋糊塗與不夠紮實,那麼再學其它的程式語言有可能會有相同的結局,因此自信心是負的。
過往有好多次學新的事物一下子就放棄,因此這也是導致自信心是負的其中一項原因。
之前的工作沒存到什麼錢,沒本錢讓我拖太久不工作,勢必得課程跟完後趕快找工作,因此賭注也很大,要是沒弄好而轉職失敗可能會面臨當前人生中最低潮的時刻。
轉捩點
從小到大都很愛玩電腦,玩線上遊戲,在人生當中其實有好幾次這樣的念頭閃過:「以後想寫程式,想跟那些工程師一樣,感覺很厲害,很酷很炫」,但人生好幾次的決定卻都不是與這方面有關的。
在機械領域的年資將近兩年,做過三份工作都是不同職位但和本科系有關的,也是本科系大多數人會走的三個大方向的職位。不管短期或是長期的工作體驗,這些工作實際上都沒有掀起我想要往前邁進的野心。
在做最後一份工作時,時常一邊做一邊思考:「我會想要在這行業一直做下去嗎?未來 10 年、20 年這樣子就好了嗎?安分守己地在這個不是很討厭也不是很喜歡的領域就好了嗎?」答案是否定的,一項事物對我沒有吸引力的話,我無法持續精進,我會沒有慾望想要在這方面更加努力,而這樣的工作心態對我來說,我不過就只是個空殼的身軀行走在毫無知覺的道路上。
於是我在 2019 年年初的時候,嘗試往很久以前就有想過的程式領域前進。首先我在某個線上學習平台重拾 Python 的懷抱,報名實體課程。後來看到 ALPHA Camp 的課程,加上耳聞網頁前端這條路相對於非本科轉職會稍微友善一些,因此開始在 ALPHA Camp 學習網頁全端相關的技術。一邊工作一邊學習,學了一個月後發現網頁的技術很有趣,學得也很有成就感,一方面也是網頁做出來的成果馬上看得見(「你的努力,我看得見」)。那時候認為說只要不斷努力再繼續學下去也許真的有辦法轉職,只是因為我同時在工作,再加上當時 ALPHA Camp 的課程對我來說學得很趕,導致我的自信心不是很穩定,覺得基本功不夠紮實,偶然看到 Huli 的這項實驗計畫,所以我又報名了這項計畫,打算重頭再學習並複習一遍之前 ALPHA Camp 的所學,也因為這項計畫和我想要轉職的目標很符合(而且不用先付學費),所以我最後辭職,全心專注在這門課。
拜門學藝
課程前五週的回顧。
初期的楚漢相爭
在課程的前一個月,我同時上 ALPHA Camp 那邊的課程,主要是在比較兩門課程的差異。經過一番在心中的評比後,這個計畫勝出了,主要原因是我認為這邊的計畫教學內容與方式是值得上下去的,也很適合我,應該說,我比較喜歡看影片學習,文謅謅的文章對我來說比較沒有溫度,有語音的教學模式會讓我更加印象深刻,老師所點出的重點與注意事項也會因語氣的轉換而有所記憶點。
萬丈高樓平地起
課程是從 Command Line 的教學開始,和 ALPHA Camp 有所不同。以前對命令提示字元的印象是很厲害的人在使用的,電腦專家使用命令提示字元快速地打了一堆指令,電腦就已經執行了很多道手續。
現在回頭過來看,這個教學排在第一週是絕佳的一件事,在第一週就讓我們開始接觸陌生的指令,陌生的 GitHub,讓我們接下來的 24 週都去碰它,直到現在背不出 cd
、git commit
、git status
、git branch
之類的指令還真的有點難。
切入 JavaScript
這個計畫是先從 JavaScript 開始學習而非 HTML、CSS,在這之前我在 ALPHA Camp 已經有學過一些 JavaScript,所以在學習課程的 JS101 內容的時候我的負擔沒有那麼大,JS101 後面的綜合題目練習畫龍點睛,學習完指令之後馬上接著練習題,測試自己是否真的學會了,還是只是假裝學會,前面幾題的題目不難,但是 Lv2 的題目就開始需要思考,這時就是融會貫通各種指令的時候。我必須說當時有幾題我想了非常久,那時有那麼點沮喪,這個現象在之前學 Python 或是其它程式語言的時候也有產生,也是之前學程式語言過不了門檻的一關,都是敗在認為自己想不到解法、腦袋不靈光而放棄學習。不過這次不同,我想到之前其他人給的寶貴建議,可以嘗試先把想跑的程式碼的最終結果先一行一行寫下來你想要怎麼執行它,這樣做之後,比較麻煩的題目最後都有做出來,屢試不爽。
前面的五週中,JavaScript 的學習就佔了兩週,我覺得恰到好處,以我的學習的狀況,其實我在那兩週沒有完全把 JavaScript 的內建函式或一些基本概念都記熟,但我為什麼又會認為恰到好處的原因在於,假如再多了一週,課程進度就會變得很拖,而且就算再多了一週,可能還是會有些東西沒辦法記熟,而且那些基本概念與語法在後面都有機會用到,另外一方面是常用的基本上也很難不記起來,比較少在用的等有用到再回頭去查或複習也無妨。另外 JS102 教的 Jest 有點到一些,在當週作業有實作,而在後面的課程都有類似的教學模式,點出一些前端會用到的技術(但就算沒有採用這些技術也做得出網頁),老師就是稍微點到沒有詳細深入去教學,這也和這門課程的核心價值之一「栽培自主的學習能力」有關。
網路基礎
在第四週學習網路相關的基礎知識,這一週的課程學習與寫程式碼無直接相關,但是卻是做網頁的人員必備知道的基礎觀念,像是 HTTP 協定、HTTP Method、TCP/IP 網路四層、API 的串接等等。這一週像是在扎根,網路底層原理的扎根,縱使今天不知道這些原理,其實也做得出一個網頁,但是會知其然而不知其所以然,硬湊出一個網頁,但會不曉得底層內部是怎麼運作的,因此如果打算要做其它的變化會沒辦法下手。
第四週老師對於網路背後的機制使用「傳紙條」的比喻方式極度到位,以另外一個角度切入並使用淺顯易懂的方式帶我們了解網路世界的概念。後來老師分別發布「傳紙條」和 API 機制的相關文章,也都是解釋地很白話的文章,也得以再次複習一遍這些底層機制。老師這樣淺顯易懂的教學模式也是讓我決定跟隨這項計畫到結束的一個重要因素。
初期小總結
課程前五週的難易度對我來說是整個課程相對輕鬆的一段,之前有學過的地方再複習一次;沒有學過的地方的內容也不會到很大量導致無法吸收,課程採取一個由淺入深的概念,但是這個「淺」又至關重要,不去熟悉它是很難繼續往課程後面走下去的。也還好課程是這樣的安排,我才能夠在初期的時候,同時上 ALPHA Camp 那邊的課程來做比較。
課程第一次的複習週內容,Lidemy HTTP Challenge 的小遊戲可以回顧自己是否已經了解 HTTP 相關的機制,那時候有幾題有卡關,也是頭一次在課程當中尋找解決方式,我想,自己解決問題也是這個課程的迷人之處,那個成就感和憑著老師的教學做出來的成品是完全不一樣的感受,有一種自己其實也不差的喜悅感,這份喜悅感一直支撐著我走到課程的後面。另外,還有 Lidemy OJ 的挑戰題,也是和 JS101 一樣需要動腦的解題,當時也是花了很久很久的時間才把 5 題給解出來,在課程一開始就意識到自己這部分的邏輯解題能力相當薄弱,不過我認為這是可以訓練的,只要繼續努力下去。
有一週某個同學說要在 Slack 建立一個 Q&A 群組,大家可以在 Q&A 群組裡面出題目讓其他同學回答,當時我是被同學選中的其中一員,這個群組在初期幫助我滿多的,不管是藉由同學的題目審視自己是否已經熟悉前五週的課程內容,還是嘗試以一個出題者的角度出題給同學同時也是自己問自己那些題目是否已經都深刻明白,加上有些題目當你沒有以出題者的角度想過的時候,會發現自己其實還沒熟悉那部分的內容,就是所謂的學習盲點。
踏入迷宮
前端與後端的學習與實作。
前端實作
HTML 與 CSS 的交織
HTML 和 CSS 之前在 ALPHA Camp 有學過一些,但是忘掉的也不少,這也是我選擇此計畫的原因之一,就是想再複習一遍。
這部份的教學我喜歡的地方是在教 CSS 的 display
和 position
屬性,講得很明白,不像 MDN 上面所寫的這麼抽象難懂。其它部分的教學就是中規中矩,重點部分與常用的語法都有提到,不過光靠課程的教學內容我認為是不太夠的,還有很多 HTML 和 CSS 的細節需要自己去摸索與研讀,在後面做其它的作業的時候非常有感這一點。
前端的應用
JavaScript 在前端的三大任務:介面、事件、資料,在第七週的時候除了前面這三項,還有學習同源政策和 CORS,是個學習量非常龐大的一週。之前在 ALPHA Camp 學到事件監聽的時候,覺得這個東西很難很難,因為某個節點放監聽產生的結果可能會在別的地方,跳來跳去的,我自己很不習慣這樣跳來跳去的互相對應,所以那時候在 ALPHA Camp 學習有一點信心受挫,但,也好險有在那邊學了第一次,因為在這堂課我再次接觸到事件監聽時,比較沒這麼怕了,或許是已經接觸過一次了,或者說是老師的教學也很好理解的緣故,讓我對事件監聽不再這麼不熟悉。另外有發現到老師對於 DOM 節點的選取語法沒有完全放進課程影片當中,我想這樣的用意也在於訓練我們自己去學習其它的用法。值得一提的是,事件的捕獲與冒泡機制在看過老師的這篇文章和課程內容之後其實就可以差不多能理解它的機制了。
第七週最難的地方不是在學習,而是作業,作業難的地方不是操作網頁介面、使用事件監聽或者是傳遞資料這些,難的地方在於要寫的邏輯,第一份作業是寫一個測試反應能力的遊戲,我當時沒有事前規劃每個步驟的優先順序,導致說每做一步就卡關一次,測出來的結果都和預期的不同,再加上需要用到一些課堂沒有教到的語法,比如 window.location.reload()
、removeEventListener
、clearTimeout
,這些是後來我自己查到有這些語法才得以做完這份作業。我以為第一份作業就很難了,結果第二份作業需要做的事情更複雜,表單的每個欄位的驗證,這個欄位要加什麼樣的事件監聽,還有執行順序也要考量到,我當時做了一件很蠢的事,我土法煉鋼寫了 200 多行很多重複的 code,明明曉得可以寫得更簡潔,可是卻不知從何下手,當時寫這題其實滿無力的,雖然作業的成果就和題目所規定的一樣,但深知自己所寫的 code 是不及格的。第三份作業是寫一個計算機,作業最基本要求是寫個加法和減法的運算,不需要連加,感想是沒有寫過還真不知道做出整台計算機的功能非常有點難度...我當時只完成最基本的要求而已,程式碼寫得也不夠好,某些 block 的功能擴展彈性不夠,只要我再多個乘法或除法的運算就會多好多行的 code,維護性非常差。做完這週的作業其實有一點點小小的失落,但我自己知道我目前的能力就是這個樣子,於是選擇先接受它,相信自己之後回來修改可以改得更好的,套一句之前在 ALPHA Camp 那邊的助教給予初學者寫程式的真諦:
「先求有,再求好」
API 串燒
第四週的時候有使用 node.js 的內建 module 去串 Twitch 的 API;第八週的時候則是藉由瀏覽器作為媒介,我們寫相關的 JavaScript 的語法去串 API,我自己認為如果老師沒有在教學上加以著墨這兩者的差異,我很有可能在初期的時候對於這兩者串 API 的差別還有所模糊。
第八週的 API 內容由於是經過瀏覽器來發送與接收 API 的相關資訊,因此有其限制在,像是同源政策的處理。這週的作業我記得前兩份內容不多,很單純地讓我們熟悉 XML 的寫法,但我作業所做的時間還是有點長,主要的原因在對於 HTML 與 CSS 的不熟悉,因此有大半時間都在搞 HMTL 與 CSS,而第三份作業和第四週的作業一樣是串接 Twitch 的 API,不同的點在於串接的資料與 API 的路徑是不同的,加上這次是使用瀏覽器來實作,我遇上了同源政策的影響,所以最後使用 JSONP 的方式去拿取 API 回傳的資料並加以處理。
在第八週的時候,相當於兩個月的時間,有感於這是個分水嶺的一週,學到這邊的時候開始有點疲乏嗎?或者是說一段時間緊繃的狀態想要休息吧,所以有怠惰的情形產生,加上第八週的進度我在第七週有先偷跑,變成說我這週沒有花很多時間在這個計畫上,如果往好的方向思考,確實不是說在這項計畫長期地凝聚會神來學習就是好的,偶爾也需要讓自己稍微緩緩,只是這個緩緩,可能會有一直緩緩的風險,而這個風險的情況在後面的幾週,其實都持續浮現著。記得老師在這週也有發現到很多人都有這個現象產生,所以在每週的隨意聊有提到這是個正常的現象,只是要我們好好想想當初報名這項計畫的目的是什麼,放棄也沒有對與錯,只是你目前覺得適合自己的選擇。
後端實作
整個後端的內容藉由實作會員機制的留言板貫穿整個學習的主軸。
前言
一開始其實沒有想過初學的時候要去碰後端的東西,因為認為前端的東西就需要花費龐大的時間來學習。不過經過這門課程的學習還有了解一些網頁技術的歷史脈絡後,了解到即使你只需要使用前端相關的技術,如果想要更精進自己,或者是換另外一個角度去思考,去架構前端的程式碼,了解後端的東西對自己會有很大的幫助。
PHP
之前從來沒學過 PHP,在學習之前認為又是一頭猛獸會難以駕馭,不過實際上在老師的課程學習下,注意到 PHP 跟 JavaScript 有許多類似的地方,頂多只是某些語法上小小的迥異,也因此在入門 PHP 並且開始做留言板作業時,一開始沒有遇到太多的困難,只是很常忘記在行尾加上「;」的符號。不過困難或者是麻煩地點在後面的實作作業與 Side Project 產生了,我發現自己對於 PHP 許多基本的機制不是很了解,或者有一些要去使用的基本語法並不熟悉,也就是說,專案一大起來,變得很難很難維護,如果要做一些花招,也不是很好下手。
MySQL
在我學習 Python 的時候,就有耳聞資料庫相關的技術名詞,當時認為要處理這方面的技術是件不容易上手的事,因此心裡對它其實有畏懼幾分。
不過在這門課程第九週開始碰觸時,發現它就只是很單純的一項技術,把資料庫想成是房間的抽屜,抽屜裡的東西可以藉由自己要採用的固定方式去增減與修改,資料庫也是相同的道理,只不過不是藉由自己本人去拿資料庫的東西,而是使用程式語言去拿資料庫的東西。
老師在這邊的教學內容一直很強調 CRUD,後端對於資料庫的使用都是環繞著 CRUD 的概念。我才發現資料庫這部分並沒有想像中的那麼難以理解,當然還有很多更進階的資料庫使用方法,但課程的內容都融會貫通後實際上可以做很多網頁的後端了。
留言板的建構
在留言板作業的建構當中,老師採用一種方式,不是馬上教我們唾手可得的技術和最新的技術,或者說是最方便的技術,這也是他開設這項計畫的目的之一,不只把我們教會使用各項的技術,而是帶領我們從所有技術的底層開始了解,開始實作。
實際上,從第九週開始首先採用 cookie 實現會員登入的機制,在到第十週以前,讓我們先反思使用 cookie 做會員機制會產生什麼致命的問題。第十一週的內容就是為了改進 cookie 不適合放敏感資料的缺點,並且再替會員資料的密碼經過更安全的雜湊機制轉換。再來的第十二週又跟我們說我們寫的 PHP 程式碼有很大的安全漏洞,因此又加上了 SQL Injection 和 XSS 的防範機制。實際上在第十一週所做的改進機制(仿造 Session機制)在 PHP 的內建函式當中就有了,就有現成可以使用了,因此第十三週的內容就是改成 PHP 內建的 Session 函式。
回頭過來看從第九週到第十三週的留言板演變,每一週都有一個主題在,這些主題帶領我們了解為什麼會有後來的技術演變,它們被前人做出來的理由是什麼,這樣的教學模式對於初學者的我們,尤其是那些沒有程式基礎的大家,可以了解這個網頁前後端技術歷史的脈絡,不單單只是純粹看到現今大家很夯都在使用的技術而已,而這背後的目的都在跟我們傳遞一個很重要的資訊:
不是只要會使用這項技術,還要知道為什麼要使用這項技術
Todo-List API
在第十九週的時候有個作業是要製作一個 API,可以供給別人串接的 API,一開始我想說應該和留言板的做法差不多,後來踩了數不清的坑才意識到兩者的差異性。記得那時候我研究了一整天,不斷踩坑與爬坑,反覆查各方的資料,也有參考同學的程式碼,當時心裡一方面覺得說自己怎會搞這麼久,但另一方面又有一種愉悅感吧,因為每踩一個坑我只要有做筆記或紀錄,下次就知道怎麼處理這個坑了,換句話說就是從這個作業當中學到非常非常多的技術與觀念。
部署
從 ALPHA Camp 學到這邊來,之前就很好奇在本地端 demo 的網頁要怎麼讓所有可以上網的使用者去連到我們所做的網頁。
在課程的第十四週就是在學習這項技術。回顧思考,假如今天單靠我自己去找資料如何部署,我可能會花非常多的時間,但這一期我們有第二期學長姊的參考資料,當時我單靠僅兩篇學長姊的部署文章,按照每個步驟做下去,我的網頁就成功對外了,當下的心情難以言喻,看到自己做的網頁有辦法分享給其他人了,不過現在靜下來思考,這對我來說會是一件好事嗎?因為我發現假如今天我要去改動部署的某些小設定的話,可能需要再一段摸索期,因為沒有踩過坑,不會曉得困難之處。
後端小總結
從第九週開始,我的進度就開始落後,當週該做的進度我實際上都在做上週還未完成的進度與作業,一開始有那麼點沮喪,明明我有很多時間,比起其他邊工作邊學習的同學們,我有更充足的時間可以利用,只是從第八週開始的怠惰症,一直延續到這時候,當下該學習的時間總認為待會或者是後面的時間還可以看沒有關係,所以總是在拖延著,直到無法直視落後的慘況。
不過往另外一個角度來看,我在課程進度當中,算是在同學之間的前段班,還有很多同學的進度落後不少,這樣想的話讓自己比較不會那麼地孤單與無助,或許這樣的落後才是正常的。只是心裡還是有一種聲音就是明明知道自己再多一點努力就能跟上腳步卻沒有那麼做,或者看到一些跟上進度的同學也做得到自己卻做不到,會有那麼一點不平衡。
前端進階
方便的工具技術與 JavaScript 底層相關的原理。
工具與技術
CSS 預處理器的部份我是學 SASS/SCSS 這套,當時想說這套比較好懂也是課程示範中用的,我記得課程的教學僅一些基本的用法,我想這也是老師的目的,要我們自己去更深入地學習。當時的作業我是拿第七週的作業的 CSS 檔案來改成 SASS/SCSS,不過我當時第七週的作業沒有寫很多的 CSS,因此變成說這週的 CSS 預處理器的練習量對我來說不太夠,再加上我在作業中所使用的 SASS/SCSS 語法也都是很基本的。所以實際上我對於 SASS/SCSS 還是不夠熟悉,在後面的週數的作業要嘛不需要寫 code,要嘛就是拿以前的作業再優化或更改,最後四週的框架學習我也沒有使用和 Webpack 相關的 CSS 預處理器插件,因此沒有再針對 CSS 預處理的部分做複習或加強,這點我覺得自己挺可惜的。
在一開始學習 Gulp 和 Webpack 時不是很能理解兩者的差異,因為有許多套件與插件兩個工具都是可以使用的,變成說一開始無法理解到底我要優先使用 Gulp 還是 Webpack,不過到最後我都是以 「Webpack 是用來解決 JavaScript 在前端無法模組化的問題」這樣的觀念來釐清兩者的差異。然而後面的課程其實使用 Webpack 的場合和 Gulp 相比是多很多的,尤其是最後的前端框架 React 都有它出場的時機,這也造就我現在 Webpack 會比 Gulp 來得熟悉許多。
CSS Sprites 和 Data URI 這兩個圖形優化的技術我記得課程是沒有實作的,是要我們自己去找相關的資料來看,當時看來看去這兩者學習的必要性比起其它技術與工具,是偏低的,或者說要使用到的話,Data URI 會比較需要用到,不過在第二十週的時候有個小練習是優化網站,那時我有用 Data URI 來減少圖片的容量大小,可是卻造成一個反效果是我的 HTML 檔案變得很大,因為編碼後的字串太長了,所以我是以不好的印象來結束學習 Data URI 的...我覺得倒不如直接解壓縮圖片會來得方便,但也是有可能我使用錯誤也不一定。
底層原理
這一個部份是我對課程編排很有感的一個部份,主要原因在於這些底層機制是 JavaScript 的一些核心概念,如果說在一開始第二週時就教這些底層機制,我認為可能會有許多同學會無法理解在講什麼碗糕,或者信心受挫,心裡就會想說:「哇塞,這項計畫很硬喔...要這樣跟半年嗎?」。
前面有提到在第四週的時候有一個 Q&A 群組,當時有很多同學出了不少跟 JavaScript 底層機制有關的題目,那時很懷疑我跟其他同學是上同一堂課嗎?為什麼大家都知道這些怎麼解或怎麼出題XDD 後來才得知有些人偷跑第十七週的進度這樣。
第十七週的課程內容很關鍵,關鍵的點在於今天如果要把 JavaScript 的語法觀念弄熟,勢必得學習第十七週的課程內容,今天你要讓自己的 JavaScript 技術更進一步,這會是個起始點。當時除了原型的觀念我覺得比較抽象之外,其它的內容看了老師的課程內容還有之前老師所寫的文章之後,其實就能理解 8.7 成了,也是在這段時間發現到一件很神奇事情是,有些技術與觀念一開始看過一遍不是很懂、做過一遍仍然不懂的情況下,隔一小段時間(1 個月內)再看過一遍會發現以前不懂的地方竟然都看得懂了。
架構相關
在課程一開始上前端的時候老師有給我們看跟著小明一起搞懂技術名詞:MVC、SPA 與 SSR這篇文章,文章裡面有好多一開始都不懂的名詞,也不知道實際要實作的話要怎麼做出 MVC、SPA 那些架構出來。直到課程的後半段,我才理解老師為什麼要給我們在一開始看那篇文章,目的是要讓我們先認識那些名詞,對那些名詞有印象,接著再接觸第二遍就會有一種似曾相似、覺得熟悉的那種感覺,我記得某種記憶方法是採用這種概念,多看幾遍想要記憶的東西,然後每一遍的時間都有不一樣的間隔,越後面間隔越長。
第十八週的主題雖然是 Gulp、Webpack 和 CSS 優化小技巧,但當週有一份作業是改寫之前做的 Todo list 的程式碼,用一種有別以選取個別節點的方式去更新網頁的畫面的方式,這種方式就是先把所有資料的值都存在一個變數中,每當有資料被更動就重新渲染網頁的畫面(不管有多少資料被更新),而這樣的概念可以省去選取節點的複雜性,還可以確保網頁當前畫面與資料的一致性。
以前在用 Gmail 或是一些看起來沒有換頁的網站的時候都沒有意會到「沒有換頁」是個網頁呈現的其中一個方式,不過隱隱約約有覺得這樣沒有換頁的網站操作起來比較順暢與自在(?)。而在第十九週的第二份作業要改寫之前的 Todo-List 作業,變成 SPA 的架構,SPA 的特性就和前面所說的有關,然而這個概念在課程前面有碰過所以已經不是很陌生,整個 SPA 的實作方式仰賴於 AJAX 的技術。所以第十九週的SPA 作業比起第一份作業要做後端的 API 容易許多。不過有意識到用原生 JavaScript 或是 jQuery 來實作 SPA 是件麻煩的事情,加上效能上如果還要再優化需要做更多的動作。
加強複習
第十九週可以說是總複習大雜燴,後端、前端甚至是網路基礎都在這週的內容與作業當中,第十九週在做後端 API 作業的時候喚醒我對後端所有的記憶,長達一個月時間沒有碰後端的東西幾乎一半的內容都忘記了。再加上第四週網路基礎的複習也在這週,我覺得這個課程安排點很剛好,因為接下去就是框架的部份了,框架就是個課程學習的重大分水嶺之一吧,所以在這之前來個網路基礎複習恰到好處,雖然第十九週附的兩個 CS75 的影片我找不到中文的,讀起來有點障礙,但看英文字幕的關鍵字其實就知道影片的那個段落是在講什麼,就算真不懂,我自己再去找資料或是翻翻以前做的筆記。
不確定,而懷疑
課程學習的終章:「框架」。
前端框架
課程最後的四週有前端與後端框架,我只選擇前端框架學習,主要原因也是我之後想先走前端這條路,雖然後端也是有一點興趣,不過礙於自身能力與所學的內容我並不覺得自己的後端有比前端還厲害。只是說一開始我有想過前端框架學完之後,再來學後端框架,不過後來發現我的能力沒辦法在四週內把前後端框架都給學完,也因此,最後我只學了 React 和 Redux 這兩個前端的 library。
記得學習 React 的第一個禮拜的內容時,我花了兩個禮拜才學完,遠超乎我的預期,主要原因是 React 的筆記我做很多份,光筆記所花的時間我算過比看課程所花的時間還久。在一開始學 React 其實都有看懂語法要怎麼寫、怎麼使用,把作業做出來的難度對我來說沒有到非常地高(和其它週我覺得更難的週),可是還是花不少時間,五子棋的作業就花了點時間在想判定輸贏的邏輯怎麼寫,不過我認為五子棋這個作業出得很好,可以確實讓我們學到 React 各種基本用法,同時又不會覺得這是個很死板的作業,因為是在做一份小遊戲。接著的下一週是學 react-router,也是知道怎麼寫、怎麼使用,但是問題來了,前兩週的 React 學習我發現到我一直不是很能理解一些 React 的機制為什麼要這麼做,我只知道怎麼寫怎麼用,所以其實內心有一點不踏實,換另外一種方式來說,假如今天要我變化寫法,我可能就會打結了,我可能就會卡關,不過我記得老師還是誰有提到說一開始學框架都會有這個問題很正常,但不要灰心繼續學繼續寫,有一天你就會突然恍然大悟所有的脈絡,因為學習一個框架等於是在學習新的寫法與概念,而在二十四週學習完 React 和 Redux 之後,並且我再做一份小練習我也發現到了,發現到自己對於 React 有那麼點開竅,不再像剛開始接觸 React 時那麼地陌生。
Redux 則是最後兩週的學習重點,讓使用 React 的時候可以如虎添翼。老實說第一次看課程影片時,我對 Redux 的觀念是超級模糊的,我唯一知道的是,要使用整套 Redux 的機制得分很多檔案,一開始也不是很能理解整個 Redux 的流程的一些細節是怎麼運作的,只記得套個 high order component 好像就可以和 React 結合了,但像是 store 的背後機制還是 reducer 之類和 Redux 有關的項目感覺就似懂非懂,我也知道流程就是那樣跑,可是竟然可以這樣跑,當時覺得非常神奇。最後一週則是 Redux 的 middleware,把 Redux 的應用再做得更進階,也因為這個「更進階」,讓初學者的我在第一時間理解不能,dispatch
加來加去的,不過後來有意識到 middleware 在使用 Redux 時的必要性。
總結來說,最後四週的 React 和 Redux 是在懵懵懂懂中學起來的;卻也在某一時刻,打通對它們的基本理解,不過框架仍有許多需要學習的地方,就留給未來勤奮的自己了。
累積的技術與信心
這二十四週我按部就班照著進度走,照著老師給的進度走,時而鬆懈,時而戰戰兢兢,因此從來沒有超前過進度,但卻在後半段的學習不斷 delay 進度。我也很喜歡照著別人給的時程表走未知的路,也許是會比較心安,也許可能是自己比較沒有想法,而且是自己沒走過的路,照著別人的經驗是比較保險的方式。然而,也許是過於保險或者是自己的心態問題,我覺得雖然我每週作業都有交出來,也有針對老師給的建議去做修正,不過心裡還是不夠踏實,總認為作業這樣的難度有做出來就可以了嗎?我知道每週還有進階挑戰題,只是我沒有時間去做它們,所以這樣的情況有點尷尬,我想要更踏實再多學一點,可是時間不允許,因為還有下週接著的進度等著我去學習,因此變成說每週的不安感與不踏實感一直累積著,累積到最後一週,那個感受多麼強烈。再加上會去看其他同學的作業,我發現我與前段班的同學有一段差距,不管是前端切版還是程式碼的優化,都有很大的進步空間,我想,看同學的作業本是一把雙面刃,就在觀看者怎麼想了。
不過,老師彷彿是住在我們肚子裡的蛔蟲,知道我們在想什麼,也知道我們信心不足,他常常說他不會講些心靈雞湯之類的話,他很誠實地告訴我們沒有信心不是很意外,更怕我們太自滿,時常要我們回想為何想要報名這項計畫,也不是說一定要一直硬撐著,放棄這門課程,也只不過是在選擇另外一條人生的道路罷了。我不知道老師講這些話之後心裡是怎麼覺得的,但我覺得比起心靈雞湯那種直接激勵人心的話,咀嚼一番、細細品嘗他的話,到最後,會曉得他講的話都是很發人深省、確確實實的。
猶豫的 Final Project 與面試準備
在最後幾週的時候,我一直在想說我到底要先做 Final Project 做完再投履歷還是一邊投履歷一邊做 Final Project,畢竟兩者不衝突。到最後我沒有做 Final Project,原因在於我把做 Final Project 的時間拿去趕我落後的框架進度了,變成說我是同一時間在趕進度與投履歷,最後也很順其自然地趕完進度後也收到了不少面試邀請,於是就接著一連串地面試下去。
在投履歷之前,我的信心度還是不足的,總認為自己尚未準備好,尚未準備好獨立作品,尚未準備好面試題目、尚未準備好面試的應對,但學長姐告訴我們,老師告訴我們,並不會有準備好的一天,也沒人能夠告訴你什麼樣才叫準備好,只有你有沒有打算開始向前跨一步。並且我的理智告訴我,以前的我總是怕東怕西,擔心自己對某方面的能力不夠格,而回饋的結果總告訴我,每次的我都是想太多了,想太多是往前邁進的一道枷鎖。
上岸了,回頭來看
Offer Get
回頭看,我在每次的面試當中不斷累積經驗值,對於不恰當的應對與不足的技術能力加以檢討,補足自己的缺失,並且應用在下一次的面試上。在一個瘋狂面試的禮拜中,在當週的禮拜五,最後面試的一間公司中拿到他們的 offer,原來自己其實是有人認可的,拿到 offer 的瞬間我鬆了一口大氣,這口大氣是累積半年的忐忑之氣,我真的做到了,有一點不真實,但更多的是喜悅的心情,因此,我帶著這份喜悅的心情,打了一篇面試心得希望能夠幫助到那些比我更沒有自信、更覺得自己技術還未到家的人,有勇氣去實踐自己的目標。
筆記的必要性
回頭看,整個課程收穫最大的一點是我養成了寫筆記的習慣,以前的我因為很懶所以很少自己親自寫筆記,但在這門課程最初時刻我就開始寫筆記,因為我知道我肯定會忘記之前學的內容,每份的筆記都是寫給未來的自己看,未來那個記憶力很差的自己看,同時能讓當下寫筆記的我對技術內容更印象深刻,九成的筆記都放在HackMD當中。
反饋與見解
個人針對課程提出的心得點。
課程優點
- 課程內容大多以影片呈現,強迫筆記:因為影片要再觀看一遍需要花很長時間,而且假如有什麼東西忘了,要再重看一遍會不好找到是在影片的哪個段落,因此若當下不記下來,之後所花的時間是更長的。
- ESLint:我記得第二期沒有強制使用 ESLint 讓程式碼有一致性,這個很好點的是能讓我們在初期知道維持程式碼一致性的重要性。
- 課程的凝聚力:第三週的見面會、每天的進度報告、每週的隨意聊和每次的直播,這些零零總總的課程內容在技術面可以不必要,但在精神面對我幫助許多,讓自己並不孤單,有一同作戰的同學,雖然平常很少有機會見到面,但就好像大家踏在同條船共患難一樣,大家的目標也都是一致的。
- 小樹屋:接續上一點,雖然平常很少見到面,但只要有去小樹屋,大家就有機會見到面,我去過幾次,很謝謝和我互動的同學,還有給予我建議的學姊,同時也要謝謝鼓起勇氣去小樹屋的自己。
- 複習週:每 5 週就有一週的複習週,每次的進度 delay 我都是靠著複習週來扳回進度的,複習週就好像心靈調劑一樣,吃了它不會讓你強而有力,但卻能讓你更穩定。
- 作業的簡答題:前端除了寫程式碼,簡答題可以藉機讓觀念不足的地方加強。
- 作業的進階題:雖然我沒做過任何一題,不過這樣的設置對於進度超前的人有更上一層樓的窗口。
- 閱讀同學的程式碼:假如想要成為更厲害的人,其中一個方法就是先模仿別人。
- 老師的教學口吻:淺顯易懂,理解力極差的我都能懂了。
- 自由度高:不強迫每週都得跟上進度,學習壓力相對來說比較沒這麼大。
- 前人種樹:因為有第二期的學長姐經驗與老師的教學更正,我自己認為輕鬆許多,因為可以參考學長姐們分享的經驗。同時,第三期從原本第二期的四個月的課程拉長成六個月,以結果論來說,對我來說很極限地剛剛好。
課程在意的點
- Spectrum:這個平台最後變成面試心得的存放處,而且對使用 Windows 作業系統的人來說,選字不是很友善,編輯文章也不是很方便,所以變得有點綁手綁腳的。
- Slack:想要看以前的留言串都看不到了,好像要付費。
- 過於自由:是優點也是缺點,對於怠惰的人來說,很容易一蹶不振。
- 非理工科:我是理工科,我雖然沒有前端的程式經驗,但在學校學過程式語言,自己也自學過,也學了許多理工科相關的解決問題的方式,所以我覺得對非理工科的人來說,可能六個月的時間還有那麼點吃力,也許可以像老師之前講過一個開課方式是專門開一個學怎麼寫程式的課程,讓初學者訓練「語感」。
- 部署的練習:某部分也是我自己的問題,因為我是照著學長姐的文章部署的,照著做就部署完了,所以感覺學得不是那麼踏實,因此在這部分著墨很少。
- 第六週與 HTML、CSS:第六週的作業刻板我認為沒有到很複雜,架構的部分相對單調,我不確定這樣是不是好的,因為我在 ALPHA Camp 那邊一開始接觸的更難一些,不過可能老師這邊考量的點是覺得說有些人沒接觸過 HTML 和 CSS,所以作業門檻不要這麼高。還有到現在我雖然課程學完了,可是對 CSS 的處理還不是那麼有信心,也知道老師這邊比較少著墨,所以有提供一些資源給我們看,不過矛盾的點也是在時間性的問題,課程內容本身就非常多,要自己學更多外部的資源就得斟酌看了。
下一站
如果你問我這門課程容易嗎?我這個有一點點程式基礎的人會跟你說:
非常不容易。我是在沒有工作、沒有雜事、這半年幾乎都不怎麼出門的情況下好不容易跟完課程的。
如果你問學完這門課程之後,前端的技術就不用再學了嗎?我會跟你說:
想得美,這門課程只是個敲門磚,還有很長的路要走呢。
我的未來會怎麼樣的發展呢?我會跟你說:
沒人知道,我唯一知道的事情是,接下來的學習如果都是以這半年的學習態度來面對的話,我會過得很踏實。
超級感謝你十分完整又詳細的心得,這個字數有破萬字了!
先針對幾個點做回覆,但比較多其實是給以後的自己看的筆記,記一下課程哪邊可以改進:
再加上需要用到一些課堂沒有教到的語法,比如 window.location.reload()、removeEventListener、clearTimeout,這些是後來我自己查到有這些語法才得以做完這份作業
以後作業應該註明一下這份作業會用到課堂沒有教到的東西,讓大家有個心理準備,就知道要查很多資料了
回頭過來看從第九週到第十三週的留言板演變,每一週都有一個主題在,這些主題帶領我們了解為什麼會有後來的技術演變
這邊的概念的確是這樣,但沒有做得很好,主因是有些東西沒有講清楚,導致很多同學在十一週的時候就誤用了 session,這樣只會越搞越亂。之後課程應該把這部分說得更詳細一點,效果會好很多
在第十九週的時候有個作業是要製作一個 API,可以供給別人串接的 API,一開始我想說應該和留言板的做法差不多,後來踩了數不清的坑才意識到兩者的差異性。
十九週大魔王,我其實完全沒有預期到大家會卡這麼嚴重
可以加強的地方一樣是先給一個小範例之類的,讓大家再把一般留言板跟 ajax 留言板的差別弄清楚一點
這樣應該會比較順
在一開始學習 Gulp 和 Webpack 時不是很能理解兩者的差異,因為有許多套件與插件兩個工具都是可以使用的,變成說一開始無法理解到底我要優先使用 Gulp 還是 Webpack
這邊一樣也是沒有講得很清楚,應該強調一下現在比較常用的是 webpack 之類的。然後這兩個的關鍵差異在於打包沒有錯。
那時我有用 Data URI 來減少圖片的容量大小,可是卻造成一個反效果是我的 HTML 檔案變得很大,因為編碼後的字串太長了,所以我是以不好的印象來結束學習 Data URI 的...我覺得倒不如直接解壓縮圖片會來得方便,但也是有可能我使用錯誤也不一定。
這其實是個很不錯的發現,不是你使用錯誤,因為真的就是這樣
Data URI 的優點是節省 Request,缺點就是增加檔案大小,所以要怎麼在這之間取捨也是個問題
也是在這段時間發現到一件很神奇事情是,有些技術與觀念一開始看過一遍不是很懂、做過一遍仍然不懂的情況下,隔一小段時間(1 個月內)再看過一遍會發現以前不懂的地方竟然都看得懂了。
這個真的很神奇,而且更神奇的是懂了以後就很難回去了
過再久一點,你會忘記當初到底卡在哪裡
再加上第四週網路基礎的複習也在這週,我覺得這個課程安排點很剛好,因為接下去就是框架的部份了,框架就是個課程學習的重大分水嶺之一吧,所以在這之前來個網路基礎複習恰到好處
其實只是因為多一個十九週不知道要幹嘛,想說讓大家複習一下網路基礎好了XDD
我不知道老師講這些話之後心裡是怎麼覺得的,但我覺得比起心靈雞湯那種直接激勵人心的話,咀嚼一番、細細品嘗他的話,到最後,會曉得他講的話都是很發人深省、確確實實的。
也沒有特別覺得什麼,就只是把我自己的想法傳達給大家,因為我真的很不喜歡那種一直要人永不放棄的說法。所以藉著課程趁機跟大家宣導一下我的理念,想放棄就放棄,沒什麼不好的
回頭看,整個課程收穫最大的一點是我養成了寫筆記的習慣,以前的我因為很懶所以很少自己親自寫筆記,但在這門課程最初時刻我就開始寫筆記,因為我知道我肯定會忘記之前學的內容,每份的筆記都是寫給未來的自己看,未來那個記憶力很差的自己看
其實比起放在 hackmd,我更推薦你用 hexo 架個靜態部落格,然後把筆記都放上去
這樣分享給大家比較容易,要引用也比較容易,而且技術部落格也是個可以加分的東西
課程內容大多以影片呈現,強迫筆記:因為影片要再觀看一遍需要花很長時間,而且假如有什麼東西忘了,要再重看一遍會不好找到是在影片的哪個段落,因此若當下不記下來,之後所花的時間是更長的。
這感覺是優點也是缺點XD
Spectrum:這個平台最後變成面試心得的存放處,而且對使用 Windows 作業系統的人來說,選字不是很友善,編輯文章也不是很方便,所以變得有點綁手綁腳的。
原來在 windows 上面這麼慘嗎,之後有機會我也來看看在上面長怎樣好了
因為在 mac 上的使用我覺得都滿不錯的,沒注意到QQ
Slack:想要看以前的留言串都看不到了,好像要付費。
對,免費仔就只能這樣
而且不是我省錢不付費,是真的太貴
如果是一個月一兩千我還 ok,但如果要付費的話是按人頭計算的
一個人一個月 8 塊美金,slack 有大概 80 個 active member
所以一個月就是 640 塊美金,接近兩萬台幣...
非理工科:我是理工科,我雖然沒有前端的程式經驗,但在學校學過程式語言,自己也自學過,也學了許多理工科相關的解決問題的方式,所以我覺得對非理工科的人來說,可能六個月的時間還有那麼點吃力,也許可以像老師之前講過一個開課方式是專門開一個學怎麼寫程式的課程,讓初學者訓練「語感」。
語感這個說法用的滿不錯的,因為我帶了幾期之後發現有些人的問題是會了工具,但對「寫程式」這件事情卻還是不太穩,就是會寫出一些讓人覺得你根本不會寫程式的語法,我覺得這其實滿嚴重的,所以才想說可以開一堂別的課
第六週與 HTML、CSS:第六週的作業刻板我認為沒有到很複雜,架構的部分相對單調,我不確定這樣是不是好的,因為我在 ALPHA Camp 那邊一開始接觸的更難一些,不過可能老師這邊考量的點是覺得說有些人沒接觸過 HTML 和 CSS,所以作業門檻不要這麼高。
沒有,會這樣做其實就只是我 HTML 跟 CSS 真的頗爛所以不知道怎麼教而已
因此作業也出的比較簡單一點
之後可能會在這個章節提供 Amos 大大的一系列免費教學讓大家自己去學習
或是我額外再多教一些切版之類的
沒人知道,我唯一知道的事情是,接下來的學習如果都是以這半年的學習態度來面對的話,我會過得很踏實。
這個比跟課還要困難許多XD
以上是針對心得內容的一些回覆,再次恭喜求職成功並且開始工作 🎉