Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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

JohnPhamous

22,623 subscribers

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

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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

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 • 1 year ago

My new DS uses a technique I call: Concentric Scaling. Every nested element shares a center with the container's sides, keeping spacing perfectly aligned across every component size. The math comes from one number: the component's height.

My new DS uses a technique I call: Concentric Scaling. Every nested element shares a center with the container's sides, keeping spacing perfectly aligned across every component size. The math comes from one number: the component's height.

Dmitrii Bunin

46,646 views • 2 months ago

💥 Introducing "Zapscape" (CVE-2026-64561) A Guest-to-Host Escape in KVM/x86 exploiting a UAF in the shadow MMU's recursive "ZAP" path. Can escape to the host on x86 public clouds that expose nested virtualization. A separate vulnerability from Januscape. If you match the vulnerable conditions, apply the patch immediately. Details:

💥 Introducing "Zapscape" (CVE-2026-64561) A Guest-to-Host Escape in KVM/x86 exploiting a UAF in the shadow MMU's recursive "ZAP" path. Can escape to the host on x86 public clouds that expose nested virtualization. A separate vulnerability from Januscape. If you match the vulnerable conditions, apply the patch immediately. Details:

V4bel

30,829 views • 1 month 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

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 • 6 months ago

Beckham Black uses a series of jab steps to create space for the pull-up 3-pointer!

Beckham Black uses a series of jab steps to create space for the pull-up 3-pointer!

NBA Future Starts Now

26,236 views • 1 month 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 ).

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,336 views • 6 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; }

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

86,969 views • 3 months 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

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 • 6 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.

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,275,704 views • 6 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. 🔮

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,275 views • 4 months 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!

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

🇺🇸🇺🇦 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

🇺🇸🇺🇦 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

A newly discovered spider species from Australia uses its silk to craft a spring-loaded, cone-shaped death trap, which catapults its prey into the spider’s main web.

A newly discovered spider species from Australia uses its silk to craft a spring-loaded, cone-shaped death trap, which catapults its prey into the spider’s main web.

CNN

280,286 views • 2 months ago

React Aria Components v1.19.0 is out! ✨ Autocomplete now supports inline completions (e.g. mentions), and a new Popover API enables positioning relative to the cursor. Also, text inputs can now be nested inside GridList and Tree without interfering with arrow key navigation!

React Aria Components v1.19.0 is out! ✨ Autocomplete now supports inline completions (e.g. mentions), and a new Popover API enables positioning relative to the cursor. Also, text inputs can now be nested inside GridList and Tree without interfering with arrow key navigation!

Devon Govett

19,128 views • 2 months ago

Next Ghostty Tahoe PR, adding icons to menu items as recommended by the new design guidelines. A small detail, but all the small things to help Ghostty feel right at home in the new design language when we get there.

Next Ghostty Tahoe PR, adding icons to menu items as recommended by the new design guidelines. A small detail, but all the small things to help Ghostty feel right at home in the new design language when we get there.

Mitchell Hashimoto

40,969 views • 1 year ago

this OpenClaw bot finds ugly digital menus, rebuilds them as branded apps, and mails the owner a postcard with the QR...on autopilot. here's how agencies can land recurring contracts with this system: - scans every restaurant with a digital menu in real time - pulls the full menu — items, prices, photos from the live page - ranks them by how bad the design is (no photos, default font, no logo) - pulls the brand colors and font straight from the restaurant's own page - rebuilds each menu as an app, live at a QR-accessible URL - writes a postcard quoting the restaurant's actual menu quirks - mails it to the registered office addressed to the owner by first name every step from discovery to brand-matching to outreach is automated. reply "MENU" and i'll send you a free guide so you can build this too

Chris

41,834 views • 3 months ago

Being in Maryland means you get to eat at Little Blue Menu by Chick Fil A and have their Lil blue menu items 😋😋😋

Being in Maryland means you get to eat at Little Blue Menu by Chick Fil A and have their Lil blue menu items 😋😋😋

Simply AJ aka Tom Bombadil

2,724,111 views • 2 years ago

Last night I ran a script to scrape every prediction market project I could find.🔭 The result: 97 projects. (all listed below). A dashboard to browse them is live below 👇

Last night I ran a script to scrape every prediction market project I could find.🔭 The result: 97 projects. (all listed below). A dashboard to browse them is live below 👇

Figo

54,848 views • 1 year ago

DESPERATION: Firefighter uses traffic cone to retrieve water from a puddle as LA is running out of water Pray for SoCal🙏

DESPERATION: Firefighter uses traffic cone to retrieve water from a puddle as LA is running out of water Pray for SoCal🙏

Breaking911

376,180 views • 1 year ago