用 Matter.js 製作網頁版西瓜遊戲，從準備水果素材、建立畫面與物理世界開始，逐步加入物體、碰撞與合成事件。文章附有程式碼、原始專案及試玩連結，適合想透過小遊戲理解 2D 物理引擎的開發者。
用 AI 學日文，最省錢的起點是通用聊天 AI 的語音模式：ChatGPT、Gemini、Claude 都能用日文對話，免費帳號就能開始練，適合口說、聽力、改作文和解釋文法。需要發音評分、固定課表、情境關卡時，再加一款日文專門 App（例如 Aoi 或 TalkMe）。下面先列出 2026 年 10 月仍可用的工具，再給閱讀、聽力、口說、寫作與 JLPT 各一套可直接複製的提示詞。
這篇以 Chat Completions API 的範例介紹 GPT Function calling，說明如何定義函式與參數、接收模型產生的結構化呼叫，再由應用程式執行對應工作，幫助開發者理解語言模型與外部功能之間的分工。
以文中的 Firebase Cloud Functions 範例，整理建立網頁後端 API 的主要步驟，包含專案準備、開發環境、函式撰寫與部署。適合想了解前端如何呼叫雲端函式的開發者，方案與計費則可透過文內官方連結確認。
隨著JavaScript在網頁開發中的使用越來越普及，TypeScript作為JavaScript的靜態超集，也開始受到越來越多的關注。TypeScript由Microsoft開發，是一種開源的程式語言，通常被稱為JavaScript的超集，它通過為JavaScript添加類型定義和其他功能來擴展JavaScript的功能。
Google Map Marker Clustering是Google Map API的延伸套件，讓Google Map的標記在數量多的情況下，自動收合，簡化顯示，避免畫面雜亂，增加使用者體驗。
身為一名對學習日文很有興趣的網頁前端工程師，總會想要了解一些相關技術的日文，於是就寫了這樣一篇文章來整理網頁的日文用語！
如果匯入到 Three.js 中的 3D 模型沒有包含動畫，又或者需要讓模型與使用者互動產生動畫效果的話，Three.js 中可以直接的操作模型的座標、位置、縮放等等，但是若要讓動畫效果更加生動流暢，則可以使用 tween.js 這個開源的動畫補間套件來達成！
讓我們來看看這如何運作，首先，在 Three.js 中建立一個簡易的環境與模型
我們在玩手機遊戲時，應該多少都有看過第一次遊玩時，一步一步教我們要點哪裡的那種導引功能吧！這次要來介紹的套件就是讓網頁能夠快速、簡易的加上這個功能的Shepherd.js套件！
延續設計系轉職前端工程師的經驗分享，這篇記錄在台中尋找第一份工作的面試過程，包含接案工作室、個人作品展示與職場選擇。從實際遇到的情境出發，整理初次求職時的觀察與想法，供跨領域學習者參考。