Dynamic Presentation

What do you want to see?

pick one

Linking to slides in the slides.com editor

C / C++ / C# / Java / CoffeeScript / JavaScript / Node / Angular / Vue / Cycle.js / functional / testing

18 people. Atlanta, Philly, Boston, Chicago, NYC

Fast, easy and reliable testing for anything that runs in a browser

$ npm install -D cypress
npx cypress open
// ui-spec.js
it('loads the app', () => {
  cy.visit('http://localhost:3030')
  cy.get('.todoapp').should('be.visible')
})

Mocha BDD syntax

Chai assertions

it('adds 2 todos', () => {
  cy.visit('http://localhost:3000')
  cy.get('.new-todo')
    .type('learn testing{enter}')
    .type('be cool{enter}')
  cy.get('.todo-list li')
    .should('have.length', 2)
})

fluent API like jQuery

Standard text - might be hard to see against the background image

Text with shadow CSS - to stand out against the background image

undefined is not a function

Programming in JavaScript

Code Animations

it('adds todos', () => {
  cy.visit('/')
  cy.get('.new-todo')
    .type('write code{enter}')
    .type('write tests{enter}')
    .type('deploy{enter}')
  cy.get('.todo') // command
    .should('have.length', 3) // assertion
})

Code Animations

it('adds todos', () => {
  cy.visit('/')
  cy.get('.new-todo')
    .type('write code{enter}')
    .type('write tests{enter}')
    .type('deploy{enter}')
  cy.get('.todo') // command
    .should('have.length', 3) // assertion
})

/// <reference types="cypress" />

it('adds todos', () => {
  cy.visit('/')
  cy.get('.new-todo')
    .type('write code{enter}')
    .type('write tests{enter}')
    .type('deploy{enter}')
  cy.get('.todo') // command
    .should('have.length', 3) // assertion
})

Code Animations

Tall code block

line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10
line 11
line 12
line 13
line 14
line 15
line 16
line 17
line 18
line 19
line 20
line 21
line 22
line 23
line 24
line 24

To learn more:

bonus: you can link to named slides via url

slides.com/bahmutov/dynamic-presentation-example/live#/speaker

Dynamic Presentation Example

By Gleb Bahmutov

Dynamic Presentation Example

Example of a presentation where the speaker can pick where to "jump" from a slide using linked elements

  • 2,444