New addition to my #WebComponents collection: <mastodon-post>!
Embed mastodon posts on your web pages by progressively enhancing a regular link and without the need for an <iframe>. Use the built in semantic template or apply your own! Read more about it here: https://darn.es/mastodon-post-web-component/
Enjoy insights from 22K responses about the state of the web platform, from HTML and interactivity to #webcomponents, PWAs, and a lot more.
This project is a monumental effort from people across the world. We even designed novel data collection UIs to gather the data we needed while minimizing friction, which I plan to write a case study about soon.
In the intersect between @zachleat sharing his #WebComponents, @adactio talking about declarative sharing buttons and all y'all (gestures vaguely at blogs and Mastodon) talking about ‘HTML Web Components’ there lies me and my urge to noodle around with small bits of #JavaScript.
Posting up another one of my #WebComponents today. Sort of a unique one this time, but I think it'll be useful for people who want to put together something like website user preferences or create small applications.
<storage-form> is a Web Component to allow regular form elements to interact with the browsers local storage. Wrapping this component around a <form> with <input> elements instantly allows you to add, edit and remove data within local storage:
It's customizable with both CSS Variables and slot elements, and comes with an icon library for any icon you might want! 🔧
After a full year working on a library to build Web Components, this is admittedly the first one I've published outside of any specific project, but it won't be the last! 😁
While the term “HTML Web Components” is fresh out of the oven, the architecture it refers to has been sitting on the counter at room temperature for a while. In this post I offer my insights and musings from a year of working with these components.
Using HTML web components (esp with tools like @astro) has been a deeply refreshing and encouraging method of building interactive UI. I think it really has the potential to change how we build the web.
Oh, you say you're interested in expanded APIs around controlling the way styles flow into your #shadowRoot? Well, have I got some meeting notes for you!
Checkout the discussion by the #webComponentsCG about styling #webComponents in new and more fluent ways. We're gathering use cases to share with browser implementors, so if you've got one, join the conversation in Discord https://discord.gg/ZT7QDsG2kT or in a future breakout to support getting it addressed. 🧑🏼🎤
"The random-source Web Component allows you to cycle randomly through different audio or video sources, utilising existing HTML elements and providing an elegant fallback experience.”
One of the teams I've been working with to climb the performance management maturity ladder is...Edge!?!
We build a lot of the browser out of web "stuff" these days (think bookmarks, history, downloads, settings, new-tab-page, etc.), and moving away from React to a modern Web Components + HTML-first architecture has had a huge benefit for users, particularly folks on low-end hardware: