Web developer and autodidact with an interest in creative coding.
Inputs.table() with Colored RowsLinking Multiple RangesAuto-Sort InputsDate and Offset SlidersSubmittable Input FormsDOM InspectorCustom InspectorsSnap A Slider To ValuesChecking a version's publish dateEfficient ResponsivenessSortable Notebook ListDisplaying ProgressRange SliderSearch Results PagingMonitoring EventsPrime Numbers SliderMutable FormsSticky PositioningStraight Skeleton - Reference PathsGIF Converter (canvas & SVG)Arguments Widget2D SliderMonitorSignature - A Documentation ToolkitDashboard with InputsDashboard
Notebook Teasers
teaserList(example_docs)
html`<div id="my-id" style="max-width: 350px">
${renderTeaser(example_docs[3])}
${getScopedStyle('#my-id', THEME_TEASERS)}
`
html`<div id="my-id" style="max-width: 250px">
${renderTeaser({
title: 'Remember notebooks?',
image: 'https://i.imgur.com/uw9hFtj.png',
href: 'https://en.wikipedia.org/wiki/Moleskine',
date_short: 'A long time ago',
})}
${getScopedStyle('#my-id', THEME_TEASERS)}
`
html`
${getScopedStyle('#my-ul', `
:scope .owner, :scope .likes {display: none}
:scope .date:before {content: "("}
:scope .date:before {content: "("}
:scope .date:after {content: ")"}
`)}
<ul id=my-ul>
${example_docs.slice().sort((a,b) => b.update_time - a.update_time).map(doc => html`<li>${renderTeaser(doc)}`)}
`
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.
