From 9080196f6b3e20e002cb95818aeccb1d57e00401 Mon Sep 17 00:00:00 2001
From: thomashamburg <thomas@hedeler.com>
Date: Thu, 9 Oct 2025 21:53:01 +0200
Subject: [PATCH] drake formular

---
 slides/datastar/slides.md | 136 +++++++++++++++++---------------------
 1 file changed, 62 insertions(+), 74 deletions(-)

diff --git a/slides/datastar/slides.md b/slides/datastar/slides.md
index c608bf5..b3657d1 100644
--- a/slides/datastar/slides.md
+++ b/slides/datastar/slides.md
@@ -366,86 +366,53 @@ also allows you to add
 [Learn more](https://sli.dev/guide/animations#click-animation)
 
 </div>
+---
+
+# HTTP - Protocol
+#  
+
+<div><span v-mark.circle.purple="5">POST</span> https://api.example.com<span v-mark.circle.orange="1">/api/users/search</span>?<span v-mark.circle.red="2">page=2&limit=10</span> HTTP/1.1</div>
+<div v-mark.box.blue="3">
+<div>Host: api.example.com</div>
+<div>User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)</div>
+<div>Accept: application/json</div>
+<div>Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9</div>
+<div>Cookie: sessionId=abc123; theme=dark</div>
+<div>Content-Length: 89</div>
+</div>
+
+<div mt-4 ></div>
+<div  v-mark.box.green="4">
+<div>{</div>
+<div>body: data for the search request</div>
+<div>}</div>
+</div>
+
 
 ---
 
-# Motions
+# Reducing the Network to a Remote Procedure Call
 
-Motion animations are powered by [@vueuse/motion](https://motion.vueuse.org/), triggered by `v-motion` directive.
-
-```html
-<div
-  v-motion
-  :initial="{ x: -80 }"
-  :enter="{ x: 0 }"
-  :click-3="{ x: 80 }"
-  :leave="{ x: 1000 }"
->
-  Slidev
-</div>
-```
-
-<div class="w-60 relative">
-  <div class="relative w-40 h-40">
-    <img
-      v-motion
-      :initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }"
-      :enter="final"
-      class="absolute inset-0"
-      src="https://sli.dev/logo-square.png"
-      alt=""
-    />
-    <img
-      v-motion
-      :initial="{ y: 500, x: -100, scale: 2 }"
-      :enter="final"
-      class="absolute inset-0"
-      src="https://sli.dev/logo-circle.png"
-      alt=""
-    />
-    <img
-      v-motion
-      :initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
-      :enter="final"
-      class="absolute inset-0"
-      src="https://sli.dev/logo-triangle.png"
-      alt=""
-    />
-  </div>
-
-  <div
-    class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1"
-    v-motion
-    :initial="{ x: -80, opacity: 0}"
-    :enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }">
-    Slidev
-  </div>
-</div>
-
-<!-- vue script setup scripts can be directly used in markdown, and will only affects current page -->
-<script setup lang="ts">
-const final = {
-  x: 0,
-  y: 0,
-  rotate: 0,
-  scale: 1,
-  transition: {
-    type: 'spring',
-    damping: 10,
-    stiffness: 20,
-    mass: 2
-  }
+```js
+{
+    const { data, error } = await to(fetch("https://api.example.com/api/users/11"));
+    if (error) {
+      // handle error
+      return;
+    }
+    // handle data
 }
-</script>
 
-<div
-  v-motion
-  :initial="{ x:35, y: 30, opacity: 0}"
-  :enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }">
 
-[Learn more](https://sli.dev/guide/animations.html#motion)
+// the function that "unwraps" the promise:
+export function to(promise: Promise<Response>) {
+  return promise
+    .then((response) => response.json())
+    .then((data) => ({ data, error: null }))
+    .catch((error) => ({ data: null, error }));
+}
 
-</div>
+```
 
 ---
 
@@ -483,7 +450,28 @@ L &= \text{length of time civilizations are detectable}
 \end{aligned}
 $$
 
-[Learn more](https://sli.dev/features/latex)
+<h2 v-click class="absolute -top-4 left-1/2 -translate-x-1/2">Drake Formular</h2>
+
+---
+
+<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
 ---
@@ -495,7 +483,7 @@ N_w &= D_b \cdot L_b \cdot F_b \cdot P_t \cdot F_f \cdot S_m \cdot C_{ss} \cdot
 \\
 N_w &= \text{Total Possible Tech Stacks} \\
 D_b &= \text{databases (PostgreSQL, MongoDB, MySQL...)} \\
-L_b &= \text{backend languages (Node.js, Python, Go...)} \\
+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...)} \\