+Here!
+ +--- +layout: two-cols +layoutClass: gap-16 +--- + +# Table of contents + +You can use the `Toc` component to generate a table of contents for your slides: + +```html +````md magic-move (four backticks) to enable the magic move. For example:
+
+````md magic-move {lines: true}
+```ts {*|2|*}
+// step 1
+const author = reactive({
+ name: 'John Doe',
+ books: [
+ 'Vue 2 - Advanced Guide',
+ 'Vue 3 - Basic Guide',
+ 'Vue 4 - The Mystery'
+ ]
+})
+```
+
+```ts {*|1-2|3-4|3-4,8}
+// step 2
+export default {
+ data() {
+ return {
+ author: {
+ name: 'John Doe',
+ books: [
+ 'Vue 2 - Advanced Guide',
+ 'Vue 3 - Basic Guide',
+ 'Vue 4 - The Mystery'
+ ]
+ }
+ }
+ }
+}
+```
+
+```ts
+// step 3
+export default {
+ data: () => ({
+ author: {
+ name: 'John Doe',
+ books: [
+ 'Vue 2 - Advanced Guide',
+ 'Vue 3 - Basic Guide',
+ 'Vue 4 - The Mystery'
+ ]
+ }
+ })
+}
+```
+
+Non-code blocks are ignored.
+
+```vue
+
+
+```
+````
+
+---
+
+# Components
+
+
+
+
+
+
+---
+class: px-20
+---
+
+# Themes
+
+Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter:
+
+
+
+You can use Vue components directly inside your slides.
+
+We have provided a few built-in components like `
+
+
+```html
+
+
+
+```yaml
+---
+theme: default
+---
+```
+
+```yaml
+---
+theme: seriph
+---
+```
+
+
+
+
+
+
+
+Read more about [How to use a theme](https://sli.dev/guide/theme-addon#use-theme) and
+check out the [Awesome Themes Gallery](https://sli.dev/resources/theme-gallery).
+
+---
+
+# Clicks Animations
+
+You can add `v-click` to elements to add a click animation.
+
+
+
+
+
+
+
+This shows up when you click the slide:
+
+```html
+
+
+This shows up when you click the slide.
+```
+
++ +
v-mark directive
+also allows you to add
+inline marks
+, powered by [Rough Notation](https://roughnotation.com/):
+
+```html
+inline markers
+```
+
+
+
+[Learn more](https://sli.dev/guide/animations#click-animation)
+
+
+---
+
+# HTTP - Protocol
+#
+
+POST https://api.example.com/api/users/search?page=2&limit=10 HTTP/1.1
+
+
+
+
+Host: api.example.com
+User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
+Accept: application/json
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
+Cookie: sessionId=abc123; theme=dark
+Content-Length: 89
+
+
+
+
+---
+
+# Reducing the Network to a Remote Procedure Call
+
+```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{
+body: data for the search request
+}
+Drake Formular
+ +--- + +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|1}
+\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}
+$$
+
+
+---
+
+# Diagrams
+
+You can create diagrams / graphs from textual descriptions, directly in your Markdown.
+
+
+
+```mermaid {scale: 0.5, alt: 'A simple sequence diagram'}
+sequenceDiagram
+ Alice->John: Hello John, how are you?
+ Note over Alice,John: A typical interaction
+```
+
+```mermaid {theme: 'neutral', scale: 0.8}
+graph TD
+B[Text] --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+```
+
+```mermaid
+mindmap
+ root((mindmap))
+ Origins
+ Long history
+ ::icon(fa fa-book)
+ Popularisation
+ British popular psychology author Tony Buzan
+ Research
+ On effectiveness
and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping + Tools + Pen and paper + Mermaid +``` + +```plantuml {scale: 0.7} +@startuml + +package "Some Group" { + HTTP - [First Component] + [Another Component] +} + +node "Other Groups" { + FTP - [Second Component] + [First Component] --> FTP +} + +cloud { + [Example 1] +} + +database "MySql" { + folder "This is my folder" { + [Folder 3] + } + frame "Foo" { + [Frame 4] + } +} + +[Another Component] --> [Example 1] +[Example 1] --> [Folder 3] +[Folder 3] --> [Frame 4] + +@enduml +``` + +
+
+Learn more: [Mermaid Diagrams](https://sli.dev/features/mermaid) and [PlantUML Diagrams](https://sli.dev/features/plantuml)
+---
+class: text-center
+---
+
+# The Journey
+
+and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping + Tools + Pen and paper + Mermaid +``` + +```plantuml {scale: 0.7} +@startuml + +package "Some Group" { + HTTP - [First Component] + [Another Component] +} + +node "Other Groups" { + FTP - [Second Component] + [First Component] --> FTP +} + +cloud { + [Example 1] +} + +database "MySql" { + folder "This is my folder" { + [Folder 3] + } + frame "Foo" { + [Frame 4] + } +} + +[Another Component] --> [Example 1] +[Example 1] --> [Folder 3] +[Folder 3] --> [Frame 4] + +@enduml +``` + +
+ +###### Directive Usage + +```md +
+```
+
++ +###### Component Usage + +```md +
+ Double-click me!
+
+
+
+###### Draggable Arrow
+
+```md
+POST https://api.example.com/api/users/search?page=2&limit=10 HTTP/1.1
+
+
+
+
+Host: api.example.com
+User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
+Accept: application/json
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
+Cookie: sessionId=abc123; theme=dark
+Content-Length: 89
+
+
+
+---
+class: default
+---
+# SSE - Server-Sent Events
+#
+
+{
+body: data for the search request
+}
+GET https://api.example.com/api/events/stream HTTP/1.1
+
+
+
+
+Host: api.example.com
+Accept: text/event-stream
+Cache-Control: no-cache
+Connection: keep-alive
+Response:
+
+
+
+
+HTTP/1.1 200 OK
+Content-Type: text/event-stream
+Cache-Control: no-cache
+Connection: keep-alive
+
+
+
+
+---
+layout: two-cols
+layoutClass: gap-16
+---
+# HTTP Communication
+#
+```mermaid { scale: 0.6}
+sequenceDiagram
+ participant Browser
+ participant Backend
+
+ Note over Browser,Backend: Traditional HTTP (Polling)
+ Browser->>Backend: GET /api/data
+ Backend-->>Browser: Response with data
+ Note over Browser: Wait...
+ Browser->>Backend: GET /api/data
+ Backend-->>Browser: Response with data
+ Note over Browser: Wait...
+ Browser->>Backend: GET /api/data
+ Backend-->>Browser: Response with data
+```
+::right::
+# SSE Communication
+#
+```mermaid { scale: 0.6}
+sequenceDiagram
+ participant Browser
+ participant Backend
+
+ Note over Browser,Backend: Server-Sent Events (SSE)
+ Browser->>Backend: GET /api/events (Accept: text/event-stream)
+ Backend-->>Browser: 200 OK (Connection open)
+ Note over Backend,Browser: Connection stays open
+ Backend-->>Browser: event: updatedata: {...}
+ Backend-->>Browser: event: updatedata: {...}
+ Backend-->>Browser: event: updatedata: {...}
+ Note over Browser,Backend: Real-time updates without new requests
+```
+---
+class: default
+---
+
+# Reducing the Network to a Remote Procedure Call
+
+```js
+{
+ const { data, error } = await to(fetch("https://api.example.com/api/board"));
+ if (error) {
+ // handle error
+ return;
+ }
+ // handle data
+}
+{
+ const { data, error } = await to(fetch("https://api.example.com/api/users/12"));
+ if (error) {
+ // handle error
+ return;
+ }
+ // handle data
+}
+
+// the function that "unwraps" the promise:
+export function to(promise: Promiseevent: message
+data: {"user": "Alice", "action": "joined"}
+
+event: update
+data: {"count": 42}
+
+data: Multi-line
+data: message example
+
+
-Here!
- ---- -layout: two-cols -layoutClass: gap-16 ---- - -# Table of contents - -You can use the `Toc` component to generate a table of contents for your slides: - -```html -````md magic-move (four backticks) to enable the magic move. For example:
-
-````md magic-move {lines: true}
-```ts {*|2|*}
-// step 1
-const author = reactive({
- name: 'John Doe',
- books: [
- 'Vue 2 - Advanced Guide',
- 'Vue 3 - Basic Guide',
- 'Vue 4 - The Mystery'
- ]
-})
-```
-
-```ts {*|1-2|3-4|3-4,8}
-// step 2
-export default {
- data() {
- return {
- author: {
- name: 'John Doe',
- books: [
- 'Vue 2 - Advanced Guide',
- 'Vue 3 - Basic Guide',
- 'Vue 4 - The Mystery'
- ]
- }
- }
- }
-}
-```
-
-```ts
-// step 3
-export default {
- data: () => ({
- author: {
- name: 'John Doe',
- books: [
- 'Vue 2 - Advanced Guide',
- 'Vue 3 - Basic Guide',
- 'Vue 4 - The Mystery'
- ]
- }
- })
-}
-```
-
-Non-code blocks are ignored.
-
-```vue
-
-
-```
-````
-
----
-
-# Components
-
-
-
-
-
-
----
-class: px-20
----
-
-# Themes
-
-Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter:
-
-
-
-You can use Vue components directly inside your slides.
-
-We have provided a few built-in components like `
-
-
-```html
-
-
-
-```yaml
----
-theme: default
----
-```
-
-```yaml
----
-theme: seriph
----
-```
-
-
-
-
-
-
-
-Read more about [How to use a theme](https://sli.dev/guide/theme-addon#use-theme) and
-check out the [Awesome Themes Gallery](https://sli.dev/resources/theme-gallery).
-
----
-
-# Clicks Animations
-
-You can add `v-click` to elements to add a click animation.
-
-
-
-
-
-
-
-This shows up when you click the slide:
-
-```html
-
-
-This shows up when you click the slide.
-```
-
-- -
v-mark directive
-also allows you to add
-inline marks
-, powered by [Rough Notation](https://roughnotation.com/):
-
-```html
-inline markers
-```
-
-
-
-[Learn more](https://sli.dev/guide/animations#click-animation)
-
-
----
-
-# HTTP - Protocol
-#
-
-POST https://api.example.com/api/users/search?page=2&limit=10 HTTP/1.1
-
-
-
-
-Host: api.example.com
-User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
-Accept: application/json
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
-Cookie: sessionId=abc123; theme=dark
-Content-Length: 89
-
-
-
-
----
-
-# Reducing the Network to a Remote Procedure Call
-
-```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{
-body: data for the search request
-}
-Drake Formular
- ---- - -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|1}
-\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}
-$$
-
-
----
-
-# Diagrams
-
-You can create diagrams / graphs from textual descriptions, directly in your Markdown.
-
-
-
-```mermaid {scale: 0.5, alt: 'A simple sequence diagram'}
-sequenceDiagram
- Alice->John: Hello John, how are you?
- Note over Alice,John: A typical interaction
-```
-
-```mermaid {theme: 'neutral', scale: 0.8}
-graph TD
-B[Text] --> C{Decision}
-C -->|One| D[Result 1]
-C -->|Two| E[Result 2]
-```
-
-```mermaid
-mindmap
- root((mindmap))
- Origins
- Long history
- ::icon(fa fa-book)
- Popularisation
- British popular psychology author Tony Buzan
- Research
- On effectiveness
and features - On Automatic creation - Uses - Creative techniques - Strategic planning - Argument mapping - Tools - Pen and paper - Mermaid -``` - -```plantuml {scale: 0.7} -@startuml - -package "Some Group" { - HTTP - [First Component] - [Another Component] -} - -node "Other Groups" { - FTP - [Second Component] - [First Component] --> FTP -} - -cloud { - [Example 1] -} - -database "MySql" { - folder "This is my folder" { - [Folder 3] - } - frame "Foo" { - [Frame 4] - } -} - -[Another Component] --> [Example 1] -[Example 1] --> [Folder 3] -[Folder 3] --> [Frame 4] - -@enduml -``` - -
-
-Learn more: [Mermaid Diagrams](https://sli.dev/features/mermaid) and [PlantUML Diagrams](https://sli.dev/features/plantuml)
----
-class: text-center
----
-
-# The Journey
-
-and features - On Automatic creation - Uses - Creative techniques - Strategic planning - Argument mapping - Tools - Pen and paper - Mermaid -``` - -```plantuml {scale: 0.7} -@startuml - -package "Some Group" { - HTTP - [First Component] - [Another Component] -} - -node "Other Groups" { - FTP - [Second Component] - [First Component] --> FTP -} - -cloud { - [Example 1] -} - -database "MySql" { - folder "This is my folder" { - [Folder 3] - } - frame "Foo" { - [Frame 4] - } -} - -[Another Component] --> [Example 1] -[Example 1] --> [Folder 3] -[Folder 3] --> [Frame 4] - -@enduml -``` - -
- -###### Directive Usage - -```md -
-```
-
-- -###### Component Usage - -```md -
- Double-click me!
-
-
-
-###### Draggable Arrow
-
-```md
-