•   https://www.linkedin.com/in/chih-hsuan-fan
  
•   https://github.com/pc035860
  
•  https://pymaster.tw
  

新鈴木太太(前台及後台), 2017 - 現在

• 使用技術：Webpack、React、GraphQL、Service Workers、Server-Side Rendering (SEO)、Express
• 三層肉在職時期
  
• 日本雜貨選物電商網站
• 新站於 2020 年 12 月上線，新功能持續開發中
• https://loveiizakka.com

益川資訊官方網站, 2019 - 現在

• 使用技術：Gatsby、React、D3.js
• 三層肉在職時期
  
• 公司官方網站，用 Gatsby 實現的靜態網頁並支持 i18n
• https://www.masukawa.com.tw/zh-tw/

I Hear You Twitch, 2017 - 現在

• 使用技術：ES6、WebExtension API、Gulp
• 個人專案
  
• 第一次寫跨 Chrome 跟 Firefox 的擴充功能，同一份 code 可以兩邊適用
• 希望自己開台的時候不要漏聊天室訊息
• 使用者數 1000 出頭 (2021/05)
• https://github.com/pc035860/i-hear-you-twitch

嗨... 英雄榜, 2017 - 現在

• 使用技術：ES6、AngularJS、Firebase Real-time Database、Firebase Cloud Functions、fuse-box、Gulp、PWA
• 個人專案
  
• 想要試試看 Firebase Cloud Functions 的小專案，特地用 Real-time Database 搭配 Cloud Functions 做出了一個可以在 Firebase 下面排隊查詢 Battle.net API 的功能
• 網站本身主要功能是方便魔獸世界玩家查詢角色資訊
• https://hi-armory.tw
  

ParrotTalks PDF隨手查, 2017

• 使用技術：ES6、AngularJS、PDF.js、Sass、Webpack、Gulp
• 時習數位在職時期
  
• 除了 Chrome extension 提供載入 PDF 的功能之外，為 Chrome 以外的使用者或是比較喜歡隨手查型式的使用者，提共網頁版的 PDF即點即查 解決方案
• https://www.parrottalks.com/pdf-reader
  

R葵的實況大平台, 2016

• 使用技術：Google App Engine、Firebase、TwitchAPI、ES6、React、Redux(+ recompose, reselect)、Sass、CSSModules、Webpack、Gulp
  
• 個人專案 (時習數位在職時期)
  
• 為實況主小葵製作的精華影片剪輯/投票平台，可以使用 Twitch 帳號登入，後端資料使用 Firebase，部分後端使用 Google App Engine
• 製作完成之後沒有好好推廣，基本上目前沒有人在使用
• 製作的緣由可以查看網站內的「關於」頁面
• 網站現在已經下線，程式碼留在 GitHub
  
• https://github.com/pc035860/twitch-hl-miao11255

TimeTags for YouTube, 2016 - 現在

• 使用技術：ES6、React、Redux、Sass、CSSModules、Webpack、Gulp
  
• 個人專案 (時習數位在職時期)
  
• 方便自己在 YouTube 長影片上加上時間戳記的 Chrome extension，介面很簡單不過為了跟 YouTube 頁面配合，寫起來下了不少功夫；核心的理念就是希望能夠邊看影片邊加戳記，並且最好可以不要使用到滑鼠
• 這是第一次嘗試使用 CSSModules
• 最近更新後可以同時支援舊版及新版 YouTube
  
• 使用者數接近 4000 (2021/05)
• https://github.com/pc035860/yt-timetag
  

菸酒生臉書封面產生器, 2016

• 使用技術：ES6、CreateJS、AngularJS、Sass、Webpack、Gulp
  
• 時習數位在職時期
  
• 純前端完成的封面產生器，<canvas> 內的構圖由 AngularJS 建立的 CreateJS directive 完成，同時利用 Web Font 來達成不同字體輸出的效果
• 為了讓上傳到 Facebook 之後的效果達到最好，下載的圖檔是製作中顯示圖的 3 倍放大版，由於構圖內沒有用到任何不是向量的東西，放大版不會出現任何糊掉的東西
• https://www.parrottalks.com/note/grad-gen
  

ParrotTalks Reader 好讀書籤, 2016

• 使用技術：ES6、Webpack、Gulp
  
• 時習數位在職時期
  
• Reader 完成後不久，配合推出的好讀書籤。特色就是點一下就能把整個網頁變成 Reader 網站內的好讀模式，並且效果比在 Reader 網站輸入網址還要好。
• https://reader.parrottalks.com/bookmark
  

ParrotTalks Reader, 2016 - 現在

• 使用技術：ES6、React、Redux(+ recompose, reselect)、Sass、Webpack、Gulp
• 時習數位在職時期
  
• 純 React 製作的英文文章閱讀器網站，搭配有即點即查(使用隨手查)以及儲存單字功能
• 手機版的製作有與設計師特別討論，除了基本的RWD之外，也提共較適合手機的操作方式
  另外也運用了 Webpack 的 chunk 功能讓主要 container component 的載入都是非同步的
• https://reader.parrottalks.com/
  

ParrotTalks 隨手查, 2016 - 現在

• 使用技術：jQuery、Velocity.js、Sass、Webpack、Gulp
• 時習數位在職時期
  
• 與關鍵評論網國際版合作的功能(我們開發，嵌入在他們的網站)，於往後的自家專案裡面也有使用到，將隨手查載入網站之後就可以使用它即點即查(或是選取查詢)的功能，也支援我們的 NLP 精準字義
• 因為手機版採用與桌機版不同的方式來呈現結果，運用了 Webpack 的 chunk 技術來讓它只載入需要的部分
• https://international.thenewslens.com
  點進任何文章後，點擊左側的「Translate to read fluently」即可啟動
  手機版可以在桌面板點擊啟動後，縮小視窗寬度來觀看

ParrotTalks 抄筆記 - 新增單字, 2015

• 使用技術：ES6、AngularJS、Redux、Sass、Webpack、Gulp
• 時習數位在職時期
  
• 此 web app 提共快速查詢單字、例句並儲存到你自己的筆記本裡的功能
  當時想要漸進的踏進 ES6 & Webpack，於是先從比較有經驗的 AngularJS 下手
• https://www.parrottalks.com/note/dict
  需登入並且有安裝 抄筆記 Chrome extension 才可順利使用

ParrotTalks 抄筆記(含 Chrome extension), 2015 - 現在

• 使用技術：JavaScript、AngularJS、jQuery、CSS3、CoffeeScript、Sass、Grunt
  
• 時習數位在職時期
  
• 除了運用 Chrome extension 本身很多神奇的功能來完成複雜的功能需求之外，一旦看到不錯的 extension 我也會想辦法參考它們的功能是如何實作出來的，並且吸收為自己可以應用上的東西
• 抄筆記直到現在還是依然有在進行開發及更新，就使用的 Chrome extension 來說是我個人的集大成之作
• http://note.parrottalks.com
  

ParrotTalks網站, 2013 - 現在

• 使用技術：JavaScript、AngularJS、jQuery、CreateJS、D3.js、CSS3、LESS、Grunt
  
• 時習數位在職時期
• 首次製作完全 Single-Page App 的網站
  
• 整個網站主要採用 AngularJS framework，再搭配其它各個 library 達到需要的功能與效果
• 將網站由原本的伺服器端 PHP 渲染，逐頁轉換成全 SPA
• https://www.parrottalks.com

Windows Store 神來也麻將、神來也大老二 (Windows 8), 2012

• 使用技術：JavaScript、jQuery、HTML5 Canvas、HTML5 WebSocket、CSS3、CreateJS、WinJS(Windows 8)
  
• 慧邦科技在職時期
  
• 神來也麻將應該是當時臺灣唯一一個在 Windows 8 上使用 JavaScript + HTML5 Canvas 製作的多人連線麻將遊戲，遊戲大廳主要採用 HTML 構成、而遊戲內則是主要由 HTML5 Canvas 構成，此專案 90% 以上的程式由我獨立完成
  
• 若您有 Windows 8 系統，可以下載來玩玩看
  Windows市集中的神來也麻將：http://goo.gl/VyLe1  (更新: 網址已下架)
  
• 麻將上線之後又緊接著做了 神來也大老2 的 Windows Store 版，有了製作麻將的經驗，大老2 的製作相對較快速且成熟，是我的得意之作，不過現在似乎已經沒有再 Windows Store 裡面了

神來也行動版網站製作, 2011 - 2012

• 使用技術：PHP、MySQL、HTML、CSS3、JavaScript、jQuery、支援視網膜螢幕
  
• 慧邦科技在職時期
  
• 除了套用流暢的動畫效果與操作瀏覽之外，該網站在我主動提出建議並在與設計人員合作下支援了 retina-display ，更將使用時的體驗往上提升了一個層次，同時支援 retina-display 亦成為慧邦科技後來製作行動網頁的標準
• 現在 Gamesofa 的行動版網頁已經改版過，不是我做的版本了

Facebook API 串接, 2010 - 2012

• 使用技術：PHP、JavaScript、jQuery
  
• 慧邦科技在職時期
  
• 針對 Facebook 推出新版的 Dialog API ，我製作了能夠快速生產出各類型 Dialog URL 的 JavaScript library 與 PHP function (僅根據需求支援了 Feed、Login、Requests 三種 Dialog)
  
• Facebook Dialogs Overview: http://goo.gl/fIcmD
  我寫的 JavaScript library: http://g.mwsrv.com/js/FBDialog.js

神來也網站改造、活動網頁程式撰寫, 2011 - 2012

• 使用技術： PHP、MySQL、HTML、CSS、jQuery
  
• 慧邦科技在職時期
  
• 協助舉辦各項遊戲營運相關活動以及網站改造，與企劃、網頁設計及 Flash 工程師配合進行網頁程式與 Flash 小遊戲的製作。在我接手的時候正好是時程常常排得非常緊迫之際，但往往還是能夠化險為夷，同時練就了一身蠟燭兩頭燒時的寫程式能力
  於此時期對前端產生莫大的興趣，每每總是希望能夠在各個活動網頁上搭上不一樣的新鮮效果 
• 神來也私訊系統：http://goo.gl/7gjB9 (須登入)
  原本神來也的私訊系統是比較類似 BBS 回覆文章那種顯示模式，將它改造成比較類似 Gmail 那樣的同訊息分組模式，接近是一個 SPA(原本觀看訊息需要載入新頁面)

魔獸世界英雄榜對應API, 2010

• 使用技術： Python、Google App Engine
  
• 個人專案 (慧邦科技在職時期)
  
• 由於當時 Blizzard 並沒有開放 Armory 的 API ，故希望能夠做出以類似英雄榜網址的方式取得資訊的自製版 Armory API，輸出格式為 JSON，也支援 JSONP
  
• Google App Engine 以及 魔獸世界英雄榜 改版後，沒有就沒有繼續維護

魔獸世界成就速查, 2010

• 使用技術： Python、Google App Engine、jQuery、HTML、CSS
  
• 個人專案 (慧邦科技在職時期)
  
• 在 Google App Engine 上開發的魔獸世界英雄榜成就查詢器，提供快速查詢魔獸世界玩家是否有特定組合的成就
• Google App Engine 以及 魔獸世界英雄榜 改版後，沒有就沒有繼續維護

中英文打字比賽(with GUI), 2005

• 使用技術： PHP、Python(server)、wxPython(client)、HTML、CSS 
  
• 於通訊工程學系就讀時期
  
• client、server 由 Python 撰寫，PHP 負責於網頁顯示排行榜
  

jquery-css-mahoro

在經歷多次需要使用 CSS 動畫搭配元件的顯示/隱藏，覺得每次寫起來有點麻煩之後，整理出來的 jQuery plugin。

還順便搭配了一些之前沒有使用過的 build 工具之類的，做了新的嘗試，詳細內容可以參考我的這篇 blog 文章: https://goo.gl/6wDjkg

angular-easyfb

為了更方便的讓 AngularJS 搭配 Facebook SDK 使用而做的 module (主要是處理 FB 的 asynchronous initialization 問題)，後來還加入了動態 render Facebook social plugins 的功能，可以說是比直接使用 SDK 方便很多。

此 repo 是我 github 上星星最多的 repo，並且有被使用者 PR 進官方文件(https://goo.gl/jCiEgX)裡面。

angular-highlightjs

原本是想要做另一個類似 Plunker 的專門高亮程式碼專案而把 AngularJS 串上 Highlight.js，結果意外的還算受歡迎。

angular-scroll-watch

在製作 ParrotTalks 網站期間想要使用一些搭配 scroll position 的特效，發現沒有現成合適的 module 所以自己寫了一套。

透過比較底層的方式來對 scroll position 跟 AngularJS 的 $digest 做最佳化，達到效能非常好的 scroll 效果。

ngSelect

AngularJS module 的初試啼聲作品，可以讓你靶子區塊中的任何東西都變成一個「選項」。

ngQueue

與一般的 queue module 的不同點在於結合了 AngularJS 的 $q，支援 async task，並且在 dequeue 的時候可以自動 $apply。

ngDefer

實驗性的 module，不過還是有解決到我的問題。透過跟 ngQueue 的配合，在碰到 AngularJS 不擅長的 render 大量 DOM 的時候，把 render 的行為打散成 asynchornous 的，來避開 UI freeze 的感覺。

缺點是整體完成 render 的時間會稍微往後延一點。