working on slides
This commit is contained in:
thomashamburg
parent
cd5d269483
commit
e9bd14c96d
@ -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>
|
||||
BIN
slides/datastar/assets/galaxy.jpg
Normal file
BIN
slides/datastar/assets/galaxy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
@ -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
|
||||
info: |
|
||||
## Slidev Starter Template
|
||||
Presentation slides for developers.
|
||||
|
||||
Learn more at [Sli.dev](https://sli.dev)
|
||||
title: Datastar
|
||||
# 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
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user