Mastodon

4 posts3 participants0 posts today

Tane Piper ⁂The other day I mentioned I might have accidentally written a web component framework powered by <a href="https://m.webtoo.ls/@vite" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@vite</a> Here I've written about said framework - <a href="https://mastodon.gamedev.place/@teskooano/114432752411496927" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.gamedev.place/@teskooano/114432752411496927</a> <a href="https://tane.codes/tags/webComponent" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponent</a> <a href="https://tane.codes/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://tane.codes/tags/framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#framework</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/vite" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vite</a>

Danny BlueWorking on some things... This uses a version of the context protocol for binding updates. All you have to do to implement your own bindings is listen for an event and call a callback<a href="https://indieweb.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://indieweb.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> <a href="https://indieweb.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a>

Peter KrönerNeat, you can cause too much recursion with nothing but (non-declarative) Shadow DOM<a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>

Peter KrönerYo dawg, I heard u like <slot> elements... 🤡 <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>

PodOSUsing <a href="https://fosstodon.org/tags/PodOS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#PodOS</a> elements you can access data on <a href="https://fosstodon.org/tags/Solid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Solid</a> pods without writing a single line of JavaScript. It's as easy as writing <a href="https://fosstodon.org/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> thanks to <a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a>!Check out the quick start guide:<a href="https://github.com/pod-os/PodOS/tree/main/elements#quick-start" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/pod-os/PodOS/tree/main/elements#quick-start</a>

Dave 🧱 :cursor_pointer:Last year All Day Hey! from <a href="https://mastodon.world/@heypresents" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@heypresents</a> gave me the surprise opportunity to speak about my passion for <a href="https://mastodon.design/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> and <a href="https://mastodon.design/tags/DesignSystems" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignSystems</a>. It was such a great experience that I went and spoke at a further three conferences 😄There’s still tickets if you can make it to Leeds next week 🧡<a href="https://heypresents.com/conferences/2025" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://heypresents.com/conferences/2025</a>

Will Browar 👨🏻‍💻This update comes soon after 5.4, but after thinking about it for a while I landed on how to handle fetch requests from Admin Bar and the rest just followed.Also, on a developer learning point, this includes my first web components that aren’t based on a framework, like Lit. They just didn’t need one or maybe I’m getting more comfortable writing them. <a href="https://hachyderm.io/tags/CraftCMS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CraftCMS</a> <a href="https://hachyderm.io/tags/CMS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CMS</a> <a href="https://hachyderm.io/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>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Pitfalls" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Pitfalls</a> All browsers get this wrong · What DevTools misinterpret about Shadow DOM <a href="https://ilo.im/163dax" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/163dax</a>_____ <a href="https://mastodon.social/tags/Bugs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Bugs</a> <a href="https://mastodon.social/tags/Specification" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Specification</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/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> <a href="https://mastodon.social/tags/DevTools" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DevTools</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Browser</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/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/DOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DOM</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</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)

xoron :verified:JSX-Syntax with Webcomponents.<a href="https://positive-intentions.com/blog/dim-functional-webcomponents" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://positive-intentions.com/blog/dim-functional-webcomponents</a>I made something to try out and I'm working towards a UI framework for my personal projects. It's far from finished but perhaps this might be interesting to share.<a href="https://infosec.exchange/tags/functional" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#functional</a> <a href="https://infosec.exchange/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> <a href="https://infosec.exchange/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://infosec.exchange/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://infosec.exchange/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://infosec.exchange/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://infosec.exchange/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://infosec.exchange/tags/library" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#library</a> <a href="https://infosec.exchange/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> <a href="https://infosec.exchange/tags/customelements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customelements</a> <a href="https://infosec.exchange/tags/lithtml" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lithtml</a> <a href="https://infosec.exchange/tags/lit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lit</a> <a href="https://infosec.exchange/tags/polymer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#polymer</a> <a href="https://infosec.exchange/tags/OpenSource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenSource</a>

Danny BlueNoctua Technology and myself just release v1 of our web component implementation of the USWDS. I have been wanting to do this for a long time and i hope to contribute more back to the core project.<a href="https://uswds.noctuatech.com/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://uswds.noctuatech.com/</a> <a href="https://github.com/Noctua-Technology/uswds" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/Noctua-Technology/uswds</a><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/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a>

Vincent AgnanoLegoJs v1.9.0 is out with more simplicity and more modern <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JS</a> to write <a href="https://mastodon.social/tags/native" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#native</a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> 🚀 <a href="https://github.com/Polight/lego/pull/37#issuecomment-2803062579" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/Polight/lego/pull/37#issuecomment-2803062579</a>Documentation will follow.<a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/svelte" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svelte</a> <a href="https://mastodon.social/tags/alternative" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#alternative</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/templating" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#templating</a> <a href="https://mastodon.social/tags/rendering" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#rendering</a>

Frontend DogmaThe Case for Web Components With Lit, by (unattributable):<a href="https://typescript.guru/the-case-for-web-components-with-lit/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://typescript.guru/the-case-for-web-components-with-lit/</a><a href="https://mas.to/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> <a href="https://mas.to/tags/lit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lit</a> <a href="https://mas.to/tags/typescript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typescript</a> <a href="https://mas.to/tags/microfrontends" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#microfrontends</a>

OpenSourceCally: Accessibility statement Cally: Accessibility statement Cally is a neat new open source dat... <a href="https://simonwillison.net/2024/Apr/2/cally-accessibility-statement/#atom-everything" rel="nofollow noopener noreferrer" target="_blank">https://simonwillison.net/2024/Apr/2/cally-accessibility-statement/#atom-everything</a> <a rel="nofollow noopener noreferrer" class="mention hashtag" href="https://mastodon.social/tags/webcomponents" target="_blank">#webcomponents</a> <a rel="nofollow noopener noreferrer" class="mention hashtag" href="https://mastodon.social/tags/opensource" target="_blank">#opensource</a> <a rel="nofollow noopener noreferrer" class="mention hashtag" href="https://mastodon.social/tags/accessibility" target="_blank">#accessibility</a> <a rel="nofollow noopener noreferrer" class="mention hashtag" href="https://mastodon.social/tags/javascript" target="_blank">#javascript</a> <a href="https://awakari.com/pub-msg.html?id=Y0sCXqzdsx6wNW3ijnSYRKDViLY" rel="nofollow noopener noreferrer" target="_blank">Event Attributes</a>

LavX NewsHarnessing the Power of Web Components with Lit and TypeScriptWeb Components are revolutionizing UI development, and with the Lit library, building these reusable components has never been easier. This article dives deep into the advantages of Web Components, ho...<a href="https://news.lavx.hu/article/harnessing-the-power-of-web-components-with-lit-and-typescript" rel="nofollow noopener noreferrer" target="_blank">https://news.lavx.hu/article/harnessing-the-power-of-web-components-with-lit-and-typescript</a><a href="https://mastodon.cloud/tags/news" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#news</a> <a href="https://mastodon.cloud/tags/tech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tech</a> <a href="https://mastodon.cloud/tags/TypeScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TypeScript</a> <a href="https://mastodon.cloud/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> <a href="https://mastodon.cloud/tags/Lit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Lit</a>

Peter KrönerCircumstances have conspired to make me build and release a flexible web component to toggle dark/light mode:📦 <a href="https://www.npmjs.com/package/@sirpepe/dark-mode-toggle" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.npmjs.com/package/@sirpepe/dark-mode-toggle</a> 💾 <a href="https://github.com/SirPepe/dark-mode-toggle" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/SirPepe/dark-mode-toggle</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/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>

Recent searches

Search options

Administered by:

Server stats:

#webcomponents