206 articles by Geoff Graham.
I was reading through Juan's recent Almanac entry for the @counter-style at-rule and I'll be darned if he didn't uncover and unpack some extremely interesting
I wrote a post for Smashing Magazine that was published today about this thing that Chrome and Safari have called "Tight Mode" and how it impacts page
We know that browsers do all sorts of different things under the hood. One of those things is the way they not only *fetch* resources like images and scripts from the server but how they [prioritize those resources](https://www.debugbear.com/blog/request-priorities?utm_campaign=sm-7). Chrome and Safari have implemented a “Tight Mode” that constrains which resources are loaded and in what order, bu
I had the pleasure of hosting a recent Smashing Magazine workshop on product design, subbing for Vitaly Friedman who usually runs these things.
Anselm Hannemann on the intersection between frameworks and learning the basics:
Do you subscribe to Piccalilli? You should. If you're reading that name for the first time, that would be none other than Andy Bell running the ship and he's reimagined the site from the ground-up after coming out of hibernation this year. You're likely familiar with Andy's great writing here on CSS-Tricks.
"Waits are a price that developers ask users to pay and loading spinners only buy so much time." —Alex Russell (permalink)
I'm interviewing Alex Russell tomorrow for Smashing Magazine — it's free so come and join the chat as we discuss the expensive JavaScript, browser choice, app
You've played Flexbox Froggy before, right? Or maybe Grid Garden? They're both absolute musts for learning the basics of modern CSS layout using Flexbox and CSS Grid. Thomas Park made those and he's back with another game: Anchoreum.
Another title from A Book Apart has been re-released for free. The latest? Tim Brown's Flexible Typesetting. I may not be the utmost expert on typography and its best practices but I do remember reading this book (it's still on the shelf next to me!) thinking maybe, just maybe, I might be able to hold a conversation about it with Robin when I finished it.
I like how I'm hearing animations distinguished as "time-based animations" (or TBA) and "scroll-driven animations" (or SDA). A third? Maybe "navigation-based
Feeling good with your Lighthouse score of 100%? You should! But you should also know that you’re only looking at part of the performance picture. Learn how Lighthouse scores are measured differently than other tools, the impact that has on measuring performance metrics, and why you need real-user monitoring for a complete picture.
The results from this year's survey are fairly fresh off the presses. We took a little time to sit with them and jot down some things we noticed and found interesting.
The CSS text-wrap property is (rightfully) widely assumed to be used strictly for text elements. But Terrence Eden posted an article on his blog that shows how it can also be used to balance the way other types of elements wrap, including icons.
I totally get the goal here: make CSS more modular and scalable in WordPress. Put all your global WordPress theme styles in a single file, including
Looks like text-wrap: pretty has landed in Safari TP! Been in Chrome since 117. Let's see if Firefox follows suit.
Editor's note: This post is updated from time to time to catch up with notable developments. For timely updates, check out mullenweg.wtf or the less-anti-Matt
Tab Atkins-Bittner left a comment in our recent notes on the CSS Masonry that thoroughly (and helpfully) counters the view that masonry would be more powerful
Wired: "The combined weight of these legal cases threatens to crush the Internet Archive. The internet has entrusted its collective memory to this one
Miriam Suzanne's in the middle of a redesign of her personal website. It began in August 2022. She's made an entire series out of the work that's worth your
I was looking over an older article Patrick Brosset penned for us introducing <selectmenu>, a new proposal at the time for a more style-able cousin
Seeing a lot more headlines decrying JavaScript and pumping up PHP. Always interesting to see which direction the front-end zeitgeist is leaning.
Two possible syntaxes for CSS masonry, one draft specification, and you get to share your opinions.
Only Chris, right? You'll want to view this in a Chromium browser:
I collect a bunch of links in a bookmarks folder. These are things I fully intend to read, and I do — eventually. It's a good thing bookmarks are digital,
Jim hit a snag while working on a form. Placing labels next to inputs is trivial with flexbox, sure, but what happened in Jim's case was a bit of
Quite a fun article I worked on with Philip Braunen. Do you know that little bit of elasticity you get when scrolling beyond the viewport when browsing the
Almost missed that the WP Twenty Twenty-Five theme was approved a couple weeks ago.
Inclusive Design 24 is in 8 short days — and it's FREE, no sign-up required!
Seems like we're always talking about clipping text around here. All it takes is a little browsing to spot a bunch of things we've already explored.
Didya see that Tumblr is getting a WordPress makeover? And it's not a trivial move:
I think it's worth listening to anything Sara Soueidan has to say. That's especially true if she's speaking at an event for the first time in four years,
I created a little library at work to make those “skeleton screens” that I’m not sure anyone likes. We named it skellyCSS because… skeletons and
Eric gifting us with his research on all the various things that anchors (not links) do when they are in :focus.
A gem from Chris Ferdinandi that details how to use custom events to hook into Web Components. More importantly, Chris dutifully explains why custom events
Hey look at that, the State of CSS Survey for 2024 is open and taking submissions.
You ever find yourself in bumper-to-bumper traffic? I did this morning on the way to work (read: whatever cafe I fancy). There's a pattern to it, right? Stop,
I was just going over the latest CSSWG minutes (you can subscribe to them at W3C.org) and came across a few interesting nuggets I wanted to jot down for
“This isn’t a website. Or even a blog. It’s a conversation.”
A new explainer for a new HTML attribute to handle handwritten inputs. Like this:
Mental health is always tough to talk about, especially in an industry that, to me, often rewards ego over vulnerability. I still find it tough even after
Heydon with a reminder that <address> isn't for, you know, mailing addresses.
Christian Heilmann gave this talk at Typo3 Developer Days. I'm linking it up because it strikes an already stricken nerve in me. The increasing complexity of
Most days, I'm writing vanilla CSS. Thanks to CSS variables and nesting, I have fewer reasons to reach for Sass or any other preprocessor. The times I reach
These sorts of roundups always get me. My wife will flip through Zillow photos of the insides of homes for hours because she likes seeing how different people
A few sirens went off a couple of weeks ago when the CSS Working Group (CSSWG) resolved to add an if() conditional to the CSS Values Module Level 5
I know this is something Chris has wanted forever, so it's no surprise he's already got a fantastic write-up just a day after the news broke. In fact, I first
Oh, hey there! It’s been a hot minute, hasn’t it? Thought I’d pop in and say hello while we get to know the Popover API a bit.
CSS Meditation #8: .work + .life { border: 10px solid #000; }
CSS Meditation #7: Nobody is perf-ect.
CSS Meditation #6: The color space is always calc(rgb(0 255 0)+er) on the other side of the fence.
CSS Meditation #4: Select, style, adjust. Select, style, adjust. Select, sty…
CSS Meditation #5: :where(:is(.my-mind))
CSS Meditation #3: A pseudo is as a pseudo does.
CSS Meditation #2: Who gives a flying frick what constitutes a “programming” language.
CSS Meditation #1: If the code works as expected and it fits your mental model, then it’s perfect.
A comprehensive guide covering nine types of lengths that CSS uses to size elements in terms of dimensions, space, time, and even sound.
What does it mean to learn the “basics”, or fundamentals, of front-end web development? Is starting with HTML and CSS still the best entry point to learn how to make websites and apps when we have a seemingly endless supply of frameworks? Geoff Graham thinks so and discusses why you might consider going “back to basics” to start or move forward in your career.
The Performance API is a set of standards for measuring and evaluating performance metrics with JavaScript. This article demonstrates how to use the Performance API to generate performance metrics directly in the DOM to create your own reporting.
What could we learn from entry-level students in front-end web development? As seasoned professionals, you might think you’ve seen it all, but the truth is that the newcomers are asking the most intriguing questions and making connections that those of us who have spent years on the front end may have never considered.