johnphamous

gm ny

search input

- modifier keys are os-aware e.g. ⌘/Ctrl
- modifier keys are hidden when there's no keyboard attached, reduces noise
- hides the modifier keys when focused, gets out of the way of the user
- optional prop `captureFocus` will focus and forward any key events on the page to the input

service map

connection lines represent the state

- healthy, green, flowing well
- degraded, amber, flow slowed
- offline, red, no flow, blinking
- unknown, gray, no flow

line chart

- y-axis shows min, mid, max
- x-axis shows relative to now
- tooltip shows "in progress" to educate reader

days drop the hour and minute. assumes that that level of granularity after 1 day is no longer relevant (context dependent)

durations shows local, utc, and iso date times in tooltip

- tabular nums for alignment making comparing local & utc easier
- iso shown cause devtools commonly use this
- year shown in local/utc only if they're diff years between each other or the current year

prior
x.com/JohnPhamous...

grouping and collapsing log lines based on type

add to calendar

perceptually uniform color maps

useful in heat maps where value differences are equal to the differences in colors

Emulate vision deficiencies in DevTools Emulate vision deficiencies in to see how users who experience color blindness or blurred vision might see your site.

docs
addyosmani.com/blog/emulat...

testing against different vision deficiencies

xmcp fan art

line chart with thresholds

- label has stroke background stroke to maintain contrast with background content
- tooltip shows when a point is in the threshold
- tabular nums on the tooltip value to prevent content shifting

it’s an SVG stroke

badges

- icons/dots/labels are aligned
- p3 colors when supported
- special icon treatments to make sure they're visible

inline definitions

saves the reader a search, going to docs, or asking a llm

animated dashed border with rounded linecaps

xmcp fan art

chromatic aberration sf compute

inspecting a data center rack

nice

only improvement is to rename rows to the noun here if there is one

this is the way

debugging tip

- make your ui/animations into a state machine
- add dev-build only buttons to do state transitions

i joined @sfcompute

showing incidents

good to be back @internetxstudio to continue learning the way of the webmaster

upcoming and past maintenance windows

- precalculate how long til next upcoming
- precalculate impact durations
- makes it clear when no action/action required
- past action requires are deemphasized
- grouped empty days to reduce scroll distance to signal

additional affordance to show if current scroll position is at the top or not

some apps put the scroll container inside the inset

early iteration