林家宏

前端工程師   •  [email protected]

擁有 8 年的前端工作經驗，其中有 6 年的 Angular 專業經驗，對 Angular 有著深入的了解。

負責過多個大型專案的架構設計，並且能夠設計出具有規範的 Angular 解決方案。

技能

Language

  • Javascript
  • Typescript

Web

  • Html
  • CSS
  • SCSS
  • Web Component (Angular Elements)

JS Framework

  • Angular
  • Jquery

Unit Test

  • Jasmine

CSS Framework

  • Angular Material
  • PrimeNg
  • Tailwind
  • Bootstrap

Other

  • Git
  • SourceTree
  • Angular Schematics
  • RxJs

經歷 

威煦軟體 - 資深前端工程師 2023/02 ~ 2024/02

  • Angular
  • RxJs
  • PrimeNg
  • Bootstrap
參與專案
  • Indicators
    • 處理 Angular & PrimeNg 的版本升級 (ng7 -> ng13)
    • 產品需求處理 ＆bug 修正 
  • 化學雲 (約80頁) - 公司的 10 年主力產品，因架構與程式過於老舊，且維護人力已不易尋找。所以花費約 10 個月，重新設計全新的前端架構，其中獨立開發約 80% 功能。產品經過成功翻新後，已經順利讓更多 junior 前端參與開發新功能。
    • 前置階段( 原 .Net MVC + AngularJs，重新撰寫為 Angular )
      • 產品原架構分析
      • 規劃新產品架構 
      • 工作項目規劃 與 時程評估 
    • 第一階段 - 初期產品架構  與 可行性執行
      • 完成產品的架構
      • 完善 90% 的通用元件
      • 實現核心的商業功能 (廠區平面配置圖的繪製功能)
    • 第二階段 - 撰寫相關技術文件，規劃讓其他前端進場
      • 專案架構說明文件
      • 整體樣式規範
      • 制定 coding style
      • sandbox
        • 撰寫開發提示文件
        • 撰寫元件範例與使用說明
        • 撰寫表格使用說明
        • 撰寫樣式使用說明
        • 撰寫 vscode 的 code snippets (增加開發效率)
    • 第三階段 - 協助 junior 前端人員進場
      • 協助熟悉專案架構
      • 撰寫工單與分配工作
      • 審核 PR
      • 處理困難或耦合性高的程式
    • 第四階段 - 處理新舊產品開發期間的落差 
    • 第五階段 - 上線前測試的問題修正 & 協助 junior 前端進場
    • 第六階段 - 上線後日常維護 + 開發文件撰寫

多奇數位創意 - 資深前端工程師 2019/10 ~ 2022/11

  • Angular 
  • Angular Unit Test  (Jasmine)
  • RxJs
  • Angular Schematics 
  • Angular Elements (Web Component)
  • Angular Material
  • Bootstrap
  • TailwindCss

參與專案 

  • 土地銀行 - 大型交易平台的框架開發 (約1000頁) : 銀行櫃檯使用的交易系統，因應 IE 即將淘汰，所以重新設計系統，負責表單元件與底層核心功能。
    • 前期
      • 分析與釐清舊有系統的操作邏輯
      • 開發平台的表單元件
      • 開發平台的共用元件
      • 開發交易頁面的通用函式
    • 後期
      • 串接銀行硬體的 Agent (印表機、存摺機、密碼輸入器)
      • 解決客戶的工程師在交易頁時，遇到的任何問題
  • 富邦 - Angular Portal 微前端專案 : 協助同事幫客戶教育訓練。
    • 撰寫技術文件
    • 提供客戶 Angular Schematics 教育訓練 4 小時
    • 提供客戶 VsCode Code Snippets 教育訓練 1 小時
  • 富邦 - FARS 系統 : 內部權限控管系統，獨立開發前端。
    • 與客戶工程師溝通，釐清系統設計
    • 前端程式撰寫
    • API 串接
  • 公司客服系統 : 指導 junior 同事開發公司內部小專案。
    • 整理客服需求，使用 figma 製作 簡易 prototype 給 junior 前端同事開發
    • 負責 code review，審核同事 PR
  • CDE 內部大型審核系統 (約250頁) : 原系統為 .net + php 混合撰寫，重新設計為前後分離架構，擔任前端 leader，負責帶領團隊約一年半。
    • 前期
      • 分析與釐清舊有系統的操作邏輯
      • 設計專案整體架構
      • 開發表單元件
      • 開發共用元件
      • sandbox
        • 撰寫元件的使用範例
        • 撰寫 vscode 的 code snippets (增加開發效率)
      • 制定 resolver 與 api service 程式撰寫規範 (約200個 resolver 與 600支 api)
      • 制定表單頁的程式撰寫規範 (約200個表單頁)
      • 制定 CRUD 表格元件的程式撰寫規範 (約60個表格元件)
    • 後期
      • 負責分配工作讓同事開發 (7名前端同事)
      • 負責解決同事開發時遇到的任何問題
      • 負責 code review，審核同事 PR
      • 每日晨會討論與控管前端進度
    • 其他
      • 定期與客戶開會，報告進度與討論需求
      • 使用 Trello 建立與追蹤 User 問題，並修正相關問題
      • 使用 Azure Boards 分配工作
  • ExPress 業者送件 : 負責前期專案架構。
    • 使用 TailwindCss 設計整體畫面
    • 設計表單元件
    • 設計共用元件
    • sandbox
      • 撰寫元件的使用範例
      • 撰寫通用 service 說明
      • 撰寫表格使用說明

極限科技 - 前端工程師 2018/12 ~ 2019/08

  • Angular 
  • Angular Unit Test (Jasmine)
  • Angular Material

參與專案 

  •  富邦 - 旅平險：與同事一起開發投保功能。
    • 負責製作元件與流程設計
    • 負責後端工程師溝通與 Api 串接

新人類資訊 - 前端工程師 2015/10 ~ 2018/09

  • Angular JS 
  • Jquery
  • Ionic
  • Bootstrap
  • SCSS
  • Javascript
  • Angular

參與專案

  • 580440 報修服務 - 店家回報後台：獨立開發前端
    • 使用 Angular Js 開發
    • 使用 Protractor 對報修單進行 e2e 測試
  • 580440 報修服務 - 微信公眾號：獨立開發前端
    • 使用 Ionic 開發
  • 580440 報修服務 - 店家回報後台 重構專案：獨立開發前端
    • 使用 Angular 開發
  • 其他部門專案 - 畫面切版與功能使用範例 
    • 使用 Jquery 做簡易效果
    • 使用 Scss 做畫面切版

德恩資訊 - 實習生 2014/02 ~ 2014/08

參與專案

  • Sing-N-Share 2.0：
    • 根據 UI 設計師 規劃的 Wireframe，製作供開會使用的 prototype (使用 AngularJs + ionic + Scss )
    • 相關功能測試與 Bug 處理追蹤

睿元科技 - 實習生 2013/09 ~ 2014/01

參與專案

  • 客戶內部資料查詢與投票系統：
    • 維護現有 ASP.NET Web Form 
    • 使用 Crystal Report 開發客戶所需相關報表
    • 撰寫與優化系統相關 SQL

南臺科技大學 學士 - 資訊管理 2011/09 ~ 2014/6

  • 大三 - 統計學 TA 

Side Project 

1. ChatGPT Chrome Extension 


簡介：此工具能夠幫助您更有效率地與 ChatGPT 進行對話，並提供了多種問題範本、快速回覆文字，還有最新推出的超級樣板，以及方便的快捷鍵功能。 (原本是自用的小工具，後來上架到 Chrome 應用商店。)

2.Quick Lookup

Chrome 擴充套件 - Quick Lookup、Github

簡介：此工具提供了右鍵快速查詢相關線上字典的快查功能。

3. ngx-chrome-extension-live-reload


簡介：這是一個 Angular 的 schematics，可快速配置 Chrome Extension 的開發環境，讓你在開發時，可以自動 reload Chrome Extension。

4. auto-path-script-executor


簡介：此 vscode 擴充套件允許使用者透過右鍵點擊資料夾來選擇並執行 package.json 中定義的腳本。選定腳本後，擴充套件會自動將所在資料夾的相對路徑作為參數傳遞給腳本，便於在開發過程中快速且方便地執行與資料夾相關的腳本任務。

其它

撰寫技術文章的彙整清單(2015~now)：約80+篇，包含了內容概述與相關連結。

 → https://github.com/JiaHongL/Learn-List


 以下列了一些撰寫的文章 


 1. [有聲版] 前端刷 token ，這次就弄懂 ! 

→ https://jhlstudy.blogspot.com/2022/11/token_18.html 


2. [有聲版] Angular ControlValueAccessor 介紹與實作

→ https://jhlstudy.blogspot.com/2022/04/angular-controlvalueaccessor.html

3. [有聲版] Angular Strict Typed Forms 強型別表單 簡易示範

→ https://jhlstudy.blogspot.com/2022/07/angular-strict-typed-forms.html

4. 使用 Angular + Signals 做個 TodoMVC
→ https://jhlstudy.blogspot.com/2024/03/angular-signals-todomvc.html

Powered By
CakeResume