Ai7ardmkwr9aegrensrj

陳財丁(Dean Chen)

失敗不可怕,可怕的是從來沒有努力過

前端工程師


Conference:

 2019 JSDC

 2019 快樂學程式- Python第二場系列工作坊


Course:

  2020 Modern Web 2020

  2020 91APP電商技術大解密—2020 線上技術分享系列活動

  2020 科技報橘 Webinar 資案篇── 解密VPN 資安管理弱點!專給中小企業的數位辦公教戰守則

  2020 Typescript: The Complete Developer's Guide


工作經歷

雲端互動開發有限公司, 前端工程師, 2020/2 ~ 現在

◎  負責前端網頁開發,主要使用 React.js, Vue.js
◎  在前端專案導入 Xstate,讓專案的資料管理更有脈絡可循
◎  導入單元測試,增加程式穩定度,減少不確定姓
◎  導入 TypeScript,增加程式可讀性和減少在瀏覽器查問題的時間

◎  改良 Cache 設定,減少使用者無畏的網路流量及增加體驗

連億開發股份有限公司, 前端工程師, 2019/5 ~ 2020/1

◎  負責前端網頁開發,使用 React.js 和 PWA
◎  導入 CSS 套件 -- Material-UI,加速開發速度
◎  促使 UI team 導入 Adobe XD,使前端工程師和 UI 合作更為方便

法國巴黎管理顧問公司, 軟體工程師, 201711 ~ 2019/5

◎ 負責軟體程式維護和開發,主要使用 Graph Talk
◎ 為第一批使用 Web Service 架構開發的種子,負責教導回答同事使用此架構開發
◎ 負責協助 Users 釐清部門需求以及如何規劃程式架構


技能


JavaScript

◎ JavaScript (ES6)

◎ TypeScript

◎ React (Hook) / Redux

◎ Vue.js / Vuex

◎ PWA - Service worker

◎ Xstate


Back-end & Others

◎ Node.js / Express - Http server 

◎ Google App scripts


DevOps & Version Control

◎ Docker - 撰寫 Docker file

◎ GIT - 使用 SourceTree 或 Terminal進行版本控制

◎ Nginx - 架設靜態網站,像是路由和 http2 push 的啟動


HTML/CSS

◎ HTML5 & CSS3

◎ HTML template engine - Pug

◎ CSS preprocessor - SASS, SCSS 

◎ CSS In Js - Styled Components, BEM naming convention

◎ CSS Framework - Material-ui, TailwindCSS, Element-ui, Bootstrap


Database

◎ IndexedDB - Browser database 

◎ SQLite 


Tools / Development

◎ Webpack / Gulp / Parcel - 自動化打包
◎ Unit Test - Jest, React-testing-library, Vue-test-utils
◎  VS code
◎  NPM / YARN 指令
◎  linux - 基本指令應用
◎  Post man - API 測試
◎  Json server - 暫代實際 API 進行開發
◎  Git Flow
◎  Scrum
◎  Jira / Zoom / Slack
◎ Page speed / lighthouse - 改善網站效能

活動剪影

Paragraph image 06 00@2x
Paragraph image 06 01@2x
Paragraph image 06 02@2x

           JSDC- JavaScript AI 分享                                     JSDC- CSS 歷史演進分享                                快樂學程式- Python分享


商業性專案

Paragraph image 01 00@2x

ADAC

協助客戶打造金融商品的資料呈現,架構為 React + Python

◎ 網站為獨自一人開發,使用諸多技術進行開發 

  1. React + TypeScript:使程式碼可讀性變得更好,減少錯誤發生機率 

  2. Material UI:減少刻畫 UI Components 的時間 

  3. Xstate:有別於以往使用 Redux 或 React State 管理狀態和資料,透過有限狀態      機(FSM),讓狀態之 間更為明確,甚至可以將程式碼轉換為 UX 圖型,直接和 團隊成員討論 

  4. PWA:透過 workbox 增加 Service worker 的程式可讀性,並讓使用者可以下載到手機或桌機上,像 Native app 一樣進行操作 

◎ 網站內有個功能需要 Highlight 使用者輸入的字,因此製作了一個套件並上傳到 NPM 上供大家使用 

◎ 除了基本 Nginx 設定外,額外設定 Http 2 push 的技術,讓網站的 Performance 變得更好


網站連結

台塑 PVC

協助客戶台塑集團打造船運訂單系統,架構為 Nuxt + .Net

◎ 負責網站 Dashboard、User Guide、Language Settings、Chat room 等功能開發,使用 Vue.js + Element ui 

◎ 開發期間,原本後端因為一些因素,造成 API 無法及時產出,為了維持專案進度,花了幾天使用 Express + Sqlite 製作臨時 Server

Paragraph image 02 00@2x

外貌服務平台

協助客戶外貿協會打造內部行政系統,架構為 React + .net

主要負責: 

◎ 外貿內部共有六種類型的行政表單(上圖的請採購作業),協助客戶將紙本表單電子化,並將繁瑣簽核歷程以清楚明瞭方式呈現 

◎ 由於商業邏輯十分複雜,導致程式碼規模一度失控,後來導入物件導向思考,將程式邏輯透過 Class 逐一分類管理,降低了耦合度和維護成本

Paragraph image 04 00@2x
Paragraph image 04 01@2x
Powered by CakeResumePowered by CakeResume