Tags

I don’t know where I am going, but I am on my way......
node.js

Integrating GPT-3.5-Turbo with DC for Custom Bot Development --

Create a custom Discord bot with OpenAI's GPT API

discord.js

Integrating GPT-3.5-Turbo with DC for Custom Bot Development --

Create a custom Discord bot with OpenAI's GPT API

JavaScript

Integrating GPT-3.5-Turbo with DC for Custom Bot Development --

Create a custom Discord bot with OpenAI's GPT API

Synchronized Scrolling Indicator --

同步捲動指示器

Ext JS 筆記：異步函數(async/await) 解決偶發性錯誤 --

網速影響發生錯誤的機率

JS IIFE 筆記 - 立即調用函式 --

JS Modularity 過程筆記 - 汰換大型專案所有 alert 成可重複使用的訊息區塊元件 --

JS 物件導向 - Customize Dialog UI component replaced JQuery Dialog --

GPT

Integrating GPT-3.5-Turbo with DC for Custom Bot Development --

Create a custom Discord bot with OpenAI's GPT API

Tailwind CSS

Synchronized Scrolling Indicator --

同步捲動指示器

在沒有 Webpack 的非現代化專案 localize TailwindCSS CDN --

紀錄 plain php 專案 Localize Tailwind CSS CDN 的步驟

JS Modularity 過程筆記 - 汰換大型專案所有 alert 成可重複使用的訊息區塊元件 --

JS 物件導向 - Customize Dialog UI component replaced JQuery Dialog --

2025 OEM 網站開發筆記 [10] - martor 編輯器圖片上傳至 localstrage 並自動以文章 slug 命名創建資料夾 --

不用再使用 imgur 上傳圖片、不用租用線上圖片儲存空間、直接上傳至本地 Server 專案資料夾中

2025 OEM 網站開發筆記 [11] - 開發後台 Markdown 編輯器並於前端成功渲染 --

2025 OEM 網站開發筆記 [2] - 用 Dummy Data 熟悉 React + TypeScript 前端開發 Workflow --

熟悉 React + Vite + TypeScript + Tailwind CSS + TanStack Query + Django + MySQL 整套工作流程

2025 OEM 網站開發筆記 [3] - Swiper JS + shadcn/ui + Tailwind CSS 開發可滑動產品卡片展示櫃 --

順便複習 useRef vs useState 的差異

2025 OEM 網站開發筆記 [4] - 套用 GSAP 動畫至首頁元件 --

2025 OEM 網站開發筆記 [1] - 📌 Tech Stack --

記錄專案使用到的技術

2025 OEM 網站開發筆記 [5] - 用 GSAP 取代 Framer Motion 開發 shadcn/ui's Accordion 展開/收合動畫 --

2025 OEM 網站開發筆記 [SEO] - 用 Prerender.io 解決 CSR 網站無法擷取 meta property="og:* 的問題 --

CSR 網站常見 SEO 問題，在 Facebook、LINE、LinkedIn 分享時，沒有標題、描述、縮圖...等

Ext JS

Ext JS 筆記：異步函數(async/await) 解決偶發性錯誤 --

網速影響發生錯誤的機率

CSS

在沒有 Webpack 的非現代化專案 localize TailwindCSS CDN --

紀錄 plain php 專案 Localize Tailwind CSS CDN 的步驟

Django

Django + React 電商專案練習 [1] - react-redux 觀念筆記 --

管理state的好工具

Django + React 電商專案練習 [11] - 後台實作 - 訂單運送狀態更新 --

Django + React 電商專案練習 [10] - 後台實作 - 訂單管理(CRUD) --

Django + React 電商專案練習 [12] - 搜尋產品功能 --

Django + React 電商專案練習 [13] - 產品評論功能(含星數計算) --

Django + React 電商專案練習 [14] - 分頁功能 --

Django + React 電商專案練習 [15] - 產品輪播圖 --

輪播顯示高評價的產品

Django + React 電商專案練習 [16] - 整合前端(React)與後端(Django) --

不再需要特地去前端執行 npm run start

Django + React 電商專案練習 [17] - Hash Route --

Django + React 電商專案練習 [18] - 用 Nginx 部署至私人主機（非 PaaS）流程 --

讓 Nginx 透過 uWSGI 代理 Django，不用再受第三方平台的任何流量及檔案限制

Django + React 電商專案練習 [19] - 用戶頭貼更換/上傳功能 --

Django + React 電商專案練習 [2] - Postman 後端 API 測試 --

Django + React 電商專案練習 [3] - React 整合 PayPal 付款元件 --

Django + React 電商專案練習 [4] - 用戶歷史訂單頁面 --

Django + React 電商專案練習 [6] - 後台實作 - 用戶管理(CRUD) --

Django + React 電商專案練習 [7] - 後台實作 - 後台管理員頁面權限與路由規劃 --

非管理員使用者重新導向至登入頁面，不必在每個頁面都額外撰寫檢查權限的作法

Django + React 電商專案練習 [5] - 用戶更新個資功能 --

User Update Profile

Django + React 電商專案練習 [8] - 後台實作 - 產品管理(CRUD) --

Django + React 電商專案練習 [9] - 後台實作 - 上傳&更新產品圖片功能 --

Django ORM - Reverse Relationship Query --

Django 反向查詢

2025 OEM 網站開發筆記 [25] - Django CORS Header 設定 --

2025 django 串接 LINE Messaging API --

2025 OEM 網站開發筆記 [30] - Django 郵件伺服器設 & 前端帶入寄件人資訊自動寄信 --

2025 OEM 網站開發筆記 [10] - martor 編輯器圖片上傳至 localstrage 並自動以文章 slug 命名創建資料夾 --

不用再使用 imgur 上傳圖片、不用租用線上圖片儲存空間、直接上傳至本地 Server 專案資料夾中

2025 OEM 網站開發筆記 [11] - 開發後台 Markdown 編輯器並於前端成功渲染 --

2025 OEM 網站開發筆記 [2] - 用 Dummy Data 熟悉 React + TypeScript 前端開發 Workflow --

熟悉 React + Vite + TypeScript + Tailwind CSS + TanStack Query + Django + MySQL 整套工作流程

2025 OEM 網站開發筆記 [1] - 📌 Tech Stack --

記錄專案使用到的技術

2025 OEM 網站開發筆記 [10] - Django 後端從單一到多 Apps 架構優化流程 --

2025 OEM 網站開發筆記 [20] - Django 連線 MySQL、資料遷移流程 --

apps 註冊、資料庫遷移、MySQL 資料表命名

2025 OEM 網站開發筆記 [21] - 後端產品列表 API 開發 --

從 dummydata 切換到真實資料庫，ER Model 設計、ORM 模型設計，建立 Product、ProductImage、Specification、Tag、ProductTag 關聯資料表、資料庫遷移、CORS Header 設定、產品列表 API 設計

2025 OEM 網站開發筆記 [22] - 後端文章管理系統 & 列表 --

ER Model 設計、ORM 模型設計，建立關聯資料表、資料庫遷移、文章列表 API 設計

2025 OEM 網站開發筆記 [23] - 前端點擊分類，篩選並只顯示出該分類的文章列表功能 --

2025 OEM 網站開發筆記 [60] - Django 開發伺服器轉 uWSGI 正式上線環境流程 --

用 uWSGI 取代 python manage.py runserver

React

Django + React 電商專案練習 [1] - react-redux 觀念筆記 --

管理state的好工具

Django + React 電商專案練習 [11] - 後台實作 - 訂單運送狀態更新 --

Django + React 電商專案練習 [10] - 後台實作 - 訂單管理(CRUD) --

Django + React 電商專案練習 [12] - 搜尋產品功能 --

Django + React 電商專案練習 [13] - 產品評論功能(含星數計算) --

Django + React 電商專案練習 [14] - 分頁功能 --

Django + React 電商專案練習 [15] - 產品輪播圖 --

輪播顯示高評價的產品

Django + React 電商專案練習 [16] - 整合前端(React)與後端(Django) --

不再需要特地去前端執行 npm run start

Django + React 電商專案練習 [17] - Hash Route --

Django + React 電商專案練習 [19] - 用戶頭貼更換/上傳功能 --

Django + React 電商專案練習 [2] - Postman 後端 API 測試 --

Django + React 電商專案練習 [3] - React 整合 PayPal 付款元件 --

Django + React 電商專案練習 [4] - 用戶歷史訂單頁面 --

Django + React 電商專案練習 [6] - 後台實作 - 用戶管理(CRUD) --

Django + React 電商專案練習 [7] - 後台實作 - 後台管理員頁面權限與路由規劃 --

非管理員使用者重新導向至登入頁面，不必在每個頁面都額外撰寫檢查權限的作法

Django + React 電商專案練習 [5] - 用戶更新個資功能 --

User Update Profile

Django + React 電商專案練習 [8] - 後台實作 - 產品管理(CRUD) --

Django + React 電商專案練習 [9] - 後台實作 - 上傳&更新產品圖片功能 --

2025 OEM 網站開發筆記 [番外] - GSAP target [元素類別名稱] not found 問題解決 --

2025 OEM 網站開發筆記 [30] - Django 郵件伺服器設 & 前端帶入寄件人資訊自動寄信 --

2025 OEM 網站開發筆記 [10] - martor 編輯器圖片上傳至 localstrage 並自動以文章 slug 命名創建資料夾 --

不用再使用 imgur 上傳圖片、不用租用線上圖片儲存空間、直接上傳至本地 Server 專案資料夾中

2025 OEM 網站開發筆記 [11] - 開發後台 Markdown 編輯器並於前端成功渲染 --

2025 OEM 網站開發筆記 [2] - 用 Dummy Data 熟悉 React + TypeScript 前端開發 Workflow --

熟悉 React + Vite + TypeScript + Tailwind CSS + TanStack Query + Django + MySQL 整套工作流程

2025 OEM 網站開發筆記 [3] - Swiper JS + shadcn/ui + Tailwind CSS 開發可滑動產品卡片展示櫃 --

順便複習 useRef vs useState 的差異

2025 OEM 網站開發筆記 [4] - 套用 GSAP 動畫至首頁元件 --

2025 OEM 網站開發筆記 [1] - 📌 Tech Stack --

記錄專案使用到的技術

2025 OEM 網站開發筆記 [5] - 用 GSAP 取代 Framer Motion 開發 shadcn/ui's Accordion 展開/收合動畫 --

2025 OEM 網站開發筆記 [23] - 前端點擊分類，篩選並只顯示出該分類的文章列表功能 --

2025 OEM 網站開發筆記 [15] - 導入多語系 react-i18n 升級成國際化網站 --

React useCallback 如何解決 useEffect 無限循環問題 --

2025 OEM 網站開發筆記 [番外篇] - 取代 Hash Route、最佳化 SEO 的 404 找不到路由替代方案 --

2025 OEM 網站開發筆記 [SEO] - 用 Prerender.io 解決 CSR 網站無法擷取 meta property="og:* 的問題 --

CSR 網站常見 SEO 問題，在 Facebook、LINE、LinkedIn 分享時，沒有標題、描述、縮圖...等

Typescript Path Alias 設定及錯誤解決 --

Redux

Django + React 電商專案練習 [1] - react-redux 觀念筆記 --

管理state的好工具

Django + React 電商專案練習 [11] - 後台實作 - 訂單運送狀態更新 --

Django + React 電商專案練習 [10] - 後台實作 - 訂單管理(CRUD) --

Django + React 電商專案練習 [12] - 搜尋產品功能 --

Django + React 電商專案練習 [13] - 產品評論功能(含星數計算) --

Django + React 電商專案練習 [14] - 分頁功能 --

Django + React 電商專案練習 [15] - 產品輪播圖 --

輪播顯示高評價的產品

Django + React 電商專案練習 [16] - 整合前端(React)與後端(Django) --

不再需要特地去前端執行 npm run start

Django + React 電商專案練習 [17] - Hash Route --

Django + React 電商專案練習 [19] - 用戶頭貼更換/上傳功能 --

Django + React 電商專案練習 [2] - Postman 後端 API 測試 --

Django + React 電商專案練習 [3] - React 整合 PayPal 付款元件 --

Django + React 電商專案練習 [4] - 用戶歷史訂單頁面 --

Django + React 電商專案練習 [6] - 後台實作 - 用戶管理(CRUD) --

Django + React 電商專案練習 [7] - 後台實作 - 後台管理員頁面權限與路由規劃 --

非管理員使用者重新導向至登入頁面，不必在每個頁面都額外撰寫檢查權限的作法

Django + React 電商專案練習 [5] - 用戶更新個資功能 --

User Update Profile

Django + React 電商專案練習 [8] - 後台實作 - 產品管理(CRUD) --

Django + React 電商專案練習 [9] - 後台實作 - 上傳&更新產品圖片功能 --

Linux

Django + React 電商專案練習 [1] - react-redux 觀念筆記 --

管理state的好工具

Django + React 電商專案練習 [11] - 後台實作 - 訂單運送狀態更新 --

Django + React 電商專案練習 [10] - 後台實作 - 訂單管理(CRUD) --

Django + React 電商專案練習 [12] - 搜尋產品功能 --

Django + React 電商專案練習 [13] - 產品評論功能(含星數計算) --

Django + React 電商專案練習 [14] - 分頁功能 --

Django + React 電商專案練習 [15] - 產品輪播圖 --

輪播顯示高評價的產品

Django + React 電商專案練習 [16] - 整合前端(React)與後端(Django) --

不再需要特地去前端執行 npm run start

Django + React 電商專案練習 [17] - Hash Route --

Django + React 電商專案練習 [18] - 用 Nginx 部署至私人主機（非 PaaS）流程 --

讓 Nginx 透過 uWSGI 代理 Django，不用再受第三方平台的任何流量及檔案限制

Django + React 電商專案練習 [19] - 用戶頭貼更換/上傳功能 --

Django + React 電商專案練習 [2] - Postman 後端 API 測試 --

Django + React 電商專案練習 [3] - React 整合 PayPal 付款元件 --

Django + React 電商專案練習 [4] - 用戶歷史訂單頁面 --

Django + React 電商專案練習 [6] - 後台實作 - 用戶管理(CRUD) --

Django + React 電商專案練習 [7] - 後台實作 - 後台管理員頁面權限與路由規劃 --

非管理員使用者重新導向至登入頁面，不必在每個頁面都額外撰寫檢查權限的作法

Django + React 電商專案練習 [8] - 後台實作 - 產品管理(CRUD) --

Django + React 電商專案練習 [9] - 後台實作 - 上傳&更新產品圖片功能 --

Hexo 透過 Nginx 部署私人主機 & 設置 CI/CD 流程 --

除了 GitHub Pages 其實還有第二種選擇

2025 OEM 網站開發筆記 [60] - Django 開發伺服器轉 uWSGI 正式上線環境流程 --

用 uWSGI 取代 python manage.py runserver

Nginx

Django + React 電商專案練習 [18] - 用 Nginx 部署至私人主機（非 PaaS）流程 --

讓 Nginx 透過 uWSGI 代理 Django，不用再受第三方平台的任何流量及檔案限制

Hexo 透過 Nginx 部署私人主機 & 設置 CI/CD 流程 --

除了 GitHub Pages 其實還有第二種選擇

2025 OEM 網站開發筆記 [番外篇] - 取代 Hash Route、最佳化 SEO 的 404 找不到路由替代方案 --

2025 OEM 網站開發筆記 [60] - Django 開發伺服器轉 uWSGI 正式上線環境流程 --

用 uWSGI 取代 python manage.py runserver

2025 OEM 網站開發筆記 [SEO] - 用 Prerender.io 解決 CSR 網站無法擷取 meta property="og:* 的問題 --

CSR 網站常見 SEO 問題，在 Facebook、LINE、LinkedIn 分享時，沒有標題、描述、縮圖...等

uWSGI

Django + React 電商專案練習 [18] - 用 Nginx 部署至私人主機（非 PaaS）流程 --

讓 Nginx 透過 uWSGI 代理 Django，不用再受第三方平台的任何流量及檔案限制

2025 OEM 網站開發筆記 [60] - Django 開發伺服器轉 uWSGI 正式上線環境流程 --

用 uWSGI 取代 python manage.py runserver

Python

Django ORM - Reverse Relationship Query --

Django 反向查詢

私人多語言 AI 翻譯器 - Whisper API --

Real-time translation and transcription of multilingual speech sounds into different audio outputs - Whisper API

2025 OEM 網站開發筆記 [10] - Django 後端從單一到多 Apps 架構優化流程 --

2025 OEM 網站開發筆記 [20] - Django 連線 MySQL、資料遷移流程 --

apps 註冊、資料庫遷移、MySQL 資料表命名

2025 OEM 網站開發筆記 [21] - 後端產品列表 API 開發 --

從 dummydata 切換到真實資料庫，ER Model 設計、ORM 模型設計，建立 Product、ProductImage、Specification、Tag、ProductTag 關聯資料表、資料庫遷移、CORS Header 設定、產品列表 API 設計

2025 OEM 網站開發筆記 [22] - 後端文章管理系統 & 列表 --

ER Model 設計、ORM 模型設計，建立關聯資料表、資料庫遷移、文章列表 API 設計

2025 OEM 網站開發筆記 [23] - 前端點擊分類，篩選並只顯示出該分類的文章列表功能 --

CI/CD

Hexo 透過 Nginx 部署私人主機 & 設置 CI/CD 流程 --

除了 GitHub Pages 其實還有第二種選擇

Vim

Hexo 透過 Nginx 部署私人主機 & 設置 CI/CD 流程 --

除了 GitHub Pages 其實還有第二種選擇

JQuery

JS Modularity 過程筆記 - 汰換大型專案所有 alert 成可重複使用的訊息區塊元件 --

JS 物件導向 - Customize Dialog UI component replaced JQuery Dialog --

PHP

mysqli_query VS mysqli_prepare --

Regular Expressions 正規表達式 --

利用正規表達式來切割資料

MySQL

mysqli_query VS mysqli_prepare --

2025 OEM 網站開發筆記 [11] - 開發後台 Markdown 編輯器並於前端成功渲染 --

2025 OEM 網站開發筆記 [2] - 用 Dummy Data 熟悉 React + TypeScript 前端開發 Workflow --

熟悉 React + Vite + TypeScript + Tailwind CSS + TanStack Query + Django + MySQL 整套工作流程

2025 OEM 網站開發筆記 [1] - 📌 Tech Stack --

記錄專案使用到的技術

SQL

深入了解 SQL JOINS - 實戰篇 [2] --

A Comprehensive Guide to Inner, Outer, Self, and Cross Joins

深入了解 SQL JOINS - Mastering SQL Joins [1] --

A Comprehensive Guide to Inner, Outer, Self, and Cross Joins

2025 OEM 網站開發筆記 [20] - Django 連線 MySQL、資料遷移流程 --

apps 註冊、資料庫遷移、MySQL 資料表命名

2025 OEM 網站開發筆記 [21] - 後端產品列表 API 開發 --

從 dummydata 切換到真實資料庫，ER Model 設計、ORM 模型設計，建立 Product、ProductImage、Specification、Tag、ProductTag 關聯資料表、資料庫遷移、CORS Header 設定、產品列表 API 設計

2025 OEM 網站開發筆記 [22] - 後端文章管理系統 & 列表 --

ER Model 設計、ORM 模型設計，建立關聯資料表、資料庫遷移、文章列表 API 設計

Sentiment analysis

TF-IDF 演算法 --

衡量字詞在一份文本內的重要程度之演算法

Algorithm

TF-IDF 演算法 --

衡量字詞在一份文本內的重要程度之演算法

NLP

TF-IDF 演算法 --

衡量字詞在一份文本內的重要程度之演算法

Maching Learning

TF-IDF 演算法 --

衡量字詞在一份文本內的重要程度之演算法

Whisper API

私人多語言 AI 翻譯器 - Whisper API --

Real-time translation and transcription of multilingual speech sounds into different audio outputs - Whisper API

GSAP

2025 OEM 網站開發筆記 [番外] - GSAP target [元素類別名稱] not found 問題解決 --

LINE BOT

2025 django 串接 LINE Messaging API --

TypeScript

2025 OEM 網站開發筆記 [30] - Django 郵件伺服器設 & 前端帶入寄件人資訊自動寄信 --

2025 OEM 網站開發筆記 [2] - 用 Dummy Data 熟悉 React + TypeScript 前端開發 Workflow --

熟悉 React + Vite + TypeScript + Tailwind CSS + TanStack Query + Django + MySQL 整套工作流程

2025 OEM 網站開發筆記 [3] - Swiper JS + shadcn/ui + Tailwind CSS 開發可滑動產品卡片展示櫃 --

順便複習 useRef vs useState 的差異

2025 OEM 網站開發筆記 [4] - 套用 GSAP 動畫至首頁元件 --

2025 OEM 網站開發筆記 [1] - 📌 Tech Stack --

記錄專案使用到的技術

2025 OEM 網站開發筆記 [5] - 用 GSAP 取代 Framer Motion 開發 shadcn/ui's Accordion 展開/收合動畫 --

2025 OEM 網站開發筆記 [23] - 前端點擊分類，篩選並只顯示出該分類的文章列表功能 --

2025 OEM 網站開發筆記 [15] - 導入多語系 react-i18n 升級成國際化網站 --

React useCallback 如何解決 useEffect 無限循環問題 --

2025 OEM 網站開發筆記 [番外篇] - 取代 Hash Route、最佳化 SEO 的 404 找不到路由替代方案 --

2025 OEM 網站開發筆記 [SEO] - 用 Prerender.io 解決 CSR 網站無法擷取 meta property="og:* 的問題 --

CSR 網站常見 SEO 問題，在 Facebook、LINE、LinkedIn 分享時，沒有標題、描述、縮圖...等

Typescript Path Alias 設定及錯誤解決 --

Typescript

2025 OEM 網站開發筆記 [10] - martor 編輯器圖片上傳至 localstrage 並自動以文章 slug 命名創建資料夾 --

不用再使用 imgur 上傳圖片、不用租用線上圖片儲存空間、直接上傳至本地 Server 專案資料夾中

Vite

2025 OEM 網站開發筆記 [2] - 用 Dummy Data 熟悉 React + TypeScript 前端開發 Workflow --

熟悉 React + Vite + TypeScript + Tailwind CSS + TanStack Query + Django + MySQL 整套工作流程

2025 OEM 網站開發筆記 [3] - Swiper JS + shadcn/ui + Tailwind CSS 開發可滑動產品卡片展示櫃 --

順便複習 useRef vs useState 的差異

2025 OEM 網站開發筆記 [4] - 套用 GSAP 動畫至首頁元件 --

2025 OEM 網站開發筆記 [1] - 📌 Tech Stack --

記錄專案使用到的技術

2025 OEM 網站開發筆記 [5] - 用 GSAP 取代 Framer Motion 開發 shadcn/ui's Accordion 展開/收合動畫 --

TanStack Query

2025 OEM 網站開發筆記 [2] - 用 Dummy Data 熟悉 React + TypeScript 前端開發 Workflow --

熟悉 React + Vite + TypeScript + Tailwind CSS + TanStack Query + Django + MySQL 整套工作流程

2025 OEM 網站開發筆記 [1] - 📌 Tech Stack --

記錄專案使用到的技術

2025 OEM 網站開發筆記 [23] - 前端點擊分類，篩選並只顯示出該分類的文章列表功能 --

npm

2025 OEM 網站開發筆記 [15] - 導入多語系 react-i18n 升級成國際化網站 --

Typescript Path Alias 設定及錯誤解決 --

ESC