Rogin Farrer's Avatar

Rogin Farrer

@rogin.dev

Frontend engineer & design systems @ Etsy πŸ‘‰πŸ» rogin.dev

542
Followers
355
Following
143
Posts
08.05.2023
Joined
Posts Following

Latest posts by Rogin Farrer @rogin.dev

Video thumbnail

It seems we can now customize the select element, right? right?!

Demo: codepen.io/t_afif/pen/P... via @codepen.io

02.03.2026 13:44 πŸ‘ 369 πŸ” 82 πŸ’¬ 11 πŸ“Œ 13

Is there a Bluesky filter for profiles with anime avatars?

01.03.2026 19:23 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
Introducing iPhone Pocket: a beautiful way to wear and carry iPhone ISSEY MIYAKE and Apple today unveiled iPhone Pocket, designed to fit any iPhone as well as all pocketable items.

How about a $600 β€œMacBook pocket” www.apple.com/newsroom/202...

01.03.2026 19:22 πŸ‘ 2 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Post image

The React Foundation has officially launched, hosted by the Linux Foundation. Read more here: react.dev/blog/2026/02...

24.02.2026 21:01 πŸ‘ 133 πŸ” 16 πŸ’¬ 2 πŸ“Œ 7
Preview
The React Foundation: A New Home for React Hosted by the Linux Foundation – React The library for web and native user interfaces

Big react.dev/blog/2026/02...

24.02.2026 22:55 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Interesting! Was the DX so bad that you stopped working on it?

18.02.2026 01:59 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

I didn’t realize what the issue was because I was quickly scanning the diagram. Then I started reading the text. Wow.

The obvious and complete lack of copy-editing and QA is more depressing to me than using AI to write this.

16.02.2026 20:06 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

It would be nice if @bsky.app added hyperlinks to users handles if their a URL. Seems funny to use one’s website as a handle but then you can’t click it.

15.02.2026 18:09 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

The blip of nothing visible is more apparent when more of the app is styled light DOM, the web components load in very delayed in those cases

01.02.2026 21:14 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

There’s a state unique to DSD where you could have a styled, undefined element. In our case, we want to show the element, even if it’s not defined yet, for perceived performance.

01.02.2026 21:13 πŸ‘ 2 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

Yes, but this will short circuit the timeout. The goal is to show the user the UI as quickly as styles are available. You otherwise have to fiddle with the timeout length to be long enough not to show unstyled content, but not long enough to delay the UI

01.02.2026 19:14 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

It's nothing fancy, it just overrides the animation, in case it hasn't resolved yet. It supports when you render undefined custom elements with declarative shadow DOM.

:host(:not(:defined)) {
visibility: visible !important;
}

31.01.2026 22:37 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Preview
Enhancing Web Components Safely with Self-Destructing CSS | Scott Jehl, Web Designer/Developer Applying the self-destructing CSS pattern to an old web components anti-pattern

We adopted this and works great in testing. For declarative shadow DOM, I also added a rule that overrides the hidden state, so it’ll display before it’s defined (since it then has styles) scottjehl.com/posts/web-co...

30.01.2026 20:46 πŸ‘ 4 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Create Scroll-Triggered Animations with CSS
Create Scroll-Triggered Animations with CSS YouTube video by Chrome for Developers

It's really sad that Chrome laid off one of the world's best CSS developer-designers, and now they have to fake demos of web features. youtu.be/d8J0vs-bEPE?...

20.12.2025 10:40 πŸ‘ 332 πŸ” 28 πŸ’¬ 15 πŸ“Œ 14

... it's working great. But now I miss the benefits of utilities in Lit's ecosystem, and in some cases would benefit batching when some logic can get run multiple times when many properties update.

I made the element have an near identical API to Lit though, so it's not impossible to switch back

20.11.2025 18:53 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

I keep going back and forth on this at work. We started with ReactiveElement since we don't use JS templating. But then sometimes the async reactive lifecycle feels heavy-handed when all of the DOM updates are imperative.

I recreated a similar base el with preact signals and... (tbc)

20.11.2025 18:51 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

Ok

15.11.2025 23:25 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

I miss Rdio.

15.11.2025 21:55 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

Yesterday at TPAC I publicized my draft proposal for adding a declarative templating API to the DOM.

github.com/justinfagnan...

The repo has:

πŸ“– Explainers for the templating API and DOM scheduler API
πŸ—οΈ Full prototype implementations
βš—οΈ a JSX transform
βš›οΈ a mini React-like framework

10.11.2025 23:04 πŸ‘ 86 πŸ” 27 πŸ’¬ 6 πŸ“Œ 2

Declarative Shadow DOM and Declarative Custom Elements sound so good, but I still wish there was a way to do progressive enhancement with them to "hoist" form controls in a shadow root up into a parent form.

github.com/whatwg/html/...

10.11.2025 22:30 πŸ‘ 8 πŸ” 1 πŸ’¬ 1 πŸ“Œ 0

We’re using BEM and host selectors like :host(component-name) to prevent collisions. I guess you could include something like tailwind if you want the utility class approach. But you’d probably need :host() and ::slotted() at some point

06.11.2025 07:12 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

To avoid FOUC, we have all of the elements set to visibility: hidden in the global document, then the shadow DOM stylesheet will override that and make them visible.

For any elements CSR'd after page load, we use that same stylesheet as a CSSStylesheet (or <style> if browser doesn't support)

05.11.2025 00:00 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

As mentioned in another thread, we're using a link tag pointing to an external stylesheet. For build simplicity and caching, we have one stylesheet for the entire component library. So browsers should only fetch the stylesheet for the first component.

04.11.2025 23:58 πŸ‘ 1 πŸ” 0 πŸ’¬ 2 πŸ“Œ 0

Excited to check this out!

25.10.2025 18:30 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
DHH Is Way Worse Than I Thought | jakelazaroff.com DHH's politics are not normal. Maybe they used to be, I don't know, but as of right now the dude is_way outside of what most people would consider moral or acceptable.

show this to anyone else you know who also assumed DHH was just a normal conservative dude rather than a raging white supremacist lunatic

02.10.2025 12:57 πŸ‘ 436 πŸ” 167 πŸ’¬ 31 πŸ“Œ 27

Making a custom element submit forms like <button> elements, without JS. I've encountered this issue a bunch working in e-commerce.

29.09.2025 16:47 πŸ‘ 2 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

hey #webcomponent people that work at search engine companies, who do i have to annoy to get some words on an official blog for Bing and whatever else about search engine crawlers playing nicely with shadow dom?

there’s exactly 0 official docs saying that web components won’t hurt your SEO.

04.09.2025 14:06 πŸ‘ 3 πŸ” 1 πŸ’¬ 1 πŸ“Œ 0
Chromium

If you want `:host(:has(…))` to work in Chrome, please star this bug πŸ™

issues.chromium.org/issues/40062...

21.08.2025 18:38 πŸ‘ 23 πŸ” 9 πŸ’¬ 5 πŸ“Œ 1

Oh I didn’t realize that. When you say checking whether the 2 are the same, is it comparing strings of HTML? I’ve been a little paranoid about perf ramifications of morphdom, but haven’t found a better solution. (Other than managing shadow DOM with imperative JS)

23.08.2025 18:48 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

I’m not super familiar with lit-html source code, but doesn’t it have its own diffing logic?

I just worked on a mustache + morphdom combo integration with ReactiveElement at work. Seems to be working well, but not battle-tested yet

23.08.2025 18:37 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0