Links
An Introduction to the View Transitions API
The new View Transitions API offers an easier way to animate between two DOM states — even between page loads. It’s a progressive enhancement that works today.
A Deep Dive Into SVG Path Commands
This guide is an interactive deep dive into the
dattribute, otherwise known as the path data. It's the post I wish I had when I first learned about SVG paths! Along the way, we'll learn about the different types of path commands and how to use them to draw various icons.
Get your <head> in order
How you order elements in the
<head>can have an effect on the (perceived) performance of the page. This script helps you identify which elements are out of order.
The gotchas of CSS Nesting
The
&in nested CSS isn't just replaced by the ancestor, which is what you might think, but it's ancestor is also wrapped in:is()
Mixing Colors with CSS
How cool is it that we can now take two colors and mix them together in CSS? If you aren’t familiar with what I’m referring to, I’m talking about the new CSS
color-mix()function. It is surprisingly straightforward to use and can provide some great results.
Videos
The Cost Of JavaScript - 2023
As we build sites that are more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that we can’t always easily see. In this talk, Addy explains how and why JavaScript is the most expensive resource your site uses today—especially on mobile and lower-end desktops.
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.