Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
{
return html`<style>h2 {color: green;}</style> <h2>Green?</h2>`;
}
{
return html`<style>h2 {color: blue;}</style> <h2>Blue</h2>`;
}
redCell = {
const dom = html`<h2>Scope your CSS</h2>`;
const css = `h2 {color: red;}`;
return scoped(dom, css);
}
purpleCell = {
const dom = html`<h2>Specify the wrapper element</h2>`;
const css = `* {color: purple;}`;
const wrapper = html`<header></header>`;
const title = scoped(dom, css, { wrapper });
return html`<article>${title}<p>Some black text</p></article>`;
}
brownCell = {
const dom = html`<header><h2>Use dom as the wrapper</h2></header>`;
const css = `* {color: brown;}`;
return scoped(dom, css, { wrapper: dom });
}
grayCell = {
const doms = [
html`<h2>Pass an iterator of dom elements</h2>`,
html`<p>A paragraph element</p>`
];
const css = `* {color: gray;}`;
return scoped(doms, css);
}
pinkCell = {
const dom = html`<h2>Specify the wrapper class</h2>`;
const css = `* {color: pink;}`;
const wrapper = html`<header></header>`;
const wrapperClass = 'pink-text';
const title = scoped(dom, css, { wrapper, wrapperClass });
const anotherDiv = html`<div class="pink-text"><h2>Also pink</h2></div>`;
return html`<article>${title}<p>Some black text</p>${anotherDiv}<p>The same class has been used out of the "scope"</p></article>`;
}
promiseCell = {
const dom = html`<h2>css can be a Promise</h2><p>The style will be applied asynchronously, when the Promise resolves. Try running this cell again.</p>`;
const css = Promises.delay(1000).then(d => `h2 {color: red;}`);
return scoped(dom, css);
}
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.
