More presentation stuffs

presentation/index.html

@@ -14,6 +14,14 @@
 		<!-- Theme used for syntax highlighting of code -->
 		<link rel="stylesheet" href="lib/css/monokai.css">
 
+    <style>
+      .reveal pre code {
+        background: black;
+        padding-top: 1em;
+        padding-bottom: 1em;
+      }
+    </style>
+
 		<!-- Printing and PDF exports -->
 		<script>
 			var link = document.createElement( 'link' );
@@ -35,6 +43,11 @@
               </small>
             </div>
           </h1>
+          <h2>
+            <span class="text-yellow-400 text-4xl">
+              More Composable, Intuitive & Testable
+            </span>
+          </h2>
           <small><a href="https://www.wroten.me/">Ava Gaiety Wroten</a></small>
         </section>
 
@@ -46,7 +59,7 @@
           </p>
           <img src="./photo.png" alt="" role="presentation" class="w-40 inline-block" />
           <p>
-            Software Engineer at <img src="./allovue.svg" alt="Allovue" class="inline-block pl-2" style="border: none; background: none;" />
+            Software Engineer at <img src="./allovue.svg" alt="Allovue" class="inline-block pl-4" style="border: none; background: none; height: 1.25em;" />
           </p>
           <p class="text-sm">
             On Gitlab @gaiety
@@ -57,10 +70,33 @@
           </p>
         </section>
 
+        <section>
+          <h2>
+            Intro
+          </h2>
+          <ol>
+            <li>Topic</li>
+            <li>Topic</li>
+          </ol>
+        </section>
+
+        <section>
+          <h2>
+            Feature: Item Reordering
+          </h2>
+          <p class="fragment">Mouse Drag & Drop</p>
+          <p class="fragment text-gray-600">Do we support Touch?</p>
+          <p class="fragment text-yellow-400">What about A11y?</p>
+
+          <aside class="notes">
+            Sounds simple enough. Perhaps, too "simple".
+          </aside>
+        </section>
+
         <section class="font-mono">
-          <p><span class="text-yellow-400">A</span>ccessibilit<span class="text-yellow-400">y</span></p>
-          <p><span class="text-yellow-400">A</span>....11.....<span class="text-yellow-400">Y</span></p>
           <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>
         </section>
 
         <section>
@@ -89,15 +125,101 @@
         </section>
 
         <section>
-          <p>TODO: Varying degrees of disability...</p>
+          <h2>Degrees of Disabilities</h2>
+          <p>Limited mobility, muscle slowness, tremors, low vision, color blindness, partial hearing loss, etc</p>
+
+          <footer>
+            <p class="text-sm"><a href="https://accessibility.iu.edu/understanding-accessibility/types-of-disabilities.html">Indiana University on Types of Disabilities</a></p>
+          </footer>
+
+          <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.
+          </aside>
+        </section>
+
+        <section>
+          <p>👩🏽‍🔬 👨🏾‍🎨 👩🏻‍🔧 👨🏼‍✈️</p>
+          <p>I build software for humans</p>
+
+          <aside class="notes">
+            I wouldn't be happy with myself if I shipped software that was completely unusable to some users in a shortsighted fashion.
+          </aside>
+        </section>
+
+        <section>
+          <p>So I did some research...</p>
         </section>
 
         <section data-background-iframe="https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-rearrangeable.html" data-background-interactive>
         </section>
 
+        <section>
+          <h2><a href="https://github.com/adopted-ember-addons/ember-sortable">ember-sortable</a></h2>
+
+          <p>✔️  Mouse Drag & Drop</p>
+          <p>✔️  Touch Drag & Drop</p>
+        </section>
+
+        <section>
+          <h2>Component Structure</h2>
+
+          <div class="flex">
+            <div data-markdown class="w-1/2">
+              ember-sortable
+
+              ```html.hbs
+                &lt;SortableGroup&gt;
+
+                &lt;SortableItem&gt;
+              ```
+            </div>
+
+            <div data-markdown class="w-1/2">
+              Custom Wrappers
+
+              ```html.hbs
+                &lt;SortableGroupAccessible&gt;
+
+                &lt;SortableItemAccessible&gt;
+              ```
+            </div>
+          </div>
+        </section>
+
+        <section>
+          TODO: Living Styleguide?
+        </section>
+
         <section data-background-iframe="http://localhost:4200/52958" data-background-interactive>
         </section>
 
+        <section>
+          TODO: TESTING
+        </section>
+
+        <section>
+          🎉 A11y allowed us to test reordering! 🎉
+        </section>
+
+        <section>
+          <h2>Team Wins</h2>
+
+          <ul>
+            <li>
+              Quick Feedback Loop
+              <ul>
+                <li><span class="text-gray-600">...with </span> development</li>
+                <li><span class="text-gray-600">...with </span> design</li>
+                <li><span class="text-gray-600">...with </span> project managers</li>
+              </ul>
+            </li>
+            <li>Sign off for UX</li>
+            <li>Less stress on QA</li>
+            <li>Less scope creep</li>
+          </ul>
+        </section>
+
         <section data-background-iframe="http://localhost:4201/52958" data-background-interactive>
           <p>v2.x.x ember-sortable</p>
         </section>
@@ -108,6 +230,26 @@
             <li><a href="https://github.com/adopted-ember-addons/ember-sortable/pull/345">ember-sortable v2.2.x modifiers</a></li>
           </ul>
         </section>
+
+        <section>
+          <h2>
+            Outro
+          </h2>
+          <ol>
+            <li>Topic</li>
+            <li>Topic</li>
+          </ol>
+        </section>
+
+        <section>
+          <p>TODO: Work at Allovue, we have openings and are growing...</p>
+          <p>We ship software with Basecamp's Shapeup which empowers us to consider solutions like what I've demonstrated here. Variable scope.</p>
+        </section>
+
+        <section>
+          <p>TODO: Challenge: Hire someone different than you!</p>
+          <p>TODO: Make A11y a priority at your next design meeting!</p>
+        </section>
 			</div>
 		</div>
 
@@ -119,6 +261,8 @@
 			// - https://github.com/hakimel/reveal.js#dependencies
 			Reveal.initialize({
 				hash: true,
+        progress: false,
+        transition: 'fade',
 				dependencies: [
 					{ src: 'plugin/markdown/marked.js' },
 					{ src: 'plugin/markdown/markdown.js' },