Justin Fagnani
@justinfagnani.com
Building something new... Previously at Google. Web maximalist. Web components. Creator of Lit. Oakland.
Contrary to popular belief, Lit is quite popular. It might surpass Angular in npm downloads soon:
npmtrends.com/@angular/cor...
npmtrends.com/@angular/cor...
October 20, 2025 at 8:07 PM
Contrary to popular belief, Lit is quite popular. It might surpass Angular in npm downloads soon:
npmtrends.com/@angular/cor...
npmtrends.com/@angular/cor...
My first time running benchmarks for Zipadee...
Not a bad start!
Not a bad start!
October 1, 2025 at 1:19 AM
My first time running benchmarks for Zipadee...
Not a bad start!
Not a bad start!
Hopefully bundlers can just support this without plugins, but check how small my Rollup plugin is:
github.com/justinfagnan...
github.com/justinfagnan...
September 17, 2025 at 7:05 PM
Hopefully bundlers can just support this without plugins, but check how small my Rollup plugin is:
github.com/justinfagnan...
github.com/justinfagnan...
📰 Firefox just landed support for native CSS Modules! 🥳
Here's Firefox Nightly with layout.css.module-scripts.enabled running a Codepen that uses standard CSS modules.
codepen.io/justinfagnan... *
*updated from @chriscoyier.net's original
That makes Chrome & Firefox w/ support. Next up Safari 🙏
Here's Firefox Nightly with layout.css.module-scripts.enabled running a Codepen that uses standard CSS modules.
codepen.io/justinfagnan... *
*updated from @chriscoyier.net's original
That makes Chrome & Firefox w/ support. Next up Safari 🙏
September 16, 2025 at 6:56 PM
📰 Firefox just landed support for native CSS Modules! 🥳
Here's Firefox Nightly with layout.css.module-scripts.enabled running a Codepen that uses standard CSS modules.
codepen.io/justinfagnan... *
*updated from @chriscoyier.net's original
That makes Chrome & Firefox w/ support. Next up Safari 🙏
Here's Firefox Nightly with layout.css.module-scripts.enabled running a Codepen that uses standard CSS modules.
codepen.io/justinfagnan... *
*updated from @chriscoyier.net's original
That makes Chrome & Firefox w/ support. Next up Safari 🙏
Oh, I should have shown a docs page like lit.dev/docs/ because we fold both the top-nav and the docs nav into the drawer.
And at a breakpoint before that we move the right-hand page outline into a disclosure widget at the top of the doc.
And at a breakpoint before that we move the right-hand page outline into a disclosure widget at the top of the doc.
September 11, 2025 at 4:25 PM
Oh, I should have shown a docs page like lit.dev/docs/ because we fold both the top-nav and the docs nav into the drawer.
And at a breakpoint before that we move the right-hand page outline into a disclosure widget at the top of the doc.
And at a breakpoint before that we move the right-hand page outline into a disclosure widget at the top of the doc.
Reminds me of this classic
August 20, 2025 at 7:53 PM
Reminds me of this classic
I built this fun in-place-input component the other day.
It's for high-instance-count editable text in a UI, things like labels of objects where the visual clutter and overhead of a normal input would be too much.
I'm unsure on the user affordance though. Is a hover-over underline enough?
It's for high-instance-count editable text in a UI, things like labels of objects where the visual clutter and overhead of a normal input would be too much.
I'm unsure on the user affordance though. Is a hover-over underline enough?
July 11, 2025 at 9:18 PM
I built this fun in-place-input component the other day.
It's for high-instance-count editable text in a UI, things like labels of objects where the visual clutter and overhead of a normal input would be too much.
I'm unsure on the user affordance though. Is a hover-over underline enough?
It's for high-instance-count editable text in a UI, things like labels of objects where the visual clutter and overhead of a normal input would be too much.
I'm unsure on the user affordance though. Is a hover-over underline enough?
This is some weird-ass failed AI slop PR spam here.
The change is just to misspell a word in the docs. Why? Who spends time on this crap? I don't understand the grift.
The change is just to misspell a word in the docs. Why? Who spends time on this crap? I don't understand the grift.
July 11, 2025 at 5:01 PM
This is some weird-ass failed AI slop PR spam here.
The change is just to misspell a word in the docs. Why? Who spends time on this crap? I don't understand the grift.
The change is just to misspell a word in the docs. Why? Who spends time on this crap? I don't understand the grift.
Got nerd-sniped by @cassidoo.co's newsletter interview question popping up on here
"Find the last non-repeating character in a given string"
I found a one-liner, but it's what *not* to do for a problem like this. In real code w/ a team just use a simple for loop.
It uses new Iterator APIs though!
"Find the last non-repeating character in a given string"
I found a one-liner, but it's what *not* to do for a problem like this. In real code w/ a team just use a simple for loop.
It uses new Iterator APIs though!
July 11, 2025 at 3:43 PM
Got nerd-sniped by @cassidoo.co's newsletter interview question popping up on here
"Find the last non-repeating character in a given string"
I found a one-liner, but it's what *not* to do for a problem like this. In real code w/ a team just use a simple for loop.
It uses new Iterator APIs though!
"Find the last non-repeating character in a given string"
I found a one-liner, but it's what *not* to do for a problem like this. In real code w/ a team just use a simple for loop.
It uses new Iterator APIs though!
Maybe you could power it with body motion. I bet this style could catch on:
July 2, 2025 at 12:38 AM
Maybe you could power it with body motion. I bet this style could catch on:
I like your article, but this claim that web components can only accept data as strings is a horrible falsehood started by the React team. Please don't help spread it.
Web components can accept any data in to properties just fine, and web components developers do just that every day.
Web components can accept any data in to properties just fine, and web components developers do just that every day.
June 26, 2025 at 4:25 PM
I like your article, but this claim that web components can only accept data as strings is a horrible falsehood started by the React team. Please don't help spread it.
Web components can accept any data in to properties just fine, and web components developers do just that every day.
Web components can accept any data in to properties just fine, and web components developers do just that every day.
Added @lea.verou.me's and web components to my blog... Works like a charm!
See it in action at the bottom of this page: justinfagnani.com/2025/06/25/s...
See it in action at the bottom of this page: justinfagnani.com/2025/06/25/s...
June 25, 2025 at 9:34 PM
Added @lea.verou.me's and web components to my blog... Works like a charm!
See it in action at the bottom of this page: justinfagnani.com/2025/06/25/s...
See it in action at the bottom of this page: justinfagnani.com/2025/06/25/s...
Really awesome to see @adamwathan.com and Headless UI get into web components here!
Web components are great for use with non-JS backends. Server templates make a lot more sense, and give complete control over where you drop your components in and how they're configured.
Web components are great for use with non-JS backends. Server templates make a lot more sense, and give complete control over where you drop your components in and how they're configured.
May 27, 2025 at 4:17 PM
Really awesome to see @adamwathan.com and Headless UI get into web components here!
Web components are great for use with non-JS backends. Server templates make a lot more sense, and give complete control over where you drop your components in and how they're configured.
Web components are great for use with non-JS backends. Server templates make a lot more sense, and give complete control over where you drop your components in and how they're configured.
Hacker News, ladies and gentlemen:
May 10, 2025 at 4:25 PM
Hacker News, ladies and gentlemen:
Oh no, the Material Theme Builder is built with Flutter 😢
A huge problem with Flutter Web is that it makes devtools basically useless. The whole page is one big canvas. Want to inspect an element? Tough.
I really worry about this supposedly glorious WASM future... HTML is pretty nice, you know.
A huge problem with Flutter Web is that it makes devtools basically useless. The whole page is one big canvas. Want to inspect an element? Tough.
I really worry about this supposedly glorious WASM future... HTML is pretty nice, you know.
May 7, 2025 at 12:48 AM
Oh no, the Material Theme Builder is built with Flutter 😢
A huge problem with Flutter Web is that it makes devtools basically useless. The whole page is one big canvas. Want to inspect an element? Tough.
I really worry about this supposedly glorious WASM future... HTML is pretty nice, you know.
A huge problem with Flutter Web is that it makes devtools basically useless. The whole page is one big canvas. Want to inspect an element? Tough.
I really worry about this supposedly glorious WASM future... HTML is pretty nice, you know.
You can also keep DOM visible but completely skip updates very easily with Lit's `noChange` sentinel.
`noChange` tells Lit to completely skip updating the DOM for an expression. It's really powerful for building directives, and you can use it directly:
Here we skip updates based on a condition:
`noChange` tells Lit to completely skip updating the DOM for an expression. It's really powerful for building directives, and you can use it directly:
Here we skip updates based on a condition:
April 24, 2025 at 8:41 PM
You can also keep DOM visible but completely skip updates very easily with Lit's `noChange` sentinel.
`noChange` tells Lit to completely skip updating the DOM for an expression. It's really powerful for building directives, and you can use it directly:
Here we skip updates based on a condition:
`noChange` tells Lit to completely skip updating the DOM for an expression. It's really powerful for building directives, and you can use it directly:
Here we skip updates based on a condition:
Here's a nice Lit tip 💡:
Let's say you want to hide some DOM but preserve component state. You can do this with the cache() directive:
Here when showView is toggled from true to false back to true, the DOM fragment for the expression is extracted, saved, and restored - preserving all the state.
Let's say you want to hide some DOM but preserve component state. You can do this with the cache() directive:
Here when showView is toggled from true to false back to true, the DOM fragment for the expression is extracted, saved, and restored - preserving all the state.
April 24, 2025 at 8:41 PM
Here's a nice Lit tip 💡:
Let's say you want to hide some DOM but preserve component state. You can do this with the cache() directive:
Here when showView is toggled from true to false back to true, the DOM fragment for the expression is extracted, saved, and restored - preserving all the state.
Let's say you want to hide some DOM but preserve component state. You can do this with the cache() directive:
Here when showView is toggled from true to false back to true, the DOM fragment for the expression is extracted, saved, and restored - preserving all the state.
For lit.dev's playground integration, we made a shortcode that pulls example files from folders, so that we can type-check the examples at build time. The shortcode also estimates the number of visible lines so pre-size the playground editor before the code actually loads to reduce layout shift.
April 15, 2025 at 10:15 PM
For lit.dev's playground integration, we made a shortcode that pulls example files from folders, so that we can type-check the examples at build time. The shortcode also estimates the number of visible lines so pre-size the playground editor before the code actually loads to reduce layout shift.
That required changing the scoped custom elements registry proposal. I wish people weren't using the "polyfill" - it's never been ready.
March 20, 2025 at 9:52 PM
That required changing the scoped custom elements registry proposal. I wish people weren't using the "polyfill" - it's never been ready.
Shots every time someone says C# during the Q&A tomorrow!
March 13, 2025 at 1:28 AM
Shots every time someone says C# during the Q&A tomorrow!
March 6, 2025 at 8:06 PM