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

This commit is contained in:
Jeremy Likness 2019-11-25 15:20:12 -08:00
parent bff4f64d57
commit a4ae68dfb8
21 changed files with 116 additions and 19 deletions

View File

@ -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

View File

@ -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)

View File

@ -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;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
images/ng-conf-ski.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 905 KiB

BIN
images/ng-conf.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 964 KiB

BIN
images/ng-dist-size.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 191 KiB

BIN
images/ng-size.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

BIN
images/security-alerts.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

View File

@ -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(

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

5
slides/030-impact1.html Normal file
View File

@ -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>

6
slides/040-impact2.html Normal file
View File

@ -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>

5
slides/050-cost.html Normal file
View File

@ -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>

6
slides/060-ng-conf1.html Normal file
View File

@ -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>

5
slides/070-ng-conf2.html Normal file
View File

@ -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" />

7
slides/notes.txt Normal file
View File

@ -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

BIN
videos/angularproject.mp4 Normal file

Binary file not shown.