Peter Kröner

The Incredible Overcomplexity of the Shadcn Radio Button

👉 https://paulmakeswebsites.com/writing/shadcn-radio-button/

#react #webdev

Wait, what? There is a way to disable certain web component features via a static class field? Just randomly stumbled upon this in the specs. Can't find much documentation, but it works in Chrome and Firefox at least.

👉 https://html.spec.whatwg.org/multipage/custom-elements.html#dom-customelementregistry-define

#webcomponents #webdev #javascript

Found a library where CLAUDE.md is longer than the single file of actual code in the library.

Somebody on LinkedIn asked for my approach to global CSS in #Webcomponents with Shadow DOM:

1. Import CSS as Strings (via Vite)
2. Shove CSS into the CSSStyleSheet Constructor
3. Add the results to the ShadowRoot's adopted stylesheets
4. Delete all of the above once Safari supports CSS module scripts

This is how you future-proof your projects: be aware of what's coming to the platform and prepare your workarounds to be easily removable when the new features arrive ✨

#webdev #javascript

🤢 Behold! The most broken #CSS that still sort of works!

I wondered why CSS.supports("filter", "blur(") returned true. Well, it turns out that a standard-conforming CSS parser does not distinguish between } and EOF or between ) and EOF. And filter function arguments are all optional. So ending the stylesheet with "blur(" has the same effect as "blur(0px)" with all braces properly closed.

The whole story: @sir_pepe@mastodon.social
In Action: https://codepen.io/SirPepe/pen/ByLBGrJ?editors=0100

CSS is awesome.

#webdev

The Screen Wake Lock API rules. If you need your app to keep the screen on, this API is comparatively simple to use and works in every browser.

👉 https://developer.mozilla.org/en-US/docs/Web/API/WakeLock

#webdev #javascript

🙋 Ladies, gents, and dear non-binary pals: I could really use some work. Here's what I do best:

- Workshops: entertaining deep dives into JS, TS, web components, frontend performance, general vanilla webdev
- Development: performance-oriented vanilla frontends & refactoring of impenetrable legacy dumpster fires (esp. React, CSS)
- DevRel: yapping & writing about anything related to web frontends
- General coaching & code review for frontend technologies

Get in touch at peter@peterkroener.de!

Aufnahme @workingdraft@podcasts.social mit @Schepp@mastodon.social - es gibt wieder einen Browser-News-Roundup!

If I were publishing a new full-stack framework based upon an existing test suite, I would make sure “Hello World” worked. But at least they did think to add the universal disclaimer!

👉 https://github.com/cloudflare/vinext/issues/22

Time to tackle Temporal @workingdraft@podcasts.social 🤓

Moar @workingdraft@podcasts.social - diesmal mit @deadparrot@mastodon.social und @muhdiekuh@ruhr.social zu React und TypeScript 🔥

☝️ Remember how a few #JavaScript versions ago the ordering of object keys became deterministic across browsers? Turns out this does NOT mean “strictly chronological”:

#webdev

Ah, good ol' internet.

A: “I'd like to get rid of Foo. Is Bar any good?”
B: “Here's my opinion on something completely different.”
C: “Just grow a pair and keep using Foo.”
D: “Did you know that you can disable the annoying parts of Foo by sacrificing a baby goat at midnight?”

Some things never change.

Gestern Aufnahme von @workingdraft@podcasts.social mit @muhdiekuh@ruhr.social zum Speaker-Dasein auf Konferenzen. Es ist laaaaaang geworden. Release ist am am 29. Oktober 🎙️