Shakedown Social

🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸Thinking about <a href="https://mastodon.social/tags/vibecoding" class="mention hashtag" rel="nofollow noopener" target="_blank">#vibecoding</a> an implementation of <a href="https://mastodon.social/tags/VRML" class="mention hashtag" rel="nofollow noopener" target="_blank">#VRML</a> in <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a><a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/javaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javaScript</a> <a href="https://mastodon.social/tags/vr" class="mention hashtag" rel="nofollow noopener" target="_blank">#vr</a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#programming</a>

castastropheWeb 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! <a href="https://front-end.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> <a href="https://front-end.social/tags/styling" class="mention hashtag" rel="nofollow noopener" target="_blank">#styling</a> <a href="https://front-end.social/tags/designsystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#designsystems</a>

westbrook<a href="https://toot.cafe/@bkardell" class="u-url mention" rel="nofollow noopener" target="_blank">@bkardell</a> <a href="https://indieweb.social/@nomster" class="u-url mention" rel="nofollow noopener" target="_blank">@nomster</a> Very interesting. Shares desires with a lot of discussions that have been happening in the <a href="https://mastodon.social/tags/webComponentsCG" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponentsCG</a> 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?<a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/htmlInHtml" class="mention hashtag" rel="nofollow noopener" target="_blank">#htmlInHtml</a>

That HTML Blog & The Spicy WebI 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! 😂<a href="https://intuitivefuture.com/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://intuitivefuture.com/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://intuitivefuture.com/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a>

Dave RupertWhat 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 <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> had an SDK like this...

westbrookWoo hoo! <a href="https://github.com/mozilla/standards-positions/issues/424#issuecomment-2970773302" rel="nofollow noopener" translate="no" target="_blank">https://github.com/mozilla/standards-positions/issues/424#issuecomment-2970773302</a><a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/scopedCustomElementRegistries" class="mention hashtag" rel="nofollow noopener" target="_blank">#scopedCustomElementRegistries</a> <a href="https://mastodon.social/tags/itsHappening" class="mention hashtag" rel="nofollow noopener" target="_blank">#itsHappening</a>

Dave RupertA great behind the scenes look at all the effort that goes into building an accessible Shopify theme by <a href="https://indieweb.social/@NicMakesStuff" class="u-url mention" rel="nofollow noopener" target="_blank">@NicMakesStuff</a> There's also a nice bit in there about how <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> 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".<a href="https://www.nicchan.me/blog/we-launched-our-first-shopify-theme/" rel="nofollow noopener" translate="no" target="_blank">https://www.nicchan.me/blog/we-launched-our-first-shopify-theme/</a>

Egor KloosI 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. <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mastodon.social/tags/jsdoc" class="mention hashtag" rel="nofollow noopener" target="_blank">#jsdoc</a> <a href="https://mastodon.social/tags/cem" class="mention hashtag" rel="nofollow noopener" target="_blank">#cem</a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a>

westbrookWhere is my <a href="https://mastodon.social/tags/webKit" class="mention hashtag" rel="nofollow noopener" target="_blank">#webKit</a> <a href="https://front-end.social/@webkit" class="u-url mention" rel="nofollow noopener" target="_blank">@webkit</a> support at!?!<a href="https://caniuse.com/?search=%3Ahas-slotted" rel="nofollow noopener" translate="no" target="_blank">https://caniuse.com/?search=%3Ahas-slotted</a><a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/cssWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#cssWG</a> <a href="https://mastodon.social/tags/hasSlotted" class="mention hashtag" rel="nofollow noopener" target="_blank">#hasSlotted</a> <a href="https://mastodon.social/tags/betterTheWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#betterTheWeb</a> <a href="https://mastodon.social/tags/realUseCaseIWantedToUseToday" class="mention hashtag" rel="nofollow noopener" target="_blank">#realUseCaseIWantedToUseToday</a>

xoron :verified:React-like functional webcomponents, but with vanilla HTML, JS and CSSIntroducing Dim – a new <a href="https://infosec.exchange/tags/Framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#Framework</a> that brings <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReactJS</a>-like functional <a href="https://infosec.exchange/tags/JSX" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSX</a>-syntax with <a href="https://infosec.exchange/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#VanillaJS</a>. Check it out here: 🔗 Project: <a href="https://github.com/positive-intentions/dim" rel="nofollow noopener" translate="no" target="_blank">https://github.com/positive-intentions/dim</a> 🔗 Website: <a href="https://dim.positive-intentions.com" rel="nofollow noopener" translate="no" target="_blank">https://dim.positive-intentions.com</a>My journey with <a href="https://infosec.exchange/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> started with Lit, and while I appreciated its native browser support (less <a href="https://infosec.exchange/tags/Tooling" class="mention hashtag" rel="nofollow noopener" target="_blank">#Tooling</a>!), coming from <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReactJS</a>, the class components felt like a step backward. The <a href="https://infosec.exchange/tags/FunctionalProgramming" class="mention hashtag" rel="nofollow noopener" target="_blank">#FunctionalProgramming</a> approach in React significantly improved my <a href="https://infosec.exchange/tags/DeveloperExperience" class="mention hashtag" rel="nofollow noopener" target="_blank">#DeveloperExperience</a> and debugging flow.So, I set out to build a thin, functional wrapper around <a href="https://infosec.exchange/tags/Lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#Lit</a>, and Dim is the result! It's a <a href="https://infosec.exchange/tags/ProofOfConcept" class="mention hashtag" rel="nofollow noopener" target="_blank">#ProofOfConcept</a> right now, with "main" <a href="https://infosec.exchange/tags/Hooks" class="mention hashtag" rel="nofollow noopener" target="_blank">#Hooks</a> similar to React, plus some custom ones like useStore for <a href="https://infosec.exchange/tags/EncryptionAtRest" class="mention hashtag" rel="nofollow noopener" target="_blank">#EncryptionAtRest</a>. (Note: <a href="https://infosec.exchange/tags/StateManagement" class="mention hashtag" rel="nofollow noopener" target="_blank">#StateManagement</a> for encryption-at-rest is still unstable and currently uses a hardcoded password while I explore <a href="https://infosec.exchange/tags/Passwordless" class="mention hashtag" rel="nofollow noopener" target="_blank">#Passwordless</a> options like <a href="https://infosec.exchange/tags/WebAuthn" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebAuthn</a>/#Passkeys).You can dive deeper into the <a href="https://infosec.exchange/tags/Documentation" class="mention hashtag" rel="nofollow noopener" target="_blank">#Documentation</a> and see how it works here: 📚 Dim Docs: <a href="https://positive-intentions.com/docs/category/dim" rel="nofollow noopener" translate="no" target="_blank">https://positive-intentions.com/docs/category/dim</a>This <a href="https://infosec.exchange/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#OpenSource</a> project is still in its early stages and very <a href="https://infosec.exchange/tags/Unstable" class="mention hashtag" rel="nofollow noopener" target="_blank">#Unstable</a>, so expect <a href="https://infosec.exchange/tags/BreakingChanges" class="mention hashtag" rel="nofollow noopener" target="_blank">#BreakingChanges</a>. I've already received valuable <a href="https://infosec.exchange/tags/Feedback" class="mention hashtag" rel="nofollow noopener" target="_blank">#Feedback</a> on some functions regarding <a href="https://infosec.exchange/tags/Security" class="mention hashtag" rel="nofollow noopener" target="_blank">#Security</a>, and I'm actively investigating those. I'm genuinely open to all feedback as I continue to develop it!<a href="https://infosec.exchange/tags/FrontendDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#FrontendDev</a> <a href="https://infosec.exchange/tags/JSFramework" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSFramework</a> <a href="https://infosec.exchange/tags/Innovation" class="mention hashtag" rel="nofollow noopener" target="_blank">#Innovation</a> <a href="https://infosec.exchange/tags/Coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#Coding</a> <a href="https://infosec.exchange/tags/Programmer" class="mention hashtag" rel="nofollow noopener" target="_blank">#Programmer</a> <a href="https://infosec.exchange/tags/Tech" class="mention hashtag" rel="nofollow noopener" target="_blank">#Tech</a>

Steve FrenzelToday I saw someone coming up with their own <a href="https://mastodon.online/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> tags. At first I thought they were <a href="https://mastodon.online/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> but the naming was off:<holiday>, <employee>, <month> and many moreLooked at it in the <a href="https://mastodon.online/tags/accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#accessibility</a> 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 😂)<a href="https://mastodon.online/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#a11y</a> <a href="https://mastodon.online/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.online/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a>

Evan Prodromouap-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 […] <a href="https://socialwebfoundation.org/2025/05/28/ap-components/" rel="nofollow noopener" translate="no" target="_blank">https://socialwebfoundation.org/2025/05/28/ap-components/</a>

Brandon Zhang 🇨🇳<a href="https://mastodon.online/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> people, in this Codepen that I set up for testing, the dialog inside the <a href="https://mastodon.online/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a> 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?<a href="https://codepen.io/brandonzhang/pen/QwwXXmL" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/brandonzhang/pen/QwwXXmL</a>

Hacker NewsStorefront Web Components<a href="https://webcomponents.shopify.dev/" rel="nofollow noopener" translate="no" target="_blank">https://webcomponents.shopify.dev/</a><a href="https://mastodon.social/tags/HackerNews" class="mention hashtag" rel="nofollow noopener" target="_blank">#HackerNews</a> <a href="https://mastodon.social/tags/Storefront" class="mention hashtag" rel="nofollow noopener" target="_blank">#Storefront</a> <a href="https://mastodon.social/tags/Web" class="mention hashtag" rel="nofollow noopener" target="_blank">#Web</a> <a href="https://mastodon.social/tags/Components" class="mention hashtag" rel="nofollow noopener" target="_blank">#Components</a> <a href="https://mastodon.social/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDevelopment</a> <a href="https://mastodon.social/tags/ECommerce" class="mention hashtag" rel="nofollow noopener" target="_blank">#ECommerce</a> <a href="https://mastodon.social/tags/Shopify" class="mention hashtag" rel="nofollow noopener" target="_blank">#Shopify</a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://mastodon.social/tags/FrontendDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#FrontendDevelopment</a>

Brian LeRoux 💚shopify embracing web components. lightdom web components no less. love to see it.<a href="https://indieweb.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> <a href="https://indieweb.social/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://indieweb.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://indieweb.social/tags/js" class="mention hashtag" rel="nofollow noopener" target="_blank">#js</a>

Massimo Artizzu 🇺🇦🔱<a href="https://front-end.social/@jensimmons" class="u-url mention" rel="nofollow noopener" target="_blank">@jensimmons</a> Thanks for the question! Once again I'm asking for the support to extending built-in elements for <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a>

🔭 TeskooanoHello <a href="https://mastodon.gamedev.place/tags/FediVerse" class="mention hashtag" rel="nofollow noopener" target="_blank">#FediVerse</a> - The dedicated account for <a href="https://mastodon.gamedev.place/tags/Teskooano" class="mention hashtag" rel="nofollow noopener" target="_blank">#Teskooano</a> is live! What is Teskooano you say? It's a web-based <a href="https://mastodon.gamedev.place/tags/3dEngine" class="mention hashtag" rel="nofollow noopener" target="_blank">#3dEngine</a> made with <a href="https://mastodon.gamedev.place/tags/threeJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#threeJS</a> and <a href="https://mastodon.gamedev.place/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a> to display N-Body systems. <a href="https://teskooano.space" rel="nofollow noopener" translate="no" target="_blank">https://teskooano.space</a>It's buggy, still a lot of work to do - but it's already up for you to try out - it's also a <a href="https://mastodon.gamedev.place/tags/mobile" class="mention hashtag" rel="nofollow noopener" target="_blank">#mobile</a> friendly <a href="https://mastodon.gamedev.place/tags/pwa" class="mention hashtag" rel="nofollow noopener" target="_blank">#pwa</a> you can install and use offline!<a href="https://mastodon.gamedev.place/tags/gameDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#gameDev</a> <a href="https://mastodon.gamedev.place/tags/indieDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#indieDev</a> <a href="https://mastodon.gamedev.place/tags/proceduralGeneration" class="mention hashtag" rel="nofollow noopener" target="_blank">#proceduralGeneration</a> <a href="https://mastodon.gamedev.place/tags/science" class="mention hashtag" rel="nofollow noopener" target="_blank">#science</a> <a href="https://mastodon.gamedev.place/tags/mastoDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#mastoDev</a> <a href="https://mastodon.gamedev.place/tags/openSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#openSource</a>

Burton SmithHere'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 <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> library.<a href="https://wc-toolkit.com/adoption/changelog/" rel="nofollow noopener" translate="no" target="_blank">https://wc-toolkit.com/adoption/changelog/</a>

Tane Piper ⁂Another <a href="https://tane.codes/tags/Teskooano" class="mention hashtag" rel="nofollow noopener" target="_blank">#Teskooano</a> 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 <a href="https://tane.codes/tags/pwa" class="mention hashtag" rel="nofollow noopener" target="_blank">#pwa</a> - you can install it, go offline and it works perfectly as it has no backend dependencies - it's fully <a href="https://tane.codes/tags/procedural" class="mention hashtag" rel="nofollow noopener" target="_blank">#procedural</a> <a href="https://tane.codes/tags/gamedev" class="mention hashtag" rel="nofollow noopener" target="_blank">#gamedev</a> <a href="https://tane.codes/tags/threejs" class="mention hashtag" rel="nofollow noopener" target="_blank">#threejs</a> <a href="https://tane.codes/tags/webgl" class="mention hashtag" rel="nofollow noopener" target="_blank">#webgl</a> <a href="https://tane.codes/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a> <a href="https://tane.codes/tags/progessiveWebApp" class="mention hashtag" rel="nofollow noopener" target="_blank">#progessiveWebApp</a>

Tane Piper ⁂Did a big UI refactor for 🔭 Teskooano today - now it's a lot more responsive, and big performance gains. <a href="https://teskooano.space/" rel="nofollow noopener" translate="no" target="_blank">https://teskooano.space/</a><a href="https://tane.codes/tags/gamedev" class="mention hashtag" rel="nofollow noopener" target="_blank">#gamedev</a> <a href="https://tane.codes/tags/webgl" class="mention hashtag" rel="nofollow noopener" target="_blank">#webgl</a> <a href="https://tane.codes/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a> <a href="https://tane.codes/tags/threejs" class="mention hashtag" rel="nofollow noopener" target="_blank">#threejs</a>

Recent searches

Search options

Administered by:

Server stats:

#webcomponents