wits

dashboard lead & staff design eng @vercel

[wits @witsdev]

I haven't released any personal projects for five years.

I've built plenty of prototypes, but none of them ever felt ready.

Here's what I've been doing, and what I'm going to do next:

[wits @witsdev]

btw the areas where you can start scrolling or resizing here are the same

we wait until you start dragging to detect your intention, based on whether the cursor moved more horizontally or vertically

[Rahul Rajput @r2hu1]

Small interactions that makes @vercel different

[wits @witsdev]

@hiimmox @aidenybai it’s often possible to structure your UI so that the dynamic part of the content doesn’t affect the cumulative layout

when that isn’t possible, it’s best to target being correct for the most common case

[wits @witsdev]

@KenWattana anything we can do to make the dashboard better?

[wits @witsdev]

@justmalhar I’ll forward this to our o11y team, thank you for reporting!

[wits @witsdev]

I lead the dashboard team at Vercel

every day we ship some changes based on a feedback channel in our Slack

reply here with your feature requests, bug reports, or any other feedback and I'll forward it to that channel

[wits @witsdev]

@timeyoutakeit @z0oks we miss you 🖤

[wits @witsdev]

@proofandstate just the page root

and we’re only doing this because we have a full-height sidebar. I wouldn’t recommend doing this on all websites

[wits @witsdev]

we do this with overscroll-behavior: none

but we gate it behind a (pointer: fine) media query, so that it doesn’t impact touch devices. this means you can still pull to refresh on mobile

[Tianyi @tianyi_gc]

Big thumbs up to @vercel for babysitting the rubber-band bounce on macOS!

[wits @witsdev]

@jh3yy we started with an (any-pointer: coarse) query and changed it because of feedback from folks using Windows laptops w/ touchscreens 😅

limiting to the y axis is v good though, and imo you should only do this when you have full-height sidebars or other specific layouts

[wits @witsdev]

@RomanHauksson pointer media queries are evaluated against the primary pointing device, so it will still match (pointer: fine) in that case

https://t.co/clgzfd6XGL

[wits @witsdev]

@legionsdev @kshvbgde we made sure pull to refresh still works 🙂

[wits @witsdev]

we do this with overscroll-behavior: none

but we gate it behind a (pointer: fine) media query, so that it doesn’t impact touch devices. this means you can still pull to refresh on mobile

[wits @witsdev]

@dinokupinic @rauchg @JohnPhamous thank you for the feedback!

we’re working on improving the navigation on both desktop and mobile

for the small UI, lack of animations, etc. can you provide specific examples?

[wits @witsdev]

@CasualCelebi @maxktz @vercel oh wait. we actually already have a setting for this

if you go to “My Notifications” it’s “Import detection”

[wits @witsdev]

@CasualCelebi @maxktz @vercel thank you for the feedback!

I’ll share this with the team working on it

[wits @witsdev]

@maxktz @vercel heard! we’ll improve this

[wits @witsdev]

@Jakubantalik @vercel thank you for building an awesome library! :)

[wits @witsdev]

the new deployment filters are available now in the @vercel dashboard

here's how we engineered them…

[wits @witsdev]

@andrewlu0 @ragnsanvalla @vercel @Jakubantalik yep! this is the second place we’re using it in the dashboard

[wits @witsdev]

you can try out these filters on the deployment list pages in our dashboard

for more details on how we engineered them, see this thread

[wits @witsdev]

the new deployment filters are available now in the @vercel dashboard

here's how we engineered them…

[wits @witsdev]

the new deployment filters are available now in the @vercel dashboard

here's how we designed them…

[wits @witsdev]

we're working on a new filter system for the @vercel dashboard

coming soon to our deployments pages

[wits @witsdev]

• date range

these allow users to select either a common time period (e.g. "this week") or to select a custom timeframe

the text in the search input is parsed when possible, and selecting the custom timeframe brings up a pointer-friendly calendar UI

[wits @witsdev]

you can try out these filters on the deployment list pages in our dashboard

for more details on how we designed them, see this thread

[wits @witsdev]

the new deployment filters are available now in the @vercel dashboard

here's how we designed them…

[wits @witsdev]

when users type a query that we can't find a simple match for, we switch to determining the filters using AI

this is primarily done by:
• generating a zod schema based on the relevant filter definitions
• generating an object that matches that schema based on the user's query

but there is additional nuance, like:
• select/multi-select values are matched to their closest valid value on the server
• the LLM can include a special sequence to indicate that a value should match the current user
• dates are passed back raw to the client so that they can be parsed with the user's local timezone