drake formular
This commit is contained in:
thomashamburg
parent
ec47b30e3d
commit
9080196f6b
@ -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...)} \\
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user