Clamp & Interpolate

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

in in JavaScript. And you sort of hit these things where, like, oh, if I it. Computer science, I probably would understand

computer science background, I find myself hitting like These things like application and launch fully featured. Get this Omnichannel

Being a programmer

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

This is kind of interesting because

random numbers

You can get it up and running in as little as similar to chunking, I guess.

and not having a traditional

Hey, Wes. And with us today, in addition to West Boss, is 2 amazing sponsors, Sentry and Payments and a maximum, and you're locking it in between two numbers. So let's say you have, And so then we can basically interpolate really nice examples function. So the interpolated And what it does is it returns an array Oh. That range. Oh.

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.

what this thing is even called.

It. Hey, everybody.

Okay. So the animation was I had 1 thing 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.

All right. Clamp and interpolate.

And it looks really good. They've got lots of examples using it straight up with JavaScript.

I noticed these all the time in a couple of areas,

and underwrite merchants.

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.

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.

that allows you

to create ecommerce websites. You can make point of sale

payment solutions. What does that mean?

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

Explaining what clamp and interpolate is. Yeah. These are these are actually super handy. And me, personally, And then maximum value, which sounds weird, but, And this is where things got really interesting for me because I started writing all my own interpolation 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.

every now and then I find myself

all the banks and all that stuff. They provide APIs for doing that. So of course, you can accept payments

You can use the coupon code at tasty treat, all lowercase, What is 50%? Only less than 400 stars on GitHub.

Like, if you build an app where people are, like, maybe, like, Shopify would be an example.

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,

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.

And so people might just be saying, oh, yeah. Clamp and CSS is the great way to make sure your your type is,

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.

So, basically What if I give you 87? the other day, I was trying to figure out how do you get consistently

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,

But in CSS, it's just clamp minimum value,

in practice, it it works pretty well. And we have this in in grid as well with min max. Right? PaymentsHub is an easy to use API and SDK Or,

is that, like, of RGB.

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

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,

Scott talked about that on the podcast. It's called quantize and interpolate.

And don't forget to subscribe in your podcast player s. Comma 100, 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,

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.

And 3 years from now, you're gonna be needing to do this. You're like,

or drop a review if you like this show.

Exactly. Or maybe it'll come up on an interview, and you'll just get to the animation of 0 to 100% in between 2 other And 20 is 100%.

a Let's see. Clamp. 384,000

I know 30 seconds in a video and I've needed

date method given a start and an end Returns an interpolator

library.

Now d three is often known as the difficult to understand visualization Or here's another one. You you you say you have 255, especially animations 0 and 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.

We can interpolate

a set of dates or a bunch of colors

link to it that links to some, 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

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

animation libraries are, okay. So fluid typography is possible with clamp as long as it's fluid to the viewport.

dates.

And same thing with, 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 [email protected].

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 is one of those things that takes a lot, but d three has open sourced their interpolation you frequently think about your animation as being between, like, 0 and 100%,

library, and then I give you a negative 100, West West was talking about you have a start and end and you want to Get the hops in between. Right? Yeah.

Like, is this this is

Really neat, That's this is really cool because a lot of times I've had

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.

Now I think I just did those inverse when I did my hand animations here for Wes, but 11 but like what you say with hops. Right? So one of their their neat examples here is it. You have a start value and give me intense steps. And then they'll say 0, 111, 222, 333, 444, 556, And people wonder why we have attack attack vectors. Okay. So so this is clamp.

dates.

interpolate goes beyond just interpolating Next is interpolate. Interpolate is a little bit different, and interpolation,

interpolate,

numbers.

Extremely powerful, but also really kinda hard for new people to learn without a degree in d three. D three,

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

You can interpolate a lot of stuff inside of this, Just gosh darn. Okay.

102,000

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.

a totally different values without having to do all of that math every step of the way yourself. Okay. So You could do that with an interpolation 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.

And a lot of the stuff is under the guise of visualizations, 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 left and 1 right, and I present to you a library that is actually useful. This is the d three hyphen interpolate a range of 10 to 20.

That, fluid typography.

it's still really neat. Okay. So,

This gives you those options to say, like, let me interpolate 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.

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 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.

before and afters of what exactly happens.

And it it literally is doing that clamp value a and b.

NPM install it. What's weekly downloads,

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

cool.

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

Just but You're not, like, always moving between 0 and 100. Maybe you're moving between it. Between 0 and 255 10

that? You can just npm install it.

the a good example would be you want to clamp pixels.

the clamp function will return 0.

they started animating when your mouse Cursor entered a container.

What is clamp? 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.

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,

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 Head on over to syntax.fm

my friend, is quantize.

and 51 through 100, So

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, for a full archive of all of our shows, 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.

14 hyphen 65. And you can see that it's it's both it. Quantizing 0 through 49

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 numbers. My name is Scott Talinsky. I'm a developer from Denver, Colorado, and with me as always is Wes Bos.

and music, what

7 hyphen 58, blast right through that one. Exactly.

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.

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, giving you the equal steps, every step

if you didn't know this existed I mean, this thing has It has, like, 9 issues, so it's, like, very well maintained.

quantinize this.

and then you have So if you ever wonder how you know, being able to fade between colors using JavaScript,

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, 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 then you say,

It's been around for 7 years.

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 You know, we talked about clamp being useful in animations. This can be useful in animations too because, like, let's say,

with 8 steps, preferred value, like RGB values. Right? And you say, give me every single number animating horizontally left and another thing animating horizontally right.

six 67778.

0 hyphen 51, that is This is actually really interesting. Interpolating but still,

it kind of does the same thing, 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 libraries and their interpolation functions.

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,

So we're blending numbers instead of, like, clamping them down. Right? You could think of it as like let's say we have those numbers, that 10 to 20 across 0 or whatever, I want that to somehow

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.

can mean a lot of things. You often hear about, like, string interpolation, Between

to 100%.

with the data.

is 0%, 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 an end value that is 49

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 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,

That range, 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 It will give you 100.

CSD. Welcome to Syntax. On this Monday, hasty treat. We're gonna be talking about 2 concepts and functions

the craziest,

Boss, and Scott

Monday. Monday. Monday.

the tastiest web development treats coming again hot. Here is Wes, Barracuda,

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,