drake formular
This commit is contained in:
thomashamburg
parent
ec47b30e3d
commit
9080196f6b
@ -366,87 +366,54 @@ also allows you to add
|
|||||||
[Learn more](https://sli.dev/guide/animations#click-animation)
|
[Learn more](https://sli.dev/guide/animations#click-animation)
|
||||||
|
|
||||||
</div>
|
</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.
|
```js
|
||||||
|
{
|
||||||
|
const { data, error } = await to(fetch("https://api.example.com/api/users/11"));
|
||||||
|
if (error) {
|
||||||
|
// handle error
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// handle data
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 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 }));
|
||||||
|
}
|
||||||
|
|
||||||
```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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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)
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# LaTeX
|
# LaTeX
|
||||||
@ -483,7 +450,28 @@ L &= \text{length of time civilizations are detectable}
|
|||||||
\end{aligned}
|
\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
|
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} \\
|
N_w &= \text{Total Possible Tech Stacks} \\
|
||||||
D_b &= \text{databases (PostgreSQL, MongoDB, MySQL...)} \\
|
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...)} \\
|
F_b &= \text{backend frameworks (Express, Django, FastAPI...)} \\
|
||||||
P_t &= \text{transport protocols (REST, GraphQL, gRPC...)} \\
|
P_t &= \text{transport protocols (REST, GraphQL, gRPC...)} \\
|
||||||
F_f &= \text{frontend frameworks (React, Vue, Svelte...)} \\
|
F_f &= \text{frontend frameworks (React, Vue, Svelte...)} \\
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user