Working Stiff FilmsDefinitely a motion warning here, but this website is really nicely done. The texture, the type and the movement are all spot on.Add an accessibility nutrition labelWhen Geri writes, you read. In this post, she walks us through how to determine what accessibility features your app has and how to test that.One list to rule them allWant to really get CSS? Adam has a huge list of resources to documentation for loads of CSS capabilities for you.Successive prototypes bridge the gap between idea and realityIf you're not prototyping already, trust us, it's game changing, but here's Jim to convince you further.Bugs rockLegendary Jenn Schiffer now makes really nice candles and of course, she made a really nice website to sell them.P.S. told ya.Sponsor messagePiccalilli merch is now available!Want to show everyone you're a proud CSS or HTML programmer? We've got you with our high quality prints, shipped globally.Check it outThanks for reading this issue of The Index. We really

I spend an unhealthy amount of time thinking about this stuff. It's something I can't shake off because from days in CSS consultation where I saw more CSS compiling/concatenation methods than should be legal, frankly.Here at Piccalilli we are using PostCSS, as Stuart describes in this article. It's pretty low tech (as a baseline anyway) and does a good, predictable job for us.Stuart also walks us through a custom script method which I've got to say is rather appealing.Simple is always better in my experience and both methods in this article certainly tick that box.Check it out!

Matthias Ott’s new websiteExtremely highly configurable masterpiece here. Make sure you open the guitar amp-like configurator in the header too. Very nice stuff.“Your” vs “My” in user interfacesSome really sound advice on writing better micro copy for users.While you’re fixing the fun stuff, fix the important stuff tooWe walk through a fictional bug and fix a little visual issue, but we then spend time uncovering other much more important issues and fix them too.How I wish web components workedA really thorough run-down and some nice usage of CSS @scope. This article pairs well with Ginger's recent one too.My requests for Interop 2026Some very typographic-specific stuff here which is definitely needed. The better typography is in CSS, the better the web is for everyone.P.S. this is a good demo.Sponsor messageProduct for Engineers is PostHog’s newsletter dedicated to helping engineers improve their product skills. Trusted by nearly 100k developers, it features curated advice on building

Let's pretend we've been assigned a ticket to fix the "janky" hover state of some product cards. The cards shift up a few pixels with a nice transition but glitch if the pointer is at the bottom of the card.Watch the video.A problem that can show up when you create a nice transform and transition is because most of that time-based effect on :hover is glitchy and jolty for users if their pointer escapes out of the bounds of your element.See it for yourself.See the Pen Card hover area - jolty hover by Andy Bell (@piccalilli) on CodePen.This is the CSS that creates that effect for us..card:hover { transform: translateY(calc(var(--transform-size) * -1)); transition: transform 150ms linear;}We have a --transform-size custom property and by multiplying that by -1 — using calc() — it becomes a negative value, shifting our card element upwards. A linear transition timing function makes that effect nice and smooth.The selector .card:hover targets the specific .card element when it is being acti

There's a number of ways to support Piccalilli, such as taking our courses or supporting our Open Collective, but those options don't work for everyone. Some people like a physical product.From today, you can do exactly that with our merch store, over at Teemill. Each t-shirt, hoodie or sweater is produced on demand using sustainable materials, and printed in a renewable energy powered factory.So, what are you waiting for? Show the world you're a CSS or HTML programmer.Check it out!