example.md

---
title:  New Reveal Testing / Demo
author: Dan Goldsmith
---

# Automatic Animation

## Slide 1 {.data-auto-animate}

  <div data-id="box" style="height: 50px; background: salmon;"></div>


## Slide 2 {.data-auto-animate}

  <div data-id="box" style="height: 200px; background: blue;"></div>


# What about Code?

## This Is Proper Cool {.data-auto-animate}

 - There is also Auto Animation for code

## This is Proper Cool {.data-auto-animate}
 
 - There is also Auto Animation for code
 - We can now expand our code out with animations
 - And Step through lines

## This is Proper Cool {.data-auto-animate}
 
 - There is also Auto Animation for code
   - BUT!! We need to use plain reveal syntax
 - We can now expand our code out with animations
 - And Step through lines


## Code Example 1 {.data-auto-animate}
 <pre data-id="code-animation"><code data-trim data-line-numbers>
    let planets = [
      { name: 'mars', diameter: 6779 },
    ]
  </code></pre>

## Code Example 2 {.data-auto-animate}
  <pre data-id="code-animation"><code data-trim data-line-numbers>
    let planets = [
      { name: 'mars', diameter: 6779 },
      { name: 'earth', diameter: 12742 },
      { name: 'jupiter', diameter: 139820 }
    ]
  </code></pre>

## Stepping through Lines

<pre><code data-line-numbers="3-5|8-10|13-15">
<table>
  <tr>
    <td>Apples</td>
    <td>$1</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>$2</td>
    <td>18</td>
  </tr>
  <tr>
    <td>Kiwi</td>
    <td>$3</td>
    <td>1</td>
  </tr>
</table>
</code></pre>


# Traditional Markdown code

## Markdown Still works
Does this work

```.python

def foo(bar):
	baz
	
```

# Explaining SQL Injection

## SQL Injection

 - The user *injects* new SQL into the query
 - Can trick the SQL engine into executing the statement
 
 
## Our Example Query {.data-auto-animate}
 <pre data-id="code-animation-php"><code data-trim data-line-numbers>
    SELECT * FROM users WHERE name = "dan";
  </code></pre>


## What about in PHP {.data-auto-animate}

  <pre data-id="code-animation-php"><code data-trim data-line-numbers>
   $qry = 'SELECT * FROM users WHERE name = "$input";'
  </code></pre>

## What about in PHP {.data-auto-animate}

  <pre data-id="code-animation-php"><code data-trim data-line-numbers>
   $input = 'dan';
   $qry = 'SELECT * FROM users WHERE name = "$input";'
  </code></pre>