Good First Issues

# Good First Issues

If you are looking to contribute, pick something here! You should create a small fully self-contained app that demonstrates the concept.

It should show the concept in as minimal way as possible. Do not add styling and other elements that do not help illustrate the concept (even if they make something look prettier). Keep the code concise and add comments to explain core concepts if you thing it would help a reader. But you do not need comments if something seems like it would be straightforward from reading the code.

If you need additional styling than pico css, use fh-frankenui. But only do that if you really need it to prevent from distracting from the core concept.

## HTMX

> Note: Check to see if an example is already in [the examples repo](https://github.com/AnswerDotAI/fasthtml-example/tree/main/htmx). If it is, just adapt and migrate it!

- [x] [Click To Edit](https://htmx.org/examples/click-to-edit/) Demonstrates inline editing of a data object
- [ ] @SSC-SDE [Bulk Update](https://htmx.org/examples/bulk-update/) Demonstrates bulk updating of multiple rows of data
- [x] @CarloLepelaars [Click To Load](https://htmx.org/examples/click-to-load/) Demonstrates clicking to load more rows in a table
- [x] @ihasidul [Delete Row](https://htmx.org/examples/delete-row/) Demonstrates row deletion in a table
- [ ] @WillToro94 [Edit Row](https://htmx.org/examples/edit-row/) Demonstrates how to edit rows in a table
- [ ] [Lazy Loading](https://htmx.org/examples/lazy-load/) Demonstrates how to lazy load content
- [x] [Inline Validation](https://htmx.org/examples/inline-validation/) Demonstrates how to do inline field validation
- [x] [Infinite Scroll](https://htmx.org/examples/infinite-scroll/) Demonstrates infinite scrolling of a page
- [x] [Active Search](https://htmx.org/examples/active-search/) Demonstrates the active search box pattern
- [x] [Progress Bar](https://htmx.org/examples/progress-bar/) Demonstrates a job-runner like progress bar
- [x] [Value Select](https://htmx.org/examples/value-select/) Demonstrates making the values of a select dependent on another select
- [ ] @CarloLepelaars [Animations](https://htmx.org/examples/animations/) Demonstrates various animation techniques
- [ ] File Upload Demonstrates how to upload a file via ajax with a progress bar
- [ ] [Preserving File Inputs after Form Errors](https://htmx.org/examples/file-upload-input/) Demonstrates how to preserve file inputs after form errors
- [ ] [Dialogs - UIKit](https://htmx.org/examples/modal-uikit/) Demonstrates modal dialogs using UIKit
- [ ] [Tabs (Using HATEOAS)](https://htmx.org/examples/tabs-hateoas/) Demonstrates how to display and select tabs using HATEOAS principles
- [ ] [Tabs (Using JavaScript)](https://htmx.org/examples/tabs-javascript/) Demonstrates how to display and select tabs using JavaScript
- [x] @adnaaaen [Keyboard Shortcuts](https://htmx.org/examples/keyboard-shortcuts/) Demonstrates how to create keyboard shortcuts for htmx enabled elements
- [ ] [Drag & Drop / Sortable](https://htmx.org/examples/sortable/) Demonstrates how to use htmx with the Sortable.js plugin to implement drag-and-drop reordering
- [ ] @audreyfeldroy [Updating Other Content](https://htmx.org/examples/update-other-content/) Demonstrates how to update content beyond just the target elements
- [ ] [Confirm](https://htmx.org/examples/confirm/) Demonstrates how to implement a custom confirmation dialog with htmx
- [ ] [Web Components](https://htmx.org/examples/web-components/) Demonstrates how to integrate htmx with web components and shadow DOM

## Other

- [ ] Cards
- [ ] @bojasabara Carousels
- [ ] Contact Form
- [ ] Hamburger menu
- [ ] Alternating color block sections
- [ ] Hover Effects
- [ ] Surreal functions in [02_extend](https://github.com/AnswerDotAI/fasthtml/blob/main/nbs/api/02_xtend.ipynb) or examples in examples(https://github.com/AnswerDotAI/fasthtml-example/tree/main/htmx)

首先检查未勾选的 HTMX 条目和链接的示例仓库，以确认是否已经存在示例。选择一个概念，然后创建一个不包含不必要样式的最小化、自包含 FastHTML 示例；当该示例演示所选概念，并且可以将对应的检查清单项标记为完成时，即表示完成。

由索引模型根据 Issue 内容生成。