JohnPhamous's banner

JohnPhamous

@JohnPhamous • 20,617 subscribers

design eng @vercel, angel investor, a16z scout

Shorts

representing ui as a state machine makes it easier to manually and automatically test

representing ui as a state machine makes it easier to manually and automatically test

123,367 görüntüleme

dog is animated using a sprite sheet - single network request for 57kb image to get animation frames - no 3rd party dependencies

dog is animated using a sprite sheet - single network request for 57kb image to get animation frames - no 3rd party dependencies

242,664 görüntüleme

vercel is hiring - product designer - design engineer - motion designer - brand designer

254,992 görüntüleme

the vercel design team

the vercel design team

108,644 görüntüleme

see in realtime the gpus you're about to buy

see in realtime the gpus you're about to buy

203,186 görüntüleme

onboarding ends with fog reveal - css-only dynamic fog (no canvas/shaders) - fluid sizing - features the 4 spirits of whimsy

onboarding ends with fog reveal - css-only dynamic fog (no canvas/shaders) - fluid sizing - features the 4 spirits of whimsy

215,213 görüntüleme

visual hash - bayer 4x4 dither - oklch monotone gradient

visual hash - bayer 4x4 dither - oklch monotone gradient

48,672 görüntüleme

dog follows pointer + avoids collisions with no dependencies - builds the page as a graph, more subdivisions towards the text for perf - dijkstra shortest path

dog follows pointer + avoids collisions with no dependencies - builds the page as a graph, more subdivisions towards the text for perf - dijkstra shortest path

48,995 görüntüleme

i added my dog to my website

i added my dog to my website

32,877 görüntüleme

visual hash shader - signed distance function determines shape - key hashes to color, breathing & flicker

visual hash shader - signed distance function determines shape - key hashes to color, breathing & flicker

26,641 görüntüleme

better multi-select for deployment status' - labels convey action - keyboard accessible

better multi-select for deployment status' - labels convey action - keyboard accessible

48,979 görüntüleme

improving nested menus interactions uses a "prediction cone" to prevent accidentally selecting items when moving a pointer to the nested menu details below

improving nested menus interactions uses a "prediction cone" to prevent accidentally selecting items when moving a pointer to the nested menu details below

170,235 görüntüleme

rotating env vars - automatically converts non-sensitive to sensitive guardrails to prevent mistakes: - checks if dev value matches prod/preview - educates that revoking is still needed - bunch of heuristics on key name/value for mistakes collab w William Bout

rotating env vars - automatically converts non-sensitive to sensitive guardrails to prevent mistakes: - checks if dev value matches prod/preview - educates that revoking is still needed - bunch of heuristics on key name/value for mistakes collab w William Bout

10,823 görüntüleme

spreadsheet cell "linting" nudges you towards a better result

spreadsheet cell "linting" nudges you towards a better result

48,680 görüntüleme

guidelines for building interfaces on the web interactions, animations, layout, content, forms, performance, design & copywriting includes an AGENTS.md

guidelines for building interfaces on the web interactions, animations, layout, content, forms, performance, design & copywriting includes an AGENTS.md

29,683 görüntüleme

`scroll-padding-block` in a `textarea` so the text always has a gap with the bottom edge

`scroll-padding-block` in a `textarea` so the text always has a gap with the bottom edge

60,384 görüntüleme

animated fog with just css - 4 webp of smoke - configurable density - random seed to change scale, speed, position - disables animation with prefers-reduced-motion

animated fog with just css - 4 webp of smoke - configurable density - random seed to change scale, speed, position - disables animation with prefers-reduced-motion

41,340 görüntüleme

r u an engineer that likes finance? San Francisco Compute is hiring an engineer to build the platform that allows traders trade gpu compute

r u an engineer that likes finance? San Francisco Compute is hiring an engineer to build the platform that allows traders trade gpu compute

33,679 görüntüleme

can tap the screen to call dog over to you faster - dog has base speed (similar to irl) - each tap gives +1pts speed, exponentially decaying with each successive tap - speed decays over time (dog gets tired) - speed resets when reaching cursor

can tap the screen to call dog over to you faster - dog has base speed (similar to irl) - each tap gives +1pts speed, exponentially decaying with each successive tap - speed decays over time (dog gets tired) - speed resets when reaching cursor

12,266 görüntüleme

coming soon june 2025

coming soon june 2025

23,350 görüntüleme

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

datadog for humans - realtime heart rate - correlates with typing speed, clicks, pointer travel distance & what app you're in - breakdowns by websites & slack channels - insights in deep focus, context switching, hr per-app - local, native app

datadog for humans - realtime heart rate - correlates with typing speed, clicks, pointer travel distance & what app you're in - breakdowns by websites & slack channels - insights in deep focus, context switching, hr per-app - local, native app

131,189 görüntüleme • 4 ay önce

weightlifter a terminal-inspired progressive web app to track weightlifting - tells you what plates to rack - optimizes warmup -> working set plates to minimize re-racks - progressive overloading for reps and weight - dynamic rest times based on heart rate during exercise

weightlifter a terminal-inspired progressive web app to track weightlifting - tells you what plates to rack - optimizes warmup -> working set plates to minimize re-racks - progressive overloading for reps and weight - dynamic rest times based on heart rate during exercise

61,282 görüntüleme • 9 ay önce

giving a talk AI Engineer on design engineering

giving a talk AI Engineer on design engineering

38,003 görüntüleme • 1 yıl önce

Daha fazla içerik yok.