In which Lloydi tries to come up with an approach to toasts (and not-toasts) to satisfy various annoyances and WCAG failures with this notification pattern. This article is primarily aimed at developers who have been tasked with adding this type of notification in a way that won’t upset some users, but also as a reference to accessibility auditors looking to explain to clients what issues these typically present.

The shape() function joins friends like polygon(), circle(), rect(), inset(), and a handful of others. These functions are used as values for a handful of things in CSS, including clip-path.

I’ve been thinking about the kind of CSS I write by default when I start a new project… I’m not talking about a CSS reset, which usually involves zeroing out the initial values provided by the browser. I’m talking about tiny little enhancements just one level up from those user-agent styles.

While abstractions are often convenient for us developers, this convenience must not be delivered to us at the cost of user experience and accessibility. As responsible developers, it is on us to push back when necessary and require new features to be inclusive of the users we are creating user interfaces for.

<dialog> and popover are currently the only two ways to access the browser’s top layer. So what’s the difference between them and which one should you use when?