Avatar

Dan Hollick 🇿🇦

@DanHollick

product designer - tweets about design systems and tools. owner: rectangle-labs.com prev: @tidal, @barclays

Why color contrast is so hard

💡Have you ever wondered why the WCAG colour contrast ratio doesn't always seem to work?💡 Well it actually has to do with how we calculate colour contrast and is super interesting. Hold on to your butts, this is a 🧵

Continue reading

Shaders

Ever heard of a shader but too afraid to ask what it even means at this point? Lets fuck around and find out 👇

Continue reading

Framer Components

If you are used to Figma, there's a quirk of Framer components that might catch you out. In Figma, variants can have completely separate layers. But in Framer, each variant contains all the layers from all other variants hidden inside of it. Let me explain.

Continue reading

Vector Boolean Operations

Did you know these are called Boolean Operations? That's because they use booleans to determine which part of the shapes should be visible. Let me explain 👇

Continue reading

Blending Modes

Do you just click different blending modes until it sort of looks right? Well, that probably won't change after you read this but at least you probably won't use Lighten or Darken again. (you should bookmark this thread and use it as a reference)

Continue reading

Chromatic Aberration

I've always wanted to know why some colours "vibrate" next to each other. I did some digging and it's actually the same reason good camera lenses are so expensive. 👇

Continue reading

Barcode error checking

Why can't you just draw a few black lines on a barcode and spoof the scanner? Well, the last digit in a barcode is actually there to do some clever error checking.

Continue reading

QR codes

Ever wondered how a QR code works? No, me neither but it's low-key fascinating. (Warning, there is some extremely nerdy shit here.👇 )

Continue reading

React and the DOM

Whenever I hit a problem with React its because I don't have a solid understanding of how it really works. Here's a brief explainer:

Continue reading

SVG Viewbox

SVG viewbox is surprisingly unintuitive but if you visualise it like this it starts to make sense:

Continue reading