slides, slides, slides

slides/datastar/slides.md

@@ -111,8 +111,60 @@ class: text-center
 
 # My name is
 # Thomas Hedeler
+## 
+
+<v-click>
+<p class="mt-20">
+In the spirit of the late and great Douglas Adams, I call myself
+</p>
+
+<h1 class="mt-20">
+A holistic developer
+</h1>
+</v-click>
+
+
+---
+class: default
+---
+
+# My Motivation: Build a Minimal Viable Web App
+## 
+
+<v-click>
+<p>
+It is not a compromise — this is a fully functioning web application, including database, application code, and deployment, implemented with the minimal number of lines of code.
+</p>
+</v-click>
+
+<v-click>
+<p>
+To embrace the <strong>Creativity Paradox</strong> and stay within our <strong>Complexity Budget</strong>, we apply a few constraints:
+
+- Use as few third-party libraries as possible
+- Avoid a front-end build step (no npm)
+- Follow the principle of least power: “Favor simple, declarative solutions over complex code.”
+</p>
+</v-click>
+
+<v-click>
+<p>
+The benefits are clear:
+
+- Less code → faster performance and fewer bugs
+- Reduced technical debt → easier long-term maintenance
+- Lower cognitive load → simpler to understand and extend
+- Fewer dependencies → more robust and secure
+- Leverage browser specifications and built-in capabilities
+</p>
+</v-click>
+
+<v-click>
+<p>
+In short: minimal code, maximal clarity, and a fully functional web app.
+</p>
+</v-click>
 
-# A holistic developer
 
 ---
 class: default
@@ -445,42 +497,39 @@ class: default
 | Example   | `{{.Title}}` → “Article” | `<a href="{{.Links.Edit}}">Edit</a>`       |
 
 ---
-layout: center
+class: default
-class: text-center
 ---
 
 # Putting Everything Together
+## 
 
----
+<v-click>
-clicks: 6
+<p>
----
+At the core, the <strong>backend holds the application state</strong> — typically in a database.  
-
+All decisions about data, relationships, and transitions originate here.
-# Smooth paragraph → circle flow
-
-<div>
-  <p v-click="1">
-    This is the first paragraph with an
-    <span v-mark="{ at: 2, type: 'circle', color: '#ff7b72' }">
-      important phrase
-    </span>.
 </p>
+</v-click>
 
-  <p v-click="3">
+<v-click>
-    Here comes the second paragraph with
+<p>
-    <span v-mark="{ at: 4, type: 'circle', color: '#4cb0ff' }">
+The backend generates pages by combining <strong>data (state)</strong>, <strong>presentation</strong>, and <strong>transitions (actions)</strong> using a templating engine.  
-      key words
+This approach follows <strong>HATEOAS</strong>, a hypermedia-driven design where each page contains links and instructions describing valid next steps.
-    </span>
-    to highlight.
 </p>
+</v-click>
 
-  <p v-click="5">
+<v-click>
-    Finally, the third paragraph shows and then
+<p>
-    <span v-mark="{ at: 6, type: 'circle', color: '#6ce5b6' }">
+The backend can also actively drive the frontend using <strong>Server-Sent Events (SSE)</strong>.  
-      the spotlight
+SSE allows updates to be pushed to the client in real-time, keeping the application synchronized without full page reloads.
-    </span>
-    appears.
 </p>
-</div>
+</v-click>
+
+<v-click>
+<p>
+On the frontend, <strong>Datastar</strong> enables fine-grained interactivity and incremental page updates.  
+Instead of replacing entire pages like simple hypermedia, Datastar updates only the elements affected by the state changes, keeping the interface responsive and dynamic.
+</p>
+</v-click>
 
 
 ---
@@ -525,6 +574,7 @@ el.dataset.whatEver = "you've got it!";
 
 ---
 class: default
+clicks: 5
 ---
 
 # Datastar and `data-*` Attributes
@@ -553,7 +603,7 @@ Each expression describes what should happen when data or events change, turning
 
 <v-click>
 <p>
-By keeping logic inside the elements they affect, Datastar achieves <strong>locality of behavior</strong> —  
+By keeping logic inside the elements, Datastar achieves <strong>locality of behavior</strong> —  
 where markup, data, and interactivity remain close together.  
 This makes components easier to read, reason about, and maintain.
 </p>