黃俊元(Nick Huang)

Frontend Engineer

  Taipei

你好,我是黃俊元
從事前端工程師的時間近五

學生期間擔任了三年的美編工作,然後在某個機緣下接觸到了前端工程師這個職業,對此產生了興趣並開始自學研究。
大學時,進入了一家資訊公司開始實習。畢業退伍後,尋找新的工作機會,並以前端工程師的身份踏入了新的職場,持續學習和成長。

在累積了一定的工作經驗後,決定北上工作,以尋找更多的發展機會,同時也希望能夠接觸不同產業和商業模式。

專長 - 平台開發

根據 PO/PM、SA、企劃需求方開出的需求規格,再與後端人員配合開發出功能產品( CMS、CRM )。編寫許多操控情境處理、內容欄位報表呈現、組織管理介面開發。 目前主要以 Vue.js 、 Nuxt.js 為主,從平台專案、會員管理、權限管理、財務功能、聊天室、報表、站台、圖表間有許多相關實作功能經驗。

語言 / 主要技能

其他技能

   中文 - 母語      英文 - 初階  

   JavaScript      Vue.js      Nuxt.js    

Ui Library

- iView、Elemen-plusVuetify

State Management
- Vuex、Pinia

Build Tool
- Vite、Webpack

Others
- Git、HuskyStorybookPugSCSS、Tailwind、 i18nDocker、WebSocket、Socket.io、PugjQuery、pnpm、Sonarqube、Sentry

工作經歷

Frontend Engineer  •  股感資訊股份有限公司
十月 2022 - 九月 2023 - 11 個月 

在該公司負責流量分析數據平台CDP(Customer Data Platform) standard.ver2 產品,主導前端部分專案

主要業務
* 工作內容根據現有 1.0 產品狀況去後端工程師、UI 設計討論規劃出SA與前後分離 2.0 版本,從大綱列出再去逐一切割每個 Feature 的時程及定義階段 Milestone 再開始進行開發 

※ 其他業務
* 基於 Rete.js 引擎開發出了 類似Vue Flow編輯器。
* 部分時間支援該公司上線 1.0 版本產品。
* 部分時間支援主公司上線 stockfeel 媒體論壇。
* 協助公司面試,並在必要時協助其他集團事業體專案、外包專案,及支援其他零碎前端業務專案。

* 知名零售商的客製化 CDP 平台部分開發根據 PM 立案的需求規格書去規畫時程開發
 


Frontend Engineer • 華義國際數位娛樂股份有限公司
十二月 2019 - 六月 2022 -  2 年 6 個月 

2021年三月前公司團隊被華義買下合併至此處一樣在該公司擔任前端工程師。前一年從無到有開發了公司的管理端平台(CRM),從會員管理、權限管理、財務功能、報表、站台 到後半年接手客戶端平台,負責平台維運及聊天室(IM)、活動的開發與優化,並處理專案上線更新與排除上線遇到的問題,也有遠端工作一年的經驗。

工作上 Flow Circle 從PM、PO獲得需求開始消化,結束後再交由企劃、UI/UX 負責規劃立案,前後端工程師在會議上確立可實現性後,開始估時程再進行開發,再進測QA,最終交付出去。

Frontend Engineer • 鈦廸數位娛樂有限公司
2019年十二月
在該公司擔任前端工程師,與其他工程師共同開發公司自身(CMS)等平台及其他 To B 產品。

Frontend Intern • 利達雲端有限公司
三月 2018 - 七月 2019 - 1 年 4 個月

該公司實習成為前端工程師,了解 Domain Knowledge,並開發簡單網頁功能,跟著公司前輩們學習。


專案

CDP (Customer Data Platform)

依照客戶的需求去客製化所需要的數據平台,及行銷活動編輯排程,還有針對客戶資料進行貼標辨識 TA 客群。

在這專案中開發較為深刻的部分為圖表篩選、篩選貼標、劇本編輯器,還有以這些組件為基底的通用元件(ex: select、button、radio…等其他客製化元件)、及基於Rete引擎開發出的劇本編輯器。

使用到技術有 Vue3、Vite、Tailwindcss、Rete.js

https://biz.stockfeel.com.tw/cdp


聊天室平台

在公司內部現有CRM平台上擴充出聊天室系統
有使用到技術有 Nuxt2、Vuetify、Socket.io

印象中開發時較深刻的幾個環節

- 聊天訊息雲分類呈現
針對每種訊息種類抽離擴充:
系統公告 / 文字訊息 / 個人資料 / 圖片上傳 / 已加入聊天室/ 已離開聊天室 / 房間對象定義

聊天室列表/好友列表中,每間房間都需要定義好「對象」欄位(Ex: 群組會員、好友、未加入好友),才能針對聊天室做出開放功能權限(Ex: 群主在聊天室中,有查看組員、封鎖組員、遮蔽、禁言等功能)

- 斷線重連機制
當網頁聚焦(focus),監聽判斷斷線事件時,執行重連
ping pong 沒有正常來回傳遞時斷開重連

- 已讀功能觸發時機
當進入到房間,初始化事件第一步就是先打入已讀功能同步roomHeight(房間高度)等於 userHeight(已讀高度)
後續輸入訊息時,切換畫面則再度執行一次已讀(另外需再監聽關閉瀏覽器視窗執行已讀)

- 已讀未讀遮蔽計算
後端給予每個房間定義roomHeight(房間高度)及userHeight(已讀高度)

最基本的設計未讀為
roomHeight(房間高度) - userHeight(已讀高度) = unread(未讀)

但因為後期加入訊息遮蔽功能,被遮蔽訊息不能列入計算中,所以導致未讀的計算得再多依靠blockScope(遮蔽區間)去另外計算真正未讀量。

所以計算遮蔽未讀量變成了開發中最耗時的部分,因為要因應userHeight(已讀高度)的位置去算出真正的unread(未讀)。
Ex: (// 已讀高度有沒有超過遮蔽高度不然就不用算了
 // 遮蔽結束高度 < 房間高度 // 遮蔽起始高度 = 已讀高度
 // 遮蔽起始高度 > 已讀高度 // 遮蔽起始高度 < 已讀高度
 ......)


學歷


嶺東科技大學 Ling Tung University (2015-2019)

視覺傳達設計系


成績:#入圍 -金點新秀包裝設計類 、金點新秀贊助特別獎
活動和社團:大學大一大二以助教身分參與校內證照中心監考負責輔助主考官一切事物及校內一般行政流程業務兩年多的時間,包含TQC+設計系相關證照,輔導同學證照取得。
專題實作-補己站 大學大三大四專題參與測驗Web開發及收集測驗數據


大學專案

補己站測驗-Web

專題性格測驗設計的web在新一代展覽中收集了近580名人的測驗結果

能量飲品視覺

了解自己優點與特長.發揮其性格中本有的優勢,補充其他性格特長,讓自身更加完美.無懈可擊

渴望自由的金魚

系上展覽視覺「渴望自由的金魚」反映現今社會的設計圈現象,擺脫以往對於設計界的既定印象;意識到自我提升的重要性,走出舒適圈,接受新的挑戰和磨礪,成就更好的自己。

求職條件


希望性質

全職工作

上班時段

日班

可上班日

錄取後兩周後可上班