From 5831ecc10e5e65706fb7af8d7537882dfdfe8487 Mon Sep 17 00:00:00 2001 From: Jeremy Likness Date: Mon, 2 Dec 2019 15:18:17 -0800 Subject: [PATCH] Tweak web component, add new slide, code fixes --- css/style.css | 7 ++++++- index.html | 2 +- js/dataBinding.js | 3 +-- js/navigator.js | 2 +- js/slide.js | 2 +- slides/001-title.html | 2 +- slides/020-angular-project.html | 2 +- slides/030-impact1.html | 2 +- slides/040-impact2.html | 2 +- slides/050-cost.html | 2 +- slides/060-ng-conf1.html | 6 ++++-- slides/070-ng-conf2.html | 8 ++++++-- slides/080-why.html | 12 ++++++++++++ slides/notes.txt | 6 ------ 14 files changed, 37 insertions(+), 21 deletions(-) create mode 100644 slides/080-why.html delete mode 100644 slides/notes.txt diff --git a/css/style.css b/css/style.css index 16120f7..c68a96c 100644 --- a/css/style.css +++ b/css/style.css @@ -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; } \ No newline at end of file diff --git a/index.html b/index.html index e82896c..a60cbb9 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ - +

DevNexus | Vanilla.js: Modern 1st Party JavaScript

Setting things up ...

 diff --git a/js/dataBinding.js b/js/dataBinding.js index bcede41..cd76961 100644 --- a/js/dataBinding.js +++ b/js/dataBinding.js @@ -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 { }); } } - diff --git a/js/navigator.js b/js/navigator.js index 0fde78d..f674c23 100644 --- a/js/navigator.js +++ b/js/navigator.js @@ -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); } } diff --git a/js/slide.js b/js/slide.js index fe7c98b..f545c7f 100644 --- a/js/slide.js +++ b/js/slide.js @@ -51,7 +51,7 @@ export class Slide { this._transition = null; } /** @type{NodeListOf} */ - 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 diff --git a/slides/001-title.html b/slides/001-title.html index 4d98ac6..1598931 100644 --- a/slides/001-title.html +++ b/slides/001-title.html @@ -3,5 +3,5 @@ Vanillin molecule

Jeremy Likness

Cloud Advocate, Microsoft

-020-angular-project +020-angular-project slide-left \ No newline at end of file diff --git a/slides/020-angular-project.html b/slides/020-angular-project.html index a4a9825..a3a580d 100644 --- a/slides/020-angular-project.html +++ b/slides/020-angular-project.html @@ -7,5 +7,5 @@ ng build --prod
-030-impact1 +030-impact1 slide-left \ No newline at end of file diff --git a/slides/030-impact1.html b/slides/030-impact1.html index d237306..4a3e7e5 100644 --- a/slides/030-impact1.html +++ b/slides/030-impact1.html @@ -2,4 +2,4 @@

What's the Impact?

fade -040-impact2 \ No newline at end of file +040-impact2 \ No newline at end of file diff --git a/slides/040-impact2.html b/slides/040-impact2.html index 1657c39..32d184b 100644 --- a/slides/040-impact2.html +++ b/slides/040-impact2.html @@ -2,5 +2,5 @@

What's the Impact? (to be fair)

-050-cost +050-cost fade \ No newline at end of file diff --git a/slides/050-cost.html b/slides/050-cost.html index dfbf65e..2b95ecd 100644 --- a/slides/050-cost.html +++ b/slides/050-cost.html @@ -2,4 +2,4 @@

What's the Cost?

-060-ng-conf1 \ No newline at end of file +060-ng-conf1 \ No newline at end of file diff --git a/slides/060-ng-conf1.html b/slides/060-ng-conf1.html index 627fc60..7e52575 100644 --- a/slides/060-ng-conf1.html +++ b/slides/060-ng-conf1.html @@ -1,6 +1,8 @@ I'm Not Anti-Angular

I'm Not Anti-Angular!

-Here's proof from 2014... +
    +
  • Here's proof from 2014...
    • +
-070-ng-conf2 \ No newline at end of file +070-ng-conf2 \ No newline at end of file diff --git a/slides/070-ng-conf2.html b/slides/070-ng-conf2.html index fcfd829..8db828d 100644 --- a/slides/070-ng-conf2.html +++ b/slides/070-ng-conf2.html @@ -1,5 +1,9 @@ I'm Not Anti-Angular

I'm Not Anti-Angular!

-Here's proof from 2014... +
    +
  • Here's proof from 2014...
    • +
\ No newline at end of file + title="Inside the inaugural Angular conference ngConf" /> +fade +080-why \ No newline at end of file diff --git a/slides/080-why.html b/slides/080-why.html new file mode 100644 index 0000000..a926b27 --- /dev/null +++ b/slides/080-why.html @@ -0,0 +1,12 @@ +Why Frameworks in the First Place? +

Why Frameworks in the First Place?

+
    +
  • Differences in the DOM (i.e. jQuery normalization)
    • +
  • Lack of built-in templates
    • +
  • Need for SPA routing (journal)
    • +
  • Asynchronous module loading/managing the dependency graph
    • +
  • Testability
    • +
  • Databinding
    • +
  • Contracts (Types and Interfaces ➡ TypeScript)
    • +
  • Minification or "Packing"
    • +
\ No newline at end of file diff --git a/slides/notes.txt b/slides/notes.txt deleted file mode 100644 index addb162..0000000 --- a/slides/notes.txt +++ /dev/null @@ -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 \ No newline at end of file