Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Streaming HTML out of order without JavaScript

lamplightdev.com

Post reply on HN
Print view View original

81–90 of 104 posts

Re: Streaming HTML out of order without JavaScript

#81

Post by jwells89 »

mg wrote: post #4

At the core, this seems to be about shadowrootmode=open, a new html feature which already landed in Chromium and Safari: This is and sunny funny renders as: This is funny and sunny So it looks like HTML got a bit of a native template system now. What I have been wanting for decades is a native template system in HTML which supports urls. Similar the the script tag, but which loads html: I always wondered why this was…

The lack of native HTML includes is a big reason why I picked up just enough PHP to write functional pages back in the early-mid 00s. Not having to manually propagate changes to e.g. navbars across a whole site was mind blowing.

Re: Streaming HTML out of order without JavaScript

#83

Post by Lorin »

megaman821 wrote: post #41
felixfbecker wrote: post #32

Earlier quoted context omitted.

Flexbox order doesn't affect accessibility tree order, so that's bad for accessibility. DOM order should make semantic sense.

There is a new reading order attribute coming to fix this.

Why wouldn't they just amend the existing feature so it's accessible?

Re: Streaming HTML out of order without JavaScript

#84

Post by andipodean »

msoad wrote: post #62

Let's say I streamed the first chunk with a little JavaScript, would that JavaScript be able to listen to future chunks coming in? In a real application it is crucial to be able to update your frontend state once new data is ready. First thought is [mutation observer]( https://developer.mozilla.org/en-US/docs/Web/API/MutationObs... ) but that seems too deep into the weeds

Perhaps the most horrible JavaScript I ever wrote did something like this, and has been very useful for over a decade and still going strong.

It's a log file that starts with a header: just a script tag with some JS, followed by a special string (I used a special HTML comment as a boundary indicator). The server then appends its logging to this file in a web hosted directory.

The JS periodically does an XHR of it's own location.href, polling itself. It then splits on the special boundary string, thus collecting the latest log data, parses it to generate pretty/coloured/linked HTML, and updates the current page according (and controls scrolling if required).

This gives you a log file that's continuously being appended to, but can be visited in the browser using any static file serving and automatically updates as it's populated.

Re: Streaming HTML out of order without JavaScript

#85

Post by dheera »

Devasta wrote: post #16
mg wrote: post #4

At the core, this seems to be about shadowrootmode=open, a new html feature which already landed in Chromium and Safari: This is and sunny funny renders as: This is funny and sunny So it looks like HTML got a bit of a native template system now. What I have been wanting for decades is a native template system in HTML which supports urls. Similar the the script tag, but which loads html: I always wondered why this was…

https://www.w3.org/TR/xinclude The W3C specced something out around 20 years ago, but browser devs are allergic to all things XML.

[flagged]

Re: Streaming HTML out of order without JavaScript

#86

Post by davepeck »

Fun stuff!

The underlying `swtl` library is itself pretty interesting.

Note the use of `delayed(...)` in the blog's example code: a promise in a tagged template.

SWTL's `html` allows for this (I think the blog's example follows the simple case here https://github.com/thepassle/swtl/blob/main/html.js#L23). And SWTL's `render` method races the promises (https://github.com/thepassle/swtl/blob/main/render.js#L120) outward.

Re: Streaming HTML out of order without JavaScript

#87

Post by its-summertime »

msoad wrote: post #62

Let's say I streamed the first chunk with a little JavaScript, would that JavaScript be able to listen to future chunks coming in? In a real application it is crucial to be able to update your frontend state once new data is ready. First thought is [mutation observer]( https://developer.mozilla.org/en-US/docs/Web/API/MutationObs... ) but that seems too deep into the weeds

Mutation observer is pretty easy once you get used to it, just look for data you care about and ignore the rest.

Alternatively, I think slotting raises an event, so you could use js to remove the pre-existing content when new content gets added

Re: Streaming HTML out of order without JavaScript

#88

Post by paulddraper »

easyThrowaway wrote: post #11
mg wrote: post #4

At the core, this seems to be about shadowrootmode=open, a new html feature which already landed in Chromium and Safari: This is and sunny funny renders as: This is funny and sunny So it looks like HTML got a bit of a native template system now. What I have been wanting for decades is a native template system in HTML which supports urls. Similar the the script tag, but which loads html: I always wondered why this was…

This looks exactly like svelte named slots syntax: https://blog.logrocket.com/comprehensive-guide-svelte-compon...

And that's not a coincidence; svelte chose to borrow that concept from Web Components.

Re: Streaming HTML out of order without JavaScript

#89

Post by paulddraper »

felixfbecker wrote: post #32
quickthrower2 wrote: post #26

You could possibly do this using a flexbox? https://developer.mozilla.org/en-US/docs/Web/CSS/order

Flexbox order doesn't affect accessibility tree order, so that's bad for accessibility. DOM order should make semantic sense.

And how is for accessibility?

Re: Streaming HTML out of order without JavaScript

#90

Post by _heimdall »

Lorin wrote: post #83
megaman821 wrote: post #41

Earlier quoted context omitted.

There is a new reading order attribute coming to fix this.

Why wouldn't they just amend the existing feature so it's accessible?

Backwards compatibility I'd assume. Someone could have taken advantage of the fact they flex order and accessibility order are different.

Changing the functionality now would break those sites, adding a new CSS prop would make the fix opt-in.

Post reply on HN