Loading video...

Video Failed to Load

Go Home

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

JohnPhamous's profile picture

JohnPhamous

20,719 subscribers

170,249 views • 3 years ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

if you're building a tree component, avoid dead zones for nested items
0:11

Sensitive content

if you're building a tree component, avoid dead zones for nested items

dmytro

101,357 views • 6 months ago

I guess I finally found a use case for nested buttons. It was the only way to get text truncation to work here.
0:11

I guess I finally found a use case for nested buttons. It was the only way to get text truncation to work here.

Haz

95,916 views • 9 months ago

every time i go to post my take on :hover safety triangles for context menus, someone has just posted one... 🤦‍♂️ guess we're waiting again... it isn't a hard thing to implement though: - clip a pseudo element off the menu - use pointer delta instead of a timeout
0:18

every time i go to post my take on :hover safety triangles for context menus, someone has just posted one... 🤦‍♂️ guess we're waiting again... it isn't a hard thing to implement though: - clip a pseudo element off the menu - use pointer delta instead of a timeout

jhey ʕ•ᴥ•ʔ

98,663 views • 3 months ago

Footage || Indian army validation cope cage using Drone-dropped munitions on a live tank and nested drones
0:15

Footage || Indian army validation cope cage using Drone-dropped munitions on a live tank and nested drones

SPADEX

18,130 views • 6 months ago

Create this layout using nested css grids and media queries 💪
0:14

Create this layout using nested css grids and media queries 💪

David Mráz

14,283 views • 1 year ago

HeroUI Native RC 4 just landed! 🚀 🆕 Introducing SubMenu for nested menus 🎚️ Improved Slider Output composition 🐛 Fixes for PressableFeedback ripple & Bottom Sheet back handler Stable is almost knocking, stay ready 🚦
0:15

HeroUI Native RC 4 just landed! 🚀 🆕 Introducing SubMenu for nested menus 🎚️ Improved Slider Output composition 🐛 Fixes for PressableFeedback ripple & Bottom Sheet back handler Stable is almost knocking, stay ready 🚦

HeroUI

40,538 views • 3 months ago

"w/o prediction cone" VS "w/ prediction cone"
0:18

"w/o prediction cone" VS "w/ prediction cone"

Soren

433,153 views • 3 months ago

I bet you've never noticed this ultra-cool but rather complicated "cone of prediction" at the center of Windows context menus? It allows the system to predict that you're aiming for a flyout. Well, that's because Windows (at least in the old days) didn't do any such fanciness. It just uses a timeout of 400ms, and it's always worked pretty well. It's even adjustable (SPI_SETMENUSHOWDELAY) these days, but used to just be 80% of your double-click speed setting. So the faster your reflexes were - per that setting, at least - the shorter your menu flyout allowance. No cone needed. ( I stole this from a Raymond Chen hockey card that I keep tucked up in my 50 Mission Cap ).
0:18

I bet you've never noticed this ultra-cool but rather complicated "cone of prediction" at the center of Windows context menus? It allows the system to predict that you're aiming for a flyout. Well, that's because Windows (at least in the old days) didn't do any such fanciness. It just uses a timeout of 400ms, and it's always worked pretty well. It's even adjustable (SPI_SETMENUSHOWDELAY) these days, but used to just be 80% of your double-click speed setting. So the faster your reflexes were - per that setting, at least - the shorter your menu flyout allowance. No cone needed. ( I stole this from a Raymond Chen hockey card that I keep tucked up in my 50 Mission Cap ).

Dave W Plummer

45,254 views • 3 months ago

Design Engineering Tip Consider letting textareas grow with the content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }
0:14

Design Engineering Tip Consider letting textareas grow with the content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }

Gabriel

81,413 views • 5 days ago

Imagine that, a page with a single landing page needing this many nested components, thank you react & next! "Achieving less by needing more®"
0:14

Imagine that, a page with a single landing page needing this many nested components, thank you react & next! "Achieving less by needing more®"

WebDevCody

74,679 views • 1 year ago

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

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

JohnPhamous

48,995 views • 3 months ago

when hyunjin accidentally danced to gods menu during their danceracha live few months before gods menu release 🤣🤣
0:17

when hyunjin accidentally danced to gods menu during their danceracha live few months before gods menu release 🤣🤣

𐙚 Dani

180,969 views • 2 months ago

prediction cone/safe triangle — this is something we take so much for granted in modern day native UIs. but it's not the same for most web-based dropdown menus. it took me a while to implement this here. Amazon, macOS, Windows all implement some version of this.
0:18

prediction cone/safe triangle — this is something we take so much for granted in modern day native UIs. but it's not the same for most web-based dropdown menus. it took me a while to implement this here. Amazon, macOS, Windows all implement some version of this.

Soren

1,029,675 views • 3 months ago

Predikt Beta Platform is LIVE! 🎉 A first look at how prediction markets work when they’re unified, composable, and built for scale. More details below + link to start predicting at best rates. 🔮
0:17

Predikt Beta Platform is LIVE! 🎉 A first look at how prediction markets work when they’re unified, composable, and built for scale. More details below + link to start predicting at best rates. 🔮

Predikt

17,026 views • 1 month ago

here's a tutorial onboarding interface for my Roblox game, just a few small animations have a massive impact on a menu. going to be adding more to some old menus now!
0:18

here's a tutorial onboarding interface for my Roblox game, just a few small animations have a massive impact on a menu. going to be adding more to some old menus now!

Hoofer

19,996 views • 1 year ago

Getting a few questions about the menu options. This is specifically for building inverted menus in light mode. Works for dropdown menu, select, combobox, context menu, menubar...etc
0:10

Getting a few questions about the menu options. This is specifically for building inverted menus in light mode. Works for dropdown menu, select, combobox, context menu, menubar...etc

shadcn

75,621 views • 5 months ago

🇺🇸🇺🇦 The LA fire department donated parts of their equipment to Ukraine. Meanwhile American firefighter uses a traffic cone to scoop up water from a puddle and try to put out the fire. - FRWL
0:16

🇺🇸🇺🇦 The LA fire department donated parts of their equipment to Ukraine. Meanwhile American firefighter uses a traffic cone to scoop up water from a puddle and try to put out the fire. - FRWL

Zlatti71

370,871 views • 1 year ago

added to the “chen mistakenly uses other items as microphones” 😂
0:10

added to the “chen mistakenly uses other items as microphones” 😂

klau

85,587 views • 1 year ago

Introducing visual-json > JSON editing with human-first ergonomics – Minimalist – Embeddable – Schema-aware – Extensible – Drag and drop – Keyboard navigation – Tree view to drill into deeply nested data
0:15

Introducing visual-json > JSON editing with human-first ergonomics – Minimalist – Embeddable – Schema-aware – Extensible – Drag and drop – Keyboard navigation – Tree view to drill into deeply nested data

Chris Tate

166,797 views • 3 months ago