Let's make the worst htmx ever

12 points by rslabbert


andersmurphy

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.