Vite Todo|使用 Vite 和 Tailwind 打造的待辦事項清單
Ray C
Ray C

Vite Todo|使用 Vite 和 Tailwind 打造的待辦事項清單

2022-03-25|閱讀時間約 1 分鐘

簡介

這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業,其中使用了最近接觸的 Vite 作為專案開發和打包的工具,以及因為對 Utility-First CSS 頗感興趣,將 Tailwind 納入專案並初次使用它做開發。

外觀與互動設計

  • 使用圓體無襯線字體 Baloo Tamma 2 作為標題字體
  • 使用深灰而非黑色字體以達到閱讀和諧
  • 每次更新觸發輸入框的集中 (focus),省去額外點擊
  • 將過長或連字的段落 (例如 `THISISAPARAGRAPHWITHOUTSPACE`) 強制換行,維持待辦清單任務的一致性
  • 除了將勾選完成的任務以灰色字和刪除線表示,另外使用灰階對 Emoji 做去色處理
  • 加大勾選框和刪除按鈕的點選範圍,增進操作體驗和容錯率
  • 完成勾選所有任務,或是清除所有已完成任務後,自動回到「全部」任務區塊中以優化使用體驗

開發紀錄

  • 使用 Vite 進行專案開發和打包
  • 使用 Utility-First CSS 框架 Tailwind 開發外觀、滑鼠觸碰效果與 RWD 響應式設計
  • 透過 Purge 過濾未使用的 CSS,優化專案打包
  • 透過官方插件 @tailwindcss/forms 實現客製化勾選框 (checkbox)
  • 使用 `dataset` 標記任務 id
  • 使用箭頭函式、三元運算子、forEach、filter、find 等 ES6 JavaScript 開發功能
  • 加入 Local Storage 儲存功能,關掉瀏覽器也不怕任務丟失
  • 使用 Prettier 格式化程式碼,保持程式的整齊和一致性
  • 使用 Netlify 部署網站
0
贊助支持創作者,成為他繼續創作的動力吧!
作者介紹
Ray C
Ray C
居住於台北市,熱衷網站開發和設計,認為兩者相輔相臣,致力於做到開發如同揮劍一般優雅。更多關於我:https://rayc.dev/links
本文發佈於
嗯... 就把專案設計和開發的紀錄放在這邊吧!
如果要發表留言,請先登入註冊會員
領取見面禮
只要設定追蹤作者,即可享有 48小時
Premium 閱讀權限