Rogin Farrer
@rogin.dev
Frontend engineer & design systems @ Etsy
👉🏻 rogin.dev
👉🏻 rogin.dev
Pinned
Rogin Farrer
@rogin.dev
· Nov 8
Lots of new followers recently. Hello world!
I'm a frontend engineer working on design systems @ Etsy. (prev. Wayfair).
📍 Based in San Diego
👨🏻💻 Open-source maintainer github.com/roginfarrer
⌨️ I use neovim, btw
🏋🏻 🥏 🥾 Into weight-lifting, ultimate frisbee, and hiking
My website is rogin.dev
I'm a frontend engineer working on design systems @ Etsy. (prev. Wayfair).
📍 Based in San Diego
👨🏻💻 Open-source maintainer github.com/roginfarrer
⌨️ I use neovim, btw
🏋🏻 🥏 🥾 Into weight-lifting, ultimate frisbee, and hiking
My website is rogin.dev
Reposted by Rogin Farrer
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
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
github.com
November 10, 2025 at 11:04 PM
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
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
Reposted by Rogin Farrer
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/...
github.com/whatwg/html/...
November 10, 2025 at 10:30 PM
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/...
github.com/whatwg/html/...
Excited to check this out!
Online on a weekend? You can grab access to my web components course for $25 today and tomorrow. Big ol’ discount. Use the code OCT25-26.
(And as usual, if you need further accommodation, just use the email form and we’ll work it out.)
scottjehl.com/learn/webcom...
(And as usual, if you need further accommodation, just use the email form and we’ll work it out.)
scottjehl.com/learn/webcom...
Web Components Demystified online course | Scott Jehl, Web Designer/Developer
A comprehensive, premium course about building dynamic, fast, resilient apps with standard web components.
scottjehl.com
October 25, 2025 at 6:30 PM
Excited to check this out!
Reposted by Rogin Farrer
show this to anyone else you know who also assumed DHH was just a normal conservative dude rather than a raging white supremacist lunatic
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.
jakelazaroff.com
October 2, 2025 at 12:57 PM
show this to anyone else you know who also assumed DHH was just a normal conservative dude rather than a raging white supremacist lunatic
Reposted by Rogin Farrer
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.
there’s exactly 0 official docs saying that web components won’t hurt your SEO.
September 4, 2025 at 2:07 PM
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.
there’s exactly 0 official docs saying that web components won’t hurt your SEO.
Reposted by Rogin Farrer
If you want `:host(:has(…))` to work in Chrome, please star this bug 🙏
issues.chromium.org/issues/40062...
issues.chromium.org/issues/40062...
Chromium
issues.chromium.org
August 21, 2025 at 6:38 PM
If you want `:host(:has(…))` to work in Chrome, please star this bug 🙏
issues.chromium.org/issues/40062...
issues.chromium.org/issues/40062...
Reposted by Rogin Farrer
The new MDN frontend (we call it Fred) is live after about 5 months of work, and a lot of planning and prototyping before that!
Rebuilt using web components, it should feel a lot cleaner and more consistent for users, and is so much easier to develop in.
github.com/mdn/fred
Rebuilt using web components, it should feel a lot cleaner and more consistent for users, and is so much easier to develop in.
github.com/mdn/fred
GitHub - mdn/fred: MDN's fr(ont)e(n)d
MDN's fr(ont)e(n)d. Contribute to mdn/fred development by creating an account on GitHub.
github.com
August 19, 2025 at 5:46 PM
The new MDN frontend (we call it Fred) is live after about 5 months of work, and a lot of planning and prototyping before that!
Rebuilt using web components, it should feel a lot cleaner and more consistent for users, and is so much easier to develop in.
github.com/mdn/fred
Rebuilt using web components, it should feel a lot cleaner and more consistent for users, and is so much easier to develop in.
github.com/mdn/fred
The peak of web development in 2025
August 18, 2025 at 9:36 PM
The peak of web development in 2025
Reposted by Rogin Farrer
Now importNode and cloneNode have the same performance in Chrome: issues.chromium.org/issues/37124...
I'm happy frameworks can get simpler, but also because Lit, which always uses importNode, probably just got faster too.
Filing issues for browser implementation bugs is a good thing for everyone!
I'm happy frameworks can get simpler, but also because Lit, which always uses importNode, probably just got faster too.
Filing issues for browser implementation bugs is a good thing for everyone!
August 9, 2025 at 5:11 PM
Now importNode and cloneNode have the same performance in Chrome: issues.chromium.org/issues/37124...
I'm happy frameworks can get simpler, but also because Lit, which always uses importNode, probably just got faster too.
Filing issues for browser implementation bugs is a good thing for everyone!
I'm happy frameworks can get simpler, but also because Lit, which always uses importNode, probably just got faster too.
Filing issues for browser implementation bugs is a good thing for everyone!
Anyone ever use morphdom or idiomorph for the shadow DOM of their web components? How did it go?
August 6, 2025 at 1:49 AM
Anyone ever use morphdom or idiomorph for the shadow DOM of their web components? How did it go?
Reposted by Rogin Farrer
Say goodbye to border and pseudo-element hacks, and hello to CSS gap decorations!
developer.chrome.com/blog/gap-dec...
developer.chrome.com/blog/gap-dec...
A new way to style gaps in CSS | Blog | Chrome for Developers
Say goodbye to border and pseudo-element hacks.
developer.chrome.com
June 11, 2025 at 3:00 PM
Say goodbye to border and pseudo-element hacks, and hello to CSS gap decorations!
developer.chrome.com/blog/gap-dec...
developer.chrome.com/blog/gap-dec...
Reposted by Rogin Farrer
🚀 Excited about @wc-toolkit's JSX Types Generator!
Generate complete #TypeScript type definitions for your #WebComponents in JSX frameworks like @react.dev 19+, @preactjs.com, and @stenciljs.com.
✨ Autocomplete
📝 Inline documentation
🛡️ Type validation
🔄 Event typing
wc-toolkit.com/integrations...
Generate complete #TypeScript type definitions for your #WebComponents in JSX frameworks like @react.dev 19+, @preactjs.com, and @stenciljs.com.
✨ Autocomplete
📝 Inline documentation
🛡️ Type validation
🔄 Event typing
wc-toolkit.com/integrations...
JSX Types Generator
Generate JSX types for custom elements / web components
wc-toolkit.com
June 3, 2025 at 10:54 AM
🚀 Excited about @wc-toolkit's JSX Types Generator!
Generate complete #TypeScript type definitions for your #WebComponents in JSX frameworks like @react.dev 19+, @preactjs.com, and @stenciljs.com.
✨ Autocomplete
📝 Inline documentation
🛡️ Type validation
🔄 Event typing
wc-toolkit.com/integrations...
Generate complete #TypeScript type definitions for your #WebComponents in JSX frameworks like @react.dev 19+, @preactjs.com, and @stenciljs.com.
✨ Autocomplete
📝 Inline documentation
🛡️ Type validation
🔄 Event typing
wc-toolkit.com/integrations...
@justinfagnani.com I’ve been using Lit’s base ReactiveElement, without a “render” method, since we’re inserting the shadow template externally, and updating it imperatively. Curious if you think this makes ReactiveElement overkill? We use it for the “update” methods and syncing props & attrs.
May 19, 2025 at 1:52 AM
@justinfagnani.com I’ve been using Lit’s base ReactiveElement, without a “render” method, since we’re inserting the shadow template externally, and updating it imperatively. Curious if you think this makes ReactiveElement overkill? We use it for the “update” methods and syncing props & attrs.
Reposted by Rogin Farrer
Interviewer: Can you explain this gap in your resume?
Me, a software engineer: I suspect it's CSS margin collapse. I'd update to use flex and justify-content:space-evenly but I know you recruiters trust Outlook as a renderer.
Me, a software engineer: I suspect it's CSS margin collapse. I'd update to use flex and justify-content:space-evenly but I know you recruiters trust Outlook as a renderer.
Interviewer: Can you explain this gap in your resume?
Me, a software engineer: Hmm, it looks just fine on my machine. Have you tried rebooting?
Me, a software engineer: Hmm, it looks just fine on my machine. Have you tried rebooting?
Interviewer: Can you explain this gap in your resume?
Me, a geographer: topology error
Me, a geographer: topology error
May 13, 2025 at 1:21 AM
Interviewer: Can you explain this gap in your resume?
Me, a software engineer: I suspect it's CSS margin collapse. I'd update to use flex and justify-content:space-evenly but I know you recruiters trust Outlook as a renderer.
Me, a software engineer: I suspect it's CSS margin collapse. I'd update to use flex and justify-content:space-evenly but I know you recruiters trust Outlook as a renderer.
Should there be a “strict mode” for web components that calls connectedCallback twice in DEV mode to catch bugs? 🤔
May 12, 2025 at 8:01 PM
Should there be a “strict mode” for web components that calls connectedCallback twice in DEV mode to catch bugs? 🤔
Do you author web components with "required" attributes? The convention for most HTML elements is that no attributes are required. But in the context of a design system, it would be nice to require configuration for a custom element. Like a variant attribute for a badge or a button.
April 25, 2025 at 10:31 PM
Do you author web components with "required" attributes? The convention for most HTML elements is that no attributes are required. But in the context of a design system, it would be nice to require configuration for a custom element. Like a variant attribute for a badge or a button.
Say I have a web component (built with Lit) with a property "styleType", and its corresponding attribute is "style-type". Using conventional strategies for adding web component types to JSX, TS will autocomplete "styleType". But the correct attribute would be "style-type".
Has anyone solved this?
Has anyone solved this?
April 10, 2025 at 8:55 PM
Say I have a web component (built with Lit) with a property "styleType", and its corresponding attribute is "style-type". Using conventional strategies for adding web component types to JSX, TS will autocomplete "styleType". But the correct attribute would be "style-type".
Has anyone solved this?
Has anyone solved this?
Does anyone here really use Signal as a daily, normal messaging app, like with friends and family? I don’t know anyone that uses it, except for some who use it for work in politics.
I feel like I hear about it so much, and I’ve had it for years, but have never once used it.
I feel like I hear about it so much, and I’ve had it for years, but have never once used it.
March 26, 2025 at 8:03 PM
Does anyone here really use Signal as a daily, normal messaging app, like with friends and family? I don’t know anyone that uses it, except for some who use it for work in politics.
I feel like I hear about it so much, and I’ve had it for years, but have never once used it.
I feel like I hear about it so much, and I’ve had it for years, but have never once used it.
Reposted by Rogin Farrer
“If WordPress had a privileged code path that was only accessible to sites deployed to Automattic properties, would it be trusted as a truly open project and would it have the dominance it has today?”
Damning, thorough write up by @eduardoboucas.com
eduardoboucas.com/posts/2025-0...
Damning, thorough write up by @eduardoboucas.com
eduardoboucas.com/posts/2025-0...
You should know this before choosing Next.js
Picking the technology stack for a project is an important and consequential decision. In the enterprise space in particular, it often involves a multi-year commitment with long-lasting implications o...
eduardoboucas.com
March 25, 2025 at 8:55 PM
“If WordPress had a privileged code path that was only accessible to sites deployed to Automattic properties, would it be trusted as a truly open project and would it have the dominance it has today?”
Damning, thorough write up by @eduardoboucas.com
eduardoboucas.com/posts/2025-0...
Damning, thorough write up by @eduardoboucas.com
eduardoboucas.com/posts/2025-0...
Thanks to the great feedback, I started playing around with a custom element providing these public methods to be used for unit testing. I wrote them to be as similar to `@testing-library/user-event` as possible. Instead of
await userEvent.type(input, 'hello');
you write
await input.type('hello')
await userEvent.type(input, 'hello');
you write
await input.type('hello')
March 17, 2025 at 4:30 PM
Thanks to the great feedback, I started playing around with a custom element providing these public methods to be used for unit testing. I wrote them to be as similar to `@testing-library/user-event` as possible. Instead of
await userEvent.type(input, 'hello');
you write
await input.type('hello')
await userEvent.type(input, 'hello');
you write
await input.type('hello')
Web component design system library authors: do you put inputs in the shadow DOM or make developers provide their own?
<my-input></my-input>
vs
<my-input>
<input type=“text” />
</my-input>
If you went with one, do you ever regret not going with the other?
<my-input></my-input>
vs
<my-input>
<input type=“text” />
</my-input>
If you went with one, do you ever regret not going with the other?
March 16, 2025 at 7:12 AM
Web component design system library authors: do you put inputs in the shadow DOM or make developers provide their own?
<my-input></my-input>
vs
<my-input>
<input type=“text” />
</my-input>
If you went with one, do you ever regret not going with the other?
<my-input></my-input>
vs
<my-input>
<input type=“text” />
</my-input>
If you went with one, do you ever regret not going with the other?
Another Q for the web component community--what are the best practices for emitting events? I see a split between preferring prefixing custom events or just emitting regular events.
Shoelace prefers custom events: CustomEvent('sl-open')
Other libs typically emits normal evs: Event('open')
Shoelace prefers custom events: CustomEvent('sl-open')
Other libs typically emits normal evs: Event('open')
March 10, 2025 at 4:36 PM
Another Q for the web component community--what are the best practices for emitting events? I see a split between preferring prefixing custom events or just emitting regular events.
Shoelace prefers custom events: CustomEvent('sl-open')
Other libs typically emits normal evs: Event('open')
Shoelace prefers custom events: CustomEvent('sl-open')
Other libs typically emits normal evs: Event('open')
I just discovered that shadow roots aren’t serialized in Jest snapshot tests and that’s maybe the best news I’ve gotten all week. #designsystemproblems
March 8, 2025 at 1:48 AM
I just discovered that shadow roots aren’t serialized in Jest snapshot tests and that’s maybe the best news I’ve gotten all week. #designsystemproblems
Web component library maintainers, how do you intend for your users to write tests in React with your components? It feels like shadow roots pose a big challenge.
I’m wondering if we might need to develop some kind of test harness to abstract the shadow DOM away.
I’m wondering if we might need to develop some kind of test harness to abstract the shadow DOM away.
March 8, 2025 at 1:45 AM
Web component library maintainers, how do you intend for your users to write tests in React with your components? It feels like shadow roots pose a big challenge.
I’m wondering if we might need to develop some kind of test harness to abstract the shadow DOM away.
I’m wondering if we might need to develop some kind of test harness to abstract the shadow DOM away.