DavidDarnes, (edited ) to random
@DavidDarnes@mastodon.design avatar

Do #WebComponents work?
Ask Adobe, Amazon, Apple, AXA, Blizzard, Dell, EA, Ford Motors, General Electric, General Motors, GitHub, GitLab, Google, IBM, ING, Microsoft, NASA, Netlify, Reddit, Red Hat, Salesforce, Siemens, Stripe, Telekom, Ubisoft, Visa, Volkwagen, Vonage, YouTube…

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar
DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

Does anyone have any “gotchas” that they wish they knew when getting into them?

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

New Web Component! <contrast-details>

A Web Component for revealing the contrast ratio and level of two colours set using CSS Custom Properties.

Here's the origin story: https://zeroheight.com/blog/color-contrast-with-web-components/

DavidDarnes,
@DavidDarnes@mastodon.design avatar

I also have a more technical article showing how the <contrast-details> Web Component works on my own blog:
https://darn.es/contrast-details-web-component/

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

Looking for people in the #WebComponents community that don't look like they'd fit into that Guys at Wimbledon meme

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

State of the Browser hosted by @webstandards in September is shaping up really nicely. The speakers and their talks sound super interesting.

Also, I'll be speaking there about how and why I've been building my open source #WebComponents:
https://2024.stateofthebrowser.com

nhoizey, to random French
@nhoizey@mamot.fr avatar

““Web components” considered harmful” by @mayank

🔗 https://www.mayank.co/blog/web-components-considered-harmful

> This is a branding problem as much as it is an education problem. Neither the HTML standard nor the DOM standard mentions the term “web components” anywhere. And yet it’s present everywhere in documentation and learning material.

#WebComponents

⚓️ https://nicolas-hoizey.com/links/2024/05/29/web-components-considered-harmful/

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

Would anyone like to test out a new Web Component I’ve been working on? It’s for enhancing code blocks on web pages

#WebComponents

categulario, to vuejs Spanish
@categulario@mstdn.mx avatar

Hagan sus apuestas, ¿podré hacer una transición suave y por partes entre #vuejs 2.5 y #webcomponents ?

averíguelo en el próximo capítulo de #ArqueologíaDeSoftware

nolan, to random
@nolan@toot.cafe avatar

Good news for #webcomponents: Chromium fixed a perf bug for repeated stylesheets in shadow DOM: https://issues.chromium.org/issues/341327461

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

Incase you were wondering:

  • HTMLElement is still the only class you can extend (because Safari)
  • <slot> only works within Shadow DOM

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

Very clear pattern forming in a few of my , creating a <template> element outside of the component code itself for reduced repetition and performance. I'm effectively polyfilling for Declarative Shadow DOMs inability to be defined once for many instances. Though I guess I'm also polyfillnig for a lack of “Declarative Light DOM" too 🤔

DavidDarnes,
@DavidDarnes@mastodon.design avatar
nhoizey, to random French
@nhoizey@mamot.fr avatar

““Web components” considered harmful” by @mayank

🔗 https://www.mayank.co/blog/web-components-considered-harmful

> This is a branding problem as much as it is an education problem. Neither the HTML standard nor the DOM standard mentions the term “web components” anywhere. And yet it’s present everywhere in documentation and learning material.

#WebComponents

⚓️ https://nicolas-hoizey.com/links/2024/05/29/web-components-considered-harmful/

davatron5000, to random
@davatron5000@mastodon.social avatar

📝 Quick post on a common experience I see when people are test-driving for the first time.

https://daverupert.com/2024/05/cold-turkey-wont-fix-your-javascript-addiction/

slightlyoff, to random
@slightlyoff@toot.cafe avatar

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:

https://blogs.windows.com/msedgedev/2024/05/28/an-even-faster-microsoft-edge/

josh, to microsoft
@josh@vickerson.me avatar

Parts of #Microsoft #Edge get up to 76% faster by dropping #React in favor of Web Components.

React's days may finally be coming to an end 🤞

https://blogs.windows.com/msedgedev/2024/05/28/an-even-faster-microsoft-edge/
————
#WebDev #WebComponents

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar
mobileatom, to random
@mobileatom@flipboard.com avatar
DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

New Web Component! <random-source>

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

https://darn.es/random-source-web-component/

cirrus, to webdev
@cirrus@mstdn.social avatar

Started writing a decision log for our #DesignSystem. Documenting why we chose to build plain ol' #HTML and #CSS where we can and #WebComponents where client-side #JS is needed is turning into a bit of a manifesto. Essentially we're using (and encouraging others to use) #ProgressiveEnhancement 😉

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

New Web Component! <live-filter>

A Web Component for filtering items using a text input. Made this for a friend a while back and thought I should wrap it up into a neat package to go alongside my other #WebComponents.

I'll get a write up done soon but for now here's the GitHub repo and npm package:
📂 https://github.com/daviddarnes/live-filter
📦 https://www.npmjs.com/package/@daviddarnes/live-filter

DavidDarnes,
@DavidDarnes@mastodon.design avatar

Updated <live-filter> with a case attribute option so filtering doesn’t have to match capitalisation #WebComponents

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

80 GitHub stars on my starter template 😳
https://github.com/daviddarnes/component-template

  • All
  • Subscribed
  • Moderated
  • Favorites
  • provamag3
  • InstantRegret
  • mdbf
  • ngwrru68w68
  • magazineikmin
  • thenastyranch
  • rosin
  • khanakhh
  • osvaldo12
  • Youngstown
  • slotface
  • Durango
  • kavyap
  • DreamBathrooms
  • JUstTest
  • tacticalgear
  • ethstaker
  • cisconetworking
  • modclub
  • tester
  • GTA5RPClips
  • cubers
  • everett
  • normalnudes
  • megavids
  • Leos
  • anitta
  • lostlight
  • All magazines