This new JavaScript algorithm made CSS useless

Key Takeaways

This new JavaScript algorithm broke the internet in the past day. So, this guy on Twitter posted yesterday on Twitter about him inventing and coming up with a new algorithm that allows fast, accurate, and comprehensive text measurement. You're probably wondering, what does that even mean? I mean, isn't that like what is CSS for? Actually, you're right. CSS allows you to do stuff like that. If you see the video demo in here that guy shared, it's basically what CSS is meant for, just like recalculating and having the right position and text and everything. But, when you have something as complicated as this demo put to CSS, it's not going to be super performance because CSS does a lot of heavy lifting and there's something called reflow, which is browser reflow, which actually calculates every element on the browser whenever another element changes. For example, in here because there are hundreds of changes of text layout and everything, each change will trigger a thousand other changes, which can make the browser super heavy and super slow at rendering this. And that's what this algorithm is for. So, the new algorithm in here is open source called Pretext. You can go to GitHub, Pretext in here. In one single day, it got more than 10,000 stars, which is absolutely phenomenal. And it's pretty simple. It's actually made using TypeScript with Cloud, obviously, and it the entire algorithm is just TypeScript and it's just arithmetics and mathematics. And that's actually what makes it super special and super performance because it just relies on pure math, pure calculations, and pure arithmetics to make sure, you know, it calculates the layouts and the positions of every single element and especially the text. So, it allows you to wrap text, it allows you to put objects inside of text and the text will wrap around them. It allows you a lot of cool stuff. And people on Twitter, as always, they decided to create crazy with this. For example, this guy five coded a Doom alternative, an actual video game in here using like text and ASCII text using the Pretext in here. So, it clearly is super performing like like they're going through walls, they're killing zombies. It is just phenomenal like seeing something like this. And it was all five coded using Cloud or something. Or maybe this other guy created this awesome ripple effect. So, he turned text into an actual sea or water and it put this really nice like water effects that, you know, ripple effects or kind of like waves. Oh, yeah, let's not forget about this other guy that said, oh, your physics textbook is not boring anymore because now you can see that in action. You can have a rope, you can just like have it go through text. As you see in here, the text is actually going insane and you can clearly notice how fast and performing that is. Like, it literally has zero lag. And there are so many texts, so many recalculations going on in here like as the rope is moving through different parts of the text, different paragraphs and lines. And there's a huge amount of recalculations and responsiveness going on. And that's what all what Pretext is actually about. And this is basically what Pretext is powering. Oh, yeah, somebody on the internet here made this game in here using Pretext. As you see in here, it goes through text and it's super performing, super fun to play as well. And I mean, if you build this using a DOM, it would be super laggy like the DOM APIs without the Pretext algorithm and and math calculations. Uh yeah, so that's actually pretty pretty cool to look at. And to showcase that even more, the guy put plethora demos in here and examples. For example, there's bubbles in here, which is message bubbles. This one uses the CSS fit content, which basically is, you know, the DOM. And this one uses Pretext and um it's it's phenomenal. So, if you look at this, right now they look kind of the same, but if you notice on the CSS fit content in here, this it's like an empty space in here because it doesn't know how to calculate properly. But, on the other side in here, there isn't. There's no empty space. Uh same thing goes for here. As you see in here, it just wraps it up really well. Like, everything is perfect. If we move this cursor to make the container width larger, as you see in here, it just moves flawlessly. If you make it smaller, that's actually where things get super interesting. So, if you notice um like on the CSS side in here, there are a lot of like space, empty space in here, which is, you know, if you if you look at the number of wasted pixels, it's like 7K wasted pixels. But, for example, for Pretext in here, there's literally zero wasted pixels because it is perfect calculations going on on the JavaScript side using Pretext, using caching and everything. Like, no reflow is happening, no layout calculations happening from the CSS or browser side. So, that's basically why this is more performance and also more accurate. Like, if you ever wondered why this ugly space in here happens on your like bubble chat messages, you probably got your answer, you probably got your solutions in here. So, if you're wondering about how to install it and how to use the APIs, it is very very straightforward. You can just use install using this command. It's available on NPM and the API is literally just two lines of code to get started with it. first import the layout and prepare methods or functions from it. First one, you call the prepare on the text that you want to actually calculate later on. This will pre basically pretty much prepare the text and create caching for it to make it as performing as possible. And later, if you want to know exactly what is the line count or the height of the text in here, which is basically what, you know, we would do using the DOM APIs like the method of get bounding client rect method, which is very expensive from a DOM perspective. But, for this one, it's pretty simple and pretty easy to use. So, you just call layout in here, you pass it a prepared text that you already prepared. That's returned from the prepare method, obviously. You pass the text width and the text font size in here. And this will return the line count and the height for you. So, prepare in here is actually basically covered of like prepare does one-time work, normalizes white space, segments the text, applies glue rules, measures the segments with canvas. So, it uses the canvas API and returns an opaque handler. Layout is the cheap hot path after that, pure arithmetic over cached width. So, it uses a lot of cache and it's pretty fast as well. In-memory cache. This can also be used with text area, with text like, you know, if you you want to support tab and new lines and stuff like that, that could be supported as well. Or in case you want more control in this using the context APIs, you could literally just do that. Like, prepare with segments and you can segment your text as however you want. Uh you can render that to the canvas as well. You can have, you know, ranges. So, there are plenty of things that you could do with this. The API is pretty straightforward and I actually was playing around with it. I passed this documentation, this readme documentation to my Cloud code in the terminal and it built me really awesome stuff with it. So, I was just playing around with it and it's pretty simple. Oh, yeah. And the fun fact is you can render [clears throat] to the canvas, SVG, WebGL, and eventually, which is coming soon, server-side. I'm more excited about the server-side one because this is going to be a banger, especially for like, you know, stuff like React, React server components and stuff like that. Uh but still, I mean, rendering to the canvas and SVG is really cool as well as like the WebGL stuff. Oh, yeah, let's not forget about how responsive it would be. So, to put the new algorithm into the test, I've created the same version in here. As you see in here, with like a magazine layout designer, which is basically has like, you know, magazine images and like cool stuff in here that are basically being automated and auto animated through text to see how text reacts into it and how fluid it is. And I built this like the exact same thing using first the DOM only and Pretext only in here just to compare how fast each one versus the other. So, from the first glance in here, if you look into it, you can tell by the matrices are being rendered right over here that the DOM one is going absolutely bananas. It's not doing really well. It takes almost like 37 or 35 milliseconds per single layout. And what I mean by a single layout is, as you see in here, like when when things move in here and it has to recalculate, I mean, there are hundreds of movements in here, if not thousands. So, for every single move, it takes around 37 milliseconds to do that move, to calculate it per layout. That's what it means. Now, for a 60 millisecond budget, and that's like how long does a one frame take to render, is how the browser it takes like 250 or 220% of that, which is huge, hugely heavy lifting. That's not good at all. If you notice in here, it only does 30 layouts maximum per second. That's like, you know, number of layouts you could do per 60 frames per second if you take that. But, if you don't understand all that gibberish, if you look at this one, it's pretty bad. It clearly is in here like the FPS on the top is like 27 frames per second. That is absolutely bananas and we don't have anything special in here. I mean, if you compare this, if you like look at this, if you just go ahead and switch to the Pretext only, click on it, the Pretext only runs like 60 frames or 75 frames per second. The layout per per millisecond in here takes like per layout and it takes 0% literally 0% like no heavy lifting, no side effects on the 60 millisecond budget. And it literally does like 17 to 18,000 layouts per second. As you see in here right now, we're like almost 20,000 layouts total rendered and it just keeps growing really well. Uh if you also look into this like how this it also seems pretty flawless. I don't know if it comes through the YouTube video for you guys to see it, but it is pretty flawless for me because I can clearly see how these are like moving through. If I just go ahead and animate this, as you see in here, it's super duper flawless. I feel no laginess whatsoever. It just recalculates. And that's what, you know, the power of the new algorithm does. It's it's absolutely phenomenal. But, a lot of people are not understanding this. I've seen this on Twitter as well. They're just saying, oh, this is just, you know, you could do that using the browser APIs and whatever. I mean, you could. You can clearly see how freaking bad that is. It's it's just crazy and it's like 22 FPS. But, imagine this only has like three elements in here are going through, right? But, imagine if I just stress test this and I can add like five more. So, I click on the stress test button, like, you notice in here, the frames per second are dropping really hard. So, adding a bunch of stuff in here, as you see, it's it feels like it's a laggy thing. If I do another stress test, then it drops to 18. If I just keep doing it, I don't know. I want to see like how fast or how far I can push it. I don't know if you can probably see that. I think you could see how laggy it started to be to recalculate. I can't even move this really well. It is crazy laggy. I mean, if I do it one more, I think it's just going to go down to like crazy FPS and it's becoming unusable. It it has become unusable now. Um you can clearly see in here, it is crazy. But, wait for this. If I like move and change to my Pretext only demo, uh it it's it's crazy in here like the number of stuff. So, if we switch now to Pretext only and I go ahead and stress test it stress test it. I think I did like five or six stress tests for our DOM. So, I'm going to do one, two, three, four, five, six. 7, 8. You clearly see now it just drops a little bit in here cuz it's crazy. But, you basically got the point. That's actually what I mean. It like everything runs flawlessly. If you just go through text in here, there are a lot of animations, thousands of recalculations in here happening per second. You can clearly see like how many layouts are happening per second. It's like almost 20,000 and it's still pretty flawless when it comes to how long or how much does it take per layout. Oh, yeah. And if even if I turn canvas rendering for this, you notice in here it's like 60 frames per second. If I turn on canvas rendering, it's going to flip it up to 75 frames per second cuz obviously canvas rendering is like, you know, kind of WebGL and it's pretty it's pretty optimized for specific browser needs. So, that means I can stress test it even further and I can push it to the absolute limit. As you see in here, I'm doing a lot of stress testing and now it kind of like starts to bunch because there's like millions maybe of recalculations happening here like around everything, but you basically got the point of what I'm trying to say. And so many people on Twitter I noticed lately they're just like hating on this new pretext algorithm and saying, "Oh, this is not anything. It's it's just basic thing and it's super simple and I could like fight code this in like, you know, an hour or something like that." Like this guy said, "Oh, so many slob influences hailing this as a revolution when it's just a wrapper around the canvas elements existing measure text function." Like the existing elements function it literally cannot do that. This is not what the some new paradigm paradigm basic measurement is many years old. Wow, okay, that's crazy. But, I think this dude did not actually read the source code on GitHub. If he did, he would have known how cool it is to actually build something like this. And there's this guy who built a Parcel JS and he's an engineer at Adobe. I don't know if you're familiar with Parcel JS or not, but it's just basically another bundler that was revolutionary at its time and it still is and it's still pretty awesome. And he he was like, "Oh, last I checked, canvas didn't support wrapping text. That is by far the most difficult part of this. It is not that simple at all." And the guy who just kept debating I mean, this is just like one example of those threads. There are plenty of threads like of people who are backlashing and hating on this new algorithm because it got so much attention. So many people loved it. It got almost 50 million views, which is absolutely phenomenal in one single day for like, you know, tech-based thing like for a JavaScript-based thing, a browser-based thing like super duper niche. But, it tells you how big this algorithm is. It's it's not just a hype. I'm telling you it is absolutely phenomenal. And I'm pretty sure like cuz that guy used AI, they could have developed like this in a record time like super fast. It could have taken him years without Claude or without agent tickler or without AI. So, yeah, let me know you guys what you think about this. Let me know how you use a pretext, how cool things that What what is the cool things you're going to build with this? Happy to like take a look. But, anyway guys, hope to see you all on the next one.