Shakedown Social

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>.

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>

🔭 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>

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!

westbrookI’ve never had stress around putting all my <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> for all of my <a href="https://mastodon.social/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponent</a> in their <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowDOM</a>… ask me anything.

westbrook<a href="https://front-end.social/@elly" class="u-url mention" rel="nofollow noopener" target="_blank">@elly</a> I wonder what <a href="https://front-end.social/@mia" class="u-url mention" rel="nofollow noopener" target="_blank">@mia</a> used when she recently made her <a href="https://mastodon.social/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponent</a> speaker deck elements?

Dave 🧱 :cursor_pointer:Thanks for the mention <a href="https://front-end.social/@chriscoyier" class="u-url mention" rel="nofollow noopener" target="_blank">@chriscoyier</a>, however I feel like you're trying to set up me and <a href="https://front-end.social/@mia" class="u-url mention" rel="nofollow noopener" target="_blank">@mia</a> to battle it out on who can build the ultimate <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@codepen</a> <a href="https://mastodon.design/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> 😅<a href="https://blog.codepen.io/2024/09/30/chris-corner-web-combinements/" rel="nofollow noopener" translate="no" target="_blank">https://blog.codepen.io/2024/09/30/chris-corner-web-combinements/</a>

Mia (web luddite)Major updates to Monkey Writr, my very serious text editor for infinite monkeys on a deadline:<a href="https://monkey.writr.art" rel="nofollow noopener" translate="no" target="_blank">https://monkey.writr.art</a>Totally re-built in <a href="https://fosstodon.org/@eleventy" class="u-url mention" rel="nofollow noopener" target="_blank">@eleventy</a> 3, along with a newly published <monkey-write> web component that anyone can use! Monkey-write anything your heart can imagine!github: <a href="https://github.com/mirisuzanne/monkey-write" rel="nofollow noopener" translate="no" target="_blank">https://github.com/mirisuzanne/monkey-write</a> npm: <a href="https://www.npmjs.com/package/@terriblemia/monkey-write" rel="nofollow noopener" translate="no" target="_blank">https://www.npmjs.com/package/@terriblemia/monkey-write</a><a href="https://front-end.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> <a href="https://front-end.social/tags/art" class="mention hashtag" rel="nofollow noopener" target="_blank">#art</a> <a href="https://front-end.social/tags/Eleventy" class="mention hashtag" rel="nofollow noopener" target="_blank">#Eleventy</a>

Dave Copeland :ruby:<a href="https://ruby.social/tags/TIL" class="mention hashtag" rel="nofollow noopener" target="_blank">#TIL</a>, (and I cannot find documented), but can easily replicate is that when a <a href="https://ruby.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> <a href="https://ruby.social/tags/CustomElement" class="mention hashtag" rel="nofollow noopener" target="_blank">#CustomElement</a>'s `connectedCallback()` is called, `innerHTML` is undefined, UNLESS, you wait to define your custom element after DOMContentLoaded.I wish there was a callback for a custom element that amounted to “the element has been loaded", but I can see that this doesn't necessarily make sense.[Can't recreate in codepen since it runs all stuff after DOM loaded.]<a href="https://gist.github.com/davetron5000/255ff81851c18a220fa73b329cd8ed4d" rel="nofollow noopener" translate="no" target="_blank">https://gist.github.com/davetron5000/255ff81851c18a220fa73b329cd8ed4d</a>

🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸Check it out; a <a href="https://mastodon.social/tags/webpage" class="mention hashtag" rel="nofollow noopener" target="_blank">#webpage</a> served from a <a href="https://mastodon.social/tags/serverless" class="mention hashtag" rel="nofollow noopener" target="_blank">#serverless</a> <a href="https://mastodon.social/tags/function" class="mention hashtag" rel="nofollow noopener" target="_blank">#function</a> that's distributed on <a href="https://mastodon.social/tags/IPFS" class="mention hashtag" rel="nofollow noopener" target="_blank">#IPFS</a> and executed on someone else's computer that is NOT a big-tech corpo!<a href="https://noisy-answer-late.functions.on-fleek.app/" rel="nofollow noopener" translate="no" target="_blank">https://noisy-answer-late.functions.on-fleek.app/</a>This is a <a href="https://mastodon.social/tags/fleekFunction" class="mention hashtag" rel="nofollow noopener" target="_blank">#fleekFunction</a> running on the <a href="https://mastodon.social/tags/fleekNetwork" class="mention hashtag" rel="nofollow noopener" target="_blank">#fleekNetwork</a>, a <a href="https://mastodon.social/tags/web3" class="mention hashtag" rel="nofollow noopener" target="_blank">#web3</a> <a href="https://mastodon.social/tags/blockchain" class="mention hashtag" rel="nofollow noopener" target="_blank">#blockchain</a> project. The <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> is a <a href="https://mastodon.social/tags/SSR" class="mention hashtag" rel="nofollow noopener" target="_blank">#SSR</a> <a href="https://mastodon.social/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponent</a> rendered by <a href="https://fosstodon.org/@enhance_dev" class="u-url mention" rel="nofollow noopener" target="_blank">@enhance_dev</a> <a href="https://mastodon.social/tags/crypto" class="mention hashtag" rel="nofollow noopener" target="_blank">#crypto</a> <a href="https://mastodon.social/tags/fleek" class="mention hashtag" rel="nofollow noopener" target="_blank">#fleek</a> <a href="https://mastodon.social/tags/onFleek" class="mention hashtag" rel="nofollow noopener" target="_blank">#onFleek</a> <a href="https://mastodon.social/tags/fleekXYZ" class="mention hashtag" rel="nofollow noopener" target="_blank">#fleekXYZ</a> <a href="https://mastodon.social/tags/aws" class="mention hashtag" rel="nofollow noopener" target="_blank">#aws</a> <a href="https://mastodon.social/tags/lambda" class="mention hashtag" rel="nofollow noopener" target="_blank">#lambda</a> <a href="https://mastodon.social/tags/azure" class="mention hashtag" rel="nofollow noopener" target="_blank">#azure</a> <a href="https://mastodon.social/tags/cloud" class="mention hashtag" rel="nofollow noopener" target="_blank">#cloud</a> <a href="https://mastodon.social/tags/cloudFunction" class="mention hashtag" rel="nofollow noopener" target="_blank">#cloudFunction</a> <a href="https://mastodon.social/tags/googleCloud" class="mention hashtag" rel="nofollow noopener" target="_blank">#googleCloud</a>

Mia (web luddite)Anyone know of an existing <a href="https://front-end.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> that does audio playlist progressive enhancement, something like this?<play-list> <audio-track> <track-name for="track-1">My Track</track-name> <audio controls id="track-1" src="…"> </audio-track> … </play-list>(I haven't considered all the details here, just sketching. Should default to individual audio elements with browser UI, but add play-all features on top of that?)

Tixie SalanderHmm I'm wondering if declarative Shadow DOM in Web Components would open the path to new patterns of making nicer without-JS-fallback than with <noscript> elementsBut some experiment gonna be… as always… for some other days<a href="https://mastodon.guerilla.studio/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> <a href="https://mastodon.guerilla.studio/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a> <a href="https://mastodon.guerilla.studio/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a>

DocRekd<a href="https://social.cartoon-aa.xyz/@Cyborus" class="u-url mention" rel="nofollow noopener" target="_blank">@Cyborus</a> <a href="https://social.lol/@triptych" class="u-url mention" rel="nofollow noopener" target="_blank">@triptych</a> <a href="https://mastodon.social/@KimSJ" class="u-url mention" rel="nofollow noopener" target="_blank">@KimSJ</a> Frameworks are still needed to split pages in reusable components. And no, <a href="https://hachyderm.io/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponent</a> is not an option

tea 🌺I have a found all the tech nerds on fedi?<a href="https://indieweb.social/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://indieweb.social/tags/Node" class="mention hashtag" rel="nofollow noopener" target="_blank">#Node</a> <a href="https://indieweb.social/tags/node_js" class="mention hashtag" rel="nofollow noopener" target="_blank">#node_js</a> <a href="https://indieweb.social/tags/nodejs" class="mention hashtag" rel="nofollow noopener" target="_blank">#nodejs</a> <a href="https://indieweb.social/tags/typescript" class="mention hashtag" rel="nofollow noopener" target="_blank">#typescript</a> <a href="https://indieweb.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a> <a href="https://indieweb.social/tags/rust" class="mention hashtag" rel="nofollow noopener" target="_blank">#rust</a> <a href="https://indieweb.social/tags/github" class="mention hashtag" rel="nofollow noopener" target="_blank">#github</a> <a href="https://indieweb.social/tags/npm" class="mention hashtag" rel="nofollow noopener" target="_blank">#npm</a> <a href="https://indieweb.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#code</a> <a href="https://indieweb.social/tags/programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#programming</a> <a href="https://indieweb.social/tags/programmer" class="mention hashtag" rel="nofollow noopener" target="_blank">#programmer</a> <a href="https://indieweb.social/tags/coder" class="mention hashtag" rel="nofollow noopener" target="_blank">#coder</a> <a href="https://indieweb.social/tags/hacker" class="mention hashtag" rel="nofollow noopener" target="_blank">#hacker</a> <a href="https://indieweb.social/tags/js" class="mention hashtag" rel="nofollow noopener" target="_blank">#js</a> <a href="https://indieweb.social/tags/ts" class="mention hashtag" rel="nofollow noopener" target="_blank">#ts</a> <a href="https://indieweb.social/tags/deno" class="mention hashtag" rel="nofollow noopener" target="_blank">#deno</a> <a href="https://indieweb.social/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#react</a> <a href="https://indieweb.social/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://indieweb.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> <a href="https://indieweb.social/tags/webcomponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponent</a> <a href="https://indieweb.social/tags/opensource" class="mention hashtag" rel="nofollow noopener" target="_blank">#opensource</a> <a href="https://indieweb.social/tags/foss" class="mention hashtag" rel="nofollow noopener" target="_blank">#foss</a> <a href="https://indieweb.social/tags/oss" class="mention hashtag" rel="nofollow noopener" target="_blank">#oss</a> <a href="https://indieweb.social/tags/fedi" class="mention hashtag" rel="nofollow noopener" target="_blank">#fedi</a> <a href="https://indieweb.social/tags/indieweb" class="mention hashtag" rel="nofollow noopener" target="_blank">#indieweb</a> <a href="https://indieweb.social/tags/nyc" class="mention hashtag" rel="nofollow noopener" target="_blank">#nyc</a> <a href="https://indieweb.social/tags/astoria" class="mention hashtag" rel="nofollow noopener" target="_blank">#astoria</a> <a href="https://indieweb.social/tags/tech" class="mention hashtag" rel="nofollow noopener" target="_blank">#tech</a> <a href="https://indieweb.social/tags/techstack" class="mention hashtag" rel="nofollow noopener" target="_blank">#techstack</a>

tomhazledineWhat's this? Another last-thing-on-a-friday release of a thing? It’s like I'm a marketing genius or something…Anyway, my "stacked sparklines" <a href="https://mastodon.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> is now available for folks to download and play with.(fancy page demoing all the options coming “soon”)<a href="https://github.com/tomhazledine/stacked-sparklines" rel="nofollow noopener" translate="no" target="_blank">https://github.com/tomhazledine/stacked-sparklines</a>

🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸<a href="https://indieweb.social/@brianleroux" class="u-url mention" rel="nofollow noopener" target="_blank">@brianleroux</a> I think you've muddied the waters by calling your templates "web components". They are just HTML. It's not a <a href="https://mas.to/tags/webcomponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponent</a> until a custom element is registered.

Christopher Kirk-NielsenFree HTML Web-Component: <animated-details>. Like a regular <details> element, but, like, animated! It uses that 0fr/1fr trick to animate the height, the only reason it's a web component is that I'd sometimes only get the transition once, or not at all? So JavaScript, of course. Progressively enhanced, of course. Respects user's motion preferences, of course.↕️ <a href="https://codepen.io/chriskirknielsen/pen/yLwoxdr" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/chriskirknielsen/pen/yLwoxdr</a>?<a href="https://mastodon.social/tags/webcomponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponent</a>

Jason GarberDamnation, I should turn aria-collapsible¹ into a <a href="https://mastodon.cc/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a>, shouldn't I?<a href="https://fosstodon.org/@hexagoncircle/111625384750337818" rel="nofollow noopener" translate="no" target="_blank">https://fosstodon.org/@hexagoncircle/111625384750337818</a>☝🏻 via <a href="https://fediverse.zachleat.com/@zachleat" class="u-url mention" rel="nofollow noopener" target="_blank">@zachleat</a>¹ <a href="https://github.com/jgarber623/aria-collapsible" rel="nofollow noopener" translate="no" target="_blank">https://github.com/jgarber623/aria-collapsible</a>

ColinautUpdated my action-table <a href="https://dice.camp/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponent</a> to 2.0 with a number of new features that I wanted including: * local storage for saving sort/filter state * URL search params for setting initial sort/filter * free text search input filter * whole table search * more little touches<a href="https://colinaut.github.io/action-table/" rel="nofollow noopener" translate="no" target="_blank">https://colinaut.github.io/action-table/</a>

Ayo Ayco🎉 New major release <a href="https://social.ayco.io/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> v2.0.0!New Features - Easily define and initialize `props` that get translated into observed HTML attributes - A new minimal `html` function for tagged templates powered by preact's tiny (450 Bytes) `htm/mini` - Attach "side effects" that gets triggered on property value changes with `attachEffect` - All internals now exposed as utils in `web-component-base/utils`<a href="https://social.ayco.io/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://social.ayco.io/tags/sideProjects" class="mention hashtag" rel="nofollow noopener" target="_blank">#sideProjects</a> <a href="https://social.ayco.io/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a> <a href="https://social.ayco.io/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://social.ayco.io/tags/opensource" class="mention hashtag" rel="nofollow noopener" target="_blank">#opensource</a><a href="https://github.com/ayoayco/web-component-base/releases/tag/v2.0.0" rel="nofollow noopener" target="_blank">https://github.com/ayoayco/web-component-base/releases/tag/v2.0.0</a>

Recent searches

Search options

Administered by:

Server stats:

#webcomponent