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
if you liked this, check out another demo:
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 22, 2025 at 3:36 PM
if you liked this, check out another demo:
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 15, 2025 at 3:07 PM
gen-z doesn't know how the file system works so we're building the no-folders work app
August 7, 2025 at 3:43 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 :)
August 7, 2025 at 3:37 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
August 7, 2025 at 3:36 PM
this is only possible thanks to ai that organizes your work for you
July 24, 2025 at 5:30 PM
this is only possible thanks to ai that organizes your work for you
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...
absolutely positioning focus rings in a generic way is hard!
i read a blog post by discord 5 years ago which inspired me to reimplement their system in our app
i read a blog post by discord 5 years ago which inspired me to reimplement their system in our app
July 22, 2025 at 3:08 PM
absolutely positioning focus rings in a generic way is hard!
i read a blog post by discord 5 years ago which inspired me to reimplement their system in our app
i read a blog post by discord 5 years ago which inspired me to reimplement their system in our app
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
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)
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:39 PM
our image gallery's constraints are:
1. the width of three images in a row MUST sum to document width
2. all images in a row MUST have the same height
3. images SHOULD maintain their aspect ratio
cassowary then finds the right width/height for the images in our gallery!
1. the width of three images in a row MUST sum to document width
2. all images in a row MUST have the same height
3. images SHOULD maintain their aspect ratio
cassowary then finds the right width/height for the images in our gallery!
July 9, 2025 at 8:37 PM
our image gallery's constraints are:
1. the width of three images in a row MUST sum to document width
2. all images in a row MUST have the same height
3. images SHOULD maintain their aspect ratio
cassowary then finds the right width/height for the images in our gallery!
1. the width of three images in a row MUST sum to document width
2. all images in a row MUST have the same height
3. images SHOULD maintain their aspect ratio
cassowary then finds the right width/height for the images in our gallery!
the way you use cassowary is you give it a set of simple constraints and cassowary will find numbers that satisfy those constraints. if it can't satisfy a constraint it'll try to product a number as close as possible to the constraint
July 9, 2025 at 8:37 PM
the way you use cassowary is you give it a set of simple constraints and cassowary will find numbers that satisfy those constraints. if it can't satisfy a constraint it'll try to product a number as close as possible to the constraint
