Recent searches

No recent searches

Search options

Only available when logged in.
techhub.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A hub primarily for passionate technologists, but everyone is welcome

Administered by:

Server stats:

4.6K
active users

techhub.social: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.2

#HTMLFragments

0 posts0 participants0 posts today
Replied in thread
*
Doug Parker 🕸️

@jaredwhite Yeah DSD is definitely missing some useful lifecycle methods. I had to do something similar in my experimentation, specifically for getting streaming to work correctly.

blog.dwac.dev/posts/streamable

I still maintain we need a hook to know when an element is parsed, but I feel like we're losing that battle.

github.com/WICG/webcomponents/

blog.dwac.devStreamable HTML Fragments - Devel without a CauseHTML fragments part 2: Streaming tweets. Search the far corners of web standards to learn how we can *stream* HTML fragments directly into the DOM.
Replied in thread
Doug Parker 🕸️

@westbrook @davatron5000 @stubbornella This proposal reminds me a lot of my investigation a lot while back (albeit with a very different use case in mind).

blog.dwac.dev/posts/html-fragm

I wonder if there is a potential path for this proposal which is less "Vue in the browser" and more "a primitive SFC format which frameworks can compile to". I wonder if this could solve multiple problems:

1. small fragments of after page load.
2. Vertical slice of separation of concerns for a component.
3. Import module format (like or ).
4. Lazy loading a component and its styles without requiring CSS-in-JS.

Kind of a smorgasbord of requirements but I can see value in the right primitive here.

blog.dwac.devA Simpler HTML-over-the-Wire - Devel without a CauseIs it possible to build an HTML-over-the-wire application with only native web technologies? See how far can we go with zero custom tooling, and how the web specification can change to support it.
Doug Parker 🕸️

Are there any good conferences / meetups with an open in the or virtual?

There are a few projects I've been working on which I'd love to give talks about and share with the community (not Angular related). Could be talking about any/all of:

1. - A different take on hydration in an HTML-first world. github.com/dgp1130/HydroActive/
2. - A ruleset serving as a fast and scalable . github.com/dgp1130/rules_prere
3. - A no-tooling, web standard-based approach to HTML over the wire. blog.dwac.dev/posts/html-fragm

Greatly appreciate boosts for reach!

An experimental library for hydrating web components and adding "sprinkles of reactivity" to pre-rendered HTML. - dgp1130/HydroActive
GitHubGitHub - dgp1130/HydroActive: An experimental library for hydrating web components and adding "sprinkles of reactivity" to pre-rendered HTML.An experimental library for hydrating web components and adding "sprinkles of reactivity" to pre-rendered HTML. - dgp1130/HydroActive
Replied in thread
Doug Parker 🕸️

@tbroyer Thanks for sharing that. I'd heard of the approach but don't think I'd read that article specifically. The performance metrics are very interesting.

I think the difference is that routing is technically an approach and keeps context between routes in a way that a navigation would not.

HTML Fragments as a concept is also a little more flexible beyond rendering full pages. It allows you to dynamically render individual components instead of a full page. For example, you can use it to infinite scroll a list, or edit an item of the list and rerender on the server without invalidating the whole page. This is discussed more in the original post:

blog.dwac.dev/posts/html-fragm

For a fully static site with a lot of content, I think the service worker approach could work well, while HTML fragments provides a bit more interactivity.

blog.dwac.devA Simpler HTML-over-the-Wire - Devel without a CauseIs it possible to build an HTML-over-the-wire application with only native web technologies? See how far can we go with zero custom tooling, and how the web specification can change to support it.
Replied in thread
Doug Parker 🕸️

@jjude The routing demo is here:

github.com/dgp1130/html-fragme

And the original demo of a Twitter clone is here:

github.com/dgp1130/html-fragme

Which links are dead? The post is pretty new, so I would hope anything I referenced is still up, but maybe I typo-d something...

GitHubGitHub - dgp1130/html-fragments-routing-demoContribute to dgp1130/html-fragments-routing-demo development by creating an account on GitHub.
Replied in thread
Doug Parker 🕸️

@tomayac 😁 I hadn't heard of "mini apps", I'll have to read more in that series, but the use of iframes sounds very similar. It reminds me a bit of the `embed` element I proposed here: blog.dwac.dev/posts/html-fragm

I imagine sandboxing would make those iframes tricky to work with in a lot of respects. With , at least everything is in the same frame and has the same JS execution context.

blog.dwac.devA Simpler HTML-over-the-Wire - Devel without a CauseIs it possible to build an HTML-over-the-wire application with only native web technologies? See how far can we go with zero custom tooling, and how the web specification can change to support it.
Doug Parker 🕸️

New blog post: Building a with .

blog.dwac.dev/posts/html-fragm

This explorers how we can use HTML fragments to define routes, load them dynamically, and then apply them to the main page content. It talks about more complexities with streaming (because I didn't learn my lesson last time) and even has a bonus section on shipping an application server _inside_ a .

Lots of interesting stuff, I hope you check it out!

blog.dwac.devHTML Fragments Routing - Devel without a CauseLet's build a router by fetching each route as an HTML fragment!
Continued thread
Doug Parker 🕸️

So apparently is at least partially right here. `document.write()` implicitly resets the document meaning `document.body` gets reset to `null` and recreated when is parsed.

My mistake was observing the `document.body` _before_ the reset, so content streams into a _new_ `<body />` element I'm not observing.

The solution is to `document.open()` explicitly to reset the document early, _and then_ observe `document.body`. Subsequent `document.write()` calls will append to that `<body />` tag and trigger mutations.

There's still some weird divergences between Firefox and / which could probably be addressed, but I was able to make work at least.

github.com/dgp1130/html-fragme

Shout out to Olli Pettay for identifying the issue so quickly!

GitHubAdd Firefox support to streaming use case. · dgp1130/html-fragments-demo@97901e3Firefox didn't work for streaming use cases and would never trigger the `MutationObserver`. This appears to be because `doc.write()` implicitly calls `doc.open()` if it wasn't explicitly ca...
Doug Parker 🕸️

Playing around with streaming in and discovered my whole demo doesn't work because of one small Firefox bug: It doesn't trigger `MutationObserver` on `document.write()` for an inner document. 😭

bugzilla.mozilla.org/show_bug.

Hopefully it's something which can be fixed relative easily, but I'm worried it'll fall through the cracks as one of those "not that important because why would you ever do that" bugs.

bugzilla.mozilla.org1811782 - `document.write()` does not trigger `MutationObserver` of `document.implementation.createHTMLDocument()`UNCONFIRMED (nobody) in Firefox - Untriaged. Last updated 2023-01-22.
*
Doug Parker 🕸️

Been playing around more with (blog post incoming soon) and I realized the streaming implementation is slower than it should be.

blog.dwac.dev/posts/streamable

If you stream two nodes with a delay between them, the first node actually won't stream at all! They'll both appear at once.

```javascript
response.write('<div id="1"></div>');
await timeout(1_000);
response.write('<div id="2"></div>');
```

This is because we use a `MutationObserver` and detect the addition of `#2` to know that `#1` is done parsing. However `#2` doesn't exist until 1 second after `#1` was sent. So in any realistic streaming scenario, the last element is displayed one batch later than it should.

blog.dwac.devStreamable HTML Fragments - Devel without a CauseHTML fragments part 2: Streaming tweets. Search the far corners of web standards to learn how we can *stream* HTML fragments directly into the DOM.
TrendingLive feeds
About