9 Best Articles in 2022
Lea Verou
The failed promise of Web Components
Lea Verou
4 min read · 2020-09-24 · Web Components had so much potential to empower HTML to do more, and make web development more accessible to non-programmers and easier for programmers. Remember how exciting it was every time we got…
Reader View · Shared by 159, including Chris Heilmann, Benoist Lawniczak, Alain, Eric Bailey, Kevin Marks, Kent C. Dodds 💿 #RemixConf, Jens D. Peter, BrendanEich, Jen Simmons, Evan (he/him), Brian Rinaldi, Rob Dodson, Matteo Fogli, Marius Bleuer
Mozilla
The Power of Web Components
Mozilla
8 min read · From 2018 · Web Components comprises a set of standards that enable user-defined HTML elements. These elements can go in all the same places as traditional HTML. Despite the long standardization process, the ...
Reader View · Shared by 102, including Miguel, Simone Corsi 💻🚀, Michael Duergner, Davy De Pauw, Marius Bleuer, Benny Schudel, Nico Müller 🇺🇦, Charles Baldwin, fernand0, anildash, Alligator.io 🐊, Tableless
Smashing Magazine 🇺🇦
Styled-Components: Enforcing Best Practices In Component-Based Systems
Smashing Magazine 🇺🇦
20+ min read · From 2017 · Styled-components are used to enforce best practices by removing the mapping between styles and components, and include actual CSS in your JavaScript code.
Reader View · Shared by 69, including Max Stoiber, René Stalder, Paul Jakob White, Alexandre Joly, César Suárez, Leslie D, Niklaus Gerber, Davy De Pauw, Ferit (at 🏠) 🌙, Michael Duergner
CSS-Tricks
Context-Aware Web Components Are Easier Than You Think
CSS-Tricks
7 min read · Jan 21st · An aspect of web components is that a JavaScript function is called whenever a web component is added or removed from a page.
Reader View · Shared by 81
github.blog
How we use Web Components at GitHub
github.blog
7 min read · 2021-05-04 · GitHub has long been a proponent of Web Components. Here's how we use them.
Reader View · Shared by 95, including Michael Zumstein, Rob Dodson, Richard MacManus, Marius Bleuer, Dion Almaer
The New Stack
How Web Components Are Used at GitHub and Salesforce
The New Stack
5 min read · 2021-02-22 · Web components aren’t as well documented as React components, but GitHub and Salesforce have both implemented this emerging standard.
Reader View · Shared by 59, including Richard MacManus, Chris Heilmann, Arturo Rebolledo, Dion Almaer, Sara Soueidan
Codrops
Creating Native Web Components
Codrops
6 min read · Mar 4th · Learn how to create native web components with the Minze JavaScript framework.
github.com
styled-components/styled-components: Visual primitives for the component age 💅
github.com
From 2016 · styled-components - Visual primitives for the component age 💅
Shared by 46, including Yoav Ganbar, Galen King, Patric Fornasier, Nando 💪🇦🇺🇦🇷, Jon Thompson, CarloZen | Astrocave, Max Stoiber, Ahrbil, Paulo Gaspar, Mattia Fregola 🤔, Pizza 🍕
adamsilver.io
The problem with web components by Adam Silver, designer based in London, UK.
adamsilver.io
6 min read · From 2019 · Web components are becoming increasingly popular but they have a number of drawbacks. In this article I'll explain what those are and what I recommend instead.
Reader View · Shared by 35, including Fabricio Teixeira, Marius Bleuer
Trending
daverupert.com
7 Web Component Tricks
daverupert.com
2 min read · Apr 14th · This week I finished my Frontend Masters Web Components Course. To market it celebrate that accomplishment, I wanted to share ~7 tips and tricks I’ve learned preparing my course or I feel aren’t super…
Reader View · Shared by 99, including Yoav Ganbar
Cory LaViska
Design Systems Aren't Cheap
Cory LaViska
3 min read · Apr 6th · You can save a lot of money by jump-starting your design system with Web Components.
Reader View · Shared by 96, including zeldman
blog.openreplay.com
Build a Lightweight Web Component with Lit.js
blog.openreplay.com
~13 min read · Apr 26th · Lit - a framework to build adaptable, reusable web components.
Reader View · Shared by 54
Smashing Magazine 🇺🇦
CTA Modal: How To Build A Web Component — Smashing Magazine
Smashing Magazine 🇺🇦
~17 min read · Apr 29th · In this article, Nathan Smith explains how to create modal dialog windows with rich interaction that will only require authoring HTML in order to be used. They are based on Web Components that are…
More like this
DEV Community 👩💻👨💻
Why I don't use web components
DEV Community 👩💻👨💻
9 min read · From 2019 · For my first post on dev.to I thought I'd write about a nice, safe topic that's free of controversy: web components. I'm mostly writing this for my future self, so that I have something to point to…
Reader View · Shared by 93, including ross, Marius Bleuer, Lea R. 🦄, Rich Harris, Alligator.io 🐊, Kent C. Dodds 💿 #RemixConf, Bernhard Huessy, Devon Govett, Evan You, Marijn Haverbeke, Cameron Yick
CSS-Tricks
An Introduction to Web Components
CSS-Tricks
5 min read · From 2019 · Front-end development moves at a break-neck pace. This is made evident by the myriad articles, tutorials, and Twitter threads bemoaning the state of what
Reader View · Shared by 80, including Lea R. 🦄, Rodrigo Noales, Ferit (at 🏠) 🌙, Benoist Lawniczak, Yoav Ganbar
customelements.io
CustomElements.io · Explore the world of Web Components
customelements.io
From 2016 · CustomElements.io is where community find awesome Web Components. Featuring more than 2169 repositories from 870 authors.
Shared by 38, including Diego Paladino, b, Patric Fornasier
tailwindui.com
Tailwind UI
tailwindui.com
4 min read · From 2019 · Beautifully designed components and templates, built with Tailwind CSS.
Reader View · Shared by 116, including Yoav Ganbar, Dominik Brack, Ahrbil, Dayyan Smith, Marten Mühlenstein, David Hellmann, Navjeet Chabbewal, Brian Casel, Justin Jackson, Baadier Sydow 🇿🇦, Marius Bleuer, Sachin Gawas, Alain, Christophe Jean, Veni Kunche, Pizza 🍕, Kunal Bhatia, Balda, Steve Schoger, Claudio Perez Gamayo
daverupert.com
7 Web Component Tricks
daverupert.com
2 min read · Apr 14th · This week I finished my Frontend Masters Web Components Course. To market it celebrate that accomplishment, I wanted to share ~7 tips and tricks I’ve learned preparing my course or I feel aren’t super…
Reader View · Shared by 99, including Yoav Ganbar
github.com
Move over JavaScript: Back-end languages are coming to the front-end
github.com
Feb 8th · A new crop of tools is helping developers build web UI components on the backend—no JavaScript required!
CSS-Tricks
Making Web Components for Different Contexts
CSS-Tricks
6 min read · From 2019 · Let’s talk about how to work with Web Components, what to consider when making them, and how to embrace them in your projects — By Mattia Astorino
Reader View · Shared by 23, including Chris Coyier
Mozilla
Developer Tools support for Web Components in Firefox 63
Mozilla
1 min read · From 2018 · Shadow DOM and Web Components are enabled by default in Firefox 63 and the Developer Tools are ready for them ! If you are using Web Components in your project, ...
Reader View · Shared by 33, including Kohei Asai, Simone Corsi 💻🚀, Charlie O'Keefe, Nico Müller 🇺🇦, Arin Basu
erikkroes.nl
The Guide to Accessible Web Components
erikkroes.nl
9 min read · From 2020 · Web Components are a newly supported standard. They're a great match for Design Systems because they're futureproof and work with any framework. Building proper UI Web Components can be quite a task…
Reader View · Shared by 24, including Marcy Sutton-Todd, Michael Zumstein, Web Axe, Steve Faulkner, PacielloGroup, Marius Bleuer
