mirror of
https://github.com/JeremyLikness/vanillajs-deck
synced 2024-11-14 01:24:56 +00:00
Tweak web component, add new slide, code fixes
This commit is contained in:
Jeremy Likness
parent
2ea7049dd2
commit
5831ecc10e
@ -38,6 +38,11 @@ pre {
|
||||
font-family: "consolas", sans-serif
|
||||
}
|
||||
|
||||
ul {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
video {
|
||||
height: 40vh;
|
||||
max-width: 90vw;
|
||||
@ -150,6 +155,6 @@ slide-controls {
|
||||
float: left;
|
||||
}
|
||||
|
||||
nextslide, transition {
|
||||
next-slide, transition {
|
||||
display: none;
|
||||
}
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
<body>
|
||||
<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>
|
||||
<h2>Setting things up ...</h2>
|
||||
</slide-deck>
|
||||
|
||||
@ -55,7 +55,7 @@ export class DataBinding {
|
||||
* @param {Observable} observable The observable instance to bind to
|
||||
*/
|
||||
bindValue(input, observable) {
|
||||
let initialValue = observable.value;
|
||||
const initialValue = observable.value;
|
||||
input.value = initialValue;
|
||||
observable.subscribe(() => input.value = observable.value);
|
||||
/**
|
||||
@ -123,4 +123,3 @@ export class DataBinding {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@ export class Navigator extends HTMLElement {
|
||||
if (this._route !== this._router.getRoute()) {
|
||||
this._route = this._router.getRoute();
|
||||
if (this._route) {
|
||||
var slide = parseInt(this._route) - 1;
|
||||
const slide = parseInt(this._route) - 1;
|
||||
this.jumpTo(slide);
|
||||
}
|
||||
}
|
||||
|
||||
@ -51,7 +51,7 @@ export class Slide {
|
||||
this._transition = null;
|
||||
}
|
||||
/** @type{NodeListOf<HTMLElement>} */
|
||||
const hasNext = this._html.querySelectorAll("nextslide");
|
||||
const hasNext = this._html.querySelectorAll("next-slide");
|
||||
if (hasNext.length > 0) {
|
||||
/**
|
||||
* The name of the next slide to load
|
||||
|
||||
@ -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>020-angular-project</nextslide>
|
||||
<next-slide>020-angular-project</next-slide>
|
||||
<transition>slide-left</transition>
|
||||
@ -7,5 +7,5 @@ ng build --prod
|
||||
<div class="center">
|
||||
<video src="/videos/angularproject.mp4" controls></video>
|
||||
</div>
|
||||
<nextslide>030-impact1</nextslide>
|
||||
<next-slide>030-impact1</next-slide>
|
||||
<transition>slide-left</transition>
|
||||
@ -2,4 +2,4 @@
|
||||
<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>
|
||||
<next-slide>040-impact2</next-slide>
|
||||
@ -2,5 +2,5 @@
|
||||
<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>
|
||||
<next-slide>050-cost</next-slide>
|
||||
<transition>fade</transition>
|
||||
@ -2,4 +2,4 @@
|
||||
<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>
|
||||
<next-slide>060-ng-conf1</next-slide>
|
||||
@ -1,6 +1,8 @@
|
||||
<title>I'm Not Anti-Angular</title>
|
||||
<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"
|
||||
title="Standing on a ski slope" />
|
||||
<nextslide>070-ng-conf2</nextslide>
|
||||
<next-slide>070-ng-conf2</next-slide>
|
||||
@ -1,5 +1,9 @@
|
||||
<title>I'm Not Anti-Angular</title>
|
||||
<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"
|
||||
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
12
slides/080-why.html
Normal 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>
|
||||
@ -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
|
||||
Loading…
Reference in New Issue
Block a user