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

`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 ↓show more

💡 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 unitsshow more

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 →show more

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 }, };show more

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.show more

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;show more

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

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 ✌️show more

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! #MGCometEVshow more

✍️ 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. 🔗show more

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 ↓show more

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 @iamjessashleeshow more

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.show more

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

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

💡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!show more

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

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)show more