第一週比的是視差滾動設計，原本六角 F2E 的官網就使用了 scroll / svg / canvas 動態效果呈現網站的動態，不是那種單純死板板呈現資訊還是呈現圖表，題目就是重設計官網，當然設計師做設計，工程師做實作，由於我對這塊很少摸索，但也卻覺得三週的比賽裡我可能最喜歡這關，一方面是不熟悉如何實作，一方面是一般接案網站應該也很少這種酷炫的東西吧，企業在台灣做這個的需求不一定很多（？。
但目前職涯裡的經驗，多屬於軟工知識，怎麼抽象化怎麼重用元件，降低資料量傳輸，降低 API 呼叫次數，效能，code splitting，tree shaking….，即使跟前端有關比較難產生什麼創意的感覺，而且做很多次策略或許也都差不多這樣，頂多就是不會，然後找資料，解決問題。
設計類型裡專案，即使用相同的技巧及經驗，實作類似，呈現效果的反差是巨大的。或許會說用相同的軟工知識創造出不同產品，解決不同問題或不同領域的事情，嗯，對，但機會少，要經營產品需要花費的時間多，事情及溝通跨部門溝通也相對雜，人力物力耗用也多。這種設計專案，時程短視覺變化大，框架及工具的選擇侷限，難得是發想創意及一開始不知道怎麼實作的吧啊啦，還有就是需求不一定多，或現在不流行。
嗯，我挑選了一個動畫效果沒那麼多，先試試水溫的設計稿，但一開始鬼打牆了一陣。
由於視差滾動倚賴滾動 scroll 事件，可能會有觸發 animation / 背景圖和滾輪滑動區塊圖交錯之類的
greensock GSAP scrolltrigger plugon 沒特別研究，可能比較知名？看了很多範例都是使用 queryselector or $.jquery
ReactJS 使用 GSAP 綁定事件就要注意 DOM 是不是被 mouted 了，還有 re-render 可能造成事件多次綁定之類的問題
另外要跨組件共享 scroll timeline 的問題，若要跨好幾層是不是要引入 state management ?
這是 greensock 寫的 GSAP + ReactJS 的文章
初階
https://greensock.com/react/
進階
https://greensock.com/react-advanced/
文章提到「由父組件傳入子組件」 or 「使用 React Context 做為 data provider 傳遞」，大多數動畫可能都會正常運作，但避免不了 ReactJS re-render 機制影響效能的問題，如有包含 mouse move evnet / scroll event 可能就會有效能問題 ?
但我看其他人實作完，點了點他們站點，感覺好像也沒差？
但我看了這些文章之後….，立馬選了很冗也很醜的寫法…「Imperative Commuication」…
也就是 useRef + useImperativeHandle + forwardRef
這是讓父組件可以呼叫子組件的 function or 取得子組件的 ref 直接做 DOM 操作。
最後我雖然完成了 RWD 及 動畫特效，我自評程式是相當的醜，另外比起 Vue 而言，我對 ReactJS 較於熟悉，卻不是可以咻咻咻的實作及使用姿勢正確，我立時對 ReactJS 有新的感想。
比較 ReactJS 及 VueJS，不比底層實作，讓我很直觀的是:
我覺得 ReactJS 門檻高，語法彈性，沒有 view model 這層，需要完全自己寫，而 render 可控制元件細粒度可能比較高？ (有各種反模式的優化及調用？)，它的年紀及生態相對年長，支持者多半偏工程背景的開發人員及大型專案業界使用。
但光是門檻高包袱多，學習的雜訊就會多，以前是 Class based component，後來開始 hook 推行，但舊的文章仍存，且官網文件還很多 class based 的文件來不及更新，因此學習者要找出最佳實務的方式，比較跌跌撞撞？
開發人員學習也沒有什麼最佳實務，查什麼用什麼，知識邊腦補邊且戰且走，用錯了再修正，一般的 example 或技術文章都也只是應用在最簡例子，嗯，我的感想就這樣。
呈上成果
https://files.fireweedsound.xyz/gsapnewspaper
嗯～ 我現在對這個挺有興趣的，再來研究。
— 2022年11月24日