Frontend Focus

#​513 — October 20, 2021 | Read on the web

▶  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 — Chrome 95 is rolling out starting today. Here, Pete LePage runs through what to expect, including easier routing with the baked-in URLPattern API, the Eye Dropper API (providing a built in tool for selecting colors), and more. Here's a look at what version 95 brings to Chrome's DevTools.

Chrome Developers

Power Up Your JavaScript with Functional Programming — 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" — Chris Coyier chats with Elad Shechter to discuss his reset strategy and how it’s evolved over the last few years following the addition of new CSS features.

CSS Tricks

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 — 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:


Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

📙 Tutorials, Articles & Opinion

Smart CSS Solutions for Common UI Challenges — 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? — 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 — Kendo UI for Angular helped improve UX and bring the popular tool to more platforms in impressive time. Quick read.

Progress Kendo UI for Angular sponsor

Buttons vs. Links: No, They Are Not The Same — 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 — 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' — 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 — 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 — 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 — A simple interactive tool where you answer questions to determine which HTML element to use. You might also like Can I Include, which deals with proper nesting of HTML elements.

Benjamin Holfve Get Image and Video Placeholders Right From Code, Fast — 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.

Wavy Divider Generator: Generate Code for 'Wavy' HTML/CSS Dividers — 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

Shortcut (formerly sponsor

Accessible Palette: Online Tool to Create Color Systems with Consistent Lightness and Contrast

Eugene Fedorenko

LittleJS: A Tiny 2D JavaScript Game Engine with Fast WebGL Rendering — No dependencies and it claims to render 10,000+ objects at 60fps.

Frank Force

OpenSilver 1.0: A Modern, Plugin-Free Reimplementation of Silverlight — 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.


The Classic FPS 'DOOM' Rendered via HTML 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.

Andrew Healey