Sigmoid Social

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Launches" class="mention hashtag" rel="nofollow noopener" target="_blank">#Launches</a> Grid-aware status bar · A web component for energy-smart websites <a href="https://ilo.im/166dmv" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/166dmv</a>_____ <a href="https://mastodon.social/tags/Electricity" class="mention hashtag" rel="nofollow noopener" target="_blank">#Electricity</a> <a href="https://mastodon.social/tags/Sustainability" class="mention hashtag" rel="nofollow noopener" target="_blank">#Sustainability</a> <a href="https://mastodon.social/tags/Website" class="mention hashtag" rel="nofollow noopener" target="_blank">#Website</a> <a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener" target="_blank">#Design</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDesign</a> <a href="https://mastodon.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> <a href="https://mastodon.social/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#OpenSource</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a>

Stephan H. WisselWhy do all <a href="https://chaos.social/tags/webcomponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponent</a> examples use innerHtml = when innerHtml is inherently insecure?

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Launches" class="mention hashtag" rel="nofollow noopener" target="_blank">#Launches</a> Split Flap · A fun text animation web component for your site <a href="https://ilo.im/165pb9" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/165pb9</a>_____ <a href="https://mastodon.social/tags/Text" class="mention hashtag" rel="nofollow noopener" target="_blank">#Text</a> <a href="https://mastodon.social/tags/Display" class="mention hashtag" rel="nofollow noopener" target="_blank">#Display</a> <a href="https://mastodon.social/tags/Animation" class="mention hashtag" rel="nofollow noopener" target="_blank">#Animation</a> <a href="https://mastodon.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> <a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener" target="_blank">#Design</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDesign</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

Dave 🧱 :cursor_pointer:Wanted to try out this <syntax-highlight> <a href="https://mastodon.design/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> for myself <a href="https://andreruffert.github.io/syntax-highlight-element/" rel="nofollow noopener" translate="no" target="_blank">https://andreruffert.github.io/syntax-highlight-element/</a>The result is super clean and a fair chunk smaller than what's typically used. Even works with contenteditable! <a href="https://codepen.io/daviddarnes/pen/bNVVVxQ?editors=1000" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/daviddarnes/pen/bNVVVxQ?editors=1000</a>

xoron :verified:Are Web Components & Cybersecurity A Better Combo?I'm not trying to dunk on popular <a href="https://infosec.exchange/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a> <a href="https://infosec.exchange/tags/frameworks" class="mention hashtag" rel="nofollow noopener" target="_blank">#frameworks</a> – I'm sure they're totally fine for <a href="https://infosec.exchange/tags/cybersecurity" class="mention hashtag" rel="nofollow noopener" target="_blank">#cybersecurity</a> stuff, probably get loads of reviews and <a href="https://infosec.exchange/tags/audits" class="mention hashtag" rel="nofollow noopener" target="_blank">#audits</a>.But from my angle: Web Components are *native* to the <a href="https://infosec.exchange/tags/browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#browser</a>. Doesn't that just inherently reduce the risk of **<a href="https://infosec.exchange/tags/SupplyChainAttacks" class="mention hashtag" rel="nofollow noopener" target="_blank">#SupplyChainAttacks</a>** (you know, like a rogue `npm install` on a bad network) for your <a href="https://infosec.exchange/tags/AppSecurity" class="mention hashtag" rel="nofollow noopener" target="_blank">#AppSecurity</a>?Or am I overthinking it, and the <a href="https://infosec.exchange/tags/framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#framework</a> choice is less important than the <a href="https://infosec.exchange/tags/browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#browser</a>, <a href="https://infosec.exchange/tags/OS" class="mention hashtag" rel="nofollow noopener" target="_blank">#OS</a>, or <a href="https://infosec.exchange/tags/device" class="mention hashtag" rel="nofollow noopener" target="_blank">#device</a> running it? What are your thoughts, <a href="https://infosec.exchange/tags/DevCommunity" class="mention hashtag" rel="nofollow noopener" target="_blank">#DevCommunity</a>?---Quick context: I've got a <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReactJS</a> <a href="https://infosec.exchange/tags/messagingApp" class="mention hashtag" rel="nofollow noopener" target="_blank">#messagingApp</a> (repo here: <a href="https://github.com/positive-intentions/chat" rel="nofollow noopener" translate="no" target="_blank">https://github.com/positive-intentions/chat</a>) and a separate <a href="https://infosec.exchange/tags/UIFramework" class="mention hashtag" rel="nofollow noopener" target="_blank">#UIFramework</a> (repo here: <a href="https://github.com/positive-intentions/dim" rel="nofollow noopener" translate="no" target="_blank">https://github.com/positive-intentions/dim</a>) built with <a href="https://infosec.exchange/tags/Lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#Lit</a> (which uses Web Components). I'm genuinely wondering if there's a compelling <a href="https://infosec.exchange/tags/cybersecurity" class="mention hashtag" rel="nofollow noopener" target="_blank">#cybersecurity</a> reason to refactor the chat app to use my <a href="https://infosec.exchange/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> UI framework. Might be a whole new level of <a href="https://infosec.exchange/tags/SecurityByDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#SecurityByDesign</a> for <a href="https://infosec.exchange/tags/FrontEndDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#FrontEndDev</a>.FYI, same question's on Reddit here: <a href="https://www.reddit.com/r/ExperiencedDevs/comments/1lmk1rg/are_web_components_better_for_cybersecurity/" rel="nofollow noopener" translate="no" target="_blank">https://www.reddit.com/r/ExperiencedDevs/comments/1lmk1rg/are_web_components_better_for_cybersecurity/</a>, got some good <a href="https://infosec.exchange/tags/insights" class="mention hashtag" rel="nofollow noopener" target="_blank">#insights</a>, but want to make sure nothing's getting overlooked! Let's discuss <a href="https://infosec.exchange/tags/InfoSec" class="mention hashtag" rel="nofollow noopener" target="_blank">#InfoSec</a> <a href="https://infosec.exchange/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://infosec.exchange/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://infosec.exchange/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#OpenSource</a> <a href="https://infosec.exchange/tags/TechQuestion" class="mention hashtag" rel="nofollow noopener" target="_blank">#TechQuestion</a>.

Wolfram wants peacethanks to a discussion on reddit [1] and some links [2] I came across a different view on <a href="https://mastodontech.de/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a>. In short, just wrap content in a <a href="https://mastodontech.de/tags/webcomponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponent</a> instead of trying to "upgrade" it. Like so:<user-avatar> <img src> </user-avatar>I always thought until now that it should rather be <img src is=user-avatar>but `is` is not widely usable. I still need to digest it. I see the use cases, but somehow feels still strange[1] <a href="https://www.reddit.com/r/HTML/comments/1ldt5s4/spaish_upgrading_the_details_element/" rel="nofollow noopener" translate="no" target="_blank">https://www.reddit.com/r/HTML/comments/1ldt5s4/spaish_upgrading_the_details_element/</a> [2] <a href="https://adactio.com/journal/20618" rel="nofollow noopener" translate="no" target="_blank">https://adactio.com/journal/20618</a>

westbrook<a href="https://front-end.social/@webkit" class="u-url mention" rel="nofollow noopener" target="_blank">@webkit</a> Also, while I'm here, <a href="https://mastodon.social/tags/firefox" class="mention hashtag" rel="nofollow noopener" target="_blank">#firefox</a> <a href="https://mastodon.social/tags/mozilla" class="mention hashtag" rel="nofollow noopener" target="_blank">#mozilla</a> <a href="https://mastodon.social/@FirefoxDevTools" class="u-url mention" rel="nofollow noopener" target="_blank">@FirefoxDevTools</a> where's my support for `:host:has(...)` at!?!<a href="https://mastodon.social/tags/testTheWebForward" class="mention hashtag" rel="nofollow noopener" target="_blank">#testTheWebForward</a> <a href="https://mastodon.social/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponent</a>

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" target="_blank">@vite</a> Here I've written about said framework - <a href="https://mastodon.gamedev.place/@teskooano/114432752411496927" rel="nofollow noopener" translate="no" target="_blank">https://mastodon.gamedev.place/@teskooano/114432752411496927</a> <a href="https://tane.codes/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponent</a> <a href="https://tane.codes/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://tane.codes/tags/framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#framework</a> <a href="https://tane.codes/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a> <a href="https://tane.codes/tags/vite" class="mention hashtag" rel="nofollow noopener" target="_blank">#vite</a>

🔭 TeskooanoVersion 0.2.0 of <a href="https://mastodon.gamedev.place/tags/teskooano" class="mention hashtag" rel="nofollow noopener" target="_blank">#teskooano</a> is out!Read about the release and the new <a href="https://mastodon.gamedev.place/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponent</a> <a href="https://mastodon.gamedev.place/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.gamedev.place/tags/framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#framework</a> I've written - now live on the site!Also see the roadmap for upcoming plans<a href="https://teskooano.space/plan/00002/" rel="nofollow noopener" translate="no" target="_blank">https://teskooano.space/plan/00002/</a><a href="https://mastodon.gamedev.place/tags/gamedev" class="mention hashtag" rel="nofollow noopener" target="_blank">#gamedev</a> <a href="https://mastodon.gamedev.place/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.gamedev.place/tags/indieDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#indieDev</a> <a href="https://mastodon.gamedev.place/tags/ui" class="mention hashtag" rel="nofollow noopener" target="_blank">#ui</a> <a href="https://mastodon.gamedev.place/tags/typescript" class="mention hashtag" rel="nofollow noopener" target="_blank">#typescript</a>

Tane Piper ⁂I think I've accidentally built quite a cool '<a href="https://tane.codes/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponent</a>-as-a-plugin' system for the <a href="https://mastodon.gamedev.place/@teskooano" class="u-url mention" rel="nofollow noopener" target="_blank">@teskooano</a> UI - essentially two functions - one to register base components, and one to register full plugins, that are made up of one or more web components, functions and a controller. These components can self-register things like buttons in certain toolbars, or you can just add them as functions (like opening a new external URL). I'll post a bit more on it later

🔭 TeskooanoJust released: <a href="https://mastodon.gamedev.place/tags/teskooano" class="mention hashtag" rel="nofollow noopener" target="_blank">#teskooano</a> new <a href="https://mastodon.gamedev.place/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponent</a> based engine toolbar - a plugin toolbar that allows panels to register themselves with a button - so it;s much easier to add new features.<a href="https://teskooano.space" rel="nofollow noopener" translate="no" target="_blank">https://teskooano.space</a><a href="https://mastodon.gamedev.place/tags/gameDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#gameDev</a> <a href="https://mastodon.gamedev.place/tags/indieDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#indieDev</a> <a href="https://mastodon.gamedev.place/tags/threeJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#threeJS</a>

Noah LiebmanIf you have a <a href="https://mastodon.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> with```js constructor() { this.mq = matchMedia(…) } ```do you need to clean up any change listeners in `disconnectedCallback()`?This was not intuitive to me, and I could imagine it going both ways.1/2 (answer in next post)

keithamus<a href="https://github.com/w3c/csswg-drafts/issues/10013#issuecomment-2627222385" rel="nofollow noopener" translate="no" target="_blank">https://github.com/w3c/csswg-drafts/issues/10013#issuecomment-2627222385</a>Call to action for <a href="https://indieweb.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> / <a href="https://indieweb.social/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a> fans: I've added an experimental flag to Firefox lifting the restriction on adoptedStyleSheets, meaning shadowroots can adopt `link.sheet` or `style.sheet`.Please try this out, and let me know if you encounter issues!

Dave 🧱 :cursor_pointer:Hey gang, good news, I'm back on my bullshit! By which I mean I made a new <a href="https://mastodon.design/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> that exposes page statuses from <a href="https://mastodon.social/@zeroheight" class="u-url mention" rel="nofollow noopener" target="_blank">@zeroheight</a> on any website. Almost the perfect <a href="https://mastodon.design/tags/DesignSystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#DesignSystems</a> tooling intersection if you ask me. Here's how I did it (bonus GitHub repo within): <a href="https://zeroheight.com/blog/api-tutorial-add-page-statuses-to-any-website/" rel="nofollow noopener" translate="no" target="_blank">https://zeroheight.com/blog/api-tutorial-add-page-statuses-to-any-website/</a>

David BissetBuilding a QR Code <a href="https://phpc.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> Web Component via <a href="https://mstdn.social/@scottjehl" rel="nofollow noopener" translate="no" target="_blank">https://mstdn.social/@scottjehl</a><a href="https://scottjehl.com/posts/q-r" rel="nofollow noopener" translate="no" target="_blank">https://scottjehl.com/posts/q-r</a><a href="https://phpc.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> <a href="https://phpc.social/tags/QR" class="mention hashtag" rel="nofollow noopener" target="_blank">#QR</a> <a href="https://phpc.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a>

Inautilo<a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener" target="_blank">#Design</a> <a href="https://mastodon.social/tags/Fun" class="mention hashtag" rel="nofollow noopener" target="_blank">#Fun</a> EmojiStorm · Let it snow, or bring on the emoji party! <a href="https://ilo.im/161hqa" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/161hqa</a>_____ <a href="https://mastodon.social/tags/SnowFlakes" class="mention hashtag" rel="nofollow noopener" target="_blank">#SnowFlakes</a> <a href="https://mastodon.social/tags/Emojis" class="mention hashtag" rel="nofollow noopener" target="_blank">#Emojis</a> <a href="https://mastodon.social/tags/Smileys" class="mention hashtag" rel="nofollow noopener" target="_blank">#Smileys</a> <a href="https://mastodon.social/tags/Flags" class="mention hashtag" rel="nofollow noopener" target="_blank">#Flags</a> <a href="https://mastodon.social/tags/Symbols" class="mention hashtag" rel="nofollow noopener" target="_blank">#Symbols</a> <a href="https://mastodon.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

Simon Cox :SEO:<a href="https://fediverse.zachleat.com/@zachleat" class="u-url mention" rel="nofollow noopener" target="_blank">@zachleat</a> It's not snowing here and is unlikely to this December - i have turned on the snow on my site anyway!<a href="https://seocommunity.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a>

Kerrick Long (code)TIL that the name “Component,” of web platform & front-end framework fame, comes from the Gang of Four’s Composite Design Pattern, in which objects made of other objects can be interacted with as though they were a singular object of that type. That shared interface is called a Component, and is implemented by both the Composites and the Leaf nodes.<a href="https://ruby.social/tags/SoftwareEngineering" class="mention hashtag" rel="nofollow noopener" target="_blank">#SoftwareEngineering</a> <a href="https://ruby.social/tags/TodayILearned" class="mention hashtag" rel="nofollow noopener" target="_blank">#TodayILearned</a> <a href="https://ruby.social/tags/DesignPattern" class="mention hashtag" rel="nofollow noopener" target="_blank">#DesignPattern</a> <a href="https://ruby.social/tags/Component" class="mention hashtag" rel="nofollow noopener" target="_blank">#Component</a> <a href="https://ruby.social/tags/Composite" class="mention hashtag" rel="nofollow noopener" target="_blank">#Composite</a> <a href="https://ruby.social/tags/Web" class="mention hashtag" rel="nofollow noopener" target="_blank">#Web</a> <a href="https://ruby.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://ruby.social/tags/React" class="mention hashtag" rel="nofollow noopener" target="_blank">#React</a> <a href="https://ruby.social/tags/Vue" class="mention hashtag" rel="nofollow noopener" target="_blank">#Vue</a> <a href="https://ruby.social/tags/Angular" class="mention hashtag" rel="nofollow noopener" target="_blank">#Angular</a> <a href="https://ruby.social/tags/Ember" class="mention hashtag" rel="nofollow noopener" target="_blank">#Ember</a> <a href="https://ruby.social/tags/Solid" class="mention hashtag" rel="nofollow noopener" target="_blank">#Solid</a> <a href="https://ruby.social/tags/Svelte" class="mention hashtag" rel="nofollow noopener" target="_blank">#Svelte</a> <a href="https://ruby.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a>

Noah LiebmanI don’t have a use case in mind, and this is probably a terrible idea, but it occurred to me that you can use a static EventTarget on a <a href="https://mastodon.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> prototype to synchronize a value across all instances of that component. <a href="https://codepen.io/noleli/pen/OJKKQLy" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/noleli/pen/OJKKQLy</a>

pvergain (framapiaf)- <a href="https://htmx.org/essays/webcomponents-work-great/" rel="nofollow noopener" translate="no" target="_blank">https://htmx.org/essays/webcomponents-work-great/</a>People interested in <a href="https://framapiaf.org/tags/htmx" class="mention hashtag" rel="nofollow noopener" target="_blank">#htmx</a> often ask us about component libraries. React and other JavaScript frameworks have great ecosystems of pre-built components that can be imported into your project; htmx doesn’t really have anything similar.<a href="https://framapiaf.org/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDevelopment</a> <a href="https://framapiaf.org/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a>

Recent searches

Search options

Administered by:

Server stats:

#webcomponent