Shakedown Social

0 posts0 participants0 posts today

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>

AyoLast Thursday I have one engineer talk about ssr & web components at the AmsterdamJS meetup. Click-baity title, but I promise we tried to give the full picture. :)<a href="https://social.ayco.io/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> <a href="https://social.ayco.io/tags/ssr" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ssr</a> <a href="https://social.ayco.io/tags/amsterdamjs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#amsterdamjs</a>

JonHas anyone come across any <a href="https://mastodon.social/tags/js" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#js</a> lib that helps wire up points (times) in a video to functions? I'm probably going to roll my own, but just wondering if there is any good prior art. The task I have been set is to connect docs and videos together to form sort of tutorial content.<a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</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/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>

Burton SmithToday, I'm excited to add the <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> Storybook Helpers to the WC Toolkit!This comes with some new features over the previous version, including:✅ Performance improvements ✅ Setting API category order ✅ Story-level control over what APIs are displayed<a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <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/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://wc-toolkit.com/integrations/storybook/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://wc-toolkit.com/integrations/storybook/</a>

☃️ jschof ❄️Over the weekend I built a web component "mini-framework" that uses signals, avoids decorators, and can use functional components. Would love it if anyone would try it out and let me know what you think!(It uses preact/signals-core and lighterhtml under the hood)<a href="https://c.im/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> <a href="https://github.com/JimSchofield/minne" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/JimSchofield/minne</a>

Burton SmithI'm happy to roll out the new and improved CEM Inheritance package! This allows API data to be properly inherited in the Custom Elements Manifest for your <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>.A new feature is that you can now omit inherited APIs from the CEM using JSDoc tags. Enjoy! 😉<a href="https://wc-toolkit.com/documentation/cem-inheritance/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://wc-toolkit.com/documentation/cem-inheritance/</a>

Burton SmithI just noticed Rotten Tomatoes is rockin' some pretty serious <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>!<a href="https://www.rottentomatoes.com/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.rottentomatoes.com/</a>

Peter KrönerElementInternals.type<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ElementInternalsType/explainer.md" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ElementInternalsType/explainer.md</a><a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>

Burton SmithWith this new initiative, I'm happy to be open-sourcing my tools for working with the Custom Elements Manifest! These are a series of generic functions and types for accessing and transforming data from the CEM for use in your projects. <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a><a href="https://wc-toolkit.com/cem-utilities/overview/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://wc-toolkit.com/cem-utilities/overview/</a>

Burton SmithI have a couple of big things planned this year. The first is to move all of my open-source <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> tools under one banner to make them more official and easier to find. Today I am excited to release the Web Components Toolkit!<a href="https://wc-toolkit.com/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://wc-toolkit.com/</a>

westbrookIn that it was dropped as part of a thread that you might have otherwise been uninterested in, sharing this again to start your Thursday:<a href="https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/</a>Catch up on some techniques for managing connection time work in a custom element. 😁 There's even reasons for using shadow DOM hidden in there. 😱Thanks @nachtfunke for starting the convo on this and <a href="https://mastodon.social/@zachleat" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@zachleat</a> for challenging a toot into a full on blog dump. 🙇 <a href="https://mastodon.social/tags/customElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customElements</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/moveBefore" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#moveBefore</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a>

westbrook<a href="https://fediverse.zachleat.com/@zachleat" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@zachleat</a> <a href="https://indieweb.social/@nachtfunke" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@nachtfunke</a> I'm not saying this is because I didn't get you anything for your birthday, but I'm also not saying it isn't because of that...<a href="https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/</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/webComponentsCG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponentsCG</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/customElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customElements</a> <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowDOM</a>

Thomas Michael SemmlerHello <a href="https://indieweb.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> people. Lets say you need to do a <custom-parent><custom-child> typ of thing, how do you actually do that? I am asking because I noticed that the connectedCallback is firing twice, once you move things around in there and I don't know how to fix it.I am not using shadow dom.<a href="https://indieweb.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</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/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://indieweb.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a>

Dave 🧱 :cursor_pointer:Haven't had many submissions of late for Awesome Standalone <a href="https://mastodon.design/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a>, so threw my collection in to stoke the fire. We'd love for you to add your own standalones! <a href="https://github.com/davatron5000/awesome-standalones" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/davatron5000/awesome-standalones</a>

That HTML Blog & The Spicy WebY'all, I'm not done with squircles! 😅A few days ago I demonstrated utilizing <a href="https://intuitivefuture.com/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> clip-path and SVG data to round the corners of an element in a more attractive manner.That <a href="https://intuitivefuture.com/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> demo turned out well, but it got me thinking I might attempt to “squirclize” a grid of thumbnail images, which eventually led me to the html-squircle <a href="https://intuitivefuture.com/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JS</a> library for generating refined curve paths.Now this looks pretty fun! 🥳 <a href="https://intuitivefuture.com/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a><a href="https://thathtml.blog/2025/01/squircle-images-on-the-loose/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thathtml.blog/2025/01/squircle-images-on-the-loose/</a>

westbrookSuper excited to see (after years of my involvement and maybe decade of <a href="https://eigenmagic.net/@sundress" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@sundress</a>’s along with MANY other passionate and patient individuals) the web getting a little more accessible: <a href="https://github.com/WebKit/WebKit/pull/39742" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/WebKit/WebKit/pull/39742</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/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#a11y</a> <a href="https://mastodon.social/tags/webComponentsCG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponentsCG</a> <a href="https://mastodon.social/tags/w3c" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#w3c</a>

Noah LiebmanThis just popped into my head and I have not thought about it deeply in the slightest, but```css slot { all: inherit; } ```<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a>

Danny Bluehtml streaming + DSD lets us build sites with dynamic parts of your view with 0 client side javascript.<a href="https://indieweb.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</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/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>

Burton SmithI am so stoked to be present "Using Web Components Like a Boss" this year at <a href="https://mastodon.social/@codemash" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codemash</a>!We'll be discussing what happens after you've built a kick-ass <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> library and are working on adoption.<a href="https://events.codemash.org/2025CodeMashConference#/agenda?day=3&lang=en&sessionId=76186000004737001&viewMode=2" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://events.codemash.org/2025CodeMashConference#/agenda?day=3&lang=en&sessionId=76186000004737001&viewMode=2</a>

Ollie Boermans🤔```<my-element style="display:block"> It’s block! </my-element>```or```<my-element><template shadowrootmode="open"><style>:host {display: block}</style><slot></slot></template> It’s block! </my-element>```<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