From DHTML
to CSS Variables
@davidkpiano · Flashback Conference 2020
setInterval(move, 25)
requestAnimationFrame(move)
no idea
60 FPS
2012 →
document.body.appendChild(o)
var
let
const
<DIV ID="oDiv"
STYLE="background-color: #CFCFCF; position: absolute;
left: expression(document.body.clientWidth / 2 - oDiv.offsetWidth / 2);
top: expression(document.body.clientHeight / 2 - oDiv.offsetHeight / 2)">
Example DIV
</DIV>CSS Expressions (IE7)
<style type="text/javascript">
tags.H1.color = "red";
tags.p.fontSize = "20pt";
with (tags.H3) {
color = "green";
}
with (tags.H2) {
color = "red";
fontSize = "16pt";
marginTop = "4cm";
}
</style>JavaScript Style Sheets (Netscape 4)
CSS Custom Properties
--color-primary: blue;<h1 style="--color-primary: blue;">
Hello Orlando
</h1>:root {
--color-primary: blue;
}h1 {
color: var(--color-primary, red);
}section {
--color-primary: green;
}Custom Property
Value
Default
.box {
--delta-x: 150px;
}CSS
.box {
--delta-x: 150px;
transform: translateX(
var(--delta-x));
}CSS
.box {
--delta-x: 150;
transform: translateX(
calc(var(--delta-x) * 1px));
}
CSS
.box {
transform:
translateX(calc(var(--delta-x) * 1px));
}
const box = document.querySelector('#box');
const hBox = new Hammer(box);
hBox.on('panleft panright', (e) => {
box.style
.setProperty('--delta-x', e.deltaX);
});
hBox.on('panend', () => {
box.style
.setProperty('--delta-x', 0);
});CSS
JAVASCRIPT
.box {
--not-panning: calc(-1 * var(--panning) + 1);
transition:
transform
calc(var(--not-panning) * .6s)
ease-out;
transform:
translateX(calc(var(--delta-x) * 1px))
rotate(calc(var(--delta-x) * .1deg));
}
const box = document.querySelector('#box');
const hBox = new Hammer(box);
hBox.on('panleft panright', (e) => {
box.style
.setProperty('--delta-x', e.deltaX);
box.style
.setProperty('--panning', 1); // true
});
hBox.on('panend', () => {
box.style
.setProperty('--delta-x', 0);
box.style
.setProperty('--panning', 0); // false
});CSS
JAVASCRIPT
calc(-1 * var(--panning) + 1) -1 * 1 + 1 = 0 -1 * 0 + 1 = 1
I warned you there would be lots of demos
CSS
CSSS
State
Normal
Hover
Active
Disabled
Success
Error
Loading
Loading
<button class="button loading">
Fetching data...
</button>I wasn't always good at JavaScript.
input[type="checkbox"] {
/* ... */
}
input[type="checkbox"] ~ #app {
/* ... */
}
input[type="checkbox"] ~ #app .box {
background-color: white;
}
input[type="checkbox"]:checked
~ #app .box {
background-color: blue;
}~
checkbox
#app
.box
~
Adjacent sibling selector
label for="..."
label for="..."
checkboxes
radios
Zero or more
One at a time
<button class="loading">
Fetching data...
</button>
<button class="success">
Fetched data!
</button>
<button class="loading success">
Fetched data...?
</button>
Is there a better way to model
state for dynamic UIs?
User flows are transitions
between UI states
due to events
Finite state machines
and statecharts
A state is a dynamic property expressing characteristics of an object that may change in response to user action or automated processes.
- aria-busy
- aria-current
- aria-disabled
- aria-grabbed
- aria-hidden
- aria-invalid
States do not affect the essential nature of the object, but represent data associated with the object or user interaction possibilities.
:state(...) {
/* ... */
}:hover
:invalid
:active
:focus
:empty
:checked
Data Attributes
<button data-state="loading">
Fetching data...
</button>
button[data-state="loading"] {
opacity: 0.5;
}elButton.dataset.state; // 'loading'
elButton.dataset.state = 'success';
delete elButton.dataset.state;HTML
CSS
JavaScript
<button data-state="success">
Fetched data!
</button>
<button>
Fetch data
</button>
Data Attributes
<button data-state="idle">
Fetch data
</button>
<button data-state="loading">
Fetching data...
</button>
<button data-state="success">
Fetched data!
</button>
<button data-state="error">
Failed to fetch data
</button>Loading
Success
Resolve
Initial state
States
Events
Transitions
Final State
Failed
REJECT
RETRY
Finite state machine
Define transitions between
states & events
function searchReducer(state = 'idle', event) {
switch (state) {
case 'idle':
switch (event.type) {
case 'SEARCH':
return 'searching';
default:
return state;
}
case 'searching':
switch (event.type) {
case 'RESOLVE':
return 'success';
case 'REJECT':
return 'failure';
default:
return state;
}
case 'success':
switch (event.type) {
case 'SEARCH':
return 'searching';
default:
return state;
}
case 'failure':
switch (event.type) {
case 'SEARCH':
return 'searching';
default:
return state;
}
default:
return state;
}
}FSMs with switch/case
const machine = {
initial: 'idle',
states: {
idle: {
on: { SEARCH: 'searching' }
},
searching: {
on: {
RESOLVE: 'success',
REJECT: 'failure',
SEARCH: 'searching'
}
},
success: {
on: { SEARCH: 'searching' }
},
failure: {
on: { SEARCH: 'searching' }
}
}
};Define transitions between
states & events
const transition = (state, event) => {
return machine
.states[state] // current state
.on[event] // next state
|| state; // or same state
}FSMs with object mapping
npm install xstate
const machine = {
initial: 'idle',
states: {
idle: {
on: { SEARCH: 'searching' }
},
searching: {
on: {
RESOLVE: 'success',
REJECT: 'failure',
SEARCH: 'searching'
}
},
success: {
on: { SEARCH: 'searching' }
},
failure: {
on: { SEARCH: 'searching' }
}
}
};import { Machine } from 'xstate';
const machine = Machine({
initial: 'idle',
states: {
idle: {
on: { SEARCH: 'searching' }
},
searching: {
on: {
RESOLVE: 'success',
REJECT: 'failure',
SEARCH: 'searching'
}
},
success: {
on: { SEARCH: 'searching' }
},
failure: {
on: { SEARCH: 'searching' }
}
}
});idle
dragging
pan
panstart
panend
(assign dx, dy)
(assign x, y)
<main data-state="loading" data-prev-state="idle">
idle
loading
error
<main data-state="loading" data-prev-state="error">
const elApp = document.querySelector('#app');
function setAppState(state) {
// change data-state attribute
elApp.dataset.prevState = elApp.dataset.state;
elApp.dataset.state = state;
// ...
}✨✨✨
💥💥💥
[data-state="loading"][data-prev-state="idle"] {
/* loading initially */
}
[data-state="loading"][data-prev-state="error"] {
/* loading after error */
}<main
data-state="success"
data-transition="loading success"
>
</main>[data-transition^="loading"] {
/* from "loading" */
}
[data-transition="loading success"] {
/* from "loading" to "success" */
}HTML
CSS
previous state
current state
start
selecting
selected
dragging
disposed
grabbing
disposed
data-state="idle"
data-show="loading"
data-hide="loading"
data-active
data-active
active when app is in "loading" state
inactive when app is in "loading" state
data-state="loading"
const elApp = document.querySelector('#app');
function setAppState(state) {
// change data-state attribute
elApp.dataset.state = state;
// remove any active data-attributes
document.querySelectorAll(`[data-active]`)
.forEach(el => {
delete el.dataset.active;
});
// add active data-attributes to proper elements
document
.querySelectorAll([
`[data-show~="${state}"]`,
`[data-hide]:not([data-hide~="${state}"])`
].join(','))
.forEach(el => {
el.dataset.active = true;
});
}
// set button state to 'loading'
setAppState('loading');[data-show~="${state}"]
[data-hide]:not([data-hide~="${state}"])
Think in transitions
not just events,
not just state.
The world of statecharts
Spectrum community
XState Documentation
Make your code do more.
@davidkpiano · Flashback Conference 2020
Thank you Orlando!
From DHTML to CSS Variables
By David Khourshid
From DHTML to CSS Variables
Flashback Conf
