Thinking about #vibecoding an implementation of #VRML in #webComponents
Thinking about #vibecoding an implementation of #VRML in #webComponents
Web components compadres, what is your favorite way to style your web components? Thinking about techniques that consider customizability and CSS developer experience, as well as performance. Share with me your favorite libraries and tell me why you like their approach! #webcomponents #styling #designsystems
@bkardell @nomster Very interesting. Shares desires with a lot of discussions that have been happening in the #webComponentsCG as of late. Definitely see the super powers this could bring to both SPA AND MPA structures sites/applications. How can the community support moving something like this forward?
I hate saying things which seem blindingly obvious, but when Famous People™ such as Theo on YouTube make these basic mistakes, I wonder.
So here you go:
`document.querySelector("# my-dumb-button").addEventListener(...)` is completely obsolete in the year 2025.
Never do that again please. You don't need to!
If you're wondering “well, what should I do instead?”, check the comments; we'll talk about what to do instead. Apparently it will BLOW YOUR MIND!
What impressed me was the prioritizing of economic justice at the framework level. That manifests in minimal code sent to the client hosted on a Cloudflare edge worker for free; reducing costs for website owners and customers.
No $20/mo hosting lock-in scheme.
Wish #webcomponents had an SDK like this...
A great behind the scenes look at all the effort that goes into building an accessible Shopify theme by @NicMakesStuff
There's also a nice bit in there about how #WebComponents are a great fit for a one-time purchase theme that you support forever because "their extensibility is unmatched" and "they never need to be updated".
https://www.nicchan.me/blog/we-launched-our-first-shopify-theme/
I love that I can add CSS custom properties to a Custom Element Manifest via JSDoc. Let's see if I can add the idents/keys as specific properties to a JSX style attribute object. #css #jsdoc #cem #webcomponents
React-like functional webcomponents, but with vanilla HTML, JS and CSS
Introducing Dim – a new #Framework that brings #ReactJS-like functional #JSX-syntax with #VanillaJS. Check it out here: Project: https://github.com/positive-intentions/dim
Website: https://dim.positive-intentions.com
My journey with #WebComponents started with Lit, and while I appreciated its native browser support (less #Tooling!), coming from #ReactJS, the class components felt like a step backward. The #FunctionalProgramming approach in React significantly improved my #DeveloperExperience and debugging flow.
So, I set out to build a thin, functional wrapper around #Lit, and Dim is the result! It's a #ProofOfConcept right now, with "main" #Hooks similar to React, plus some custom ones like useStore for #EncryptionAtRest. (Note: #StateManagement for encryption-at-rest is still unstable and currently uses a hardcoded password while I explore #Passwordless options like #WebAuthn/#Passkeys).
You can dive deeper into the #Documentation and see how it works here: Dim Docs: https://positive-intentions.com/docs/category/dim
This #OpenSource project is still in its early stages and very #Unstable, so expect #BreakingChanges. I've already received valuable #Feedback on some functions regarding #Security, and I'm actively investigating those. I'm genuinely open to all feedback as I continue to develop it!
Today I saw someone coming up with their own #html tags. At first I thought they were #WebComponents but the naming was off:
<holiday>, <employee>, <month> and many more
Looked at it in the #accessibility tree, they're all generic elements.
What really amazes me is the browser still rendering the content inside and simply not giving a fuck if it's fantasy HTML
(I would be shocked if someone shows me a link to the specs for these elements in the comments )
ap-components
I want to share some information about a repository we just published. ap-components is a set of Web Components for building interfaces for the ActivityPub API. I built it as I was making a sample application for handling the acct: URI scheme. I found myself making more and more components for the UI, and realised that they would probably be useful for other applications, too. The library is available on npm at @socialwebfoundation/ap-components. It currently covers some of the simplest […]#WebComponents people, in this Codepen that I set up for testing, the dialog inside the #ShadowDOM cannot be open by its sibling button even enough they're connected by correct ID attribute.
Is this expected or am I missing something here?
shopify embracing web components. lightdom web components no less.
love to see it.
@jensimmons Thanks for the question! Once again I'm asking for the support to extending built-in elements for #webcomponents
Hello #FediVerse - The dedicated account for #Teskooano is live!
What is Teskooano you say? It's a web-based #3dEngine made with #threeJS and #webComponents to display N-Body systems. https://teskooano.space
It's buggy, still a lot of work to do - but it's already up for you to try out - it's also a #mobile friendly #pwa you can install and use offline!
Here's a new addition to the WC Toolkit - the Changelog. It compares two versions of a Custom Elements Manifest to let you know what changes were introduced between versions of your #webcomponents library.
Another #Teskooano release today - I've done another bunch of performance improvements, UI improvements and added a couple of new features (like import/export JSON)
It's also now an offline-only #pwa - you can install it, go offline and it works perfectly as it has no backend dependencies - it's fully #procedural
Did a big UI refactor for Teskooano today - now it's a lot more responsive, and big performance gains.