It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
In the past few years, we’ve seen a lot of change and diversion in regard to web technologies. In 2020, I foresee us as a web community heading toward two major trends/goals: extensibility and interoperability. Let’s break those down.… Read article “The Web in 2020: Extensibility and Interoperability”
Where do you put styles in web components?
I'm assuming that we're using the Shadow DOM here as, to me, that's one of the big draws of a web component: a platform thing that is a uniquely powerful thing that only the platform can do. So this is about defining styles for a web component in a don't-leak-out way, and less so a way to get global styles to leak in (although that's very interesting as well, which can be … Read article “Thinking Through Styling Options for Web Components”
Christian Schaefer has a great big write-up about dealing with web advertisements. The whole thing is interesting, first documenting all the challenges that ads present, and then presenting modern solutions to each of them.
One code snippet that caught my eye was a simple way to design a component that renders different HTML depending on the screen size.… Read article “A Web Component with Different HTML for Desktop and Mobile”
A standard copy-and-paste YouTube embed lands on your page as an <iframe></iframe> which loads a big ol' pile of other stuff to play that video. But the UX of it is still essentially an image and a play button. Click the play button and the video plays. You can build essentially the same thing with an anchor link wrapping an image!
Not long ago, we covered a very clever "lazy load" technique doing exactly this from Arthur Corenzan that was … Read article “lite-youtube-embed”
In this week's roundup, Apple gets into web components, how Instagram is insta-loading scripts, and some food for thought for self-hosting critical resources.… Read article “Weekly Platform News: Apple Deploys Web Components, Progressive HTML Rendering, Self-Hosting Critical Resources”
Here’s an interesting post by Rich Harris where he’s made a list of some of the problems he’s experienced in the past with web components and why he doesn’t use them today:
… Read article “Why I don’t use web components”Given finite resources, time spent on one task means time not spent on another task. Considerable energy has been expended on web components despite a largely indifferent developer population. What could the web have achieved if that energy had been spent elsewhere?
Did you see that neat technique for using the <picture></picture> element with <source media=""/> to serve an animated image (or not) based on a prefers-reduced-motion media query?
After we shared that in our newsletter, we got an interesting reply from Michael Gale:
What about folks who love their animated GIFs, but just didn’t want the UI to be zooming all over the place? Are they now forced to make a choice between content and UI?
I thought … Read article “Reduced Motion Picture Technique, Take Two”
This article isn’t about how to build web components. Caleb Williams already wrote a comprehensive guide about that recently. Let’s talk about how to work with them, what to consider when making them, and how to embrace them in your projects.… Read article “Making Web Components for Different Contexts”
Over the course of the last four articles in this five-part series, we’ve taken a broad look at the technologies that make up the Web Components standards. First, we looked at how to create HTML templates that could be consumed at a later time. Second, we dove into creating our own custom element. After that, we encapsulated our element’s styles and selectors into the shadow DOM, so that our element is entirely self-contained.
We’ve explored how powerful these … Read article “Advanced Tooling for Web Components”