Let's make the worst htmx ever
12 points by rslabbert
12 points by rslabbert
Nice article.
Personally, I normally start with immediate mode over the wire to turn the browser into a screen:
// PICOSTAR
let es;
const tabid = self.crypto.randomUUID().substring(0,8)
function initEventSource() {
es = new EventSource(window.location.pathname + 'stream' + (window.location.search + '&tabid=' + tabid).replace(/^&/,'?'))
es.onmessage = (e) => {
document.getElementsByTagName('body')[0].outerHTML = e.data
}
es.onerror = (e) => {
es.close()
}
}
initEventSource()
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
es.close()
} else {
initEventSource()
}
})
document.addEventListener("mousedown", (e) => {
const action = e.target.dataset.action
if (action) {
fetch(action, { method: "POST" })
}
})
You then stream html frames over SSE and rely on streaming brotli/zstd to make your bandwidth super efficient.
Then you add morph instead of replace (handles focus, scroll position etc).
Tada your browser is a screen.