Brandon Dail
@brandondail.com
Staff Engineer at Discord working on Design Systems, Accessibility, Other Stuff™️ Collage & generative plotter artist 👋
had a daughter the other day, we’re big fans ❤️
April 15, 2025 at 2:21 AM
had a daughter the other day, we’re big fans ❤️
for example, text-secondary here is defined in terms of a contrast ratio with a background token. This defines the color across all themes; no hand picked colors! that bg token is also defined using a contrast constraint.
If anything in the constraint dep graph changes, it propagates automatically
If anything in the constraint dep graph changes, it propagates automatically
March 26, 2025 at 1:23 AM
for example, text-secondary here is defined in terms of a contrast ratio with a background token. This defines the color across all themes; no hand picked colors! that bg token is also defined using a contrast constraint.
If anything in the constraint dep graph changes, it propagates automatically
If anything in the constraint dep graph changes, it propagates automatically
angry guy with amnesia:
February 11, 2025 at 2:49 PM
angry guy with amnesia:
$500 pack of cards casually sitting on the shelf 🫣
February 10, 2025 at 1:52 AM
$500 pack of cards casually sitting on the shelf 🫣
long overdue, but I did it 🫡
February 9, 2025 at 9:18 PM
long overdue, but I did it 🫡
`ps aux | grep rg` showed that rg was being called with a pattern looking for tailwind config files
December 5, 2024 at 6:44 PM
`ps aux | grep rg` showed that rg was being called with a pattern looking for tailwind config files
opening our monorepo's VSCode workspace was totally killing my CPU with rg processes. It brought my M3 Max to a halt for like five minutes.
Turns out it was the Tailwind extension I had installed for another project trying to find a tailwind.config.* file in our monorepo 🫠
Turns out it was the Tailwind extension I had installed for another project trying to find a tailwind.config.* file in our monorepo 🫠
December 5, 2024 at 4:14 PM
opening our monorepo's VSCode workspace was totally killing my CPU with rg processes. It brought my M3 Max to a halt for like five minutes.
Turns out it was the Tailwind extension I had installed for another project trying to find a tailwind.config.* file in our monorepo 🫠
Turns out it was the Tailwind extension I had installed for another project trying to find a tailwind.config.* file in our monorepo 🫠
can you guess what my favorite album was this year
December 5, 2024 at 3:42 AM
can you guess what my favorite album was this year
Bluesky connections on Discord are live! 🦋
November 27, 2024 at 11:24 PM
Bluesky connections on Discord are live! 🦋
Working on our color system and a novel approach we've started exploring for colors is to define them in terms of constraints: instead of picking colors for every token/theme, you specify a reference color and contrast ratio. The system does the rest.
this has a few cool advantages 👀
this has a few cool advantages 👀
November 27, 2024 at 5:50 PM
Working on our color system and a novel approach we've started exploring for colors is to define them in terms of constraints: instead of picking colors for every token/theme, you specify a reference color and contrast ratio. The system does the rest.
this has a few cool advantages 👀
this has a few cool advantages 👀
one day at Disney World 😪
November 23, 2024 at 1:50 PM
one day at Disney World 😪
I wrote an internal command to run this plugin on a single module awhile back to debug this kind of stuff. Here's the output with and without that assignment. Looks like when it generates that __closure value it doesn't know withSpring isn't reachable.
November 14, 2024 at 2:30 AM
I wrote an internal command to run this plugin on a single module awhile back to debug this kind of stuff. Here's the output with and without that assignment. Looks like when it generates that __closure value it doesn't know withSpring isn't reachable.
recently sewed a plushie based on a drawing my 5yo made as a birthday present for one of his close friends 🪡
November 8, 2024 at 8:22 PM
recently sewed a plushie based on a drawing my 5yo made as a birthday present for one of his close friends 🪡
I get a lot of extra bottom spacing when looking at a post and its replies
November 7, 2024 at 3:57 PM
I get a lot of extra bottom spacing when looking at a post and its replies
A bonus technical detail: this all works seamlessly with any number of tabs AND if you dynamically add or remove tabs. This almost never happens but it helps me sleep at night knowing that the system is resilient and it’s good signal we have the right state abstractions in place
November 7, 2024 at 3:42 PM
A bonus technical detail: this all works seamlessly with any number of tabs AND if you dynamically add or remove tabs. This almost never happens but it helps me sleep at night knowing that the system is resilient and it’s good signal we have the right state abstractions in place
When you over scroll the content area the active indicator will “squish” against the edge in the direction you are over scrolling.
This uses the same scaleX/translateX approach that the stretch effect uses.
This uses the same scaleX/translateX approach that the stretch effect uses.
November 7, 2024 at 3:26 PM
When you over scroll the content area the active indicator will “squish” against the edge in the direction you are over scrolling.
This uses the same scaleX/translateX approach that the stretch effect uses.
This uses the same scaleX/translateX approach that the stretch effect uses.
The active tab indicator syncs up with the tab content horizontal scroll position of the tab content area. The scroll area has snapping enabled and once you scroll past the snap threshold the active tab text color will apply to the tab that would be active if you stopped the scroll gesture.
November 7, 2024 at 3:23 PM
The active tab indicator syncs up with the tab content horizontal scroll position of the tab content area. The scroll area has snapping enabled and once you scroll past the snap threshold the active tab text color will apply to the tab that would be active if you stopped the scroll gesture.
When you press down on a tab that isn’t selected, the active tab indicator will “stretch” towards that option.
This is done with a scaleX transform that increases the indicator with, paired with a translateX transform that makes sure the scale transform doesn’t affect the position of the indicator
This is done with a scaleX transform that increases the indicator with, paired with a translateX transform that makes sure the scale transform doesn’t affect the position of the indicator
November 7, 2024 at 3:21 PM
When you press down on a tab that isn’t selected, the active tab indicator will “stretch” towards that option.
This is done with a scaleX transform that increases the indicator with, paired with a translateX transform that makes sure the scale transform doesn’t affect the position of the indicator
This is done with a scaleX transform that increases the indicator with, paired with a translateX transform that makes sure the scale transform doesn’t affect the position of the indicator
A small thread on some of the small details we built into our mobile segmented control component at Discord. These are subtle details but I’m a strong believer that polish like this can make all the difference 🧵
November 7, 2024 at 3:19 PM
A small thread on some of the small details we built into our mobile segmented control component at Discord. These are subtle details but I’m a strong believer that polish like this can make all the difference 🧵
translate being the top action in this menu feels wrong; it’s probably one of the least common actions I’d use here
November 5, 2024 at 7:35 PM
translate being the top action in this menu feels wrong; it’s probably one of the least common actions I’d use here
if you need a distraction, here’s a gorilla body slamming its siblings at the Atlanta Zoo today
November 5, 2024 at 7:28 PM
if you need a distraction, here’s a gorilla body slamming its siblings at the Atlanta Zoo today
there’s also some layout jank on this edit profile screen where the header is outside the safe area as the banner image loads in
November 5, 2024 at 4:43 AM
there’s also some layout jank on this edit profile screen where the header is outside the safe area as the banner image loads in
The header on this screen feels a lot larger than others? also standard layout for a view like this would include a back or cancel action in the header too
November 5, 2024 at 4:40 AM
The header on this screen feels a lot larger than others? also standard layout for a view like this would include a back or cancel action in the header too
I’d give this jump button a *slightly* different color so it stands out a tad more without being distracting, and also align it with the avatar. Alignment feels off as is
November 5, 2024 at 4:33 AM
I’d give this jump button a *slightly* different color so it stands out a tad more without being distracting, and also align it with the avatar. Alignment feels off as is
whatever the double arrow icon in the bottom right of the image above is seems unnecessary, and the border radius feels wrong; should have a bit more spacing and larger radius
November 5, 2024 at 4:29 AM
whatever the double arrow icon in the bottom right of the image above is seems unnecessary, and the border radius feels wrong; should have a bit more spacing and larger radius