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 ComponentsSqueezing more Juice out of UI librariesReversible 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 view
Howto import a React component (Chonky Example)
chonky = require.alias({
react: React, // We are bringing these from @j-f1/react
"react-dom": ReactDOM
})(await FileAttachment("chonky-amd@2.js").url())
chonky_icons = require.alias({
react: React // We are bringing these from @j-f1/react
})(await FileAttachment("chonky-icons-amd@1.js").url())
files = [
{ id: 'lht', name: 'Projects', isDir: true },
{
id: 'mcd',
name: 'chonky-sphere-v2.png',
thumbnailUrl: 'https://chonky.io/chonky-sphere-v2.png'
}
]
chonky_defaults = chonky.setChonkyDefaults({
iconComponent: chonky_icons.ChonkyIconFA
})
folderChain = [{ id: 'xcv', name: 'Demo', isDir: true }]
{
chonky_defaults; // Ensure our font is loaded
return render(
// We can use j-f1's JSX and depend on our imported React component!
() =>
jsx`<${chonky.FullFileBrowser} files=${files} folderChain=${folderChain}></>`
);
}
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.
