diff --git a/slides/datastar/README.md b/slides/datastar/README.md index fd655d1..6502702 100644 --- a/slides/datastar/README.md +++ b/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/). + + +Image by freepik \ No newline at end of file diff --git a/slides/datastar/assets/galaxy.jpg b/slides/datastar/assets/galaxy.jpg new file mode 100644 index 0000000..0706395 Binary files /dev/null and b/slides/datastar/assets/galaxy.jpg differ diff --git a/slides/datastar/slides.md b/slides/datastar/slides.md index b3657d1..21c6662 100644 --- a/slides/datastar/slides.md +++ b/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 -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 -
- Press Space for next page -
-
- - - - -
--- +background: assets/galaxy.jpg +--- + + +

Drake Formular

+ +
+ +$$ {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} +$$ + +
+ +--- +class: text-center +--- + +

The "Drake" Formular of Webtechnologies

+ +
+ +$$ {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} +$$ + +
+--- +class: default +--- + +

The Space of Webtechnologies

+ +
+ +$$ +\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. + + + +
+ +--- +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. + +
+ +- 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