---
title: "Web Components: Superpowers for HTML?"
publication: "Frontend Focus"
issue: 513
published_at: "2021-10-20"
canonical_url: "https://frontendfoc.us/issues/513"
---
Plus what's your CSS reset strategy? |
[](https://frontendfoc.us/)
Frontend Focus
#513 — October 20, 2021 | [Read on the web](https://frontendfoc.us/issues/513)
[](https://daverupert.com/2021/10/html-with-superpowers/)
▶[HTML with Superpowers](https://daverupert.com/2021/10/html-with-superpowers/) — A 45-minute talk all about Web Components, covering how to use them, style them with CSS, and build them with JavaScript. Dave adds that now browser support is widespread “_they’re worth investigating_”.
Dave Rupert
▶[What's New in Chrome 95 for Developers](https://developer.chrome.com/blog/new-in-chrome-95/) — Chrome 95 is rolling out starting today. Here, Pete LePage runs through what to expect, including easier routing with the [baked-in `URLPattern` API](https://web.dev/urlpattern/), the [Eye Dropper API](https://eyedropper-sample.glitch.me) (_providing a built in tool for selecting colors_), and more. Here's a look at [what version 95 brings to Chrome's DevTools](https://developer.chrome.com/blog/new-in-devtools-95/).
Chrome Developers [](https://frontendmasters.com/learn/functional-javascript/?utm_source=frontendfocus&utm_medium=email&utm_campaign=learningpath)
[Power Up Your JavaScript with Functional Programming](https://frontendmasters.com/learn/functional-javascript/?utm_source=frontendfocus&utm_medium=email&utm_campaign=learningpath) — Learn core functional JS programming techniques by coding with pure functions, learning recursion, higher-order functions, closures, currying, function composition, and more.
Frontend Masters sponsor
[An Interview With Elad Shechter on "The New CSS Reset"](https://css-tricks.com/an-interview-with-elad-shechter-on-the-new-css-reset/) — Chris Coyier chats with Elad Shechter to discuss [his reset strategy](https://elad2412.github.io/the-new-css-reset/) and how it’s evolved over the last few years following the addition of new CSS features.
CSS Tricks
[Fix Web Accessibility Systematically](https://yatil.net/blog/fix-web-accessibility-systematically) — To address web accessibility properly, we must address the whole system on how we develop and use the technologies that build the web.
Eric Eggert
[The Art of Deception, Lighthouse Score Edition](https://www.zachleat.com/web/lighthouse-deception/) — Yes, you _can_ game your Lighthouse score, but no, you shouldn’t — it really helps no one. As such, here are four things to be aware of, and tips for keeping things balanced.
Zach Leatherman
**⚡️ Quick bits:**
- A U.S. governor is [seeking criminal prosecution](https://missouriindependent.com/2021/10/14/missouri-governor-vows-criminal-prosecution-of-reporter-who-found-flaw-in-state-website/) for a reporter who looked at the HTML source code of a webpage, confusing the act as one of a 'hacker'.
- Just in case you are wondering where it's gone, the handy 'CSS Overview' panel in Chrome (Canary) has [moved out of the experiments area](https://twitter.com/argyleink/status/1450458965612142604).
- [Here's a solid overview](https://www.boia.org/blog/whats-new-in-wcag-2.2-new-success-criteria-for-digital-accessibility) of what's new in version 2.2 of Web Content Accessibility Guidelines — expected to release next year.
- Brave Search is [now the default](https://brave.com/search-and-web-discovery/) in the Brave Browser, replacing Google.
- Yeah, the new MacBook Pro's have a notch, so erm, why not [add one to your site](https://xta.github.io/notch-css/) too. 🙃
Jobs
[Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-frontend&utm_content=frontend) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
X-Team
[Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.
Hired
📙 **Tutorials, Articles & Opinion**
[Smart CSS Solutions for Common UI Challenges](https://www.smashingmagazine.com/2021/10/modern-css-solutions-for-common-problems/) — A look at some common user interface problems and use cases we all may face, and how to solve them with modern CSS.
Cosima Mielke
[What If… You Could Use Visual Studio Code as the Editor of In-Browser Developer Tools?](https://christianheilmann.com/2021/10/12/what-if-you-could-use-visual-studio-code-as-the-editor-of-in-browser-developer-tools/) — The next version of Microsoft Edge will feature an experiment that allows you to use Visual Studio Code as the editor of the in-browser Developer Tools. There's also a quick video showing off why this may be a good idea.
Christian Heilmann
[Real World Use Case: Using Angular to Quickly Modernize Fiddler](https://www.telerik.com/about/success-stories/details/fiddler-everywhere-extends-web-debugging-capabilities-to-macos-and-linux-with-kendo-ui?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-angular&utm_content=blog-web-debugging) — Kendo UI for Angular helped improve UX and bring the popular tool to more platforms in impressive time. [Quick read](https://www.telerik.com/about/success-stories/details/fiddler-everywhere-extends-web-debugging-capabilities-to-macos-and-linux-with-kendo-ui?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-angular&utm_content=blog-web-debugging).
Progress Kendo UI for Angular sponsor
[Buttons vs. Links: No, They Are Not The Same](https://yatil.net/blog/buttons-vs-links) — Should some links look like buttons, or should some buttons look like links? Let’s take a look to see what these two UI elements are and what they do, and then, how they can look.
Eric Eggert
[The Button Cheat Sheet](https://www.buttoncheatsheet.com/) — Need a button in your latest project but unsure on markup? This cheat sheet should help.
Manuel Matuzović
['CSS is Going Gosh-Darned Hog Wild, I Tell Ya What'](https://css-tricks.com/css-is-going-gosh-darned-hog-wild-i-tell-ya-what/) — Chris rounds up some of the latest changes and additions to CSS.
CSS Tricks
“_As someone just sittin’ back watching CSS evolve, it feels like we’re at one of the hottest moments of innovation in CSS history._”
___
Chris Coyier
[Detecting Specific Text Input with HTML and CSS](https://www.impressivewebs.com/detecting-specific-text-input-with-html-css/) — A series of HTML and CSS tricks to detect text input and display a ‘secret message’ to the user.
Louis Lazaris
[How It Feels to Code an HTML Email Template in 2021](https://lune.co/post/how-it-feels-to-code-an-html-email-template-in-2021) — It's worth noting this is very much a tongue-in-cheek piece!
Stoil Stoychev
🔧 **Code, Tools and Resources**
[What The Tag: Quickly Find Out Which HTML Tag to Use When](https://whatthetag.com/#/) — A simple interactive tool where you answer questions to determine which HTML element to use. You might also like [Can I Include](https://caninclude.glitch.me/), which deals with proper nesting of HTML elements.
Benjamin Holfve
[Imgsrc.space: Get Image and Video Placeholders Right From Code, Fast](https://imgsrc.space/) — This placeholder service uses a script inserted via a CDN, then you just add images or videos with the specified syntax in the img/video tags.
Imgsrc.space
[](https://wavier.art/)
[Wavy Divider Generator: Generate Code for 'Wavy' HTML/CSS Dividers](https://wavier.art/) — You can pick one of the already defined wavy dividers, then customize the color, shape, and position of the “waves”.
Eugene Zolotarenko
[Shortcut Puts the Agile in Agile and the “Can” in Kanban](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=canbrief)
Shortcut (formerly Clubhouse.io) sponsor
[Accessible Palette: Online Tool to Create Color Systems with Consistent Lightness and Contrast](https://accessiblepalette.com/)
Eugene Fedorenko
[LittleJS: A Tiny 2D JavaScript Game Engine with Fast WebGL Rendering](https://github.com/KilledByAPixel/LittleJS) — No dependencies and it claims to render 10,000+ objects at 60fps.
Frank Force
[OpenSilver 1.0: A Modern, Plugin-Free Reimplementation of Silverlight](https://www.opensilver.net/) — This is a replacement for Microsoft’s _lonnnng_ deprecated Silverlight technology, but as of this 1.0 release boasts being _“powerful enough to run complex line-of-business applications of all sizes”_. It’s open-source and runs in current browsers via WebAssembly.
Userware [](https://healeycodes.com/doom-rendered-via-checkboxes)
[The Classic FPS 'DOOM' Rendered via HTML Checkboxes](https://healeycodes.com/doom-rendered-via-checkboxes) — Is it possible to play DOOM in your browser using nothing but checkboxes for rendering? Yes! Sure, it’s not going to be your first choice, but it’s fun to see it done, and [here’s the source.](https://github.com/healeycodes/doom-checkboxes)
Andrew Healey
📬
**Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*).
---
**Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*).
---
**Got a link for us?** Reply and tell us. We can't include everything but we'll take a look.
---
Published by Cooper Press Ltd.
Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc).
Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom
[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)