Hi! I am Boison 👋

一、基礎 1. 問答：精確，正向定義 使用精確量詞 X Please suggest me some essential words for IELTS O Please suggest me 10 essential words for IELTS 與其用否定限定，用正向限定對其可能更直接 X Please recommend me some places to visit in Hong Kong. Do not recommend museums. O Please recommend me some places to visit in Hong Kong including amusement parks. 資料來源：Learning Prompt 2. 造句：給 AI 參考用的答案，請他自己學習造樣造句 Suggest three names for an animal that is a superhero....

1. Mem: openai 投資的筆記軟體，一鍵筆記所有平台資訊並用 ai 分類 下載連結 費用：有免費版跟付費版，建議不要付費 模型：GPT-4 UP(?) 開源：未開源 使用心得 一開始是在 Twitter 看到有 kol 下面總有看起像是 bot 的留言會自動幫忙總結，就去找來源，我開始用了以後不知道為何開始有人看到我的 bot 留言後追蹤我，到底（？） 發現是我找很久的產品，我的需求是想要在各大社群平台可以快速記下資訊，之前有想要用 readwise 但覺得好像又不完全符合（有點貴，沒有自動分類筆記或定期跳出筆記卡片，而且跟我在用的筆記軟體的整合不好等），這個軟體滿符合又免費 之前我都是會存在 Line Keep 再隔一兩天回去看我存了什麼，現在可以直接用 Whatsapp 發簡訊就會幫我存，推特則是可以直接 @memdotai mem it 但團隊開發上我覺得非常不認真，我在用核心功能上有點小問題，每次用快捷鍵要跳出類似 Alfred/Raycast 的 Spotlight 時都會跳出桌面，無法覆蓋在 Chrome 上面，上網查了很久一年前就有人在官方論壇回報一年了還沒修（而且看到其他人一年前回報的也沒修，傻眼） 先暫且用反正是免費的也的確堪用，概念超好，希望之後有人推出取代的，或者我乾脆自己作，這家拿 openai 一堆錢不做事誒幹   2. D-ID：圖片+文字稿自動生成真人講話影片 下載連結...

1. Speak：疑似 openai 親兒子的英文學習 app，chatGPT 最新模型 下載連結 費用：2,945 NT$/y（好像是特價） 模型：GPT-4 UP(?)、Whisper API 開源：未開源 使用心得 如果要完全模擬跟真人對話習慣真實世界對話方式我比較推薦 Kai 團隊開發的 JCAI，但以學習上這款 app 比較符合遊戲化學習的機制循序漸進，兩者可並行。 口音很好聽，不會有機械感。 目前只有針對韓文和日文使用者，但反正都有英文輔助我選日文無痛使用，就當作是全英文介面就好 滿能夠糾正口音，用完以後才知道我口音有多爛，很痛苦但很有幫助我上實體課從來沒有老師會這樣無限糾正我。 AI 會設定一個真實生活情境，在這個架構下你可以跟他天南地北聊基本他都會回答，跟真實生活很像，還可以修正你講的每句話的文法，像我去咖啡店問她叫小姐，他就說無法不太禮貌之類，我說我要點一百杯牛奶他說沒有，我說開玩笑的只要一杯啦他就說 OK。 其他英文教學平台準備倒一倒了，英文（語言）學習平台世界上未來可能只需要不超過三個，面向聚焦不同功能。 2. ChatGPT for YouTube：幫你在 Youtube 右側生成任何形式的總結 下載連結 費用：免費，只要開設 chatGPT 帳號 模型：串最新免費版 chatGPT，目前是 3....

1. ReaderGPT：整理瀏覽器文章重點 下載連結 費用：免費，只要開設 chatGPT 帳號 模型：openai/gpt-3/Generative Pre-trained Transformer 3 開源：未開源 使用心得 速度有點慢，但可以開著讓他跑先做其他事 範例 其他語言網頁如荷蘭文網頁可總結 自己設定的 Prompt 為： 用繁體中文分成三個重點總結，每段重點前請加上 bullet point（項目符號）： 2. Bing Image Creator：用 Prompt 生成圖片 使用連結 費用：免費 模型：基於 OpenAI 模型 DALL-E 的 開源：未開源 使用心得 沒啥特別的就是免費，期待之後導入 Bing 頁面中，不然要額外開有點麻煩 範例...

1. Server Side Rendering (SSR) 簡介 簡要說明 SSR 和它與客戶端渲染 (CSR) 的比較 Server Side Rendering (SSR) 是一種 Web 應用程序技術，它通過在服務器端渲染網頁內容來提高頁面載入速度和搜索引擎友好性。當用戶在瀏覽器中請求網頁時，服務器將網頁的內容渲染為 HTML，並將其傳回給瀏覽器顯示。 相比之下，Client Side Rendering (CSR) 則是在瀏覽器端通過 JavaScript 渲染網頁內容。當用戶請求網頁時，瀏覽器先加載 HTML 骨架，然後再使用 JavaScript 渲染頁面內容。 說明為什麼某些情況下需要 SSR 提高頁面載入速度：因為 SSR 在服務器端渲染網頁內容，所以網頁的初始載入速度可以大大提高。 改善搜索引擎優化 (SEO)：因為搜索引擎不能很好地解析 JavaScript 渲染的頁面，所以使用 SSR 可以改善網站的 SEO 效果。 改善用戶體驗：因為 SSR 可以在網頁載入時提供更多內容，所以用戶可以更快地查看網頁內容。 改善頁面結構：因為 SSR 可以確保頁面的 HTML 結構正確，並且符合標準。 2....

Three.js 是一個 JavaScript 庫，用於在瀏覽器中創建和渲染 3D 圖形。以下是使用 Three.js 的一些簡單步驟： 包括 Three.js 庫 通過將以下代碼放入您的 HTML 頁面中，包括 Three.js 庫： <script src="https://cdn.jsdelivr.net/npm/three@0.121.0/build/three.js"></script> 創建場景 使用 Three.js 創建場景，其中包含您將添加所有 3D 對象的空間。 var scene = new THREE.Scene(); 創建相機 創建一個相機，用於定義您看到場景的角度。 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 創建渲染器 創建渲染器，用於呈現場景中的圖形。 var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); 添加對象 向場景中添加 3D 對象，如立方體、球體等。...

1. AWS 基礎知識 1. Key pair type 中 RSA 和 ED25519 有什麼差別 金鑰大小：RSA 金鑰的大小可以從 1024 到 4096 位不等，而 ED25519 金鑰固定為 256 位。 安全性：RSA 基於質因數分解的數學概念，多年來已經得到廣泛的研究和測試。另一方面，ED25519 基於椭圆曲線密碼學，具有與 RSA 相似的安全性，但金鑰大小更小。 速度：在簽署和驗證數位簽名時，ED25519 比 RSA 更快。 簽名演算法：RSA 使用 PKCS#1 v1.5 或 PSS 簽名演算法，而 ED25519 使用 EdDSA 簽名演算法。 實現：RSA 在各種編程語言中更加廣泛地支持和實現，而 ED25519 的支持仍在增長，尽管它在流行的密碼學庫（如libsodium和OpenSSL）中是可用的。 2. Private key file format 中 .pem 和 .ppk 有什麼差別 格式不同：....

Cypress 是 E2E 測試的測試工具，之所以被稱為 E2E 測試（端對端測試 End-to-end testing）在於其能撰寫腳本在最終端模擬使用者的操作行為，並確保頁面的功能符合產品設計的故事線，其他流行的 E2E 測試框架還有 Protractor、Selenium、Nightwatch…等。 ※ 註：本文實際安裝的環境為 Next.js 12 一、測試的種類 關於自動化測試，有一個測試金字塔模型，該模型把測試從下到上分為了單元測試、集成測試和 UI 自動化測試（E2E 測試 / UI 界面測試）。 1. 單元測試 單元測試又稱為模塊測試，主要針對程序中最小可測試單元（一般指方法，類）的測試，具備投入小、收益產出高的特徵，可以較早期地發現代碼缺陷，適用於公共函數庫的測試。 2. 集成測試（接口自動化測試） 接口自動化主要包括模塊接口測試，子功能模塊集成起來的功能模塊測試等，目的是為了驗證在單元測試的基礎上，所有模塊集成起來的子系統、子功能是否仍然滿足質量目標。 3. UI 自動化測試（端到端 E2E 測試 ） UI 測試的主要目的是，從軟件使用者的角度來檢驗軟件的質量，而 UI 自動化測試則是以自動化的方式來代替人工執行測試。 二、快速建置 Cypress npm 一鍵安裝 npm install cypress --save-dev 去 package.json 更改執行腳步 // Before { ... "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, ....

向下版本支援，新增功能如 Turbopack、更完善的 file-based routing，更無痛的 React Server Components 打包工具採用 Turbopack 次世代的打包速度（速度更優於早些新推出的 Vite） 更完善基於資料夾的路由 router 系統 過往放在 page 資料夾下的資料夾名稱即等於路由，現在 app 資料夾同之前，只要在資料夾下建立一個 page.js 檔案當作該路由主頁面，即可放置其他檔案 將測試檔案，相關功能/頁面元件 Component 等集中放置同一資料夾集中管理 更無痛的寫 React Server Components 在 app 資料夾下放置的組件默認為 React Server Components，且在 page 資料夾下若有需求更無痛的寫 React Server Components 在 page 資料夾下要寫 React Server Components，只要使用非同步處理，則不須去撰寫語法傳遞 client side 和 server side 的變數...

1. 不需要及時取得值的時候用 useState 在此狀況中不需要及時的取得輸入值，只需要按下 submit 按鈕時取得即可。 待優化的用法 import { useState } from "react" function App(){ const [email, setEmail] = useState("") const [password, setPassword] = useState("") function onSubmit(e) { e.preventDefault() console.log({email, password}) } return ( <form onSubmit={onSubmit}> <label htmlFor="email">Email</label> <input value={email} onChange={e => setEmail(e.target.value)} type="email" id=email > <label htmlFor="password">Password</label> <input value={password} onChange={e => setPassword(e.target.value)} type="password" id="password" > <button type="submit">Submit</button> </form> ) } export default App 優化後的用法 import { useRef } from "react" function App(){ const emailRef = useRef() const passwordRef = useRef() function onSubmit(e) { e....