diff --git a/README.md b/README.md index 741a28b..b201c9f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Untitled Project - The Cyber Laser Bison Story. +# Untitled Project - The Tank Bison with Lazer Eyes Story. [![Build Status][gh-actions-badge]][gh-actions] [![LFE Versions][lfe badge]][lfe] @@ -31,6 +31,30 @@ unstopable power of using Lisp Flavored Erlang on the backend and HTMX on the fr Each micro lesson provides both backend and frontend code for the reader to observe and interact with while not having to setup the full stack in a safe and controlled environment. +## Rationale [↟](#table-of-contents) + + +### Why HTMX ? +Matt.sh talks about HTMX being an erlang , While there is +more to erlang than self-upgrading its still very cool. + +HTMX puts development of Single Page Applications (SPA, apparently web pages are apps). It appears to do +most of the common webappy stuff with markup instead of writing oodles of javascript. + + +### Why Lisp Flavored Erlang + +Lisp Flavored Erlang has tickled my fancy for a while. I haven't had enough time to really dive into +the feature and use it in production. I have written common lisp and erlang for some time now, deploying +both into production. + +Erlang is the T-800 terminator of programming languages, when its hit or crashes it just gets right back up. Lisp +Flavored Erlang provides alien technology to Erlang raising the bar once again. + +This verion of TBWLE (Untitled Project) intends to demonstrate HTMX and LFE, I will continue to feed my learning +back into this project as I learn new skills. + + ## Build [↟](#table-of-contents) ```shell @@ -66,7 +90,7 @@ TBD ☐ Add github action to create container - ☐ Update instructions on how to run container. +☐ Update instructions on how to run container. ☐ Create a playground which serves up simple editable html page and a lfe handler. diff --git a/priv/chapter1.html b/priv/chapter1.html index a5046b3..d412564 100644 --- a/priv/chapter1.html +++ b/priv/chapter1.html @@ -43,34 +43,43 @@

Setting up your HTML. -
+
-

- In the introduction, I talked about not having to write javascript. Which is mostly true, - we still however need to include some javascript to supercharge our standard elements. - The first step is to include the HTMX script inside the <head> </head> tags +

+ In the introduction, we talked about not having to write javascript. Which is mostly true, + we still however need to include the HTMX javascript library to supercharge our standard + elements. The first step is to include the HTMX script inside the <head> </head> tags of your HTML document.

-

- At the time of writing the most current is: +

+ Here is the method of including the latest version at the time of writing.

<script src="https://unpkg.com/htmx.org@1.9.6"></script>

-

- Without this the extra attributes on html markup wont do anything, so best to include - it if you want the magic to happen. +

+ Adding the htmx library creates actions based on the specific attributes of HTML tags, + its pretty neat.

The simplest example. -

- Most time, button clicks trigger a javascript event, this might be a server query - or a modification of the page. HTMX reduces this complexity to elements on any html - element. Check this out: +

+ When working in anything new, starting with the simplest (or smallest) example allows + you to create and test without introducing complexity and errors into your environment. +

+ +

+ In this minimal example, we will demonstrate how to use LFE/HTMX with the humble <button> element. + +

+

+ In the 'common' use scenario, button clicks trigger a javascript event. + + HTMX reduces this complexity to elements on any html element. Check this out: