* Remove link to web.dev because honestly their site is kinda the opposite of the point I want to make

* Add a link to Adrian Roselli's site instead
* Update the toggle to use the `switch` role
* Add some text about the proposal for the Invoker button
* Add a slide about theming
This commit is contained in:
Lewis Dale 2023-10-12 09:09:36 +01:00
parent 437a774329
commit 62ff9e8f77
8 changed files with 69 additions and 15 deletions

View File

@ -4,6 +4,6 @@ type: statement
## Huh? ## Huh?
* When we create a custom component, often we have to tell the browser how it should treat it * When we create a custom component, we have to tell the browser how it should treat it
* But often browsers already give us the tools to do that natively * But often browsers already give us the tools to do that natively
* Reaching for CSS and HTML first can make our components faster, more reusable, and more accessible * Reaching for CSS and HTML first can make our components faster, more reusable, and more accessible

View File

@ -154,6 +154,7 @@ export default class Toggle extends Component<Props, State> {
* Have to import all of this everywhere we use it * Have to import all of this everywhere we use it
* No meaningful labels possible! * No meaningful labels possible!
* No keyboard navigation * No keyboard navigation
* No Javascript? No component
</div> </div>

View File

@ -4,7 +4,7 @@
```html ```html
<style> <style>
input[type="checkbox"][data-role="toggle"] { input[type="checkbox"][role="switch"] {
appearance: none; appearance: none;
background: lightgray; background: lightgray;
border: 1px solid gray; border: 1px solid gray;
@ -43,23 +43,27 @@ input[type="checkbox"][data-role="toggle"] {
<input <input
type="checkbox" type="checkbox"
data-type="toggle" role="switch"
name="activated" name="activated"
/> />
``` ```
<div> <div>
<input <label>
type="checkbox" Enable:
data-role="toggle" <input
name="activated" type="checkbox"
/> role="switch"
name="activated"
/>
</label>
* 42 lines of code * 42 lines of code
* Uses regular HTML markup - 0 javascript needed * Uses regular HTML markup - 0 javascript needed
* Fully accessible * `switch` role tells the browser that this is an on/off rather than a checked/unchecked component
* Labels work * Easily accessible to screen readers, keyboard users
* Can be used anywhere - all you need is the stylesheet * Can be used anywhere - all you need is the stylesheet at the top level
* Graceful degradation - if the CSS doesn't load we still get a checkbox
</div> </div>
</div> </div>

View File

@ -51,7 +51,11 @@ dialog::backdrop {
<ul> <ul>
<li>31 lines of code</li> <li>31 lines of code</li>
<li>A teensy bit of Javascript - I know, I'm a hypocrite</li> <li>A teensy bit of Javascript - this is currently unavoidable
<ul>
<li>But there is an open proposal for `Invoker buttons` (<a href="https://open-ui.org/components/invokers.explainer/" target="_blank" rel="noreferrer">link</a>) to address this</li>
</ul>
</li>
<li>Option to use as a popup <i>or</i> a modal</li> <li>Option to use as a popup <i>or</i> a modal</li>
<li><code>::backdrop</code> pseudo-element for easy styling</li> <li><code>::backdrop</code> pseudo-element for easy styling</li>
</ul> </ul>

39
src/slides/09-themes.md Normal file
View File

@ -0,0 +1,39 @@
## Themes
<div class="grid">
```css
:root {
--color-primary: #dedede;
--color-secondary: #adadad;
}
body {
background-color: var(--color-secondary);
color: var(--color-primary);
}
[class*="column"] {
display: flex;
flex-direction: column;
gap: var(--column-spacing, 1rem);
}
.column-sm {
--column-spacing: 0.5rem;
}
.column-lg {
--column-spacing: 1.5rem;
}
```
<div>
* A few of the examples have had theme tokens injected into Styled Components
* But we can also use CSS variables to inject our design tokens and use them everywhere
* If we redefine a variable later on in the cascade, it applies to all subcomponents
* Can also use sensible fallbacks for the instances where variables are undefined
</div>
</div>

View File

@ -9,4 +9,6 @@ type: statement
* This entire presentation, with lots of duplication, and every single slide included, is only 92kb (16kb after Gzip) * This entire presentation, with lots of duplication, and every single slide included, is only 92kb (16kb after Gzip)
* When we build new components, let's see if the browser can't do it for us instead * When we build new components, let's see if the browser can't do it for us instead
* Modern CSS is great * Modern CSS is great
* Javascript as a garnish, not a main course * Javascript as a garnish, not a main course
* Building on the fundamentals of the web and then _progressively enhancing_ means we reach more users
* And our applications will be faster and cheaper to run as a result

View File

@ -6,4 +6,4 @@ type: statement
* W3C Aria Patterns - https://www.w3.org/WAI/ARIA/apg/patterns/ * W3C Aria Patterns - https://www.w3.org/WAI/ARIA/apg/patterns/
* Every Layout - https://every-layout.dev/ * Every Layout - https://every-layout.dev/
* Web.dev - https://web.dev/ * Adrian Roselli: Patterns - https://adrianroselli.com/tag/pattern

View File

@ -75,6 +75,10 @@ main {
ul { ul {
width: 100%; width: 100%;
margin: var(--space-size-3xl) auto; margin: var(--space-size-3xl) auto;
ul {
margin: var(--space-size-sm);
}
} }
} }
@ -106,7 +110,7 @@ main {
word-wrap: word-wrap:
} }
input[type="checkbox"][data-role="toggle"] { input[type="checkbox"][role="switch"] {
appearance: none; appearance: none;
background: lightgray; background: lightgray;
border: 1px solid gray; border: 1px solid gray;