Profile 00 00@2x e294063b2878e4164ba1dd904aa6b8bae6a97e19937899e4b4af853acf30de5d

Luc Tsao


[email protected]
https://medium.com/@humanhighway / http://humanhighway.logdown.com

Taipei, Taiwan

Summary

Skills

Frontend

1. React / Redux / hooks / context API

2. Pixi.js / Canvas API

3. XState & XState/test

4. Electron

5. RxJS 

6. Adobe / Flash / Flex / AIR / Starling 

7. Box2D

Streaming

1. Adobe FMS / RTMP 

2. jsmpeg 

3. ffmpeg

Language

1. JavaScript ES5/ES6 

2. ActionScript

3. Java

CI/CD

1. Docker

2. Drone CI

3. Gitlab runner



工作經歷

Onelab, Frontend Tech Supervisor, Jul 2010 ~ 09

Multi-Table Virtual games (2019-2020)

  • 開發在一頁顯示不同遊戲類型的 multi widget game RWD SPA 架構, 混搭 react component 跟 pixi.js 視覺元件的高度整合應用，並設計能在這兩種 view 元件中共享同樣的 redux state/action/reducer 環境。
  • 使用 react-redux multi store 架構, 讓 lobby 與 game 各自保持自己獨立的 redux store 結構。
  • 設計分離式專案架構, 讓同事可以自行建立獨立專案各自開發 react widget & pixi component.
  • 協助同事轉型並訓練撰寫 react functional component & hooks.
  • 撰寫 custom hooks / react 共用元件 / middleware 給其他同事開發利用。

使用技術

  • react functional component, react hooks. react lazy & suspense, styled component / system (emotion).
  • redux v7.1+, react-redux with hooks, react context API, react-i18n with hooks. 
  • pixi.js v5 / rx.js / webpack / websocket.

--------------------------------------------------------------------------------------------------------------------------------------------------------

Streaming Player (2019-2020)

  • 開發整合不同家廠商的 streaming (hls, webrtc... )的 h5 客戶端視訊播放器。
  • 使用 react context API (after v16.3) 整合不同廠商的 player state。
  • 使用 webRTC peer connection API 和 canvas 2d api 結合實作出可以顯示 video/audio bitrate 跟 fps 的統計曲線面板，讓使用者能即時預覽 3 分鐘內的網路連線品質。(類似 youtube 的 stats for nerds 滑鼠右鍵的統計資料功能)。
使用技術
  • react, react hooks, React Context API / styled component(emotion)
  • WebRTC / WebRTC peer connection API 
  • canvas context 2D API 

 --------------------------------------------------------------------------------------------------------------------------------------------------------

CI / CD (2018-2020) 

  • 使用 docker image 包裝 nodejs / yarn / texture-packer 環境, 並寫 shell script 執行自動搬移編譯的檔案內容至指定硬碟路徑。 接著使用 drone CI 自動編譯部署前端專案，透過 gitlab -> drone (create docker container and build project)-> notify slack channel, 實現 RD 能在 git commit 時自動編譯程式測試, 用 npm 打版號 push 到 gitlab 時便能自動編譯 prod 版本部署至跳板。 
  • 後期統一改為 gitlab runner 實現. 

使用技術 

  • docker / docker compose / shell script 
  • Drone CI
  • gitlab runner 

 --------------------------------------------------------------------------------------------------------------------------------------------------------

 All slot game / table game / card game client architecture (2013-2020) 

  • 2013 年開始獨自研發 h5 canvas game + h5 UI layout (build by react) , 設計並實作 slot game 引擎(FSM 架構) , table game, card game fullscreen RWD 等前端架構，建立 js shared library 架構，並開發部署多樣不同平台的設計應用, 包含 mobile (landscape / portrait) / tablet / desktop / mini-desktop 共計 30+ web h5 games.  
  • 實作 mobile fullscreen RWD canvas application, 並針對不同 android / iOS browser 實現 fullscreen layout. 
  • 從 pixi.js v1 開始使用並持續更新至 v5, 保持穩定版本升級並優化架構。 
  • 從 angularJS -> react (v0.13 -> v16 ) / flux -> react / redux 持續優化架構流程。 
  • 利用 yeoman 建立專案腳手架, RD 無需自行手動安裝專案並能迅速開發。
  • 開發 game library / pixi.js mvc 架構 / 各種 pixi & react 元件供同事開發使用。 
  • 協助 flash RD 轉型，並開教育課程定期訓練。
  • 建立 coding style guide, 並定期幫同事 code review 做流程優化並保持各項專案一致性。

使用技術 

  • pixi.js ( v1 -> v5 ) 
  • angular 1 -> react / flux -> react-redux 
  • sass -> post-css 
  • webpack / gulp 
  • rx.js 
  • websocket

--------------------------------------------------------------------------------------------------------------------------------------------------------

  React native code push Demo (2020)  

  • 研究 react native code push 並實作 prototype 更換 app 內容。 

使用技術 

  •  react native ms code push 

--------------------------------------------------------------------------------------------------------------------------------------------------------

Easy game board site (2020)  

  • 開發簡易的 restful API 及排行榜相關頁面供 client RD 做測試使用。 
使用技術 
  • express / firebase / react SSR 
  • react / react-router

--------------------------------------------------------------------------------------------------------------------------------------------------------

mocha unit test（2018-2019):

  • 因應不同的情境流程，所以使用 mocha 將 client 時常使用的 util function 集合做 unit test 測試，以便收集各種測試會遇到的狀況。 

--------------------------------------------------------------------------------------------------------------------------------------------------------

Electron project folder deploy Tool (2019)

  • 因應不同版本的 js library 跟 game project 資料夾, 開發了一個 electron + react 整合應用, 使用者點選所需專案名稱並自動找出所需的各種 linbrary 版本, 選定後可以簡單 copy 相關資料夾到跳板，讓不熟專案路徑或程式的一般使用者也可以輕易搬動不同版本的 前端專案資料夾 及 library.
使用技術
  • electron 
  • react / react-checkbox-tree 
  • node.js / tree-node-cli
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Mobile Live Streaming Casino Baccarat (2017-2018)
  • 研究各家相關串流技術, 後來選定 jsmpeg 為實作技術, 利用 ffmpeg 抓取 camera 畫面並轉成串流輸出至 jsmpeg server, 再使用 canvas + jsmpeg.js 播放 streaming 畫面，prototype 完成後將後端部分交給後端架構師研究。
  • 前端使用 react.js 實作 lobby <-> game SPA 架構，並將 jsmpeg 輸出在 canvas 的畫面整進 pixi view.
  • 切出分離式專案結構, 讓 RD 能夠自行開發 pixi game, lobby 則使用 react 開發。
  • client lobby 會不斷更新全部遊戲桌資料, 並做預載式處理, 點選遊戲桌可無縫快速進桌遊玩 pixi game，並讓整個頁面保持高效能的運作。
使用技術
  • pixi.js v4
  • jsmpeg
  • react / redux / post css
  • websocket
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
iOS Programming <side project> (2012-2014)
  • Experienced iOS 4 - 7 programming. 
  • Experienced custom iOS UI component implemented.
使用技術
  • Objective-C
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
FMS Record App (2012-2013)
  • 針對需要對每場賽事做定期錄影, 撰寫 Adobe Flash Media Server 錄影程式及 Flash 操作介面配合 winform 做自動化錄影存證。
使用技術
  • Flash Media Server / Flash / Actionscript 3
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Adobe AIR IOS Game (2012)
  • 研究並開發上架一款數字心算 iOS game, 使用 adobe AIR 技術開發 
  • 使用原生 obj-c 開發 native extension 連結 apple game center 取得資料並寫入排行榜.
使用技術
  • Adobe AIR / Actionscript 3 / Starling / Robotlegs
  • Objective-C - Native Extensions for Adobe AIR
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
P2P card game client (2011-2012)
  • 開發多人 game client, 能讓不同使用者在 lobby 選擇遊戲桌並與線上玩家互動玩相關牌類遊戲(德州撲克, 13張 ...)及聊天功能。
  • 實作 lobby 排版功能, 另開遊戲視窗, 並從 lobby 呼叫子視窗遊戲做排版。
  • 實作遊戲錦標賽功能。
  • 帶領兩位同事一起開發並熟悉專案結構。
  • 客製化 flex component. 
  • 開發 flex theme 技術。
使用技術 
  • Flex 2,3 / Actionscript 3
  • PureMVC
  • Javascript
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Splashtop(DeviceVM), Senior Engineer, Jun 2007 ~ Jun 2010

Splashtop OS JS Widget 
  • 使用 js + css + ajax 開發相關服務 widget。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Splashtop Instant-On OS 應用程式開發
  • 使用 flash / flex 開發 Single Page Application. 
  • 開發類似 ITunes player 的介面播放器。
  • 開發類似 Apple Photos 照片播放器。
  • 開發 flex theme 換皮功能。

工作室接案, Jun 2005 ~ Jun 2007

主要使用 js + css + flash 開發各類型活動網頁。


Powered By
CakeResume