//assets.cakeresume.com/assets/contentarea/contentarea-2d64eca8dae2a1ffb31e0fb1df887bbad072c7c19734d7d30fa14884bbcc299a.css

網站連結：https://ifind.tw
專案介紹：https://docs.google.com/presentation/d/1utQiniD0L7Q6ANaztRdefG-p2nivsELfIhMm9OcDdvg/edit?usp=sharing

【專案簡介】
資策會外包發案的服務。主要功能為集合各式政府資訊公告平台的數據於一處統一展示

【專案架構】
前端為 Vue SPA + Bootstrap，後端為 Play + MongoDB 的專案

我主要負責專案中圖表相關部分

【動態的圖表頁面】
此專案將圖表頁面所需的圖表種類、大小、順序、圖表所需資料的 query 方式等資訊以設定檔形式存於 DB 中，前端渲染時依照 API Response 的的內容動態生成圖表

由於資料來源涵蓋了所有政府平台數據，圖表的 filter 很複雜 (時間區間、縣市、指標類型、x軸y軸設定...等等)。此專案最大的挑戰便是設計一個足以描述這一切的 JSON Schema，以及將 API Response 折成圖表套件可接受的形式的過程

專案中大量使用到 lodash 處理資料。並綜合了 D3.js, Chart.js, Google Chart 三種套件製作圖表

資策會 城市儀表板

Sr. frontend engineer

John Hsieh

網站連結：https://supr.link
專案介紹：https://docs.google.com/presentation/d/12UIUbfx40CHYqd3KFqq6u4f70GwqG2MdQPSbvwUAw4g/edit?usp=sharing

【專案簡介】
SuprLink 超級連結是一個縮網址服務。功能涵蓋縮短網址、點擊追蹤、個人與團隊型態的使用者管理、廣告投放、圖表數據呈現和dashboard 形式的管理後台

【專案架構】
此專案前端由我單獨負責，架構上採用 Nuxt SSR(Express) + TypeScript + Sass 構建

後端則有一台 Express + TypeScript + MongoDB 作為 Restful API Server，並有另一台 Express 專門乘載縮網址跳轉的流量



【TypeScript 規範的 Data schema】
專案使用 TypeScript 除了用以型別檢查外，更重要的是描述了資料從 API response 到 Vuex Store 再到 Component data 所經歷的 Schema 變換。這在開發上一定程度能省下使用 Postman 觀察 Response 精力



【搭建於 Tailwind 上的小型 UI 框架】
CSS 上一大特色為使用 Tailwind 而非完整的 UI 框架。這麼做是因為專案重視 Mockup 的還原度，從圓角、各式顏色到字體字型等皆有要求，這種情況下使用 UI 框架容易造成綁手綁腳的情況

Tailwind 有著極簡單純的設計風格與極高彈性的客製化能力，並提供 @apply 裝飾器快速繼承內建的 class。

我使用這項優勢配合 BEM 命名法，為專案打造了專屬、並且複用性高的小型 UI 框架

【高度彈性的表格組件】
另外此專案大量使用一個看似簡單，實則非常不好實作的表格 (見投影片 3)

其困難點有四：列與列之間須有間距、每張表格都有不同的可縮放欄位及固定欄位、RWD 下無須左右滑動瀏覽、Component 需複用

這些限制剔除了傳統的 Table 實作與 Flex 實作，最後我採用的方式為 Grid Layout 配合 Vue Slots

前者用以處理欄位的可縮放範圍和列間距，後者用以實現完全客製化的欄位內容。最終設計成如下的簡潔 API：

【多語系與黑暗模式】
開發中的 Feature。多語系主要利用 i18n 實現，黑暗模式則是將會動態變換的顏色使用 CSS Variable 描述，並將此顏色設定融入到 Tailwind 框架來實現。

SuprLink 超級連結

我在前端開發領域有5年經驗，目前在 LINE Taiwan 擔任資深軟體工程師。常用的技術架構是 React(NextJS)，Vue(NuxtJS) 以及 TypeScript。

我的職涯中經歷過千人規模的大型軟體企業，在已具有完整的開發工具與流程的環境工作；也曾經幫助剛成立的新創公司，從零開始規劃技術到完整上線產品。

這也是我的個人優勢 - 具有在資源不多環境下的規劃能力與適應性，也能在規範的環境中嚴謹開發高質量的程式。

除此之外我還能流利使用英、日、中三種語言。除了母語的中文外，皆有達到職場溝通程度。

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

閒暇時我喜歡看電影、騎車兜風、打 Game，偶爾會撿壞掉的 3C 產品來修。近期最有成就感的事是自學焊接電路後修好一台垃圾桶 (咦 ?)

另外我還喜歡分享所學，看到有人因為自己而獲得成長，對我來說的成就感不亞於解決技術問題。

以前曾當過家教，有 3 位前端學生與 1 位日文學生。並且在職場上也有擔任 mentor。看到學生理解新知識時會很愉悅。

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

東吳大學 Soochow University

LINE

軟體工程師

LINE Taiwan 是 LINE 母公司在台灣成立的研發基地，主要負責 LINE 軟體中具有台灣在地化特色的服務及應用程式開發。產品包含有 LINE 購物、LINE Today、LINE Music、LINE 旅遊....等台灣在地化應用，以及其他國際合作開發的專案。



我所在的團隊為電子商務的 EC team，主要開發 LINE 購物平台，團隊規模約 30 人。開發上採用敏捷開發流程，分工明確嚴謹。
同時我們高度注重程式碼品質，開發團隊奉行「每一行程式碼 merge 前都要有另一個人看過」的準則，在 code review 上高度要求。這同時也是整間公司開發團隊的核心理念

技術上，LINE 購物前端使用  Vue SSR + GraphQL + TypeScript + SASS + ExpressJS 的技術棧。不過各專案的技術選型沒有統一要求，因此也時常接觸到 React Ecosystem 的技術



除了 LINE 購物外，我還參與了 LINE Taiwan 前端的 guideline 制定計畫。此計畫主要目的是統一全公司前端的技術棧 (包含但不限於 framework, testing, coding style, CSS guideline....)。需要大量的 tech research, 溝通, 技術評估和撰寫文件等任務。

Foxit 是專注於向歐美市場提供 PDF 解決方案的上市軟體公司，包含 PDF 閱讀器、編輯器，及各類轉檔程式。其 PDF 閱讀器市佔率僅次於 Adobe。



我在 Foxit 新成立的 AI 團隊中擔任全端工程師，負責開發一個整合團隊內部所有 AI 微服務後對外提供 API 接口的 2B 管理平台，同時負責管理前端團隊 (2人)。



我所負責的專案在開發上前端使用 NuxtJS + TypeScript + ElementUI，後端使用 NodeJS + TypeScript + mongoDB + Redis。

不過由於新團隊還在技術選型階段，團隊成員個性也樂於嘗試新東西，因此也有部分專案前端是使用 NextJS + TypeScript + MaterialUI。同時我們也正在規劃導入 GraphQL 和 NestJS。

Foxit Software, Inc.

全端工程師

電獺是一間除了有少女外，同時擁有 Youtuber 自媒體、各式 WEB 與 APP 應用組成的自有廣告生態系、以及接案開發三種面向的公司。 

在電獺的前端開發團隊，技術上我們使用 Nuxt 生態系 + Typescript + Sass&TailwindCSS 作為主架構，並使用 Docker + k8s 執行 CI/CD 流程。

團隊上我們為專案導向，小人數的團隊有助於減少溝通成本，並可執行更快速的產品疊代。每位 coder 都需妥善分配時間資源在複數專案，以期不 delay 各產品的開發時程。 

開發心態上，我們注重產品的設計稿和易用性，因此使用 TailwindCSS 為每個專案量身訂做小型 UI 框架。程式碼部分注重可擴充性和模組化複用。 

電獺股份有限公司

網頁前端工程師

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

產品架構前後端分離，前端主要使用 Vue，並串接微信支付作為金流 

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

第三緯度科技公司

前端工程師

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

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

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

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

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

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

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

此時工作上的產品比較需要純切版與製作 UI 動態效果，因此使用原生 JS 配合 jQuery 居多。並偶爾使用 Wordpress 快速架站 

日商優橋

數位廣告優化師 & 前端工程師

《業務內容》
‧以日本市場為中心向民宿經營者介紹我們的服務
‧為既有經營者提供服務支援 (促銷推廣提案、翻譯、刊登協助、入住問題處理)
‧日本房源數量的掌控、管理及成長目標設定 (以每季為單位設定房源目標成長數量並達成)

《實際績效》
2016年度 (3月~12月)  房源數 1682 (目標數 2040；達成率 82%)  預約筆數 2353
2017年度 (1月~現在)  房源數 2616 (目標數 2800；達成率 93%)  預約筆數 8846；與前年比成長376%

Share