Clamp & Interpolate

Monday. Monday. Monday.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming again hot. Here is Wes, Barracuda, Boss, and Scott

CSD. Welcome to Syntax. On this Monday, hasty treat. We're gonna be talking about 2 concepts and functions it. That will change how you think about numbers in programming in general and might illuminate some JavaScript and CSS topics for you. I'm talking about clamping and interpolating numbers. My name is Scott Talinsky. I'm a developer from Denver, Colorado, and with me as always is Wes Bos.

It. Hey, everybody.

Hey, Wes. And with us today, in addition to West Boss, is 2 amazing sponsors, Sentry and Payments Hub. Sentry is the perfect place to see all of your errors and exceptions happening. It allows you to gain total visibility into what's going on in your application, whether it be your performance metrics, whether it be how buggy your code is or whether it's how how good that new release was you just did. You just pushed out a new release, has no bugs. It. You can sleep well tonight. So check out century@century.i0.

You can use the coupon code at tasty treat, all lowercase, All one word, and you'll get 2 months for free of their amazing error and exception handling tracking tools where you can make sure that your application's always running it as smooth as possible. We're also sponsored by PaymentsHub.

PaymentsHub is an easy to use API and SDK that allows you to create ecommerce websites. You can make point of sale application and launch fully featured. Get this Omnichannel payment solutions. What does that mean? Like, if you build an app where people are, like, maybe, like, Shopify would be an example.

You build an app where the people are building stores on your app and, like, you need to onboard those people. They have to go through All the bank setups and getting it cleared by all the banks and all that stuff. They provide APIs for doing that. So of course, you can accept payments And it looks really good. They've got lots of examples using it straight up with JavaScript.

You can get it up and running in as little as us 90 minutes, which just includes underwriting all of your merchants in your API. You're gonna wanna check it out. It's at developer.paymentshub.comforward/syntax.

You can see their integrated payment processing APIs and learn about how you onboard and underwrite merchants.

Check it out. Thank you, Payments Hub, for sponsoring.

All right. Clamp and interpolate.

This is kind of interesting because every now and then I find myself Being a programmer and not having a traditional computer science background, I find myself hitting like These things like the other day, I was trying to figure out how do you get consistently random numbers in in JavaScript. And you sort of hit these things where, like, oh, if I it. Computer science, I probably would understand what this thing is even called.

So Scott's gonna come to the save the day today with

Explaining what clamp and interpolate is. Yeah. These are these are actually super handy. And me, personally, I noticed these all the time in a couple of areas, especially animations in three d because you're working with a lot of numbers, and you're trying to get numbers to play nice in a way where you want them to be what you want them to be. You want to control these numbers. And me, personally, I hit this because I was doing a fun animation when you scroll.

Okay. So the animation was I had 1 thing animating horizontally left and another thing animating horizontally right.

I think I just did those inverse when I did my hand animations here for Wes, but 11 left and 1 right, and they started animating when your mouse Cursor entered a container.

So you scroll down. It enters a container. And as you scroll down through that container, the animation should go to 0 to 100% by the time that container is Complete.

That container's height is not fixed. It's not 0 to 100. So what I needed to do was to say, alright. If the the scroll value is between, whatever, 2000 to 2,785 or whatever, I want that to somehow Control those numbers to be between 0 and 100% of the animation, and then interpolate those into a left and right values for my animation. So I I basically was was having to do this control, and I I started to look into it. And I have used a clamp before. I have used interpolate before, but I never really sat down and was like, hey. You know what I need is a clamp and an interpolate. A lot of times what I'm doing is just following tutorials that Have done these things already for me. So I I dove into it quite a bit, and I found some interesting things, especially around interpolate. Clamp is a little bit more simple. So clamp, What is clamp? We now have clamp in CSS. Clamp in JavaScript, super easy to do. It basically locks your number in between the two numbers. You have a minimum and a maximum, and you're locking it in between two numbers. So let's say you have, the a good example would be you want to clamp Between 0 and 100, and then I give you a negative 100, the clamp function will return 0.

If I give you a 0, the clamp function will turn 0 because that is between 0 and 100. If I give you 100, it will return 100. If I give you 1,000, It will give you 100.

So, basically What if I give you 87?

It'll give you 87 because that's between 0 and 100. You're right. I did, like, kind of the outer boundaries and didn't do one in the middle.

So a clamp function, what it does is it basically checks to see if your number is within the boundaries. And if it is, then it returns that number. And if it's not, it returns the lower boundary. And if it's or the upper boundary, Depending on which side of it it it goes out. And we have this in CSS now, which is being used for fluid typography.

And so people might just be saying, oh, yeah. Clamp and CSS is the great way to make sure your your type is, fluid. It. They might not understand that all it's doing is either returning the low value, the high value, or the 1 in the middle. And by Giving it a dynamic value in the one in the middle, it allows you to have that fluid type to be a little bit scalable. So we have code snippets here for both CSS it. And how to write a a clamp function in JavaScript.

But in CSS, it's just clamp minimum value, preferred value, And then maximum value, which sounds weird, but,

in practice, it it works pretty well. And we have this in in grid as well with min max. Right? It's kind of interesting that they use min max instead of clamp because we have clamp. Right? Like, there's probably some implementation difference and, you can give you can give min max any values. You can give clamp, like, a ram or m or there as well. Right? Yeah. You know what? It's weird about CLAMP

is that, like, people people were saying, I need to I saw this tweet the other day. It kinda bugged me. It was like, I I really wanted container queries until I got Clamp, and now I could do everything with Clamp. No. You can't. No. Clamp does not solve that problem. Clamp Do you think it just bypassed that? It. Oh, man. We already had container queries, and no one noticed.

Yeah. Right. That's that's not even related. So because the the way people are doing fluid typography with clamp is that they're using a viewport unit for the middle value making it fluid, But that's still measuring the viewport. It's not measuring the container. So, okay. So fluid typography is possible with clamp as long as it's fluid to the viewport.

It. Next, we have a JavaScript clamp, which is a a super easy function. So easy that I could tell you what it is here In podcast form, and you might get it. So the you take 3 parameters, the number you you have, the min, and the max, and then we wrap everything in a math dot min. Then you have 1 layer deep where you wrap it in a math dot max, and you have your number in min. Just look at the show notes as JavaScript, and that is the function. If you ever want a clamp function, you don't need a library. You don't need just copy and paste this function in code. The clamp, this will work. We we we use the same function all the time in in my code. It's one of those functions that I just define in all of my utilities.

NPM install it. What's that? You can just npm install it.

I guarantee that is on npm already. Let's see. Npm.imforward/clamp.

Let's see. Clamp. 384,000 weekly downloads, And it it literally is doing that clamp value a and b.

Just Just gosh darn. Okay.

Well, cool.

And people wonder why we have attack attack vectors. Okay. So so this is clamp.

Next is interpolate. Interpolate is a little bit different, and interpolation, can mean a lot of things. You often hear about, like, string interpolation, And that's actually, like, a a big bummer when you're trying to Google for this stuff. You have to do little minus string in here because you don't want any string interpolation blocks popping up. But we're talking about interpolation. We're talking about the way to infer data, with the data.

So we're blending numbers instead of, like, clamping them down. Right? You could think of it as like let's say we have a range of 10 to 20.

That range, 10 is 0%, And 20 is 100%.

What is 50%? Oh. That range. Oh.

I've needed to do this before. I didn't know that that's what this was called. Yep. It's 15 in in case you're wondering. So 15 is 50%.

And so then we can basically interpolate those numbers, that 10 to 20 across 0 to 100%.

And what you're doing here is you're you're either squishing or stretching or moving a range of numbers to fit another range of numbers.

And this is where things got really interesting for me because I started writing all my own interpolation functions because I I just didn't realize that some of this stuff existed. So while we were just Groaning about a clamp function library.

I present to you a library that is actually useful. This is the d three hyphen interpolate library.

Now d three is often known as the difficult to understand visualization library, that is Extremely powerful, but also really kinda hard for new people to learn without a degree in d three. D three, is one of those things that takes a lot, but d three has open sourced their interpolation libraries and their interpolation functions.

And these functions allow you to interpolate between just about anything. And this is something I find myself needing to do all the time. So it. I I was writing my own math to interpolate between some values here when I could have just used their d three dot interpolate number function.

Now interpolate, interpolate goes beyond just interpolating numbers.

We can interpolate other things as well. In fact, this library includes interpolate RGB.

So if you ever wonder how animation libraries are, you know, being able to fade between colors using JavaScript, You could do that with an interpolation of RGB.

And same thing with, dates.

This is actually really interesting. Interpolating dates.

Interpolate date. Let me pull up the examples. One of the cool things about this library is that every single one of these methods has a source And an examples link to it that links to some, really nice examples function. So the interpolated date method given a start and an end Returns an interpolator that builds an intermediate date object between the start and end dates. You need to you need to find the date in between the 2 dates. This is this is a good way to do it using the JavaScript date function. It's not using, what's it called, temporal. It's using JavaScript dates.

Really neat, That's this is really cool because a lot of times I've had a a set of dates or a bunch of colors Or, I know 30 seconds in a video and I've needed to chop those up into Like, is this this is similar to chunking, I guess.

But, like, if you wanted to be, like, I'm starting here. It. I need to get

to here in 10 hops. What are those hops? You know? That's actually where I'm about to get to that that's that's not even interpolation here. It. It's in this library.

So I'm glad you brought that up because that's a a perfect way to describe one of the things I wanted to to talk about here. But the this thing is really neat. New just like, the last episode, we're talking about color spaces. You can interpolate in color spaces using this library too. So you can do an interpolate lab, interpolate HCL.

You can interpolate a lot of stuff inside of this, Inside of these these methods too, they're really, really super neat. And, like I said, the best part is that if if you're having trouble with any of these, like, really truly visualizing what they do, it. The examples are really top notch because not only do they they tell you, here's what we're going to do, But then they show you very easily in a lot of, like, examples that show you the before and afters of what exactly happens.

And a lot of the stuff is under the guise of visualizations, but still, it's still really neat. Okay. So, one thing before we move on The thing that Wes was talking about, I wanted to talk about, like, how is this useful in animation because you see it a lot in animations.

You know, we talked about clamp being useful in animations. This can be useful in animations too because, like, let's say, you frequently think about your animation as being between, like, 0 and 100%, but You're not, like, always moving between 0 and 100. Maybe you're moving between 102,000 pixels.

So This gives you those options to say, like, let me interpolate the animation of 0 to 100% in between 2 other a totally different values without having to do all of that math every step of the way yourself. Okay. So West West was talking about you have a start and end and you want to Get the hops in between. Right? Yeah.

That, my friend, is quantize.

Oh. So d three dot quantize. And so it. Those of you who have ever done any music will have heard the word quantized before because in quantization and music, what What you do is you you basically, you have a grid of beats. Right? And you have notes that might fall just before or after the beat because they're not always played Perfectly. In fact, they're almost never, and you can select those notes and say, quantize these notes, and it snaps them to the grid, essentially. Oh. So quantize it kind of does the same thing, but like what you say with hops. Right? So one of their their neat examples here is it. You have a start value that is a this is actually really neat, Wes. You might kinda be mind blown by this. You have a start value That is a string of 0 comma 51, and then you have an end value that is 49 s. Comma 100, and then you say, quantinize this.

And what it does is it returns an array with 8 steps, 0 hyphen 51, 7 hyphen 58, 14 hyphen 65. And you can see that it's it's both it. Quantizing 0 through 49 and 51 through 100, giving you the equal steps, every step it. In between those 2 with however many steps you tell it to. So if you say, give me this thing with 8 steps, it's going to spread out that in 8 equal steps.

Or here's another one. You you you say you have 255, like RGB values. Right? And you say, give me every single number it. Between 0 and 255 and give me intense steps. And then they'll say 0, 111, 222, 333, 444, 556, six 67778.

And it gives you all of the individual steps, and that's super useful for like, we said colors or anything like that. Anytime you need data And you wanna have steps. And the cool thing of this about quantizes in this library, d three quantize, is that it works with any of their interpolators. So if you wanted to say, Give me every single date evenly spaced out between these 2 dates. You just use the date interpolator And the quantize, and it will give you evenly spaced dates from one date to another date. Holy cow. These these are like 3 functions, and their examples tell you exactly how to do that in here. It's unreal how powerful this stuff is, and it's a tiny, tiny little library, all things considered. Unreal. Some people are so smart to be able to implement these types of thing, and I'm very glad that someone's brain is wrapped up in that little function that I can use. Right. And that's, like, the kind of cool thing about this is that, like, this phone this this library, if you didn't know this existed I mean, this thing has Only less than 400 stars on GitHub.

It's been around for 7 years.

It has, like, 9 issues, so it's, like, very well maintained.

It's it's a tiny little library that does all the things you could wanted to do and it kinda gets out of the way and Here's just a bunch of math functions that can do all this stuff. And if you didn't know this existed, you would just be like, well, I guess I'm gonna write my own math to do all of this stuff, and that would be a giant pain in the butt. So, yeah, I I I kinda wanted to just bring to light some of these things, the interpolation and clamping, kind of controlling numbers, bending them it. You're well. And just like the kind of tools that we have here in existence, you can get some shine on this d three interpolate library. It's not like it's not like d three is hurting for Reviews overall or something, but,

I was just shocked that this thing existed. Yeah. This this is one of those things. This is why you listen to the podcast. Now you know that that's a thing.

And 3 years from now, you're gonna be needing to do this. You're like, Scott talked about that on the podcast. It's called quantize and interpolate.

Exactly. Or maybe it'll come up on an interview, and you'll just get to blast right through that one. Exactly.

Cool. Alright. Anything else to add or should we wrap it up? I think we can wrap it up. Yeah. Check it out. Check this library out. Check out their examples. Just play around with it. Have fun. And, you know, it's it's computer. It's computer science. It's It's mathy, but, you can do some fun stuff with it. Maybe you can pull out some neat animations, custom stuff along the way. Beautiful. Thanks, everyone, for tuning in. Catch you on Friday. Peace.

Head on over to syntax.fm for a full archive of all of our shows, And don't forget to subscribe in your podcast player or drop a review if you like this show.