Sihlihbnqyynao4au4c4

朱永彤 (Chonny Chu)

8 年的程式開發經驗,主要使用 react 和 typescript 開發前端網頁,也寫過三年的 C# 和 ASP.NET,熱衷於專案架構研究,熱愛鑽研各種技術和工具,喜歡不斷學習,樂於接受一切挑戰並盡力發揮個人潛能,對於工作所需的技能,我相信都能很快學習馬上適應上手。

前端工程師
Kaohsiung,TW
[email protected]

專業技能


Front-end

  • 5 年 React.js 開發經驗,對生態系統套件如 router, redux, apollo 均熟悉
  • 擅長使用 Flexbox 搭配 tailwind css / SCSS / CSS-in-JS 等方式刻畫面
  • 熟悉 JavaScript ES6 / TypeScript 語法
  • 介接 Restful API 的經驗
  • 熟悉 Bootstrap, Ant Design 等 UI Library,並能打造 RWD 網站。
  • 能自行調整 Webpack 參數也有優化開發/正式環境設定的經驗
  • 熟悉地圖相關套件,如 Google Maps API 和 Leaflet.js


Back-end

  • 寫過 3 年的 ASP.NET / SQL。 
  • 有使用過 Express / NestJS 開發 API Server 的經驗
  • 使用過 MySQL、MSSQL、PostgreSQL 等資料庫。
  • 有使用 Nginx 和 github pages 佈署靜態網站的經驗


Others

  • 熟悉 Git 版本管理工具
  • 有多人合作開發經驗,對於 Git 指令、 Git flow 均算熟悉
  • 會使用 ESLint 和 Prettier 確保團隊程式碼品質一致
  • 對 Design pattern 和 Refactoring 有相關經驗,喜歡鑽研好的解法
  • 熟悉使用 slack/teams 和其他工具進行遠端工作的經驗

工作經歷

緯創資通,2016 年 11 月 - Now

一開始是開發一叫做 TibaMe 的線上學習網站,後來都專注在公司的內部專案,主要工作內容:
1. 完成前端功能和串接後端 Restful API,偶爾也會幫忙修後端 bug 或加小功能

2. 協助設計師評估和討論 UI 的可行性

3. 協助新進和 junior 同事完成工作 (指引方向、協助 debug、Code review 等等)


以下為期間負責的專案項目:


TibaMe

  • 導入 redux saga 並制定寫作規範,避免邏輯散落在 aciton 和 reducer 以提升維護成本
  • 研究 react-dnd + TinyMCE,獨立完成一類似 cake-resume 的製作課程功能
  • 優化開發環境的 webpack 設定,將原本的 rebuild 時間從 10 秒縮減為 1.x 秒左右
  • 正式環境效能優化,將首屏載入時間縮減為1.x 秒內
  • 分享 Webpack 基本參數設定、redux-saga 的教學,以及專案架構改進的研究給其他同事
  • RWD 功能開發

高榮病理平台及數個公司內部管理系統
  • 使用 React 及生態系統套件完成前端畫面和功能
  • 研究 cornerstone 顯示病理影像,提供相關操作功能,如標記、框線、備註等等功能
  • 研究 diff2html, html2pdf, cheerio 套件,完成報告版本比較、轉檔匯出 PDF 功能

Experiences 00 01@2x

程沛資訊,2018 年 3 月 - 2021 年 8 月 (約聘性質)

屬於接案性質公司,主要接政府或是其他公司二包的案子,主要工作內容有:

1. 根據系統需求,初始化專案的基本架構、佈局及元件,讓其他同事可快速開始功能開發

2. 負責針對複雜或難易度較高的需求,評估可行性和選定可行方案及實作

3. 協助設計師評估和討論 UI 的可行性


以下為期間負責的專案項目 (只列出比較有特色的):


路燈養護管理系統

  • 導入 Apollo client 介接後端 API,提升巢狀查詢效益、快取共用資料以減少重複查詢成本
  • 導入 TS,減少低級 bug 和維護成本、以及降低重構時的風險
  • 導入 yarn workspaces 管理多個子專案和共用元件,不必維護多份程式碼和 node modules
  • 使用 storybook 建立共用元件和函式的整理集,讓其他人可快速了解可用的元件或函式
  • 優化一次在 Google Map 上渲染將近三萬筆 Marker 的效能


廈門小區管理系統

  • 使用 Leaflet 完成一可把物件拖曳至地圖中的功能
  • 使用虛擬滾動的技術來提升長列表渲染和滾動的效能


D+防走失安全票卡系統

  • 使用 Google Maps API 完成地圖功能,包含顯示點位、行走足跡、繪圖操作等等
  • 中途加入救火,在一個月內完成約 80% 左右的功能
  • 使用不同 env 設定多個環境變數和調整佈署指令,可方便的在本機將 code 佈署到主機上,減少需 ssh到不同主機上佈署可能造成的失誤


CDO Crawler

  • 使用 d3.js 實作一可拖曳、展開和收合的網絡圖
  • 在兩週內將 UI 大改版成類似 FB 的介面

Experiences 00 02@2x

日月光半導體,2013 年 10月 - 2016 年 10 月

1. 使用 ASP.NET 開發公司 HR 相關功能和系統
2. 撰寫 SQL 語法產出資料提供使用者報表
3. 與使用者開會討論和釐清需求、規劃工作項目和時程


以下為在職期間所負責的專案項目:


卡務申請系統 - 電子化方式進行識別證製作、掛失、註銷等流程申請與管理

  • 以 ASP.NET MVC5 開發
  • 初次嘗試以 React + TypeScript 建立畫面及共用元件,以及使用 Webpack 做打包和編譯
  • 使用 nopCommerce 的專案架構,學習依賴注入、抽象、 動態載入等技巧

門禁權限申請系統 - 公司導入 EAL6 安全認證,電子化管理各廠區的門禁權限

  • 完成一類似 104 地區和職務類別的多層多選單,並以動態方式載入子選單資料避免畫面卡頓
  • 以 Repository Pattern 封裝資料存取層來介接多種資料庫的資料,降低維護成本
  • 以 Chain of Responsibility 模式來實作複雜的簽核流程,降低程式碼複雜度


人力出勤狀況系統 - 以圖表和彙總表格,呈現各廠員工出勤狀況

  • 使用 jsTree + DFS + Composite Pattern 實作 N 層的組織樹狀元件
  • 撰寫排程蒐集和整理門禁進出 log、計算和匯總後存入DB,每次約有 30 萬筆資料,在 50 秒內可處理完成

Experiences 00 03@2x

專案簡介


TibaMe

為一著重在資通領域的線上學習網站,如人工智慧、區塊鏈、軟體開發等等,包含線上學習及線下實體課程。

Paragraph image 02 00@2x

D+防走失安全票卡

一防止長輩走失的定位追蹤系統,使用(BLE)Beacon 的微定位訊號感測器裝備在使用者身上,再透過遍佈各處的感測器去接收 Beacon 發送訊號精準找出使用者位置

Paragraph image 02 00@2x

路燈養護管理

提供給各縣市政府人員進行路燈資料查詢及編輯、或用地圖檢視和操作路燈,以及路燈報修案件管理的系統。


這個專案涵蓋了手機維修 APP、民眾報修系、權限管理以及後台管理等等附屬系統


Paragraph image 02 00@2x

CDO Crawler

一國防部的輿情分析系統,由爬蟲定期到中國的軍武和社交社群,去爬那些被歸類為意見領袖的帳號的文章、照片和影片,並將這些資料做字詞處理後,再由以仿 FB  的系統介面來呈現這些文章、照片。

Paragraph image 04 00@2x
Paragraph image 04 01@2x

Side Project </>


cra-template-antd-admin

CRA 的自定義模版,我平常主要使用 CRA + Ant design,且習慣會添加或修改一些基礎設定,如 prettier, webpack alias, router, tailwind css 等等,因此建立了這個模版將這些功能整合起來,減少之後新專案需重複設定的時間。


Paragraph image 02 00@2x

slack-dark-theme

我很喜歡使用黑色主題,不論是瀏覽器、編輯器或是其他 App,通通都想弄成黑底的。


在當時 Slack 還尚未出 dark theme,因此我研究了該怎麼魔改它的樣式,並弄成一個自動的 script,無須任何步驟只要執行完就直接將黑色主題套用至 Slack。

Paragraph image 02 00@2x

next-gql-hnpwa

為了練習 Next.js + Apollo-server / client 的專案,利用 HackerNews 的提供的 API,仿照原始網站來切版和串資料,我完成了大部分的頁面和功能,除了部分尚未開放的 API,如登入、投票等等。

Paragraph image 02 00@2x

react-starter-boilerplate

在 React 剛出 15 版時,Create-React-App 還不太成熟,也還沒有 Next.js,當時 GitHub 很流行建 starter kit,因此我也試著自己弄了一套。


我用 eject 後的 CRA 來改,加上 SSR 和整合當時最新的技術,如 Saga, Async reducer, DLL, Hot-reload 等,雖然沒有在維護了,但覺得是個不錯的經驗

Paragraph image 02 00@2x

學歷

國立中央大學 資訊管理研究所 2011/07 - 2013/08

畢業論文: 基於OpenFlow交換機之跨雲端安全管理機制研究

國立高雄應用科技大學 資訊管理學系 2006/09 - 2010/06