如果你喜歡這內容的話幫我在 Twitter 和 Threads 上面分享給其他正在前端這條路上努力的朋友們，也別忘了訂閱我們電子報收到第一手消息喔 🚀
從台灣回來也三個禮拜了，一回來就在加班直到上禮拜可以稍微休息一下，在台灣時間很好玩，見到家人見到朋友也辦了交流會，到現在還是覺得挺不可思議的，除了可以跟大家見面聊聊天也有很多人直接給我 feedback 說我每天的發的文給他們新的想法不同的思考方式也讓他們多了解前端工程師還可以做什麼，還有一個 feedback 是說上一集用英文錄的那一集雖然聽不懂但還是希望可以多聽這樣的內容，這個或許可以安排一下。
那最近我在幹嘛，前面說的我回來就加班到上禮拜，有在 follow 我的人知道過去這幾個禮拜公司經歷了很多的變化，二月初的時候收到消息軟體部門重組，我們組從公司 B2B 業務移到做官網，然後並沒有很多時間可以做 onboarding因為當時收到消息 3/7 公司就要發布下一代產品就是新車發表會這等於我們只有一個月的時間做事情，那時程上面的安排不可能說我 announcement 前一天才全部做完，得把測試的時間和 integration 的時間算進去，所以大概三個禮拜左右時間可以真的工作，當時知道為了新車也是一個機會讓網站大改，還好設計師已經把 Figma 什麼都弄好了不過真的挺多東西要改的，account page、product page、我負責的新的 navigation menu 應該很多人看過了我之前有分享、emails、還有一些為了發布會的頁面比如 countdown 和 livestream，東西真的挺多的而且到最後這些全部都要整合在一起，我一開始挺樂觀的想到以前也在新創公司為了 Black Friday 要把東西生出來的那種壓力想說這應該還算 manageable，後來發現我錯了。
我們官網雖然是用 Next 14 但沒有用上 app router，這本身也不是什麼問題啦不過我們組在原本的 project 通通 default 用 app router 所以 pages router 對我們來說反而新鮮，當時在看 project structure 時候發現大部分的 component 都在另一個共用的 component library 裡面說可能其他 project 會用到，而我跟同事當時想說為了可以快速開發畢竟 deadline 就在那邊，我們乾脆在官網的 repo 寫好再說好了，這邊遇到的第一個問題，雖然是 Tailwind 但很多 Tailwind 的 class 都不見了，最基本的 spacing 和 padding 之類的每次 render 後那些 class 都沒有用，而這個 project 的 tailwind config 在那個共用的 library 裡面，想著還要 debug 而且感覺他們這樣已經很久了想說等 project 做完後再說吧，我們就決定把我們要做的 feature 放在那個 library 裡面然後官網直接 import 就好了，那個 library 有個 storybook 所以我們這樣只要開那個 library 就可以做開發了，這邊觀察到一件事情，這 library 是個用 turborepo 來管理的 monorepo，但跑 install 是用 bun 但跑 storybook 是用 npm，這時候就開始有點滿頭問號了，好吧反正起得來可以開發就好，因為前期我跟同事都已經看完 Figma 把 ticket 和分工都設置好了但初期比較亂因為我們寫的東西總是會壓到別人的所以初期蠻多 pair programming 的這樣省去了需要 resolve conflict 的時間，之後我們有了一個覺得比較好的基礎點後我同事專心做 desktop version 而我做 mobile verison 這樣兩邊就會有很小的機會會改到另一個人的，這時候 senior staff 提醒我們說要做 responsive layout 的話他們有寫了一個 hook 可以告訴你使用者現在用的 viewport 大小是多少這樣，我看到這 slack message 時候又開始問號了，這不是 tailwind 本來就可以做的事情嗎？我可以理解會有這種需求需要用 JavaScript 的方式來偵測 viewport 但他們大部分的 use case 就是用這個 hook 來測 viewport 大小然後加相對應的 styling，這不是 media query or tailwind 可以完成的事情嗎？反正這時候我也不管我還是用 tailwind 做偵測 😂。
開發一段時間後我想說總不能一直在 storybook 裡面做開發，還是要放進官網 dot com 上面看到底能不能用或是兼容性之類的，以往這樣的流程我會用 npm link 來把這個 package symlink 到那個 folder 但 npm 會幫我做好這些，結果才想起來官網是用 yarn 而 library 是用 npm，直接放棄，只能用最土法煉鋼的方式就是 library build 完之後複製貼上 node_modules ，但因為 Next 會 cache 一部分的 build 比如 node_modules ，所以我得把 Next cache 刪掉重新跑一次 local server，然後我的 Intel Mac 就起飛了，但我很慶幸我有早期做這件事情因為發現一個挺嚴重的 bug。
當我開始在官網測試的時候我發現很多 CSS 在 library 裡面的 Storybook 看是正常的比如很多人反應的 hamburger menu icon 本來是黑色的但點開一次後就會變成白色的，這個在 Storybook 是不會發生的但在官網就有這個 bug，看了半天我們發現我們設定好的 styling 被蓋掉，有參加我們交流會的可能還記得當初我們有玩個問答遊戲，其中有一題是如果一個 stylesheet 上面有定義兩個 class 分別是 color blue 和 color red 而我們在同一個 DOM 上面如果都用這兩個 class 的話，後定義的那一個會有優先權，而我們的狀況是一樣的，但被誰 override 了，被同一個 library 出來的 module federation component 帶的 tailwind 蓋掉了，因為這個 component 比其他所有的東西還要晚下載所以他的 style 永遠是最後的那一個導致 by default 它的 style 的 specificity 是最高的，這如果沒有放在官網測試的話根本不知道，也是另一個原因我們很不喜歡 module federation，我第 14 集有講你們大家可以回去聽那一集，之後 Senior Staff 說這是正常的我們要加兩個 & 符號就可以了，但這有時候會讓 radix ui 壞掉然後我們就開始摔鍵盤了。這之後就是無限循環，我們做完一點，設計師就會看一下給 feedback 然後做改動，中間有個插曲最後變成我們的 inside joke 就是我們有所謂的 priority 那最重要的就是 P0 也就是最高層級的優先權，如果 P0 task 沒做完我們不能 deploy 那種感覺，我們後來內部的 retrospective meeting 也有講到就是說大家的 P0 概念好像不同，因為中間我們花了兩天時間在改字體確保每個 component 設定正確因為設計師覺得這是 P0，但 product 和 engineering 來說我們已經有個 deadline 了而字體本身不會影響功能性所以我們不覺得這會是 P0 但最後我們還是花時間改了字體。
我們 3/7 是發布會而在發布會的前幾天晚上有人在 Twitter 說我們網站提前洩漏新車的資訊，看了 Slack 果不其然有個 zoom meeting 大家都在裡面搞清楚發生什麼事和解決這問題，還好 cache 時間好像挺短的所以在 20 分鐘內網站就沒有這些資料也還好那些資料部分有誤所以加上不是所有資料都洩漏所以發布會還是有東西可以嚇到大家，這些資料被洩漏，好多人覺得是不是故意的看能不能增加話題性，想必當然不是，是因為太累我們眼睛脫窗不小心的，我們背後有個 CMS 存這些資料包括 i18n 翻譯的東西都在上面，而應該是有人要更新部分 production 的資料但不小心把 dev 整個 promote 上去了也就包括新車資料，那因為前端我們用的 GraphQL query 把那些沒有用到資訊也抓回來了而 SSR 的時候又會叫一遍所以就出現在 network tab 裡面了，之後 retro 有提到要有個新的 process 處理 CMS 這個東西、放假資料、和移到 Next app router 也會很有效的預防這件事情畢竟 query 是在 server 叫，前端就只會有真的有用到的資料了。
發布會的前一天甚至前一晚大家在做最後確認是不是東西都做完了，P0 的東西是不是都弄好了，然後確認 deployment 的順序比如後端新的 query、email service、前端兩個 app、然後在幾點幾分時候哪個 feature flag 要打開，資料有沒有寫好等等，說實話當時我都以為我們要發射火箭了，什麼時候起飛、什麼時候把第一引擎關掉脫離什麼的，突然覺得隔天好重要。
Product 開了一個 zoom meeting 裡面我記得大概有 70 人開 breakout room 確保發布會的順利其中包括 engineering、social、marketing 還有其他業務等等，十點發布會開始的時候有人說我們有 5 個人預定車子了，大家還在想說到底從哪預定的因為還沒放網站而 livestream 網頁也還沒有那個 reserve button，後來發現可能是 bug 因為手機上的出現了，結果 CEO 還沒開始講話我們已經有25個人預定了，CEO 介紹了我們下一款車子 R2，看當時大家反應好像挺好的，那個 leak 看了 Twitter 和 Reddit 大家反而更期待了，然後 CEO 介紹了 R3 和 R3X 而這是沒有人知道的，大家以為今天只有 R2，而我雖然知道有 R3 但沒想到真的把車子做出來了，我們 R1 有兩款 pickup 和七人座的 SUV，R2 會是 mid-sized 的五人座的 SUV，而 R3 感覺就是轎車了比較小，我們看的都挺興奮的也有些朋友私訊我說他們也預定了，我們組前端的好像都預定 R2，CEO 介紹完後說大家現在可以開始預定了，現場的人回說已經訂了哈哈，半小時內已經差不多有五千人預定了，不過這邊開始有個插曲，當時大家溝通的時候是說發布會大概45分鐘結束而為了確保不要太多意外發生有些東西提早 deploy 了然後設定在 10:50 解禁，但因為 CEO 太快講完了他 10:30 就結束了結果就是又要 redeploy 東西什麼的，後面遇到 kubernetes 和 caching 問題導致有一部分的人看到舊的內容而不是新車的資訊這樣，最後在中午12點時候東西才解決好，到了隔天知道有了七萬人預定真的是挺開心的，雖然車子預估要到 2026 才會交車但大家還是挺興奮的。
昨天我們內部 engineering team 先開了一次 retrospective meeting看看有什麼是我們不喜歡的、可以改進的因為說實話過去這將近一個月真的挺混亂的不管是技術上或是 process 上都有很多問題，已經有 deadline 了還有這麼多 last minute changes 、每個人對 P0 的定義不同、或是有些人對 component library 有非常大的誤解，常常把 component 和 feature 混在一起講然後就會變成 library 打開裡面好多不屬於 component 的東西也在這裡，之後會有跟別組的 retro meeting 看可以怎麼一起變的更好，下一個 project 馬上要來了，也是一個差不多等級的變化所以現在不討論我們到時候又會發生一樣的事情了。
今天聊這些除了讓我自己有個時間 reflect 過去六個禮拜發生的事情，也分享給聽眾說不一定國外的公司或是大公司就會有很好的制度，制度是人定出來的而不會因為公司變大就會自然變成熟，還是有很多不足的地方可以改進也讓我有機會可以開始 pitch 新的改變。