Shakedown Social

2 posts2 participants0 posts today

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 noreferrer" target="_blank">#HTML</a> <a href="https://intuitivefuture.com/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://intuitivefuture.com/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" 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 noreferrer" 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 noreferrer" 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 noreferrer" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/scopedCustomElementRegistries" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#scopedCustomElementRegistries</a> <a href="https://mastodon.social/tags/itsHappening" class="mention hashtag" rel="nofollow noopener noreferrer" 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 noreferrer" 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 noreferrer" 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 noreferrer" 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 noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/jsdoc" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#jsdoc</a> <a href="https://mastodon.social/tags/cem" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cem</a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>

westbrookWhere is my <a href="https://mastodon.social/tags/webKit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webKit</a> <a href="https://front-end.social/@webkit" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@webkit</a> support at!?!<a href="https://caniuse.com/?search=%3Ahas-slotted" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://caniuse.com/?search=%3Ahas-slotted</a><a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/cssWG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssWG</a> <a href="https://mastodon.social/tags/hasSlotted" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hasSlotted</a> <a href="https://mastodon.social/tags/betterTheWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#betterTheWeb</a> <a href="https://mastodon.social/tags/realUseCaseIWantedToUseToday" class="mention hashtag" rel="nofollow noopener noreferrer" 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 noreferrer" target="_blank">#Framework</a> that brings <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ReactJS</a>-like functional <a href="https://infosec.exchange/tags/JSX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JSX</a>-syntax with <a href="https://infosec.exchange/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#VanillaJS</a>. Check it out here: 🔗 Project: <a href="https://github.com/positive-intentions/dim" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/positive-intentions/dim</a> 🔗 Website: <a href="https://dim.positive-intentions.com" rel="nofollow noopener noreferrer" 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 noreferrer" 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 noreferrer" target="_blank">#Tooling</a>!), coming from <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener noreferrer" 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 noreferrer" target="_blank">#FunctionalProgramming</a> approach in React significantly improved my <a href="https://infosec.exchange/tags/DeveloperExperience" class="mention hashtag" rel="nofollow noopener noreferrer" 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 noreferrer" 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 noreferrer" target="_blank">#ProofOfConcept</a> right now, with "main" <a href="https://infosec.exchange/tags/Hooks" class="mention hashtag" rel="nofollow noopener noreferrer" 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 noreferrer" target="_blank">#EncryptionAtRest</a>. (Note: <a href="https://infosec.exchange/tags/StateManagement" class="mention hashtag" rel="nofollow noopener noreferrer" 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 noreferrer" target="_blank">#Passwordless</a> options like <a href="https://infosec.exchange/tags/WebAuthn" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebAuthn</a>/#Passkeys).You can dive deeper into the <a href="https://infosec.exchange/tags/Documentation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Documentation</a> and see how it works here: 📚 Dim Docs: <a href="https://positive-intentions.com/docs/category/dim" rel="nofollow noopener noreferrer" 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 noreferrer" 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 noreferrer" target="_blank">#Unstable</a>, so expect <a href="https://infosec.exchange/tags/BreakingChanges" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#BreakingChanges</a>. I've already received valuable <a href="https://infosec.exchange/tags/Feedback" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Feedback</a> on some functions regarding <a href="https://infosec.exchange/tags/Security" class="mention hashtag" rel="nofollow noopener noreferrer" 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 noreferrer" target="_blank">#FrontendDev</a> <a href="https://infosec.exchange/tags/JSFramework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JSFramework</a> <a href="https://infosec.exchange/tags/Innovation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Innovation</a> <a href="https://infosec.exchange/tags/Coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Coding</a> <a href="https://infosec.exchange/tags/Programmer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Programmer</a> <a href="https://infosec.exchange/tags/Tech" class="mention hashtag" rel="nofollow noopener noreferrer" 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 noreferrer" target="_blank">#html</a> tags. At first I thought they were <a href="https://mastodon.online/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" 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 noreferrer" 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 noreferrer" target="_blank">#a11y</a> <a href="https://mastodon.online/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.online/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" 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 noreferrer" 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 noreferrer" 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 noreferrer" 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 noreferrer" translate="no" target="_blank">https://codepen.io/brandonzhang/pen/QwwXXmL</a>

Hacker NewsStorefront Web Components<a href="https://webcomponents.shopify.dev/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://webcomponents.shopify.dev/</a><a href="https://mastodon.social/tags/HackerNews" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HackerNews</a> <a href="https://mastodon.social/tags/Storefront" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Storefront</a> <a href="https://mastodon.social/tags/Web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Web</a> <a href="https://mastodon.social/tags/Components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Components</a> <a href="https://mastodon.social/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDevelopment</a> <a href="https://mastodon.social/tags/ECommerce" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ECommerce</a> <a href="https://mastodon.social/tags/Shopify" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Shopify</a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> <a href="https://mastodon.social/tags/FrontendDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" 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 noreferrer" target="_blank">#webcomponents</a> <a href="https://indieweb.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://indieweb.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://indieweb.social/tags/js" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#js</a>

Massimo Artizzu 🇺🇦🔱<a href="https://front-end.social/@jensimmons" class="u-url mention" rel="nofollow noopener noreferrer" 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 noreferrer" target="_blank">#webcomponents</a>

🔭 TeskooanoHello <a href="https://mastodon.gamedev.place/tags/FediVerse" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FediVerse</a> - The dedicated account for <a href="https://mastodon.gamedev.place/tags/Teskooano" class="mention hashtag" rel="nofollow noopener noreferrer" 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 noreferrer" target="_blank">#3dEngine</a> made with <a href="https://mastodon.gamedev.place/tags/threeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#threeJS</a> and <a href="https://mastodon.gamedev.place/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a> to display N-Body systems. <a href="https://teskooano.space" rel="nofollow noopener noreferrer" 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 noreferrer" target="_blank">#mobile</a> friendly <a href="https://mastodon.gamedev.place/tags/pwa" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#pwa</a> you can install and use offline!<a href="https://mastodon.gamedev.place/tags/gameDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gameDev</a> <a href="https://mastodon.gamedev.place/tags/indieDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#indieDev</a> <a href="https://mastodon.gamedev.place/tags/proceduralGeneration" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#proceduralGeneration</a> <a href="https://mastodon.gamedev.place/tags/science" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#science</a> <a href="https://mastodon.gamedev.place/tags/mastoDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mastoDev</a> <a href="https://mastodon.gamedev.place/tags/openSource" class="mention hashtag" rel="nofollow noopener noreferrer" 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 noreferrer" target="_blank">#webcomponents</a> library.<a href="https://wc-toolkit.com/adoption/changelog/" rel="nofollow noopener noreferrer" 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 noreferrer" 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 noreferrer" 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 noreferrer" target="_blank">#procedural</a> <a href="https://tane.codes/tags/gamedev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gamedev</a> <a href="https://tane.codes/tags/threejs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#threejs</a> <a href="https://tane.codes/tags/webgl" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webgl</a> <a href="https://tane.codes/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a> <a href="https://tane.codes/tags/progessiveWebApp" class="mention hashtag" rel="nofollow noopener noreferrer" 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 noreferrer" translate="no" target="_blank">https://teskooano.space/</a><a href="https://tane.codes/tags/gamedev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gamedev</a> <a href="https://tane.codes/tags/webgl" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webgl</a> <a href="https://tane.codes/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a> <a href="https://tane.codes/tags/threejs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#threejs</a>

Tane Piper ⁂Teskoanno is now live! My <a href="https://tane.codes/tags/threejs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#threejs</a> powered 3D N-Body simulator is now up - it's a dev build, and not optimised but it works! I tested it on mobile - UI needs to work, but runs well on my Pixel 8 Pro.Would love to get <a href="https://tane.codes/tags/feedback" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#feedback</a> <a href="https://tanepiper.github.io/teskooano/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://tanepiper.github.io/teskooano/</a><a href="https://tane.codes/tags/gamedev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gamedev</a> <a href="https://tane.codes/tags/astronomy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#astronomy</a> <a href="https://tane.codes/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://tane.codes/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a> <a href="https://tane.codes/tags/vanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vanillaJS</a> <a href="https://tane.codes/tags/opensource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#opensource</a> (Bonus debug tools screenshot)

Burton SmithIs there a CSS equivolent to JSDoc? It would be really nice to co-locate my docs next to my CSS variables in my web components.<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>

Burton SmithToday, I'm excited to release the CEM Validator for your <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>!This is designed to be an automated check before your components go to production. I know there is a ton of stuff that can be added to this, but I decided to start small. Features include:✅ package.json validation ✅ module and definition path validation ✅ a check to ensure you are exporting all types for your APIs ✅ a check to make sure the tag name is present for your components<a href="https://wc-toolkit.com/cem-utilities/cem-validator/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://wc-toolkit.com/cem-utilities/cem-validator/</a>

Recent searches

Search options

Administered by:

Server stats:

#webcomponents