Tech Lead at Taktile.
Formerly Firebase, Google
Composing viewofs with the view literalScaling User Interface DevelopmentlocalStorageView: Non-invasive local persistanceDOM viewurlQueryFieldView: Non-invasive URL field persistenceDesign Guidelines and Linter for Reusable UI ComponentsReversible attachmentGlobally Synchronized ViewsTabbed Pane ViewMultiplayer Cursors👋 Hello, javascript-state-machine ⨯ PlotVertical SlidersDraggable LocalFile fileInputData EditorUI AnimationView Composition ExamplesComposing views across time: viewroutineHypertext literal reconciliation with nanomorphResponsive gridimgChooserDraggable Sticky viewHowto import a React component (Chonky Example)
Squeezing more Juice out of UI libraries
profile = juice((name, age) => html`Your name is ${name} your age is ${age}`, {
name: "[0]", // we index into the ...arguments array
age: "[1]"
})
viewof example = profile("tom", 21) // profile now constructs a reactive component
Inputs.bind(Inputs.range([0, 99]), viewof example.age) // so you can do granular biunding
viewof stateLostExample = dynamicRange()
stateLostExampleUpdater = {
let i = 0;
const banner = "Label updates break the slider :( ";
while (true) {
yield Promises.delay(100);
stateLostExample.label = (banner + banner).substring(i, i + 15);
i = (i + 1) % banner.length;
}
}
dynamicRange = juice(Inputs.range, {
label: "[1].label",
min: "[0][0]", // "range" is first arg (index 0), the min is the 1st arg of the range array
max: "[0][1]", // "range" is first arg, the max is the 2nd paramater of that array
result: "[1].value" // "result" can be set in the options.value, options being the 2nd arg (index 0)
})
viewof dynamicRangeExample = dynamicRange([-1, 1], { label: "dynamic range" })
dynamicRangeExample
viewof dynamicRangeMin = dynamicRange([-1, 1], {
label: "dynamic range min",
value: -1
})
viewof dynamicRangeMax = dynamicRange([-1, 1], {
label: "dynamic range max",
value: 1
})
minMaxConstraints = {
// We want dynamicRangeMax to constrain the dynamic range's max and min
Inputs.bind(viewof dynamicRangeExample.max, viewof dynamicRangeMax.result);
Inputs.bind(viewof dynamicRangeExample.min, viewof dynamicRangeMin.result);
// Of course, the max of the min should also be constrained by the max too
Inputs.bind(viewof dynamicRangeMin.max, viewof dynamicRangeMax.result);
Inputs.bind(viewof dynamicRangeMax.min, viewof dynamicRangeMin.result);
}
dynamicSelect = juice(Inputs.select, {
label: "[1].label",
options: "[0]", // "options" is first arg (index 0) of Inputs.select
result: "[1].value" // "result" can be set in the options.value, options being the 2nd arg (index 0)
})
viewof exampleSelect = dynamicSelect([], { label: "play a card" })
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.
