I stumbled upon this article and firstly, I learned yet another an important lesson about making presumptions about screen reader users: It wasn't my first time seeing someone blind use assistive technology for web navigation, but this experience stood out. Instead of relying on … | Continue reading
If you ever have an HTML element for numbers — — you might notice that it defaults to accepting integers as values, and increments and decrements by one. There's ways to make it accept, increment by, and decrement by decimal values too. The step attribute When you add the step … | Continue reading
Recently I had the experience of migrating a Vue web app to a new state management library, Pinia, which was interesting from both a technical and non-technical point of view. In this article I’ll share my thoughts and findings on when, why and how you might consider carrying out … | Continue reading
I’ve been doing this CSS thing for over 15 years and I’ve seen a lot of change in that time. A lot of the time, I see a new CSS feature and immediately get excited about how helpful it’s going to be for me and the team in the long term. A good example of that is text-box-trim. Th … | Continue reading
Did you know we send out a newsletter twice a week? I know, I know, there’s a lot of newsletters out there, but let me tell you what The Index does: It goes out on a Wednesday and Friday The focus is around 5 links per issue and that’s it We try to get a nice blend of front-end, … | Continue reading
This is really cool. It’s also a really important demonstration of your website is your home so you can do whatever the heck you want with it, and you should. Dave has opted to roll out a subtle daily colour change based on a hue rotation and what day of the year we’re on. Sure, … | Continue reading
Before we get started, I can’t stress the following enough: the choices we make at Set Studio don’t challenge your choices. You might also not agree with our choices and that’s fine, but we don’t need alternatives evangelising to us. To paraphrase Rachel Andrew: If it works, it’s … | Continue reading
It’s very rare I write for other publications than this one, but I wanted to give CSS-Tricks (especially Geoff) a nod because they’re working their way back to what they did best. This article sort of fits Piccalilli, but I think it fits CSS-Tricks better. I certainly wanted it t … | Continue reading
I started 2024 with a super in-depth Reality Check article (more of those coming this year) so I thought I’d start simple this year because I’m still a bit tired from, y’know, writing a whole CSS course 😅 What is masonry? I’m not going to presume that everyone knows what … | Continue reading
I’ve been excited by the potential of text-box-trim and text-edge for a while. They’re in draft status at the moment, but when more browser support is available, this capability will open up some exciting possibilities for improving typesetting in the browser, as well as giving u … | Continue reading
The obvious lack of diversity (and respondents versus last year 😬) applies of course, but there’s some interesting stuff in here still. The “other front-end frameworks” section specifically. Astro, Ember, Remix and jQuery have all grown in usage vs last year, but Next.js … | Continue reading
I like this a lot. Thomas has not only given plenty of detail on how to make outline look nice, but they’ve provided useful breakdowns of problems that could be happening for you and how to fix those problems. Keyboard focus styles are so important to get right, not just for acce … | Continue reading
I’ve been keeping half an eye on popovers and anchor positioning. I see the latter as a requirement for the former though, so I’ve been waiting not just for browser support, but also, for a deeper dive into how to apply these in the real world. Ryan’s here with exactly what I was … | Continue reading
It’s that time of year again and our inboxes are riddled with emails. To (hopefully) help with that, we’ve collated some deals from independent authors and publishers who are offering some great discounts for you to enhance your skillset. Josh Comeau Josh is doing a bundle of the … | Continue reading
We recently launched Complete CSS, and a lot of people have mentioned that they don’t know how to approach their boss to ask them to pay for it. Here’s an email template for you to help with that. Dear {{Boss}}, I have come across a CSS course that I believe will elevate our team … | Continue reading
After 15+ years of teaching, architecting & delivering CSS for global corporations & startups, I’ve collated that experience into an extensive course. I’m bringing all of my experience of helping teams — both as a consultant and a design agency founder — not just to write better … | Continue reading
Big fan of and checking in but what I don’t like is having to add extra elements to present a nice look and feel for them. Dealing with the disclosed content also requires extra elements if you want to apply a layout, for example. It looks like that is changing though! I’m espe … | Continue reading
FYI We have news! We're in the home straight, finishing up Complete CSS and with that, we have a launch date: November 26 at 12pm GMT. Sign up to get updates and we'll email you as soon as it is live. We've been working on Complete CSS since February 2024. The aim of the game for … | Continue reading
Josh is here again with another stunner of an article and they’ve done a fantastic job of demonstrating how useful container queries can be in the real world. This is a really important part: I don’t think most designers are even aware that they have this exciting new capability. … | Continue reading
This post is a great run down of how much thought and consideration goes into making form validation actually useful. This part really stood out to me: However, if not well-designed, in-line error messages can become overwhelming. For example, flagging a field as incorrect after … | Continue reading
A big thing you need to contend with when working on design systems is anticipating all the different ways someone may use a component. The idea here is that you then preemptively provide sensible behavior and safeguards to keep things working well. An example of this is a “Simpl … | Continue reading
You’d think design systems are a utopia of planning, modular code and governance but I’m sorry to tell you that one of the many things that will take up a lot of your time in a more mature system is Snowflakes: A ’snowflake’ in a Design System is a one-off component that could be … | Continue reading
The first sentence of this great article is the most important: I don’t mind HTML email, but it really can be overdone. There is a tendency to do too much. We try to keep emails that come from here super simple but we still get a couple of issues with Buttondown. We’re actually l … | Continue reading
Let’s start with a brief, mostly subjective history of web tech. A long long time ago, web development was pretty much a single discipline where any developer would work throughout their stack. Most would be armed with a backend language or framework, HTML and CSS, with a sprinkl … | Continue reading
FYI A break from our usual type of article here but it is very important we do because WordPress powers nearly half of the web. You may or may not be aware of the situation unfolding with Automattic and their CEO Matt Mullenweg against WP Engine. I recommend reading the following … | Continue reading
I love to see resources arrive that are specifically for beginners. This new resource by Blake Watson is exactly that and it’s all about the most important language of the web: HTML. I’ve had a read through and it was a great bit of skill refreshing for me, so even if you conside … | Continue reading
When the gov.uk team offer a rundown like this, you have to read it because that team are some of the best in the business of great user experience. We’re so lucky in the UK because anything government related is so easy to use. They are, of course very into progressive enhanceme … | Continue reading
We’ve all been there—rushing to meet a deadline, we throw together a dropdown menu or modal without fully considering its accessibility. But what if making a few small changes could drastically improve the experience for a broader range of users? Accessibility doesn’t have to be … | Continue reading
Being the co-author of Every Layout and a super fan of wildcard selectors, as you can imagine, my mentions and DMs have been riddled with “wildcards are incredibly inefficient” for years. I of course brush that off because as Trys says in their article, browsers are very efficien … | Continue reading
:has(), grid, and quantity queriesEric Bailey teaches us how to make a hyper-resilient component that responds not only to the container, but other languages too. | Continue reading
I’ve always been a Richard Rutter fanboy, so seeing my CSS reset cited in their new reset fills me with pride. When it comes to web typography, Richard knows more than most and shares this vast knowledge really well with TODS. There’s a near 100% guarantee (unless you’re actually … | Continue reading
If you’ve spent plenty of time wading through modern JavaScript, odds are you’ve seen enough ellipses (...) to put even the most brooding 90s role-playing game protagonist to shame. I wouldn’t fault you for finding them a little confusing. Granted, I wouldn’t fault you for findin … | Continue reading
My stance on masonry arriving in CSS is pretty clear: get the focus situation sorted and then I might be more interested. I personally think masonry is quite an antiquated design pattern, but it still finds itself on the web a lot so not needing JavaScript for layout is only a go … | Continue reading
What I really like about this article is how Josh explains how :has() works. They’re especially good at that sort of thing. There’s lots of good real-world examples in there too which compliments the vibe I was trying to achieve earlier in the year. We need more real world exampl … | Continue reading
A button is arguably the most likely component to find itself in your codebase so I’m going to show you how I approach building one. The hope is it demystifies the humble button and encourages folks who reach for a and a JavaScript handler to use semantic elements. What we’re bu … | Continue reading
I’m highlighting this new redesign of Ahmad Shadeed’s website because it ticks so many boxes for me as excellent work. First up, it’s clean, considered and uses typography and space really well. Ahmad’s site is a combination of a personal site and a professional site and they’ve … | Continue reading
Look, Twitter is trash now, let’s be honest. It used to be a gold mine for discovering stuff as a developer, but since the Musk takeover, finding anything of value is hard. We’re all fragmented now too, spread around Bluesky, Mastodon, Threads and LinkedIn, so finding stuff is st … | Continue reading
I’ve mentioned it before but practical, easy-to-understand articles are what make things stick in my brain. That’s exactly what Ryan Mulligan has cooked up for us. I’ve only slightly touched @property — mainly for container filling text — because I don’t really do high interactiv … | Continue reading
Our first course is going live this year and it’s all about CSS! Well not all, but we’ll let the Complete CSS page explain just what that is about: …you can spend all the time in the world focussing purely on your CSS knowledge, but top level front-end development is much more th … | Continue reading
I will be completely honest, I don’t know performance dev tools as well as I probably should. I always find articles and talks on performance fascinating but when I come to learn stuff myself, my eyes often glaze over. Articles like this are really helpful though because it’s a r … | Continue reading
I’ll always share a simple solution because simple is almost always the best option. Theme preferences and toggles are one of those things that can be super over-engineered, so it’s great Christopher has come through with a simple solution for the former. It’s something that’s st … | Continue reading
We recently redesigned this site and a part of that was a sidebar-based article view. That aspect was fine because the Every Layout Sidebar is designed to deliver that layout with no fuss. I threw a spanner into the works though because we have a component named and I wanted it … | Continue reading
I love to see this sort of thing. In fact, nothing makes me happier on the web than seeing something simplified and improved because of that simplification. This article demonstrates that beautifully and teaches you how to write some pretty dang solid CSS that is battle tested in … | Continue reading
I can’t believe Piccalilli links have been here since January and I still haven’t plugged the book I co-wrote with Heydon. We first published the book 5 years ago and it’s now in its 3rd addition. I’m biased, sure, but we still religiously use these layouts to build stunning webs … | Continue reading
In the 2023 edition of State of CSS, the demographics were as follows: Over 50% of respondents were between 25 and 44 Over 30% of respondents earned $50k or more Over 60% of respondents identified as male Sure, the demographics are seemingly improving year-on-year but to get a tr … | Continue reading
FYI This is the third and final part of our series on redesigning Piccalilli. To get the most out of this article, we recommend you start from the top. At this point, we’ve completed the design work and have also produced a backlog of production tasks, so I’m sorry to say, the bu … | Continue reading
I won’t provide any spoilers because Chris’ writeup is really good with a nice real world example. The only commentary I will add is using container queries for everything — including fluid typography and space — might feel like a good idea on paper, but you lose global flow and … | Continue reading
I, like Jim, am also a keen(ish) golfer. Let me tell you about Golf: it’s one of the most over-engineered sports — quite possibly the most — out there. If you, like Jim says, watch the plethora of videos on social media you will almost certainly make golf not just more expensive, … | Continue reading