One thing we can't ignore this year is there's been a reduction in respondents vs 2024. The 2024 survey was completed by 9,704 people and this year's only got 5,506. That's quite a reduction! There's no shade there though. I think this year has been a particularly hard year for p … | Continue reading
Recently, I found myself working with generated types for API requests and responses based off an OpenAPI schema. Using TypeScript’s conditional types, my fetch logic could automatically infer appropriate parameters and response types based on the path I was calling and the HTTP … | Continue reading
The big pull requests keep on landing here at Piccalilli. This time, it's our article view that has had a thorough re-work. The old article view was nice, sure, but it let us down in the following ways: All the author info was at the top at larger viewports Advertising was easy t … | Continue reading
It's been a very busy couple of months here at Piccalilli with two major updates being worked on. We've finally launched the first of those updates today: fully branded marketing pages for our upcoming courses — Mindful Design and JavaScript for Everyone. We've also refreshed of … | Continue reading
We've got this pattern on the Set Studio website. It's three summaries with headings that render in a three column grid which as the viewport reduces in space, automatically stack. The three column grid part is pretty straightforward, we're first using this little layout composit … | Continue reading
I'll start by saying I am very much an AI-sceptic — at points, seething at the whole landscape. What I do appreciate though is that the genie is already out of the bottle and it's too big to fit back in. AI is going nowhere, although the current tech hype cycle increasingly looks … | Continue reading
Every Layout’s Sidebar exemplifies a quantum CSS layout, perhaps better than any other layout we offer. It is neither a two column layout, comprising elements with fixed and fluid widths, nor a single column layout comprising two vertically stacked elements. It’s both, and neithe … | Continue reading
We recently put out a short survey to get a temperature check on some future ideas and the stuff we're already doing. We got a modest response — 180 respondents — and learned quite a lot from those. Thanks so much to everyone who responded! Let's break down some key questions: “I … | Continue reading
It's not often I'm in the market for CSS processing tools. I was very into Sass but stopped using it when CSS became more capable and PostCSS became more useful to me. PostCSS is very useful for me and the wider team. Here's what our postcss.config.mjs file looks like for this we … | Continue reading
I'll be honest, I find the newer CSS colour stuff really hard to understand. That's fine: we shouldn't fret too much about having weaker aspects of our skillset and knowledge. It's better to embrace what you're really good at and keep a reasonable level of the other stuff in your … | Continue reading
We always want to do better here at Piccalilli and we have ideas. It'll be really helpful if you could give us your opinion on those and also our bread and butter: educational content for the real world. Our focus here is always the reader above everything else. We want to make s … | Continue reading
Let me break down some bits that we covered in the video for you. In order to make the footer sit below the element — and any other siblings — we need to make sure its z-index wins. By applying position: relative to the element, we create a new stacking context. We can then app … | Continue reading
A huge part of building for the web is making experiences responsive. Usually, we think of responsive design in terms of making sites adapt to different viewport sizes, but what about being responsive to different mediums too? Buried away within CSS lies potential for transformin … | Continue reading
This is a really interesting article! One of the most controversial things I've ever done in this industry is introduce groupings in class attributes.
This is a really interesting article! One of the most controversial things I've ever done in this industry is introduce groupings in class attributes.
I like that CSS gives us plenty of opportunities to add finer details when we want them. One of those finer details is making the experience of an image not loading a little better. See the Pen Styled alt text - base by Andy Bell (@piccalilli) on CodePen. The alt text is surfaced … | Continue reading
We're trying a rather radical new approach at Piccalilli. We're going to do real world projects — for real clients — in the open, sharing as much of the process as we possibly can. This gives us a context to provide genuine high quality, real world education for free at the point … | Continue reading
Now, I'm not saying that “determining the object bound to this” makes for the lightest possible reading, but there is some small comfort to be found here: now that we understand when that determination is made, we’re well equipped to understand the what—and that fortunately, that … | Continue reading
I know Alex, so I knew this wasn't going to be a slop supporting article. I don't want to spoil the article for you either, but the multiple redacted titles do a fantastic job of demonstrating historical hype cycles in the industry. Now what I'm not saying is AI is nailed-on to b … | Continue reading
I spent the first few years of my career regarding this as yet another aspect of my primarily hunch-driven approach to web development—which is to say, sometimes it felt like this might be what I wanted, but if so, it was for reasons I couldn't possibly begin to understand. I was … | Continue reading
This is exactly the sort of thing I want to be reading right now. We often use Tailwind to generate only custom properties and utility classes. Up until v4 was released, Tailwind was purely JavaScript configured. We could quite easily rig up some design tokens and let it do the r … | Continue reading
Previously on Piccalilli, Sam Rose walked us through some real world uses of TypeScript's utility types. Today, I want to continue that line of thought and show you a few of TypeScript's advanced type manipulation features that I think will provide good bang for your buck. The ob … | Continue reading
I published this article last week and I thought it would be a good idea to surface it for Piccalilli readers because the plans outlined in there affect this platform. I always wanted the studio to do net good and give back as much — if not more — than it takes. The thing is, run … | Continue reading
One of the most consistently neglected parts of today’s user experiences is our handling of errors. We’re so busy designing the happy paths through our products that we often forget to give the same care and attention to the times when things will go wrong. Our digital products a … | Continue reading
I used to use Sass a lot — especially when I was working on extremely complicated CSS codebases as a consultant. Sass definitely is not "dead" either — tech doesn't die, it's 1s and 0s — it's extremely useful still! Sure, CSS is bringing stuff like nesting and mixins over from Sa … | Continue reading
We're equal parts delighted and excited to share that Piccalilli will be working with Mat Marquis and Scott Riley to launch two premium courses this year: JavaScript for Everyone and Mindful Design. As promised last year when we launched Complete CSS, that course was the start of … | Continue reading
I am a purveyor of reset styles, so of course, my ears pricked up when I spotted this. Especially as it's a Manuel Matuzović job! There's lots to like in his version of a reset, such as ultra low specificity :where() selector usage, like this: :where(html) { line-height: 1.5; } … | Continue reading
You’ve written a great post or produced a delightful website and now you want people to share it. In times gone by, you might be tempted to add a section like this: The problem is, these social sharing components are often not even touched by users, create potential privacy issue … | Continue reading
The gap capability in layout is — in my opinion — one of the most powerful capabilities CSS has added…ever. There's a problem with it though: if you want separator lines, you're stuck with hacks. We've done this sort of thing before which is not ideal: body { background: white; … | Continue reading
I think the Webkit team might be cooking here with this proposal. I like this part: item-direction: row | column | row-reverse | column-reverse This working for both flexbox and grid is what I like to see too. I also really like this idea: .container { display: flex; item-pa … | Continue reading
I really enjoyed reading this article by Alex Riviere and found myself nodding along in places. I do disagree with the overall approach though because I come at layout from a different angle. I'm very much in the "layout should be a skeletal, flexible system" camp and have articu … | Continue reading
Carousels are a design pattern that will probably outlive civilisation I'm afraid. As much as the fact that you probably don't need a carousel is true, that overflow pattern is useful where there's not much screen real estate available. We're getting a heap of new stuff here to m … | Continue reading
Hi! I’m Sam, and I write interactive blog posts about computer science. Because that doesn’t quite pay the bills, during the day I’m a senior software engineer for Budibase, an open source, low-code, self-hostable app building platform. We make heavy use of TypeScript, both on th … | Continue reading
You know I'm a fan of default styles and making content look good, so this post by Chris immediately sparked my interest. What I like most about this new color-mix() capability is that it works with currentColor, which is the current computed value of the color. It makes Chris' t … | Continue reading
When we redesigned Piccalilli last year, our ultimate focus was on the web experience — specifically articles and links. The Index of course got some love, but we put a pin in giving it a full re-work until we had the capacity to give it our full focus. Y'know, iteration. We've r … | Continue reading
Something I really struggle with, is the computer science aspect of our work as front-end developers. I'm a designer who learned HTML and CSS out of spite because I was fed up of my pixel perfect Photoshop files not being represented correctly. How that attitude has changed over … | Continue reading
In my first developer job, I worked on the software I had used in a different role at the same company. On my first day, I naively explained the business need for an extra thousand lines of code to the developer working on the project. Learning to maintain and fix a legacy codeba … | Continue reading
I won't give away many spoilers here, just in case you want to play this earnestly, but aria-hidden="true" being focusable while also not being available in the accessibility tree should be a warning in itself to be careful with elements. Using aria-hidden="true" on a creates a … | Continue reading
It’s fairly accepted that keeping navigation visible is best practice for menu design, right? At least when it comes to designing for desktop viewports. Nielsen Norman Group goes as far as saying that off-screen menus are “not appropriate for desktop websites and apps”. Like a lo … | Continue reading
With all the best will in the world, it can be really hard to get accessibility right. It's also hard to find the right answers. Sure there's the WCAG guidelines, but they're also quite difficult to understand. With all that in mind, I'm always endlessly thankful for easy to read … | Continue reading
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