From 517caa741f959a1a458db004486856d143d6c22e Mon Sep 17 00:00:00 2001
From: Sean Ryan <92741333+epicmine99@users.noreply.github.com>
Date: Sun, 17 Mar 2024 16:37:29 -0400
Subject: [PATCH 1/2] Create htmx.md
---
Topics/Tech_Stacks/htmx.md | 83 ++++++++++++++++++++++++++++++++++++++
1 file changed, 83 insertions(+)
create mode 100644 Topics/Tech_Stacks/htmx.md
diff --git a/Topics/Tech_Stacks/htmx.md b/Topics/Tech_Stacks/htmx.md
new file mode 100644
index 000000000..04c50a054
--- /dev/null
+++ b/Topics/Tech_Stacks/htmx.md
@@ -0,0 +1,83 @@
+# HTMX Documentation
+## Introduction
+HTMX is a modern web development tool designed to enhance HTML with dynamic capabilities
+often associated with complex JavaScript frameworks.
+
+HTMX extends the core idea of HTML, trying to fully ultilize the power of HTML as a hypertext to achieve similar results as javascript frameworks without deviating
+as much from the original web schematics. This leads to efficent and light weight websites built to last a long time but at the cost of the more complex and advanced javascript features.
+HTMX allows developers to create rich and interactive web applications by writing HTML attributes for AJAX requests, CSS transitions, WebSockets,
+and Server Sent Events. This simplicity and power of HTMX opens up a new world for web development.
+
+## Getting Started
+To start using HTMX, include its library in your project by adding a script tag to your HTML file.
+This can be done in a couple different ways:
+
+
+effortlessly by referencing HTMX from a Content Delivery Network (CDN).
+For example, to include HTMX, you could use the script below to get started (provided by the offical HTMX documentation):
+
+### Content Delivery Network (CDN)
+The first way to include HTMX is by referencing HTMX from a Content Delivery Network (CDN). This can be done by including the script below (Taken from the offical HTMX documentation):
+
+```html
+
+```
+
+### Copying HTMX into Directory
+You could also copy the HTMX file into your project directory. You can download the `htmx.min.js` file from [unpkg.com](https://unpkg.com/htmx.org@1.9.11/dist/htmx.min.js) then include it with this script tag:
+
+```html
+
+```
+
+### npm
+if you are using an npm based build system, you can use the following command to add it to your project:
+
+`npm install htmx.org`
+
+
+## AJAX Requests
+HTMX revolutionizes the way AJAX requests are handled directly from HTML,
+eliminating the need for writing JavaScript code for these tasks.
+You can easily make GET, POST, and other types of HTTP requests by adding specific HTMX attributes to your HTML elements.
+
+| Attribute | Description |
+|-----------------|-----------------|
+| hx-get | a `GET` request to the URL input |
+| hx-post | a `POST` request to the URL input |
+| hx-put | a `PUT` request to the URL input |
+| hx-patch | a `PATCH` request to the URL input |
+| hx-delete | a `DELETE` request to the URL input |
+
+
+Here is a simple example of using HTMX to make a `GET` request using the `hx-get` attribute:
+```html
+
+
Old not cool news content...
+```
+This button, when clicked, loads the latest news into #news-section by completely replacing its contents.
+
+
+Here is another example of how to send data payloads using `POST` requests using the `hx-post` attribute:
+
+```html
+
+
+```
+When the form is submitted, HTMX sends a POST request to `/api/users/create` with the form data, and the server's response is displayed in `#result`.
+
+## References
+
+Below is a list of sources used for information in this getting started guide. I encourage you to explore these sources futher as they have more indepth examples and more use cases
+
+The official HTMX documentation provides comprehensive guides and examples.
+- HTMX official documentation: https://htmx.org/documentation/
+- Getting Started With HTMX: A Comprehensive Guide for Beginners: https://7.dev/blog/getting-started-with-htmx-a-comprehensive-guide-for-beginners
+- Digging Into HTMX: Examples and How to Use It on the DEV Community website: https://dev.to/digging-into-htmx-examples-and-how-to-use-it
+- Exploring HTMX: building dynamic web apps without JavaScript at OpenReplay blog: https://blog.openreplay.com/exploring-htmx-building-dynamic-web-apps-without-javascript
From 541a9ecc93807825f8ad81807f9728ee49cc6ddd Mon Sep 17 00:00:00 2001
From: Sean Ryan <92741333+epicmine99@users.noreply.github.com>
Date: Sun, 17 Mar 2024 17:43:29 -0400
Subject: [PATCH 2/2] Update htmx.md as per feedback
Here I added changes to reflect the feedback Jacob provided to me
---
Topics/Tech_Stacks/htmx.md | 49 +++++++++++++++++++++++++++++++++++++-
1 file changed, 48 insertions(+), 1 deletion(-)
diff --git a/Topics/Tech_Stacks/htmx.md b/Topics/Tech_Stacks/htmx.md
index 04c50a054..50211aa67 100644
--- a/Topics/Tech_Stacks/htmx.md
+++ b/Topics/Tech_Stacks/htmx.md
@@ -8,6 +8,15 @@ as much from the original web schematics. This leads to efficent and light weigh
HTMX allows developers to create rich and interactive web applications by writing HTML attributes for AJAX requests, CSS transitions, WebSockets,
and Server Sent Events. This simplicity and power of HTMX opens up a new world for web development.
+## Why Use HTMX?
+HTMX shines in scenarios where the goal is to enhance static web pages with dynamic content without the overhead of a full JavaScript framework. It's particularly useful for:
+
+- Rapid prototyping of interactive web applications.
+- Enhancing server-rendered pages with dynamic content updates.
+- Simplifying page interactions without needing to write complex JavaScript.
+
+while JavaScript frameworks like React, Vue, or Angular offer more advanced client-side solutions, they require a heavier development approach and more resources. HTMX lands in the middle, offering dynamic capabilities with less overhead making it an ideal when simplicity and speed are priorities.
+
## Getting Started
To start using HTMX, include its library in your project by adding a script tag to your HTML file.
This can be done in a couple different ways:
@@ -49,7 +58,7 @@ You can easily make GET, POST, and other types of HTTP requests by adding specif
| hx-patch | a `PATCH` request to the URL input |
| hx-delete | a `DELETE` request to the URL input |
-
+### Basic Examples
Here is a simple example of using HTMX to make a `GET` request using the `hx-get` attribute:
```html