add slides, "appear" effect, video, image hover, update notes

Dockerfile

@@ -4,6 +4,7 @@ RUN mkdir /app
 COPY index.html /app
 COPY css/ /app/css/
 COPY images/ /app/images/
+COPY videos/ /app/videos/
 COPY js/ /app/js/
 COPY slides/ /app/slides/
 COPY templates/ /app/templates

css/animations.css

@@ -28,6 +28,36 @@
     animation-duration: 0.3s;
 }
 
+@keyframes fade-out {
+    from {
+        opacity: 100;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 100;
+    }
+}
+
+.anim-fade-begin {
+    animation-name: fade-out;
+    animation-timing-function: ease-in;
+    animation-duration: 0.5s;
+}
+
+.anim-fade-end {
+    animation-name: fade-in;
+    animation-timing-function: ease-out;
+    animation-duration: 0.3s;
+}
+
 @keyframes spin {
     from {
         transform: rotate(0deg)

css/style.css

@@ -1,11 +1,11 @@
 body {
     padding: 5px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    font-size: 4vh;
+    font-size: 3vh;
 }
 
 button {
-    font-size: 4vh;
+    font-size: 3vh;
 }
 
 pre {
@@ -20,12 +20,26 @@ pre {
     font-family: "consolas", sans-serif
 }
 
-slide-deck img {
+video {
+    height: 40vh;
+    max-width: 90vw;
     display: block;
     margin-left: auto;
     margin-right: auto;
 }
 
+slide-deck img {
+    display: block;
+    max-height: 60vh;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+slide-deck img.expandable:hover {
+    margin-top: -20vh;
+    max-height: 80vh;
+}
+
 @media only screen and (max-width: 800px) {
     body {
         font-size: 14px;
@@ -37,7 +51,7 @@ slide-deck img {
 
 @media only screen and (max-width: 1200px) {
     body {
-        font-size: 3vh;
+        font-size: 2vh;
     }
     button {
         font-size: 14px;
@@ -61,6 +75,10 @@ img {
     height: auto;
 }
 
+.appear {
+    display: none;
+}
+
 .footer {
     float: left;
     height: 15vh;

js/navigator.js

@@ -141,10 +141,27 @@ export class Navigator extends HTMLElement {
         }
     }
 
+    /**
+     * Check for in-slide appearances on navigation
+     * @returns {boolean} True if an element was revealed
+     */
+    checkForAppears() {
+        const host = this.querySelector("div");
+        const appear = host.querySelectorAll(".appear");
+        if (appear.length) {
+            appear[0].classList.remove("appear");
+            return true;
+        }
+        return false;
+    }
+
     /**
      * Advance to next slide, if it exists. Applies animation if transition is specified
      */
     next() {
+        if (this.checkForAppears()) {
+            return;
+        }
         if (this.hasNext) {
             if (this.currentSlide.transition !== null) {
                 this._animator.beginAnimation(

slides/001-title.html

@@ -3,5 +3,5 @@
 <img src="/images/vanillin.png" class="anim-spin" alt="Vanillin molecule" title="Vanillin molecule"/>
 <h2>Jeremy Likness</h2>
 <h3>Cloud Advocate, Microsoft</h3>
-<nextslide>002-experiment</nextslide>
+<nextslide>020-angular-project</nextslide>
 <transition>slide-left</transition>

slides/002-experiment.html

@@ -1,7 +0,0 @@
-<title>Let's try an experiment...</title>
-<h2>Let's try an experiment</h2>
-<pre>
-ng --new 
-echo "%s" > cat.txt
-</pre>
-<nextslide>003-morestuff</nextslide>

slides/003-morestuff.html

@@ -1,7 +0,0 @@
-<title>More Stuff</title>
-<h1>This is even more stuff</h1>
-<p>Lorem jalskdjflkasdjflkasd jkjdsaflkdsj kldsjflksdjdlk klsdjflkasjlksj kjdsf
-    asdklfjlkfjk laskdjfladskjf
-    asldfkjlkddj
-    asldfjlkfjjkjlff
-</p>

slides/020-angular-project.html

@@ -0,0 +1,11 @@
+<title>Let's try an experiment...</title>
+<h2>Let's try an experiment</h2>
+<pre>
+ng new my-app 
+ng build --prod
+</pre>
+<div class="center">
+    <video src="/videos/angularproject.mp4" controls></video>
+</div>
+<nextslide>030-impact1</nextslide>
+<transition>slide-left</transition>

slides/030-impact1.html

@@ -0,0 +1,5 @@
+<title>What's the Impact?</title>
+<h1>What's the Impact?</h1>
+<img src="/images/ng-size.png" class="expandable" alt="Size of Angular App" title="Size of Angular app" />
+<transition>fade</transition>
+<nextslide>040-impact2</nextslide>

slides/040-impact2.html

@@ -0,0 +1,6 @@
+<title>What's the Impact (to be fair)?</title>
+<h1>What's the Impact? (to be fair)</h1>
+<img src="/images/ng-dist-size.png" class="expandable" alt="Size of Angular App Distribution"
+    title="Size of Angular app distribution" />
+<nextslide>050-cost</nextslide>
+<transition>fade</transition>

slides/050-cost.html

@@ -0,0 +1,5 @@
+<title>What's the Cost?</title>
+<h1>What's the Cost?</h1>
+<img src="/images/security-alerts.png" class="expandable" alt="Security alerts"
+    title="Security alerts" />
+<nextslide>060-ng-conf1</nextslide>

slides/060-ng-conf1.html

@@ -0,0 +1,6 @@
+<title>I'm Not Anti-Angular</title>
+<h1>I'm Not Anti-Angular!</h1>
+<i>Here's proof from 2014...</i>
+<img src="/images/ng-conf-ski.png" class="appear expandable" alt="Standing on a ski slope"
+    title="Standing on a ski slope" />
+<nextslide>070-ng-conf2</nextslide>

slides/070-ng-conf2.html

@@ -0,0 +1,5 @@
+<title>I'm Not Anti-Angular</title>
+<h1>I'm Not Anti-Angular!</h1>
+<i>Here's proof from 2014...</i>
+<img src="/images/ng-conf.png" class="expandable" alt="Inside the inaugural Angular conference ngConf"
+    title="Inside the inaugural Angular conference ngConf" />

slides/notes.txt

@@ -0,0 +1,7 @@
+Hammer vs watch
+JavaScript .  Plugins... JavaScript
+Building
+3 D's..  how do they work now
+Html5/css3
+Show compatible browsers then zoom in top 4 w/mobile
+data-binding https://gist.github.com/austinhyde/4321f22a476e1cbee65f