![[Github Pages] 如何建立多個專案網站](/image/20250315_20-53-42.png)
[Github Pages] 如何建立多個專案網站
前言Github Pages 不僅可以建立個人的使用者網站，也支援在不同的 repository 中建立專案網站。本文將介紹如何建立及設定額外的 Github Pages 專案網站。
Github Pages 設定步驟1. 建立 repository 並使用 Codespace 新增網頁內容首先建立一個新的 repository，然後使用 Codespace 來編輯網頁內容：
在 Codespace 中，建立一個基本的 index.html 檔案：
1234567891011<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Github Pages - Demo</title>&l ...
【VSC】如何共同開發階段程式排版設定方式
前言提到 VSC 開發可肯定遇到一些排版問題，有些排版的規則與後面開法人員又不太相同，容易造成 commit 都是排版的修改項目。這邊我用 VSC 來處理共同開發讓所有人排版都一致。
VS Code指令與搜尋如果第一次或是用不久且不夠熟悉的人，我們可以記住以下快捷鍵。
快速指令 (有 > 符號): Ctrl + Shift + P
快速搜尋 (只能搜尋當前專案的檔案名字) : Ctrl + P
快速搜尋可以自己加入 > 符號也能達到效果。
註記 : 最新版本的 VS Code 可以直接點搜尋列也能達到 Ctrl + P 效果。
workspace / User 的 Settings.json 差異專案開始的時候，一定很多人利用 .gitignore 移除掉 .vscode ，首先先把 .gitignore 裡面針對 .vscode 先移除才能往下走原因如下。
說明 :
User Setting.json : 個人設定檔，只有自己本機才能使用這些參數。
Workspace Setting.json : 專案設定檔，這個設定檔是針對專案的設定，所有人都能使 ...
【ChatGPT】使用學習工具篇
前言近期為了提升自己學習能力，我製作一個學習工具AI幫助需要學習英文/日文的人使用。這個工具是完全免費又可以賺到閱讀訓練，如果是應付考試可以試試看效果如何。
ChatGPT商店
【學習工具】英文學習/練習 : 點選我
【學習工具】日文學習/練習 : 點選我
快速使用方式一進入畫面建議都按下 “您有什麼功能” 按鈕，有一系列的功能清單可以使用，如果要選選擇其中的功能，就是複製 title 就可以了。
特色考慮到各位使用這絕對會考慮 CP 值決定購買或是免費仔情況，所以不會參考語音功能在裡面。
1. 測驗與挑戰模式與英文練習工具類似的功能如下清單
單字測驗（日文→中文 或 中文→日文）
詞性與變化練習（動詞、形容詞變化）
句型測驗（填空題練習助詞、動詞、句型）
語法測驗（助詞、時態、句子結構）
閱讀理解（短篇文章 + 測驗）
同義詞與反義詞練習
2. 閱讀理解找不到免費的 APP 軟體訓練閱讀能力，可以透過以下操作順便提供測驗題目，提升學習上閱讀的能力
3. 單字與詞彙學習使用時候可以加入單字，也包含單字抽考模式。在測驗時候需要確認是否要留漢字選項， ...
![[Benchmarks] Database Connect 效能差異](/image/20250318_23-37-06.png)
[Benchmarks] Database Connect 效能差異
前言在 .NET 專案中，連接資料庫的方式有多種選擇。本文將透過 BenchmarkDotNet 來比較三種常見的資料庫連線方式的效能差異：
使用相依注入(DI)的 DbContext
每次建立新的 DbContext
使用連線池的新 DbContext
測試環境設定測試程式使用以下配置：
測試資料量：1000 筆
啟動次數：1 次
預熱次數：3 次
迭代次數：50 次
每次迭代的調用次數：3 次
測試程式說明
使用 DI 注入的 DbContext
使用單一 DbContext 實例
適合於 Web 應用程式的 Scope 生命週期
效能較好，但需注意 Change Tracker 的記憶體使用
每次建立新的 DbContext
每次查詢都建立新的連線
適合較簡單的查詢場景
可能造成較多的資源消耗
使用連線池的 DbContext
啟用 SQL Server 的連線池功能
包含重試機制和查詢分割
在高併發場景下較有優勢
程式碼架構1234567891011121314151617181920212223242526272829303132333435363 ...
【工具、紀錄】Reqable 手機、API一手包辦
前言前正子在找相關工具可以追蹤 Android / IOS 手機上面的 API ，發現有個很強大工具可以達到我的需求。這工具結合了 Fiddler、Charles、Postman 的功能，可以在手機上面直接進行 API 測試、追蹤、修改等功能。
Reqable 簡介Reqable 是一個可以在手機上面進行 API 測試、追蹤、修改等功能的工具，可以在手機上面直接進行 API 測試、追蹤、修改等功能。因為他是大陸開發工具，若有考量可以改用其他工具。
一、API 功能 ( 介面類似 Postman )這裡工具提供了 Explorer 、Collection、History 這幾個功能可以比較 Postman 與 Reqable 的差異。
1-1 Explorer 功能Postman 是沒有所謂的 Explorer 功能。這功能在創建新的 Tab 時候會直接記錄在 Explorer 中，可以直接點擊進行 API 測試。主要目的會偏向於紀錄當前 tab 清單有地方可以查看。
1-2 Collection 功能Collection 功能可以將 API 進行分類，可以將相關的 API 放 ...
【工具】沉浸式翻譯-網頁翻譯擴充 - 使用 xAI
前言於幾周前 will 保哥推薦一個 xAI 來翻譯網頁，而且一個月有 25美元免費額度。Felo 提供的 Glarity 無法使用xAI來翻譯，因此特別紀錄操作方式。
xAI 簡介xAI 是由 twitter (X Corp) 提供AI服務給使用者使用，模組目前只有支援 grok-beta、grok-vision-beta。(目前翻譯模型效果比其他模型好很多)
安裝擴充以及 AI Key
安裝擴充
進入 Chrome Web Store 搜尋 沉浸式翻譯-網頁翻譯擴充 並安裝
安裝完成後會出現一個小圖示在右上角
擴充連結 : https://chromewebstore.google.com/detail/%E6%B2%89%E6%B5%B8%E5%BC%8F%E7%BF%BB%E8%AD%AF-%E7%B6%B2%E9%A0%81%E7%BF%BB%E8%AD%AF%E6%93%B4%E5%85%85-pdf%E7%BF%BB%E8%AD%AF-%E5%85%8D%E8%B2%BB/bpoadfkcbjbfhfodiogcnhhhpibjhbnh
取得 AI API K ...
【Windows】Terminal 加入 Copilot 功能
前言近期回頭看 Gihub Copilot 功能有 windows Terminal 並非是在 Vscode 中使用，這邊紀錄一下 Terminal 有哪些功能。
Terminal Canarywindows Terminal 已經釋出三種版本 (一般、Preview、 Canary) ，UI 也比以前的Terminal 大幅提升。 Terminal Canary 版本於 2023年時候有釋出，這版本是可以使用 Copilot / Azure AI / OpenAI 這三個功能。
一、安裝 Terminal Canary
相關連結 : Terminal Canary
下載連結在 Github 上，可以直接下載安裝。
1-2 加入 Copilot 功能請參考下方 GIF 步驟，可以看到如何加入 Copilot 功能。
1-3 新增快捷鍵為了增加活用度，我這邊取用跟 Vscode 一樣的快捷鍵 (ctrl + i)，可以參考下方步驟。
二、使用方式2-1 介面功能chat ui 有兩個功能，筆者覺得他們 icon 做得不太好辨認，以下說明。
clear histor ...
Playwright 自動化腳本無寫程式碼使用方式 (六) - locator / waitForSelector
前言用到現在來補充一個比較多新手會卡觀的一個問題，就是如何使用 locator 配合 selector 來定位元素，這個在實際操作上是非常重要的，因為有時候我們會遇到一些元素是沒有 id 或是 class 的，這時候我們就需要透過 locator 配合 selector 來定位元素。
locator 配合 selector 使用起因相信各位在各家公司上，往往都是一條龍從前端到後端都是自己一個人在做，這時候就會遇到一個問題，就是前端的元素是沒有良好的設計 id / class 容易造成html不好維護。配合 Playwright 有時候使用 getByRole 又會出乎意料的錯誤，建議使用 locator 解決問題。
locator 定位器locator 定位器是 Playwright 提供的一個定位元素的方法，透過這個方法我們可以透過一些特定的方式來定位元素，這樣就可以達到我們想要的目的。如下方範例 :
12await page.locator('div.myClass')await page.locator('xpath=//button&#x ...
Playwright 自動化腳本無寫程式碼使用方式 (五) - 身分驗證
前言playwright 在前幾章都有介紹簡單的操作方式，這次藥用個身分驗證的例子來說明如何使用 playwright 來自動化測試。
playwright 身分驗證為甚麼會需要 playwright 身分驗證，主要是每次案例上 playwright 都會開啟全新沒有任何的 cookie、session之類，每次都要重新登入相當繁瑣。這邊我們就來說明如何使用 playwright 來自動化登入的動作。
這篇建議各位讀者使用 playwright 時候可以到 playwright.tw 這個網站來查看範例，這個網站由 【Will 保哥】翻成中文網站有助於各位學習。
一、創建驗證動作前篇有提到 test.describe 這個方法可以用來描述測試的動作，可以用來分類測試動作。這次我們就讓這個登入動作寫在 step 裡面，之後啟動就可以直接使用。這邊會使用 playwright 官方網範例來調整，這邊會使用 github 登入來做範例。
12345678910setup("authenticate", async ({ page, browser } ...
【Docker】使用network解決無法互通問題
前言近期都在玩 Discord Bot 開發。使用方式一定使用 docker 當作工作排程器讓程式運行時候，可以透過 docker desktop 來管理。但是在使用 docker 的時候發現一個問題就是無法互通，因為他本身架構是各之間的docker都是。這時候就需要使用 network 來解決這個問題。
一、Docker容器互相無法連線問題對於一個 docker 使用不久的人來說，會以為都在同一個local network 應該要能互通，而且設定 port 也要吃得回去才合理。過程中得出一個結論就是隔離性，如下圖 :
其中，每個 docker 內部若允許 3000 port，但在本機的 http://localhost:3000 並不會吃得回去，這就是為什麼指令需要加入 -p 3000:3000 這個參數。
1-1 解決方式解決方向就是要讓 docker 容器A可以允許容器B的請求，這時候就需要使用 network 來解決這個問題。
1-1-1 創建一個新的 network我們需要有個環境中，彼此可以互通的網路，這時候就需要創建一個新的 network。
12docker new ...