陳財丁(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 - 改善網站效能

活動剪影

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

商業性專案

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

外貌服務平台

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

主要負責:

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

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