Tech Speaking - Session #2

Slide Design

but before...

🚀 Homework 🚀

What is a slidedeck?

Your Content?

Your Structure?

Your slides are NOT

The content that you present

Your go to resource during the talk / your notes

A transcript / captions of your talk

Your slides shouldn't make sense without the talk

Your slides ARE

Your visual support throughout the talk

Another channel through we you communicate ideas

A way of emphasizing the key points of your talk

Design

Black or White?

Typography & Contrast

Think about the audience

Slides should be

VIVID

COLORFUL

MEMORABLE

The slide is your playground

animate

emphasize

follow

The slide is your playground

my

voice

Things that don't matter

The number of slides

The tool used for building your slides

The file format of your slides*

Takeaways

Build slides with the audience in mind

Use your slide flow to guide the audience through the talk

Use images and powerful colors to send your message

Showcase

Roast the slide!

Responsive Design

Aim for min 3.5 contrast

WCAG AA Standard - 4.5

WCAG AA Standard - 7

Small fonts need more contrast

const importStatementsPlugin = createImportPlugin({ fileType: FILE_TYPE.TSX })
const stencilStylePlugin = createCSSPlugin({
  declareDependency: 'decorator',
  templateStyle: 'jsx',
  templateChunkName: 'jsx-component',
})
const prettierJS = createPostProcessor({ fileType: FILE_TYPE.TSX })

export const createStencilComponentGenerator = (mapping: Mapping = {}): ComponentGenerator => {
  const generator = createComponentGenerator()

  generator.addMapping(stencilMapping)
  generator.addMapping(mapping)

  generator.addPlugin(stencilComponentPlugin)
  generator.addPlugin(stencilStylePlugin)
  generator.addPlugin(importStatementsPlugin)

  generator.addPostProcessor(prettierJS)

  return generator
}

My implementation for the stencil component generator

Types of Slides

1. Text Slides

This is important!

Nu e nimic pe lumea asta la fel. Ca viata care-o am in cartier.

ViLLy

Eat

Sleep

Code

Repeat

This is a new section!

1. Text Slides

2. Image / Video

Production Build

1. Text Slides

2. Image / Video

3. Diagram / Table

JavaScript

Style Calc

Layout

Paint

Composite

📜

💅

🎨

📚

📏

Layout

Paint

Composite

Paint

Composite

Does it change the geometry of the element?

(ex: width, margin, border)

Is it a visual property?

(ex: color, background-color, visibility)

Does it promote the element to a new layer?

(ex: transform, opacity)

1. Text Slides

2. Image / Video

3. Diagram / Table

4. Code

function animateBox() {
    /* ... */
    offset = offset + step
    box.style.marginLeft = offset + "px";
    /* ... */
    requestAnimationFrame(animateBox);
}