Before we all mute the word 'dithering' I thought I'd explain a little bit about why we needed to dither digital images in the first place.

Although it's an aesthetic now, we used to need dithering to trick our eyes into seeing more colors than were actually there. 👇 So in the early days of computing, memory was scarce and we couldn't store a lot of color detail.

To get around this we used limited palettes with lookup tables or really low bit depth colors, to reduce the number of colors in an image, also called quantization.

Excited to finally share what I've been working on.

Introducing Detax, a comprehensive suite of automated tax avoidance and money laundering tools. Our goal is to revolutionise the financial fraud industry by bringing it into the 21st century.

detax.framer.website Historically, avoiding tax has been a manual, labor intensive task which has put it out of the reach of most small businesses.

We're here to change that and open up a world of financial fraud to businesses of any size.

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.

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.

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.

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.)

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.

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.

githubcopilotinvestigation.com

tl;dr:
- Copilot was trained on open-source repos many of which have licenses that require attribution.
- There is no 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.

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

.@brian_lovin Been thinking about this tweet for a while, so I wrote a thread about how React works here:

https://twitter.com/DanHollick/status/1567497994613981185?s=20&t=eNSaTf3Ra_SxPVJCe7IzNw

but as for memoization, lets dig in👇

https://twitter.com/brian_lovin/status/1561917562035654656

Put simply memoization is a performance technique that avoids doing duplicate work.

Imagine a simple function that calculates the square of a number

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.

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
- Quadratic Bezier curve
- Arc curve
- Close Path

Some lovely little details in Arc The screenshot tool is really fucking good.

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.

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.

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.

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.

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.

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

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.