iT邦幫忙

2026 iThome 鐵人賽

DAY 30
0
Modern Web

從 UI/UX 設計到前端實作:30 天打造專屬的任務學習計時器系列 第 30 篇

DAY 30|終點亦是起點: 完賽回顧、與新夥伴一起出發

  • 分享至 

  • xImage
  •  

在這 30 天不間斷地思考、設計、發想與寫程式碼(還有被發文截止時間追著跑)(做夢都在想著哪裡要修改)(中秋節時兩口烤肉🥓一口程式碼),終於把腦海中的想法,變成一個功能完整的實用工具。

在鐵人賽的最後一天(感動!),除了統整一下技術工具和文章,也紀錄了這 30 天下來的開發心得。


作品成果

雖然還有些不成熟的地方,但歡迎大家來玩玩,如果也能成為你學習上的夥伴,那就太好了!


專案技術與工具總覽

專案技術

項目 工具 / 技術
核心與架構 Vanilla JavaScript (ES6+)、HTML5、CSS3、ES Modules
瀏覽器技術 API IndexedDB、Page Visibility API
UI 框架與元件 Bootstrap 5
設計與原型工具 Figma
多國語系 (i18n) i18n 模組(支援繁中 / 英 / 日語系切換與動態 SEO 標題)
版本控制與部署 Git、GitHub
流量分析工具 Google Analytics
網域服務 Cloudflare
廣告投放(審核中) Google Adsense

過程中使用到的工具

項目 工具
mov轉gif visual paradigm
製作favicon favicon
網域建站教學 六角學院課程
AI 工具 Gemini Flash
轉換心情 煩貓以及被貓煩🐈、美劇 Bones、學習西洋棋

完賽心得

當初會按下報名鍵,其實只是腦海中浮現了一個想解決自己學習痛點的小想法。那時候剛好看到鐵人賽開跑,覺得「嗯...好像可以趁這個機會逼自己開發並記錄下過程。」,結果就在只有一個 想法小樹苗🌱 的狀況下,帶著一股衝動直接開賽了。

坦白說,開賽時對於參賽流程與生態了解很少,只記得關鍵的「連續30天發文,內容要有300字以上」,就開始了挑戰。連Markdown語法都不會,於是還額外整理了一篇 Markdown語法整理。

除此之外,文章的語氣也很令人糾結:寫得太口語會不會顯得很輕浮?可以放梗圖嗎?都是程式碼跟描述的話,好像很助眠? 剛開始寫的過程也會想 「寫這些內容會不會太簡單?對其他人真的會有幫助嗎?」 ,但後來換個角度想,現在覺得簡單,是因為過去的自己已經努力學會了! 。

跟其他厲害的參賽者相比,我的專案技術沒有那麼高深,但希望在紀錄自己這段學習歷程的同時,也 能給那些和過去的我一樣、剛開始接觸程式的朋友一些幫助——希望你也能做出屬於自己的酷東西!

相信未來的我回頭看現在寫的程式碼,會發現有一百種更好、更有效率的方法來做出現在的作品;但我很感謝此時此刻運用所學、全力以赴把它完成的自己。也很期待下一次能帶著更有趣、更成熟的點子來挑戰鐵人賽!

接下來,在這 30 天完成的 TaskTimer 不只是一個作品,更會成為我的夥伴,陪著我繼續學習更多的程式知識!

小小紀錄
很開心成為完賽的其中一份子。(截圖時間:2026/10/13 00:06)

2026鐵人賽


文章總表

統整了這 30 天的文章,並且統計字數,作為紀錄。

  1. 設計與產品思維 (Day 01–04)
文章標題 字數
DAY 01|為什麼我要為自己打造一款「學習任務計時器」? 850
DAY 02|定義MVP產品的核心功能與架構 1796
DAY 03|運用 Bootstrap 5 快速建構 Mockup:從資訊架構到元件選型 1561
DAY 04|流程圖的邏輯梳理 1114
  1. 切版實作 (Day 05–12)
文章標題 字數
DAY 05|切版實作:Bootstrap 5 網格系統與響應式佈局 2061
DAY 06|切版實作:Bootstrap 5 List Group 側邊選單搭建 1932
DAY 07|切版實作:Bootstrap 5 Tab 頁籤切換與 List Group 整合 4089
DAY 08|切版實作:Bootstrap 5 Accordion 手風琴元件與 Shadow 陰影 2982
DAY 09|切版實作:整合 Accordion、Progress 與 Badge 打造任務進度折疊清單 3499
DAY 10|切版實作:用 Collapse 打造獨立折疊的子任務清單 2024
DAY 11|切版實作:運用Modal 彈跳視窗的介面設計 2971
DAY 12|切版實作:介紹常用元件 Dropdown 與 Input Group 1844
  1. 功能實作 (Day 13–17)
文章標題 字數
DAY 13|功能實作(一):時間格式化與 DOM 狀態初始化 2937
DAY 14|功能實作(二):setInterval 與計時核心邏輯 1253
DAY 15|功能實作(三):UI 按鈕狀態切換與暫停/結束控制 2857
DAY 16|功能實作(四):精確計時(Date.now())與 background 防休眠 4240
DAY 17|功能實作(五):計時結束跳出Modal 彈窗 4075
  1. 任務管理 (Day 18–21)
文章標題 字數
DAY 18|任務管理(一):主任務與子任務的 State 管理與 CRUD 實作 4932
DAY 19|任務管理(二):自動狀態流轉邏輯 2922
DAY 20|任務管理(三):將主任務與子任務 CRUD 動態連結至任務清單 Accordion 2506
DAY 21|數據統計:任務列表進度條與時間呈現 2168
  1. Local-First 架構跟資料管理 (Day 22–26)
文章標題 字數
DAY 22|Local-First 架構(一):什麼是 Local-First?為什麼選擇使用 IndexedDB? 2126
DAY 23|Local-First 架構(二):實作 Promise 版 IndexedDB 工具模組 4261
DAY 24|Local-First 架構(三):整合資料到 IndexedDB 3734
DAY 25|資料備份:資料主權歸於使用者,實作 CSV 報表匯出功能 2847
DAY 26|資料被清掉怎麼辦?使用JSON 資料備份與還原 3720
  1. 使用者體驗優化 (Day 27–29)
文章標題 字數
DAY 27|使用者體驗優化(一):閒置提醒、離線狀態偵測、隱藏/顯示秒數切換 2239
DAY 28|使用者體驗優化(二):多國語系(i18n)切換與語系狀態持久化 3300
DAY 29|使用者體驗優化(三):打造舒適的暗色模式(Dark Mode)體驗 3106
  1. 回顧與心得 (Day 30)
文章標題 字數
DAY 30|終點亦是起點: 完賽回顧與新夥伴一起出發 5265
  1. 後續迭代與優化 (Day 31 ~ 33)
文章標題 字數
DAY 31|程式碼重構:東西擺整齊的療癒感!專案開發後的回頭重構與架構優化 1804
DAY 32|UX優化:備份檔名時間戳與意見回饋管道 1361
DAY 33|修正錯誤、提高效能,還看了一堆貓咪影片 2022

上一篇
DAY 29|使用者體驗優化(三):打造舒適的暗色模式(Dark Mode)體驗
下一篇
DAY 31 | 東西擺整齊的療癒感!專案開發後的回頭重構與架構優化
系列文
從 UI/UX 設計到前端實作:30 天打造專屬的任務學習計時器 共 31 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言