Accessibility
WCAG vs EAA: Understanding where WCAG stops and where the EAA starts
Many teams believe that meeting WCAG standards means their digital products are compliant with the European Accessibility Act (EAA). Using a clear comparison grounded in EN 301 549 and EN 17161, we extensively detail what’s in and out of scope—and why organizations need to operationalize accessibility like they do privacy and security.
WCAG compliance is necessary—but it’s not enough.
Accessibility pushback - Talking openly about pushback, debunking some common pushback against Accessibility
Pushback or objections when advocating for accessibility is unfortunately very common. Companies are all at different points in their journey, and the Accessibility Maturity Model from W3C outlines these different stages. The less mature a company is in its journey, the more often pushback will be encountered, and the more nonsensical this pushback can be.
CSS
Quick & Easy Theme Transitions
In this video, Kevin Powell demonstrates how to enhance a website's user experience by adding smooth theme transitions, such as switching between light and dark modes or other stylistic themes.
Final code from the video here. A couple of the more over-the-top examples: Wave, Rotating Cube.
Getting Creative With Quotes
How do you design block quotes and pull quotes to reflect a brand’s visual identity and help tell its story? Here’s how I do it by styling the HTML blockquote element using borders, decorative quote marks, custom shapes, and a few unexpected properties.
Better CSS layouts: Time.com Hero Section
In this article series, I plan to choose layouts from popular websites and see how I can rebuild them better in CSS. This time, it’s the top news section in Time.com’s layout.
5 Useful CSS functions using the new @function rule
CSS custom functions are a gamechanger. Here are 5 really useful examples.
A gentle introduction to anchor positioning
Anchor positioning allows you to place an element on the page based on where another element is. It makes it easier to create responsive menus and tooltips with less code using only CSS. Here’s how it works.
Dynamic media/container queries using if()
Similar to the :nth-child() trick, we can use the if() condition and some calculation to implement the logic of media queries.
Easy sci-fi rectangles with corner-shape
By “sci-fi rectangles” I am of course referring to the sci-fi film and television trope where all rectangles (doors, windows, furniture, user-interfaces) have one to three angular corners instead of all corners being the old, boring, un-futuristic 90º rectangle corners. They are the cooler version of rectangles by all accounts.
There were ways to image-mask or clip-path yourself into a sci-fi rectangle with CSS, but those have some downsides and mathematical complexities. It couldn’t be easier with corner-shape, in fact it’s a two-liner.
JavaScript
React Massive Table - React component for a table with lots of data, sortable, groupable, resizable
High-performance, virtualized React table for massive datasets. Ships with column resizing, drag-reorder, multi-sort, and an optional group-by bar. Light/dark themes included via CSS variables and CSS Modules.
Examples here.
Anatomy of a Web Component
Custom elements are the backbone of a “web component” if that’s your preferred term. Web components typically includes the additional baggage of being “composable UI” as found in JavaScript frameworks (whatever that means).
In this post I’ll dissect the basics of a custom element (or web component) as it relates to modern JavaScript syntax and design patterns. I’ve had a lot of success building web things with these ideas. This is not the most polished guide I’ve ever written but I hope you’ll find some gold within.
Using the Custom Highlight API
The Custom Highlight API came to my attention recently as Firefox recently started supporting it (Firefox 140, June 2025), which brought support across all the major browsers. With it, you can apply (some) styling to text that you get your hands on in JavaScript via the Range() class.
UX
Skeleton Screens Are Just Gray Lies We Tell Ourselves
Skeleton screens aren’t clever UX anymore—they’re just visual duct tape over slow, bloated apps. In 2025, users see through the shimmering gray lies, and it's time we stop pretending they work. If your site needs skeletons, maybe what it really needs is a faster brain, not a prettier mask.
Nobody Waits for Your Fancy Animations Anymore (And They Never Really Did)
It’s 2025. Can we finally say it out loud? Nobody—and I mean nobody—cares about your lovingly crafted, buttery-smooth, pixel-perfect animations.
That parallax effect you spent 6 hours tweaking? Skipped. That fancy hero section with the floating blobs and scroll-triggered fades? Ignored. That 2-second entrance animation on your modal? Actively resented.
We are designing for attention spans measured in swipes, not seconds. And yet, somehow, we still build websites like our users have time to watch a motion showcase every time they scroll.
Miscellaneous
Why is Web Performance Undervalued?
Web performance is one of those things so fundamental to businesses that you would expect them to absolutely nail it. If consumers care about performance, which seems to be true, then in an efficient, competitive market you would expect businesses to be under immense pressure to optimize it. And yet, poor web performance is ubiquitous. Huge companies across the board are shipping websites and web apps so sluggish that it is killing the web. The economic upside of getting it right isn't tiny either. Years ago while working at Kroger, Taylor Hunt calculated that each KB of JavaScript sent to the client was costing the company $100,000 per year, as a lower bound. How much is Kroger sending today? Oh, Just 2.4 Megabytes. Out of a chonky 4 MB payload.
IconShelf - Free SVG Icons
Discover thousands of free, high-quality icons from popular collections. Download SVG and PNG icons for your projects.
218 Collections, 283,506 Icons at the time of this writing.