在 Yahoo 服務的這幾年, 個人對於浮華的渴望, 其實是不間斷的, 而公司為了激勵一些新的 idea 產出, 每年也都會定期舉辦 Hackday 這樣的一個 event, 讓各個不同 role 的人可以結合在一起, 集思廣益, 產出各種有趣 、 新奇的發想 。 我很喜歡這樣的一個活動, 因為可以藉這麼一個機會, 把自己每段時間 survey 的成果做一個總評量, 並且有效的分享到公司各個角落, 讓所有人都可以確實有效的接收到工程師的專注與專業
本來我以為一年只會舉辦一次, 沒想到今年竟然是以 Q 為單位, 也就是說共舉辦了四回, 而我也不知道是哪來的熱情使然, 硬是給他參加了 3 次, 能夠在自己工作崗位上發揮所長, 真的是每個工程師所追求的夢想, 而願意提供這類活動的公司, 更是難能可貴
好囉! 來聊聊我 2015 Q4 hackday 參賽的作品吧! 這回 hackday 我依舊找了老搭檔 Grace Lin 一起參賽, 畢竟這一年來培養出來的默契不是那麼容易可以被人取代的, 我們所 challenge 的項目為「 Ployvore 」
「 Polyvore 」 是 Yahoo 新採購進來的一間 ec 平台, 與其說它是 ec, 個人覺得它更像是商品的一個入口網站, 藉由幾個簡單的步驟, 就可以產出美美的商品集, 讓 user 可以快速的找到商品集中各商品的出處.
※ Polyvore: http://www.polyvore.com/
※ Hack 契機:
Polyvore 本身提供了如同型錄般靜態優雅的圖像呈現
滑鼠 hover 到有下 note 的商品, 便會出現相關的資訊提示窗
我們心想:「如果可以加入一些活潑、狂野的元素, 勢必將激盪出璀璨漂亮的火花, 所以我們在既有的頁面上導入了 Cocoon 」 , Cocoon 是我先前開發的一個 web components, 簡單的說, 它是一個 Video ADs module
往往在觀看 video 與之發生共鳴時, 我們總會心想裡面角色的服飾, 或是漂亮的場景擺設要去哪裡買呢?! 這樣的一股衝動熱情, 卻也會因為隨著不易得到的答案而逐漸冷卻凋零, Cocoon 就是為了解決這樣的事情而誕生, 以下便是 Polyvore 與 Cocoon 初次邂逅所產生的情愫
※ Polyvore + Cocoon: http://mei.homin.com.tw/polyvore-mi…
※ 實作要點:
為了要徹底發揮 Cocoon 的所有能力, 我希望 polyvore 在 layout 的呈現上能提供最起碼的 responsive, 掀完裙子後, 不禁淚潸然流下, 原來它並沒有提供任何的 responsive 效果, 所有的區塊通通是最原始的 design – 完全定死各個 module 寬度, 所有的元素全部被制約了, 可以說一點都不靈活
該怎麼做呢 ?! 要容忍它的任性嗎 ? 還是就給它徹底的 revamp ?
這兩個想法不斷的在我腦中激盪著! 最後…我決定還是 revamp 好了, 既然要 hack, 就要徹底一點, 讓彼此的結合可以發揮更大的效益, 所以囉! 各位朋友們所看到的 demo page, 實際上就是 revamp 後的成果
我採用了 Hybrid Design, 讓 responsive 和 fluid 相互結合, 讓頁面 layout 的呈現在有限制的範圍內做 responsive, 而內部的 module 則採用 fluid design, 區塊內容會隨著 container 寬度變化而有所變化, 我們來看看最滿以及最底的呈現
版面寬度 max 的呈現
版面寬度 min 的呈現
從上面的比較看來, 雖然說呈現寬度有有變化, 但是各個 module 依舊維持其原來呈現的樣子與比例, 這就是採用了 fluid design 所帶來的最大效益
接下來來看看「型錄 」呈現的部分可以怎麼調整, 我發現當 mouse hove 所彈出的訊息視窗實際上是用 JavaScript 輔助來達成, 這一塊其實可以拔掉, 單單透過 CSS3 就可以做到同樣的呈現效果, 讓彼此各自發揮所長, 也讓 performance 獲得最大延伸
另外, 各個 note 的感應區塊也要調整為 responsive design, 這部分亦可透過 CSS 來達成, 不需要透過 JavaScript 來監聽 window resize 的事件, 進而動態調整 style
訊息視窗的呈現改用 CSS3 來達成, 依舊可以發揮出同樣效果的呈現
以上便是我 revamp 時所著重的地方
※ 評審結果:
Hackday 在評審過程, 基本上會有初選以及決賽兩個部分, 傳統這都是由美國總公司來負責, 不過由於 Q4 適逢 10 週年紀錄, 所以在評審的規則上亦有些許調整, 初選的部分改由 local 來做, 也就是台灣 Yahoo 這邊, 得到台灣評審的親賴, 才有機會參加最後的決賽
而台灣這邊的評審團因應規則的調整也做了一些設定, 每個參賽隊伍各有 2 分 30 秒的時間來做 demo, 這樣的時間其實還蠻尷尬的, 要長不短的, 不管是在實體展示或者內容訴說的部分都很難找到平衡點, 所以我後來決定, 直接把成果拿出來 demo 跟解說, 以下是同事在我 presentation 所拍攝的相片
由於沒有固定麥克風的裝置, 勞煩 Grace 幫我持麥克風
開始 demo 到 Cocoon 的呈現
每每分享的時候, 我喜歡與台下的觀眾有眼神上的交流, 我覺得這一種禮貌更是一種尊重, demo 前, 原本擔心場面會冷冷乾乾的, 無法引起共鳴, 幸好台下的朋友們蠻捧場, 一路上都有互動, 亦消彌了我心中的疑慮
在所有隊伍都 demo 完後, 接下來就是結果發表了, 一共有 30 個隊伍要競爭小小的 5 個名額, 大家目不轉睛的聆聽台上評審的發表, 一一唱名之後, 幾家歡樂幾家愁, 而我…….落榜了
雖然說難掩心中的失落, 不過, 我更在乎的其實是整個過程與分享, 在 revamp 的過程中, 我得以重溫了以往切版的樂趣, 自從 Yahoo 拍賣去年上線後, 我就鮮少有機會可以切這麼大規模的版型了, 剛好可以將一年來所學到的新技巧得以應用, 進而提升本身能力, 來應付接踵而來更多的挑戰, 一整個可以說有 Level Up 的感覺, 這便是我 hackday 所收到最大的獎項了, 真真開心非常!!
※ Reference:
