They wish each other welcome back.
Andreww is doing some radio show host promo work. their co - host can't make it this week. Andreww is going to tag the artists on the tracks they play to show support. They are back for another break session. Andreww is talking about the show and tell lightning talk and reminds Andreww to stretch their legs.
Andreww is working on a project and hopes to have it released this week. Andreww has known about it before but only now is they using it in their current project. they think that They are becoming more and more like a programming language.
Andreww's keyboard is too wide. Andreww is going to make a clamp to get rid of that. they will copy the link to the mdn docs for clamp and place it along with the video. Andreww explains to how the ccss function works. Andreww explains how the clamp function can be used anywhere.
Andreww wants to know if they can inspect element. The minimum font size is 1 REM, but they want 10 VW. The preferred size is 10 v.
Andreww has created a font size that grows with the size of the viewport. they used it in their new project. Andreww explains how to create a fluid type on a website. Andreww likes the fact that one line of code can set the minimum and maximum boundaries and calculate the viewport size.
They discuss the differences between them in CSS. Andreww explains how men work.
The width will be set at a thousand pixels unless the results of calc are less than a thousand. If the result of calc isn't , the viewport is set to that value instead. Andreww explains to W that the maximum value is always going to be less than the minimum. Max is the opposite to the minimum and will always choose anything bigger.
Andreww explains to how to set minimum and maximum values in one command. Andreww explains to that the font size will be set at one point a trim until the computed value of 2.5 vw is greater than that of 1.8 REM, then it will be 2 point 5 VW. The font size can be set to 2.8
Andreww has been using it on their project.
Andreww is going to do a bunch of random Clips to show how the CSS clamp function works.
Andreww is interested in clay. Andreww is using the clay for their project.
Andreww is going to get this traveling music going. Andreww is doing laundry at the same time as they are trying to get a bunch of stuff done.
Andreww is going to go over an artist's website that they play on the radio show in.
- programming language
- length frequency
- font size
- screen size
- mozilla developer network document
Welcome back your dreams were your ticket.
I welcome back that same old place that you like, but those dreams have remained, and they have turned around.
Yeah, well we need to welcome back.
We always put spotted rare.
Welcome back and I smile when I think Beer and ice.
Yo, what's going on, y'all?
So, how was your first official work session?
Hopefully, you got some stuff done.
I am doing some radio show host, radio show promo work right now.
Like I post like Twitter and Instagram and stuff like, you know, that the show is up.
The recording is up and you can check it out and things.
So I still have to my co-host wasn't able to make it this week.
He's out of town.
And so, so the stuff that he does during the show.
I am going to do today which is like tagging the artist, you know, on the tracks we play and I kind of let them know, you know, we're showing support.
I mean, let them, you know.
Again, I am really big on showing support to artists, you know, I mean to let them know.
Hey, the stuff you put out there.
I mean people are checking out.
So and if we appreciate so, alright cool, so we're back.
My bad, oh, yes, so, we are back and for another break session.
And, so I figured to kind of give an example of the type of things I was talking about for like the show and tell lightning talk thing.
So I figured I would talk about something that oh, by the way, don't forget to like stretch.
This is the break session.
You have been working for like 40 some odd minutes and This is, you know, time to stretch your legs walk around.
What have you?
You know I am saying?
So like I was saying, so I came across I have known about it about this thing before and only now am I really using it?
Like I am using it in a current project.
I am working on which is going pretty well.
I am almost done, and so I am hoping to have it released like this week for people to check out, you know, I mean and so kind of Stress testing, but neither here nor there.
So if you, if you ever is you're familiar with it, you know, the awesomeness of it.
If not, then, hey, here's something new.
You can put into your repertoire.
Yeah, I mean your bag of tricks when you're creating projects.
So now this is called now, it's clamp from a CSS function and It seems to me like CSS is becoming more and more like a programming language and that wild so people always like yeah, CSS and HTML aren't programming languages.
Like, if, if a computer reads it and then spits out something.
I think that's some sort of programming language, you know, I mean, and so, this is cool.
Let me make this may get rid of that.
How do I go?
My keyboard is too wide.
I thought I was hitting to hide the thing.
I was pasting the whole time.
All right, so speaking of pace.
Let me I am going to copy this link to the mdn docs for clamp, and I am gonna place it in its going to be along with the video so you can check it out and for yourself.
All right, so this is clamp.
I am not sure how many people are familiar.
With it, but when I came across it, I like to check out mdn docks all the time and just kind of look at look for things and saw this, and I thought it was kind of awesome.
So the, the clamp in that ccss function.
So it's like a programming language is amazing.
Clamps of value between an upper and lower bound.
So you're able to sit like a Max and Min for a value that you want to kind of contain, right?
And so Clamp enables selecting a middle value within a range between a defined minimum and maximum.
Basically, what I just said, it takes three parameters, a minimum value, a preferred value, and a maximum allowed value.
So you have the least that you want to do the most that you want to do anything.
That's your hoping for kind of like the thing that you would like the whole time, but you're setting like a lower and upper bound like limits.
And the clamp function can be used anywhere.
Oh, the clamp function can be used anywhere a length frequency angle time percentage number or integer is allowed.
So things like the height of your project, the width of your project you show here the fonts the font size of your project and now it says time I have never Tried that.
That's kind of interesting so you can set out.
I have never tried that and then like angles and stuff.
It's got amazing.
So anything where you put in like a length frequency, so even like I guess if you have like a timer you can set in between when you want the timer to have what would have that works.
Maybe it's a little dry.
But yeah, so the example here is that.
So you see this font here, right?
And so can I let me see if I can inspect element?
Let me see if I can't make this thing.
Yes, not changing.
I thought I could do it here.
But so you see here, clamp 1 REM, they want 10 VW.
So the minimum is 1.
That's a small as you can go for the font size.
The preferred is like 10 v.
W, so 10 times have you with and then at the most to REM?
All right, so depending on where we're at.
So we would like the 10 VW and so now you can see.
So you see here check out this one.
This is one.
Five and four.
And then you want to point 5 the W.
So you saw how that changed?
That's pretty cool and it's all within the same with or what have you?
So if you made the viewports bigger or smaller, you would see a change, but I can't do it here.
Let us see.
And then right there so I got smaller.
Oh, pretty cool stuff.
So note that using clamp.
And this is where I used it.
I use it in my new project for this for font sizes.
As in the examples, allow you to set a font size that grows with the size of the viewport but doesn't go below a minimum font size or above a maximum font size.
It has the same effect as the code in fluid typography, but in one line and without the use of media, Series because before, if you wanted to have your fonts too, because you know, let us say you want the font to be a good size.
Like a nice big font like the header or the title of the page.
You want that big on your website, right?
But then previously, if somebody was looking at it on a smaller.
Let us say a mobile device that huge font would take up a lot on a smaller device.
So what you'd want to do is have it.
It's called fluid type.
Biography, so, whereas this screen size gets bigger or smaller your fonts, can also do the same.
And so that way they don't take up.
You know, it doesn't look weird on different sizes because if for you so let us say you start on a mobile size and it's big there but then when you make the size bigger, it's super tiny, write the text.
And so with this you can do that.
Get the things, but I think you just strictly media queries, but now you can do it all with just one line of code and it will automatically like calculate the viewport size of the screen size and do its kind of and then it will set the minimum and maximum boundaries like it's making decisions.
You know, I mean, like that's for me that's kind of awesome and it's kind of like a programming language like and there's so many things coming and CSS that we will just kind of blur that line anymore.
Like its kind of amazing.
So now how about this?
So then they talk about the differences between like Max, because it's also in CSS.
There's Min and Max, right?
And to do, do.
Let me see here.
Here we go.
So the comparisons between Max Min and clamp, right?
So now we are you Okay, so Min, right, what men do.
So this is how men works.
You put in like the maximum that you're willing to do.
And then this is like the calculated part.
So this piece of code here.
It says means the width will be set at a thousand pixels.
Unless the results of the calc isn't, which is another thing calc like, it calculates.
But if it's 70% of plus 20% of like, the width of the screen plus 100%, our viewport is less than a thousand.
In which case it will be set to that value instead.
So if your thing here is a thousand like you wanted to be a thousand.
That's the max but then if the calculated value, let us say it gets less than a Max and less than the max less than a thousand pixels.
Then it will calculate the value and then set it to that.
So Men actually sets the maximum value.
So it's the minimum between these two different values.
I am saying, so this value here is the maximum and then the calculated is always going to be less than that.
So it's the minimum.
So it's always going to choose that.
So this is like the upper bound and then this is everything underneath it.
All right, cool.
Now Max is the opposite to where you set the minimum that you want to think to be like the smallest it can be and so will always choose anything bigger.
So like the 1.2 v.
So if at any point, so one point to our RM is the minimum that your thing is going to be.
And if one Going to VW view with is like larger than 1.2 REM, then it will select that because that's the maximum value between those two, right?
So max actually lets you set a minimum value, so we can kind of get confusing or whatever.
But with clamp instead of having to set those two things like Min and Max with clamp.
You can do that all in one line, one command.
And so, with the clamp, and for me, it's a little bit easier to read.
So, the first value is the minimum.
That's your value is going to be whatever, the property, whatever, CSS property, you're trying to set.
The minimum value is going to be that first property.
The first value, the 1.8 REM as it hears in.
This example, the next, the 2.5 VW, that's your preferred.
That's what you would like it to be.
You don't mean for, like all sizes.
All right, and then 2.8, REM is the maximum that you want it to be no bigger than that.
And for me, I think that's a little bit easier to read.
So it says here that this means that the font size will be set at one point a trim.
Until the computed value of 2.5 becomes greater than that of 1.8 Rim.
So that means 1.8 its smallest.
But if 2.5 VW, which is, you know, the variable with like of your of the viewport.
If he becomes bigger than 1.8 REM, then it will go to that.
Calculated value and is so.
Yeah, so it will be 2 point 5 VW until 2.5 vw's computed value becomes greater than that of 2.8 REM which is the upper limit.
And so, at that point, the font size will be set to 2.8 REM.
And so clamp allows you to set a minimum and maximum volume value.
So that's cool.
So, yes, with that, one thing, you can set the lower bound and the middle bound and it will fill in everything in between.
How cool is that?
Automatically in one line code of.
So, I have been using this, like I said, on my project, I am working on now because I have like different headers and I don't want them to.
I want them just to be on one line, right?
Like the title of the section, and so I don't want them to go.
To line, so I have it where it will get smaller as if you pour get smaller and it will stay on one line in saying and, yeah, so it's kind of amazing, you know, I mean, you could go to like, very, very small but you can't read anything at that point.
So I have it to where it's like, uh, normal minimum width and yeah, it's kind of amazing.
I think it's cool and I just want to talk about it.
Clamp CSS, and that's it.
So that's kind of like an example.
And I totally forgot to do any sort of Actual stuff here.
So I forgot to do high.
Like I got so in drawled with the CSS clamp function that I just totally forgot to do anything.
So, yeah, so I am going to do a bunch of random Clips here.
And so we get in that cool like just by sitting that you see how it just changes how I think that's kind of amazing.
And so I find that super cool.
So I am interested.
Have you ever used clay?
And if you have it, if you have what did you use it for?
If not, is it something that you think would be kind of cool to use?
What would you want to use it for?
Let me know and yeah again, I think it's super cool now, let me get back here.
Stop sharing my screen.
So yeah, again the link to this Mozilla developer Network document will be in next to the archived video in the link list.
All right, stop sharing my screen, get you all ready to go back to work.
And yeah again, thanks for hanging out.
Hopefully you found that interesting and get you back to work.
So again, thank you all for hanging out.
And yeah, I thought clamp is super cool.
I am using in my project the bunch especially for like the fonts stuff.
And yeah, I think that's it.
So we're going to be out of here.
So again, thanks for hanging out.
Going to get this traveling music going.
Where is it?
Okay, here we go.
Switch over to this.
And in this is a track by Anthony Cruz AKA butter.
And again, it's called.
Thank you all for hanging out.
See you 15 minutes after the hour, which you must which you.
I wish you much productivity and cool be back.
See you soon.
All right, let me gotta share my screen here.
I am going to get back to this radio.
Show promo stuff.
I am actually doing laundry as well at the same time.
So I am trying to get a bunch of stuff done.
Yeah, I mean and so yeah, here we go.
Y'all see you soon.
Wait, let me do the clip thing here and I will do the create highlight video.
Y'all see you soon?
15 minutes after the hour.
Oh, and don't forget to sign up for show-and-tell if there's something you want to show.
I am going to go over an artist's website that we play on the radio show in, maybe you will discover new favorite artist.
Alright, so, see you later.
I want to say, thanks.