product designer - tweets about design systems and tools. Framer course: https://t.co/lFljxmqs6M prev: @tidal, @barclays
1 subscribed
Apr 13 26 tweets 9 min read
How does a Large Language Model like ChatGPT actually work?

Well, they are both amazingly simple and exceedingly complex at the same time.

Hold on to your butts, this is a deep dive ↓ You can think of a model as calculating the probabilities of an output based on some input.

In language models, this means that given a sequences of words they calculate the probabilities for the next word in the sequence.

Like a fancy autocomplete.
Mar 16 13 tweets 4 min read
Why are some typefaces harder to read than others at the same font-size?

Well, it has a lot to do with x-height but of course it's a bit more complicated than that: ↓ You probably know this already but the x-height of a typeface is the difference between the baseline and the height of the lowercase letters.

We can also think of x-height as a ratio of the total cap height or body height.
Feb 1 16 tweets 5 min read
Why is making a dark mode greyscale so hard to get right?

Well, of course it has to do with the weird way humans perceive colour and contrast. 👇 The main issue is we we perceive contrast as higher between lighter colours.

Even though these two sets of colours have the same mathematical contrast we perceive the left as having more contrast than the right.
Dec 15, 2022 19 tweets 8 min read
Ever heard of a shader but too afraid to ask what it even means at this point?

Lets fuck around and find out 👇 First, we need to understand the difference between a CPU and GPU and why we need a separate unit just to draw graphics anyway.

(Don't worry, it's not going to be too technical.)
Nov 2, 2022 12 tweets 4 min read
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 👇 To keep it simple lets use two overlapping circles.

Imagine a boolean for each circle called "inside" - for the area inside each circle the boolean is true, for the area outside it is false.

Any point within the bounding box can be represented in terms of these booleans.
Oct 20, 2022 26 tweets 9 min read
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) Put simply, blending modes are a way of creating a new colour based on two input colours.

Hierarchy matters to the way we work out the new colour so the input colours are split into background and foreground.
Oct 18, 2022 5 tweets 2 min read
githubcopilotinvestigation.com

tl;dr:
- Copilot was trained on open-source repos many of which have licenses that require attribution.
- Github claims it falls under fair use.

Do they have a point or not? Say I prompt Copilot with "a React shopping cart component".

This feels analogous to a human going to read some code, understand the intent and re-implement it and I think we largely feel fine with that idea.

But it gets a bit more interesting than that.
Sep 14, 2022 17 tweets 6 min read
Ever wondered how a QR code works?
No, me neither but it's low-key fascinating.

(Warning, there is some extremely nerdy shit here.👇 ) The Quick Response code was invented by a subsidiary of Toyota to track parts across the manufacturing process.

Barcodes were proving inadequate - they can only be read at certain angles and didn't store much data relative to their size

The QR code solves those issues and more
Sep 7, 2022 7 tweets 3 min read

but as for memoization, lets dig in👇 Put simply memoization is a performance technique that avoids doing duplicate work.

Imagine a simple function that calculates the square of a number
Sep 7, 2022 15 tweets 6 min read
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: To understand how React works we actually need to understand the problem it was designed to solve.

Imagine it's 2013 and you want to make a banner appear when a user clicks a button just using JS.
Jun 29, 2022 10 tweets 4 min read
Niche tweet, but have you ever been messing around with an icon and wondered how SVG path data works?

It's actually quite simple. Path data is made up of 6 types of instructions that tell your computer how to draw the shape:

- MoveTo
- LineTo
- Cubic Bezier curve
- Arc curve
- Close Path
Jun 29, 2022 4 tweets 2 min read
Some lovely little details in Arc The screenshot tool is really fucking good.
Mar 9, 2022 11 tweets 4 min read
How big is 1px?

Short answer: Almost never the size of a device pixel.
Long answer: It depends how far away it is👇 There is actually a very simple answer to this question.

According to the CSS spec:
1px = 1/96th of an inch (0.26mm)

Boom. Done.
Feb 9, 2022 14 tweets 5 min read
Color in digital images is almost always completely made up.

This will take a bit of explaining so hear me out. 👇 The first culprit is how image sensors work.

They exploit a property of silicon diodes so that when a photon hits it, an electron moves in response and this creates a voltage.

We can measure this and know how intense the light is on that particular pixel.
Jan 26, 2022 6 tweets 3 min read
Why do people use Spacer components?

Personally, I prefer using Auto Layout wrappers and controlling spacing with gaps but there might be a use case I'm overlooking?

Made some pros and cons below 👇 ✅ - Because Figma doesn't have styles for spacing(yet), its the easiest way to componentize your spacing system.
Dec 9, 2021 12 tweets 5 min read
WCAG 3 will use a new color contrast method called APCA (Advanced Perceptual Contrast Algorithm).

It's a big improvement over the current system but there are a lot of changes to get your head around.

🧵 1. The most obvious change is the new scoring system.

The ratios are replaced by a level out of 100(ish).

The higher the number, the higher the contrast.
Nov 10, 2021 10 tweets 4 min read
I've never really considered how the pen tool works.

Turns out, it relies on Bezier Curves and how they work is super interesting🧵: The key to Bezier Curves is something called linear interpolation.

If we have two points, A and B, connected with a straight line, we can imagine a third point moving along that line.

This point is interpolating (linearly) between the other two.
Oct 27, 2021 11 tweets 4 min read
There's been a lot of hype about the new chips in the MacBook Pro but I'm more interested in the new displays.

Don't let the name confuse you, these miniLED displays are LCDs, not OLEDS.

Here's how they are different: Early LCDs used light sources on the edge of the panel as a backlight.

This was better for heat and affordability but they tend to light the panel unevenly
Oct 13, 2021 14 tweets 6 min read
Have you ever noticed that line-height ruins your design system's spacing?

Here's what's going on🧵: Let's rewind to the 1500s for a second.

To make paragraphs more readable, typesetters needed to create space between type blocks.

They did this by slotting little strips of lead between the rows - hence the name leading.
Jul 21, 2021 16 tweets 5 min read
💡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 🧵 Before we dive deeper, we should remind ourselves how colour actually works.

On screens we build a colour by adding together three different colours, Red, Green and Blue.