James Kerr explains how the Array.sort() function actually works! | Continue reading
We’ve refreshed the look and feel of both the Piccalilli site and the brand so wrote up a little about that and the future of the platform. | Continue reading
Heydon Pickering unleashes the power that CSS gives us with selectors and custom properties to create handy tests to make sure your markup is up to scratch. | Continue reading
Often feared by developers, the cascade and specificity is actually really simple if you utilise the right mental model when authoring CSS. | Continue reading
Scott Jehl has written a super detailed run-down of how they tried to recreate Wordle with HTML and CSS. | Continue reading
A big part of the Piccalilli Links thing is I want to elevate good writers. I need help discovering those writers though! | Continue reading
Bored of the same old card demos for Container Queries and struggling to see where you’d use them in real projects? I was too until Ahmad Shadeed published yet another great guide. | Continue reading
David Bushell shares some unbelievably good tips on styling buttons and explains exactly how they work too. | Continue reading
We’ve started a new project which requires heavy, creative theming, so I made a prototype to test some ideas out. | Continue reading
404 Media has invested really well in RSS and broken all the decisions and process down in a nice article. | Continue reading
The one and only Vitaly Friedman takes a deep-dive into a lesser thought about focus of user-centric design. | Continue reading
Jason Grigsby asks for data to support an apparent preference for people defaulting to links opening in new tabs. | Continue reading
To open up this CSS Fundamentals series, we’re looking at one of those most important aspects of CSS to understand: how the box model is affected by box sizing. | Continue reading
Adam Argyle shows some really cool baseline grid stuff that modern CSS empowers us to do. | Continue reading
This is one of those posts that will be a life-saver for so many people, for years because it’s one of those things I’ve spotted on websites a lot while browsing on my iPad. Safari on iOS consistently messes things up in terms of type which is weird because type renders beautiful … | Continue reading
Michelle Barker yet again, shares a life-saver of a CSS tip! | Continue reading
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