6 ms·

How else are you going to load a hideously incorrect AI summary block without your initial page latency being through the roof?

DanielHB 2y ago
iframes?
- sideshowb 2y ago
  this is the only time in 15 years i've wished hn had a lol react. :D
  - bythreads 2y ago
    Why?, iframes are Very much underappreciated
    - DanielHB 2y ago
      Yeah, the layout would be a bit weird because the iframe would need a fixed height but it would totally work and add no latency for the main search results at all.
bythreads 2y ago
Iframes lazy Object content as lazy Embed lazy Image lazy Link rel=import (not support that widely though) Heck if you wanted to get REALLY cute you go use multipart-mixed-replace headers. Or SSE
- bythreads 2y ago
  now that i think about it you could do it quite nicely with svg's and foreignObject
- DanielHB 2y ago
  You could use some simple CSS tricks (like flex-direction: column-reverse) to make the end of the HTML render above the search results and just keep appending the AI generated text to the HTML without closing the connection.
Joeri 2y ago
You could probably get it working with declarative shadow dom, streaming in the AI generated content at the end of the html document and slotting it into place. There are no doubt a lot of gotchas but at first glance it seems feasible. Here’s a demo I found of something like that: https://github.com/dgp1130/out-of-order-streaming https://github.com/dgp1130/out-of-order-streaming
- ptx 2y ago
  The example repo is a little confusing to me, since it seems to use client-side JS to demonstrate that it doesn't need client-side JS: "It bootstraps a service worker and [...] No client-side JavaScript!" But I guess the point is that the code in the service worker could have been on the server instead? The trick seems to be using a template element with a slot and then slotting in the streamed content at the end. But you could probably also do it using just CSS to reposition the content from the bottom to the top, similarly to how many websites handle navigation menus, assuming that the client supports CSS.
  - Joeri 2y ago
    Doing it with css would only be visual positioning, so would have accessibility issues. Slotted content can have accessibility issues as well, but it is probably more solvable because screen readers will see it “slot in” at the right point in the document.

DanielHB 2y ago

iframes?

sideshowb 2y ago
this is the only time in 15 years i've wished hn had a lol react. :D
- bythreads 2y ago
  Why?, iframes are Very much underappreciated
  - DanielHB 2y ago
    Yeah, the layout would be a bit weird because the iframe would need a fixed height but it would totally work and add no latency for the main search results at all.

bythreads 2y ago

Iframes lazy Object content as lazy Embed lazy Image lazy Link rel=import (not support that widely though) Heck if you wanted to get REALLY cute you go use multipart-mixed-replace headers. Or SSE

bythreads 2y ago
now that i think about it you could do it quite nicely with svg's and foreignObject
DanielHB 2y ago
You could use some simple CSS tricks (like flex-direction: column-reverse) to make the end of the HTML render above the search results and just keep appending the AI generated text to the HTML without closing the connection.

Joeri 2y ago

You could probably get it working with declarative shadow dom, streaming in the AI generated content at the end of the html document and slotting it into place. There are no doubt a lot of gotchas but at first glance it seems feasible. Here’s a demo I found of something like that: https://github.com/dgp1130/out-of-order-streaming https://github.com/dgp1130/out-of-order-streaming

ptx 2y ago
The example repo is a little confusing to me, since it seems to use client-side JS to demonstrate that it doesn't need client-side JS: "It bootstraps a service worker and [...] No client-side JavaScript!" But I guess the point is that the code in the service worker could have been on the server instead? The trick seems to be using a template element with a slot and then slotting in the streamed content at the end. But you could probably also do it using just CSS to reposition the content from the bottom to the top, similarly to how many websites handle navigation menus, assuming that the client supports CSS.
- Joeri 2y ago
  Doing it with css would only be visual positioning, so would have accessibility issues. Slotted content can have accessibility issues as well, but it is probably more solvable because screen readers will see it “slot in” at the right point in the document.