這是一篇回憶的文章,而且還是很久遠的專案… 覺得趁記憶還沒完全消失還是把做兩次 My Precious 的印象記錄一下(兩個 My Precious 專案一次滿足!)因為心得比例比較重,想了很久最後還是決定放在「專案分類」了!就當作在看一個神經病工程師,開發專案時的內心小劇場ㄅ 😂

公司有一個一年度的分享會,稱作「My Precious」,言下之意就是「對你而言今年最珍貴的事情」,大多數的人都挑選自己覺得在今年很重要的案例分享,或是認為這個職業對他的意義是什麼,通常不是選擇自己最難熬的案子,就是選最有成就的案子!然後最後在這個報告中分享他學習的事情、收穫等等,這便是分享會的意義。我進來後參加過三次,第一次因為還在試用期,有免死金牌可以不用上台!喔耶😆雖然不用參加,但氣氛仍舊有緊張感,印象中都會有一些感傷的畫面 😢大家工作很辛苦、都很不容易吧~ 所以第二年終於輪到我也要上台的時候,我就開始思考那我要講些什麼呢?

我有一個給自己排成的習慣(可能有習慣性偷懶,所以都會強迫給自己找點事情做吧!),所以像我這種神經病就會提早準備!但因為年底卡了一個龐大的案子,雖然有想一個粗略的草稿,但沒有時間讓我執行,所以我好像是非常非常突然地…在分享的前三天才決定要做一個 WebGL 的網站 😅一股勁地做起來!然後開啟不眠不休模式,瘋狂寫程式…(我當時可是個從小到大都不熬夜的人耶!)三天耶!大概把我逼入一個極限,可以做這麼快我也覺得很神奇啦!😳(潛能都是要用這種方式開發喔哈哈哈)

我的思路一向滿奇怪的,又喜歡跟別人不一樣,所以原本在挑案子的時候我很迷惘,因為我這個人很健忘,通常只會在當下有不好的情緒或感受,我事後不會有什麼感覺,甚至可以說回憶的時候,我感覺“那個人”不是我…明明那個人是我但我總覺得不是我(3小?!縱使我有建檔的習慣,回去看還是覺得一切不可思議… 跟自己驚呼「噢!這是我寫的?!」、「我怎麼寫啊…我不記得了…」,有時候人家問我怎麼寫的,我真的有時候答不太出來…可能…真的通靈了哈哈哈,有些解不開的問題都是憑一種直覺就可以想到答案,所以你問我為什麼?我也不知道,大概是上天憐憫無腦的我,給予我的另一種天賦吧!😌這也是為什麼我要寫這個部落格啦!因為經常忘記啦,有時候想要找一下自己的時候,才有機會回頭看看當時珍貴的自己,莫忘初衷也莫忘自己是誰啦!我想既然我分不清哪個重要、哪個不重要,那應該都都很重要吧?!因為是個在意時間的人,不如就來個「時間跑馬燈」回想這一年所做的每個案子(感覺好像什麼生死之際會看到的人生跑馬燈喔😂),做著做著,確實對我而言每個東西都很“珍貴”~這才是我的 My Precious 呀!

於是我就把從進公司的第一個案子到年底的案子看過幾遍,像我這麼懶地做素材的人,當然是把之前做的網頁,上面的視覺元素拆下來拼貼啊!所以我就拆拆解解地把每個案子拼裝在一起!大雜燴的風格我最會惹~😂 然後用 three.js 做出一個 Zoom in 瀏覽的網站,我記得當時報告的時候還大聲說「我是在跟天貓網站和某同事致敬啦!」(網址在這,網站已掛)因為剛進來的時候還不會做 3D 網站的說… 就有同事詢問過天貓網站是怎麼做的,查了一下覺得好厲害、好聰明的作法喔!(只剩這個連結可以看)於是就毫不猶豫嘗試看看,雖然當時只能做簡單的幾何模型和相機在那邊移來移去(對!就跟我以前在做 3D 影片一樣混!😆),所以覺得年底有個比較完整的成果網站好像也不錯!給自己和同事一個交代~表示我還是有在認真啦!(我知道老天爺不會讓我混 😂)

我說一下我簡報的內容,分享的步調分兩大部分,前面是一整個年度的專案歷程,後面是收穫和感想,一開始用自動模式慢慢前進感覺還滿感動 der(自己說 😂),緩慢前進時可以慢慢回想起那些痛苦、開心的故事,那為什麼還要做手動模式呢?當然是方便我報告啦!哈哈哈~

從一開始進來的第一個案子是內部的作品 digital snoop,看大家的作品都好有趣,自己手刻 jQuery 做互動的動線,還有設置彩蛋切換什麼的…都覺得滿好玩的啦!然後後來幫忙做廣告 banner 的動態,當時還是故意用 create.js 寫,想說順便練習一下好了!而且還要 resize 11 種尺寸 😂 之後的 mini 網站雖然是普通網站,但換車色功能還是很好玩!而且是我第一次做手機桌機分離的網站耶~

其中印象最深刻的莫過於兒童節專案,不僅參與了多次發想討論,還負責裝置跟程式執行,我當時根本輪迴到大學時光吧!(奇怪~我不是來做網頁的嗎!? 😂)開始用大學技能做寫裝置的程式、又進入了做杜邦端子頭的狀態(我那天大概剪了幾百個吧… 🙄),然後還有裝置內部配置和整線規劃,也體驗到真正的拍片現場,都是初次體驗~

後來年初突然被詢問的線上遊戲,於是先做了一個簡單的 prototype 給公司試玩(沒想到效能好差… orz)不過聽說就是用 prototype 去提案才順利過的~真正開始執行了大吃小球的線上遊戲,是我第一次串 socket(那時我連那是什麼都不知道 😂),還用了 create.js 做 canvas 遊戲… 才知道效能什麼鬼的都不是憨人想的那樣… 記得跟後端兩人做壓力測試,發現問題很多,才毅然決然大改整個程式,我們一個月患難與共的加班,真的是讓我跟後端兩人刻骨銘心…(這輩子都不敢再亂答應這種遊戲案😂)上線之後發現學生們都很可愛,把這個當戀愛遊戲在玩,我還滿意外的!😳也遇到愛 try bug 和一整天都掛在上面的學生,讓我們很頭痛、卻也很有成就感~

接著也沒停歇地繼續開發,奇異之旅的官網用了大量的 SVG 動畫,應該沒有人神經病跟我一樣用 D3.js 再開發動畫的吧! 😆還有資生堂的心理測驗網站,是第一次真正跟後端合作執行 FB 合圖分享!然後手刻了音樂賽事的左滑右滑功能,也是第一次跟採取前後端分離串接資料… 最後的 360 遊戲也是參與了發想,不才的我編出來的一套 360 接龍遊戲,是我第一次用 A-frame 做的 3D 網站,非常感謝同事的人脈,讓我可以請教到做過 3D 動態模型網站的前端大大,也第一次跟 3D 公司合作(公司好漂亮喔~)當時調個模型動態調好久喔!還練就了看數字就知道 3D 模型長什麼模樣的能力!(如果不是通靈…就是眼睛壞了…)

想起我包了一整年的咖廣,一年就做了三波耶!三波都要人命哈哈哈,其實每個案子都足以讓我寫個三篇文章的故事吧! 😆那一年我學習到的東西很多很多… 人家都說剛進一間公司時,成長幅度是最高的!幾乎都是我的第一次啦!(講起來沒人信哈哈哈,後端還很驚訝 😂)總之,我列出了主要幾個:第一個就是有效率地除錯和效能優化!因為做一般網站時還不會思考這些問題,但只要一攸關手機裝置,然後又是 canvas、socket 的,這些效能問題就會顯露無遺~是一個讓我知識和成長幅度大增的狀態呀~而那年好像分享了一堆簡報,我覺得很滿足~因為我就是有人逼就會認真查資料、整理思緒的人~😂 而且我也喜歡辦分享會呀~ ☺️最後則是讓我感受最深的是如何「有效地溝通」,最重要的學習終究還是人與人之間呢~最珍貴的東西還是人啦!當然這個旅程永遠也不會結束,「THE END」才會變成「THE AND」(在我的世界沒有文法,就不要再追究了哈哈哈)

那就來看個短暫的影片紀錄吧!(避免有涉有商業資訊的問題,就不放網站了!有機會再將 3D 簡報效果用另一種方式呈現啦!)

整體設計風格很奇妙,因為我超懶的做設計稿…… 全部直接用程式寫!!!色調也是我一貫詭異的路線,想到什麼就兜什麼上去,反正開心就好!總之那年最後呈現了這個網站~結果發現效能很差!!😱我真是太抱歉惹😭臨時做的根本來不及校,但現在好像還是不打算改進它(有空再說吧 😂)是說做完後發現,功能還滿齊全的!是不是可以拿來賣模組啊!? 😆感覺比 Prezi 還屌的 3D 線上簡報耶!哈哈哈哈~

以上就是 2017 年的 My Precious 瘋狂的開發分享啦!