Sign in Subscribe

專注於 AI 工作流、AI Coding 與 SaaS 產品開發的實戰筆記。

技術共學｜來開發一個即時的多人聊天網頁與繪圖白板吧！

技術共學｜來開發一個即時的多人聊天網頁與繪圖白板吧！

📅 發布時間: 2024-07-29 🏷️ 標籤: SocketIO, Vite, JavaScript, Canvas, ExpressJS, 即時通訊 不知道你有沒有開發多人線上遊戲的夢呢？然後即時同步的問題卻卡住了你。如何將所有人的資料同步給所有人的電腦上，又該如何實現呢？如果你有上述問題，這堂課正是為你而準備！我們將帶你深入淺出有關 SocketIO 的基礎知識，從 0 到 100 搭出一個簡單的即時多人聊天網頁，為你的 sideproject 添上一筆。 簡介 不知道你有沒有開發多人線上遊戲的夢呢？然後即時同步的問題卻卡住了你 如何將所有人的資料同步給所有人的電腦上，在該如何實現呢？ 又或你已經略知一二，卻不知如何下手。 如果你有上述問題，那這堂課正是為你而準備！ 我們將帶你深入淺出有關於 SocketIO 的基礎知識 從 0 到 100 搭出一個簡單的即時多人聊天網頁，為你的 sideproject 添上一筆。 課程影片 本課程以剪輯成全字幕教學 課程程式碼 https:
4 min read
VRoid 的模型添增動畫並導入 ThreeJs 網頁

VRoid 的模型添增動畫並導入 ThreeJs 網頁

📅 發布時間: 2024-07-29 🏷️ 標籤: VRoid Studio, Mixamo, Blender, Three.js, GLTF, VRM, 3D 動畫 這篇教學介紹如何將 VRoid Studio 製作的 VRM 模型，透過 Blender 轉檔並使用 Mixamo 添加動畫，最終導入 Three.js 網頁中使用，讓你的自訂 Avatar 動起來！ 文章大綱 這是一篇技術教學文章，你可以理解如何使用如何替 VRoid Studio 做出來的人物模型透過 mixamo 加上動畫，並且導入進 threejs 的網頁中。 背景故事 因為朋友最近在玩 VRoid Studio，順手丟給了我 VRoid Studio 的人物模型檔案
7 min read
第五部分：後端 Node.js 與 Socket.IO

第五部分：後端 Node.js 與 Socket.IO

📅 發布時間: 2024-06-23 🏷️ 標籤: Node.js, Express, MongoDB, Socket.IO, RESTful API 介紹 Node.js 後端開發基礎，包括環境設置、模組系統、Express 框架建構 RESTful API、MongoDB 資料庫整合，以及 Socket.IO 實現即時通訊。 Node.js 基本介紹 什麼是 Node.js？ JavaScript 一直以來都只能在瀏覽器上運行 在過去他並不像 C、C++、Python 能獨立在你電腦上運行 這導致他無法讀取、修改你電腦上的檔案 進行更複雜的操作 而 Node.js 就是為了打破這個窘境，他允許你在你的電腦直接執行 JavaScript 這使得
17 min read
第四部分：進階 JavaScript 與網頁視覺動畫教學大綱

第四部分：進階 JavaScript 與網頁視覺動畫教學大綱

📅 發布時間: 2024-06-24 🏷️ 標籤: JavaScript, DOM 操作, 事件監聽, Canvas 動畫 在這個章節中，我們將介紹如何讓 JS 操作網頁的資料，比如說取得使用者讀取的資料、送出文件、修改文字之類的。 💻 網頁 DOM 操作 🎯 學習目標:理解 DOM 樹狀結構，並用 getElementById 取得元素修改元素樣式（如顏色）和內容（如 innerText）處理使用者事件（如按鈕點擊 addEventListener）讀取和清空輸入框值（value） 步驟 1: DOM 結構與樹狀結構 <!DOCTYPE html> <html> <head> <
8 min read
第三部分 邏輯操作者 JavaScript

第三部分 邏輯操作者 JavaScript

📅 發布時間: 2024-06-23 🏷️ 標籤: JavaScript, 變數, 資料型別, 運算符, 條件語句, 邏輯運算, 迴圈, 函數 JavaScript 是一種程式語言，主要用於網頁開發，讓網頁變得互動和動態。本文介紹變數、資料型別、運算符、條件判斷、邏輯運算、迴圈與函數等基礎邏輯操作。 JavaScript 基本介紹 什麼是 JavaScript？ JavaScript 是一種程式語言，主要用於網頁開發 它可以讓網頁動態更新內容，處理使用者輸入並執行複雜的邏輯操作。 在網頁中，JavaScript 與 HTML、CSS 一起工作，使網頁變得更加互動和動態。 JavaScript 的特點包括： * 跨平台：JavaScript 可以在多種操作系統和瀏覽器上執行。 * 動態類型：變數在執行時可以改變類型。 * 事件驅動：JavaScript 可以處理各種使用者事件，如點擊、移動滑鼠、鍵盤輸入等。
16 min read
第二部分：視覺前端設計師 CSS

第二部分：視覺前端設計師 CSS

📅 發布時間: 2024-06-12 🏷️ 標籤: CSS, HTML, 前端設計 歡迎再次回到我們的網頁開發課程，今天我們將進一步學習網頁設計中的另一個重要部分 - CSS。CSS，即層疊樣式表 (Cascading Style Sheets)，是用來控制網頁的外觀和排版的語言。透過 CSS，我們可以讓網頁變得更加美觀和易於使用。 今天的目標 * 什麼是 CSS？ * 如何在 HTML 中使用 CSS？ * CSS 基本語法 * 常見的 CSS 屬性與範例 基礎介紹 💻 什麼是 CSS？ 🎯 學習目標:了解 CSS 控制 HTML 呈現方式的作用透過內聯 style 修改文字顏色使用 RGB 值精確指定顏色 步驟 1: 什麼是 CSS？ <h1&
15 min read
第一部分：傳統前端大解密 HTML

第一部分：傳統前端大解密 HTML

📅 發布時間: 2024-06-10 🏷️ 標籤: HTML、前端開發、網頁基礎、VSCode 從零開始，一步一步解密網頁開發的三大基石：HTML、CSS、JavaScript。無論是初學者還是有基礎的開發者，都能從中受益。這是本系列的第一篇，專注 HTML。 今天的目標 * 網頁概念 * 什麼是網頁？前端後端？語言與技術？ * HTML * 喝杯咖啡，這東西真的很容易，就是寫寫文字！ 💻 網頁基礎概念 🎯 學習目標:理解網頁的產生過程：從網域到 IP、請求與回應認識網頁資料來源：按 F12 查看 HTML、CSS、JavaScript 步驟 1: 網頁基本概念 圖：瀏覽器如何產生漂亮畫面 我們先從最基本的概念開始。先來理解一下什麼是網頁，為啥我打開瀏覽器，就可以跑出那麼漂亮的畫面。 步驟 2: 網頁定義
17 min read