More presentation stuffs
This commit is contained in:
Ava Wroten
parent
c327d0fba1
commit
e7eb9b718a
1 changed files with 148 additions and 4 deletions
|
|
@ -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
|
||||
<SortableGroup>
|
||||
|
||||
<SortableItem>
|
||||
```
|
||||
</div>
|
||||
|
||||
<div data-markdown class="w-1/2">
|
||||
Custom Wrappers
|
||||
|
||||
```html.hbs
|
||||
<SortableGroupAccessible>
|
||||
|
||||
<SortableItemAccessible>
|
||||
```
|
||||
</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' },
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue