From d4a43ab5f9c757332ef636559ad4561dbc5aad05 Mon Sep 17 00:00:00 2001 From: Michele Caci Date: Thu, 13 Jun 2024 17:54:17 +0200 Subject: [PATCH] Cleanup and first milestone --- README.md | 10 +- components/Counter.vue | 37 --- slides.md | 639 +++-------------------------------------- snippets/external.ts | 12 - 4 files changed, 40 insertions(+), 658 deletions(-) delete mode 100644 components/Counter.vue delete mode 100644 snippets/external.ts diff --git a/README.md b/README.md index 1622a1f..17f880f 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ -# Welcome to [Slidev](https://github.com/slidevjs/slidev)! +# Step up your Go game with these few simple gems + +These are the slides for the lightning talk to give at gceu2024b. To start the slide show: - `npm install` - `npm run dev` -- visit http://localhost:3030 - -Edit the [slides.md](./slides.md) to see the changes. +- open http://localhost:3030 if not done automatically -Learn more about Slidev on [documentations](https://sli.dev/). +The slides have built with [Slidev](https://github.com/slidevjs/slidev). \ No newline at end of file diff --git a/components/Counter.vue b/components/Counter.vue deleted file mode 100644 index eaa6a79..0000000 --- a/components/Counter.vue +++ /dev/null @@ -1,37 +0,0 @@ - - - diff --git a/slides.md b/slides.md index dacb3aa..e539f89 100644 --- a/slides.md +++ b/slides.md @@ -41,10 +41,10 @@ Bio: I'm Michele, Italian from Sicily, I am a passionate Gopher since 2018 and b --> --- +transition: fade-out layout: image-right image: /images/Gophers1.jpeg -backgroundSize: 70% -transition: fade-out +backgroundSize: 80% --- # Leveling up our Go game @@ -53,11 +53,22 @@ Go is a simple language -Our Go game is strong and we know how to write simple and effective Go. +We know how to write simple and effective Go. + +And leveraging the simplicity of Go is the key to our Go skills. + + + +--- +transition: fade-out +layout: fact +--- + + But over the time Go has evolved. -And the **standard library** has tools from old and new that can level up our Go game. +The **standard library** has tools from old and new that can level up our Go game. Let's make our Go game even stronger with these treasures from the standard library. @@ -107,7 +118,6 @@ if err != nil { ```` - How about transferring the message to multiple destinations? @@ -236,19 +246,34 @@ Since [v1.21](https://tip.golang.org/doc/go1.21#library) we can use the maps, sl --- transition: fade-out +layout: fact --- -# My message +## Leveraging the simplicity of Go makes our applications simpler -The standard library has some useful gems that can improve our Go game. + +And this is how we can improve our Go game. + -Any time you can check the [standard library](https://pkg.go.dev/std) to find the packages. +--- +transition: fade-out +layout: image-right +image: /images/Gophers10.jpeg +backgroundSize: 80% +--- + +# Conclusions + +Strive for the same simplicity that the Go strives for + +The standard library has evolved as our code does. -And by improved I mean leveraging the simplicity of Go to make our applications even more simpler. +Take the time to check the [standard library](https://pkg.go.dev/std) to find the content of its packages. + +Take from it what you need to make your code even simpler. --- layout: lblue-end - transition: fade-out --- @@ -275,597 +300,3 @@ transition: fade-out --- transition: fade-out --- - -# What is Slidev? - -Slidev is a slides maker and presenter designed for developers, consist of the following features - -- ๐Ÿ“ **Text-based** - focus on the content with Markdown, and then style them later -- ๐ŸŽจ **Themable** - theme can be shared and used with npm packages -- ๐Ÿง‘โ€๐Ÿ’ป **Developer Friendly** - code highlighting, live coding with autocompletion -- ๐Ÿคน **Interactive** - embedding Vue components to enhance your expressions -- ๐ŸŽฅ **Recording** - built-in recording and camera view -- ๐Ÿ“ค **Portable** - export into PDF, PPTX, PNGs, or even a hostable SPA -- ๐Ÿ›  **Hackable** - anything possible on a webpage - -
-
- -Read more about [Why Slidev?](https://sli.dev/guide/why) - -This is a [red text]{style="color:red"} :inline-component{prop="value"} - - - - - - - ---- -transition: slide-up -level: 2 ---- - -# Navigation - -Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/navigation.html) - -## Keyboard Shortcuts - -| | | -| --- | --- | -| right / space| next animation or slide | -| left / shiftspace | previous animation or slide | -| up | previous slide | -| down | next slide | - - - -

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 - -``` - -The title will be inferred from your slide content, or you can override it with `title` and `level` in your frontmatter. - -::right:: - - - ---- -layout: image-right -image: https://cover.sli.dev ---- - -# Code - -Use code snippets and get the highlighting directly, and even types hover![^1] - -```ts {all|5|7|7-8|10|all} twoslash -// TwoSlash enables TypeScript hover information -// and errors in markdown code blocks -// More at https://shiki.style/packages/twoslash - -import { computed, ref } from 'vue' - -const count = ref(0) -const doubled = computed(() => count.value * 2) - -doubled.value = 2 -``` - - - - -<<< @/snippets/external.ts#snippet - - -[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting) - - - - - - ---- -level: 2 ---- - -# Shiki Magic Move - -Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev supports animations across multiple code snippets. - -Add multiple code blocks and wrap them with ````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 - -
-
- -You can use Vue components directly inside your slides. - -We have provided a few built-in components like `` and `` that you can use directly. And adding your custom components is also super easy. - -```html - -``` - - - - -Check out [the guides](https://sli.dev/builtin/components.html) for more. - -
-
- -```html - -``` - - - -
-
- - - ---- -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: - -
- -```yaml ---- -theme: default ---- -``` - -```yaml ---- -theme: seriph ---- -``` - - - - - -
- -Read more about [How to use a theme](https://sli.dev/themes/use.html) and -check out the [Awesome Themes Gallery](https://sli.dev/themes/gallery.html). - ---- - -# 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.
-``` - -
- -
- - - -The 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-animations) - -
- ---- - -# Motions - -Motion animations are powered by [@vueuse/motion](https://motion.vueuse.org/), triggered by `v-motion` directive. - -```html -
- Slidev -
-``` - -
-
- - - -
- -
- Slidev -
-
- - - - -
- -[Learn More](https://sli.dev/guide/animations.html#motion) - -
- ---- - -# LaTeX - -LaTeX is supported out-of-box powered by [KaTeX](https://katex.org/). - -
- -Inline $\sqrt{3x-1}+(1+x)^2$ - -Block -$$ {1|3|all} -\begin{array}{c} - -\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & -= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ - -\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ - -\nabla \cdot \vec{\mathbf{B}} & = 0 - -\end{array} -$$ - -
- -[Learn more](https://sli.dev/guide/syntax#latex) - ---- - -# 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](https://sli.dev/guide/syntax.html#diagrams) - ---- -foo: bar -dragPos: - square: 691,32,167,_,-16 ---- - -# Draggable Elements - -Double-click on the draggable elements to edit their positions. - -
- -###### Directive Usage - -```md - -``` - -
- -###### Component Usage - -```md - - - Use the `v-drag` component to have a draggable container! - -``` - - -
- Double-click me! -
- - - - -###### Draggable Arrow - -```md - -``` - - - ---- -src: ./pages/multiple-entries.md -hide: false ---- - ---- - -# Monaco Editor - -Slidev provides built-in Monaco Editor support. - -Add `{monaco}` to the code block to turn it into an editor: - -```ts {monaco} -import { ref } from 'vue' -import { emptyArray } from './external' - -const arr = ref(emptyArray(10)) -``` - -Use `{monaco-run}` to create an editor that can execute the code directly in the slide: - -```ts {monaco-run} -import { version } from 'vue' -import { emptyArray, sayHello } from './external' - -sayHello() -console.log(`vue ${version}`) -console.log(emptyArray(10).reduce(fib => [...fib, fib.at(-1)! + fib.at(-2)!], [1, 1])) -``` - ---- -layout: center -class: text-center ---- - -# Learn More - -[Documentations](https://sli.dev) ยท [GitHub](https://github.com/slidevjs/slidev) ยท [Showcases](https://sli.dev/showcases.html) diff --git a/snippets/external.ts b/snippets/external.ts deleted file mode 100644 index 40c109b..0000000 --- a/snippets/external.ts +++ /dev/null @@ -1,12 +0,0 @@ -/* eslint-disable no-console */ - -// #region snippet -// Inside ./snippets/external.ts -export function emptyArray(length: number) { - return Array.from({ length }) -} -// #endregion snippet - -export function sayHello() { - console.log('Hello from snippets/external.ts') -}