Github/vanillajs-deck
1
0
Fork 0
mirror of https://github.com/JeremyLikness/vanillajs-deck synced 2024-11-14 09:34:55 +00:00
Code Issues Projects Releases Wiki Activity

Tweak web component, add new slide, code fixes

Browse Source
This commit is contained in:
Jeremy Likness 2019-12-02 15:18:17 -08:00
parent 2ea7049dd2
commit 5831ecc10e
14 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/style.css
View File

@ -38,6 +38,11 @@ pre {
font-family: "consolas", sans-serif font-family: "consolas", sans-serif
} }
ul {
display: table;
margin: 0 auto;
}
video { video {
height: 40vh; height: 40vh;
max-width: 90vw; max-width: 90vw;
@ -150,6 +155,6 @@ slide-controls {
float: left; float: left;
} }
nextslide, transition { next-slide, transition {
display: none; display: none;
} }

2
index.html
View File

@ -16,7 +16,7 @@
<body> <body>
<script type="module" src="./js/app.js"></script> <script type="module" src="./js/app.js"></script>
<slide-deck id="main" start="data-binding"> <slide-deck id="main" start="001-title">
<h1>DevNexus | Vanilla.js: Modern 1st Party JavaScript</h1> <h1>DevNexus | Vanilla.js: Modern 1st Party JavaScript</h1>
<h2>Setting things up ...</h2> <h2>Setting things up ...</h2>
</slide-deck> </slide-deck>

3
js/dataBinding.js
View File

@ -55,7 +55,7 @@ export class DataBinding {
* @param {Observable} observable The observable instance to bind to * @param {Observable} observable The observable instance to bind to
*/ */
bindValue(input, observable) { bindValue(input, observable) {
let initialValue = observable.value; const initialValue = observable.value;
input.value = initialValue; input.value = initialValue;
observable.subscribe(() => input.value = observable.value); observable.subscribe(() => input.value = observable.value);
/** /**
@ -123,4 +123,3 @@ export class DataBinding {
}); });
} }
} }

2
js/navigator.js
View File

@ -43,7 +43,7 @@ export class Navigator extends HTMLElement {
if (this._route !== this._router.getRoute()) { if (this._route !== this._router.getRoute()) {
this._route = this._router.getRoute(); this._route = this._router.getRoute();
if (this._route) { if (this._route) {
var slide = parseInt(this._route) - 1; const slide = parseInt(this._route) - 1;
this.jumpTo(slide); this.jumpTo(slide);
} }
} }

2
js/slide.js
View File

@ -51,7 +51,7 @@ export class Slide {
this._transition = null; this._transition = null;
} }
/** @type{NodeListOf<HTMLElement>} */ /** @type{NodeListOf<HTMLElement>} */
const hasNext = this._html.querySelectorAll("nextslide"); const hasNext = this._html.querySelectorAll("next-slide");
if (hasNext.length > 0) { if (hasNext.length > 0) {
/** /**
* The name of the next slide to load * The name of the next slide to load

2
slides/001-title.html
View File

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

2
slides/020-angular-project.html
View File

@ -7,5 +7,5 @@ ng build --prod
<div class="center"> <div class="center">
<video src="/videos/angularproject.mp4" controls></video> <video src="/videos/angularproject.mp4" controls></video>
</div> </div>
<nextslide>030-impact1</nextslide> <next-slide>030-impact1</next-slide>
<transition>slide-left</transition> <transition>slide-left</transition>

2
slides/030-impact1.html
View File

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

2
slides/040-impact2.html
View File

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

2
slides/050-cost.html
View File

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

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

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

8
slides/070-ng-conf2.html
View File

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

12
slides/080-why.html Normal file
View File

@ -0,0 +1,12 @@
<title>Why Frameworks in the First Place?</title>
<h1>Why Frameworks in the First Place?</h1>
<ul>
<li class="appear">Differences in the DOM (i.e. jQuery normalization)</li>
<li class="appear">Lack of built-in templates</li>
<li class="appear">Need for SPA routing (journal)</li>
<li class="appear">Asynchronous module loading/managing the dependency graph</li>
<li class="appear">Testability</li>
<li class="appear">Databinding</li>
<li class="appear">Contracts (Types and Interfaces ➡ TypeScript)</li>
<li class="appear">Minification or "Packing"</li>
</ul>

6
slides/notes.txt
View File

@ -1,6 +0,0 @@
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