Julian Cataldo

FLOSS/WebDev enthusiast.

I do HTML, (S)CSS, JS+TS, Lit, React, Node, Vue, Astro…

📦 Hire me: [email protected]

[Julian Cataldo @Julian_Cataldo]

✨ Effortless forms, with standards. 🧙‍♂️

Auto-generates forms declaratively, thx to JSON schemas.
Works with Lit, Solid, Vue, Svelte, React, Astro, TypeScript,…
Made this library open source❣️

💡Use cases:
CRUDs, CMSes, form builder, user-generated dynamic inputs, you name it…

[Julian Cataldo @Julian_Cataldo]

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?

Read my experience seeking this Graal and try the code if you like living on the edge 😏:
https://t.co/jr7InRgKoU

[Josh tried coding @joshtriedcoding]

i made a clean, reusable div for react

thinking of publishing this as an npm package? 👀

[Julian Cataldo @Julian_Cataldo]

@nullvoxpopuli "editor.minimap.autohide": true

[Julian Cataldo @Julian_Cataldo]

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?
https://t.co/OcVJlaYWuk

[Julian Cataldo @Julian_Cataldo]

Rizzed DX for Custom & Standard Elements in @solidjs JSX:
👉 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/Std Style Props

[Julian Cataldo @Julian_Cataldo]

.@vuejs+Custom Elements🧩

💡 Hover Quick Info
👉 Tag
👉 Standard attr
👉 Attr
👉 Prop
👉 Custom CSS prop
👉 Std. event binding
👉 Event binding
👉 Method override
👉 Ref

🧩 Auto complete
👉 Custom CSS prop

🔍 Semantic Diagnostic
👉 Std. attr
👉 Attr
👉 Prop
👉 Custom CSS prop

[Julian Cataldo @Julian_Cataldo]

Custom HTML Elements + @sveltejs = 💕 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

[Julian Cataldo @Julian_Cataldo]

🧑‍💻 Realtime analysis enabling these language features in @astrodotbuild files:

💡 Hover Quick Info
👉 Custom element tag
👉 CE standard attr
👉 CE attr
👉 CE custom CSS prop

🔍 Semantic Diagnostic
👉 CE unknown attr
👉 CE attr
👉 CE custom CSS prop
👉 CE unknown custom CSS prop

[Julian Cataldo @Julian_Cataldo]

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 + signal-utils).

Comes with a built-in theme, based on Shoelace, and a handful of demo nodes to play with ^^
https://t.co/tVddlxtvtE

[Julian Cataldo @Julian_Cataldo]

@SnazzyLabs RAM is still *crazy* expensive. Old 9900k with 128GB here.
Mac with same amount of RAM still cost an arm and a lung.
Also, x86 will remain much more compatible for dev. uses (docker, VMs…), until MS make windows ARM friendly.

Keeping the hackintosh until it dies 👊

[flavio @flaviocopes]

Brave is actually a nice browser

[Julian Cataldo @Julian_Cataldo]

You can fill out the JS 2024 survey, it's available 👇
https://t.co/uXK1eQ790o

[Julian Cataldo @Julian_Cataldo]

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.
unpic/lit works flawlessly with Lit hydrated SSR.
If you're not into Custom Elements, you can give it a shot for other frameworks
https://t.co/G67hrufqtj

[Julian Cataldo @Julian_Cataldo]

#2 would need to discriminate `@ layer` during the Adopted Stylesheet construction, and inject them selectively. I -think- making a ponyfill for it is doable with current tools and browser APIs.
#3 could use the same technique. Not sure about syntax support with current tools.

[Julian Cataldo @Julian_Cataldo]

Diving into the 3 proposals for "Declarative shadow DOM style sharing".
1. Seems to be the easiest to integrate in existing toolchains
2. Could cherry-pick from a CSS bundle
3. Same as 2, but needs a new CSS syntax

At first glance, all have their merits https://t.co/rFYGRhT0qm

[Julian Cataldo @Julian_Cataldo]

#1 could possibly be doable with @vite_js by inlining the style (with `?inline` query) in inline module scripts with `type="css-module"`.
Then, one could add a `<adopted-stylesheets specifiers="/foo.css">` helper in custom element shadow root hosts.
No FOUC, but mandatory JS.

[Julian Cataldo @Julian_Cataldo]

Trying @zeddotdev once in a while. For front end, it's becoming more and more versatile.
Here with (Lit) HTML/CSS template literals: highlighted out of the box.
Add `ts-lit-plugin` to get a bunch of helpful diagnostics: syntax, Custom Element props checks, slots, events, MDN…

[Julian Cataldo @Julian_Cataldo]

Well-wrapped takes, and a forecast for Web Components I believe in, too
https://t.co/9USbK1g9Xd

[Julian Cataldo @Julian_Cataldo]

Looks like a conversation started about supporting a stage-4 standard in Vite.
"Import Attributes" (formerly "Import Assertions") could be leveraged for native CSS Modules (hello Web Components and frameworks authors).
https://t.co/uPzHgJQX8O

[Julian Cataldo @Julian_Cataldo]

@artiscoding @thdxr That, plus the ~30% less purchasing power for us, europoors 😔