Published
Edited
Nov 14, 2021
1 star
md`# Hello, diffhtml!`
container = DOM.element('div')
__renderLoop = {
function render() {
innerHTML(container, `<div id="container">
<h2 id="title">Hello world!</h2>
It's <span>${new Date().toLocaleString()}</span> now.
<em>Powered by <a href="https://diffhtml.org/">diffhtml</a>.</em>
</div>`)
}
render()
const timer = setInterval(render, 1000)
invalidation.then(() => {
release(container)
clearInterval(timer)
})
}
{
__renderLoop
let target = container.querySelector('#title')
let opac = 0
const interv = 50
function update() {
opac = (opac + 1) % interv
target.style.opacity = Math.sin(opac / interv * 2 * Math.PI) / 2 + .5
handle = requestAnimationFrame(update)
}
let handle
invalidation.then(() => cancelAnimationFrame(handle))
update()
}
diffhtml = import('diffhtml')
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.
