Julian Cataldo
@juliancataldo.com
Ever felt the need to author HTML literals in JS, but using JSX?
All that by burning a substantial amount of pesky, boilerplate-y helpers?
You can read my experience seeking this Graal and try the code if you like living on the edge 😏.
Just open sourced this experiment:
github.com/gracile-web/...
All that by burning a substantial amount of pesky, boilerplate-y helpers?
You can read my experience seeking this Graal and try the code if you like living on the edge 😏.
Just open sourced this experiment:
github.com/gracile-web/...
GitHub - gracile-web/babel-plugin-jsx-to-literals: A JSX to tagged template literals Babel plugin, with a few helper components and a mapped JSX namespace.
A JSX to tagged template literals Babel plugin, with a few helper components and a mapped JSX namespace. - gracile-web/babel-plugin-jsx-to-literals
github.com
November 12, 2025 at 5:32 PM
Ever felt the need to author HTML literals in JS, but using JSX?
All that by burning a substantial amount of pesky, boilerplate-y helpers?
You can read my experience seeking this Graal and try the code if you like living on the edge 😏.
Just open sourced this experiment:
github.com/gracile-web/...
All that by burning a substantial amount of pesky, boilerplate-y helpers?
You can read my experience seeking this Graal and try the code if you like living on the edge 😏.
Just open sourced this experiment:
github.com/gracile-web/...
Reposted by Julian Cataldo
Gecko: Intent to prototype: CSS Module Scripts
Gecko: Intent to prototype: CSS Module Scripts
Gecko: Intent to prototype: CSS Module Scripts
groups.google.com
August 21, 2025 at 6:18 PM
Gecko: Intent to prototype: CSS Module Scripts
Reposted by Julian Cataldo
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!
Experimenting with an hybrid Hooks x Signals reactive API.
I poked around as a total profane, assisted by ChatGPT, to emulate Functional Components ergonomics in Lit-ish runtimes, because why not?
Lit (TC39 Proposal) Signals opened the breach, it's now possible to explore new exciting pathways :D
I poked around as a total profane, assisted by ChatGPT, to emulate Functional Components ergonomics in Lit-ish runtimes, because why not?
Lit (TC39 Proposal) Signals opened the breach, it's now possible to explore new exciting pathways :D
GitHub - gracile-web/functional: Lightweight hooks and context primitives for signal-based render trees. Works anywhere a render function can be scoped, with Lit or similar templating libraries. Uses ...
Lightweight hooks and context primitives for signal-based render trees. Works anywhere a render function can be scoped, with Lit or similar templating libraries. Uses the TC39 Signal Proposal for i...
github.com
August 7, 2025 at 8:38 PM
Experimenting with an hybrid Hooks x Signals reactive API.
I poked around as a total profane, assisted by ChatGPT, to emulate Functional Components ergonomics in Lit-ish runtimes, because why not?
Lit (TC39 Proposal) Signals opened the breach, it's now possible to explore new exciting pathways :D
I poked around as a total profane, assisted by ChatGPT, to emulate Functional Components ergonomics in Lit-ish runtimes, because why not?
Lit (TC39 Proposal) Signals opened the breach, it's now possible to explore new exciting pathways :D
I'm about to release this port of my remark-lint rule plugin for validating YAML markdown frontmatter with JSON schemas.
The recent addition of Markdown to official ESLint parsers is a blast!
Was silky smooth to build, freeing time to add improvements to the old code
github.com/JulianCatald...
The recent addition of Markdown to official ESLint parsers is a blast!
Was silky smooth to build, freeing time to add improvements to the old code
github.com/JulianCatald...
GitHub - JulianCataldo/eslint-plugin-markdown-frontmatter-schema: Validate YAML frontmatter in your Markdown files using JSON Schema — right in ESLint.
Validate YAML frontmatter in your Markdown files using JSON Schema — right in ESLint. - JulianCataldo/eslint-plugin-markdown-frontmatter-schema
github.com
July 25, 2025 at 9:45 PM
I'm about to release this port of my remark-lint rule plugin for validating YAML markdown frontmatter with JSON schemas.
The recent addition of Markdown to official ESLint parsers is a blast!
Was silky smooth to build, freeing time to add improvements to the old code
github.com/JulianCatald...
The recent addition of Markdown to official ESLint parsers is a blast!
Was silky smooth to build, freeing time to add improvements to the old code
github.com/JulianCatald...
Reposted by Julian Cataldo
TypeScript 5.9 Beta just went out! Try it in your project and let us know what you think:
devblogs.microsoft.com/typescript/a...
devblogs.microsoft.com/typescript/a...
Announcing TypeScript 5.9 Beta - TypeScript
Today we are excited to announce the availability of TypeScript 5.9 Beta. To get started using the beta, you can get it through npm with the following command: npm install -D typescript@beta Let’s tak...
devblogs.microsoft.com
July 8, 2025 at 5:46 PM
TypeScript 5.9 Beta just went out! Try it in your project and let us know what you think:
devblogs.microsoft.com/typescript/a...
devblogs.microsoft.com/typescript/a...
Rizzed DX for Custom & Standard HTML Elements in @solidjs.com JSX:
👉 Always fresh MDN for Standard Tag/Attr/Event
👉 attr:/bool:/prop:/on:/on proxy
👉 Attr/Prop/Event (TS, JSDoc, Completion, Go-to-Def,…)
👉 Slots Completion
👉 Unknown Tag, Excess Attr (even w. hyphen)
👉 Custom/Standard Props for Style
👉 Always fresh MDN for Standard Tag/Attr/Event
👉 attr:/bool:/prop:/on:/on proxy
👉 Attr/Prop/Event (TS, JSDoc, Completion, Go-to-Def,…)
👉 Slots Completion
👉 Unknown Tag, Excess Attr (even w. hyphen)
👉 Custom/Standard Props for Style
July 2, 2025 at 4:17 PM
Rizzed DX for Custom & Standard HTML Elements in @solidjs.com JSX:
👉 Always fresh MDN for Standard Tag/Attr/Event
👉 attr:/bool:/prop:/on:/on proxy
👉 Attr/Prop/Event (TS, JSDoc, Completion, Go-to-Def,…)
👉 Slots Completion
👉 Unknown Tag, Excess Attr (even w. hyphen)
👉 Custom/Standard Props for Style
👉 Always fresh MDN for Standard Tag/Attr/Event
👉 attr:/bool:/prop:/on:/on proxy
👉 Attr/Prop/Event (TS, JSDoc, Completion, Go-to-Def,…)
👉 Slots Completion
👉 Unknown Tag, Excess Attr (even w. hyphen)
👉 Custom/Standard Props for Style
Seamless @vuejs.org/Custom Element integration🧩
💡 Hover Quick Info
👉 Tag
👉 Standard attr
👉 Attr
👉 Prop
👉 Custom CSS prop
👉 Std. event binding
👉 Event binding
👉 Method binding override
👉 Ref binding
🧩 Auto complete
👉 Custom CSS prop
🔍 Semantic Diagnostic
👉 Std. attr
👉 Attr
👉 Prop
👉 Custom CSS prop
💡 Hover Quick Info
👉 Tag
👉 Standard attr
👉 Attr
👉 Prop
👉 Custom CSS prop
👉 Std. event binding
👉 Event binding
👉 Method binding override
👉 Ref binding
🧩 Auto complete
👉 Custom CSS prop
🔍 Semantic Diagnostic
👉 Std. attr
👉 Attr
👉 Prop
👉 Custom CSS prop
June 29, 2025 at 9:50 AM
Seamless @vuejs.org/Custom Element integration🧩
💡 Hover Quick Info
👉 Tag
👉 Standard attr
👉 Attr
👉 Prop
👉 Custom CSS prop
👉 Std. event binding
👉 Event binding
👉 Method binding override
👉 Ref binding
🧩 Auto complete
👉 Custom CSS prop
🔍 Semantic Diagnostic
👉 Std. attr
👉 Attr
👉 Prop
👉 Custom CSS prop
💡 Hover Quick Info
👉 Tag
👉 Standard attr
👉 Attr
👉 Prop
👉 Custom CSS prop
👉 Std. event binding
👉 Event binding
👉 Method binding override
👉 Ref binding
🧩 Auto complete
👉 Custom CSS prop
🔍 Semantic Diagnostic
👉 Std. attr
👉 Attr
👉 Prop
👉 Custom CSS prop
Custom HTML Elements + Svelte = 💕 Realtime DX
💡 Hover Quick Info
👉 Standard attr
👉 Attr
👉 Prop
👉 Standard event binding
👉 Event binding
👉 Reference binding
🧩 Auto Completion
👉 Tag
👉 Attr
👉 Custom CSS prop
🔍 Semantic Diagnostic
👉 Unknown attr
👉 Attr
👉 Prop
💡 Hover Quick Info
👉 Standard attr
👉 Attr
👉 Prop
👉 Standard event binding
👉 Event binding
👉 Reference binding
🧩 Auto Completion
👉 Tag
👉 Attr
👉 Custom CSS prop
🔍 Semantic Diagnostic
👉 Unknown attr
👉 Attr
👉 Prop
June 28, 2025 at 11:38 AM
Custom HTML Elements + Svelte = 💕 Realtime DX
💡 Hover Quick Info
👉 Standard attr
👉 Attr
👉 Prop
👉 Standard event binding
👉 Event binding
👉 Reference binding
🧩 Auto Completion
👉 Tag
👉 Attr
👉 Custom CSS prop
🔍 Semantic Diagnostic
👉 Unknown attr
👉 Attr
👉 Prop
💡 Hover Quick Info
👉 Standard attr
👉 Attr
👉 Prop
👉 Standard event binding
👉 Event binding
👉 Reference binding
🧩 Auto Completion
👉 Tag
👉 Attr
👉 Custom CSS prop
🔍 Semantic Diagnostic
👉 Unknown attr
👉 Attr
👉 Prop
🧑💻 Realtime analysis enabling these language features in @astro.build files:
💡 Hover Quick Info
👉 Custom element tag
👉 CE standard attribute
👉 CE attr
👉 CE custom CSS property
🔍 Semantic Diagnostic
👉 CE unknown attr
👉 CE attr
👉 CE custom CSS prop
👉 CE unknown custom CSS prop
More details to come…
💡 Hover Quick Info
👉 Custom element tag
👉 CE standard attribute
👉 CE attr
👉 CE custom CSS property
🔍 Semantic Diagnostic
👉 CE unknown attr
👉 CE attr
👉 CE custom CSS prop
👉 CE unknown custom CSS prop
More details to come…
June 27, 2025 at 7:54 PM
🧑💻 Realtime analysis enabling these language features in @astro.build files:
💡 Hover Quick Info
👉 Custom element tag
👉 CE standard attribute
👉 CE attr
👉 CE custom CSS property
🔍 Semantic Diagnostic
👉 CE unknown attr
👉 CE attr
👉 CE custom CSS prop
👉 CE unknown custom CSS prop
More details to come…
💡 Hover Quick Info
👉 Custom element tag
👉 CE standard attribute
👉 CE attr
👉 CE custom CSS property
🔍 Semantic Diagnostic
👉 CE unknown attr
👉 CE attr
👉 CE custom CSS prop
👉 CE unknown custom CSS prop
More details to come…
Reposted by Julian Cataldo
Import maps are a great way to minimize cache invalidation in your module tree. But up until recently, they had a ton of sharp edges. So we fixed them!!
shopify.engineering/resilient-im...
shopify.engineering/resilient-im...
Resilient Import Maps - Better Theme Development and Beyond (2025) - Shopify
Import maps are great for both performance and developer experience, but their original limitations made them hard to use, especially at Shopify’s scale. We stepped up and pushed changes across the HT...
shopify.engineering
May 29, 2025 at 12:58 PM
Import maps are a great way to minimize cache invalidation in your module tree. But up until recently, they had a ton of sharp edges. So we fixed them!!
shopify.engineering/resilient-im...
shopify.engineering/resilient-im...
Reposted by Julian Cataldo
Today we're announcing previews of the native port of TypeScript! These nightly previews will be available on npm and the VS Code marketplace!
npm install -D @typescript/native-preview
npx tsgo --version
Read up more on our blog!
npm install -D @typescript/native-preview
npx tsgo --version
Read up more on our blog!
Announcing TypeScript Native Previews - TypeScript
Previews of the native TypeScript port are now available on npm and for VS Code through the Visual Studio Marketplace!
devblogs.microsoft.com
May 22, 2025 at 3:09 PM
Today we're announcing previews of the native port of TypeScript! These nightly previews will be available on npm and the VS Code marketplace!
npm install -D @typescript/native-preview
npx tsgo --version
Read up more on our blog!
npm install -D @typescript/native-preview
npx tsgo --version
Read up more on our blog!
Node 24 (LTS) is out! With URLPattern built-in support.
That's one less dependency for HTTP server routers that use the URLPattern (like the Gracile one).
That's one less dependency for HTTP server routers that use the URLPattern (like the Gracile one).
May 6, 2025 at 3:51 PM
Node 24 (LTS) is out! With URLPattern built-in support.
That's one less dependency for HTTP server routers that use the URLPattern (like the Gracile one).
That's one less dependency for HTTP server routers that use the URLPattern (like the Gracile one).
Reposted by Julian Cataldo
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.
been working on this proof of concept, it's a node based UI library (à-la React Flow), with Custom Elements and TC39 standard signals (Lit signals and signal-utils).
Comes with a built-in theme, based on WebAwesome/Shoelace, and a handful of demo nodes to play with ^^
github.com/JulianCatald...
Comes with a built-in theme, based on WebAwesome/Shoelace, and a handful of demo nodes to play with ^^
github.com/JulianCatald...
April 9, 2025 at 5:16 PM
been working on this proof of concept, it's a node based UI library (à-la React Flow), with Custom Elements and TC39 standard signals (Lit signals and signal-utils).
Comes with a built-in theme, based on WebAwesome/Shoelace, and a handful of demo nodes to play with ^^
github.com/JulianCatald...
Comes with a built-in theme, based on WebAwesome/Shoelace, and a handful of demo nodes to play with ^^
github.com/JulianCatald...
Reposted by Julian Cataldo
Reposted by Julian Cataldo
Most significant Vite major since Vite 2.0 ⚡️
Kudos to everyone who collaborated to make Vite even more flexible! Cheers to the Vite's ecosystem, contributors, and team. Y'all rock 💜
Kudos to everyone who collaborated to make Vite even more flexible! Cheers to the Vite's ecosystem, contributors, and team. Y'all rock 💜
November 26, 2024 at 2:42 PM
Most significant Vite major since Vite 2.0 ⚡️
Kudos to everyone who collaborated to make Vite even more flexible! Cheers to the Vite's ecosystem, contributors, and team. Y'all rock 💜
Kudos to everyone who collaborated to make Vite even more flexible! Cheers to the Vite's ecosystem, contributors, and team. Y'all rock 💜
You can fill out the JS 2024 survey, it's available 👇
State of JavaScript 2024
Take the State of JavaScript survey
survey.devographics.com
November 14, 2024 at 10:25 AM
You can fill out the JS 2024 survey, it's available 👇
Reposted by Julian Cataldo
All the frameworks are here now! Go follow them all! Let's make their bluesky social graphs broader than it ever was in X.
@vuejs.org @react.dev @preactjs.com @svelte.dev @solidjs.com @qwik.dev @markojs.com @emberjs.com
@vuejs.org @react.dev @preactjs.com @svelte.dev @solidjs.com @qwik.dev @markojs.com @emberjs.com
a cartoon robot is flying through the air with his arms outstretched
Alt: voltron assembles
media.tenor.com
November 11, 2024 at 10:24 AM
All the frameworks are here now! Go follow them all! Let's make their bluesky social graphs broader than it ever was in X.
@vuejs.org @react.dev @preactjs.com @svelte.dev @solidjs.com @qwik.dev @markojs.com @emberjs.com
@vuejs.org @react.dev @preactjs.com @svelte.dev @solidjs.com @qwik.dev @markojs.com @emberjs.com
<hi-lit>
November 13, 2024 at 7:53 PM
<hi-lit>
bsky loading performance can be a bit random for me. Initial loading and further media loading.
Maybe it's the current adoption rate, making things difficult to scale up?
Maybe it's the current adoption rate, making things difficult to scale up?
November 11, 2024 at 7:46 PM
bsky loading performance can be a bit random for me. Initial loading and further media loading.
Maybe it's the current adoption rate, making things difficult to scale up?
Maybe it's the current adoption rate, making things difficult to scale up?
wah! This one is exactly what I was looking for.
It's cross-CDN, cross UI-libs, and neatly wrapped in ready to use components.
Most importantly, unpic/lit works flawlessly with Lit hydrated SSR.
If you're not into Custom Elements, you can give it a shot for other frameworks
unpic.pics/img/lit/
It's cross-CDN, cross UI-libs, and neatly wrapped in ready to use components.
Most importantly, unpic/lit works flawlessly with Lit hydrated SSR.
If you're not into Custom Elements, you can give it a shot for other frameworks
unpic.pics/img/lit/
@unpic/lit – Unpic
High-performance, responsive Lit image component
unpic.pics
November 11, 2024 at 7:31 PM
wah! This one is exactly what I was looking for.
It's cross-CDN, cross UI-libs, and neatly wrapped in ready to use components.
Most importantly, unpic/lit works flawlessly with Lit hydrated SSR.
If you're not into Custom Elements, you can give it a shot for other frameworks
unpic.pics/img/lit/
It's cross-CDN, cross UI-libs, and neatly wrapped in ready to use components.
Most importantly, unpic/lit works flawlessly with Lit hydrated SSR.
If you're not into Custom Elements, you can give it a shot for other frameworks
unpic.pics/img/lit/
that's some really insightful stats, from real world resources, on web practices
November 11, 2024 at 7:24 PM
that's some really insightful stats, from real world resources, on web practices