The Basics

If you’re not aware of Geoff Graham, you should be. He’s outrageously good at educating folks. Heck, he’s a fully qualified teacher! He also was a huge part of the glory days of CSS-Tricks. He’s released a new course, simply named The Basics, focusing on HTML and CSS. I like that … | Continue reading


@piccalil.li | 20 hours ago

Opinions for writing good CSS

This is a fantastic article by Andrew Walpole, packed full of useful and pragmatic advice. I like this part the most: Specifically, sometimes you need to write some CSS that either you aren’t 100% confident about why you need it. This is the perfect place to express that skeptici … | Continue reading


@piccalil.li | 5 days ago

A quick and easy guide to Markdown

This guide is designed to help everyone with Markdown, even if they have never written it before. It is deliberately simple. There’s links to further resources and learning at the end of the article. I’m not going to spend ages explaining what Markdown is or how it works because … | Continue reading


@piccalil.li | 6 days ago

Let’s make a floating button sign up form pattern

Sign up forms, they’re pretty common! What’s also common is for the submit button to float above the input, like this: There’s a problem though. A lot of the time, the input is behind the button, which in itself is too much of a risk for stuff going wrong. Worst, in some cases, t … | Continue reading


@piccalil.li | 14 days ago

How I’m using “AI”

I put “AI” in quotes in my writing because the current iteration of “AI” is hardly intelligent. But, whether I like it or not, it is the colloquial term right now. I don’t think it’s a surprise to anyone that I am certifiably Not A Fan™ of “AI” either. I don’t like art and cultur … | Continue reading


@piccalil.li | 19 days ago

I Need Your Help to Make 11ty Fully Independent and Sustainable in 2024

This feels huge: Practically speaking this means that for the very first time in 11ty’s history, I will be working independently on 11ty full time. This means increased iteration speed, more responsive official support, more features and bug fixes, and faster releases. I’ve got s … | Continue reading


@piccalil.li | 21 days ago

Look Mum, No Breakpoints!

It’s no surprise to anyone that I would be in to this article. Rob does a fantastic job of breaking down the benefits of being the browser’s mentor, not its micromanager with a proper real-world example. This quote is so important: But, in my view at least, aiming for "pixel perf … | Continue reading


@piccalil.li | 26 days ago

Manifesto for a Humane Web

I like it when people grab a domain, craft a great piece of writing and then specifically design around it. This is what Michelle has done for the Manifesto for a Humane Web. It’s come at an important crossroad for the web. We’ve been here before with “web3” and crypto, which rig … | Continue reading


@piccalil.li | 29 days ago

How a handful of independent publishers are doing their thing

I’m completely fascinated by independent publishing. It’s mainly because I’m thinking a lot about the future of this publication, so let me explain what fascinates me about these publications. The first is The Cascade by Robin Rendle. You’ve almost certainly read Robin’s fantasti … | Continue reading


@piccalil.li | 1 month ago

I’m worried about the tabbing behaviour, rather than the syntax and name of CSS masonry

Back in 2022 I made this site: Be the browser’s mentor, not its micromanager. There’s some key principles on there which is a nice little collection of tiles. The trick during the talk — that I made this site for — was that the grid is actually progressively enhanced with masonry … | Continue reading


@piccalil.li | 1 month ago

What the heck is an SVG sprite sheet?

I love an article that presumes no prior knowledge and quickly gets everyone up to the same level with clear, concise content. I also love an article that is useful for me at a very specific time and guess what? Ryan’s article on SVG sprites is absolutely both. I’ve been around t … | Continue reading


@piccalil.li | 1 month ago

Full text RSS is back

This is just a quick one and something I never wanted to have to announce, but here we are: our RSS feed is back to being a full text RSS feed. This has (rightly) annoyed some folks because historically, Piccalilli always provided a full text RSS feed. Unfortunately though, since … | Continue reading


@piccalil.li | 1 month ago

Applying P3 colours on an existing project

The set.studio site is powered by design tokens, which for colours, are hex codes. I managed to automatically convert those to P3 colours with a custom PostCSS plugin. | Continue reading


@piccalil.li | 1 month ago

What is Motion Sensitivity? How to Design Accessible Web Animations

Elizabeth Meshioye runs down how animations can affect people negatively and how you can prevent that while still producing lovely, interactive work. | Continue reading


@piccalil.li | 1 month ago

Upcoming custom element support in React

React’s version 19 Beta is boasting full custom element support so I cover how that could impact projects on our radar and how this new support will make an impact. | Continue reading


@piccalil.li | 1 month ago

CSS inheritance

Inheritance truly is a superpower and it’s what makes developing on the web a joy if you embrace it. In this quick post, I’m going to convert you into a super fan. | Continue reading


@piccalil.li | 1 month ago

CSS inheritance

Inheritance truly is a superpower and it’s what makes developing on the web a joy if you embrace it. In this quick post, I’m going to convert you into a super fan. | Continue reading


@piccalil.li | 1 month ago

Finally Understanding How Array.sort(comparator) Works

James Kerr explains how the Array.sort() function actually works! | Continue reading


@piccalil.li | 1 month ago

Finally Understanding How Array.sort(comparator) Works

James Kerr explains how the Array.sort() function actually works! | Continue reading


@piccalil.li | 1 month ago

An evolution, not a revolution

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


@piccalil.li | 1 month ago

An evolution, not a revolution

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


@piccalil.li | 1 month ago

Testing HTML With Modern CSS

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


@piccalil.li | 1 month ago

Testing HTML With Modern CSS

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


@piccalil.li | 1 month ago

A primer on the cascade and specificity

Often feared by developers, the cascade and specificity is actually really simple if you utilise the right mental model when authoring CSS. | Continue reading


@piccalil.li | 2 months ago

A primer on the cascade and specificity

Often feared by developers, the cascade and specificity is actually really simple if you utilise the right mental model when authoring CSS. | Continue reading


@piccalil.li | 2 months ago

How would you build Wordle with just HTML & CSS?

Scott Jehl has written a super detailed run-down of how they tried to recreate Wordle with HTML and CSS. | Continue reading


@piccalil.li | 2 months ago

I want to elevate more people with Piccalilli Links

A big part of the Piccalilli Links thing is I want to elevate good writers. I need help discovering those writers though! | Continue reading


@piccalil.li | 2 months ago

An Interactive Guide to CSS Container Queries

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


@piccalil.li | 2 months ago

CSS Button Styles You Might Not Know

David Bushell shares some unbelievably good tips on styling buttons and explains exactly how they work too. | Continue reading


@piccalil.li | 2 months ago

How we’re approaching theming with modern CSS

We’ve started a new project which requires heavy, creative theming, so I made a prototype to test some ideas out. | Continue reading


@piccalil.li | 2 months ago

404 Media Now Has a Full Text RSS Feed

404 Media has invested really well in RSS and broken all the decisions and process down in a nice article. | Continue reading


@piccalil.li | 2 months ago

A Guide To Designing For Older Adults

The one and only Vitaly Friedman takes a deep-dive into a lesser thought about focus of user-centric design. | Continue reading


@piccalil.li | 2 months ago

Arguments for opening links in a new tab or window

Jason Grigsby asks for data to support an apparent preference for people defaulting to links opening in new tabs. | Continue reading


@piccalil.li | 2 months ago

The box model and box sizing

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


@piccalil.li | 3 months ago

Can you feel the rhythm‽

Adam Argyle shows some really cool baseline grid stuff that modern CSS empowers us to do. | Continue reading


@piccalil.li | 3 months ago

ECSS - an interesting CSS methodology

Continue reading


@piccalil.li | 3 months ago

Front-End solution: progress indicator

Continue reading


@piccalil.li | 3 months ago

How I Solved My Font Rendering Problem

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


@piccalil.li | 3 months ago

How I Solved My Font Rendering Problem

Michelle Barker yet again, shares a life-saver of a CSS tip! | Continue reading


@piccalil.li | 3 months ago

Some little ways I’m using CSS :has() in the real world

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


@piccalil.li | 3 months ago

The Fifty-Fifty Split and Overflow

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


@piccalil.li | 3 months ago

The Fifty-Fifty Split and Overflow

Ryan Mulligan demonstrates not just some elegant layout work but also, a very tidy method of dealing with overflow content. | Continue reading


@piccalil.li | 3 months ago

The path to becoming a publisher

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


@piccalil.li | 3 months ago

CSS :has() Interactive Guide

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


@piccalil.li | 3 months ago

Speedier tunes

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


@piccalil.li | 3 months ago

Tailwind vs. Semantic CSS

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


@piccalil.li | 3 months ago

Front-End challenge: progress indicator

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


@piccalil.li | 3 months ago

Event currentTarget to the rescue

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


@piccalil.li | 3 months ago