唐 培倫

Skill: Vue, Nuxt, aws lambda, Typescript, shell, webpack

• 網站效能優化:透過 Dynamic import 減少 client render 的 component，讓 SPA 網站的 Global JS 減少 1/4 bundle Size。
• 加入 new relic 監控流程，來觀察網站效能: 導入 new relic 來監控網站效能，並撰寫文件該如何操作。
• Customize State Manager: nuxt 專案中習慣將 data 交給 Vuex 託管，但會增加 Bundle Size，所以架構了一個「state manager」，透過這個工具可以將 data 被 webpack chunk 到對應的 page，減少 SPA Global JS Size。
• 協助 Backend 完成 Edge Cache: 傳統的 SSR 網站無法像 SSG 的網站一樣可以簡單 cache 整份 HTMl，於是與 Backend 合作，協助把許多 API 搬到 Client side 執行，讓 AWS CDN 可以 Cache 整份 HTML ，先讓 FCP Render Cache 的版本，Client Side 再透過 Hydration ，將 Client Side 的 Code on-demand- Lazy Loading，來加速網站 FCP。 前後差異大約3s ，Page Speed 分數從 40 提升至 60
• 導入 Vue Composition API: 導入 Vue Composition API 到專案中，並負責制定 code style，和撰寫 Demo Code。
• 導入 AB Test 架構: 透過 AWS Lambda 處理 web redirection，讓 user 可以被導頁到不同的 url 並搭配 GA 追蹤 A/B Test 的成效分析
• Landing Page CMS: 因應市場部同仁需要針對不同國家有不同的 landing page content ，故設計 CMS 系統，讓市場部同仁可以依照自己的需求決定 content 以及 SEO
• 短影片開發: 開發類似 youtube shorts 的功能，處理跨瀏覽器、跨裝置 media player，包含解決 IOS 影片無法自動播放問題，手機版與電腦版不同的操作行為
• Tracking Modules: 設計Tracking模組，以及收斂 GA 、Google Conversion 、FB Pixel 、Line Tracking 、Tiktok tracking 、ByteDance Tracking 、Linkedin Tracking 、Naver Tracking 、 AmazingTalker Tracking ，讓外部呼叫 Tracking 時可以有統一的 API，不需要針對不同的 Tracking 再新增新的寫法
• Login Modules: AmazingTalker 登入方式有 Email 、Phone 、google 、apple、FB、Kakao、Twitter、Naver、Line ，且需要 By 不同的國家顯示不同的登入選項和排序 ex. Kakao 只有在韓國才有。故設計了一個 module 可以針對以上情境給予使用這不同的登入選項和排序，並將 API 設計一致，方便之後新增其他的登入方式
• 多網域架構: AmazingTalker 在不同國家會有不同的網域，協助處理 cookie 如何共用以及各個 3rd Party login
• Localize Route: 協助開發在特定的國家網域下，切換語系會在 url 上多一個 localize path ex. https://ca.amazingtalker.com/fr/
• Hiring Manager: 擔任前端面試官，負責制定面試題目、作業題目，並協助 HR 優化前端面試流程
• Team Mentor: 協助 Junior 前端熟悉產品 know how 、Code Review、職涯發展

Skill: AngularJS, React, Typescript, webpack

• 折價券模組化: 以前折價券尚未建立模組，每個PAGE 都有自己樣式和邏輯。造成折價券的需求一但改變，就需要調整10個頁面。我花了2週的時間，將官網折價券，建立模組化，並收攏所有邏輯，減少折價券開發新功能的時間。
• i18n 開發工具管理和開發: 將所有專案的語系，PUBLISH 上 AWS S3，讓網站透過CDN 拿到，並負責code review and merge PRs。
• 公司內部 css framwork 管理與開發: 負責 CI/CD和版本控管，定期套件升級、code review and merge PRs。
• 折價券後台設定介面: 開發折價券指定排除商品、相對效期、指定使用門市，會員禮模組。 CRM後台系統開發：會員查詢、會員詳細資訊、會員手機號碼更改、會員資料匯入 匯出。
• 名單管理功能開發: 名單發送簡訊 email、指定名單發送折價券、第三方合作廠商API 串接。
• 91APP 技術Blog: 使用 Gatsby 獨立開發 91APP 技術 Blog
• 導入 styled-components & 全站Theme架構: 將 sass 重構成 styled-components，並加入 ThemeProvider，支援全站 Theme
• 將 AngularJS 網站 重構成 ReactJs: 2019 年底開始，協助公司將原本使用 AngularJs 撰寫的網站，重構成使用 ReactJS 撰寫，並於 2021 Q1 重構完畢。要負責 多語系基礎建設 & 撰寫 共用 custom hook (ex. useInfiniteScroll、usePrevios ) & code review and merge PRs。
• LINE 模組後台設定介面: 開發 91APP 後台串接 LINE 功能 (LINE Bot、LINE 官方帳號設定)
• 推薦人後台設定介面: 開發 91APP 推薦人 後台設定介面、報表