Finally got around to writing a post detailing this work a bit more; CSSWG resolution CSS spec update WPT update Two WebKit PRs. And a blog post. Whew! frehner.me/blog/fixing-...
Web, standards, tooling, sports, video games. https://frehner.me Working @Shopify, on Polaris (web components)
188 followers 223 following 209 posts
view profile on Bluesky
Finally got around to writing a post detailing this work a bit more; CSSWG resolution CSS spec update WPT update Two WebKit PRs. And a blog post. Whew! frehner.me/blog/fixing-...
Many HRs just barely clear the wall. That implies that batters only put enough strength in to clear the wall, and no more If we move the wall back further, batters would adjust and put more strength into it Over time we could train batters to hit 600ft HRs by gradually moving the wall further back
I feel like that’s the only deck that a straight run is viable on. Still can be hard anyway haha
Just got my third PR merged into WebKit. Yay! Container queries and shadow dom will now work nicely together across all browsers.
What about using a smoker? Smoke that thing for 12 hours
Safari 26 is here!!! Anchor Positioning, Scroll-driven animations, High Dynamic Range images, the new HTML element, the all-new Digital Credentials API, SVG icon support, WebGPU, WebKit in SwiftUI, every site can be a web app on iOS and iPadOS, and much more. webkit.org/blog/17333/w...
Definitely done this several times before. Large amounts of panic followed haha
And now break time
The final step of a fun process that started a while ago: - fix webkit behavior for non-named containers - open CSSWG to resolve behavior for named containers. - update WPTs to match CSSWG resolution - update webkit to pull in updated WPTs - update WebKit to match new behaviors and pass WPTs
Round 2, the actual fix :) github.com/WebKit/WebKi...
Well, despite git-webkit not working well with me, I still managed to get that first PR in (and major thanks to the team for the reviews) On to the actual fix I want to make now!
bugs.webkit.org/show_bug.cgi...
Gotta update to the latest WPTs so that I can then update the container query implementation so that named queries are against the flat tree
Dang. Thought I was gonna be able to get a clean PR up to WebKit this weekend but the devil in my machine said no. So close though
I should update it to the latest 11ty sometime. As you can probably tell I don’t have a lot of time/desire to work on my own blog haha
Looking forward to working with you!
@lmfinney.bsky.social nice talk on signals, observables, etc
Maybe I should write a wpt for this
No one in their right mind would use that on the host.
@jakearchibald.com here’s a fun edge case for Firefox haha (I’m not asking you to work on it, just thought it would be interesting for you since you have context on why I would be hitting this 😃) bugzilla.mozilla.org/show_bug.cgi...
Reminds me that once I was laying on the couch and saw something slowly easing its way into my peripheral vision; I finally looked up at it and it was a black widow slowly coming down from the ceiling on its web ☠️
I’ve been watching this proposal for a bit and it would be great to see it built into the platform. A near necessity for web components at times.
Interop 2026 is now open for proposals! This is your chance to tell browser-makers which well-defined, well-tested features you wish had better support across browsers. ⬇️ Here's how ⬇️ github.com/web-platform...
I was just talking with @bretlittle.com about manual slot assignment yesterday. Nice timing
Oh are you there in person?! That’s pretty cool to see
Good to know, thanks!
I’m ignorant and you did invite any questions, so: Why? SVG doesn’t do something here automatically?
The kids aren’t alright
Guess I’ll never know what the children were doing
Yikes yeah the PRs are all over the place. Wonder if someone could appeal to GitHub to do a soft ban or something
Hey, got my first contribution of code to openui merged today. Yay 🎉
Dang it’s kind of nice to be behind the curve on web components because all the hard issues have already been thought about and solved. ::part()? Yeah it’s there. In fact we’ll do you one better and also add exportparts
Oooh nice CSSWG resolved my question (container names in shadow roots are resolved against the flat tree) Time to work on some WPTs and update Safari again Maybe this time I try to update chromium too
It’s been available for a couple of weeks for those using the experimental (web component) version; we’ll batch together a bunch of updates into a single post though. And non-experimental / stable is coming sometime soon.
We provide an s-query-container component for devs to place the parent where they would like
They’re slightly abstracted away behind our custom syntax, but here’s the docs on it shopify.dev/docs/api/app...
Mr Worldwide now eh?
Started offering them in Polaris web components just a couple of weeks ago 🎉
I still am a potato, to be honest
One example: what if the component is a web component and you, as the consumer, have no idea what the class is? I wrote about that idea here frehner.me/blog/contain...
Definitely don’t look at what happened to the Tea app this past week
What if I caught a div but it was *shiny*
Wrote a post about container queries in web components, and how that led me to contributing to WebKit for the first time frehner.me/blog/fixing-...
That’s both amazing and horrifying
Planning on it!
I’m already complaining about the tickrate
That’s wild
Welp my contributions to Safari have made it to STP I should get around to writing that blog post about it
This sort of setup is very popular nowadays, and also extends into other areas For example, many people now use the “post now and think later” feature on social media
My memory may be fuzzy - the content looks accurate but I thought it had a slightly different UI. Thanks!
Close but I thought it was an official wai aria site and test suite
Someone help me find that nice screen reader test website that’s like WPTs. I saw it last week and now can’t find it again for some reason
Enjoying playing Rematch. Slowly getting decent, but the learning curve is pretty steep.
ex-boss 360 isn’t as good as the post script 3, sorry.
It’s wild how many game companies do this for their own games too.
The classic story of a werewolf who puts on invisaligns before the full moon to prevent themself from biting another person
Dang I’m still working on just my third yacht, how am I supposed to keep up with the giga-yachts? 😭 Guess it’s layoffs time again
Many people already know that Jake is a great dev and has a great personality. And despite that, it still undersells how great is is to work with him. Thanks for everything Jake! Looking forward to seeing all the things you’ll be working on in the future.
RSC has been on a journey; it feels like it’s still on that journey, too. Though it’s definitely in a better spot than they were in the early days. Hydrogen was a fun and challenging project, and there’s still scars to prove it 😃
After eslint / prettier in JS, it feels weird to go into repos and languages that have opinions on formatting but don’t format for you. If you’re telling me this line is too long, format it for me! I’m too busy to have to do it manually, I’ve got a dog to feed 😃
Thank you!
@nicolesullivan.bsky.social any chance to get this WebKit PR reviewed to help improve web components and container queries? If merged it would improve WebKit’s WPT passing rate in this area a ton! github.com/WebKit/WebKi...
Would love it. Should be fairly easy to polyfill too?
Built a custom lexer + parser in JS to enable this. It was super fun. More details and kudos when it’s released
Getting close to releasing some new Shopify Polaris features that I’ve been working on for a long time. Allowing devs to change an attribute’s value based on a container query. Think: if container <500px, padding is “small” Otherwise, padding is “large” All in the HTML attribute. All strings
That’s amazing haha
Whoops not rollup, postcss. My bad
For Polaris I built a rollup plugin that postfixes a hash to our CSS vars at build time, and you can customize how frequently that hash changes. Someone could choose to use our CSS vars for a minute, but it’ll break next time we change the hash github.com/frehner/post...
Raw? Not even medium rare? You monsters
Ooh fun. Gonna have to take some time during work to read this
King size loft bed for adults. Nice desk underneath. Tacky or best idea ever?
Great video! Hoping my “Bug Fixes” PR mentioned at 24:20 can make it into WebKit soon 😊
Got through a couple of bugs and backlog items on Polaris components today. Not bad considering my sink is leaking all over and I have to work on it. Maybe I worked harder because I’m avoiding the sink work. 🤔
What you say you do Vs What you actually do speaks volumes. Especially when it comes to keeping people (and especially talented people) happy.
Things like context.metadata, the methods on access, when to use addInitializer, etc. Maybe it’s just I’m more new to Metaprogramming in general and these are common things in other languages? github.com/tc39/proposa...
I feel like JS decorators make sense at a high level, but there’s such a depth of possibility/technical detail in them as well that is kind of hard to wrap my head around at times. Anyone have some good resources for going deeper? Or is that something that maybe needs to be created?
Not that I’m aware of
We wanted to be able to better align our WC props and attributes to how native elements work, and also wanted to give other Shopify devs an easier on-ramp to contributing. So we built decorators for the former, and used Preact for the latter
Yeah it isn’t a requirement for us at the moment, so that makes things a bit simpler at times.
Thanks! We setup that rule early haha
No examples of our little framework out there, but some live examples of our components here that maybe you can step through shopify.dev/docs/api/app... Not related to that Preact package.
shopify.engineering/resilient-im...
It’s just a faster feedback loop to doing the “who wrote this crap?” + *seeing your name in git blame* situation
I sometimes forget to do this, but many times when I review my own PR before submitting it for others to review I catch some things that need to be fixed or cleaned up.
Here’s some details, and ask away if you want to know more bsky.app/profile/freh...
Just started Blue Prince and I resisted taking notes but eventually caved haha
I’m not too familiar with Lit, but after looking at the docs for that it does seem pretty similar at first glance. The validation part is nice; stringEnum is like input.type, number can have a dev-defined min/max/step, and we have very custom ones for our DatePicker, etc.
Bluesky doesn’t show it well but there’s two links there. The second is for storefront components; while not really “hydrogen”, they kind of fill a similar purpose in allowing you to build Shopify storefronts anywhere
bsky.app/profile/freh... bsky.app/profile/bret...
Now it’s my turn to be excited to learn more 👀
We’re hoping to go down this path with the new Polaris, but it’s also been… fun to get buy in from other teams that we have to be extremely deliberate on our APIs now. There have been some growing pains but we have a decent process in place now. Time will tell if we succeed
Until such a time that we have a blog post, feel free to ask away here! I can be much more open about our work now haha
We use AdoptedStyleSheets for Polaris, quite a useful feature for not duplicating style tags in the WCs.
We've also leaned on the Web and OpenUI proposals + specs when deciding on what patterns/properties to build for our devs. It's been great to have that group already thinking about these things. I've been trying to attend many of their weekly meetings to get more involved.
Jake's memory is much better than mine :D Yes to all this too!
I'm sure there's always room for improvement, but take a look at them here shopify.dev/docs/api/app... and let me know if we're lacking!
So we've had to put container-query related stuff on the :host AND do some weird Custom Property hacks to get them to work across all browsers
I've opened a CSSWG issue here github.com/w3c/csswg-dr... to gain clarity around named container queries (and the existing WPTs for them) and a webkit PR to hopefully fix their implementation around unnamed container queries github.com/WebKit/WebKi... (first time contributing there, so... 🤞)
Some technical details here, but feel free to ask more! bsky.app/profile/freh... @jakearchibald.com wrote about the Firefox issue here jakearchibald.com/2025/firefox... Otherwise, the only big issue has been with container queries and shadow dom:
Nope! Our own little framework instead.