Presentation adjustments

2020-03-16 11:19:56 -05:00 · 2020-03-16 11:19:56 -05:00 · 06a2396fe4
commit 06a2396fe4
parent fd7e78642c
1 changed files with 111 additions and 23 deletions
--- a/presentation/index.html
+++ b/presentation/index.html
@ -68,6 +68,10 @@
            </span>
            Or Github @sharpshark28
          </p>
+
+          <aside class="notes">
+            ...where we build software for K-12 School Districts. You can also find me doing open source work on Gitlab or Github.
+          </aside>
        </section>

        <section>
@ -78,10 +82,14 @@
          <p>A project feature saved by A11y</p>

          <ul>
-            <li>Adding Functionality w/ Composable Components</li>
+            <li class="fragment">Adding Functionality w/ Composable Components</li>
            <li class="fragment">Equitable & Discoverable UX</li>
-            <li class="fragment">Automation Testing A11y</li>
+            <li class="fragment">Automation Testing</li>
          </ul>
+
+          <aside class="notes">
+            This is a success story. We'll discuss these terms as we go.
+          </aside>
        </section>

        <section>
@ -94,7 +102,7 @@
          <p class="fragment text-yellow-400">What about A11y?</p>

          <aside class="notes">
-            Sounds simple enough. Perhaps, too "simple".
+            Prior to Allovue, I was assigned a ticket with a simple feature request and no design. Sounds simple enough. Perhaps, too "simple".
          </aside>
        </section>

@ -102,13 +110,17 @@
          <p><span class="text-yellow-400">A11Y</span></p>
          <p class="fragment"><span class="text-yellow-400">A</span>....11.....<span class="text-yellow-400">Y</span></p>
          <p class="fragment"><span class="text-yellow-400">A</span>ccessibilit<span class="text-yellow-400">y</span></p>
+
+          <aside class="notes">
+            We've seen "A11y" on these slides a lot. Expanded out A11y means Accessibility because it has 18 characters. Acronym.
+          </aside>
        </section>

        <section>
          <p>Equity</p>

          <aside class="notes">
-            At Allovue we talk Equity a lot. I was tasked with delivering a feature that not everyone could use. This felt unfair locking out opportunities to use parts of the app from some users.
+            I was tasked with delivering a feature that not everyone could use. This felt unfair locking out opportunities to use parts of the app from some users. At Allovue we talk Equity a lot. 
          </aside>
        </section>

@ -126,6 +138,10 @@
              </small>
            </div>
          </h2>
+
+          <aside class="notes">
+            A great many talks have been giving trying to sell A11y. I merely wish to set the stage for my motivations here.
+          </aside>
        </section>

        <section>
@ -139,6 +155,7 @@
          <aside class="notes">
            There are other forms of disability as well as varying degrees of disability.
            People are human, we have differing levels of ability.
+            Often disabilities are invisible.
          </aside>
        </section>

@ -166,13 +183,18 @@

        <section data-background-iframe="https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-rearrangeable.html" data-background-interactive>
          <p class="bg-black float-right p-12 rounded-full shadow-lg text-xl">W3C Pattern Rearrangable Listbox</p>
+
          <aside class="notes">
-            This UI felt intuitive because it used existing UI elements and keyboard shortcuts I was familiar with.
+            World-Wide-Web Consortium. Rearrangable Listbox pattern. This UI felt intuitive because it used existing UI elements and keyboard shortcuts I was familiar with. INTERACT WITH FORM.
          </aside>
        </section>

        <section>
          <p><a href="https://emberobserver.com/addons/ember-sortable"><img src="./sortable.png" alt="ember-sortable on ember observer" /></a></p>
+
+          <aside class="notes">
+            Ember Observer ranks and describes Ember Addons. #26 of top 100 addons. Score of 10. Top 10% in terms of downloads. Heavily used solid addon.
+          </aside>
        </section>

        <section>
@ -207,6 +229,32 @@
              ```
            </div>
          </div>
+
+          <aside class="notes">
+            Ember Sortable offers two composable components. I introduced two more so as not to have to Reopen or Fork the addon.
+          </aside>
+        </section>
+
+        <section>
+          <h2>Composed Components</h2>
+
+          <p class="text-xl text-left text-gray-600">
+            index.hbs
+          </p>
+
+          <div data-markdown>
+            ```html.hbs
+              &lt;SortableGroupAccessible&gt;
+                &lt;SortableGroup&gt;
+                  {{#each this.items as | item |}}
+                    &lt;SortableItem&gt;
+                      &lt;MyItemComponent /&gt;
+                    &lt;/SortableItem&gt;
+                  {{/each}}
+                &lt;/SortableGroup&gt;
+              &lt;/SortableGroupAccessible&gt;
+            ```
+          </div>
        </section>

        <section>
@ -217,11 +265,19 @@
          <p class="bg-black float-right p-12 rounded-full shadow-lg text-xl" style="margin-top: 400px;">
            <a href="https://gitlab.com/gaiety/sortable-recipes">https://gitlab.com/gaiety/sortable-recipes</a>
          </p>
+
+          <aside class="notes">
+            Demo app. INTERACT WITH MOUSE. INTERACT WITH KEYBOARD. SHOW FOCUS AND ENTER TO ACTIVATE LINKS.
+          </aside>
        </section>

        <section>
          <h2>Implementation Details</h2>
          <p><a href="https://gitlab.com/gaiety/sortable-recipes">https://gitlab.com/gaiety/sortable-recipes</a></p>
+
+          <aside class="notes">
+            Link is in #ember-conf on Discord.
+          </aside>
        </section>

        <section>
@ -262,7 +318,7 @@
          </div>

          <aside class="notes">
-            Useful with glimmer components that dont have a default div wrapper. Moves implementation details to parent.
+            Useful with glimmer components that dont have a default div wrapper. Useful with composability. Moves implementation details to parent.
          </aside>
        </section>

@ -281,34 +337,45 @@
              {{key-up this.handleArrowDown key='ArrowDown'}}
          </code></pre>

-          <p class="text-xl text-left text-gray-600">
-            modifiers/key-up.js
-          </p>
+          <div class="fragment">
+            <p class="text-xl text-left text-gray-600">
+              modifiers/key-up.js
+            </p>

-          <pre><code class="hljs js" data-line-numbers="6-7" data-trim>
-            import { modifier } from 'ember-modifier';
-            const listener = (evt) => {
-              if (!desiredKey || desiredKey === evt.key) handler(evt);
-            }
-            export default modifier(function keyUp(element, [handler], { key: desiredKey }) {
-              element.addEventListener('keyup', listener);
-              return () => { element.removeEventListener('keyup', listener); }
-            });
-          </code></pre>
+            <pre><code class="hljs js" data-line-numbers="6-7" data-trim>
+              import { modifier } from 'ember-modifier';
+              const listener = (evt) => {
+                if (!desiredKey || desiredKey === evt.key) handler(evt);
+              }
+              export default modifier(function keyUp(element, [handler], { key: desiredKey }) {
+                element.addEventListener('keyup', listener);
+                return () => { element.removeEventListener('keyup', listener); }
+              });
+            </code></pre>
+          </div>
+        </section>
+
+        <section>
+          <h2>Testing Details</h2>
        </section>

        <section>
          <h2>@ember/test-helpers</h2>

          <ul>
-            <li>click</li>
+            <li class="fragment">render</li>
+            <li class="fragment">click</li>
            <li class="fragment">triggerEvent</li>
            <li class="fragment">triggerKeyEvent</li>
          </ul>
+
+          <aside class="notes">
+            Automatically imported for `render` in Rendering tests. Commonly people find `click`. Less common and essential to this story is `triggerEvent` and `TriggerKeyEvent`.
+          </aside>
        </section>

        <section>
-          <h2>Modifier Tests</h2>
+          <h2>Modifier Rendering Tests</h2>

          <p class="text-xl text-left text-gray-600">
            modifiers/key-up-test.js
@ -317,8 +384,8 @@
          <pre><code class="hljs js" data-line-numbers="2-4,7,9-10" data-trim>
            test('it can listen for specific key up events', async function(assert) {
              this.keyUp = ({ key }) => {
-                assert.step('key up');
                assert.equal(key, 'Enter');
+                assert.step('key up');
              };
              await render(hbs`
                &lt;div {{key-up this.keyUp}} data-test-id='keyup'&gt;&lt;/div&gt;`);
@ -327,10 +394,14 @@
              assert.verifySteps(['key up']);
            });
          </code></pre>
+
+          <aside class="notes">
+            Start at `render` with modifier on a generic div. Async `triggerKeyEvent`. `step` and `verifySteps` for async testing.
+          </aside>
        </section>

        <section>
-          <h2>Testing Reordering</h2>
+          <h2>Application Testing Reordering</h2>

          <p class="text-xl text-left text-gray-600">
            index-test.js
@ -350,6 +421,10 @@

        <section>
          🎉 A11y allowed us to test reordering! 🎉
+
+          <aside class="notes">
+            Wins on next slide. Be excited here. Mention quick feedback loop for green tests, refactoring, design changes.
+          </aside>
        </section>

        <section>
@ -368,10 +443,18 @@
            <li class="fragment">Less stress on QA</li>
            <li class="fragment">Less scope creep</li>
          </ul>
+
+          <aside class="notes">
+            TDD, felt safe knowing that functionality would not break as we fine tuned functionality and design. Paired with design on various states. QA reassured we had automation tests. Less having to go back later to implement A11y later as an afterthought.
+          </aside>
        </section>

        <section data-background-iframe="http://localhost:4201/52958" data-background-interactive>
          <p class="bg-black float-right p-12 rounded-full shadow-lg">v2.x.x ember-sortable</p>
+
+          <aside class="notes">
+            Since this feature shipped there's been a release of ember-sortable v2 that ships with A11y built in. INTERACT WITH IT.
+          </aside>
        </section>

        <section>
@ -381,6 +464,7 @@
            <li class="fragment">A11y Screen Announcements</li>
            <li class="fragment"><a href="https://github.com/adopted-ember-addons/ember-sortable/pull/345">ember-sortable v2.2.x modifiers</a></li>
            <li class="fragment"><a href="https://github.com/ember-a11y/ember-a11y-testing">ember-a11y-testing</a></li>
+            <li class="fragment"><a href="https://github.com/ember-template-lint/ember-cli-template-lint">ember-cli-template-lint</a></li>
          </ul>
        </section>

@ -398,6 +482,10 @@
        <section data-background-color="#5677e4">
          <p><a href="https://allovue.com/about/careers"><img src="./allovue.svg" alt="Allovue" class="inline-block" style="border: none; background: none; height: 2em; box-shadow: none;" /></a></p>
          <p><a href="https://allovue.com/about/careers" style="color: white">We are hiring!</a></p>
+
+          <aside class="notes">
+            K-12 School Districts. Equitable. Shape Up.
+          </aside>
        </section>

        <section>