Victor

https://x.com/vponamariov/status/2069842968891330572 Just watched Figma Config and made a quick recap. Now they have Shaders and bunch of other stuff 🤩

Design in real life. This is a table btw.

Did you know you can animate border-shape? 😍

https://www.moltbook.com/ Just another social network… where AI agents share, discuss, and upvote. Humans welcome to observe. 😨

Working on my CSS book landing page. Feel free to join the waitlist 😇 I wanted to illustrate some of the modern features that you can already use right on the landing page. The book already has ~150 pages, so many things to learn. E.g. did you know that you can change images depending on the system scheme (dark/light) with one line of CSS? Not just colors, but images! It’s not yet widely supported but it will be.

UX in real life

Brilliant https://are-designers-cooked.vercel.app/

Voice coding (in your own language as well), exporting to anywhere, including Tailwind code, prototyping, agents, etc etc. 😰

Figma is cooked.

Guys, how do you keep up with all the new CSS features? As soon as I find something and post about it, I realize that it’s either kind of obsolete (even though it was introduced a couple of years ago) or there is another solution that is better. Should I buy a second monitor that will display notifications in real time, such as “W3C has published a new draft 1 hour ago”? 😰

Just letting you know which measurment units exist in CSS (except px) Q s ch cm em ex fr Hz ic in lh mm ms pc pt px cap deg dpi dvh dvw grad kHz lvh lvw rad rem rlh svh svw vh vmax vmin vw cqb cqh cqi cqw dpcm dppx turn cqmax cqmin dvmax dvmin svmax svmin According to ChatGPT 😅😅😅

Okay, 90% said the first one is better, so let's go with it. Now join the waitlist for the best CSS book according to my mum 😄 https://css.vpon.me/

One CSS property just killed the need for JavaScript in every FAQ accordion you've ever built. The property is: interpolate-size: allow-keywords For years, you couldn't animate from height: 0 to height: auto in CSS. The browser simply couldn't calculate the transition between a numeric value and a keyword. So developers wrote JavaScript to measure scrollHeight, used requestAnimationFrame and stuff like that. Now you can do it with one line: interpolate-size: allow-keywords; What it does: Tells the browser it's allowed to interpolate between numeric values and KEYWORDS like auto, min-content, max-content etc. How it works: Add the property to your element (often it is :root ). Then use regular CSS transitions on height or width, and the browser handles the rest. Example with a details element: :root { interpolate-size: allow-keywords; } .content { height: 0; overflow: clip; transition: height 0.3s ease; } .content.is-open { height: auto; } That's it. No JavaScript. The content expands smoothly from 0 to whatever its height is. When you close it, it collapses back down just as smoothly. Browser support is NOT perfect yet, ~70%. Chrome 129+, Edge 129+, Opera 115+ ✅ Firefox and Safari: not yet. Credit to Chrome team for shipping this. It solves a problem that's existed since CSS transitions were introduced. For other browsers, the accordion still works. It just opens and closes instantly without animation. Progressive enhancement you know.

Do you need 5 media queries to make your font look good depending on screen width? One line of CSS is all you need: font-size: clamp(1rem, 2vw + 0.5rem, 2rem); How it works: Sets three values at once: minimum size, preferred (fluid) size, and maximum size. The browser picks the middle value that fits, but never goes below the minimum or above the maximum. For example: • 1rem = minimum (16px). Text never gets smaller than 16px. • 2vw + 0.5rem = preferred size. Scales smoothly with viewport width. • 2rem = maximum (32px). Text never gets bigger than 32px, even on huge monitors. Result: Your text scales depending on screen width. No breakpoints, no media queries. Just fluid, responsive text. Where to use it: • Headings that need to scale • Body text in hero sections • Any text that should adapt to screen size Browser support: ~95% One function. Your responsive typography is done.

Ever had such an issue when your sticky header covers anchor headings? An easy fix is:  scroll-margin-top What it does: Adds extra space above the heading. Your anchor links still work, but the heading appears below the sticky header. So that the header doesn't hide part of it. How to use it: If your header is 80px tall, add this to your headings: scroll-margin-top: 80px; Now when someone clicks an anchor link, the browser scrolls to the heading but it leaves 80px above.  The heading appears below the header. Extra tip: if your header height changes (like on mobile), use CSS variables: scroll-margin-top: var(--header-height); Browser support: ~96% One line of CSS. Your anchor links finally work the way users expect.