Code

Some nice coverage from Andy about CSS things that are truly new. If you haven’t looked at new things in CSS in, say, a year, I’d bet pretty much all of this will be new to you. A lot of it is cutting-edge enough that you might not be able to get it into projects immediately, but that gap is getting..

CSS is yet to have a switch rule or conditional if, aside from the specific nature of @media queries and some deep trickery with CSS custom properties. Let’s have a look at why it would be useful if we did, and look at a trick that is usable today for pulling it off. Recent chatter about the possib..

I like Andy’s idea here: .wrapper { width: clamp(16rem, 90vw, 70rem); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } Normally I’d just set a max-width there, but as Andy says: This becomes a slight issue in mid-sized viewports, such as tablets in portr..

People really latched onto Brad’s framing. And for good reason. Front-end development has gotten so wide scoping that there are specialists inside of it. Two years ago, I cut it down the middle and now Brad is putting a point on that here, saying he has actual clients who have shifted their hiring s..

Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself, reducing some of that padding, making more screen real estate for other content. Normally you would have to use some JavaScript to add a shrink..

Malte Ubl’s list for: 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. Fluid width images in CSS, not forgetting the height and width attributes in HTML so you get proper aspect-ratio on first render.Use ..

I love this piece from Remy Sharp where he argues that the web didn’t get more complicated over the last 20 years, despite what we might think: Web development did not change. Web development grew. There are more options now, not different options. Browsers have become more capable and still work w..

High five to Netlify for the ❥ sponsorship. Netlify is a great place to host your static (or not-so-static!) website because of the great speed, DX, pricing, and feature set. I’ve thought of Netlify a bunch of times just in the past week or so, because either they release something cool, or someone ..

The idea of an “abortable” fetch came to life in 2017 when AbortController was released. That gives us a way to bail on an API request initiated by fetch() — even multiple calls — whenever we want. Here’s a super simple example using AbortController to cancel a fetch() request: const controller = ..

Imagine if your :focus styles animated from element to element as you tab through a site. Like the focus ring up and flew across the page to the next element. The spirit of it is similar to smooth scrolling: it’s easier to understand what is happening when movement accompanies the change¹. Rather th..