eupolicy.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
This Mastodon server is a friendly and respectful discussion space for people working in areas related to EU policy. When you request to create an account, please tell us something about you.

Server stats:

215
active users

#WebComponents

2 posts2 participants0 posts today
just small circles 🕊<p><span class="h-card" translate="no"><a href="https://social.coop/@judell" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>judell</span></a></span> hey, this is very interesting. The old VB UI in a new web jacket. I just tooted about the Rube Goldberg machine that is modern web dev, and in some ways I was more empowered at the start of my career in 1997 with Visual Basic.</p><p><a href="https://social.coop/@smallcircles/114878688112419149" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">social.coop/@smallcircles/1148</span><span class="invisible">78688112419149</span></a></p><p>You might have a look if maybe there isn't a cool combination to make with <a href="https://social.coop/tags/Datastar" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Datastar</span></a> at <a href="https://data-star.dev" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">data-star.dev</span><span class="invisible"></span></a> which recently went v1.0</p><p>They continue where <a href="https://social.coop/tags/HTMX" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTMX</span></a> stopped, in <a href="https://social.coop/tags/hypermedia" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>hypermedia</span></a> land, where they use <a href="https://social.coop/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> for complex UI.</p>
Burton Smith<p>The JSX type generator now generates types for the <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> custom properties for your <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a>!</p><p><a href="https://wc-toolkit.com/integrations/jsx/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">wc-toolkit.com/integrations/js</span><span class="invisible">x/</span></a></p>
That HTML Blog & The Spicy Web<p>Move over Bootstrap.</p><p>Web Awesome is an awesome successor to what in my opinion was already the best open source <a href="https://intuitivefuture.com/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> library (Shoelace) on the market. Now we have the best <a href="https://intuitivefuture.com/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> framework on the market.</p><p>All of the CSS is…um…just CSS and all of the components are…um…just web components. Native <a href="https://intuitivefuture.com/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> APIs across the board. 🙌</p><p>Take a first look at the brand new public beta:</p><p><a href="https://thathtml.blog/2025/07/web-awesome-is-the-first-native-component-framework/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">thathtml.blog/2025/07/web-awes</span><span class="invisible">ome-is-the-first-native-component-framework/</span></a></p>
westbrook<p><span class="h-card" translate="no"><a href="https://front-end.social/@leaverou" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>leaverou</span></a></span> These all power HTML in some way or other...</p><p>- Scoped Custom Element Registries<br>- Reference Target API<br>- elementInternals.type <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ElementInternalsType/explainer.md" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/MicrosoftEdge/MSEdg</span><span class="invisible">eExplainers/blob/main/ElementInternalsType/explainer.md</span></a><br>- Declarative CSS Modules and the adoptedstylesheets attribute <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/MicrosoftEdge/MSEdg</span><span class="invisible">eExplainers/blob/main/ShadowDOM/explainer.md</span></a><br>- Declarative Partial Updates <a href="https://github.com/WICG/declarative-partial-updates" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/WICG/declarative-pa</span><span class="invisible">rtial-updates</span></a><br>- DOM Parts<br>- Platform based windowing/virtualization<br>- &lt;tabs&gt;</p><p>I've got lots more for CSS/JS if you get signed up for those.</p><p>Good luck with the survey!</p><p><a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponents</span></a> <a href="https://mastodon.social/tags/webComponentsCG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webComponentsCG</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a></p>
Egor Kloos<p>Created some tests for web components that retrieve a required design token value and check if the rendered elements have the equivalent computed value. For example, if the element is showing the correct values for a focus ring. </p><p><a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponents</span></a> <a href="https://mastodon.social/tags/testing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>testing</span></a> <a href="https://mastodon.social/tags/playwrite" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>playwrite</span></a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/designtokens" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designtokens</span></a> <a href="https://mastodon.social/tags/designsystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designsystems</span></a> <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>a11y</span></a></p>
castastrophe<p>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! <a href="https://front-end.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponents</span></a> <a href="https://front-end.social/tags/styling" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>styling</span></a> <a href="https://front-end.social/tags/designsystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designsystems</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Techniques</span></a><br>Bluesky likes · Accessible, localizable web components are still a challenge <a href="https://ilo.im/164qhh" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/164qhh</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> <a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Accessibility</span></a> <a href="https://mastodon.social/tags/Localization" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Localization</span></a> <a href="https://mastodon.social/tags/SocialMedia" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SocialMedia</span></a> <a href="https://mastodon.social/tags/Content" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Content</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.social/tags/API" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>API</span></a></p>
Egor Kloos<p>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. <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/jsdoc" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>jsdoc</span></a> <a href="https://mastodon.social/tags/cem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cem</span></a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponents</span></a></p>

🆕 Frontend Coffee Break

Episode 45: Storybook, Web Components and Figma Tokens

This is an angular-free podcast but we do talk web components. Chucho and Ricard discuss Storybook, what to consider when thinking about using it. Are Figma tokens the future? Sources of truth are nice but are they worth it?

What's your experience with these tools?

Audio and video options:

➡️ frontend.coffee/s1/45

Frontend Coffee Break - PodcastFrontend Coffee Break - Podcast | Ep. #45: Storybook, Web Components and Figma TokensThis is an angular-free podcast but we do talk web components. Chucho and Ricard discuss Storybook, what to consider when thinking about using it. Are Figma tokens the future? Sources of truth are ...

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: github.com/positive-intentions
🔗 Website: 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: positive-intentions.com/docs/c

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!

GitHubGitHub - positive-intentions/dimContribute to positive-intentions/dim development by creating an account on GitHub.

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 […]

socialwebfoundation.org/2025/0

Social Web Foundation · ap-components
More from Evan Prodromou