要不要來點 Side Project 啊？ԅ(´∀` ԅ)

到底要不要做 Side Project 是一個老生常談的問題。( •̀ ω •́ )✧

其實廣義來說，任何工作以外的事情都可以算是 Side Project，例如學習一門新技術、寫部落格、練習運動等等。

本文的 Side Project 定義為「與專業相關，但非上班時間做的任何專案」，並聚焦於 Web（Vue）與 JavaScript 領域。(｡･∀･)ﾉﾞ

其他領域我就不知道了，需要請教其他大大。(´,,•ω•,,)

💭 為甚麼要做 Side Project？

來說說我覺得 Side Project 的好處！(๑•̀ㅂ•́)و✧

不過這些好處因人而異，每個人標準不同，參考參考即可。

創造機會

先不說程式就像學外語一樣，多寫多思考，可以增進程式閱讀速度，也可以縮短將思緒轉換為程式碼的時間。

工作開發專案時，如果想要導入新技術或工具，通常需要考慮供應商綁定、開發流程、團隊接受度等等問題。

所以會保守看待，不會輕易導入，自己練習就不用擔心這些問題啦。

可以放飛自我，在練習的過程中累積經驗。ヾ(⌐■_■)ノ♪

做好準備

機會是留給準備好的人

這句話雖然很老梗，但依然正確。

當機會不講武德的出現時，除了自己沒自信接，別人也可能不敢交給你，Side Project 就是一個很不錯的練習機會。

也可以趁機練習「軟實力」部分：

1. 找資料：如何快速搜尋並有效率的篩選相關資訊

2. 分析問題：快速定位問題並提出解決方案

3. 歸納、統整文件：將解決方案或使用說明整理成文件，讓他人能夠快速理解

內容很少很簡單無所謂，重點是練習的過程。(๑•̀ㅂ•́)و✧

單純喜歡

以上是寫報告用的正經理由，看看就好，我自己的主要原因也是這個( ﾟ ∀。)。

沒有甚麼動機能夠比「有興趣」來得更有動力了。(´,,•ω•,,)

就像是小時候躲在被子裡偷完 PSP，或者是再怎麼累都能夠凌晨爬起來偷玩電腦一樣。

不用別人講自己會非常勤奮，但是別人要求的進度或項目總是會能拖就拖，不看到死線絕不開工。ᕕ( ﾟ ∀。)ᕗ

💡 靈感哪裡來？

不用擔心別人做過，重點是自己的練習與實踐，過程中一定會有各種收穫，甚至新靈感。

以下從門檻高至低介紹，希望大家能夠找到自己喜歡的部分。(｡･∀･)ﾉﾞ

解決日常問題

記錄下你或周圍朋友、家人常遇到的問題，思考可以怎麼應用技術解決這些問題。

不過使用的技術可能會相對複雜，例如伺服器、資料庫、雲端託管等等，需要更多的背景知識，不過這也是一個很好的學習機會。

反正做壞了也沒人會怪你，放手做做看吧。ლ（´∀`ლ）

有人酸你，那是他 G8，不是你的問題。ᕕ( ﾟ ∀。)ᕗ

TIP

前端可以練習使用 Firestore 儲存資料，就可以再沒有後端的情況下儲存資料，完成一個完整的應用程式喔。( •̀ ω •́ )✧

從模仿開始

模仿是一個很好的開始，可以從中學習到很多東西，但是門檻高低不一，需要斟酌斟酌。(◜௰◝)

做一個網頁版小畫家

這個有點難度，不過可以先從一個簡單的功能開始，例如圖片編輯、濾鏡等等。

最後目標挑戰一下打造一個網頁版 Photoshop。

可以玩到很多很有趣的圖學知識和一些網頁性能的技巧。

Photopea 就是一個很好的例子，來玩玩看吧！ˋ( ° ▽、° )

模仿某個 UI 套件

例如 Quasar、Vuetify 等等，也可以挖挖看原始碼學習，不過在沒有說明的情況下，很不容易看懂就是了。( ・ิω・ิ)

實作 utility libraries 某個的 API

例如 VueUse 這類套件，裡面很有趣且實用的 API，找一個自己覺得有趣的 API 實作看看。

實作的過程不只可以學到一些少見的瀏覽器 APIs 知識，還可以臨摹開源大神們的寫作習慣與 API 設計風格，進而增進自己的程式能力。

以下舉幾個很有趣的 API：

• useElementByPoint：取得滑鼠所在位置的元素
• useMagicKeys：註冊各類快捷鍵、組合鍵
• onLongPress：長按事件
• onClickOutside：點擊元素外部事件
• useRefHistory：記錄 ref 的歷史數值
• makeDestructurable：讓物件變為可以矩陣解構或物件解構
• useVModel：簡化元件定義 v-model 過程。（不過現在有 defineModel，這個 API 可以功臣身退了）

查看原始碼前先想想看這些 API 如何實現？又考慮了哪些邊界情境呢？( •̀ ω •́ )✧

TIP

我的酷酷的元件內就大量使用了 VueUse API
歡迎來玩玩看。(/≧▽≦)/

從興趣出發

這個動機最強，但是也是門檻不一，因為簡單可以很簡單，要複雜也能很複雜。

以下是一些我曾經看過的酷酷題目。(⌐■_■)y

寶可夢圖鑑

可以查閱各種寶可夢資訊的網站，進階一點可以挑戰模糊搜尋、圖片辨識等等功能。

網頁調音器

分享者本身的興趣是音樂，融合自身專長打造了一個網頁調音器，方便快速校正吉他。

超酷超強！(≖‿ゝ≖)✧

生成式藝術

英文為 Creative Code，利用程式碼產生各種有趣的圖形或者藝術品。

Creative Coding TW 有很多有趣的資訊與作品，大家可以參考參考。

梗圖編輯器

方便快速製作梗圖的網站，一言不合就梗圖。XD

例如：Meme 梗圖倉庫、Meme Generator 等等。

網頁自動化

這裡的例子為 Automa，他是一個瀏覽器外掛，使用節點拖拉的方式，可以很輕鬆、直覺的實現自動化網頁操作。

桌面自動化

網頁可以自動化，桌面當然也可以自動化，做個像是按鍵精靈的東西，可以幫你自動化一些重複性工作，刷個遊戲甚麼的。∠( ᐛ 」∠)_

目前找到較為成熟的套件為 Nut.js，歡迎大家多多補充！(´▽`ʃ♡ƪ)

🧰 練習技術或套件

最後就是門檻最低、相對容易開始的部分，我會依序介紹 JS 生態圈中的套件並附上連結。

大家一起來看看吧。( ´ ▽ ` )ﾉ

動畫

動畫是網頁設計不可或缺的一部分，以下是一些常見的動畫套件。

動畫控制

• GSAP、Anime.js

可以控制各種 DOM 或屬性動畫，例如 CSS、SVG 等等。

GSAP 功能最多也最強大，不過進階功能要收費，Anime.js 功能雖然沒那麼多，但是用到目前為止覺得很夠用。

精緻動畫

• Lottie、Rive

有獨立的動畫製作工具，方便設計、管理極為複雜的動畫，並在網頁提供尺寸更小（相較影片）、自定義程度更高且效果一致的動畫。

動畫工具

• Theatre.js

方便直接在網頁上調整、設計特殊元素動畫，例如 three.js 內的 3D 物件，定位上比較接近工程師。

多媒體

聲音

• Tone.js

可以製作各種音樂、音效，並融合於各種網頁互動。

繪圖

• p5.js、PixiJS

可以製作各種 HTML、CSS 難以實現的複雜繪圖。

p5.js 比較像是在畫布上作畫，Pixi 則是將將畫布視為一個場景，加入各類物體進行繪製。

很推薦大家看看這本電子書：《Nature of Code》

書中基於 p5.js 開發，介紹了很多有趣的知識與開發技巧，並用程式碼實現自然界的各種現象。

例如物理模擬、生物遺傳等等，超級有趣！◝(≧∀≦)◟

3D

• Three.js、Babylon.js

開發製作各種酷炫的 3D 互動、遊戲等等。

TIP

先前曾經用 Babylon.js 製作精靈球工作臺

遊戲

• Phaser、PlayCanvas、GDevelop

可以製作各種網頁遊戲，但是門檻可能會高一點。

不過因為好玩，所以通常更有動力。(´,,•ω•,,)

TIP

我先前出的書：《Arduino自造趣：結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機(iThome鐵人賽系列書)》，最後一章的貓狗大戰遊戲就是使用 Phaser 開發的呦。( •̀ ω •́ )✧

其他領域

JS 得利於瀏覽器與 V8 引擎的發揚光大，觸角也延伸至其他領域。

不過這個部分需要其他領域的相關知識，有興趣再加減嘗試看看囉。ヾ(◍'౪`◍)ﾉﾞ

DANGER

且記「JS 可以實現，不代表適合用 JS」，如果要深入實作或者打造產品，還請選用合適的語言。

例如：機器學習 Python 資源最多；嵌入式系統就看廠商 SDK 語言，通常都是 C/C++。

機器學習

• TensorFlow.js、Transformers.js、ml5.js

在瀏覽器上實現臉部、語音、骨架辨識等等有趣的功能。

嵌入式系統

• Johnny-Five、DeviceScript

用來控制或開發各種微控制器或單晶片，例如 Arduino、ESP8266、ESP32 等等。

不過 Johnny-Five 需要電腦（Node.js）與硬體持續通訊，DeviceScript 則直接撰寫 TypeScript，編譯後燒入硬體的韌體中。

IoT

• MQTT.js、matter.js、Aedes

可以製作 IoT 應用程式，例如智慧家居、智慧農業等等。

我曾經使用 Aedes 建立一個分散式系統，可以遙控並收集數百台 IoT 裝置資料，非常有趣。ヾ(◍'౪`◍)ﾉﾞ

外掛

• 瀏覽器外掛、VSCode 外掛

製作瀏覽器外掛、VSCode 外掛或各類開發工具的外掛，提升工作~或摸魚效率。ᕕ( ﾟ ∀。)ᕗ

桌面應用程式

• Electron

可以使用前端生態系，建立 UI 豐富的跨平台桌面應用程式。

缺點是記憶體消耗較高、程式體積也大。 (́◉◞౪◟◉‵)

TIP

知名的 VSCode、Slack、Notion 等等的桌面版程式，就是用 Electron 開發。

手機應用程式

• Capacitor、NativeScript

可以用網頁技術開發手機應用程式，因為有一層轉換框架，所以一定會受限於框架本身。

如果框架沒有提供對應功能，就必須自己實作原生模組，這部分就需要原生開發知識。

但是若只是一些簡單的資料展示，沒有性能需求的應用程式，可以考慮使用。

Capacitor 基於 WebView，其實就是 APP 內嵌網頁。優點是可以使用前端現有生態圈，缺點就是性能會比原生差得多。（我自己實測 Android 14 很順，iOS 17.4 會有點卡）

NativeScript 則是編譯為原生程式碼，性能會比 Capacitor 好，但是限制也比 Capacitor 來得多。

Headless CMS

• Directus、Strapi

可以快速建立 CMS、產生資料 API，而且內建一個管理後台。

讓使用者可以在沒有專職後端的情況下，建立一個資料單純的簡易系統。

如果前端想要跨足後端領域，個人認為這是一個很不錯的起頭。

可以從中學習到 API 設計、資料規劃、權限規劃等等後端常見的入門知識。

Directus 後台基於 Vue 開發，Strapi 後台則是基於 React 開發，兩者都有很高的客製化能力。

🛠 實用資源

分享給大家一些我常看的電子報或網站。(◍′ω`◍)

電子報

英文的話有 JavaScript Weekly、Frontend Focus、Node Weekly，可以收到各種 JS 或前端生態圈的最新消息與技術發展。

中文的話則是 ExplainThis、Star Rocket 科技創業週報、VK 科技閱讀時間，可以看到各類科技圈的大小事。

參考資料

有空我會逛逛 Codrops、Awwwards、Codepen Spark。

以上網站集結了全世界的優秀作品和技術探討，很適合作為靈感或臨摹的參考。

部屬平台

常用的部署資源則有 Cloudflare、Firebase、Zeabur。

TIP

Zeabur 是台灣的雲端服務商，來推一下自家人。(/≧▽≦)/

總結 🐟

• 建立靈感庫，以免忘記點子
• 不用擔心別人做過，重點是自己的練習與實踐，過程一定會有各種收穫，甚至新靈感
• 先求有再求好，否則永遠無法開始
• 別怕做不出來，慢慢研究，例如：派對動物就是我 2020 年想到的點子，直到 2023 才有能力做出來。(´,,•ω•,,)
• 有餘力的話可以把過程寫成文章，除了當學習筆記，也可以作為作品集

感謝您讀到這裡，如果您覺得有收穫，歡迎分享出去。(´▽`ʃ♡ƪ)

一起來做 Side Project 吧！✧⁑｡٩(ˊᗜˋ*)و✧⁕｡