Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

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

12,926 subscribers

87,629 görüntüleme • 5 ay önce •via X (Twitter)

Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

`field-sizing: content` lets you autosize textareas in css but what if you want the height to transition instead of snap? wrap it and sync the wrapper height with a ResizeObserver ↓

`field-sizing: content` lets you autosize textareas in css but what if you want the height to transition instead of snap? wrap it and sync the wrapper height with a ResizeObserver ↓

jhey ʕ•ᴥ•ʔ

42,058 görüntüleme • 1 ay önce

💡 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

💡 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,264 görüntüleme • 2 yıl önce

Skip writing complex JavaScript to make form elements like textarea fit user input 🍝 The field-sizing CSS property is a newly available Baseline feature that lets form controls naturally adjust their sizing to fit their contents. Find the documentation here →

Skip writing complex JavaScript to make form elements like textarea fit user input 🍝 The field-sizing CSS property is a newly available Baseline feature that lets form controls naturally adjust their sizing to fit their contents. Find the documentation here →

Chrome for Developers

16,453 görüntüleme • 2 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 }, };

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

19,660 görüntüleme • 2 ay önce

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.

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.

Gabriel

30,109 görüntüleme • 3 ay önce

Design Engineering Tip: One CSS property is responsible for most ugly expand animations. It’s height: auto. Replace it with: grid-template-rows: 0fr → 1fr;

Design Engineering Tip: One CSS property is responsible for most ugly expand animations. It’s height: auto. Replace it with: grid-template-rows: 0fr → 1fr;

Gabriel

111,907 görüntüleme • 4 ay önce

💡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.

💡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 görüntüleme • 3 ay önce

Super happy with our new navigation. But the trickiest part of this was Search. We had our global search, and then nested content search inside each list view. It all felt messy and confusing to know which one to reach for. We landed on this unified view. With a new mini launcher design. And easy content filtering. Hope you like it ✌️

Super happy with our new navigation. But the trickiest part of this was Search. We had our global search, and then nested content search inside each list view. It all felt messy and confusing to know which one to reach for. We landed on this unified view. With a new mini launcher design. And easy content filtering. Hope you like it ✌️

Jordan Amblin

14,366 görüntüleme • 1 ay önce

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

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,443 görüntüleme • 3 yıl önce

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗

Ahmad Shadeed

29,912 görüntüleme • 5 ay önce

The Next.js site has a new look! We've redesigned the homepage, /docs, /blog, and more, with a consistent design that keeps the focus on the content. A few highlights ↓

The Next.js site has a new look! We've redesigned the homepage, /docs, /blog, and more, with a consistent design that keeps the focus on the content. A few highlights ↓

Next.js

62,061 görüntüleme • 19 gün önce

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

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 görüntüleme • 2 yıl önce

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.

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 görüntüleme • 3 ay önce

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

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

31,433 görüntüleme • 2 ay önce

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

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

67,883 görüntüleme • 3 ay önce

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,924 görüntüleme • 1 yıl önce

introducing a new way to build with lovable instead of writing prompts, just draw directly on your app everyone is now a frontend developer

introducing a new way to build with lovable instead of writing prompts, just draw directly on your app everyone is now a frontend developer

emil

105,912 görüntüleme • 4 ay önce

Probably the most annoying thing for me in animations / scrollable content is how easy it is to just clip the content. Even if there is no border around to clip it with, adding masks is a one-liner in css now. (slowed down transition)

Probably the most annoying thing for me in animations / scrollable content is how easy it is to just clip the content. Even if there is no border around to clip it with, adding masks is a one-liner in css now. (slowed down transition)

Dima Belyaev

27,653 görüntüleme • 10 ay önce