Frontend Focus

#​515 — November 3, 2021 | Read on the web

Microsoft’s Edge Browser Now Stable on Linux — After over a year in preview, the stable version of Edge for Linux is now available. Here's the official blog post from Microsoft covering the news. This release means Edge is now available on Windows, macOS, iOS, Android, and Linux.

Tom Warren

Web Performance Metrics Cheatsheet — A succinct, handy summary of web performance metrics (such as Time to First Byte, Largest Contentful Paint, Time to Interactive, etc). Also available as a PDF.

Ire Aderinokun

New Frontend Masters Course on CSS Grid & Flexbox — Learn essential layout techniques for building responsive, beautiful web apps. Get hands-on practice using CSS Grid for two-dimensional, grid-based layouts and Flexbox for styling one-directional flow.

Frontend Masters sponsor

How I Made Google’s Data Grid Scroll 10x Faster with One Line of CSS — If you're not familiar with the idea of CSS containment (now widely supported by browsers) and how it can improve the efficiency of a layout, this might be an eye opener.

Johan Isaksson

▶  Developer Tools Secrets That Shouldn’t Be Secrets — An Edge-focused look at console power tips, how to use browser developer tools outside the browser, and more.

Christian Heilmann

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

CSS-ing Candy Ghost Buttons — Highlights a technique for creating outlined buttons with CSS. They look simple enough, but there’s a few things worth taking into consideration to get them looking right. Ana outlines the solutions.

Ana Tudor

Respecting Users’ Motion Preferences — The prefers-reduced-motion media query has excellent support in all modern browsers going back a couple of years. In this article, Michelle Barker explains why there’s no reason not to use it today to make your sites more accessible.

Michelle Barker

Using CSS Variables for Reduced Motion on a Global Scale — How to use CSS Variable and the prefers-reduced-motion media feature to remove or minimize animations and transitions on global scale.

Silvestar Bistrović

▶  Have Single-Page Apps 'Ruined' the Web? — An excellent, and clear talk from the creator of frontend framework Svelte talking about the often-valid criticisms lodged towards single-page apps and how ‘transitional apps’ may be a way forward.

Rich Harris

We talk about documents versus apps as though it were a dichotomy, but it's not, it's a spectrum. When we erase the stuff in the middle we do the web a great disservice. It's a medium that by its very nature resists definitional boundaries.

Rich Harris

Put the “Flow” in Your Workflows with Shortcut — Shortcut is fast and intuitive project management built for developers. Delight the scrum gods and try it now.

Shortcut (formerly sponsor

The Golden Ratio and User-Interface Design — Although traditionally used in art and architecture, the golden ratio can be referenced to design aesthetically pleasing interfaces.

Kelley Gordon

The Process of Building a CSS Framework — A behind-the-scenes look at making a CSS framework (specifically CodyFrame) and a tutorial on how to build a website with it.

Claudia Romano

Best Practices for Embedding Third-Party Web Widgets
Ravidu Perera

Render Images Based on the Dark or Light Theme of the Client Device
Amit Merchant


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.

Work From Anywhere in the World: Remote Sr. Front-End Engineer — B2B SaaS company seeks engineers who love building interactive data apps, being a part of a global community, and great hot sauce.
Chili Piper

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

Coding Font: A 'Game' to Find Your New Favorite Code Font — This is a fun idea. It throws over 25 popular developer-oriented fonts into a ‘tournament’ and you then pick your favorites until you’re left with a winner. (It was JetBrains Mono for me.)


Fontfacer — Autogenerate CSS Font Rules from Font Files — Takes your uploaded font files and generates a list of CSS font rules for you to copy and paste into your codebase.

Peter White

Vizzu: A Library for Animated Data Visualizations and Data Stories — Vizzu is a little different to most data visualization libraries in the sense that animating the visualizations and transforming between different visualization types is the key focus.


Automate Domains, DNS, and SSL Certificates with This Special Offer 👀

DNSimple sponsor An API for Placeholder Images — Two nice features for this one: You can choose from various categories (to match the type of website) and download binaries to serve the images yourself for local development.

Pouya Saadeghi

Ninja Keys: A Utility to Add a Keyboard Shortcuts Interface to a Website — Will display a ‘drawer’ with shortcut key options for the app/page, available in plain JS, Vue, React, and Svelte. Try it here.

Sergei Sleptsov

Hasty: A JavaScript Perfomance Tool — A quick, easy-to-use online tool that lets you test variations of a particular snippet to see which one performs best.

Mads Cordes

Core Web Vitals Checker — Check if your site meets the Core Web Vitals assessment in one click.