Excellent video on using binary search for text fitting! It really highlights the power of algorithms in front-end development. However, I was curious about your decision to use binary search instead of the clamp() function in CSS. Considering clamp() can define minimum and maximum values along with a dynamic "ideal" value using viewport units, wouldn't this be a more performant and less code-intensive approach?
This is very interesting. When working on larger projects, optimization is important and one such ways is to implement efficient algorithms. Will you turn this into a series?
Ok, this is great example. But i would rather use css for that kind of stuff. Since JS work in 1 thread, you can accidentally block it and text will not resize anymore.
How you create your website can your provide the tech stack or can you create a video on how to render this component on live preview and having code snippet parallel to it using frontend only framework like react js
There’s no doubt binary search scales better, but how much faster is it? What if you replaced it with an O(n) algorithm, would it cause noticeable slowdown?
Well I haven't tested much, but I'd bet with a large enough viewport & small enough string! If we're talking a couple hundred loops vs 10-12 loops though, most probably won't see much of a difference. Would be fun to test where that limit is!
Okay I got curious and timed it haha. At 1440px container width & a goal font size of 117px, linear option was averaging ~7-10ms on my machine, log (technically O(1)) was 0-1ms. With a goal font size of 352px, linear was taking ~18ms. Log remains the same. 18ms still pretty dang fast all thing considered, but you can see how this scales poorly as we get to larger viewports etc
@tomisloading I love that you benchmarked it! I'm definitely in favor of knowing some DSA generally, but I wouldn't say this use case specifically convinces me that you *need* it. I think use cases like caching, sets, and maps are more convincing, but to be fair most map and set usage doesn't get me much beyond ergonomics when I have benchmarked. Most of the slowdown I've dealt with on the front end has been back ends I can't control giving a lot of data. Then the data isn't cached or sorting happens before a filter. Another niche case was showing most recently used items on the client (we used a Binary search tree there) I think those could be a good continuation if you decide to make more of these videos :) Post Script: Probably getting a bit in the weeds here, but I can think of lots of cases where libraries need to use DSA. One example coming to mind is angular using Bloom Filters to efficiently search the component tree github.com/angular/angular/blob/c213a4e15a594ff141cf312ad301128e7ed4127c/packages/core/src/render3/di.ts#L103-L140
@tomisloading I love that you benchmarked it! I'm definitely in favor of knowing some DSA generally, but I wouldn't say this use case specifically convinces me that you *need* it. I think use cases like caching, sets, and maps are more convincing, but to be fair most map and set usage doesn't get me much beyond ergonomics when I have benchmarked. Most of the slowdown I've dealt with on the front end has been back ends I can't control giving a lot of data. Then the data isn't cached or sorting happens before a filter. Another niche case was showing most recently used items on the client (we used a Binary search tree there) I think those could be a good continuation if you decide to make more of these videos :) Post Script: Probably getting a bit in the weeds here, but I can think of lots of cases where libraries need to use DSA. One example coming to mind is angular using Bloom Filters to efficiently search the component tree github.com/angular/angular/blob/c213a4e15a594ff141cf312ad301128e7ed4127c/packages/core/src/render3/di.ts#L103-L140
