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

更新於 發佈於 閱讀時間約 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 部署網站
為什麼會看到廣告
avatar-img
37會員
31內容數
短篇奇幻作品將不定期更新。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Ray C的沙龍 的其他內容
我並非這美術設計的原創,不過得益於 Instagram 上 @uixperience 的作品參考,才實現了這優雅計算機的外觀。在互動的部分,我讓按鍵在按下時減少陰影,並加深按鍵背景的顏色,這樣就像是真的被按了下去一樣;另外,在顯示計算結果的部分,透過 JS 增減 CSS class 的方式隨時...
一開始的版本是和 Todo MVC 類似的簡易待辦事項清單,由於本身的使用需求,不斷調整和優化 Todo 清單的外觀與功能,如使用 SortableJS 做出拖拉排序、結合 LocalStorage 做出儲存機制、Markdown link 語法的支持,以及對 XSS 跨網站指令程式碼的防禦處...
我並非這美術設計的原創,不過得益於 Instagram 上 @uixperience 的作品參考,才實現了這優雅計算機的外觀。在互動的部分,我讓按鍵在按下時減少陰影,並加深按鍵背景的顏色,這樣就像是真的被按了下去一樣;另外,在顯示計算結果的部分,透過 JS 增減 CSS class 的方式隨時...
一開始的版本是和 Todo MVC 類似的簡易待辦事項清單,由於本身的使用需求,不斷調整和優化 Todo 清單的外觀與功能,如使用 SortableJS 做出拖拉排序、結合 LocalStorage 做出儲存機制、Markdown link 語法的支持,以及對 XSS 跨網站指令程式碼的防禦處...
你可能也想看
Google News 追蹤
提問的內容越是清晰,強者、聰明人越能在短時間內做判斷、給出精準的建議,他們會對你產生「好印象」,認定你是「積極」的人,有機會、好人脈會不自覺地想引薦給你
Thumbnail
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟,包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置,及如何創建類型聲明文件來正確識別 .vue 文件。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
這篇文章描述了作者從兼職開發轉為全職開發的過程,並分享了從混進學界指日可待的積極態度。作者也提及自己在專案製作與個人生活上的矛盾與感想,最後分享了專案管理和敏捷開發相關的文章與影片。
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
本文介紹如何使用Vite建立前端開發初始檔案,並加入Tailwindcss的教學。透過指令和配置檔,讓你能快速建立個人專案的開發環境,並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等,幫助你進一步學習。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
※ 簡短說明Git 和 Git Flow 是什麼?如何應用? Git 是什麼? Git是一個分散式版本控制軟體,能夠紀錄檔案的狀態變化,以及協調多個開發者之間的工作。它允許團隊成員協作編輯和管理項目的代碼庫,並且能夠追蹤文件的歷史變更、恢復到以前的版本、合併不同版本的代碼,以及解決代碼衝突等。
Thumbnail
Vite 是由 Vue 開發者 Evan You 所開發出來,用來加快、優化程式碼打包的工具,在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具:Webpack。 在那之前,我們先來聊聊為什麼前端會需要所謂的打包工具呢?
提問的內容越是清晰,強者、聰明人越能在短時間內做判斷、給出精準的建議,他們會對你產生「好印象」,認定你是「積極」的人,有機會、好人脈會不自覺地想引薦給你
Thumbnail
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟,包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置,及如何創建類型聲明文件來正確識別 .vue 文件。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
這篇文章描述了作者從兼職開發轉為全職開發的過程,並分享了從混進學界指日可待的積極態度。作者也提及自己在專案製作與個人生活上的矛盾與感想,最後分享了專案管理和敏捷開發相關的文章與影片。
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
本文介紹如何使用Vite建立前端開發初始檔案,並加入Tailwindcss的教學。透過指令和配置檔,讓你能快速建立個人專案的開發環境,並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等,幫助你進一步學習。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
※ 簡短說明Git 和 Git Flow 是什麼?如何應用? Git 是什麼? Git是一個分散式版本控制軟體,能夠紀錄檔案的狀態變化,以及協調多個開發者之間的工作。它允許團隊成員協作編輯和管理項目的代碼庫,並且能夠追蹤文件的歷史變更、恢復到以前的版本、合併不同版本的代碼,以及解決代碼衝突等。
Thumbnail
Vite 是由 Vue 開發者 Evan You 所開發出來,用來加快、優化程式碼打包的工具,在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具:Webpack。 在那之前,我們先來聊聊為什麼前端會需要所謂的打包工具呢?