重要:

1. 最新版完整履歷目前只在 cake resume 上更新,請透過以下網址了解: https://www.cakeresume.com/john_hsieh 


2. 目前正在尋找「兼職」、「遠端」的前端工程師職位, 可以配合的模式為「每周固定時數」或「按件計酬」。 若您對此條件有興趣,歡迎聯絡我聊聊詳細內容~


Profile 00 00@2x e294063b2878e4164ba1dd904aa6b8bae6a97e19937899e4b4af853acf30de5d

John Hsieh

我在前端開發領域有3年經驗,目前為全職 Vue 前端工程師。主力使用的技術架構為 Vue+TypeScript+NodeJS+MongoDB。

我很重視程式碼的簡潔與複用性,以及 UI mockup 的重現度。寫扣時有 CSS 調整不好就會自言自語的怪癖,很堅持按照 mockup 忠實呈現 CSS。


我能流利使用英文、日文以及中文。

在踏入前端領域之前,曾在一間日商有過一年數位廣告優化經驗。那一年有非常多以外文參與會議討論的機會。同時還有半年在日留學經驗,這些對外文的溝通訓練有相當大的幫助。


閒暇時我喜歡看電影、騎車兜風、撿壞掉 3C 來修,偶爾會打打 Game

個性比較慢熟,但熟了之後幹話會變很多,喜歡和幹話同樣很多的人聊天 


另外,我還很喜歡教學。不管是教還是學都喜歡 

曾經當過三名學生的前端老師,以及一位學生的日文老師。看到學生理解新知識時會很愉悅。

夢想著某天可以開設自己的線上教學頻道~

前端工程師
桃園市,TW
[email protected]

技能 Skills


前端 JS 框架 & lib

React 起家,但工作上主力使用 Vue 開發 SPA,並使用 Nuxt 作為 SSR 解決方案。


熟悉 Vue 生態系的各式解決方案及相關(或不相關)的套件。工作上常需處理各式不同圖表,對前端資料視覺化還算熟悉。


同時習慣所有專案都使用 TypeScript 和 ES6+ 以維持程式碼的品質和可維護性。


常用的套件有:

  • 框架 - Vue、Nuxt、Vue Router、Vuex
  • 資料視覺化 - Chartjs、D3.js、google-charts
  • 富文字編輯器 - Quill、Codox
  • 裁圖器 - cropperjs
  • 多語系 - i18n
  • 表單驗證 - vuelidate
  • 時間處理 - Dayjs、Momentjs
  • DOM 操作 - jQuery
  • HTTP - axios、node-fetch
  • 測試 - Cypress.io、Jest
  • 其他 - lodash、FirebaseSDK、Facebook SDK、Google Analytics SDK

前端 CSS 框架 & lib

主力使用 Sass + TailwindCSS + BEM 為專案打造專屬的小型、可複用的 UI 框架,如此架構可在專案設計上帶來更大的彈性,避免不斷使用同一框架造成的審美疲勞。

只有當專案對設計要求不高時,習慣使用 Bootstrap、ElementUI、Buefy 快速切版


同時我也常使用 CSS variable 達成 RWD 設計及主題色切換效果。


照慣例列出幾個常用的技術:

  • CSS 預處理器 - Scss
  • UI 框架 -Bootstrap、ElementUI、Buefy、Vuetify、TailwindCSS
  • 圖標 - font-awesome、svg-sprite
  • 警告視窗 - sweetalert2
  • 動畫效果 - Animate.css、vuedraggable
  • 其他 - CSS variable、Media query、BEM Naming convention

PWA

PWA 現階段在 iOS 上的支援尚不完整,專案上通常不會構建完整的 PWA 服務。

我通常會結合 Service Worker + Cache Storage + IndexedDB 加快應用響應速度,並提供一定程度的離線使用體驗。


  • 資源庫 - Workbox、web-push
  • Client Side DB & Cache - IndexedDB、Cache Storege
  • 其他 - navigator API

前端微服務 & Web Component

Web Component 是搭建前端微服務的其中一項很棒的解決方案。


我曾在工作中建立了一套跨平台 (Web & iOS & Android) 的同步協作冨文本編輯器,技術架構是透過 StencilJS 建置 Web Component;Web Socket + Vert.x 處理協作編輯時的內容同步;以及 Quill 作為冨文本編輯器底層。


功能上與 Dropbox Paper 相近,可嵌套在雙平台的 Webview 中,透過 APP 原生 UI 操作編輯器行為,同時也提供跨平台的同步協作。


使用到的相關工具及技術: 

  • Shadow DOM、StencilJS、Web Socket、Vert.x、Quill

後端框架 & DB

雖然主力為前端開發,在一些公司也會需要 JaveScript developer 去支援撰寫 API 服務。

我通常會使用 Express + TypeScript + MongoDB 去處理。


我熟悉的工具:

  • 框架 - Express
  • Socket - Socket.io
  • 資料庫 - MongoDB、Mongoose
  • 模板引擎 - EJS
  • 文件工具 - Swagger
  • 其他 - GraphQL

語言能力

  • 中文 - 母語 
  • 日文 - 商業會談程度 (日文檢定 N1)
  • 英文 - 可流暢對話及寫作


工作經歷 Experience

電獺股份有限公司, 前端工程師2019 年 8 月 - 至今

【公司介紹】

電獺是一間除了有少女外,同時擁有 Youtuber 自媒體、各式 WEB 與 APP 應用組成的自有廣告生態系、以及接案開發三種面向的公司。 


在電獺的前端開發團隊,技術上我們使用 Nuxt 生態系 + Typescript + Sass&TailwindCSS 作為主架構,並使用 Docker + k8s 執行 CI/CD 流程。


團隊上我們為專案導向,每項專案包括 PM、UI 及前/後端約配置 4 名人員。

小人數的團隊有助於減少溝通成本,並可執行更快速的產品疊代。每位 coder 都需妥善分配時間資源在複數專案,以期不 delay 各產品的開發時程。 


開發心態上,我們注重產品的設計稿和易用性,因此使用 TailwindCSS 為每個專案量身訂做小型 UI 框架。程式碼部分注重可擴充性和模組化複用。 



【經歷專案】

SuprLink 超級連結 (自有專案)
https://supr.link/nm6e1
從 A/B 分流到數據分析,再到廣告投放一氣呵成的縮網址服務
Chrome 小工具 - SuprLink 超級連結 (自有專案)
https://supr.link/WJ4rd
快速在 SuprLink 超級連結 產生縮網址的 Chrome 小工具
Aotter Trek (自有專案)
https://supr.link/buFYq
結合大數據分析的廣告投放 DSP 平台,使用大量圖表介面為使用者找出最適合的廣告 TA
資策會 城市儀表板 (外部專案)
https://supr.link/oLOid
收集分散各地的政府數據於同一地展示的政府資料數據庫。有著可高度客製化的圖表及資料篩選模組
beanfun! 數據與管理中心 (外部專案)
https://supr.link/30dOw
擁有各種圖表的集中數據 Dashboard,用以顯示企業內部各項指標
Experiences 00 01@2x 6daa47d1df70d315f129dcecdd562003831581c4cdd8f9c819aa22d4a24ae150

第三緯度科技公司, 前端工程師2019 年 4 月 - 2019年6月

【公司介紹】

陸資企業在台開設的分公司,在台主營業務是韓國成人漫畫網站與 APP


產品架構前後端分離,Vue 搭配 php,並串接微信支付作為金流 


由於一些幽默的原因,我在這份職位經歷時間不長。具體原因可搜尋「第三緯度 ptt」 



【經歷專案】

非法盜用未授權的韓國成人漫畫,添加自製封面後上架販售的平台
Experiences 00 01@2x 6daa47d1df70d315f129dcecdd562003831581c4cdd8f9c819aa22d4a24ae150

日商優橋, 數位廣告優化師 & 前端工程師2017 年 12 月 - 2019 年 3 月

【公司介紹】

日商優橋是一間代理日系化妝保養品牌至台灣後,開設線上商城販賣,並提供行銷、數位廣告、物流管理和客戶服務的貿易公司 


由於公司客戶皆為日本人,因此使用日文作為工作上溝通的主要語言 


在日商優橋我經歷了兩次不同的職位, 開始為數位廣告優化師,負責管理 Facebook Ads Manager 和 Google Ads 上的廣告投放成效,以及優化網站的流量和 SEO 


這個階段主要是運用大量的 A&B testing 和 Google Analytics 資訊推測使用者喜歡什麼樣的設計 或是透過 Heatmap 工具分析使用者的視覺注意力移動,進而規劃更直覺的 UX 流程 


這段經歷對我在 FrontEnd Developer 的道路上建立了珍貴的 UI/UX 素養



其後申請職務調派成為前端工程師,主要工作是為公司代理產品架設官方網站與一頁式活動網頁 


由於日文還算流利,這段期間也同時兼任 PM,並負責管理公司前端團隊 (管理人數 2 人) 


由於線上商城的主邏輯為外包架設,架構採用 php MPA,因此前端團隊主要使用原生 JS 及 jQuery 應付頁面切版及動態效果。並偶爾使用 Wordpress 快速架站



【經歷專案】

俏樂斯 官方網站
https://supr.link/9j9Ny
日本沖繩保養品俏樂斯的台灣官方網站
美髮保養的內容型自媒體網站
專接業配的部落格
Experiences 00 00@2x 504900dc09d82f711fdb54cf5763251cab5193a844856da978b2b8f3907ecd5a

亞洲遊, 日本市場業務及營運2016 年 9 月 - 2017 年 9 月

【公司介紹】

接洽日本旅宿房源並協助其上架到公司平台出租。同時擔任公司對日翻譯窗口、及協助消費者排除旅日中遇到的緊急狀況。


【業務內容】

以日本市場為中心向民宿經營者介紹我們的服務

為既有經營者提供服務支援 (促銷推廣提案、翻譯、刊登協助、入住問題處理)

日本房源數量的掌控、管理及成長目標設定 (以每季為單位設定房源目標成長數量並達成) 


【實際績效】

2016年度 (3月~12月) 房源數 1682 (目標數 2040;達成率 82%) 預約筆數 2353

2017年度 (1月~現在) 房源數 2616 (目標數 2800;達成率 93%) 預約筆數 8846;與前年比成長376%

Experiences 00 01@2x 6daa47d1df70d315f129dcecdd562003831581c4cdd8f9c819aa22d4a24ae150

專案經歷 Projects

beanfun! 數據與管理中心

【專案網址】

https://supr.link/30dOw


【專案簡介】

這是一項來自橘子集團的外包專案。其展示了使用到 beanfun! 服務的所有 APPs 的數據。可用於資料分析、即時資料監測、以及做為微服務嵌入至其他應用提供資料展示服務


【專案架構】

前端部分為我從前人接手後重構。採用 Nuxt SPA + Vuetify + Sass 搭建

後端則有 Spring + gRPC 作為統一的 API server,用以提供各服務的原始資料


【種類豐富的圖表卡片】

此專案有非常多樣的圖表,並需要保持可隨時因應需求擴充更多圖表的彈性

渲染圖表上總共使用了三種套件:chartjs、D3.js 和 google-charts。同時為了擴展性及複用性,每個圖表外層都包了一層卡片組件


圖表嵌入卡篇的方式是透過 Vue slot,並且設計上使之可以很容易隨時替換為其他的圖表。卡片組件同時負責對傳入的 row data 做標準化後再往下傳至圖表。

如此可使圖表組件專注在資料展示,並使每個卡片組件都可獨立運作。減低了耦合度的同時,還讓卡片可輕易複用與移動。


Projects 00 00@2x


【標準 OAuth 2.0 流程的 Single Sign-On】

由於此專案還擔負著成為其他應用微服務的功能,因此我們串接了 beanfun! SSO 系統作為專案的身分驗證方式。背後是透過標準 OAuth 2.0 及 shared cookie 完成的


【Server Side Cache】

此專案常在一個頁面中使用大量圖表,因此為了加快響應速度,於後端使用 lru-cache 快取住不會隨時間變動的資料,並在前端導入了 Cache Storage (快取優先策略) 來增進用戶體驗

資策會 城市儀表板

【專案網址】

https://supr.link/oLOid


【專案簡介】

資策會外包發案的服務。主要功能為集合各式政府資訊公告平台的數據於一處統一展示


【專案架構】

前端為 Vue SPA + Bootstrap,後端為 Play + MongoDB 的專案

我主要負責專案中圖表相關部分


【動態的圖表頁面】

此專案將圖表頁面所需的圖表種類、大小、順序、圖表所需資料的 query 方式等資訊以設定檔形式存於 DB 中,前端渲染時依照 API Response 的的內容動態生成圖表

由於資料來源涵蓋了所有政府平台數據,圖表的 filter 很複雜 (時間區間、縣市、指標類型、x軸y軸設定...等等)。此專案最大的挑戰便是設計一個足以描述這一切的 JSON Schema,以及將 API Response 折成圖表套件可接受的形式的過程

專案中大量使用到 lodash 處理資料。並綜合了 D3.js, Chart.js, Google Chart 三種套件製作圖表


學歷 Education

東吳大學, 文學士(BA),日本語文  2013.09 ~ 2017.06

京都同志社大學,日本語及文化  2016.03 ~ 2016.08

為期半年的交換留學,於當地學習語言及日本文化

競賽與活動 Contests & Activities

公司評鑑優勝  2018.08

現職公司(日商優橋)第一屆內部評鑑,主要評量員工對業務及市場的把握程度、日文商談能力及危機處理能力等。

京都交換留學  2016.03 - 2016.08

為期半年,前望日本同志社大學進行文化語言交流。在當地除學習日文外,也參與了攝影社、交流會等課外活動。同時透過兼職累積了在當地的工作經歷。

全國日文配音大賽大學組優勝  2015.05

擔任領隊帶領校內6人小組,學習日本聲優為動畫進行日文配音,並取得了全國賽的優勝。

全校日文辯論賽優勝  2015.03

擔任領隊及第一反駁,以日文就台北是否該廢除Ubike進行正方辯論。最終獲得校內優勝。

日文系學會活動部  2013.09 - 2014.02

籌備系上每年的四大活動,包含場地商借、活動流程規劃、排舞與排戲、道具製作等等


證書 Certifications

Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

自我精進

利用下班及假日研讀Udemy線上課程、參加台大資訊推廣部網頁課程等等

Projects 01 01@2x 5659ae1046a29c3ededd36e4a50b2c0f0c26b5fd7152a5d1cc138de803a81cbf

學歷證明

畢業證書、交換留學證明與台大資訊推廣部結業證明

Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

語言能力

日文檢定JLPT N1

Projects 01 01@2x 5659ae1046a29c3ededd36e4a50b2c0f0c26b5fd7152a5d1cc138de803a81cbf

競賽優勝

各項競賽相關證明