Caleb Meredith
@calebmer.com
solo founder. building a microsoft office you actually want to use (https://alpine.inc). previously infra at meta, early airtable, oss
slack violates a fundamental principle of design: fitt's law
the amount of time it takes your eye to move from one bit of the screen to another is based on how far apart they are
the time i wasted reorienting after opening a thread, sheesh
glad i’m not using slack anymore
the amount of time it takes your eye to move from one bit of the screen to another is based on how far apart they are
the time i wasted reorienting after opening a thread, sheesh
glad i’m not using slack anymore
August 22, 2025 at 3:36 PM
slack violates a fundamental principle of design: fitt's law
the amount of time it takes your eye to move from one bit of the screen to another is based on how far apart they are
the time i wasted reorienting after opening a thread, sheesh
glad i’m not using slack anymore
the amount of time it takes your eye to move from one bit of the screen to another is based on how far apart they are
the time i wasted reorienting after opening a thread, sheesh
glad i’m not using slack anymore
apple notes is where i kept all my tasks for years
even at companies that used jira! or linear!
that's why in our task tracker app we made it as easy to create a task as it is to create an apple note. ZERO friction
even at companies that used jira! or linear!
that's why in our task tracker app we made it as easy to create a task as it is to create an apple note. ZERO friction
August 15, 2025 at 3:07 PM
apple notes is where i kept all my tasks for years
even at companies that used jira! or linear!
that's why in our task tracker app we made it as easy to create a task as it is to create an apple note. ZERO friction
even at companies that used jira! or linear!
that's why in our task tracker app we made it as easy to create a task as it is to create an apple note. ZERO friction
notion is so buggy
the new oss openai model likes tables, let's see what it's like trying to create a table in notion…
the new oss openai model likes tables, let's see what it's like trying to create a table in notion…
August 7, 2025 at 3:43 PM
notion is so buggy
the new oss openai model likes tables, let's see what it's like trying to create a table in notion…
the new oss openai model likes tables, let's see what it's like trying to create a table in notion…
gen-z doesn't know how the file system works so we're building the no-folders work app
July 24, 2025 at 5:30 PM
gen-z doesn't know how the file system works so we're building the no-folders work app
finally, we use an svg mask to only render a border around the element
July 22, 2025 at 3:08 PM
finally, we use an svg mask to only render a border around the element
you'll notice the conic gradient didn't cover the entire menu item. that's because the animation ends up looking really bad on very wide elements (like this one) if you don't stretch out the gradient!
we apply a css transform to make sure the gradient covers the entire element
we apply a css transform to make sure the gradient covers the entire element
July 22, 2025 at 3:08 PM
you'll notice the conic gradient didn't cover the entire menu item. that's because the animation ends up looking really bad on very wide elements (like this one) if you don't stretch out the gradient!
we apply a css transform to make sure the gradient covers the entire element
we apply a css transform to make sure the gradient covers the entire element
next, you need a conic gradient
annoyingly, html supports conic gradients but svg doesn't. so we need to use svg's <foreignObject> element to embed a <div> with a conic gradient in the svg
annoyingly, html supports conic gradients but svg doesn't. so we need to use svg's <foreignObject> element to embed a <div> with a conic gradient in the svg
July 22, 2025 at 3:08 PM
next, you need a conic gradient
annoyingly, html supports conic gradients but svg doesn't. so we need to use svg's <foreignObject> element to embed a <div> with a conic gradient in the svg
annoyingly, html supports conic gradients but svg doesn't. so we need to use svg's <foreignObject> element to embed a <div> with a conic gradient in the svg
this technique is hard to build/maintain so accessibility engineers usually take the easy road of a css outline. but imo absolutely positioning your focus rings is critical if you want them to look great in all the weird edge cases your app has to offer
discord.com/blog/how-dis...
discord.com/blog/how-dis...
July 22, 2025 at 3:08 PM
this technique is hard to build/maintain so accessibility engineers usually take the easy road of a css outline. but imo absolutely positioning your focus rings is critical if you want them to look great in all the weird edge cases your app has to offer
discord.com/blog/how-dis...
discord.com/blog/how-dis...
we need to use svg to create the glowy effect. we can't use a css border or outline
so we have to start with an absolutely positioned <svg> element that renders on top of whatever we're trying to focus
so we have to start with an absolutely positioned <svg> element that renders on top of whatever we're trying to focus
July 22, 2025 at 3:08 PM
we need to use svg to create the glowy effect. we can't use a css border or outline
so we have to start with an absolutely positioned <svg> element that renders on top of whatever we're trying to focus
so we have to start with an absolutely positioned <svg> element that renders on top of whatever we're trying to focus
how we built glowy selectors for our docs app
and we did it with a technique from Discord that terrifies accessibility engineers everywhere 🧵
and we did it with a technique from Discord that terrifies accessibility engineers everywhere 🧵
July 22, 2025 at 3:08 PM
how we built glowy selectors for our docs app
and we did it with a technique from Discord that terrifies accessibility engineers everywhere 🧵
and we did it with a technique from Discord that terrifies accessibility engineers everywhere 🧵
not sure if i should ship, needs a little more polish, but i'm really liking it right now
thanks nintendo
(btw, this is what the feature looks like on the switch 2)
thanks nintendo
(btw, this is what the feature looks like on the switch 2)
July 14, 2025 at 8:52 PM
not sure if i should ship, needs a little more polish, but i'm really liking it right now
thanks nintendo
(btw, this is what the feature looks like on the switch 2)
thanks nintendo
(btw, this is what the feature looks like on the switch 2)
after getting absolutely wrecked by my friend in mario kart this weekend…
i added the Switch 2 glowy focus rings to my docs app
work should be fun :)
i added the Switch 2 glowy focus rings to my docs app
work should be fun :)
July 14, 2025 at 8:52 PM
after getting absolutely wrecked by my friend in mario kart this weekend…
i added the Switch 2 glowy focus rings to my docs app
work should be fun :)
i added the Switch 2 glowy focus rings to my docs app
work should be fun :)
we used a 20 year old obscure research paper to build this beautiful image gallery feature in alpine.inc
the paper is called "The Cassowary Linear Arithmetic Constraint Solving Algorithm"
it's the underpinning of apple's ios auto layout framework (more implementation details in thread)
the paper is called "The Cassowary Linear Arithmetic Constraint Solving Algorithm"
it's the underpinning of apple's ios auto layout framework (more implementation details in thread)
July 9, 2025 at 8:37 PM
we used a 20 year old obscure research paper to build this beautiful image gallery feature in alpine.inc
the paper is called "The Cassowary Linear Arithmetic Constraint Solving Algorithm"
it's the underpinning of apple's ios auto layout framework (more implementation details in thread)
the paper is called "The Cassowary Linear Arithmetic Constraint Solving Algorithm"
it's the underpinning of apple's ios auto layout framework (more implementation details in thread)
my friend texted me a question and i responded with a blog post
for the node.js devs out there: write your own database clients (link in the reply)
for the node.js devs out there: write your own database clients (link in the reply)
July 8, 2025 at 7:25 PM
my friend texted me a question and i responded with a blog post
for the node.js devs out there: write your own database clients (link in the reply)
for the node.js devs out there: write your own database clients (link in the reply)
here's all the illustrations we're currently working with:
July 7, 2025 at 12:05 PM
here's all the illustrations we're currently working with:
emojis are out
they're boring. everyone knows the ten good ones. they aren't expressions of your personality anymore
for alpine.inc we've commissioned custom illustrations you'll use instead to react on posts, chats, and more
with a radial picker inspired by video games:
they're boring. everyone knows the ten good ones. they aren't expressions of your personality anymore
for alpine.inc we've commissioned custom illustrations you'll use instead to react on posts, chats, and more
with a radial picker inspired by video games:
July 7, 2025 at 12:05 PM
emojis are out
they're boring. everyone knows the ten good ones. they aren't expressions of your personality anymore
for alpine.inc we've commissioned custom illustrations you'll use instead to react on posts, chats, and more
with a radial picker inspired by video games:
they're boring. everyone knows the ten good ones. they aren't expressions of your personality anymore
for alpine.inc we've commissioned custom illustrations you'll use instead to react on posts, chats, and more
with a radial picker inspired by video games:
tired of ruining your document every time you try to move an image? Alpine's got you
follow for more product demo videos
follow for more product demo videos
July 2, 2025 at 2:20 PM
tired of ruining your document every time you try to move an image? Alpine's got you
follow for more product demo videos
follow for more product demo videos
here's the marked up version from the designer, i won't share all their notes but a lot of it is systems thinking tricks an engineer can understand/apply next time. e.g.
- intentional typography based on hierarchy
- make sure everything is edge aligned
- intentional typography based on hierarchy
- make sure everything is edge aligned
July 1, 2025 at 12:54 PM
here's the marked up version from the designer, i won't share all their notes but a lot of it is systems thinking tricks an engineer can understand/apply next time. e.g.
- intentional typography based on hierarchy
- make sure everything is edge aligned
- intentional typography based on hierarchy
- make sure everything is edge aligned
engineers always make a first pass at the design of the features they're responsible for
then, our designers clean it up with detailed notes to help the engineer learn
here's an example, left is first pass from eng. right is the cleaned up version from a designer
then, our designers clean it up with detailed notes to help the engineer learn
here's an example, left is first pass from eng. right is the cleaned up version from a designer
July 1, 2025 at 12:54 PM
engineers always make a first pass at the design of the features they're responsible for
then, our designers clean it up with detailed notes to help the engineer learn
here's an example, left is first pass from eng. right is the cleaned up version from a designer
then, our designers clean it up with detailed notes to help the engineer learn
here's an example, left is first pass from eng. right is the cleaned up version from a designer
c3po had something to say about ai
June 30, 2025 at 3:50 PM
c3po had something to say about ai
to find the exact color we want, we use the cassowary constraint solver npmjs.com/@lume…
June 29, 2025 at 4:55 PM
to find the exact color we want, we use the cassowary constraint solver npmjs.com/@lume…
little details matter:
1. our share button in its hovered state
2. our share button in its hovered state on a colored background (eww 🤢)
3. our share button in its hovered state which blends with the colored background (ooohh 🥹)
1. our share button in its hovered state
2. our share button in its hovered state on a colored background (eww 🤢)
3. our share button in its hovered state which blends with the colored background (ooohh 🥹)
June 29, 2025 at 4:55 PM
little details matter:
1. our share button in its hovered state
2. our share button in its hovered state on a colored background (eww 🤢)
3. our share button in its hovered state which blends with the colored background (ooohh 🥹)
1. our share button in its hovered state
2. our share button in its hovered state on a colored background (eww 🤢)
3. our share button in its hovered state which blends with the colored background (ooohh 🥹)