I think it’s kinda cool to see Google dropping repos of interesting web components. It demonstrates the possibilities of cool new web features and allows them to ship them in a way that’s compatible with entirely web standards.
Here’s one: <two-up>
I wanted to give it a try, so I linked up their example two-up-min.js
script in a Pen and used the element by itself to see how it works. They expose the component’s styling with custom properties, which I’d say is a darn nice use case for those.
<two-up&rt; by Chris Coyier (@chriscoyier) on CodePen.
The code is so ugly I hope I never have to write or maintain code like this for a real live production site
Elaborate?
Is that what is ugly to you?
Sorry I should have been more specific. The usage is great, I’m super happy with that. Its the implementation code itself, specifically two-up.ts.
I’ve become so accustomed to using JSX for both Vue and React, and Angular (whereby there is little DOM manipulation code) that this code now looks alien to me. Having to append children to an element, set and remove attributes, inserting elements into the DOM, having to call
addEventListener
and probablyremoveEventListener
seems so clunky to me now. I guess I’m spoilt by the frameworks of the day.Hmm, doesn’t do anything in Edge… Neat in Chrome though.
I wonder how much longer? Is Microsoft saying when the Chromium switch is going to ship?
https://github.com/GoogleChromeLabs/two-up#attributes
“Boolean attribute that enables Edge support.”
Not. Keyboard. Friendly.
#a11y #EnuffSaid
Do you mean Web Components are not keyboard friendly? I’m 99% sure that’s not true. I’m fairly sure you have to be careful about it though like anything else. Marcy Sutton has a presentation about Web Components and accessibility.
Or do you mean this particular demo? If that’s the case, that’s a pretty interesting scenario. I wonder how a slider like this would work. Perhaps a focus style and then keyboard keys like left and right arrow to move it? Or does that override other accessibility controls? Anyway, the thing is open source, so I’m sure they’d welcome either commits to help it or discussion in the issues.
Hi Chris – yes, I meant this particular component.
Arrow keys would work. But for simplicity, maybe bind them so a single interaction in either direction reveals the whole image. And probably wise to disable that functionality for screen readers with
aria-hidden: true
?A great idea but it looks really ugly. The shadows make it look “fuzzy” and for some reason the bar extends a few pixels below the photos and no matter how hard I try I can’t fix that in inspector. Not a huge problem you’d think but it underlines the problem with using “black box” components like this with limited styling options.
Maybe I’m missing something, but this HTML does not validate in HTML5, so how is this “compatible with […] web standards”?
Web Components are quite literally web standards: https://github.com/w3c/webcomponents
If you’re using some validator that invalidates that 1) it doesn’t matter 2) it’s wrong