蔡承桓

Ryan Tsai

前端工程師

台北、新北市

"要成大事的人都得對自己下狠手"

這是我學習前端開發的態度。

1 年前端網頁工程開發經驗。

具備自學能力並時時關注新技術與趨勢，擅長跨部門溝通、團隊合作。

2022 年 9 月，參加第 14 屆 iThome 鐵人賽，文章主題「【Tailwind】你聽過尾巴風嗎 ? CSS 框架 Tailwind css 的新手入門指南」

鐵人文章

[email protected]

https://github.com/Linlaose

工作經歷

React 前端工程師 • 愛吠的狗娛樂股份有限公司 April 2023 - now

前端團隊開發經驗：

共同建立專案管理的標準開發流程
開發前端團隊後台 template
與 UI/UX 設計師和 PM 合作，達成客製化專案需求
與後端工程師和前端夥伴合作打磨公司產品

專案 (已上線)：熱蘭遮知識平台 Aug 2023 - Dec 2023
職責

擔任前端主要開發人員，負責全案開發

Tech stack

NextJS, MUI, TypeScript

Git 版控

dev: 開發，於本地建立 feature 分支

prod: 上線

跨部門溝通
- 協助 PM 於會議上釐清客戶需求
- 和 UI/UX 設計師密切討論，完成專案內設計需求
- 事前開立 API 所需的 interface 給後端工程師，而後進行微調修正
遭遇難題與解決方式
1. 無 Y 軸式網頁
  - 改變切版邏輯
  - 與美術溝通開發時遭遇的高度尺寸問題
    - 設計稿上與網頁高度不相符之處，抑或是間距以及字體大小等諸多潛在問題
2. Next app router 的使用
  - 官網查詢
3. RSC 的使用和觀念釐清
  - 多次 search 文章進補 RSC 相關知識
4. SVG 底圖圖釘和底圖標籤 (動態)
  - 參考已有的靜態 SVG 底圖圖標為基底，進而製作可隨後台改變位置的動態圖標
  - 將一般的切版邏輯切換為 SVG 的模式 (因樣式以及運作方式的不同)
5. 圖片可放大
  - 原生方法可行性評估
  - 套件查找
  - 套件實作 (react-zoom-pan-pinch)
6. SVG 可點擊的底圖區塊
  - 查找實作影片學習並應用
  - 和 UI/UX 設計師討論所需的 SVG 底圖需求
7. 圖片完整呈現不可裁切
  - 與 UI/UX 設計師溝通，確認圖片所需之比例
8. GA 嵌入 Next 專案
  - 藉由曾經的 GA 嵌入 React 專案經驗進行調整
9. 與後端工程師能溝通的機會有限
  - 先行製作 interface 開立 API 規格
  - 藉由 interface 的表達增加有效溝通
10. PM 和客戶意見相佐
  - 居中間人幫助說明技術難題與提供可能的替代方案
  - 協助 PM 增加前端知識
成長與成就
1. 圖片的大量修改、底圖區塊的技術實踐、設計稿的極大變動都促使頻繁與 PM 和美術進行溝通
  - 增加與團隊表達以及釐清訴求的能力
2. 首次直接與後端對接
  - 學會以 interface 的方式增加有效的溝通模式
3. 首次嘗試製作底圖圖標和底圖區塊以及 Next 專案運用 RSC 的經驗
  - 開發的思維邏輯需與 React 開發有不小的改變
  - 遇到未知困難的解答能力進一步提升
4. 輔助 PM 與客戶開會的經驗
  - 協助 PM 過濾客戶意見
  - 協助 PM 技術說明

專案：前端後台 template Jan 2024 - March 2024
職責

前端開發人員，從建置專案開始，負責全案開發

開發多版本供團隊後續引用，包括：

專案開發前的基本配置 (basic)
- 包含套件：React, React Query, React Router, SCSS, clsx, Husky, commitlint + lint-staged, ESLint + Prettier, Vitest + jsdom
AWS 註冊、登入 (basic-AWS-login)
- 包含套件：(繼承 basic 套件), AWS Amplify
基本登入 (basic-login)
- 包含套件：(繼承 basic 套件),React Hook Form, Zod, React-Icons, React-Toastify
引入 CSS 框架版本 (basic-login-shadcnUI)
- 包含套件：(繼承 basic 套件 + basic-login 套件), shadcn/ui, React Table

Git 版控
- basic
- basic-AWS-login
- basic-login
- basic-login-shadcnUI
成長與成就
1. 更加理解元件設計：因為要當作 template 使用，在開發元件時會更加思考其擴展性、可維護性...等等
2. 套件熟悉度上升：使用到滿多 React 生態圈的套件，在使用套件提供的 API 時會藉由 custom hook 妥善將其進行分類，不僅僅只是使用而已

造船工程師 • 海軍造船發展中心 Sep 2019 - Sep 2022

1. 制訂及優化 SOP：藉由國際法規的解讀，與合作廠商協調溝通後，產出初版 SOP 再根據後續施工現況做溝通微調。

2. 內外部溝通合作：內部長官的想法和國際法規的堅持常需要與外部合作廠商進行溝通，從中協調出雙方都能接受的合作方式。

3. 會議召集及資訊整合：不管是廠內出狀況或是新製程加入還是檢驗的需求等各種施工問題，都經常擔任會議召集人及主持人，召集涉及問題的各方人才，並時常整合我方與多方意見讓會議順利進行，最終取得各方可接受的方案。