Justin Fagnani
@justinfagnani
Followers
5,808
Following
610
Media
474
Statuses
26,408
Web components @buildWithLit at Stealth Mode. Xoogler.
Oakland, CA
Joined January 2010
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Trump
• 6402791 Tweets
トランプ
• 894599 Tweets
Republican
• 502282 Tweets
woozi
• 229199 Tweets
Thomas Matthew Crooks
• 195952 Tweets
ترامب
• 121765 Tweets
TAEMIN
• 89088 Tweets
AR-15
• 72098 Tweets
Attentat
• 59549 Tweets
VIF IN KHONKAEN X GULF
• 52942 Tweets
BINIVERSE GOES TO CEBU
• 41467 Tweets
#光る君へ
• 28483 Tweets
ネクロズマ
• 21027 Tweets
#オールスター合唱バトル
• 18865 Tweets
中村靖日さん
• 16389 Tweets
エデン組ライブ
• 12374 Tweets
Τραμπ
• 12362 Tweets
COME ON ENGLAND
• 10562 Tweets
Pinned Tweet
This day was going to come eventually, but here it is...
After 15 years, today is my last day at Google!
I'm incredibly proud of what I've accomplished at Google, and so fortunate to have worked with such awesome people on such interesting projects.
62
11
350
Const objects are better than enums in TypeScript.
First, they're real JS syntax, and I generally like to use only the type features of TypeScript.
Second, they can be composed and decomposed in a type-safe way, so you can build "enums" from other "enums"...
Here's an example:
24
62
610
HTML should have a <num> tag that formats numbers according to the user's locale without JavaScript.
21
40
590
JS and CSS modules with no build in sight!
With upcoming CSS modules, we'll soon have:
✅ JS modules
✅ Bare specifiers
✅ CSS modules
✅ Components
✅ Scoped styles
all built into the platform, no builds required, usable with `python -m SimpleHTTPServer 8000` 😎
22
136
606
🎉 Edge is implementing Web Components!! 🎉
Custom Elements and Shadow DOM are now "Under Development". With Firefox shipping to stable this month, we'll have full browser support soon!
11
261
563
<css-doodle> is one of the coolest web art projects I've seen. It makes generative art more accessible than anything I've every played with.
4
111
546
Googlebot now supports:
🧩 JS Modules
🧱 Custom Elements
🌚 Shadow DOM
🏫 Classes
🏷 Tagged Template Literals
IOW, it's ready for indexing super-modern web sites without compiling to ES5 or SSR! 🎉
🤖 Meet the new evergreen Googlebot! 🤖
We've listened to your questions and feedback and brought modern Chromium to Googlebot - read more at our blog 👉
25
377
721
7
211
479
Build features into the browser to make JS libraries smaller or completely unnecessary.
Then you won't be tempted to bundle JS libraries into the browser.
14
76
406
🎉 The CSS Working Group accepts my "multiple stylesheets per file" proposal, so we'll be able to bundle CSS modules!
That along with progress on import attributes will make native CSS modules a reality very soon now!
13
75
385
lit-html just passed 1M npm downloads a week 🥳
The template library that grew into Lit is now used to build Chrome OS and DevTools, Photoshop, Reddit, The Internet Archive and much more...
It's a fun ride with a great team and community! Looking forward to 2M/w next year!
20
53
378
🎉Many hard-earned congratulations to the Firefox team for converting all of their XUL components to web components!🎉
Porting 300 XUL components incrementally is an amazing accomplishment. And now a major browser's UI is built with web components! 😎
6
125
373
Web Components users everywhere:
🎉 Firefox 63 is shipping full Web Components support 🎉
So... Please try out Firefox 63 while it's in beta to make sure your site works, and report any bugs in FF you find back to them here:
5
145
319
People often ask how lit-html works because it looks like it's just doing string building, and it's a bit unintuitive that it could be so fast.
Basically, tagged template literals are amazing.
This is the key behavior in JavaScript to understand, the rest flows from there.
11
68
288
Just found, a web components implementation of Epic Spinners. Just drop <atom-spinner>, etc. tags into your page or application for awesome 🔄 action!
5
66
254
Node 22 looks amazing!
* Promise.withResolvers(), Set methods, Array.fromAsync(), and iteration helpers let me delete a lot of utility code.
* node --run is 6x faster than npm run?
* require(esm)
* globs
Wow 🤩
5
40
255
I want a package manager that bans packages like these, any packages that transitively depend on them, any other packages by their authors, and any packages by their author's kids and grandkids.
What's the most useful JavaScript package you've found? I'll go first.
106
138
2K
20
10
226
Google's internal web framework, Wiz, defaults to loading 0 application JS on startup and only downloads code when the user interacts with the page.
It was and is very innovative.
I hope to explore using this technique in Lit (and will publicly credit Wiz when we do so).
14
17
227
Testing in jsdom is worse than useless: it's actively bad.
It's an environment that none of your users use, and often requires the code under test to change just to work in it - a complete waste of time and increase in complexity.
It's so easy to test in real browsers, do that!
17
24
227
Luke warm take: most Node and web projects should just use npm.
It works fine and doesn't require contributors to install an alternate package manager.
git clone x
cd x
npm ci
npm run build
should be the standard getting started steps
34
16
227
🎉 📰 📣 All browsers to support native web components on January 15th! 🎊🎇
The new Edge is coming on January 15th - today’s Beta is our release candidate.
This post had the details, and some general guidance on including Edge in your tests.
11
38
119
6
63
211
I made a thing:
Easily import HTML into your pages with the <html-include> element.
10
56
206
@Fallenour
@AngelReinaMarie
@AP
@DukeU
At least the faces on our money weren't traitors to America who fought a war to preserve their right to own people
9
3
182
My personal checklist for publishing web components to npm.
I'll make a blog post out of this with all the reasoning soon.
13
53
206
I *told* you web components were really taking off 🚀
#webcomponents
in space!
SpaceX have confirmed the use of Web Components in the Chromium base UI onboard Crew Dragon!
They've come a long way since we first started using them on the UI almost 5 years ago now. Checkout the SpaceX reddit AMA:
9
294
856
3
39
203
I just love that Firefox is being built with Lit now 😊
Helping Mozillans use Lit sparks a particular joy that's deeply rooted in my early 2000's web dev experience.
Photoshop too! These are apps I've used nearly half my life, and now a thing I help make is helping make them!
9
19
204
Wow, I didn't know Firefox was now being built with Lit!
I found this while following some links from
@buildWithLit
's GitHub repo.
6
33
201
♟ I finally released 1.0 of <chess-board>, a custom element that renders an interactive chessboard. It works in plain HTML and all frameworks.
Use a simple tag to render a board with options for draggable pieces, animations, spare pieces, and more!
6
47
199
The new Reddit Ui is built with Lit!
this is also like 20x faster than the normal new Reddit UI
apparently it's built using web components instead of React so go figure
12
10
198
5
30
200
Well this is interesting...
A V8-based JavaScript runtime that only supports modules, and runs TypeScript:
5
69
193
CSS Module scripts were just merged into the HTML spec! 🎉
Thanks
@dandclark1
and
@domenic
!!
7
53
196
Web components from Microsoft... and they use LitElement and lit-html!
I am so pumped to see what you do with the
#microsoftgraph
toolkit . These web components work with any JavaScript framework. They even intelligently get auth context if used in
#spfx
!!!
#msbuild
#sharepoint
4
58
147
5
65
191
Web components will literally power Photoshop, YouTube, SpaceX Dragon capsule control panels, and Reddit, but people who haven't tried will claim they can't scale.
That says more about them than web components.
Web components absolutely are schedulable at scale, and interoperably at that.
Don't let anyone just assert otherwise without evidence.
7
12
95
9
33
187
🎉🎊 Firefox shipped Web Components!!! 🎊🎉
Shadow DOM, Custom Elements, a handy (variable) font editor panel in
@FirefoxDevTools
, reduced-motion CSS media queries — treat yourself to a spook-tacular brand new
@Firefox
63, available today! 🎃
3
114
261
4
65
186
⏱T-minus 3 days till 100% native web components support across the major browsers! 🚀
2
40
174
🎉 Firefox just implemented dynamic import()! 🎉
3
70
168
So awesome!
The
@smithsonian
's new 3D model viewer is open source and built with LitElement! 🔥
I'm definitely showing this to my 5yo kid 🦖
5
40
169
Warm take: CommonJS was a terrible idea. Node should have known that it is unusuable in browsers and just adopted AMD. CJS has caused a decade of churn in the JS ecosystem, and we're finally starting to dig out of the hole that was dug with it.
13
10
170
I really want VS
@code
's terminal to be a tab like any other.
It's painful that we have to use a dropdown to select the terminal rather than regular tabs. You also can't move existing terminals between split and non-split.
17
7
163
There are two kinds of JavaScript developers:
📈 Those who think the answer to problems with JS tooling is more tooling
📉 Those who think the answer to problems with JS tooling is less tooling
17
29
161
🎉 lit-html 0.11.0 is released with so many changes they don't fit in one tweet! 🎉
Headlines:
🎨 New syntax: .prop=${} &
@event
=${}
🏗 Split into small modules
☯️ Merged core and extended syntaxes
🛡 guard() and when() directives
🐜 Bug fixes
Thanks to all the contributors!
3
60
160
📣New blog post!📰
How to Publish Web Components to NPM
This is my personal checklist that I tweeted earlier this year, a bit expanded and with full rationale for each recommendation.
Enjoy and happy web components hacking!
12
59
158
After a really productive DOM Parts meeting today I'm more optimistic than ever that we're going to get an ergonomic and efficient templating primitive into the web platform soon, fulfilling the promise of <template> and bringing us closer to declarative custom elements.
10
15
160
The new URLPattern class is insanely great:
Building routers is getting a lot easier. Can't wait for the App History API to land too!
Shout out to
@wanderview
and
@domenic
for these two!
5
31
159
🎉 Soon we'll be able to select custom elements in custom states without having to write to attributes:
my-video::state(playing) { ... }
instead of
my-video[playing] { ... }
This is really important for CSS Shadow Parts, which can't be used with attribute selectors.
6
39
150
@Fallenour
@AngelReinaMarie
@AP
@DukeU
The idea that there's equivalence between American presidents and generals and treasonous Confederates is insane
8
4
139
Blockly (the block system used in Scratch) is really great, but I've wanted Blockly to be a bit easier to integrate into apps.
So, I'm working on my own block custom elements (again) 😎
Just write HTML, and get nicely rendered "stacks":
9
10
146
The new uses LitElement 😎
4
22
147
I'm very excited about the JavaScript Signals proposal!
It gives the platform a built-in reactive primitive so Lit can stay minimally opinionated and maximally interoperable.
And it's trivial to integrate with Lit! I built a prototype in a few minutes:
A lot of smart folks have been working on this proposal to bring native signals to JavaScript.
…Also I’ve been helping the smart people.
Have a look.
25
138
770
2
27
148
This idea that "web3" BS will enable open apps more than open protocols is laughable. The particular blockchain, on-chain code, storage & linking formats, etc *is* a protocol - just slower and more expensive.
Again, what does the blockchain solve that isn't better solved w/o it?
8
23
146
~9 years ago, shortly after joining Google, I started a 20% project to create a WYSIWYG graphical development tool. It grew into a staffed project that helped Googlers build 100s of internal apps.
Today App Maker went GA. I'm a proud papa 😁
8
28
146
The interop advantage of web components is so far reaching. It's not just interop between components, but interop with:
📜 HTML
📞 innerHTML, createElement(), querySelector()
🔎 DevTools
📝 Markdown
⌨️ WordPress, Wikimedia...
🏗 Frameworks
😳 The next rewrite of your app
3
37
144
⚡️LitElement just got an issue filed on it because it's *too fast*⚡️
😂
6
32
143
Hot off the press! lit-html 0.9.0 was just published with:
🌴 ShadyCSS support
🍸 The ability to mix templates from different dialects
🆗 Fixed directive support in attribute and property bindings
📚 New microsite at
Get it at
8
34
140
It's been a while since we previewed lit-html at the Polymer Summit.
Since then we've refined the syntax & API, simplified using properties & events, greatly improved performance, and fixed all kinds of browser quirks and corner cases.
Today we're 1.0🎉
📣 Today we released our greatest & latest libraries yet!
🎉 lit-html 1.0 & LitElement 2.0
⚡️ lightning fast template & components
📦 tiny packages
🖋 easy to write
👀📜Read on for more...
16
270
512
6
28
139
Digging into a Redux-centric code base and trying to figure out the data model is insanely difficult. All the structure is spread across reducers, and you can basically only see local mutations. You have to mentally run the program from initial states to understand anything :/
28
19
137
<script type=module src="./its-happening.js"></script>
2
57
136
HTML is open-ended and always evolving, and frameworks should tweet it that way.
Special lists of elements and attributes are a terrible code smell.
React is stripping the popover attribute because it thinks it's non-standard.
Any way to have it pass it through to the DOM? I'm actually only server-rendering, so I could do data-popover and find/replace on that
17
2
147
5
22
137
Adding to Custom Elements, Firefox Nightly now has full Web Components support!
Shadow DOM was activated in Nightly today if you want to know more about Shadow DOM look at
12
276
551
1
51
137
📰 We're starting up a repo for collaborating on community protocols for coordination between web components. ↔️
The idea is to build patterns for framework-like coordination but w/ low coupling and no required libraries.
5
43
131
In case this isn't clear, TypeScript 4.1 is very, very close to being able to type-check simple HTML templates in tagged template literals with just the type system. 😲
6
14
127
Babel 8 is going to be published as standard JS modules - and it seems like *only* standard JS modules, no CJS.
This is great news for JS tooling in browsers!
5
20
129
🏖Random positivity: I'm really happy with where web components are heading right now.
And I'm more happy every day with the design decisions we've made for LitElement. I think it's in a really nice sweet spot of ergonomic, performant, understandable, low-magic and low-lock-in.
8
23
127
⚡️ If you're using LitElement you'll automatically get a speed boost from Constructible Stylesheets as we use them for you, and fallback on browsers w/o them! 🏎
🏗Constructable Stylesheets are here!👷♀️
TL;DR: Seamless reusable styles for components and elements. Shadow DOM.
👍 load stylesheets asynchronously
🎁 apply them to shadow roots or globally
🦄 no FOUC for loaded sheets
17
237
718
3
33
123
Want to typecheck and lint LitElement and lit-html templates in your build/test system?
Now you can: npx lit-analyzer {src} --strict
6
39
126
Watching people try to figure out CSS-in-JS tools reminds me to remind you that Shadow DOM fixes CSS. *Especially* with Constructible StyleSheets.
Here's how easy LitElement makes it to use Shadow DOM with super-efficient native scoped styles via Constructible StyleSheets:
13
30
123
📣 lit-html 0.11.2 published to npm 📣
Added `classMap` and `styleMap` directives, which let you manage the class and style attributes, but with efficient updates via classList and the element's StyleSheet.
6
37
122
So my 4yo is into dinosaurs and farts. He just combined them into his first legit joke:
Have you ever heard of the world's most powerfulest fart?
It caused a mass stink-tion.
9
4
121
I've been working on cleaning up the lit-html internal and extension APIs, fixing bugs, and working towards 1.0, and not only is the API better, the code cleaner, but the core library dropped in size.
⚡️We're back under 2.5k for core⚡️
Now to keep it that way 😎
4
16
121
I keep hearing that hooks enable encapsulation and chaining, but I don't get how regular objects don't do just the same.
So I ported React's "Goo" demo of several spring hooks feeding into each other to LitElement and simple helper objects.
9
31
120
Interesting. Last week Preact passed Angular on weekly npm downloads.
7
14
118
I don't quite understand showing yarn or pnpm as the only install instructions for your npm package.
Yes, *you* might use Yarn, but the vast majority of your users don't.
If you show only one, show npm. Yarn and pnpm users know the equivalent commands in their tool anyway.
12
4
118
The more new frameworks that pop up, the more useful web components are.
13
13
116
@preactjs
Signals are awesome! 😍 Very small API that just works. A great addition to the simple reactive store ecosystem.
So... I prototyped Lit integration 🔥
Here's a mixin that lets any component track signals & render when they change
Check it out:
5
24
116
PSA: If you're an asshole on Twitter, you're an asshole in real life - there isn't some magical boundary between the two. And if we meet IRL after you've been an asshole to me on Twitter, I'm not going to be super nice to you like you weren't. Basic manners and kindness matter.
10
5
116
<chess-board> element is nearing completion!
The latest change is to use SVG pieces & remove import.meta.url usage because Webpack.
If you like chess and the web, this is the easiest way to embed a board: it works with any framework. Please test it out!
5
24
115
I think Lit might be one of the first major libraries to ship standard decorator support.
We've made our decorators work with both standard and TypeScript experimental decorators too!
Lit 3.0 Prerelease 2 published!
It contains some awesome stuff we'd love you to try out:
✨ Standard decorator support!
🎓First graduating class of Labs: Task, Context, and React
🏎️A new template compiler, and Preact signals integration
Full post here
5
78
325
4
9
114
Classes combine state and behavior - just what you need for components.
Things like hooks try to turn functions into classes by emulating fields and methods, but do it poorly.
I think classes make more sense for a component model than functions
I also think classes in general are fine
20
2
94
8
10
113
Talked to a potential Lit customer this week who's building a design system for a company that formed from a merger. One company had standardized on React, the other Vue.
Web components are the only easy and robust way to address both groups.
8
15
112
Has the lockdown and all the work from home had any measurable effect on IE11 usage?
9
11
108
3
1
85
LitElement has seen huge growth over the last two years 📈 and now it's included in the State of JS survey for the first time!
If you use LitElement or web components be sure to make your voice heard by filling out the survey. It's quick and easy 😎
2
27
107
The App Store for Windows is built with Lit?! 🤩
Hey! Today we released the new - app store for Windows. 🎉 Proud of this work!
It's built with web components, using
@buildWithLit
,
@shoelace_style
,
@vite_js
,
@pwabuilder
's PWA template, App Tools router, running on C# ASPNET backend. 😎
52
96
503
5
8
104
If you use Custom Elements, you can already embed them into _any_ markdown implementation with no special modifications.
The interop advantage of Web Components isn't just for between components, but between components and all other tools that understand HTML.
3
25
103
It's so very tiring that because of React many web developers think that web components can't have complex-valued properties.
People, break out of the React bubble. Its abstraction of HTML is actually *bad*.
6
28
101
This is a really, really, really big deal.
Being able to require() standard JS modules could unlock a mass migration to standard modules and allow packages to stop publishing CJS altogether. No more dual-mode packages. A lot more simplicity for build systems and TypeScript.
Landed experimental support for synchronous require(esm) to load ES modules without top-level await 🥳
28
152
606
4
13
103
Shadow DOM naturally does this
Other than Next.js / styled-jsx, what other CSS libraries clean up their rules when they're no longer used? E.g. when all components using them unmount.
19
9
103
2
10
102
I think Storybook shouldn't include any built-in framework support.
Instead stories should import the framework they use and export a render function to render them.
This would make the story files even more portable.
10
9
100
The upcoming ReactiveController feature in the next major versions of the Lit libraries is going to be *awesome*.
It's a very simple idea, and very low magic, but will really improve code sharing and composition in the ecosystem. Looking for to writing docs when I get back :)
7
25
99
If you're using lit-html, this awesome ESLint plugin will catch a lot of mistakes that we can't at runtime, like:
☢️ malformed html
⛔ illegal expression position
⚠️ setting the value attribute instead of property
🚫 Unnecessarily bound event handlers
I highly recommend it!
1
27
97
Not pictured: the `gap` CSS property
5
2
97
process.env.NODE_ENV in browser code needs to die a quick and painful death.
6
2
98
One subtle difference between Polymer and LitElement that we haven't talked about much:
We have made it much easier to migrate *away* from LitElement. There are no cross-component couplings, more reliance on plain JS patterns, and fewer custom APIs for things like style sharing.
4
23
96
🥳
This will be a major advancement for the web and JavaScript that unblocks *native* support non-JS module types like JSON, CSS, HTML and more!
6
20
95