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)

Comienza revisando las entradas de HTMX que no están marcadas y el repositorio de ejemplos enlazado para confirmar si ya existe un ejemplo. Elige un concepto y, a continuación, crea un ejemplo mínimo y autocontenido de FastHTML sin estilos innecesarios; la tarea estará completada cuando el ejemplo demuestre el concepto seleccionado y se pueda marcar como completado el elemento correspondiente de la lista de verificación.

Escrito por el modelo de indexación a partir del texto del issue.