206 articles by Geoff Graham.
Starting in March 2024, Interaction to Next Paint will formally replace First Input Delay as a Core Web Vital metric. Learn how the two metrics differ, why we needed a new way to measure interaction responsiveness, and how you can start optimizing the performance of your site now for a seamless transition to the latest Core Web Vital metric.
We’re living in somewhat of a CSS renaissance with new features, techniques, experiments, and ideas coming at us to an extent we haven’t seen since “CSS3”. It’s easy to feel overwhelmed when your profession seems to be advancing at breakneck speed, but Geoff Graham considers the ways “modern” CSS in 2023 has actually made CSS “easier” to write.
Take a closer look at how various performance tools audit and report on performance metrics, such as core web vitals. Geoff Graham answers a set of common questions that pop up during performance audits.
Having access to a free reporting tool like Lighthouse in DevTools is a great start for diagnosing performance issues by identifying bottlenecks on the main thread. Even better are paid tools like [SpeedCurve](https://www.speedcurve.com/?utm_source=smashingmag&utm_medium=magazine&utm_campaign=sm7_2023&utm_id=sm7_2023&utm_term=sm7_2023) to dig deeper into the data for more targeted insights and to
WCAG 2.2 officially became a “W3C Recommended” web standard on October 5, 2023, and with it, new success criteria and changes to existing guidelines for accessible user experiences. What are the changes, and how can you conform to them? This roundup provides links to WCAG 2.2 explainers that have been published or updated since the release.
Geoff explores the often-overlooked divide between WordPress.org and WordPress.com, shedding light on the blurred lines between open-source ideals and commercial interests.
This article is a peek behind the curtain of how content is managed here at Smashing Magazine. In it, you’ll get a tour of an article’s full lifecycle, from a basic outline to the sort of thing you’re reading right this second.
The CSS Color Module Level 4 specification defined a slew of new color features when it became a candidate recommendation in 2022, including Oklab and Oklch, which have widened the field of color we have to work with. Explore the Oklch color space and how to start using it in CSS today.
What does your performance “stack” look like? There are all kinds of tools available for measuring page speed, but what data and assumptions do they use to measure performance? And speaking of *measuring* performance, there’s quite a difference between that and *monitoring* performance. Let’s dig in!
CSS is evolving faster than ever. With all of the new features that are now available — and forthcoming — since we got Flexbox and Grid years ago, the way we write CSS is evolving, too. In this article, Geoff Graham shares which features have had the most influence on his current approaches to CSS, as well as those that have not (at least yet).
The Wikipedia team shipped a redesign of the ubiquitous and one of the [most visited websites](https://en.wikipedia.org/wiki/List_of_most_visited_websites) on the web. Alex Hollender and Jon Robson led the work and generously discussed the effort with us in a thorough, wide-ranging interview that covers the design, development, and processes that went into the project.
[Codux](https://codux.hopp.to/smashing) is a new visual IDE brought to you by the fine folks over at[ Wix](https://www.wix.com/). It’s got a lot of low-code features that level the playing field for app development but is really designed for React developers. How so, you ask? That’s what we’re going to explore in this article.
Pricing a product or service is one of the more challenging aspects of product development. Pricing is an inexact science, and chances are you will not get it right the first time. But where do you even begin? Let’s explore the important considerations that go into product pricing.
Tucked down somewhere in the Safari Technology Preview 161 release notes is a seemingly innocous line about support for a new HTML element and attribute:
A little thing happened on the way to publishing the CSS :has() selector to the ol' Almanac. I had originally described :has() as a "forgiving" selector, the
Sara Soueidan with everything you need, from what screen reading options are out there all the way to setting up virtual machines for them, installing them,
Nothing but ear-to-ear smiles as I was watching this video from @quayjn on YouTube. (No actual name in the byline, though I think it's Brian Katz if my paper
I wrote up some early thoughts on container style queries a little while back. It's still early days. They're already defined in the CSS Containment Module
Sacha Greif openly wondered whether CSS has gotten to be, you know, too big. With all the goodies that've shipped in browsers the past couple of years —
Every once in a while, the blogging zeitgiest seems to coalesce around a certain topic and it's like the saved articles in my bookmarks folder are having a
I love it when there's a sense of synergy in the blogosphere. First, I caught Nick Heer's coverage of Meta ending support for Instant Articles, its
An Event Apart 2022 Denver wrapped up yesterday. And while I was unable to make it to all three days this time, I did catch yesterday's action — and it was
The State of CSS survey recently opened up. Last year, the survey confirmed everyone's assumptions that TailwindCSS is super popular and CSS variables are
A lot of chatter around the ol' <details> and <summary> elements lately! I saw Lea Verou recently tweet an observation about the element's display
Whew boy, Safari 16 is officially out in the wild and it packs in a bunch of features, some new and exciting (Subgrid! Container Queries! Font Palettes!) and
Ahmad Shadeed got an early jump on container queries and has a growing collection of examples based on everyday patterns.
We can make variables in CSS pretty easily:
That ain't rhetorical: I'm really interested in finding great use cases for CSS multi-column layouts.
Apple unveiled an expanded version of its San Francisco system font at WWDC 2022. Then, last month, Jim Nielsen zeroed in on the font's variations, explaining
Dave Rupert with some modern CSS magic that tackles one of those classic conundrums: what happens when the CSS for component is unable to handle the content
Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with
It's no secret that MDN rolled out a new design back in March. It's gorgeous! And there are some sweet CSS-y gems in it that are fun to look at. One of those
It’s not everyday that HTML headings are the topic de jour, but my folder of saved links is accumulating articles about the recently merged removal of the
Michelle Barker with my favorite sorta blog post: short, practical, and leaves you with a valuable nugget for your time. Here, she gets into logical property
Say you have a line in SVG:
Our dear friend Robin has a new essay called In Praise of Shadows. Now, before you hop over there looking for nuggets on CSS box shadows, text shadows, and
Melanie Sumner has this super-specific collection of web-related nouns for describing a group or set of something. You know how there's a school or fish or a
Head's up! The survey closed on July 12, 2022. We got tons of responses — thanks to everyone for helping us out!
Well, sheesh. I opened a little can of worms when sharing Miriam's "Am I on the IndieWeb yet?" with a short post bemoaning my own trouble getting on the
Can't smash the Like button hard enough for what Miriam Suzanne has to say on the challenging technical hurdles of implementing Webmentions:
Nolan Lawson sparked some discussion when he described a noticeable shift away from single-page applications (SPAs):
I teach a class over at the local college here in Long Beach and a majority of the content is hosted on the Canvas LMS so students can access it online. And,
Ahmad Shadeed — doing what he always does so well — provides an early look at the object-view-box property, something he describes as a native way to crop an
Zeldman:
Last year, we kicked out a roundup of published surveys, research, and other findings from around the web. There were some nice nuggets in there, like a
Apple Music has this "Spatial Audio" feature where the direction of the music in your headphones is based on the location of the device. It's tough to explain
Mary Dyson produces nitty gritty research on the long-accepted notion that shorter line lengths are more legible than longer ones. The study finds that
Kendo UI makes it possible to go from a basic idea to a full-fledged app, thanks to a massive component library. We're talking well over 100 components that
It's not uncommon for my front-end workflow to go something like this:
The folks over at Netlify have opened up the Jamstack Community Survey for 2021. More than 3,000 front-enders like yourself took last year's survey, which
I don't know about y'all, but my feeds have been flooded with articles about CSS Container Queries these past few weeks. The buzz about container queries
Critical CSS is one of those things I see in my performance reports but always seem to ignore. I know what it means. It means to put only the CSS required to
How many times have you heard that (or even uttered it under your own breath)? I know I've heard it in conversations. I also know I've wondered the same thing
Here's a dilemma: what happens if your WooCommerce site has a problem and the quickest and best way to fix it is to roll back to a previous version? The
Yay, it's here! Safari 14.1 reportedly adds support for the gap property in flexbox layouts. We've had grid-gap support for some time, but true to its name,
Ten years! That's a huge milestone for a project, especially one that had a pretty simple goal in mind from the start: give self-hosted WordPress sites many
The block editor was a game-changer for WordPress. The idea that we can create blocks of content and arrange them in a component-like fashion means we have a
AutomateWoo is this handy extension for WooCommerce that adds triggers actions based on your online store's activity. Someone abandoned their cart? Remind
Of all the reasons we love and use Jetpack for CSS-Tricks—a poster child WordPress site—is that we can sleep easy at night knowing we have real-time backups
Bruce Lawson with the tip of the day, warning against the use of pointer-events: none on forms labels. We know that pointer-events is used to change how