* 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?
* 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
* 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
* No meaningful labels possible!
* No keyboard navigation
* No Javascript? No component
</div>

View File

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

View File

@ -51,7 +51,11 @@ dialog::backdrop {
<ul>
<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><code>::backdrop</code> pseudo-element for easy styling</li>
</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)
* When we build new components, let's see if the browser can't do it for us instead
* 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/
* 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 {
width: 100%;
margin: var(--space-size-3xl) auto;
ul {
margin: var(--space-size-sm);
}
}
}
@ -106,7 +110,7 @@ main {
word-wrap:
}
input[type="checkbox"][data-role="toggle"] {
input[type="checkbox"][role="switch"] {
appearance: none;
background: lightgray;
border: 1px solid gray;