working on slides

slides/datastar/README.md

@@ -9,3 +9,6 @@ To start the slide show:
 Edit the [slides.md](./slides.md) to see the changes.
 
 Learn more about Slidev at the [documentation](https://sli.dev/).
+
+
+<a href="https://www.freepik.com/free-ai-image/fantasy-style-galaxy-background_122465933.htm">Image by freepik</a>

slides/datastar/slides.md

@@ -3,14 +3,9 @@
 theme: default
 # random image from a curated Unsplash collection by Anthony
 # like them? see https://unsplash.com/collections/94734566/slidev
-background: https://cover.sli.dev
+background: assets/galaxy.jpg
 # some information about your slides (markdown enabled)
-title: Welcome to Slidev
+title: Datastar
-info: |
-  ## Slidev Starter Template
-  Presentation slides for developers.
-
-  Learn more at [Sli.dev](https://sli.dev)
 # apply UnoCSS classes to the current slide
 class: text-center
 # https://sli.dev/features/drawing
@@ -22,32 +17,124 @@ transition: slide-left
 mdc: true
 ---
 
-# Welcome to Slidev
+# To The Stars with Datastar
 
-Presentation slides for developers
+An interstellar journey
 
-<div @click="$slidev.nav.next" class="mt-12 py-1" hover:bg="white op-10">
-  Press Space for next page <carbon:arrow-right />
-</div>
 
-<div class="abs-br m-6 text-xl">
-  <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="slidev-icon-btn">
-    <carbon:edit />
-  </button>
-  <a href="https://github.com/slidevjs/slidev" target="_blank" class="slidev-icon-btn">
-    <carbon:logo-github />
-  </a>
-</div>
 
 <!--
 The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
 -->
 
 ---
+background: assets/galaxy.jpg
+---
+
+
+<h2 v-click class="absolute top-4 left-1/2 -translate-x-1/2">Drake Formular</h2>
+
+<div class="mt-20">
+
+$$ {1|2|3|4|5|6|7|all}
+\begin{aligned}
+N &= R_* \cdot f_p \cdot n_e \cdot f_l \cdot f_i \cdot f_c \cdot L \\
+R_* &= \text{rate of star formation} \\
+f_p &= \text{fraction of stars with planets} \\
+n_e &= \text{number of habitable planets per star} \\
+f_l &= \text{fraction where life develops} \\
+f_i &= \text{fraction where intelligent life evolves} \\
+f_c &= \text{fraction that develops detectable technology} \\
+L &= \text{length of time civilizations are detectable}
+\end{aligned}
+$$
+
+</div>
+
+---
+class: text-center
+---
+
+<h2 v-click class="absolute top-4 left-1/2 -translate-x-1/2">The "Drake" Formular of Webtechnologies</h2>
+
+<div class="mt-20">
+
+$$ {1|all}
+\begin{aligned}
+N_w &= D_b \cdot L_b \cdot F_b \cdot P_t \cdot F_f \cdot S_m \cdot C_{ss} \cdot C_l \cdot H_p  \\
+\\
+N_w &= \text{Total Possible Tech Stacks} \\
+D_b &= \text{databases (PostgreSQL, MongoDB, MySQL...)} \\
+L_b &= \text{backend languages (Javascript, Python, Go...)} \\
+F_b &= \text{backend frameworks (Express, Django, FastAPI...)} \\
+P_t &= \text{transport protocols (REST, GraphQL, gRPC...)} \\
+F_f &= \text{frontend frameworks (React, Vue, Svelte...)} \\
+S_m &= \text{state management (Redux, Zustand, Pinia...)} \\
+C_{ss} &= \text{CSS frameworks (Tailwind, UnoCSS, Bootstrap...)} \\
+C_l &= \text{component libraries (shadcn, MUI, Ant Design...)} \\
+H_p &= \text{hosting platforms (Vercel, AWS, VPS...)} \\
+\end{aligned}
+$$
+
+</div>
+---
+class: default
+---
+
+<h2 class="absolute top-4 left-1/2 -translate-x-1/2">The Space of Webtechnologies</h2>
+
+<div class="mt-20">
+
+$$ 
+\begin{aligned}
+N_w &= ( D_b ,  L_b , F_b , P_t , F_f , S_m , C_{ss} , C_l , H_p )  \\
+\\
+\end{aligned}
+$$
+
+- Every website or web application is one star in this space.
+- There are many combinations that work well. While others no so much.
+- We all plot our path in this space. And have our current home there.
+- There are clusters in this space, i.e. the React-Cluster, oder Angular or Vue.
+- My current home is in the L-O-B with Go and Vue vicinity.
+- There is an old Cluster called Hypermedia. Where all Webapps once lived. 
+- Hypermedia has developed a new bulge called HTMX.
+- Next to it is a new tiny blob, called Datastar.
+
+
+
+</div>
+
+---
+class: text-center
+---
+
+# My name is 
+# Thomas Hedeler
+
+# A holistic developer
+
+---
+class: default
 transition: fade-out
 ---
 
-# What is Slidev?
+# How did I find Datastar? What is my motivation?
+
+### Finding my combination of web technologies for a minimal viable web application.
+
+<div class="mt-20"/>
+
+- Part 1: The Database: SQLite
+- Part 2: The No-ORM ORM - A very simple Data Abstraction Layer.
+- Part 3: Developing a Web Server Application in Go.
+- Part 4: Datastar - lightweight framework for real-time collaborative web apps.
+- Part 5: Modern CSS.
+- Part 6: Web components.
+- Part 7: Simple Deployments with VPS, Nginx, certbot and a single binary file.
+---
+class: default
+---
 
 Slidev is a slides maker and presenter designed for developers, consist of the following features