

Victor
971 posts

@TheFireAndCode
Frontend dev (React & TS) | Accessibility & performance advocate | Christian | Building @paige_devmotion | AI enthusiast | Leveraging grace for impact💻✨










Started playing with pretext over breakfast, and I can confirm, this is really cool


Many don't get why this is cool. I spent a lot of time optimizing web performance. It was one of the main things I did at both lovable and spawn. Here's somewhat simple and thorough explanation: The browser rendering pipeline goes: Style → Layout → Paint → Composite. Layout is the expensive step. It calculates where everything goes on the page. Positions. Sizes. Line breaks. When you read offsetHeight or getBoundingClientRect, you force the browser to run layout. If you wrote to the DOM before that read, it recalculates everything. That's reflow. A lot of layout work is text measurement. Where does this line wrap. How tall is this paragraph. How wide is this word. The browser is the only thing that can answer these questions. There's no alternative. You have to go through the DOM. This is the root cause behind a lot of performance problems people deal with daily. Virtual scrolling exists because you can't know element heights without rendering them first. CSS contain exists to tell the browser "don't recalculate layout outside this box." Batching DOM reads and writes exists because mixing them causes layout thrashing. Text measurement is a big part of all of these. It's slow and locked inside the browser. You see it in real apps too. Slack estimates message heights for virtual scrolling. When the estimate is wrong the scroll jumps. You've seen this. Google Docs recalculates every paragraph below your cursor when a line wraps. Every keystroke. This is why it gets slow on long documents. AI chat apps get janky when streaming because each new token can cause a line wrap which changes the height which causes the page to jump. Same problem every time. Need text measurements. Only way to get them is the DOM. DOM is slow. --- Over the years people have moved pieces of UI work out of the browser's layout engine. Rendering moved to Canvas and WebGL. Scrolling moved to custom implementations with transforms. Positioning moved to JavaScript-calculated coordinates. Interaction handling was always just JS. But text was the one thing you couldn't move out. You always had to go back to the DOM to ask "how does this text wrap." Every other piece had an alternative. Text didn't. --- Enter Pretext. Pure TypeScript text measurement and line wrapping. No DOM. No reflow. You give it text, a font, and a width. It returns exact line breaks, widths, heights. Just a function call. Pure math. Text measurement was the last piece of layout with no alternative outside the DOM. Now it does.

CSS Tip 📖 Use CSS shape-outside to wrap text around shapes .column--left .shape { float: right; shape-outside: circle(100px at 100% 50%)); }




Better Auth v1.5 new auth cli: `npx auth init` | upgrade | migrate | generate Electron Integration, Auth CLI, OAuth 2.1 Provider plugin, i18n support, dynamic base URL, CLI init wizard, seat-based billing, SAML Single Logout, test utilities, secret key rotation, and more!