There’s a lot of chatter around the new(ish) :has() pseudo-class. It’s something we’ve been crying out for, for years: being able to select parent elements! A useful mental model for :has() is that you are querying the parent’s children’s state and/or presence rather than selecti … | Continue reading
I saw the title of this post and thought “yeh I know how to do this” but boy are my techniques antiquated. I’ve historically used extra elements and dodgy flex-basis hacks for overflow content in stackable layouts. Prior to that, it was — like Ryan mentions — absolute positioning … | Continue reading
Ryan Mulligan demonstrates not just some elegant layout work but also, a very tidy method of dealing with overflow content. | Continue reading
In my 2023 wrap-up post I said the following: I also see a gap in publications. CSS-Tricks is done now, and unfortunately, been abandoned. A List Apart has seemingly experienced the same too. At least Smashing is flourishing, but there’s a hole that’s been left by CSS-Tricks espe … | Continue reading
I’m an Ahmad Shadeed super fan, I’m not going to shy away from that. This is because Ahmad is one of the best in the biz at explaining CSS capabilities. I’ve seen a lot of content about the new(ish) :has() pseudo-class since it arrived and while a lot of the content is good, it’s … | Continue reading
I’ll be honest, I have not given the useful content-visibility CSS property much of a run out in production code for similar reasons that Jeremy outlines: The first gotcha is that if a browser doesn’t paint the element, it doesn’t know how much space the element should take up. S … | Continue reading
This is a really fascinating article to read through. It’s very weighted towards semantic CSS, but the data doesn’t lie: it’s clearly better all around than atomic utility CSS. But, the atomic approach does work for certain contexts and certain teams. As Tero says: Because master … | Continue reading
Ooof it’s been a while since there was a Front-End Challenges Club. Just [checks notes] 3 and a half years… This is a handy little component that visually shows progress on a circular path. On the surface, it looks simple, but there’s lots to consider with state and how assistive … | Continue reading
If you’ve attached an event to an element and queried the event target inside its event handler, you’ve probably found that if there are child elements, they can end up being the event target. I’m talking about this sort of thing: A label document.querySelector('button').add … | Continue reading
I love a short and powerfully useful article. This one is especially useful to me, because I account for the problem Manuel is solving in my CSS reset: ul[role='list'], ol[role='list'] { list-style: none; } The reason I have it in the reset is because I’m making a presumption ab … | Continue reading
I’m really excited about this. Vitaly is one of the best in the biz to spend time with, talking shop. It’s always a really engaging conversation and I know we’ll cover loads of ground together. It’s on April 30th 2024, 5pm CET, and we’ll spend an hour chatting design, scaling CSS … | Continue reading
I love articles like this. Very concise and to the point, breaking down a concept that is pretty difficult into something much easier to understand. I’m not a smart person either, so it takes me ages to get stuff. Articles like this are gold for me. It’s great to see Ryan riffing … | Continue reading
Every now and then, I stumble across a CSS article that blows my goddamn mind and this is one of them. I’ll be honest, I’m only recently starting to see the true benefit of CSS layers recently, but I think this article is gonna radicalise me into getting really into them. My favo … | Continue reading
When it comes to the core of CSS stuff, we do things very much the same each time at the studio. The output varies project-to-project, but the core principles stay the same regardless. Because of that, I recently created a boilerplate which I’ve made open to everyone. I thought i … | Continue reading
Codrops are one of those publications that have been around forever but managed to maintain a superb standard of content. I’ve learned all sorts of cool, weird and wonderful ways to boost visual quality of my design and front-end work thanks to them, over the years. They also run … | Continue reading
If you ever wanted an illustration of benefit of a broad skillset, this post is it. There’s so much benefit in understanding how both CSS and JavaScript work and where each technology thrives. Heydon’s write up illustrates another great example of Custom Properties being bloody u … | Continue reading
I’ve been slightly behind the curve this year in terms of Interop, but I’ve finally caught up and I’m quite optimistic. If you don’t know what Interop is, I’d strongly recommend you give this a read from the 2022 edition. There’s 12 focus areas this year, of which I’m only really … | Continue reading
I don’t find this surprising, but I also don’t think this is a damning indictment of tools like CoPilot. They can be useful to unblock you if you’re stuck, but I sure as hell wouldn’t trust the code it suggested verbatim. This quote is interesting to me: Developers who used GitHu … | Continue reading
Workshop In May, I’ll be running a workshop for my extremely good friends over at SmashingConf. The title of the workshop is “Scalable CSS Masterclass”. The aim of the game in this workshop is not just to teach you how to write better CSS, but also to teach you all the lesser-cov … | Continue reading
I’m the same as Stefan here: I honestly can’t see myself using this property because justified text can be a bit of an accessibility nightmare, but should I ever need to use it, knowing there’s a better way to to control that last line is useful. One to store in the ol’ CSS knowl … | Continue reading
My favourite CSS techniques are the ones that are tiny but have a huge impact. Step up the global box-sizing technique, which Paul Irish published in 2012. Chris Coyier declared February 1st, International box-sizing awareness day, which I also celebrate every year. This is how I … | Continue reading
I don’t really use Sass anymore, but a lot of people do. Rightly so: it’s great! I’ll tell you what else is great: Utopia. I’m somewhat of a super fan, so anything Trys and James add to the project is immediately welcomed by me. I think this particular feature is a great addition … | Continue reading
It feels like React is getting a bit of a kicking recently, which I’m not 100% against, but I can’t stress enough how ingrained React is. It’s what happens when a framework or library is the hot topic for over a decade! I’ve just been reading “Removing React is just weakness leav … | Continue reading
Safari Technology preview has recently added a native switch component with version 185 and 186, which is great! It’s going to be a long while before this is ready to rock on a production website though. Still, this collection of demos is worth enjoying. Here’s a video for those … | Continue reading
I think it’s quite well known that I’m not exactly React’s Biggest Fan™, but y’now, we gotta use it for clients in the studio sometimes. Cassidy’s article definitely rings true for me: I’ve found it particularly difficult to be in tune with React over the last couple of years. I … | Continue reading
One of my favourite features of WordPress is how quick and easy it is to categorise posts, then even better, grab an RSS feed for that category. It’s what powers Set Studio’s newsletter, for example. I’ve been doing some recent updates to this site and although the category syste … | Continue reading
What I love about this site is there’s so little copy, but it’s really well written. The type is also massive, which my tired eyes love. The design details are out of this world, like the animations that are subtle, speedy and tasteful rather than completely dominant. The imagery … | Continue reading
There’s one thing I do not have the patience for: puppeteer and headless Chrome. I very much subscribe to the “just let me pay for something that works” methodology because I ain’t got the skills to be tinkering around with back-end. Step up Urlbox for capturing screenshots of we … | Continue reading
You might have noticed that I’m starting to share links on here. There’s a hole that’s been left by publications like CSS-Tricks and A List Apart going quiet, along with the Great Fragmentation™ of social media, since Elon Musk bought — and crapped all over — Twitter. There’s a m … | Continue reading
This is such a handy run-down of CSS features that have a really high support level that you might not have realised. One that surprised me was how well supported the logical property shorthands like margin-inline are. I, for some reason, thought the explicit ones like margin-inl … | Continue reading
This is so cool by Sophie. Over the years, I've gone from “we need to build bespoke” to “let's stitch some services together for the first iteration > measure > then use that to build bespoke if still required”. Sophie’s new weekly link posts setup is exactly that: some stitched … | Continue reading
This latest offering from Ahmad is highly interactive and highly informative. It’s also making me think that although gap is useful for layout, it might be worth re-visiting negative margins and padding-based layouts for clusters of interactive elements, like navigation 🤔 … | Continue reading
First up, you may have noticed that Reality Check now has a new home. I've moved it from Set Studio's blog to here because I think it makes more sense here, based on the technical nature of the content. This is also my first post since deciding to bring back Piccalilli. I wanted … | Continue reading
I’m going to be writing a lot of content in 2024 and I’ve been working out where that should live. I’ve decided that Piccalilli is the best place for it. I know I haven’t posted on here in a long time, but I’ve been caught up, founding a design studio: Set Studio. I’ve got a fant … | Continue reading
I know I also have a terrible record with open source maintenance, so I thought I’d archive the original and just post this instead. Do with it what you want! To be super clear, this is a reset that works for me, personally and us at Set Studio. Whenever I refer to “we”, that’s w … | Continue reading
I’ve been doing the finishing touches on some client work recently and a part of that is making sure we get 100s across the board in lighthouse. That’s so important to me that I make it a deliverable for Set Studio projects. With that testing, I uncovered a doozy. We were getting … | Continue reading
A client project requirement meant I made a CUBE CSS with Tailwind prototype that actually turned out really well. | Continue reading
I’m setting up a new agency and that means piccalil.li and the Discord are closing down, but all the content is moving to set.studio. | Continue reading
I talk about how I was made redundant 3 years ago and how that’s resulted in lots of freelance success. | Continue reading
Now that we created the Learn CSS course that is free to everyone, the Learn CSS From Scratch course is redundant. The membership perks are changing too. | Continue reading
It may seem like it, but Twitter isn’t the center of everything for tech. Here’s some places you can hang out away from Twitter that are very good. | Continue reading
Custom properties in CSS are exceptionally useful, not just for tokenising your CSS, but also for abstracting complexity and interactivity into smaller, easier to manage pieces. This short guide will get you up to speed with how they work and how to use them. | Continue reading
You can set a different delay for each transitioned property, using the transition shorthand, which creates some pretty cool state changes. | Continue reading
After years of asking and memes, we’re finally getting container queries and they will transform UI design, just like media queries did. | Continue reading
A handy way to use modern CSS functions to give yourself fine-grained, yet flexible, design control. | Continue reading
I explain what a minimum viable experience is and how I think it’s a crucial part of progressive enhancement’s role in building resilient websites and apps for the web. | Continue reading
A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism. | Continue reading