英文版在 dev.to。 最近幫會員登入加上 Passkey,結果在 LINE 的內建瀏覽器裡踩到一個很隱蔽的問題:按鈕有出現,按下去沒反應,而且沒有任何錯...
app link : https://college-expense-tracker-sandy.vercel.app/ 歷經了 29 天的程式碼重構、UI/...
Day 27:版面配置更改(RWD 實踐) 在前幾天的開發中,我們的記帳網站在電腦螢幕上展現了極佳的質感與功能性。然而,身為一個手機不離身的大學生,如果打開記...
Day 25 :CSS 變數架構與全站樣式同步 1.root 預設變數與多套色系 /* 藍*/ :root { --bg-color: #f4f6f9;...
Day 23:實作「每月固定支出」自動化智慧記帳機制 在前面的開發中,我們已經完成了記帳 CRUD、預算控制、月曆檢視、圓餅圖統計以及安全密碼鎖。然而,在日常...
在前面的天數中,我們成功打造了具備 SPA 頁面切換、即時記帳、動態月曆、Chart.js 統計圖表與 CSV 匯出的完整記帳網頁。然而,當一個網站開始記錄使...
一、實作目標 前面已經完成 Google Cloud 專案設定、啟用 Google Calendar API、建立 OAuth 2.0 憑證,以及產生 Goog...
一、學習目標 第十二天已經完成 credentials.json 的讀取,並使用 Google API Client Library 建立 OAuth 2.0...
Day 27 我處理的是 Setup Status 和真正完成條件不一致的問題。 那篇結尾我留了一個差異:needs-review 規則和 Schema〈十四、...
摘要: 先用vite快速建立Vue3新專案,預設程式語言為Javascript,然後一步一步安裝Plotly.js並引用實作統計管制圖表,以P-chart不良率...
隨著測試與使用的資料越來越多,如果使用者想要一口氣清空所有紀錄、重新開始記帳該怎麼辦呢?所以今天我們會為專案加入 「清除全部紀錄與重設金庫」 功能。透過 lo...
在前面的天數中,我們依序完成許多功能。資料雖然都透過 localStorage 安全地保存在瀏覽器中,但如果使用者想用 Excel 進行更深入的財務分析或備份...
Day 25 最後留了一個小洞,我寫的是: setup 不完整時,generateSpecFromState() 應該拒絕產生 spec,stage 不應前進...
一、學習目標 今天開始進行 Discord Bot 與 Google Calendar 的串接,主要目標是完成 Google Cloud 專案設定、啟用 Goo...
Day 24 最後留了一個很明確的方向: Day 25 我想給它補 focused unit coverage:每個條件單獨壞一次,看它自己能不能讓整個判斷不...
今天會進入視覺化的重頭戲:透過前端輕量級圖表套件 Chart.js,在「統計」頁面畫出各類別的消費比例圓餅圖。同時即時計算各類別的金額與佔比百分比。 一、...
Day 22 結尾,我留了一句話: 還沒填完時,產生 Project Specification 應該不能按。 今天就補這一條。 ClarifyBuild...
Day 21 結尾我留了一個很具體的方向。 如果 Day 22 要繼續補 browser test,就補一條從 Idea Entry 一路走到 Prompt P...
昨天我們成功用 JavaScript 刻出了動態的月曆網格與月份切換功能。今天會進入到資料繫結,讓存在 localStorage 裡的消費紀錄自動找到對應的日...
一、今天的學習目標 前幾天我已經讓 /add 可以接收三個欄位: title date time 而且也有使用 Regex 檢查日期是不是 8 位數、時間是不是...
不同於死板的列表,一個好的記帳軟體一定要能用月曆檢視每天的花費狀況。今天我們會透過 JavaScript 動態計算當月的總天數、第一天是星期幾,並完美排版出 7...
Day 18 我說還沒有 browser test。 Day 19 我又說 browser test 一樣先放著。 今天 Day 20,終於輪到它了。 不過今天...
摘要 30 天沿著資料走了一趟: 學到了同步資料流、非同步資料流、資料到手之後怎麼存與複製,最後是不要了怎麼停。一路帶出三個問題: 誰推進、資料是共用還是複製、...
摘要 取消要分兩個角色:判斷「還要不要」的一方持有 AbortController,負責喊停;做事的一方只拿 signal,交給 fetch 這類會停下來的 A...
前言:進入第四部,用真實案例把前面 23 天的原則串起來 從今天開始是這個系列的第四部:實戰案例與總結。前面 23 天講了不少原則——假陽性測試、過度 mock...
摘要 AbortSignal.timeout() 讓「等太久」也能變成一個 signal,AbortSignal.any() 則把好幾個停止條件合成一個,誰先發...
在前幾天的重構與 SPA 架構完成後,我們的記帳網站已經有了大概的的骨架。今天,我們要把「預算」這個分頁的功能補齊,並在總覽儀表板加上 UI/UX 設計:預算...
昨天 Day 15,我把 ClarifyBuild 的 Specification Setup 從容易出錯的文字格式,改成比較明確的 row-based edi...
一、今天的學習目標前幾天已經完成了 /add 指令,Day 6 也把 /add 的功能從 index.js 拆到獨立的 add.js 中。隨著功能增加,我希望使...
摘要 AbortController 不會把 Promise 強制關掉;它透過 AbortSignal 通知願意配合的工作停止,fetch()、事件監聽器與自訂...