Doug Parker 🕸️<p><span class="h-card" translate="no"><a href="https://indieweb.social/@jaredwhite" class="u-url mention">@<span>jaredwhite</span></a></span> Yeah DSD is definitely missing some useful lifecycle methods. I had to do something similar in my <a href="https://techhub.social/tags/HtmlFragments" class="mention hashtag" rel="tag">#<span>HtmlFragments</span></a> experimentation, specifically for getting streaming to work correctly.</p><p><a href="https://blog.dwac.dev/posts/streamable-html-fragments/#chunked-declarative-shadow-dom" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">blog.dwac.dev/posts/streamable</span><span class="invisible">-html-fragments/#chunked-declarative-shadow-dom</span></a></p><p>I still maintain we need a hook to know when an element is parsed, but I feel like we're losing that battle.</p><p><a href="https://github.com/WICG/webcomponents/issues/809" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">github.com/WICG/webcomponents/</span><span class="invisible">issues/809</span></a></p>
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.9Kactive users
techhub.social: About · Status · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.3.8
#HTMLFragments
0 posts · 0 participants · 0 posts today
Doug Parker 🕸️<p><span class="h-card" translate="no"><a href="https://mastodon.social/@westbrook" class="u-url mention">@<span>westbrook</span></a></span> <span class="h-card" translate="no"><a href="https://mastodon.social/@davatron5000" class="u-url mention">@<span>davatron5000</span></a></span> <span class="h-card" translate="no"><a href="https://front-end.social/@stubbornella" class="u-url mention">@<span>stubbornella</span></a></span> This proposal reminds me a lot of my <a href="https://techhub.social/tags/HtmlFragments" class="mention hashtag" rel="tag">#<span>HtmlFragments</span></a> investigation a lot while back (albeit with a very different use case in mind).</p><p><a href="https://blog.dwac.dev/posts/html-fragments/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">blog.dwac.dev/posts/html-fragm</span><span class="invisible">ents/</span></a></p><p>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:</p><p>1. <a href="https://techhub.social/tags/SSR" class="mention hashtag" rel="tag">#<span>SSR</span></a> small fragments of <a href="https://techhub.social/tags/HTML" class="mention hashtag" rel="tag">#<span>HTML</span></a> after page load.<br />2. Vertical slice of separation of concerns for a component.<br />3. Import module format (like <a href="https://techhub.social/tags/HtmlImports" class="mention hashtag" rel="tag">#<span>HtmlImports</span></a> or <a href="https://techhub.social/tags/HtmlModules" class="mention hashtag" rel="tag">#<span>HtmlModules</span></a>).<br />4. Lazy loading a component and its styles without requiring CSS-in-JS.</p><p>Kind of a smorgasbord of requirements but I can see value in the right primitive here.</p>
Doug Parker 🕸️<p>Are there any good <a href="https://techhub.social/tags/web" class="mention hashtag" rel="tag">#<span>web</span></a> conferences / meetups with an <a href="https://techhub.social/tags/RFP" class="mention hashtag" rel="tag">#<span>RFP</span></a> open in the <a href="https://techhub.social/tags/BayArea" class="mention hashtag" rel="tag">#<span>BayArea</span></a> or virtual?</p><p>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:</p><p>1. <a href="https://techhub.social/tags/HydroActive" class="mention hashtag" rel="tag">#<span>HydroActive</span></a> - A different take on hydration in an HTML-first world. <a href="https://github.com/dgp1130/HydroActive/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">github.com/dgp1130/HydroActive</span><span class="invisible">/</span></a><br />2. <a href="https://techhub.social/tags/rules_prerender" class="mention hashtag" rel="tag">#<span>rules_prerender</span></a> - A <a href="https://techhub.social/tags/Bazel" class="mention hashtag" rel="tag">#<span>Bazel</span></a> ruleset serving as a fast and scalable <a href="https://techhub.social/tags/StaticSiteGenerator" class="mention hashtag" rel="tag">#<span>StaticSiteGenerator</span></a>. <a href="https://github.com/dgp1130/rules_prerender/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">github.com/dgp1130/rules_prere</span><span class="invisible">nder/</span></a><br />3. <a href="https://techhub.social/tags/HTMLFragments" class="mention hashtag" rel="tag">#<span>HTMLFragments</span></a> - A no-tooling, web standard-based approach to HTML over the wire. <a href="https://blog.dwac.dev/posts/html-fragments/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">blog.dwac.dev/posts/html-fragm</span><span class="invisible">ents/</span></a></p><p>Greatly appreciate boosts for reach!</p>
Doug Parker 🕸️<p><span class="h-card" translate="no"><a href="https://piaille.fr/@tbroyer" class="u-url mention">@<span>tbroyer</span></a></span> 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.</p><p>I think the difference is that <a href="https://techhub.social/tags/HTMLFragments" class="mention hashtag" rel="tag">#<span>HTMLFragments</span></a> routing is technically an <a href="https://techhub.social/tags/SPA" class="mention hashtag" rel="tag">#<span>SPA</span></a> approach and keeps <a href="https://techhub.social/tags/JavaScript" class="mention hashtag" rel="tag">#<span>JavaScript</span></a> context between routes in a way that a <a href="https://techhub.social/tags/ServiceWorker" class="mention hashtag" rel="tag">#<span>ServiceWorker</span></a> navigation would not.</p><p>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:</p><p><a href="https://blog.dwac.dev/posts/html-fragments/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">blog.dwac.dev/posts/html-fragm</span><span class="invisible">ents/</span></a></p><p>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.</p>
Doug Parker 🕸️<p><span class="h-card" translate="no"><a href="https://social.jjude.com/@jjude" class="u-url mention">@<span>jjude</span></a></span> The routing demo is here:</p><p><a href="https://github.com/dgp1130/html-fragments-routing-demo/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">github.com/dgp1130/html-fragme</span><span class="invisible">nts-routing-demo/</span></a></p><p>And the original <a href="https://techhub.social/tags/HTMLFragments" class="mention hashtag" rel="tag">#<span>HTMLFragments</span></a> demo of a Twitter clone is here:</p><p><a href="https://github.com/dgp1130/html-fragments-demo" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">github.com/dgp1130/html-fragme</span><span class="invisible">nts-demo</span></a></p><p>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...</p>
Doug Parker 🕸️<p><span class="h-card" translate="no"><a href="https://toot.cafe/@tomayac" class="u-url mention">@<span>tomayac</span></a></span> 😁 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: <a href="https://blog.dwac.dev/posts/html-fragments/#ecosystem" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">blog.dwac.dev/posts/html-fragm</span><span class="invisible">ents/#ecosystem</span></a></p><p>I imagine sandboxing would make those iframes tricky to work with in a lot of respects. With <a href="https://techhub.social/tags/HTMLFragments" class="mention hashtag" rel="tag">#<span>HTMLFragments</span></a>, at least everything is in the same frame and has the same JS execution context.</p>
Doug Parker 🕸️<p>New blog post: Building a <a href="https://techhub.social/tags/router" class="mention hashtag" rel="tag">#<span>router</span></a> with <a href="https://techhub.social/tags/HTMLFragments" class="mention hashtag" rel="tag">#<span>HTMLFragments</span></a>.</p><p><a href="https://blog.dwac.dev/posts/html-fragments-routing/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">blog.dwac.dev/posts/html-fragm</span><span class="invisible">ents-routing/</span></a></p><p>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 <a href="https://techhub.social/tags/HTML" class="mention hashtag" rel="tag">#<span>HTML</span></a> (because I didn't learn my lesson last time) and even has a bonus section on shipping an application server _inside_ a <a href="https://techhub.social/tags/ServiceWorker" class="mention hashtag" rel="tag">#<span>ServiceWorker</span></a>.</p><p>Lots of interesting stuff, I hope you check it out!</p>
Doug Parker 🕸️<p>So apparently <a href="https://techhub.social/tags/Firefox" class="mention hashtag" rel="tag">#<span>Firefox</span></a> is at least partially right here. `document.write()` implicitly resets the document meaning `document.body` gets reset to `null` and recreated when <a href="https://techhub.social/tags/HTML" class="mention hashtag" rel="tag">#<span>HTML</span></a> is parsed.</p><p>My mistake was observing the `document.body` _before_ the reset, so content streams into a _new_ `<body />` element I'm not observing.</p><p>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.</p><p>There's still some weird divergences between Firefox and <a href="https://techhub.social/tags/Chrome" class="mention hashtag" rel="tag">#<span>Chrome</span></a> / <a href="https://techhub.social/tags/Safari" class="mention hashtag" rel="tag">#<span>Safari</span></a> which could probably be addressed, but I was able to make <a href="https://techhub.social/tags/HTMLFragments" class="mention hashtag" rel="tag">#<span>HTMLFragments</span></a> work at least.</p><p><a href="https://github.com/dgp1130/html-fragments-demo/commit/97901e3d0ddaf38b4ef170d81719eddb52cab090" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">github.com/dgp1130/html-fragme</span><span class="invisible">nts-demo/commit/97901e3d0ddaf38b4ef170d81719eddb52cab090</span></a></p><p>Shout out to Olli Pettay for identifying the issue so quickly!</p>
Doug Parker 🕸️<p>Playing around with streaming <a href="https://techhub.social/tags/HTMLFragments" class="mention hashtag" rel="tag">#<span>HTMLFragments</span></a> in <a href="https://techhub.social/tags/Firefox" class="mention hashtag" rel="tag">#<span>Firefox</span></a> 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. 😭 </p><p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1811782" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">bugzilla.mozilla.org/show_bug.</span><span class="invisible">cgi?id=1811782</span></a></p><p>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.</p>
Doug Parker 🕸️<p>Been playing around more with <a href="https://techhub.social/tags/HTMLFragments" class="mention hashtag" rel="tag">#<span>HTMLFragments</span></a> (blog post incoming soon) and I realized the streaming implementation is slower than it should be.</p><p><a href="https://blog.dwac.dev/posts/streamable-html-fragments/#streaming-complete-chunks" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">blog.dwac.dev/posts/streamable</span><span class="invisible">-html-fragments/#streaming-complete-chunks</span></a></p><p>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.</p><p>```javascript<br />response.write('<div id="1"></div>');<br />await timeout(1_000);<br />response.write('<div id="2"></div>');<br />```</p><p>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.</p>
ExploreLive feeds
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
Create accountLoginDrag & drop to upload