前言
是的，因為最近的專案需要用到htmx，所以我被賦予了一項任務，先盤點一下htmx的功能及思考一下可以用在哪，所以這篇文章只是我跟著文件順一次htmx可實現的功能而已（廢文一篇...），看到這裡可以繞道了，避免浪費大家時間，交代一下我這禮拜就是瘋狂的切版，所以好像沒什麼技術文可以寫，也由於放了一天假（放假＝親子時間）加上禮拜五有小孩的事情要忙，實在沒有餘力再另外寫技術文，只好把盤點筆記拿出來交差，兌現對自己一週一篇的承諾，好讓自己心裡好過點（汗），未來某個時間點回頭望，看到這篇的標題，不用點進去看，就能回想起此刻剛起步嘗試從亂中找序有點慌但又有點興奮的樣子也是不錯XD，參考資料比較實用，我直接放在開頭的地方好了，對htmx有興趣的你，請直接轉台嘿，不用往下滑了喔！滑完搞壞奇檬子，我可是不負責的喔...ㄎㄎ

參考資料：htmx Examples

開始盤點吧

1. Click to edit: 原本是div內容，按下後改為表單，可修改內容
2. Bulk Update: 表單統計，例如to-do list，統計已做跟未做數量？
3. Click to load: 原本僅顯示第1頁資料，按下後依序增加後續頁面，按第一下增加第2頁資料
4. Delete Row: 顧名思義，按下後就會刪除該列
5. Edit Row: 按下edit按鈕後即可手動變更該列資料
6. Lazy loading: 在圖表完成顯示之前做一個loading的動態圖示，讓使用者暸解狀況
7. Inline validation: 簡單驗證，例如要求填寫email的表格，如果格式不對就會出現提醒字樣
8. Infinite scroll: 只要往下滑就會跑出新的頁面的數據
9. Active search: 實現即時搜尋關鍵字的功能，只要打字就會跟資料庫的數據連動
10. Progress Bar: 進度條，動畫顯示目前完成進度
11. Value select(Cascading selects): 下拉式選單的連動，例如demo中，在第一個選單選擇toyota之後，第二個選單會自動換成都是toyota的型號
12. Animations: 可利用css的transition做出動畫的效果
    • basic CSS animations:
      • color throb: 簡單的字體顏色變換，讓字像招牌霓虹燈一樣閃閃發亮
      • smooth progress bar: 利用length參數以basic CSS animations 做出smooth的效果
    • swap transition:
      • fade out on swap: 利用htmx-swapping class實現按下按鈕後按鈕漸漸消失
    • setting transition:
      • fade in on addition: 延續上一個，利用htmx-added跟htmx-setting讓按鈕按了之後漸漸消失再漸漸回來
    • request in flight animation: 可用htmx-request實現觸發後產生一個需求，在文件中的範例就是提交表單後會出現submitted字樣
    • using the htmx class-tools extension: 感覺是個很強大的東西，範例是手動把toggle時間設得比轉場時間長，以避免轉場被打斷造成的閃爍現象，這個我還沒有很懂，待研究
    • use the view transition API: 範例是實現按下按鈕後整個包括字樣按鈕全部換掉
13. File upload: 範例是實現可藉由ajax被submitted的上傳表單，且自帶進度條
14. Preserving file inputs after form errors: 對於使用者體驗有很大的幫助的功能
15. Dialogs -broswer: dialogs 可透過hx-prompt跟hx-confirm被觸發，透過使用者互動所觸發的作用會發出request，但只有在dialogs被接受時，request才會被發送

後話
還沒寫完，但先到這就好，因為後續的幾項直接看文件似乎比自己覆述還清楚，覺得應該留點時間去試試功能，不應該執著在這了。