Frontend Focus

#​506 — September 1, 2021 | Read on the web

Image via: Mozilla

Why Are Hyperlinks Blue? — A deep dive into the history of interfaces and link designs over the years to track down the origin of the blue link we know today — lots of nostalgic interface design here.

Elise Blanchard

An Introduction to the Solid JavaScript LibrarySolid is a reactive library for creating user interfaces without a virtual DOM, instead compiling templates down to real DOM nodes with fine-grained updates then doing as little as is necessary to reflect state updates.

Charlie Gerard

Dynamic Charts Based on Data Selection in Angular — Ever had users asking to be able to generate their own charts? This tutorial shows you how easy it can be with Kendo UI for Angular. All users can select data in the grid and then your app will generate a chart to visualize it.

Progress Kendo UI for Angular sponsor

You Want Enabling CSS Selectors, Not Disabling Ones — “An enabling selector is what I call a selector that does a job without disabling the particular rule”. Chris Coyier distills down the core of this idea here.

Silvestar Bistrović

What's New In DevTools for Chrome 94 — Including using DevTools in your preferred language, new CSS container queries badge, a checkbox to invert network filters, and more.

Jecelyn Yeen (Google)

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Building a Responsive Stepper Component — Runs through creating a horizontal and vertical stepper component with CSS flexbox. This is fabulously detailed and educational. 👍

Ahmad Shadeed

Pushing Back Against Privacy Infringement on the Web — “The Web is still wrestling with issues we take for granted offline, privacy chief among them”. This article outlines the steps taken at The New York Times to protect user data, and how you can do similar.

Robin Berjon

Accessibility from the Ground Up — Some sound pointers for getting started with accessibility.

Kitty Giraudel

Why Use a Time Series Platform for Application Performance Monitoring

InfluxData sponsor

Scrollbar Reflowing — Something worth knowing about scrollbars, viewport units and overflow, and a note about an incoming spec-based solution.

Chris Coyier

On The ‹dl› — A look at the often forgotten <dl> element, highlighting its versatility and how to best make use of it.

Ben Myers

How to Use Puppeteer to Automate Chrome in an API with Netlify Serverless Functions
Colby Fayock

A Step-By-Step Process for Turning Designs Into Code
Mark Noonan

Using SVG with Media Queries
Tiffany Brown


Frontend Developer — We’re seeking an experienced Frontend dev strong in JavaScript to join our small team. We offer a flexible work environment in a company that believes in sustainable growth and a good work balance.

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.

🔧 Code, Tools and Resources

Buttons Generator — Over 100 buttons you can use in your project, just tap to copy the code.

Marko Denic

Assembler CSS: A Just-in-Time CSS UI Framework — Has some similarities to Tailwind and includes states, scopes, and mixins, and custom elements for a more programmatic experience. Still in early development, but worth keeping an eye on.

Assembler CSS

(Launched) Courier’s React Toast and Inbox Components — Courier is a notification management API and UI that enables sending notifications at scale from your app to your user.

Courier sponsor

Stitches 1.0: The Modern Styling Library — Annother CSS-in-JS solution, this one offering high performance, SSR, theming, critical path CSS, an intuitive API, and lots more.


Bioicons: High Quality Science Illustrations — A niche set admittedly, but there’s a sizeable collection here (about 1700 icons) that are filterable by category and downloadable as SVG files or SVG code. Free, but many seem to require attribution.

Simon Duerr

tailwind-merge: A Utility Function to Efficiently Merge Tailwind CSS Classes in JS Without Style Conflicts
Dany Castillo

LaTeX Tailwind: An Almost-Class-less CSS Library to Style HTML like a LaTeX Document — If you like that academic look.
Sam Robbins