Tech Lead at Taktile.
Formerly Firebase, Google
viewof config = Inputs.input()
businessLogic = {
yield htl.svg`<svg style="position: fixed;top:0px;height:100%" viewBox="0 0 1 1">
<rect width="1" height="1" fill=${config.color} />
</svg>`;
await new Promise((resolve) => setTimeout(resolve, 100));
yield undefined;
}
viewof source1 = Inputs.button("source1: red", {
required: true,
reduce: () => ({
color: "#f002"
})
})
source1
viewof source2 = Inputs.input()
viewof var2 = Inputs.button("var2: yellow", {
required: true,
reduce: () => ({
color: "#ff04"
})
})
copyVar2IntoSource2 = {
viewof source2.value = var2;
viewof source2.dispatchEvent(new Event("input", { bubbles: true }));
}
source2
connectSources = {
// Note these appear to be wired backwards!
// Source is in the target argument slot!
// Bind is not symmetrical!
Inputs.bind(viewof source1, viewof config, invalidation);
Inputs.bind(viewof source2, viewof config, invalidation);
}
<style>
code {
border-radius: 20px;
padding: 4px;
background-color: #f5f5f5;
}
</style>
import { footer } from "@tomlarkworthy/footer"
footer
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
