Over 2 decades of experience on the Web…
Public
Edited
Jul 17, 2023
Paused
viewof pixelEstate = Inputs.input(probe())
pixelEstate
onOrientationChange = screen.orientation && (window.onresize = snoop)
probe = () =>
((mode = ["portrait", "landscape"][+(screen.width > screen.height)]) =>
Object.freeze(
Object.assign(
{
color: query.matches,
depth: screen.colorDepth,
mode
},
/\blandscape\b/i.test(mode)
? {
width: Math.max(screen.availHeight, screen.availWidth),
height: Math.min(screen.availHeight, screen.availWidth)
}
: {
width: screen.availWidth,
height: screen.availHeight
}
)
))(screen.orientation?.type)
query = window.matchMedia("(min-color: 8)")
query.addListener
? query.addListener(snoop)
: query.addEventListener("change", snoop)
snoop = (e) =>
((input) => (
(input.value = probe()),
input.dispatchEvent(new Event("input", { bubbles: true }))
))(viewof pixelEstate)
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.
