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 are littered with dead ends, meaningless error codes, decipherable only to developers, and infuriating whimsy that leave our users frustrated and stuck. Even when we do take the time to craft helpful error copy, we rarely document or encode such decisions so they can be easily reused and standardised across our digital landscape.Here’s how to create error messages that help users recover quickly and continue their path through your products and services.Consider the types of errors a user might encounterThe first step in planning and creating good error messages is to identify the different types of errors that could occur within our user experience. For example:form errors from missing or incorrect datavalidatio

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 Sass, but it doesn't mean Sass is useless or "replaced". I personally don't use Sass anymore because I don't need to but if the needs were there, I would use it in a heartbeat.Stuart's guide here on when and where to use custom properties and/or Sass variables is great because — as the title suggests — it's pragmatic. Stuart knows his stuff too. He's an expert CSS and design systems consultant and has worked on huge systems, so you know this knowledge comes from deep experience.Check it out!

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 our aim of bringing extremely high quality, affordable education to the front-end development and design communities.Let's take a look at each course.JavaScript for EveryoneJavaScript is hard and it's a major part of our jobs as front-end developers, whether we like it or not. The problem is, understanding the language is a lot of work with conflicting advice across the community.Mat Marquis has stepped up and taken on the impossible: teaching people how JavaScript really works. He's got a track record in producing extremely high quality education as the author of JavaScript for Web Designers and Image Performance from A Book Apart. He also wrote the Learn JavaScript and Learn Images courses for Google’s web.de

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;}I've been thinking about implementing this on my own as another iteration because using :where() gives you 0 specificity which is very useful.One of the gripes of my reset is selectors like this:a:not([class]) { text-decoration-skip-ink: auto; color: currentColor;}It's a really handy rule, but it results in more specific selectors in the actual authored CSS. It'll be better as::where(a:not([class])) { text-decoration-skip-ink: auto; color: currentColor;}Anyway, enough about what's wrong with mine, let's look more at what's good about Manuel's. The previews for each rule are really good. They're such a novel and smart way of demonstrating what impact each rule in the reset is having. You can also compare other resets

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 issues, affecting GDPR compliance and of course, third party sharing plugins can negatively affect performance.Not ideal!A better approachWe’ve got two really useful web platform tools available to us that have fantastic browser support: the Web Share API and the Clipboard API.The Web Share API allows us to present users with choices that matters to them, because it triggers the share mechanism of their device. For example, I can easily share links to the group chat, Bluesky or even Airdrop on my phone because the share sheet on my phone is relevant to me, not what a publisher thinks is relevant to me.The other web platform tool — the Clipboard API — allows us to create a nice, simple “Copy Link” button. Copy and pas