Skip to content
This repository has been archived by the owner on Oct 30, 2023. It is now read-only.

Commit

Permalink
update the readme with rationale and introduction.
Browse files Browse the repository at this point in the history
  • Loading branch information
wmealing committed Oct 29, 2023
1 parent d40aada commit 38223b9
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 16 deletions.
28 changes: 26 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -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]
Expand Down Expand Up @@ -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 <a href="https://matt.sh/htmx-is-a-erlang"> HTMX being an erlang </a>, 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 [&#x219F;](#table-of-contents)

```shell
Expand Down Expand Up @@ -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.

Expand Down
37 changes: 23 additions & 14 deletions priv/chapter1.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,34 +43,43 @@ <h1 class="text-black-600 text-5xl font-bold">
</h1>
<b>Setting up your HTML.</b>

<div class="py-5">
<div>

<p class="py-5">
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 &lt;head&gt; &lt;/head&gt; tags
<p>
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 &lt;head&gt; &lt;/head&gt; tags
of your HTML document.
</p>

<p class="py-5">
At the time of writing the most current is:
<p>
Here is the method of including the latest version at the time of writing.
</p>

<p class="py-5">
&lt;script src=&quot;https://unpkg.com/[email protected]&quot;&gt;&lt;/script&gt;
</p>

<p class="py-5">
Without this the extra attributes on html markup wont do anything, so best to include
it if you want the magic to happen.
<p>
Adding the htmx library creates actions based on the specific attributes of HTML tags,
its pretty neat.
</p>

<b>The simplest example.</b>

<p class="py-5">
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:
<p>
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.
<p>

<p>
In this minimal example, we will demonstrate how to use LFE/HTMX with the humble &lt;button&gt; element.

<p>
<p>
In the 'common' use scenario, button clicks trigger a javascript event.

HTMX reduces this complexity to elements on any html element. Check this out:
</p>

<br>
Expand Down

0 comments on commit 38223b9

Please sign in to comment.