TheF2E 前端挑戰 - 結束

為期九週的挑戰終於結束,總算是可以好好休息了(?)
這九週的挑戰真的是各種練習都出現了,
也因為可利用時間不多的關係,感覺也是挑戰了寫草稿跟整理code的速度。

我的TheF2E挑戰GitHub

總結一下自己覺得的完成度跟簡短心得:

第一週 - TodoList:

完成度:80%
照稿切版,套功能,除了上傳檔案外幾乎都實現了。

第二週 - Filter:

完成度:50% / 100%
設計稿跟實際可操作的API不同,實作的過程中花滿多時間在找API的,
後來就索性只切了設計稿要的版,簡單套了資料後重新做一個與設計稿不同的,
我做了一個活動的查詢頁面,加上了各種所需的filter,
比較特別的Tag、時間、網址搜尋都是把資料抓回來後自己filter非API提供的,
也透過這個學到一些正則表達式的操作。

第三週 - Admin Order:

完成度:50%
原本週一看到題目時還想說可以套用firebase來玩,
但實際上根本沒時間做XD,用elementUI來刻畫面,功能無實現。

第四週 - Product Gallery:

完成度:100%
非常有趣的設計排版練習,初次使用Grid來切版,
也因為重複性質的code很多,全部改用@mixin來處理。

第五週 - Comic Viewer:

完成度:30%
這週可以擠出來的時間只有半天不到,只把部分畫面切出來而已。

第六週 - Validation:

完成度:80%
使用elementUI的form來做,加上一些驗證滿方便的,
小改樣式,並且發現連級選單滿好用(還可以搜尋),
也是因為時間的關係,地區資料沒有花時間處理格式。

第七週 - Canvas Game:

完成度:20%
這週工作排程很滿,週一看到題目的時候都快哭了
第一次用pixi.js,然後只寫了一個入口頁,整個很廢XD

第八週 - Parallax Scrolling

完成度:90%
又接觸到了一個新的東西 - TweenLineMax
週六一整天都在做這個,我做的完全跟設計稿不同XD
也因為懶著畫形狀,嘗試使用utf-8符號搭配text-stroke來做,
做成了一個隨機產生樸克牌花色的滾動視差動畫。

第九週 - Skill Tree

完成度:70%
最終週有兩款設計稿,我選擇了第一種,
第一次遇到skill這樣要考慮前後配點問題的條件,
往後點要計算前置條件,往前取消要在把後方所有關聯都取消,
所以在設定檔寫得比較複雜,後來發問才驚覺沒有什麼分支,
設計稿上就是單純點滿往下一階是我想得太複雜了囧
最終週技能除了技能邏輯,而箭頭符號則是沿用了第八週的文字符作法。

總結:

其實自己評估下來滿多截至活動交稿日期前都只有切版的,
週一看到題目都會很多有想法,但最後卻會因為時間無法製作完成XD
但也因為是這樣才會在擠出的時間內盡快思考要如何實作,
覺得自己在看到題目思考做法的時間也加速很多,
這九週幾乎都是把火力集中在週六用半天左右完成。

很感謝這次的活動讓我接觸到了滿多原本略知卻沒實作的東西,
也很感謝老婆大人幫忙照顧女兒,讓我能在僅有的時間內專心思考XD

總之,很緊繃的九週終於結束了!
可以放鬆的來面對接下來的各種學習啦~
未完成的很多,之後再找時間慢慢補完每一週的挑戰(?)