Veronica Andrei

What won't fit on a resume

A very small example of how much I care about the details: I needed a textarea for a "Note" component one that grows smoothly as you type. Sounds simple. I tried building it the obvious way (measure content, set height in JS), tried multiple packages that claim smooth auto-resize, and every single one had the same problem, on Enter, the text jumps. I couldn't figure out why until I dug into how Chromium handles the caret. When you animate a textarea's height via scroll, the caret briefly leaves the visible area. The browser has a hard rule: the caret must always be visible. So it force-scrolls to bring it back into view, and that force-scroll is what creates the jump. The fix was to stop touching the textarea's height entirely. Instead, I put the textarea and an invisible replica div in the same CSS Grid cell. The replica mirrors the content and grows before the textarea ever overflows, so the browser never needs to force-scroll, and the caret never disappears. No jump. Then I layered a Framer Motion wrapper around the grid cell with a ResizeObserver feeding it height changes, so the expansion animates with spring physics on the outer shell while the textarea inside sizes itself naturally. The textarea doesn't know it's being animated, it just grows. The browser stays happy, the caret stays put, and the height change feels alive. Will someone notice? Maybe not! Am I happy that I fixed this? No regrets!