Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Design Engineering Tip If your modal scrolls like this, you’re probably missing one CSS property: overscroll-behavior: contain; It prevents the page behind the modal from scrolling when users reach the top or bottom.

gabriell_lab's profile picture

Gabriel

8,152 subscribers

27,725 görüntüleme • 1 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

Design Engineering Tip: If your whole page shifts 15px the moment a modal opens, it isn't the modal. It's the scrollbar disappearing, because the library sets overflow: hidden on the body to lock scrolling. Reserve the space before you ever need it: html { scrollbar-gutter: stable; }
0:12

Design Engineering Tip: If your whole page shifts 15px the moment a modal opens, it isn't the modal. It's the scrollbar disappearing, because the library sets overflow: hidden on the body to lock scrolling. Reserve the space before you ever need it: html { scrollbar-gutter: stable; }

Gabriel

30,443 görüntüleme • 17 gün önce

If you’re looking for a new design or engineering role this is probably the best place to search. I’ll add the link in the thread
0:18

If you’re looking for a new design or engineering role this is probably the best place to search. I’ll add the link in the thread

Design Chief Priest

28,892 görüntüleme • 4 ay önce

This CSS unit is quietly ruining your website's mobile experience. In mobile, "vh" doesn't account for the browser's address bar so the bottom of your page gets cut off. Even worse if you have a bottom right action button since users won't even know it's there. The "svh" unit fixes it: .page { min-height: 100svh; } If you found this one useful, follow for more! ❤️
0:10

This CSS unit is quietly ruining your website's mobile experience. In mobile, "vh" doesn't account for the browser's address bar so the bottom of your page gets cut off. Even worse if you have a bottom right action button since users won't even know it's there. The "svh" unit fixes it: .page { min-height: 100svh; } If you found this one useful, follow for more! ❤️

Ali

11,841 görüntüleme • 3 ay önce

Design Engineering Tip: Add friction at the end of a scroll interaction. When users reach the edge of a scrollable area, the movement should not just stop instantly. A subtle resistance, bounce, or slowdown can make the interface feel more physical and less mechanical. It helps users understand that they reached a boundary without needing extra labels or visual indicators. Used carefully, this can make scrolling feel more natural and closer to how objects behave in the real world.
0:12

Design Engineering Tip: Add friction at the end of a scroll interaction. When users reach the edge of a scrollable area, the movement should not just stop instantly. A subtle resistance, bounce, or slowdown can make the interface feel more physical and less mechanical. It helps users understand that they reached a boundary without needing extra labels or visual indicators. Used carefully, this can make scrolling feel more natural and closer to how objects behave in the real world.

Gabriel

25,730 görüntüleme • 1 ay önce

Fixed this small bug in Linear’s app today which I often see in other apps as well. Here’s a small before/after. The issue: When you open a popover inside a modal (think a custom select), clicking outside the popover to close it also closes the modal. The desired behavior is to close the select on click outside while keeping the modal open. This often happens because custom dropdowns or select components are rendered in a portal. The modal then treats the interaction as an outside click because, technically, the dropdown isn’t inside the modal in the DOM, it’s rendered elsewhere via a portal. The fix depends on your setup, whether it’s Radix/Base UI, fully custom etc. But since you now know the cause of it, you can ask your agent to fix it for you!
0:16

Fixed this small bug in Linear’s app today which I often see in other apps as well. Here’s a small before/after. The issue: When you open a popover inside a modal (think a custom select), clicking outside the popover to close it also closes the modal. The desired behavior is to close the select on click outside while keeping the modal open. This often happens because custom dropdowns or select components are rendered in a portal. The modal then treats the interaction as an outside click because, technically, the dropdown isn’t inside the modal in the DOM, it’s rendered elsewhere via a portal. The fix depends on your setup, whether it’s Radix/Base UI, fully custom etc. But since you now know the cause of it, you can ask your agent to fix it for you!

Emil Kowalski

88,922 görüntüleme • 1 ay önce

Design Engineering Tip: If you’re using the same corner radius across your entire UI, try scaling it with the component size: 12px → XS (buttons, tags) 16px → S (cards, inputs) 24px → M (modals, panels) As components get larger, increasing the radius can help preserve the same visual softness and balance.
0:13

Design Engineering Tip: If you’re using the same corner radius across your entire UI, try scaling it with the component size: 12px → XS (buttons, tags) 16px → S (cards, inputs) 24px → M (modals, panels) As components get larger, increasing the radius can help preserve the same visual softness and balance.

Gabriel

28,199 görüntüleme • 2 ay önce

If you guys like, garnish the yam from top to bottom Or even prepare the best sauce to go with it I'll still insist that yam should be banned📌📌
0:17

If you guys like, garnish the yam from top to bottom Or even prepare the best sauce to go with it I'll still insist that yam should be banned📌📌

NaijaFarmer

48,356 görüntüleme • 1 ay önce

A lot of hitters confuse being late with letting the ball get deep. They’re not the same thing. In this video I show it with a simple example. I toss the ball and reach way out in front of me to catch it. That’s what late looks like. The ball already beat you… now you’re chasing it with your hands. Then I toss another one and catch it slightly behind me. That’s being on time and letting the ball get deep. When you’re late, your body and barrel are reacting after the ball passes your window. You’re forced to reach, cut across it, or roll it over. When you’re on time, you can let the ball travel and still control it. Now the barrel can stay through the zone longer, and you can drive it with authority. Deep ≠ late. Good hitters aren’t reaching for the ball… they’re on time enough to let it come to them. ⚾️ Train with an expert. Not an influencer.
0:15

A lot of hitters confuse being late with letting the ball get deep. They’re not the same thing. In this video I show it with a simple example. I toss the ball and reach way out in front of me to catch it. That’s what late looks like. The ball already beat you… now you’re chasing it with your hands. Then I toss another one and catch it slightly behind me. That’s being on time and letting the ball get deep. When you’re late, your body and barrel are reacting after the ball passes your window. You’re forced to reach, cut across it, or roll it over. When you’re on time, you can let the ball travel and still control it. Now the barrel can stay through the zone longer, and you can drive it with authority. Deep ≠ late. Good hitters aren’t reaching for the ball… they’re on time enough to let it come to them. ⚾️ Train with an expert. Not an influencer.

Stance Doctor

25,605 görüntüleme • 5 ay önce

This is probably the only time you’d wish you did have an HOA. Neighbors can ruin your property value by doing crap like this. What can you even do about it? I’m thinking maybe asking if it’s a fire hazard or egress issue?
0:13

This is probably the only time you’d wish you did have an HOA. Neighbors can ruin your property value by doing crap like this. What can you even do about it? I’m thinking maybe asking if it’s a fire hazard or egress issue?

Suzee Q

20,727 görüntüleme • 1 ay önce

The Secret to Real Swing Change? FEEL IT BIG! If you’re struggling to change your golf swing, you’re probably not going far enough. Real improvement happens when you over-exaggerate the feel of the move you’re trying to make and slower. This drill will help lock it in faster
0:11

The Secret to Real Swing Change? FEEL IT BIG! If you’re struggling to change your golf swing, you’re probably not going far enough. Real improvement happens when you over-exaggerate the feel of the move you’re trying to make and slower. This drill will help lock it in faster

Jayson Nickol

12,444 görüntüleme • 3 ay önce

Design Engineering Tip Make hover interactions respond to where the cursor actually comes from. Instead of revealing content with the same animation every time, detect the cursor entry direction and move the image + content accordingly. It makes a simple card feel much more spatial and responsive. const direction = getDirection(event, ref.current); const variants = { top: { y: 20 }, bottom: { y: -20 }, left: { x: 20 }, right: { x: -20 }, };
0:16

Design Engineering Tip Make hover interactions respond to where the cursor actually comes from. Instead of revealing content with the same animation every time, detect the cursor entry direction and move the image + content accordingly. It makes a simple card feel much more spatial and responsive. const direction = getDirection(event, ref.current); const variants = { top: { y: 20 }, bottom: { y: -20 }, left: { x: 20 }, right: { x: -20 }, };

Gabriel

17,606 görüntüleme • 22 gün önce

Peter Laake "shoots the elbow" when trailing from X to get bottom arm leverage and disrupt the dodger's ability to shoot. If you're a pole in the trail: ❌ Don't reach or slap ✅ Shoot the elbow & control the bottom arm This allows us to cover even as dodgers get a step.
0:12

Peter Laake "shoots the elbow" when trailing from X to get bottom arm leverage and disrupt the dodger's ability to shoot. If you're a pole in the trail: ❌ Don't reach or slap ✅ Shoot the elbow & control the bottom arm This allows us to cover even as dodgers get a step.

First Class Defense

18,583 görüntüleme • 1 yıl önce

🚨 LEAKED FOOTAGE FROM O’HARE AIRPORT BAG ROOM — THIS IS WHAT THEY DO TO YOUR LUGGAGE WHEN YOU’RE NOT LOOKING Suitcases getting LAUNCHED full force like garbage. No hesitation. No care. Just straight impact. This is the same bag you trust with everything you packed… getting thrown like this. And airlines still charge you extra for it. This isn’t a mistake. It’s routine. So when your bag shows up cracked open, items missing, or completely destroyed… was it ever “lost”… or just handled like this the entire time? How many times has YOUR bag been treated like this?
0:18

🚨 LEAKED FOOTAGE FROM O’HARE AIRPORT BAG ROOM — THIS IS WHAT THEY DO TO YOUR LUGGAGE WHEN YOU’RE NOT LOOKING Suitcases getting LAUNCHED full force like garbage. No hesitation. No care. Just straight impact. This is the same bag you trust with everything you packed… getting thrown like this. And airlines still charge you extra for it. This isn’t a mistake. It’s routine. So when your bag shows up cracked open, items missing, or completely destroyed… was it ever “lost”… or just handled like this the entire time? How many times has YOUR bag been treated like this?

HustleBitch

2,223,249 görüntüleme • 5 ay önce

"The beginning of time, and consequently the universe — the moment when self-organizing matter spontaneously originated: either it acquired this property that it previously did not possess, or it appeared from the absolute Nothing, if such a thing is possible in principle." - Zafar Mirzo Zafar Mirzo
0:19

"The beginning of time, and consequently the universe — the moment when self-organizing matter spontaneously originated: either it acquired this property that it previously did not possess, or it appeared from the absolute Nothing, if such a thing is possible in principle." - Zafar Mirzo Zafar Mirzo

Zafar Mirzo | Quotes

727,222 görüntüleme • 1 yıl önce

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️
0:19

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️

Ali

16,738 görüntüleme • 3 ay önce

Stop blaming the recipe. The problem is your spice cabinet. You’ve probably never had curry taste the way it should because you’re not cooking with my Madras Curry Blend from Badia. It brings deep flavor, warm spice, and that rich aroma that fills your whole kitchen. Send this to the curry lover in your life. This is the missing piece to their perfect at-home curry. Want it for yourself? Click the link below.
0:12

Stop blaming the recipe. The problem is your spice cabinet. You’ve probably never had curry taste the way it should because you’re not cooking with my Madras Curry Blend from Badia. It brings deep flavor, warm spice, and that rich aroma that fills your whole kitchen. Send this to the curry lover in your life. This is the missing piece to their perfect at-home curry. Want it for yourself? Click the link below.

Andrew Zimmern

11,566 görüntüleme • 8 ay önce

All church buildings have one of these cables running from the top to the bottom...... They're old energy harnessing buildings, this is a grounding wire, if removed the buildings become live again!! Check out your local church for yourself 👍
0:13

All church buildings have one of these cables running from the top to the bottom...... They're old energy harnessing buildings, this is a grounding wire, if removed the buildings become live again!! Check out your local church for yourself 👍

Eyes to See Ears to Hear

64,546 görüntüleme • 10 ay önce

I know you want a design team, and actually the best one - without the hassle of hiring or long-term commitments? That’s exactly what Kree8 is. Just book a Call, and let’s Kree8 it. 👇 We work like your in-house design team. You send in a task - one at a time or two simultaneously (your call), and we get it done. No chasing. No delays. Just clean, high-quality design delivered when you need it.
0:12

I know you want a design team, and actually the best one - without the hassle of hiring or long-term commitments? That’s exactly what Kree8 is. Just book a Call, and let’s Kree8 it. 👇 We work like your in-house design team. You send in a task - one at a time or two simultaneously (your call), and we get it done. No chasing. No delays. Just clean, high-quality design delivered when you need it.

Jay Dwivedi

254,322 görüntüleme • 1 yıl önce

This Final Jeopardy is one of those that separates the people who really know from the ones just taking a shot. Take your time, think it through, and lock it in when you’re ready.
0:18

This Final Jeopardy is one of those that separates the people who really know from the ones just taking a shot. Take your time, think it through, and lock it in when you’re ready.

Restricted Daily

56,879 görüntüleme • 4 ay önce