iiinova — where your digital self keeps evolving

When we were tracing some perf regressions (for a very sensitive page), this seemed like low-hanging fruit to optimize.

Missed a detail, I meant to say that *we* used <use> in our rating component. Yup, I know about the cache! Problem we had (when we used a similar icon web component) was that each rating was including 5 additional shadow roots and custom elements that needed to initialize.

110

Curious if you thought about inlining the SVGs (instead of `<wa-icon>`) and using `<use>` for all of the stars. For a server-rendered product search page where dozens of star ratings could appear, I think it saved a lot of bytes and runtime operations.

100

Still use SASS for @mixin/@function and for compile-time errors for undefined variables. Since we have a design system with complex token names, the compile errors are really helpful to prevent mispellings 🥲 Oh, and tokenizing breakpoint values, since we can't do that in CSS yet

Mike McQuaid @mikemcquaid.com · 13/09/2026

Reposted by Rogin Farrer

Today, I’m proud to announce Homebrew 7.0.0. The most significant changes since 6.0.0 are faster installations, stronger sandboxing, native macOS app, vulnerability checks, advisory database, end of macOS 10.15 support and Intel Macs to Tier 3.

brew.sh

7.0.0

Today, I’m proud to announce Homebrew 7.0.0. The most significant changes since 6.0.0 are faster installations and upgrades, stronger sandboxing, a native macOS app, built-in vulnerability checks and an advisory database, the end of macOS 10.15 support and Intel Macs moving to Tier 3.

523226

Rogin Farrer @rogin.dev · 24/06/2026

Do you know how far back the Safari/Firefox support for :host(:has()) goes? I'm finding it a bit hard to figure out without testing

100

Rogin Farrer @rogin.dev · 24/06/2026

Has anyone heard of/experienced shadowRoot.adoptedStylesheets being slower in Safari compared to other browsers?

000

Rogin Farrer @rogin.dev · 18/06/2026

This is how webawesome handles icons

000

Rogin Farrer @rogin.dev · 17/06/2026

Been happy with Neovim and being able to use AI tools through the terminal. I’d probably try Zed if I didn’t already feel hardwired to think in vim.

000

Reposted by Rogin Farrer

G. Willow Wilson @gwillow.me · 26/05/2026

People don't long for "inconvenience." They long for permanence. And though streaming services may be convenient, people are waking up to the fact that we are paying rent-seeking middle men month after month for things we will never actually own.

19087592664

Rogin Farrer @rogin.dev · 02/05/2026

I’m trying to create a custom lint rule for lit-html templates, and I’m surprised to find that there’s no stable, broadly supported parser and/or linter? Or TS support?

000

Reposted by Rogin Farrer

Josh W. Comeau @joshwcomeau.com · 30/04/2026

✨ I just released a new (free!) tool for creating custom Bézier curves! courses.joshwcomeau.com/tools/bezier It has one special feature that I haven’t seen anywhere else, and it allows us to do something pretty cool. 🧵

827543

Rogin Farrer @rogin.dev · 13/03/2026

We don’t really have a design perspective at the moment on how spinners could have labels associated with them, so I don’t want to bake it in. For non-visual text we have a label property.

021

Rogin Farrer @rogin.dev · 13/03/2026

Huh, my read of this was that they don’t, but I think I misunderstood. Ok this looks like what I was hoping for!

You’ve posted enough to make me hyped haha. So I guess we’ll see!

Today I was thinking about how we could have visual text alongside a loading spinner without baking it into the component. I think the only option is to aria hide the displayed text, and pass the same test to the spinner?

100

Hey web component world, how do you set-up WCs to support `aria-labelledby` for elements in the shadow DOM? I know there's a number of specs and proposals to address this, but I wonder what solutions we have now Currently we require a string of text for labels, not el references. Maybe that's fine?

210

CSS by T. Afif @css-only.dev · 02/03/2026

I'm very excited for the launch, but I'm also very scared that it's going to make me want to rewrite all of my components 🤩😨

110

Reposted by Rogin Farrer

It seems we can now customize the select element, right? right?! Demo: codepen.io/t_afif/pen/P... via @codepen.io

1238685

Rogin Farrer @rogin.dev · 01/03/2026

Is there a Bluesky filter for profiles with anime avatars?

000

Reposted by Rogin Farrer

React @react.dev · 24/02/2026

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

214416

Rogin Farrer @rogin.dev · 18/02/2026

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

100

Rogin Farrer @rogin.dev · 16/02/2026

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.

Rogin Farrer @rogin.dev · 15/02/2026

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.

000

Rogin Farrer @rogin.dev · 01/02/2026

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

Rogin Farrer @rogin.dev · 01/02/2026

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.

120

Rogin Farrer @rogin.dev · 01/02/2026

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

100

Rogin Farrer @rogin.dev · 31/01/2026

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; }

110

Rogin Farrer @rogin.dev · 30/01/2026

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...

scottjehl.com

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

140

Reposted by Rogin Farrer

Jake Archibald @jakearchibald.com · 20/12/2025

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?...

youtu.be

Create Scroll-Triggered Animations with CSS

YouTube video by Chrome for Developers

1533028

Rogin Farrer @rogin.dev · 20/11/2025

... 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

000

Rogin Farrer @rogin.dev · 20/11/2025

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)

100

Reposted by Rogin Farrer

Justin Fagnani @justinfagnani.com · 10/11/2025

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

68627

Reposted by Rogin Farrer

Konnor Rogers @konnorrogers.com · 10/11/2025

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/...

181

Rogin Farrer @rogin.dev · 06/11/2025

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

000

Rogin Farrer @rogin.dev · 05/11/2025

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)