westbrook

Open web enthusiast. Maker of things with HTML, CSS & JS. Trombonist. Food lover. 日本語OK. Opinions are owned by no one but my myself.

Website: https://westbrookjohnson.com
Music: https://music.kwjtrio.com
Blog: https://blog.westbrookjohnson.com
Other writing: https://dev.to/westbrook

Public Key

npub1grga79etqqhwemfcfels4n6zwacm7ch3w7604fh9dmrqscp444fsq82ql9

NIP-05 Address

[email protected]

Profile Code

nprofile1qqsyp5wlzu4sqthva5uyulc2eap8wudlvtch0d865mjka3sgvq6665cpz3mhxue69uhhyetvv9ujuerpd46hxtnfduqs6amnwvaz7tmwdaejumr0dszhgjtj

Publishing to

nostr.wine

relay.damus.io

nos.lol

Author Public Key

npub1grga79etqqhwemfcfels4n6zwacm7ch3w7604fh9dmrqscp444fsq82ql9

Show more details

Last Notes

2026-03-20 21:18:32 GMT

- reply

108 screws! 🤯

2026-01-13 17:57:44 GMT

- reply

Just wait till I turn my hat backwards and you see me work 10x harder!
🤪

2026-01-13 16:39:15 GMT

- reply

👆 Look at this smart guy being all smart like.

2026-01-03 18:50:15 GMT

- reply

Even worse you could swap in Iran and Ayatollah and the level of truth wouldn’t vary much… 😖

2025-11-07 00:25:18 GMT

- reply

This one has various proposals or explains, but never seem to get any traction/progress:
<include src="./header.html" />
I want to build my HTML pages from HTML fragments without needing JS or a build pipeline. Seems like it would be so easy and so popular, both assumptions (real or imagined) that likely have made it harder to land (real or imagined) for the number of cooks it brings to the kitchen...

2025-10-21 00:47:43 GMT

- reply

Sadly, no.
We're supposed to be able to do this...one day:
@custom-media --narrow-window (max-width: 30em);
@npub1ckf…3vj3 (--narrow-window) {
/* narrow window styles */
}
I polyfil it out with LightningCSS right now, and hopefully the light movement on this feature in browser bugs gets us there before too long. 🤞

2025-08-07 18:56:31 GMT

Because the world should be a slightly better place, and that includes the often greater that 1/3 of my week where working is happening, let people know how you feel about HTML at https://survey.devographics.com/en-US/survey/state-of-html/2025/ Future us's will thank us. 🤨
#webDev #webComponents #webComponentsCG #testTheWebForward

2025-07-04 00:31:38 GMT

Last to notice…or first?
Disney’s Marvel content has been leaning hard on the magic as of late in preparation for a pending tie in to the “magic kingdom”! 🤯✨

2025-06-28 00:52:57 GMT

- reply

Great point, there are lots of places that support this sort of portability, but quite often it seems like it is more because that portability allowed them a bite at an entrenched competitors pie, more than anything else. Sheets and Slider are actually pretty good examples, however, if that their "open format" allowed people to see how the other half lived over the course of years before they were functionally equal to or out pacing the work being done by the Excel/PPT teams.

2025-06-27 22:31:19 GMT

Is there such a thing as a product team that so ruthlessly pursues the best possible version of the product they are targeting that they up the challenge on themselves to do so by making all of their user data super easily exported and ported into competitor products? 🤔
Questioning the meaning of "sticky" in the context of product development. No one likes a sticky floor, why do we like our product that way?
#webDev #productDevelopment #beBetterThanWalls

2025-06-03 19:35:32 GMT

It's not really the same submitting to the weekly [@reveai.bsky.social](https://bsky.brid.gy/r/https://bsky.app/profile/reveai.bsky.social ) image challenge without more of yall joining in the fun. Get to creating some at https://preview.reve.art and then submit your best "images that highlight stunning places in nature, from national parks to beautiful gardens" to https://discord.gg/h33aHk7E
#naturalWorld #aiArt #photography #spiderWeb
https://files.mastodon.social/media_attachments/files/114/621/095/214/518/471/original/8a3688c202a57fe8.png

2025-04-11 18:04:58 GMT

- reply

Always my favorite `git` typo: https://r-wos.org/hacks/gti

2025-02-05 17:38:05 GMT

- reply

I'm not saying this is because I didn't get you anything for your birthday, but I'm also not saying it isn't because of that...
https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/
#webComponents #webComponentsCG #webDev #customElements #shadowDOM

2025-02-05 13:28:22 GMT

- reply

In general, if you have work that belongs in `connectedCallback()` then you either need to clean it up in `disconnectedCallback()` (which means it can happen again with no issues), move to the future and use `moveBefore()` https://caniuse.com/mdn-api_element_movebefore (no disconnection), leverage `<slot>`s and shadow DOM (no disconnection), or _know_ that you are going to be wrapping the element in the same tree and gate the `connectedCallback()` work on that knowledge (managed disconnection).

2025-02-05 13:16:43 GMT

- reply

do you have a minimal repro to better understand what you’re running into?

2025-01-30 12:23:24 GMT

Super excited to see (after years of my involvement and maybe decade of [@sundress](https://eigenmagic.net/@sundress )’s along with MANY other passionate and patient individuals) the web getting a little more accessible: https://github.com/WebKit/WebKit/pull/39742 🥹
#webComponents #a11y #webComponentsCG #w3c

2024-12-31 04:09:44 GMT

- reply

...don't. 🤪 I mean when is it actually not a hack to render an iframe? Like, really? 😬

2024-12-31 03:52:05 GMT

- reply

Well color me embarrassed. I'm not sure at all what that is or whether that's a real API or not. 🙈 I was looking to share this: https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTMLUnsafe Which is an API, is/was Mozilla, and while pretty new is pretty widely available.

2024-12-31 03:27:23 GMT

- reply

For at least the `innerHTML` part of this, is the smell dispersed by leveraging https://webdocs.dev/en-us/docs/web/api/element/sethtml instead?

2024-12-19 03:28:28 GMT

- reply

Maybe… not immediately clear if this moves all the way to DOM level APIs, which is where I was more thinking, but it seems like an exciting start. I hope I have time to dig deeper on this. Thanks for sharing!

2024-12-19 01:39:51 GMT

- reply

Would it be completely crazy to ask for an expansion of the w3c that somehow covered the API surface of the servers that delivery websites? 🙈
Does that make me crazy? 🤔

2024-12-11 22:08:55 GMT

- reply

So, immigrants just need to incorporate as a group? 🤔

2024-11-09 22:29:10 GMT

Excited to see Vite catching up to the modern web platform!!! https://github.com/vitejs/vite/discussions/18534
#importAttributes #webDrv

2024-11-07 03:46:56 GMT

- reply

would it make the nightmare end if I did?

2024-11-07 02:49:59 GMT

So, like…fuck, right?

2024-11-05 02:16:47 GMT

- reply

Glad to hear I am not the only one. My goal (too) is for it to on defined (or imported) once and used in each element that needs it. Let's push things in that direction in the spec'ing process!! 💪
My understanding is that the team working on this things at Edge are looking to pivot to HTML Module Scripts as soon as they can get the Declarative CSS Module Scripts work on the path to shipping. 🤞
#webComponentCG

2024-11-05 01:45:52 GMT

- reply

<swim-lane>
<template shadowrootadoptedstylesheets="./swim-lane.css" shadowroothtml="./swim-lane.html"></template>
<h2 slot="title">...</h2>
<p slot="subtitle">...</p>
<a href="/product" slot="cta">...</a>
<img src="product.jpg" alt="Product image" slot="image">
</swim-lane>
As many times as you wanted.
Would it be inviting in this context?

2024-11-05 01:45:16 GMT

- reply

Related question...
In a world where the work on CSS Module Scripts https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md were applied to HTML and you could:
<template specifier="./swim-lane.html">
<section>
<slot name="title"></slot>
<slot name="subtitle"></slot>
<slot name="cta"></slot>
</section>
<slot name="image"></slot>
</template>
And then later...

2024-11-04 00:28:49 GMT

It's very exciting to see #Adobe's Spectrum Web Components achieve version 1.0.0 after the hard work of many talented people across many years of work! https://github.com/adobe/spectrum-web-components/discussions/4888 💣 💥 🔥 🚒
Congrats @npub1lec…a2l5 @npub1cns…gyw9 @npub1np4…crsk @npub1cfs…fgd7 @npub1pjw…taq5 @npub184m…vt4g et al! 👏 👏 👏 👏
Keep an eye on that team for more cool things in the future... 🚀
#spectrumDesign #webComponents #developingDesignSystems

2024-11-02 21:03:13 GMT

I’ve never had stress around putting all my #CSS for all of my #webComponent in their #shadowDOM… ask me anything.

2024-10-29 16:07:32 GMT

- reply

Can’t wait till all browsers support `:host(:has(…))` the way #webkit does and #mozilla partially does so that this is even more natural for #webComponent development, too.
https://wpt.fyi/results/css/css-scoping?label=master&label=experimental&aligned&q=host%20has-0
#testTheWebForward #whereIsChromium #CSWG

2024-10-25 22:53:40 GMT

Have you been disappointed by the passage of time and its negative effect on webcomponents.org?
Think that #webComponent deserve a place on the internet that belies how practical and productive they are in your work?
Wanna help the #webComponentsCG bring such a thing to life?
Join us on Discord (https://discord.gg/KzgaSbGc9q) as we drive to do all this and more for the next generation of web components and web components consumers!
#webDev #w3c #readTheDocs #writeTheDocs

2024-10-16 15:08:28 GMT

So we have Constructible Style Sheets https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet, should we also have Constructible HTML Documents? 🤔
E.G. where a constructed Style Sheet is shared and mutable, should there be a shared an mutable HTML primitive?
Like a lot of HTML needs to be hyper custom, but maybe the shadow DOM of oft-repeated elements like buttons or inputs? Things that rely heavily of <slot>s over templating?
#webComponentsCG #htmlModules

2024-10-16 02:47:11 GMT

- reply

Mainly the team at Microsoft presented mostly what we see, here: https://github.com/w3ctag/design-reviews/issues/334
The room was excited, implementors were excited, the question was whether be received similar by framework, specifically Vue SFCs and Svelte as similarly positions APIs. The "action item" was to try to bring them into the conversation.
This was before my more active participation in the process, so while I didn't see them join, I also can't say the "action item" was checked off, or not.

2024-10-16 02:38:45 GMT

- reply

For me it's less of "do I like it question" than a question of how you see it as more of a HTML/CSS&JS abstraction than a JS abstraction as you've reference a WC definition as being.
The external templates are slightly more, yes, and definitely inline with the browser module scriptization of all the things!! 😈

2024-10-16 01:04:37 GMT

- reply

I’ll take this point for Vue, but do you really think that React and Angular offer a nice marriage of HTML/CSS&JS in this way?
The very decorator API of Angular is close, but in an oh so JS way, almost a web component way…
I’m not sure I’ve ever seen two React projects with the same approach to attaching styles to a “component”.
Newer compiled frameworks seems to do this more nicely as they lean closer to the Polymer/Vue syntax.

2024-10-16 00:56:19 GMT

- reply

I agree in so many ways! In some, custom element _are_ it. 😎
However, I do remember being at a WC F2F in 2018 or 19 when implementors where ready to dig deep on HTML modules and after some really nice presentations asked if we could get frameworks to join the conversation before moving forward. And…now where here still salivating in the possibilities. 😬
We’ll always be held back by how involved the most “important” of us choose to be in the broader community.

2024-10-16 00:25:08 GMT

- reply

With module scripts of each code type, you could HTML them all together for SFCs! 🔥
...or import all the parts separately for more customization possibilities...
Share element definitions swapping in/out HTML modules (especially with something like DOM Parts)? 🔥
Apply targeted parts of a single CSS via `with { type: 'css' }` and `@sheet`? 🔥
Create patterns we've never seen before? 🔥
There's bright future on the web, with/powered by/envisioned from #webComponents. 🔥

2024-10-16 00:17:48 GMT

- reply

Comparing to Vue, I definitely get the "component" nature of its HTML/CSS/JS syntax vibes: https://codepen.io/Westbrook/pen/vYomOMW Until we have CSS/HTML modules. That syntax was one of the big draws of Polymer.
However, even if you could import the <template> as a module script, how would the platform support you insterting it somewhere? Whether that's some form of <htmlinclude> element or so for them to be adopted into the page. div.adoptedHTML.push(htmlModule) anyone?

2024-10-15 21:45:42 GMT

- reply

The HTML Module scripts proposal is super exciting, but I'm not sure it's a differentiator on the "componentization" of the three.
I'd even worry that attempting to ensure it was to tightly coupled to managing that relation, only, would greatly handicap what was possible with HTML Module scripts long term.
Allowing HTML, CSS, and JS to all exist in a modular reality will be as beneficial in ways that are not duplicating frameworks as it is in ways that it is doing so.

2024-10-15 21:43:31 GMT

- reply

Feels like the hard separation of HTML/CSS&JS in your example is overly pedantic.
Yes, a Custom Element is just a tag with some JS functionality.
However, a Web Component uses Custom Elements the <template> tag, shadow DOM, and CSS Module scripts in a way that marries HTML/CSS&JS together as much as any framework. In some ways better, in other ways different and in some others worse.

2024-09-30 18:34:51 GMT

- reply

There is almost TOO MUCH CSS!!
What is a "quantity query"?

2024-09-05 03:43:07 GMT

Hrm. #viewTransitions and #shadowDOM …discuss.
#CSSWG #webComponentsCG

2024-08-28 14:17:36 GMT

- reply

That's a great "you can, but would you want to" scenario for the SSRing of it. While web dev has done that for quite some time, this API does make it much easier to process and points to a reason why it may be a "new CSR feature" that needs SSR, even if it might _mimic_ a previously SSR-centric feature.
Also, I hadn't gotten to the #accessibility of it, yet. I bet there is very little information that is passed to AT on this 🙈. I wonder if the there are discussions on that?

2024-08-28 11:07:31 GMT

Because, nuance is hard!
Glossary:
CSR = client side rendered
SSR = server side rendered
Please share any explanation in the 🧵. 🙏
Boosts appreciated!
Is the #CustomHighlight #API https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API a...
#webdev #frontend

2024-08-13 23:18:09 GMT

- reply

I've only ever used the web app, what's different in the Progressive Web App?

2024-08-02 17:58:31 GMT

- reply

It doesn't matter what you put in the answer, just that the question reminds you of the answer...right? It's like another password that's slightly easier to remember.
"What's your favorite sports team?"
---
"The eloquence of time is its impermanence"
And then you're in!