Frontend Focus

#​500 — July 21, 2021 | Read on the web

The Future of the Web — I enjoyed this high-level overview musing on what the web is and what it’s becoming: “it’s turning from being static, single-player, and centralized to being immersive, multi-player, and decentralized”.

Hazem Osama opinion

The Performance Effects of Too Much Lazy-loading — Too much of a good thing? Here’s some data-driven advice for when best to use loading="lazy", keeping Core Web Vitals in mind.

Rick Viscomi and Felix Arntz

What If Your Project Management Tool Was Fast and Intuitive? — Imagine how much more you could get done if your project management tools didn't make you sigh. Clubhouse is the ideal solution for task management, bug tracking, iteration planning, and reporting. Delight the scrum gods and give us a try.

Clubhouse sponsor

A Bashful Button Worth $8 Million — Ah, the old 100vh bug strikes again. This is a solid real-world example (on the Olive Garden site) of just how such an error could prove very costly.

Jason Grigsby

Detecting Media Query Support in CSS and JavaScript — To detect if a browser supports a certain CSS feature you’d typically turn to using @supports, but that doesn’t work for media queries. Here’s what you can do about it.

Kilian Valkhof

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Of Course We Can Make a CSS-Only Clock That Tells the Current Time — A fun exercise creating a fully functioning and settable “analog” clock using CSS custom properties and the calc() function.

Mate Marschalko

From a Colourblind Designer to the World: Please Stop Using Red And Green Together — Deuteranopia is a common kind of colourblindness — here the author outlines why red and green can prove problematic when paired and what you can do about it.

Andrew Wilshere

Dark Mode Web App Manifest App Icons — Yep, you can have SVG app icons that are dark mode aware. But there are some caveats to be aware of.

Thomas Steiner

Inspecting Sizes — Dev tools can easily toggle between RGB, HSL, and hex values — but wouldn’t it be nice to have such a switch for sizing too (pixels, ems, etc). Well, you do have some options.

Michelle Barker

React Authentication, Simplified — In this article, we lay out a new approach to authentication (plus access control & SSO) in React applications.

Userfront sponsor

Maintaining End-To-End Quality With Visual Testing — A detailed look at how visual testing can prove a valuable addition to your testing coverage.

Colby Fayock

Can Opera Finally Sing On Google's Chromebooks and Windows 11? — A chat with the Opera team about the R5 update (available now), and the browsers plans for Windows 11.

Daryl Baxter

The Accessibility Stalemate — On how well meaning, and often excellent accessibility advice, doesn’t reach the audience it ought to.

Christian Heilmann

It’s A (Front-End Testing) Trap! Six Common Testing Pitfalls And How To Solve Them

Ramona Schwering

Creating a Typography Motion Trail Effect with Three.js
George Nikolov

Typewriter Animation That Handles Anything You Throw at It
Murtuzaali Surti

Two Simple Ways You Can Truncate Text using CSS
Kritika Pattalam Bharathkumar


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.

🧑‍💻 Got a job listing to share? Here's how.

🔧 Code, Tools and Resources

Unicode Arrows — Yes, it’s a neat collection of all the → unicode arrows ← you may ever need, but also jewelry…

Rachel Binx

Toolb: 50+ Free Web Tools for Your Daily Workflow — This has just about everything! A real grab bag that includes converters and code generators for CSS, HTML, and JS, along with some other unique tools for manipulating text and images.

Rachid Daoudi

Free Chat/Messaging UI Kits for Your Website or App

Stream sponsor

Counter Styles Converter — This online tool lets you see what is produced for a given number or sequence of numbers by the algorithms described by the CSS3 Counter Styles spec and the new Ready-Made Counter Styles by the W3C.

Richard Ishida

Nativefier: Make Any Web Page a Desktop Application — A basic Node.js-powered tool for creating a desktop ‘app’ for any Web site using Electron as the webview. For Windows, macOS and Linux.

Goh Jia Hao

LiveKit: A Go Powered Server for Real Time Audio and Video — An open source infrastructure project for building and scaling realtime WebRTC powered audio and video experiences in apps. It’s new but there are already SDKs for iOS, JS, React, and Android. The Go server code.

LiveKit Team

spacers: A JS Library to Control Spacing Around Elements — This is loosely based on the old-school idea of using “spacer” images to help with layouts. The API includes 15+ configurations for various spacer settings. GitHub repo.

Akash Gupta