整理了寫過的一些專案、作品，紀錄使用的技術與心得
作品集
臺北捷運路線查詢 TRTC Route Map
核心功能：
- 查詢臺北捷運路線、站別出口資訊
- 查詢路線 geojson 搭配 leaflet 呈現在地圖上
- 支援社群帳號登入，未來可以擴展使用者面向的功能，站點儲存、查詢記錄等
使用技術 & Library：
- Vue3 (build with Vite)
- Element Plus (UI framework, element-ui for vue3)
- leaflet.js (maps library)
- Google login api (official sdk)
- Facebook login api (official sdk)
vue3 推出後試寫的作品，主要想熟悉一下 vue3 的語法與差異性。原本是從某次面試作業指定使用 leaflet 實作 polygon, geojson 相關的功能，後來改成介接捷運資料查詢。
實作與社群平台提供的 api 互動，從申請 token id、爬 developer docs 實作登入、取得使用者資訊的功能、專案後台的管理等等，熟悉整個流程。
另外做了一些嘗試，原本的 google login 是看官方文件提供的登入按鈕實作的，相對簡單，後來看到 vue3、react 都支援 hooks 的寫法，對應 vue2 就是 mixins 但是改善了原本可能有的缺點，所以就參考了 VueUse 改寫 google, facebook 的登入、登出相關功能打包成 hooks 的寫法。
臺北捷運路線查詢 TRTC Route Map
Github: https://github.com/memorysd2013/trtc-route-map
Demo Site: https://memorysd2013.github.io/trtc-route-map
Vue3 + TypeScript 切版
核心功能：
- 客制化 Element Plus 樣式
- bar chart, debounce resize
- RWD
使用技術 & Library：
- Vue3 (build with Vite)
- TypeScript
- Sass
- Element Plus (UI framework, element-ui for vue3)
- Apache ECharts (charts library)
- Day.js
也是面試作業之一。作業題目是一張 layout 圖片，指定使用 vite + element-plus + typescript 刻出一樣的畫面，盡量考慮 RWD 但沒有要求特殊功能。
使用 Apache ECharts 實作長條圖，大部分的組件是 Element Plus 修改 scss 變數或自訂 style 來符合設計稿外觀，RWD 沒有指定尺寸所以以不跑版為主，視窗寬度縮小至 768px 以下時會自訂收合側邊欄以提供更大的主畫面。
資料的部分使用 Promise 與 Math.random 模擬 api 資料操作，切換畫面的按鈕參數時會自動代換數值。因為開發的時間比較短，理想中是 api function 分離的更清楚，當有測試或實際可使用的 api 只需要指定 api 路徑就可以套用整個專案。
圖表組件一樣練習用 hooks 的寫法 (src/hook/useBar.ts) 管理圖表的生命週期，並暴露一個 resize 的 function 來達成圖表 RWD。resize 綁定在 window resize 的 event 上，並使用 debounce 來避免視窗尺寸變動時連續觸發太多次事件，預設防抖 500 毫秒後才會觸發 resize。
Vue3 + TypeScript 切版
Github: https://github.com/memorysd2013/ts-layout
Demo Site: https://memorysd2013.github.io/ts-layout
Side Project
eq-calendar-vue2
核心功能：
- 客製化日曆、週曆、月曆組件，支援 RWD
- 使用 Vue slot 可以在組件內放入自訂內容
使用技術 & Library：
- Vue2 (build with Vue CLI)
- Day.js
用於公司內部專案的班表系統，因為需要客製化功能與樣式，所以就不使用現有套件選擇直接重刻。發布至 npm 主要是管理讓公司內部多個專案使用。
eq-calendar-vue2
Github: https://github.com/memorysd2013/eq-calendar-vue2
Demo Site: https://memorysd2013.github.io/eq-calendar-vue2
npm: https://www.npmjs.com/package/eq-calendar-vue2
Others
Google Extension: Youtube Transmission
核心功能：
- 抓取網頁中 youtube 影片元素可以自訂加/減速、迴圈播放等。
使用技術：
- HTML, CSS, JavaScript
- Google Extension Docs
無意間看到 Google Extension 的教學文章，花了一些時間研究後完成的作品。想法發想是我自己常使用 youtube 的影片來練習吉他，因為要靠耳朵聽出和弦或是樂句，很常依賴 youtube 的設定/播放速度來放慢速度。youtube 提供的選項只有 0.75、0.5、0.25 (後來發現其實可以自訂)，於是我就想做出可以選擇更小單位的速度調節插件，時間區間重複播放的功能也蠻常用到的，就試著把迴圈功能加上。
插件本身可以視為一個獨立的頁面，透過 message 或是 contect 的方式與主網頁互動，這樣的溝通方式我覺得跟 worker 有一點像。因為可以直接跟主網頁互動，所以其實限制蠻多的，比如沒辦法輕易地把 function 拆分成很多 js 檔再引入，與主網頁的互動也需要在 manifest 設定權限，並在發布時描述申請這些權限的用意。
這次開發除了累積閱讀英文文件的經驗以外，另一個給我比較大的收穫是 UX 的部分，因為自己就是使用者，完全地以實際使用的情況、會遇到的問題、怎麼樣的體驗或是流程是自己需要的方向去開發跟思考。作品完成上架後，我也分享給朋友使用並得到一些回饋，讓我覺得蠻有成就感的，雖然不是很困難或很複雜的作品，但可以實際得到使用者回饋是一個蠻特別的體驗。
Demo:
Youtube Transmission
Github: https://github.com/memorysd2013/youtube-transmission
Google webstore: https://chrome.google.com/webstore/detail/youtube-transmission/jaaokfelcbloneeeaanalpkealibhfan?hl=zh-TW
Codepen: Memory Match Game with Vue3
試玩 Vue3 寫出來的小東西，自己蠻喜歡的。
Codepen: Bubble Sort Animation
前一陣子接觸入門演算法時看到很多網站用動畫去解釋排序法，覺得蠻有趣的，於是用氣泡排序法試著寫看看。只用 JavaScript 沒有用任何框架套件，動畫用 CSS transform 實現。
Codepen: Quicksort Practice with Vue3
剛接觸 Quicksort 的時候沒有很懂整個邏輯，於是也試著自己寫一遍。