NotesRecently, a friend asked if I knew of a Web Component that generates a QR Code from meaningful HTML. She said that there seemed to be plenty of options for creating QR codes in general, but none that worked by extending already-useful HTML instead of just configuring it all with JavaScript. I couldn't find any either, but thinking through these kinds of patterns is probably what I enjoy most about working on the web, so I thought I'd write up how I'd make one.Unfurl
NotesSince octothorpes get registered with an Octothorpes Ring, that means youāre automatically on a webring if youāre using octothorpes. So each Ring hosts a web component that lets you put a classic webring browser on your page. You can see it working right now in the footer of this site!Unfurl
NotesIn this job we need to think a lot about the tools we choose and why, so I cataloged all the places where web components (for me) feel like āthe right tool for the jobā. Your list may be different and Iād love to read it. And because I donāt want this to be 100% propaganda, Iāll also cover some of the not-so-great parts of web components as well.FeedUnfurl
NotesThe bottom line is, web components reduce the number of use cases where we need to reach for a framework, but complex large applications will likely still benefit from one. So how about we conclude that frameworks are useful, web components are also useful, stop fighting and go make awesome sh!t using whatever tools we find most productive?FeedUnfurl
NotesWeb apps are the only open and standardised GUI software development and distribution platform thatās available to us. Discarding them out of spite or annoyance is exactly the sort of situation that the phrase ādonāt throw the baby out with the bathwaterā was coined for.FeedUnfurl
NotesI recently tried Storybook, a popular tool for browsing the demos and documentation for a UI component library. I think Storybook offers a good user experience, but its developer experience entails complexity out of proportion to its benefits. I tried creating a simpler web component library browser using web components, and am happy with the result.Unfurl
NotesLit supports server-side rendering through the Lit SSR package. Lit SSR renders Lit components and templates to static HTML markup in non-browser JavaScript environments like Node. It works without fully emulating the browser's DOM, and takes advantage of Lit's declarative template format to enable fast performance, achieve low time-to-first-byte, and support streaming.FeedUnfurl
NotesWeb components and Polymer are exciting technologies that may fundamentally change the way we develop web applications, but because of the large performance gap between browsers that support the technologies natively (aka Chrome 36+) and those that donāt (aka every other browser), it will be difficult for most developers to use web components until theyāre implemented everywhere, and thereās no way of knowing how long that will be.Unfurl
A Web Component to expand or collapse all details elements | Go Make Things
Where web components shine - daverupert.com
Web Components are not Framework Components ā and Thatās Okay ā¢ Lea Verou
Liskov's Gun: The parallel evolution of React and Web Components āĀ Baldur Bjarnason
Building a Storybook-like demo browser with web components āĀ a much simpler way to get most of the benefits
Server-side rendering (SSR) ā Lit
<x-gif>
Why Web Components Aren't Ready for Production... Yet -Telerik Developer Network