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