Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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; }

gabriell_lab's profile picture

Gabriel

8,623 subscribers

86,969 Aufrufe • vor 3 Monaten •via X (Twitter)

Wissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

💡 2 CSS tips for textareas: 1️⃣ Use `field-sizing: content` to make the textarea auto-resize to its content 2️⃣ Use `lh` units to set the height in the font's computed line-height units
0:13

💡 2 CSS tips for textareas: 1️⃣ Use `field-sizing: content` to make the textarea auto-resize to its content 2️⃣ Use `lh` units to set the height in the font's computed line-height units

bolt.new

117,159 Aufrufe • vor 2 Jahren

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

18,508 Aufrufe • vor 1 Monat

💡design engineering tip: if you are using toasts, don't just create new toasts and stack every toast on each other. it confuses users, and creates a lot of visual noice. 📷 instead, use a cycling animation (a single animation won't work due to the browsers nature) with a slight bounce to visualize, that the task is already completed.
0:18

💡design engineering tip: if you are using toasts, don't just create new toasts and stack every toast on each other. it confuses users, and creates a lot of visual noice. 📷 instead, use a cycling animation (a single animation won't work due to the browsers nature) with a slight bounce to visualize, that the task is already completed.

nick

37,298 Aufrufe • vor 1 Monat

Introducing the MG Comet EV, the no-nonsense car that keeps it real. The car’s latest tech keeps you connected with your squad and has all the space for your fam. Experience the plush interiors, latest tech and futuristic design of the Comet EV! Bookings open now! #MGCometEV
0:20

Introducing the MG Comet EV, the no-nonsense car that keeps it real. The car’s latest tech keeps you connected with your squad and has all the space for your fam. Experience the plush interiors, latest tech and futuristic design of the Comet EV! Bookings open now! #MGCometEV

Morris Garages India

4,412,439 Aufrufe • vor 3 Jahren

1.Exclusive Content: Subscribers often get access to exclusive posts, stories, and behind-the-scenes content that isn’t available to non-subscribers. This could include early access to new features, special events, or content tailored specifically for paying members. Interaction with Creators: Many social platforms, like Lemon Social, may offer subscribers the chance to engage more personally with creators through Q&A sessions, private messages, or even shoutouts, fostering a stronger community. 3.Ad-Free Experience: Subscription models often allow users to enjoy content without the interruption of ads, creating a more seamless and enjoyable browsing experience. Say hello to @Tawnnii and @iamjessashlee
0:13

1.Exclusive Content: Subscribers often get access to exclusive posts, stories, and behind-the-scenes content that isn’t available to non-subscribers. This could include early access to new features, special events, or content tailored specifically for paying members. Interaction with Creators: Many social platforms, like Lemon Social, may offer subscribers the chance to engage more personally with creators through Q&A sessions, private messages, or even shoutouts, fostering a stronger community. 3.Ad-Free Experience: Subscription models often allow users to enjoy content without the interruption of ads, creating a more seamless and enjoyable browsing experience. Say hello to @Tawnnii and @iamjessashlee

Lemon Social Official

21,868 Aufrufe • vor 2 Jahren

Replit just launched Replit Design. Designing an app is one of the hardest parts, and AI often creates designs that all look the same. I like that Replit Design works like a design partner, helping you create designs that feel more unique and fit your app better. Now anyone can be a designer, not just people with design experience.
0:12

Replit just launched Replit Design. Designing an app is one of the hardest parts, and AI often creates designs that all look the same. I like that Replit Design works like a design partner, helping you create designs that feel more unique and fit your app better. Now anyone can be a designer, not just people with design experience.

Markandey Sharma

52,463 Aufrufe • vor 1 Monat

Design Engineering Tip: Most UI animations are built for a single uninterrupted transition. Real users might reverse direction before the animation finishes. Use a spring transition that preserves the element’s current velocity instead of restarting from zero. This keeps rapid hover, press, and state changes smooth and responsive. transition={{ type: "spring", stiffness: 520, damping: 38, }}
0:11

Design Engineering Tip: Most UI animations are built for a single uninterrupted transition. Real users might reverse direction before the animation finishes. Use a spring transition that preserves the element’s current velocity instead of restarting from zero. This keeps rapid hover, press, and state changes smooth and responsive. transition={{ type: "spring", stiffness: 520, damping: 38, }}

Gabriel

66,427 Aufrufe • vor 2 Monaten

Jooyeon to appear in a content featuring the online game League of Legends called “LoL 캠퍼스 (LoL Campus)”. They are together with LoL e-sport gamers and seem to be letting them experience everything about LoL gaming. #XdinaryHeroes #엑스디너리히어로즈
0:13

Jooyeon to appear in a content featuring the online game League of Legends called “LoL 캠퍼스 (LoL Campus)”. They are together with LoL e-sport gamers and seem to be letting them experience everything about LoL gaming. #XdinaryHeroes #엑스디너리히어로즈

쭈유

22,956 Aufrufe • vor 1 Jahr

Today we’re releasing an early version of a new feature called Tip Cards. We built Tip Cards after seeing people all over the world tipping each other with Cash Links for their contributions online eg. posting good content, responding to questions, moderating group chats, and many others. Tip Cards simplify this experience by enabling every Code user to create their own personalized Tip Card and accept tips from anyone in the world. To create your Tip Card, simply connect your Twitter/X account in the Code app and your personalized Tip Card will be instantly generated for you. You can then share it as a link or get someone to scan it. (Video below of how to create your Tip Card) We’re rolling out this early version of Tip Cards to get feedback on this new payment type and test the Twitter APIs at scale. We plan to add more features to the tipping experience as we go, so your feedback is appreciated. Please try it out and let us know what you think. If you post your Tip Card and tag Code we’ll send you a tip!
0:17

Today we’re releasing an early version of a new feature called Tip Cards. We built Tip Cards after seeing people all over the world tipping each other with Cash Links for their contributions online eg. posting good content, responding to questions, moderating group chats, and many others. Tip Cards simplify this experience by enabling every Code user to create their own personalized Tip Card and accept tips from anyone in the world. To create your Tip Card, simply connect your Twitter/X account in the Code app and your personalized Tip Card will be instantly generated for you. You can then share it as a link or get someone to scan it. (Video below of how to create your Tip Card) We’re rolling out this early version of Tip Cards to get feedback on this new payment type and test the Twitter APIs at scale. We plan to add more features to the tipping experience as we go, so your feedback is appreciated. Please try it out and let us know what you think. If you post your Tip Card and tag Code we’ll send you a tip!

Code

68,537 Aufrufe • vor 2 Jahren

I’ve seen a handful of apps using progressive blurs to transition content off-screen or behind elements and they often end up looking messy and making the exiting content a focal point. One way you can avoid this and still make a nice transition is to reduce the max blur radius, and combine it with a gradient fade-out.
0:19

I’ve seen a handful of apps using progressive blurs to transition content off-screen or behind elements and they often end up looking messy and making the exiting content a focal point. One way you can avoid this and still make a nice transition is to reduce the max blur radius, and combine it with a gradient fade-out.

Gavin Nelson

116,839 Aufrufe • vor 1 Jahr

A UX pattern I like: inline dialogs. Instead of blurring the whole background, just push the main content out of focus and replace it with the dialog. Navigation and header stay accessible, and it feels less obtrusive than a standard modal.
0:11

A UX pattern I like: inline dialogs. Instead of blurring the whole background, just push the main content out of focus and replace it with the dialog. Navigation and header stay accessible, and it feels less obtrusive than a standard modal.

Sebastiano Guerriero

51,571 Aufrufe • vor 6 Monaten

HUGE NEWS! We've raised $8.6 Million in Series A Funding! So what does this mean?👇 1️⃣We can make our current platform even easier and faster.🚀 2️⃣We can invest in new products to make your content better.💻 3️⃣We can grow the team that delivers you the best customer experience👥
0:14

HUGE NEWS! We've raised $8.6 Million in Series A Funding! So what does this mean?👇 1️⃣We can make our current platform even easier and faster.🚀 2️⃣We can invest in new products to make your content better.💻 3️⃣We can grow the team that delivers you the best customer experience👥

Gipper

16,252 Aufrufe • vor 3 Jahren

HiveMind is a superintelligent network in which a central AI (MIND) orchestrates a swarm of uniquely coded Minds that drive mass data ingestion and limitless content creation. For decades, our approach has been to create content first, then analyze it into data afterwards to understand what worked. This was always backwards - analyzing the aftermath rather than engineering the success from the start. Traditional Flow: Content → Data Analysis → Insights Content isn't one-size-fits-all - a cooking show that captivates a senior audience on YouTube might bore a teenager who craves quick, dynamic experiences. The challenge isn't just creating content; it's creating the right content for the right audience. We need to change this. This is where HiveMind's specialized agents transform the landscape. Each agent, while connected to the central MIND, excels in its unique domain. One agent masters the art of children's educational content, while another crafts compelling cooking narratives. Another might specialize in rapid-fire social content that resonates with Gen Z. Through HiveMind, every piece of content generated becomes new data that teaches the system to create even better content. The system gets smarter with every cycle, understanding at an increasingly sophisticated level what makes content effective and engaging. But the true power lies in the feedback loop. Every interaction, every engagement, flows back to MIND, enabling each agent to evolve and refine its approach. This isn't just content creation - it's content evolution. As audiences engage, agents learn, adapt, and improve, making each new piece more effective than the last. In essence, we're not just building content creators; we're developing specialized digital artists who understand their audience intimately and grow smarter with every creation. You can think of it this way: Data → Pattern Recognition → Optimized Content → Engagement Data → Even Better Content Tzar
0:17

HiveMind is a superintelligent network in which a central AI (MIND) orchestrates a swarm of uniquely coded Minds that drive mass data ingestion and limitless content creation. For decades, our approach has been to create content first, then analyze it into data afterwards to understand what worked. This was always backwards - analyzing the aftermath rather than engineering the success from the start. Traditional Flow: Content → Data Analysis → Insights Content isn't one-size-fits-all - a cooking show that captivates a senior audience on YouTube might bore a teenager who craves quick, dynamic experiences. The challenge isn't just creating content; it's creating the right content for the right audience. We need to change this. This is where HiveMind's specialized agents transform the landscape. Each agent, while connected to the central MIND, excels in its unique domain. One agent masters the art of children's educational content, while another crafts compelling cooking narratives. Another might specialize in rapid-fire social content that resonates with Gen Z. Through HiveMind, every piece of content generated becomes new data that teaches the system to create even better content. The system gets smarter with every cycle, understanding at an increasingly sophisticated level what makes content effective and engaging. But the true power lies in the feedback loop. Every interaction, every engagement, flows back to MIND, enabling each agent to evolve and refine its approach. This isn't just content creation - it's content evolution. As audiences engage, agents learn, adapt, and improve, making each new piece more effective than the last. In essence, we're not just building content creators; we're developing specialized digital artists who understand their audience intimately and grow smarter with every creation. You can think of it this way: Data → Pattern Recognition → Optimized Content → Engagement Data → Even Better Content Tzar

Tzar

26,190 Aufrufe • vor 1 Jahr

EXCITING NEWS 🎉 Do you see the second line??? 🥹 I'm beyond excited and happy to be pregnant again 🤰🏻 I can't wait to experience the amazing journey of pregnancy for a second time ❤️ I'll be sure to bring you along with me by posting lots of new content and updates as I grow!
0:18

EXCITING NEWS 🎉 Do you see the second line??? 🥹 I'm beyond excited and happy to be pregnant again 🤰🏻 I can't wait to experience the amazing journey of pregnancy for a second time ❤️ I'll be sure to bring you along with me by posting lots of new content and updates as I grow!

Jade Love

84,368 Aufrufe • vor 1 Jahr

I don't know what's worse: •Letting the gas nozzle fall out and spill everywhere •Laughing hysterically about it instead of shutting it off immediately •Recording the whole thing •Then POSTING it online like it's content Oh, and just a friendly reminder: these are the same people voting in our elections. 😬⛽
0:16

I don't know what's worse: •Letting the gas nozzle fall out and spill everywhere •Laughing hysterically about it instead of shutting it off immediately •Recording the whole thing •Then POSTING it online like it's content Oh, and just a friendly reminder: these are the same people voting in our elections. 😬⛽

𝐃𝐔𝐓𝐂𝐇

16,337 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 2 Monaten

It was a new experience with this cute rubber twink! 🥵💦 Stay tuned for some hot content on my OF and make sure to subscribe now! 😋 Link in bio! ☑️
0:15

Sensitive content

It was a new experience with this cute rubber twink! 🥵💦 Stay tuned for some hot content on my OF and make sure to subscribe now! 😋 Link in bio! ☑️

💪🏻 Luca Twunk (32 K)

40,498 Aufrufe • vor 1 Jahr

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️
0:13

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️

Ali

67,689 Aufrufe • vor 4 Monaten