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 FormsNotebook TeasersStraight Skeleton - Reference PathsGIF Converter (canvas & SVG)Arguments Widget2D SliderMonitorSignature - A Documentation ToolkitDashboard with InputsDashboard
Sticky Positioning
{
const sidebar = html`<div class=sidebar>
<p><strong>A sticky sidebar</strong></p>
<p style="max-width:200px;padding-top:3em">It has some content to stretch its height.`;
const container = html`<div class=container style="height:1500px">${sidebar}`;
const unstick = makeSticky(container, sidebar, options);
invalidation.then(unstick);
return container;
}
function makeSticky(context, element, {transition = 75, offset = 0, ease = 'ease-in'} = {}) {
element.style.position = 'absolute';
element.style.transition = `top ${transition}ms ${ease}`;
return observeViewport((top, bottom) => {
const rc = context.getBoundingClientRect();
const rs = element.getBoundingClientRect();
element.style.top = clamp(0, rc.height - rs.height, top - rc.top + offset) + 'px';
});
}
function observeViewport(callback) {
let top = -1, bottom = -1, raf;
const observer = new IntersectionObserver(([e]) => {
const t = e.intersectionRect.top;
const b = e.intersectionRect.bottom;
if(t !== top || b !== bottom) {
top = t;
bottom = b;
callback(top, bottom);
}
observer.unobserve(target);
raf = requestAnimationFrame(observe);
});
const target = document.documentElement;
const observe = () => observer.observe(target);
observe();
// Disconnect callback.
return () => {
cancelAnimationFrame(raf);
observer.disconnect();
}
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.