Tech Lead at Taktile.
Formerly Firebase, Google
CORS Proxy fetchpAutomatically Backup Observable notebooks to GithubStarting Github Action Workflows From ObservableFirebase and Firebase UI (v8)Detect notebook runtime errors with catchAll((cellName, reason) => {...})notebookSnapshot()Reactive Unit Testing and Reporting FrameworkBulmaStripeRidiculously Rapid Software-as-a-Service (SaaS) development with Observable, Firebase and StripeUsing Express Router for Serverside CellsAWS Serverless Notebooks SimplifiedSVG Timeseries to GIFMetaprogramming with Peek [Not recommended for production user]AWS HelpersMixed Integer / Linear ProgrammingRedis Serialization Protocol (RESP) Client for the Web👋 Hello NunjucksThe Google 'VS' trickaws4fetch@observablehq/inspector@5.0.1escodegen@2.1.0SortableJSTextFit@2.4.0CodeMirror 6 + Javascriptgolden-layout@2.6.0Observable Runtime (v5)
trackParent and preserveFocus
Inputs.button("dettach", { reduce: () => domNode.remove() })
reparent_randomly = {
if (random) {
while (true) {
const pick = Math.floor(Math.random() * 3);
document.querySelectorAll("button")[pick].click();
yield new Promise((r) => setTimeout(r, 3000));
}
}
}
preserveFocus = (node) => {
let lastFocused = null;
function onFocus(e) {
if (node.contains(e.target)) {
lastFocused = e.target;
} else {
lastFocused = null;
}
}
function onPointerDown(e) {
if (!node.contains(e.target)) {
lastFocused = null;
}
}
document.addEventListener("pointerdown", onPointerDown, true);
document.addEventListener("focus", onFocus, true);
const stopWatchingConnection = trackParentChain(
node,
() => {
if (lastFocused && node.contains(lastFocused)) {
//console.log("restore focus");
lastFocused.focus();
} else {
// console.log("skip focus", node.contains(lastFocused), lastFocused);
}
},
() => {}
);
// Dispose
return () => {
document.removeEventListener("pointerdown", onPointerDown, true);
document.removeEventListener("focus", onFocus, true);
stopWatchingConnection();
};
}
invalidation.then(preserveFocus(domNode))
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.
