A tiny tip today, but a good one: use the :empty pseudo-class to hide pesky empty elements (commonly found in user-generated content).
Read more
When you scroll rapidly to the top or bottom of a webpage you might notice a “bounce” effect, where the browser momentarily allows you to scroll beyond the uppermost or lowermost point, before bouncing you to correct position.
Read more
In JS, it’s easy to get caught out when determining if a variable is null, undefined, or has a value of zero. I do a lot of data visualisation, and quite often I’ll need to filter out null values from an array of data.
Read more
I often use the WebAIM colour contrast checker to check my colours against WCAG (Web Content Accessibility Guidelines) standards while building websites. Recently I noticed a handy feature in Firefox dev tools to make checking for sufficient colour contrast really easy.
Read more
Here’s a tiny CSS tip for making staggered animations feel waaaay more natural: Negative animation delay. I’ve seen this idea shared by master CSS animators Jhey and Amit on separate occasions, and it’s such a neat little trick that it’s worth recording here!
Read more
Did you know, if you use CSS math functions like min(), max() and clamp() and you’re calculating any one of the arguments, you don’t need calc()? I think it was Ahmad Shadeed who mentioned this on Twitter the other day, but I could be wrong.
Read more
In Javascript we have a few ways of selecting elements, but we can’t directly target pseudo-elements. Something like this, for instance, won’t work, and will return null:
Read more