672

September 27th, 2023 × #CSS#Web Development#Podcast

Reacting to State of CSS Survey

Wes and Scott discuss the State of CSS developer survey results, covering usage of new CSS features like subgrid, aspect ratio, relative colors, variable fonts, accessibility preferences, and more.

or
Topic 0 00:01

Announcer intro

Announcer

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

Topic 1 00:21

Introducing the State of CSS survey

Wes Bos

Boss, and Scott Welcome to Syntax. Today, we have the state of CSS.

Wes Bos

This is a Survey that goes out every single year.

Wes Bos

Along with the state of JS and all of that good stuff, and they ask developers What features are you using? What libraries are you using? Do you know about these things? What do you think about? Are you still using Bootstrap? Have you used Bootstrap less? All of that good stuff, and it's kind of interesting to take a look at where CSS is heading as well as like like what are developers actually using these days? And it's not perfect Because obviously it's it's skewed towards the type of people that take online CSS surveys. Yeah, but it's I think it's a pretty good look at what the industry looks at right now, so I'm excited to get on into it.

Topic 2 01:21

Kids' soccer stories

Scott Tolinski

How are you doing today, Scott? I'm doing super good. It. It is kid's soccer season. I don't know if your kids play any sports, but our son has been playing soccer now for however many seasons, and He has landed on the same team as all of his little friends from high school, and that's good and bad. He's having a lot more fun being on his friend team. But, man, every single soccer practice has been like, please stop picking this kid up. Please stop Grabbing sticks and throwing them instead of doing your soccer thing or whatever. Like, I took a photo of, Landon on the sidelines of the last The last game. This is the game. There's a game going on, and he's on the sideline, like, sitting on top of 1 of his friends, like, wrestling. And I was just I was just like, I took a photo. I was like, I know you're supposed to be having fun, and that's, like, the best part. But, like, you you can't be doing this. Also, I asked him, after the game. I was like, how do you guys think we you did? And he was like, oh, I think we did pretty good, but I wish we would have won the game. And I was like, Landon, your Your team won the game, like, 15 to 4. Like, your team dominated the game, and the fact that you don't even know that Mita, you were not paying attention at all, which is it's kid it's a little kid's soccer, but it it's it's been it's been a lesson in parenting to be like, Yes. Have fun. So much fun, but, also, please, try somewhat, and don't, don't, you know, ruin other people's

Topic 3 02:54

No picking up rule for kids

Wes Bos

The kids picking each we have a rule in our house is no picking each other up because the amount of time Oh, my gosh. Like when kids get excited, they try to pick each other up, which is hilarious.

Wes Bos

And the amount of injuries we've had in our house where people get excited and someone gets dropped on a coffee table.

Scott Tolinski

Just guts. Body slammed.

Wes Bos

No picking up. You know? We're all little. Spoke to our yeah.

Scott Tolinski

Yeah. Yeah. Yeah. Landon does something every morning, when we drop Brooklyn off, and he does what's called pick it. Hub hugs where he picks her up and does, like, a big hug. Yeah. And, like, 2 days ago, he just totally slammed her into the table by accident, and she's crying. And I'm just like, alright. Pickup hugs have gotta be limited to, like, an inch. We're not we're not picking up more than an inch here. Pickup hug. Oh, I'm glad to hear it's not just my family. The Pickup hug. Oh, yeah. It's adorable, but you gotta, you know, do it within reason, man.

Scott Tolinski

How are you doing? How was your how how's your, CSS been going, Wes?

Topic 4 03:51

How's CSS been going?

Wes Bos

Doing good. Just rocking over here, working on Websites and whatnot. Pretty stoked about that.

Wes Bos

We should say real quick brought to you by Sentry. Check it out at century.

Sponsor - Sentry

Wes Bos

Io.

Wes Bos

So let's get into the state of CSS survey.

Wes Bos

They obviously go through it. You can check it out at state of CSS .com and kind of go through all of the stats yourself. What we're gonna do here today is kind of just pick interesting things and provide some sort of commentary on Where we think all of that is going. Alright. So I think we should start with a little bit of Q and A. I'm going to ask Scott what he thinks about this and if he can guess.

Wes Bos

So the features that are talked about in the state of CSS are things that are like new ish to CSS in the last 3 or 4 years or maybe in the last 6 months. So can you guess what are the top 5 most used CSS properties

Topic 6 04:32

Guessing the top 5 CSS features

Scott Tolinski

or features. Sorry, not properties, features. Okay, and we're talking about used like people are actually using this stuff. Yeah, I'll give you A couple of

Wes Bos

like examples of things that are not top 5. So where and has are high up there in new features that are being used. CSS. CSS nesting. Nobody's using has yet. Accent color.

Scott Tolinski

Yeah. CSS has is like If if you respond The survey using has saying, yeah, I'm using has. You are

Wes Bos

lying. You're straight up lying. Yeah. I was like, I've used it, but in demos,

Scott Tolinski

You know? Like, not in any production. Yeah. Maybe that's the different. Have you used it first? Are you using it? I guess those are 2 entirely different questions. Yeah. So okay. Okay. Let's go ahead and just say we'll just say, you know, grid. We'll just say grid. Grid would be it's actually broken up into

Wes Bos

finer

Scott Tolinski

grid features. Okay. What about GAP? Give me GAP. GAP number 1.

Wes Bos

Oh.

Scott Tolinski

GAP is in. Is probably one of my all time favorite CSS properties. We're talking underrated kings here.

Scott Tolinski

Kings and queens of CSS.

Scott Tolinski

Gap, underrated.

Wes Bos

Absolutely. And you might you might be saying, like, what's so special and new about Gap is it wasn't in Flexbox when Flexbox first was announced, And it was grid gap, and now it's just gap. And you can use it in Flexbox. You can use it in, Ingrid, and you don't have to fuss with margins or box model or anything like that. You just throw it in there, and you're good to go. Fall into the gap, man.

Scott Tolinski

Right. Number 1. Good. Number 2. I'm impressed, y'all. I'm impressed. I can't believe you caught that. Well, I was I was like, It was one of those ones where I was gonna say, if it's not on the list, y'all are sleeping on gap because it's it's rules.

Wes Bos

Okay. Okay.

Wes Bos

Let's do, it.

Scott Tolinski

If we're doing individual properties here, justify content.

Scott Tolinski

Nope. 2nd grid. Okay. Yeah. No. I use justify content all the time. The the rest are not CSS Grid. Okay.

Scott Tolinski

Cool. Good to know.

Scott Tolinski

Not CSS Grid.

Scott Tolinski

We have it it's interesting if these are, like I I, like, Get stuck on whether it's brand new things or not brand new things. Right? Because I'm I'm trying my brain goes to, like, what's the stuff I use all the time? Like, I use opacity all the time.

Scott Tolinski

Let's go ahead and say translate

Wes Bos

as a property. Not in there. Nope. Not in there. I'll give you I'll give you one more guess, and then I'll go through the rest. Okay. Let me What is that? They're not just properties, so, like, features of CSS.

Topic 7 07:32

More guessing top CSS features

Scott Tolinski

Okay. Features of CSS. So like container queries. Container queries is number

Wes Bos

20.

Scott Tolinski

Oh, geez. Okay. That's okay.

Scott Tolinski

No one's But it's it's saying that 31% of people have used it. I find that hard. 31% of the people who have filled out the survey have used it because 31 of the percent of the people who have filled out the survey would like to flex that they are using stuff like container queries. Yeah.

Scott Tolinski

But I, myself, we're using it in the new syntax site, so I can't even say that because I you go. I'm

Wes Bos

actually using it in real world. Let's say CSS variables because we love those folks. Number 2. Ding ding. Yes. So first is gap. Second is CSS variables at 94.3%, which makes sense. They've been around for probably 7, 8 years now, if I were to guess. Number 3 is aspect ratio.

Topic 8 08:20

Aspect ratio usage

Wes Bos

Yeah. Wow. That's right. That one, like, came out of nowhere, like because We haven't had it that long, but once we got it, everyone's like, boom, aspect ratio

Scott Tolinski

all day long. I need to size an iframe or a video. Or or even just an image. I want this image to always remain inside this aspect ratio, and I want it I want it to overflow hidden. You know? Super useful. CSS filters. 80% of people have used it. Filters. Yeah. Okay. So, like, what's your what's your favorite filter? I mean, my favorite filter it. Is is, is, a saturation just to do grayscale. But you know what? The the drop shadow 1 I found to be very unpredictable across browsers. So, a lot of people go for is it is it drop shadow? Is that it? Is that the actual property of the filter? Yeah. Drop dash shadow. Yeah. I found drop shadow to be extremely unpredictable and very performance heavy. So,

Wes Bos

what button if you're a fan of that one. Would you use that for? You just apply it to an entire element and it has a shadow

Scott Tolinski

Based on its contents? Check this out. Check this out. Okay. You know the classic problem. You got a rounded corner something. You're building a little text bubble, and it's got a little triangle that you maybe did with the border trick. Yeah. Can you get that shadow to be on the triangle? You can't do a shadow, and the triangle will goof everything up. You can do some z index tricks to make it work, but at the end of the day, it's,

Wes Bos

so you gotta do shadow filter on that. Damn. I don't think I knew about CSS drop shadow filter.

Scott Tolinski

No. I definitely did not know about that. I in the times that I've used it, I've ripped it out because of performance issues. So I said I there's a better solution here somewhere. I don't know where. You know, my Number 1 is hue rotate.

Wes Bos

I did some really cool demos. I should tweet them out, with hue rotate And, rainbow gradients that basically you do a rainbow gradient and then you change the hue on it And you animate the hue rotate from 0 to 360, and it goes. And then like I you overlay 2 gradients And use a mix blend mode on top of each other. So different colors are always overlapping different colors, Because they're 2 different hue rotates, and then they're mixed blend moding. Probably awful for performance. Yeah. But, like, sick, sick demo.

Wes Bos

It looks really cool. Let me just say,

Topic 9 10:42

CSS hue rotate demos

Scott Tolinski

if y'all are out there and you wanna flex on a underrated hot CSS property, mix blend mode it. Mixed blend mode. Dan, you can do so many cool things in this mixed blend mode. And I remember getting a lot of demos back in the day when a lot of designers use Photoshop, and they'd blend modes inside of your your comps, And then you're like, I can't do this. You're gonna have to figure out some way to do this blend mode.

Scott Tolinski

But the blend moding, you know, I I used it extensively on the new level up design, and I found it to be just really great, overlaying gradients on things, doing, like, clips with, s Or or that's a whole another whole another world. Masking and clipped clip masking and and masking in CSS.

Scott Tolinski

Yeah. S. There's a lot of really cool CSS features that I don't think get their shine because they kinda just came out in a in an era where things were just coming out low key. It wasn't like a big Part of the CSS 3 jump, and it it isn't a part of the, you know, big layout features that we all love so much. Yeah. I'm gonna I'm gonna send you a link,

Wes Bos

And I'll put it in the show notes as well.

Wes Bos

That is going to show you what Hue rotate will do.

Scott Tolinski

The code pen. Code pen? Oh, yeah. Look at this thing. This is lovely. The neon d you made this? Yeah. I took, like, a it. Because they do even know what the the neon demon is. This is not the type of thing in your wheelhouse, so I'm very surprised that you would use this movie poster.

Scott Tolinski

It. Yeah. This is a, this is not a movie I've seen even. It's from the director of Drive, which is a lovely neon movie. But, yeah, this is neat, man. This is great. This looks like Hologram and all sorts of cool stuff. You remember those, like, little stickers you used to get as kids? They would be straight up hologrammy,

Topic 10 12:23

Hologram stickers

Wes Bos

Foil type. I have, lots of those. And whenever I do a sticker pack, I do a hologram one. I specifically went to the The person who like, the vendor who makes the, like, North Face authentic stickers. You know, you buy, like, an expensive piece of clothing, and it has, like, a little hologram gram on it to say that it's legit.

Wes Bos

I was like, can you just make a big one of those? And so sick. There's you can do 3 levels of I don't even know how it's printed. Like, laser etched, and then when you move it, it goes all hologram y. Yeah. Well okay. That's that was a fun little quiz, Wes.

Topic 11 12:59

Recap of CSS quiz

Scott Tolinski

I, I don't have a quiz for you, but I think we could start out with some of this layered stuff inside of this survey. Now one thing that I you know, if we even start the very first one, you'll see that, it. You know, the the people who have, quote, unquote, used subgrid have has moved up by, like, 10%. And I have not used subgrid because the feature support for that is still iffy. I really question I wonder who's using subgrid right now, And I would love to see, like, what kind of stuff people are actually doing with subgrid, or is it just that they they followed a demo? Because, Even, like, Chrome has not had good support for subgrid until very, very recently. It it didn't drop in in Chrome until version 117, And and even then, like, Edge doesn't have support, to give you an idea, because Edge is usually almost, like, right there with Chrome. So Edge still doesn't have support for subgrid, but it. The latest version of Chrome does.

Topic 12 13:51

Discussing subgrid support

Scott Tolinski

This is one of those features that every time I need it, I feel like I really wish it was here right now. And since it's not here, I'm just going to put it out of my brain. Do you think we will get The ability to use full subgrid on actual products, feeling okay about it by the end of the year, I'd I don't I don't think so. You think so? I was gonna

Wes Bos

share things up. Because it's it's in it's been in Safari for over a year. It's been in Firefox for 4 years.

Wes Bos

It only just hit Chrome.

Wes Bos

What, like a couple of months ago, so and it's behind a flag on edge. Like, I give it.

Wes Bos

Like, 2 weeks. Really? And and we're we're gonna be able to start using it? I, like, I I might even do it. I have something on the Syntax website right now Where I'm like, ah, they could really use subgrid for this, you know, because it's nested. Yeah. But it gets if you look at the global usage

Scott Tolinski

Of the browser versions that people are using, it gets 18%

Wes Bos

Yeah. Because usage. Because it only hit Chrome like a couple of weeks ago, you know, but like how quickly that maybe the question we should answer is how quickly does Old versions of do or do old versions of Chrome drop off? You know, like let's see.

Wes Bos

Chrome 114 and 115 Have 14% global usage.

Wes Bos

116 has 5%, and 117 has 0.02.

Scott Tolinski

When did 117 come out? It it yeah. I think the concern is you know what I would love to have would be, like, a graph that were to show me this global usage percentage for subgrid over time Because I would love to to do that exact experiment to see, like, alright. Here we are. It is September.

Scott Tolinski

What it. Does that percentage look like by October given the fact that it's released in Chrome now? So Yeah.

Wes Bos

Honestly, I think Chrome is the least of our worries because The big one was always it's you got to wait for Safari because people got to update their phone, you know, and it's been in Safari for quite a while now. It's in the last 3 versions.

Wes Bos

We're in pretty good shape. Obviously, there's old still older versions of Safari out there. Mhmm. But But But as long as it's in Safari and Safari Ios, you're you're,

Scott Tolinski

Gucci for, most of the mobile web. Maybe not most. Half of the mobile web. We'll say that. Yeah. The other one is, like,

Wes Bos

Samsung Internet never has any support on stuff. We've talked about that in the in the past, but Has very, very, very little actual usage.

Topic 13 16:33

Samsung browser support

Scott Tolinski

I'm gonna say if you're yeah. Depends on what type of projects you're working on. Obviously, if you're working on the syntax.fm website, we're not writing CSS to support Samsung Internet browser, because I I can't imagine too many people are are keeping Samsung Internet browser, and they're not just going for a Chrome on there. You know what's the big one is Chrome for Android. It's It's not even it's not in Chrome for Android.

Wes Bos

But Chrome for Android is always parity with CS. Desktop Chrome. So I imagine Yeah. This is version 116. So when 117

Scott Tolinski

drops 4

Wes Bos

Hopefully, it'd be in there. Yeah. The can I use needs an update, man? This is like I don't care about, like, half of this stuff, you know? And, like, I maybe I can can dial it, They're like I feel like this could they're I feel like they could do a better job at

Scott Tolinski

saying, what does this information mean? You know? Yep. Yeah. I agree, and I think, I think can I use has been the exact same in, what, 8 years now? It's been the same forever, so I would love to to see a modern version of this. We don't need Opera on here.

Topic 14 17:25

Improving caniuse website

Wes Bos

You know, it's it's using Chrome

Scott Tolinski

and nobody uses that. So isn't that what that baseline that web.dev baseline is trying to do? They're it's, like, trying to be a more streamlined version of that, maybe less information.

Scott Tolinski

Hey, you know, we'll see if that catches on. Oh, you know what? I'm pretty sure

Wes Bos

can I use allows you to make your own browser sets? So maybe I'm whining about nothing here and just need to dial it in myself. Yeah. But guess what? When you make your own sets, it's, it. Hit that page with a refresh. It goes away? Yeah.

Wes Bos

What?

Topic 15 18:16

Browser usage stats

Scott Tolinski

And it's not it's not, maybe you have to make your own in, like, Browser shown. Add new set. Yeah. It doesn't I think you might have to, like, do it on a per feature basis or something. I don't know. I haven't had time to mess with this, so don't take my word as as, So that was like 10 minutes on CSS subgrid.

Wes Bos

Hey. So that's what the show is all about is getting into Getting in the nitty gritty and kind of just riffing on it and talking about it.

Wes Bos

CSS logical properties, so that is instead of using top, Right bottom left, you use inline and block values, which is a couple benefits To that, one one benefit is you can set like inline would be for most people listening to podcasts left and right and block would be top and bottom, except if you were to change the writing mode of your page or of a specific element, Then the values will follow it. And that could be handy not just for people writing Japanese websites, but it's also handy if you are ever writing text on a vertical plane, and an example I have is chapter 1. I have a big heading on top of it, but But when you get on mobile, maybe I want to put the chapter, like, along the side as you scroll through the words, right? Or maybe sections of this podcast you want to As you're scrolling, maybe I want to put the text on its side.

Topic 16 18:43

New baseline on web.dev

Wes Bos

So adding margin as a block value When it's left to right, it's top and bottom. But as soon as you change the writing mode, the whole thing just rotates and the Margin values adjust for that, and you don't have to, like, turn them off and then put them on the top and bottom after that. So it Could be pretty handy, but again, I'm super surprised 35% of people have used logical properties because I don't feel like it's

Scott Tolinski

Something that's been caught on. Yeah. Yeah. I I hardly see him in the wild, to be honest. But, again, you know, I'm I'm not seeing every website, obviously. It. I I thought it was interesting that only 21% up from 14 last year are using media range.

Topic 17 20:10

Logical CSS properties usage

Scott Tolinski

Media range syntax is really nice and handy if you're writing media queries. It's a shorthand for writing media queries. It has excellent browser support. You don't have to worry about the browser support for it, And you're basically just turning your media queries into greater than or equal than equal to, syntax like you would, it. And it it reads really nicely. Me, personally, my brain reads it way better. Maybe it's just me, but I think it's a a super underrated feature that, I think could be, way higher up here in terms of usage. Here's one.

Topic 18 20:54

CSS media range syntax

Wes Bos

I have no I've never heard of this. Object view box.

Scott Tolinski

Object view box. So, of course, there is a, blog post, first look at object view box, which is it. Do you know have you ever heard of this? No. But it seems like it's a way to crop images.

Scott Tolinski

So it's, like, kind of like an overflow hidden.

Topic 19 21:14

CSS object viewbox

Scott Tolinski

It. Like, what makes this better than overflow hidden? Is it half does it have to do with how it's rendered? Is that the the benefit here? Like, let's So you have an image

Wes Bos

that's of Scott and I and you want to crop Scott out of the photo and you just want to you want to put me in there, Right? We say let's say make this photo worse. Is that what that's the Make this photo worse. Yes.

Wes Bos

So when it has a class of worse, If you wanted to crop Scott out of that, you'd have to wrap that in a div and then scale the image up and do a bunch of math And then Overflow hitting on that div. This allows you to simply just have an image, let the thing load, and then you can Zoom it in, crop it based on inset values, and then you don't have to wrap it in a div. Oh, okay.

Scott Tolinski

Yeah. That is handy. You don't have to pollute your markup with stuff that doesn't need to be there. For a long time in CSS and still to this day, it. The solution in many of our problems is just to add more divs and then do some workarounds around it. So anytime we can have some properties that, like, it. It's so funny because I see this, and I say, why not just add a dev and overflow hidden? And then it's like, that shouldn't be the correct solution. Right? But I I guess our brains are so programmically,

Wes Bos

it. Lee, infused to do that. You know who needs this is all those websites that show you a shopping photo, And you hover over top of it, and it does that, like, zoom in, which is nice. You can zoom in to see it. But if you wanna, like, open the image in a new tab, You right click and there's a div, so you can't find it. You have to inspect element, find the image tag.

Wes Bos

If it's just an image tag, you could reimplement a That Zoom functionality

Topic 20 22:53

Using object viewbox for images

Scott Tolinski

simply And you know those are all built with jQuery version, you know, 1992.

Scott Tolinski

So, that would be a nice little win there, not having to ship an extra version of jQuery.

Scott Tolinski

There have you have you used anchor positioning, which is also on this chart? Anchor positioning has a a very, very small usage percentage. Only 2% of people have used it. And have you heard of anchor positioning?

Topic 21 23:22

Anchor positioning usage

Wes Bos

I have never heard of anchor positioning.

Scott Tolinski

Okay. What does this do? Well okay. So here is a little problem created by, created by web developers. And the problem is created by web developers, so we need a solution to it. And that solution is anchor positioning. Let me tell you, I ran into this, this problem very specifically getting into the new popover APIs.

Scott Tolinski

So on the new syntax website, we're using a lot of cool stuff. In fact, you can check out our code. It's open source. One of those things that we're using, we're using the dialogue element. We're using the popover API.

Scott Tolinski

And what these things do is they utilize a new feature in browsers called top layer.

Scott Tolinski

And so what top layer is is it essentially takes your item it. Out of the rendering flow context completely of your application and sets it onto a top layer. It. And this is beyond anything that you can do with z index to put something on top of something. It's like opening a modal. Right? That modal should always appear on top. It. You shouldn't have to worry about if the header z index is on top of this. Right? So in comes top layer to save the day. Top layer sits on top of everything. It. The big bummer about that is then you have a popover that needs to be anchored to something else. Like, let's say, perhaps, it. In the syntax website, we have a sorting menu. That sorting menu is done with the popover API.

Scott Tolinski

I want that sorting menu to always be anchored to the bottom of the button for the sorting thing, but you cannot do position absolute top whatever because it's out of the the rendering flow of the document.

Scott Tolinski

So it does not respect position relative containers the same way position absolute typically does.

Scott Tolinski

It. So in comes the anchoring, position anchoring, which allows you to anchor something to something else.

Scott Tolinski

Now granted, this has a polyfill of which I found to be very unreliable.

Scott Tolinski

So the first thing I did was implement the polyfill, And I found the polyfill to be very hit or miss, and we could not ship it. So I pulled out the polyfill, which is probably why usage percentages on this is so low.

Topic 22 25:29

Anchor positioning polyfill issues

Scott Tolinski

Support for this is bad. Polyfill is not, usable right now reliably.

Scott Tolinski

Yeah. I I did a straight JavaScript solution. I wrote a Svelte action to measure the current position and then just position it automatically. I needed this.

Wes Bos

So what this does is CSS anchor positioning will allow you to position elements Relative to another element. So you have usually, it just finds the closest relative parent and uses that as it. But this will allow you to specify an anchor, an anchor name. And then on another element, you can say position this thing. Absolutely.

Wes Bos

But relative to my anchor, and that might be another element somewhere else on the page. So this is Something that I needed in the new syntax website. So I'm doing multiple levels of position sticky.

Topic 23 26:12

Anchor positioning example

Wes Bos

And If I I fixed it another way because position sticky allows you to stack, but I had the title of a section and that could be something as short as New CSS features, or it could be something that's really long. That would be multiple lines. And if I wanted the current speaker to be Stuck directly underneath that, I didn't know how high the parent would be. You know, like, I could I could say top 10px, and they would just put it 10 pixels underneath. But you it's never nice to have to, like, hard code those values. Right? You should be like, What I wanted to do is I wanted to say position this a 100% under the header regardless of how big the header will be, and this would allow me Do that.

Scott Tolinski

Yeah. And, check out you might even find useful the, it's called in in our code base, it's called, use or s. Or it's just called anchor dot ts, but the action is called anchor. So you do use anchor, and you can give it a, a position, and you just anchor something to something else. It. It's, it's kind of an interesting little little action I built to ease the pain here for this API not being here. S. But the actual API is really interesting because there's a function, anchor.

Topic 24 27:15

Using anchor positioning on Syntax site

Scott Tolinski

Anytime we get new functions in CSS, it's really interesting. So, Yeah. There's a lot of really cool stuff. I implore you to check out the blog post on the Chrome developers that these are the Jay did a a blog post on this that it. I used to learn about anchor positioning when I was first learning about it. They they were actually super kind in going through some of it with, with me on Twitter. Alright. Let's get into shapes and graphics on here. We were just talking about blend modes. Blend modes only used by 40%.

Topic 25 28:09

CSS shape and graphics usage

Scott Tolinski

It's a small bump up from last year. It. If you aren't on CSS blend modes like we said, they're really, really great CSS filter effects. A lot of people using those. Backdrop, filter about 50% of people using those up from last year.

Scott Tolinski

Intrinsic sizing keywords, Does that mean anything to you, Wes? Yeah. That's

Wes Bos

max content, min content, fit content, and stretch.

Wes Bos

So you can set something to be the size intrinsically instead of an explicit value.

Wes Bos

I don't know that I like, it's still a working draft, but I don't know that I have I guess I've used it in grid, and Flexbox. You know? Like, fit content

Scott Tolinski

Mhmm. In content, mass content. Yeah. What's interesting is that, these properties, at least in some regard, have been in Chrome with a prefix since version 22 of Chrome.

Scott Tolinski

Wow.

Scott Tolinski

What? They they they, yeah. They've existed for a long time, so they've been around for a little while. But, still kind of body support in Firefox Where not everything is available, some are behind the prefix still.

Wes Bos

So is life. Right? Yeah. Relatively new. Only hit Safari 16, And it is currently

Topic 26 29:20

Wide gamut color browser support

Scott Tolinski

kinda implemented in Firefox. So Yeah. Here's here's a fun one, Wes. The view transitions API has been a hot topic on web dev Twitter lately, both for many good reasons that, people are seeing view transitions demos. We talked to Fred from ASTRO. ASTRO it. Has implemented essentially a backwards compatible version of view transitions so you can use this API in AstroSite. So you're probably gonna see this number going up because When the time the survey hit, Astro had not been announced as having that, so it was only at 4.2% usage.

Scott Tolinski

And And so this wasn't even on the chart last year, and I think next year, we're gonna see huge bump if people are actually using Astro. But we're shipping this API in the syntax website without a polyfill, and it's gonna be for Chrome folks and whoever gets it.

Topic 27 30:12

Relative color usage

Scott Tolinski

Do you think here's my question that I'm posing to you. Do you think it. That the view transitions API will be a net benefit because we'll have websites that utilize this well or a net negative Because we'll have more websites that utilize this feature poorly. I think in that benefit,

Wes Bos

with anything, you can go ham. You know, when we got translate or transform, no transition. When we got transition and you could just put it on anything, We saw it abused a little bit, but on most sites, it's it's good. On most sites it's done tastefully.

Wes Bos

So I think we'll probably see people go a little heavy handed with it initially, but it's sure nice to be able to do that type of stuff. And I think it's going to be a net benefit because of the context. Going from 1 page to another when the UI changes, this allows you like Animation is not just for, wow. That's cool. Animation is great for providing context as to what just happened and where should I look now. Yeah. It. And I I a 100% agree with you. Having these tools at our disposal,

Scott Tolinski

what a lovely future we have for the web here. So, it. I can't wait for this thing to hit, you know, full on support or anything like that. And, I mean, I I probably will be on the end of abusing it And then having to pull myself back and make it, like, you know, not abused because I I wanna I wanna do it on that. I wanna view transition everything.

Wes Bos

Yeah.

Wes Bos

Let's talk about some of the color stuff. So we've done a couple of shows in the past on the up and coming updates to colors in CSS. So we have color mix, which allows you to take 2 colors and mix them together.

Topic 28 31:45

Excited about CSS relative color

Wes Bos

We have the new wide gamut colors, which is the Okay Lab LCH, which allow you to turns out there's more colors in life, and the browsers were not capable of displaying Playing them even though lots of displays were. So there's new ways of defining colors. They make your gradients and And stuff look really, really nice. So And and let me interject here and say, this is a rare feature that's not just limited by

Scott Tolinski

Your browser is also limited by your display.

Scott Tolinski

So the good news is is that p 3 colors, That's the color space. Typically fall back automatically to a worse version of the color, but it's not always the color you want it to fall back to. So it. You have to specify a specific fallback if you are concerned about how this will look across every browser

Topic 29 32:33

Safari's color support

Wes Bos

and The one I'm the one I'm most Excited for is the relative color, and that seems to have, like a jump in people who have heard of it from 24% to 32%, But no change in people that have actually used it because, yeah, of course, we're kind of waiting for it to to do. And I hope that this podcast helped contribute to People that have heard of it, but that's going to allow us to say things like take this orange and make it a little bit darker or Take this hex code and convert it 20% opacity, right? It'll basically take a color, Split it into RGB or HSL or LCH, and then you can do math with those variables and then return them as whatever you want. You can tweak them, turn them up, turn them down, replace them, divide them, whatever it is that you want to get your color. So I am stoked for that to

Scott Tolinski

be in all the browser. I think just Safari at the moment. Yeah. Can we give Safari its flowers for being the first one to support that? Because it. That is really one of the the most exciting color based APIs for me personally.

Topic 30 33:46

Downloading variable fonts

Scott Tolinski

Mhmm. Color themes and systems, relative colors is gonna be words that Rome has it behind the flag. Who knows about Firefox right now, so it does seem like it's a long ways off. There are polyfills that are based not Poly fils, like, essence of transforms that are based in, like, lightning CSS or post CSS, but they are not dynamic, making them fundamentally useless in my mind. So, they exist, but they don't really they're not live, so you can't use them with CSS variables, which really kinda defeats a lot of the purpose to me personally.

Wes Bos

Safari's been Chugging with a lot a lot of the layout stuff, but a lot of the CSS color stuff, and probably because Apple cares so much about colors and stuff like that. And they have these beautiful displays that can be display all these really deep and beautiful colors.

Wes Bos

And Like, well, we got to get people using them, right? Because, like, especially if you look at a phone that doesn't have that and you look at an iPhone, you're like, man, I can't put my finger on it, but this looks good. Yeah. Yeah. You know, there's a lot of those, like, little weird things like

Scott Tolinski

the, Like, when it gets into, like, 120 hertz, you're like, I can't tell exactly what this is, but it looks good. You know? Here's a here's a question for you, Wes. What does Accent color do. I know what it does. I just want to hit you with this. Accent color is like

Wes Bos

like in your OS, You can define what color buttons and, like, a focus color and drop downs And if you want to pull that preference in

Scott Tolinski

to a website, that's what accent color does. Yeah, that is. What about current color? What does current color do? Go. Current color is

Wes Bos

the very first variable that's been around in CSS for probably, I bet 15 years.

Wes Bos

And that will allow you to do things like Launch the and Really?

Scott Tolinski

Well okay.

Scott Tolinski

Chrome got it in 2010, so that's not quite 15 years.

Wes Bos

13 years.

Scott Tolinski

Firefox got it

Wes Bos

in 2009. So yeah. Okay. So it allows you to do if you set the color of like text, like the color property on an element and you want like the border or something else to be The same color. You can use current color. It's not all that useful anymore now that we have CSS variables, but at the time It was a really good way to dynamicize your elements. Dynamize. Hey. And you know what it's really good for now is,

Scott Tolinski

you know, a lot of times people wanna set it. Colors inside of their SVGs to be dynamic. You can use current color inside of your SVGs and have it Set the color on the container, and then you're SVG. Look at the color. So it's super useful. Alright. Let's talk about some interactive stuff. We got scroll snap, which, believe it or not, it. 38% of people who have taken the survey have said they use scroll snap. I have not used it personally, but it's one of those features that, it. You know, you've always had to do JavaScript to do snapping when you scroll. We're we're we built all these different carousels to do scroll snapping. And it. Now we have it, and I, like, cannot be bothered to try it. So, have you used this one? I, yeah, I have used it in a couple couple use cases. It's really handy if you're building like a slider or some piece of

Topic 31 36:23

Using CSS currentColor

Wes Bos

application UI that obviously needs to snap to a specific value.

Topic 32 37:10

Using CSS scroll-snap

Wes Bos

But the other one that we have here is overscroll behavior.

Topic 33 37:19

CSS overscroll-behavior

Wes Bos

I have not used this one, and I think what this does is it controls Whether CSS property to control the behavior when a scroll position of a scroll container reaches the edge Of a scroll port? What? I thought what this is, you know, in Versus code, you scroll to the bottom and there's no more lines of code.

Wes Bos

Sometimes I like to like I want the last line of code to be in the middle of the editor. Right. You scroll past.

Wes Bos

So Overscroll behavior.

Scott Tolinski

It can oh, well, that's interesting. So let's say if the overscroll behavior is contained it. And I'm within a container, and I'm scrolling down, and I keep scrolling down. It hits the bottom of it. It's not then going to keep the outer container scrolling.

Scott Tolinski

It. So, you know, that's, like, a huge problem that if you're in a in a scroll window and you scroll to the bottom of it I'm thinking, like, YouTube playlist. Right? You scroll to the bottom of it. You get to the bottom. It. You don't want the whole window to then scroll up. You can use overscroll behavior contain, and none, What does none none how does none kinda seems like it does the same thing, so I might need to dive in here and see what the difference between That's that's actually really handy because Because I have this MX Master 2,

Wes Bos

and this wheel is like I can I could spin this thing like really fast? And sometimes I do that on, like, an embedded scroll port and then you hit the end, but the mouse keeps scrolling. So then the whole page Scrolls down. Right? So if you want to stop or, like, like, embedded map or something like that, if you're scrolling on it. A lot of issues that that becomes a problem.

Wes Bos

What about touch action? Touch action. 22% of people have used it. I don't think I've ever heard of touch action. I feel like I have a pretty good handle on a lot of the CSS stuff, but I don't think I've ever actually hit this. So I think what this is.

Wes Bos

You can specify on an element what is allowed when you are on A touch action. So like if if you want to stop somebody from pinching and zooming in on a specific part of your application, you can do that with JavaScript.

Topic 34 39:36

touch-action to prevent pinching/zooming

Wes Bos

Right? But This allows you to specify what the actions are.

Wes Bos

Pan X, Pan Y, Pinch Zoom Pan down. Double tap. Double tap.

Wes Bos

Yeah. Again, this is that the Google Maps is embedded is a big issue where You want to scroll a map when it's embedded in like a mobile website and it tells you if you want to scroll this, use 2 fingers, you know, because Is the person trying to just scroll down below the map, or are they trying to scroll the map itself? And sometimes a hard time.

Wes Bos

That could probably be remedied somewhat with this

Scott Tolinski

touch action. Yeah. There's a lot of these little things in here. And once we get into the typography, You know, you got, like, line clamp, which, again, you know, these things pop up every now and then. Like, line clamp, it's a CSS property that will contain text to a given amount of lines. It's like, I know these things existed, but it it it is funny that when you see them pop up, The first thing goes, what is the what in the world? Or variable fonts. You know, the web font that we use in syntax for the new it. For yeah. That's weird. I I I guess it's, like, dependent on the fonts you're using. Right? But Yeah. Variable fonts allow you to essentially control the font on a scale of italicize in boldness instead of steps. Right? So instead of it being stepped, you can scale it. Meaning, it. You could animate any of those properties or get it to be exactly where you want it to be on a, like, even per letter basis. There's a there's a lot of, like, really neat things you can do it. With this text based and typography based wise.

Topic 35 40:15

Using touch-action for maps

Scott Tolinski

But our our new font is a variable font now, so we can start to explore some of these in action.

Topic 36 41:13

Using variable fonts

Wes Bos

Especially with mono spaced fonts, which are. Yes.

Wes Bos

Yes. You can change the boldness.

Wes Bos

May I say it's not bold, but you can change how wide or how bold a font looks without actually changing the character size.

Wes Bos

So it's kind of cool because you can do some Interesting effects with it without actually having the text readjust itself on the page. So I've been playing with very there's a really nice website that shows All fonts that are available as variable fonts.

Wes Bos

And it's a really neat way to get multiple font weights or multiple font displays Out of a single

Scott Tolinski

actual font face. What what website is that? Vdashfonts.com.

Wes Bos

It's it's wild. There's, like, hundreds of different Fonts.

Wes Bos

347 different fonts, and you can use it shows you what variables are allowed to be changed. So the weight of The font or the optical size of the font.

Wes Bos

So I guess it's kind of boldness Of it, most of them have a weight and a optical size, but many of them also have a width that you can provide so you can get that really popular.

Topic 37 42:26

Changing variable font settings

Wes Bos

Like right now, all these websites are having like really wide text.

Wes Bos

And then you can also change the analysis ness of them so you can go from 0 to 20 degrees

Scott Tolinski

tilt on a bunch of them. Yeah. And some of them, you can change even more than that. Wow. Like Roboto Flex, you can change Wow.

Scott Tolinski

You could change all kinds of stuff in this.

Topic 38 43:04

Variable font expression range

Scott Tolinski

Wow.

Wes Bos

This one has expression.

Wes Bos

So it goes from a totally normal aerial sans serif font to, like, old timey.

Wes Bos

I'm writing a note to the king, and that is called expression of 0 to 100.

Scott Tolinski

Yeah. The this one, you're you're changing all the end like, the x height, the, you know, the y height, like, the individual, the widths of of different the extenders, the descenders.

Scott Tolinski

Look at me with my typographic knowledge here. I'm just dropping, Lango.

Scott Tolinski

Wow. Okay. Cool. So okay. I I'm interested to see what it. Our variable typeface can do. I doubt it is this much, but I am really excited to play with this stuff while they send these This one called Pangiovar

Topic 39 43:38

Using variable fonts for text effects

Wes Bos

has 9 different variables. The weight, italic extenders, Oh, especially for, like, the Russian case. But, like, if you have a a g, how far does the little Neck of the G go down. I'm sorry. All font people. That's probably not it. Aperture descender. It's a descender.

Wes Bos

How far does the C close spacing? That's pretty simple. Ink traps.

Wes Bos

Single story G. Oh, you can change

Scott Tolinski

a Which type of g you want, if it's got a big neck or not. I I found even some some really neat applications of this beyond just like, oh, look at this. The x height can change. So there's a couple in here that you might find interesting, Wes. There's one called wave font and one called line font.

Scott Tolinski

WAV font, yeah, is essentially like a bar graph, and line font is like a, it. A little line. So I don't know how you work with these things. They're they're dingbats, you know, adjacent, but they look, like, very useful if you could do that type of it. Painting with text fonts.

Wes Bos

So cool. Yeah. Variable fonts are cool, man. Hey. I think that sounds like a a great episode title for us. Hey. Variable fonts. I think we might need to have I think this happened last time is we got in an hour into this and we're not even.

Topic 40 44:55

Painting with variable fonts

Wes Bos

We're probably not even 20% of the way through the CSS thing. So let's let's finish off the features of CSS and then maybe we'll do another one to talk about frameworks.

Topic 41 45:20

Decline in CSS framework usage

Wes Bos

CSS. Super interesting is to see the drop off of CSS and JS.

Topic 42 45:26

Decline in JS framework usage

Wes Bos

So I think there's we we could talk a lot about that. Yeah. Yeah.

Scott Tolinski

Let's talk about accessibility features here, before we we head out. And I guess there's some other CSS features. It looks like just about the same amount of people are using prefers reduced motion. That's the ability to turn off animations for, people who, it. Prefer on their device to reduce motion, prefers color scheme so you could have A 6% jump Been people using first color scheme means meaning that everybody's implementing dark mode. Everybody's implementing dark mode. It was a hot thing. The new syntax site has a light mode, a dark mode, and a system based theme as well. The default is the system based theme.

Scott Tolinski

There's actually a little hidden theme picker on the new site. In fact, there's a level of tutorials and a century theme as well.

Topic 43 46:05

Dark mode usage increase

Scott Tolinski

Prefers reduced data, that's an interesting one as well. You could degrade various aspects c s of your CSS, essentially, to make them load faster for people who have less data available. It. You can display none things, obviously. It'll prevent them from loading. Right? Mhmm. Prefer contrast for those of you who want contrast, forced colors, forced visible.

Topic 44 46:34

Increase in accessibility features

Scott Tolinski

Glad to see that all of these things are mostly

Wes Bos

ticking upwards. Hopefully, we'll see them tick upwards even more next year. Right? Moorshed colors is one I have not seen before. It looks like a user of a browser can force a browser to use specific colors for outlines, backgrounds, borders, text, etcetera.

Wes Bos

And you can use Forced colors to detect if a user agent has enabled force colored mode. Interesting. It's a bummer that the

Scott Tolinski

c s CSS author has to implement that. Right? Like, I want a browser that if I say force this color, I want the browser to just force the color, for me, I don't I don't want the to be like, oh, the site doesn't force the color because,

Topic 45 47:08

Browsers should force colors

Wes Bos

the below example only yeah. Oh, I see. So you can write a media That says at media force colors active. So when somebody has forced it, then you can change the border and you get a variable called button text.

Wes Bos

Mhmm. So like what the user has specified to p x button text solid.

Topic 46 47:34

Using forced colors media query

Wes Bos

Man, That's pretty that's been in Firefox for been in all the browsers for a long, long time. Yeah. I have not not had that before. But I guess, like, if you Have a website and your user is trying to literally overwrite your CSS to make it work for them, Then you should be able to you should double check that your website looks decent, you know, like you're not having a weird Like dark mode sometimes goes weird. So imagine the weird stuff that could pop up when people are forcing the overrides.

Scott Tolinski

Yeah. If you wanna try any of these accessibility features out, I found Polypane to be the best way to do that. Easily toggle any of that stuff. Polypaint's a a neat little browser, has all these accessibility features built in. So if you're out there and you're like, I don't know how to work with any of it, Polypaint will do it for you nice and easy. I think all the browsers We'll do it nice and easy too, but,

Topic 47 48:30

Testing accessibility with Polypane

Wes Bos

they make it a little bit easier to find on individual panes. The last section we have here features just other features. Some interesting one is CSS Has jumped almost 20% in people who have have used it. 51% People have used it? Oh, people 51% of people who have who responded,

Scott Tolinski

38% of people who believe that. Seems I'm sorry.

Wes Bos

That's extremely high.

Scott Tolinski

For the support it has? Yeah.

Wes Bos

Where has 28%. Where and is are are really handy, although, not as useful now that we have nesting, which is is good. Still still useful, but a lot of the use cases where I don't wanna have to rewrite the selector many many times. You're telling me that

Scott Tolinski

more people have used, has then individual transform properties. I don't buy that. Individual transform properties, you can just do a trans translate property instead of transform translate. They're super handy. There's no, like, rotate property instead of translate or transform rotate.

Topic 48 49:16

Disbelief in CSS :has() usage

Scott Tolinski

One of my favorite ones on here, Wes, that is only seeing A slight intake was at property probably because the support there isn't isn't there for it. Actually woah. At property now, As of right now, it's supported in Firefox. So it has 81% support. You can use at property, folks. And what is that for? It. So at property is part of Houdini. It allows you to to define, believe this, a type for your CSS variables.

Scott Tolinski

We love TypeScript so much. We put it in our CSS variables.

Topic 49 50:04

Using @property in CSS

Scott Tolinski

So it allows you to define a type for a CSS variable, enabling a lot of really cool things. It. The the number one easiest, solution that this enables anybody's ever tried to put a CSS transition on a gradient. You'll know that you cannot do that, really. This allows you to do that because what you're able to do is define variables as a specific a type. And if it is a specific type, then the browser then knows how to transform it beyond it just being a string. It knows this is a color. It knows this is a pixel value, whatever. In fact, I I could list the the types out here, but Wes hates it when I do that. So CS go to, Off the top of your head, can you name 5 different CSS types? There's more types of CSS than JavaScript, I think. Yeah. You know what? I could have because I I I read them really quickly Okay. During my last conference talk, and I I don't know if I can remember them.

Topic 50 51:01

CSS property types

Scott Tolinski

But, obviously, there's gonna be, like,

Wes Bos

Length. Yeah. Length would be like a pixel percentage.

Scott Tolinski

There's gonna be a color.

Scott Tolinski

Yeah.

Scott Tolinski

There's gonna be font size.

Scott Tolinski

Is that one of them?

Wes Bos

No. Wouldn't that be a length?

Scott Tolinski

Like, a a font size is a pixel or a rem or m or Yeah. But it's not a length. Yeah. I guess I guess it is a length. It.

Wes Bos

Number is 1.

Wes Bos

Time. Time. Time. Yeah. Like like seconds. How long a How long an animation should take? Rotation? Is that one of them? Angle. Yep. So Angle. Yeah. Okay. It's it's angle because what are what are the different types of angles that you can specify in CSS. Degrees, turns,

Scott Tolinski

radians, and yeah. I don't I don't know other than that. Yeah. Turns are the one that nobody remembers. Yeah. The hell is a grad?

Wes Bos

It's a radian. A gradient. But there's no. There's there's we have radians and gradians.

Wes Bos

Oh, gradients. One full circle is 800 grad, and 1 radian is 1 rad. I I tweeted about using turns the other day, And I got so much hate people like just use degrees.

Wes Bos

I was like, turns are super handy. Like turns are way easier to have.

Wes Bos

If you have a 4 out of like, you have 10 notches, and maybe 10 is not a good idea. You have 12 notches.

Wes Bos

Right? Yeah. And you have you're at 4.

Scott Tolinski

What's that? You know? Yeah. How about this? How about we get a new one that is, like, o'clock? So you could say it's at 12 o'clock.

Scott Tolinski

That's the new rotation property.

Topic 51 52:33

Using CSS angle units

Wes Bos

URL image, color, length percentage, Length percentage and percentage. Oh.

Wes Bos

Number it's kind of fun to dig into the nitty gritty of this this type of stuff, you know? Yeah, it's very Resolution.

Wes Bos

Oh, DPI. That's that's a show we should do. The Wild West of print CSS. Oh, yeah. Somebody somebody messaged me the other day and we're like, Hey, I need to print a custom identifier at the top of every page only when it's printed.

Print CSS usage

Wes Bos

And I was like, CSS counters and print Style query.

Wes Bos

It's a I I laid out entire book in CSS once.

Topic 53 53:15

Printing books with CSS

Scott Tolinski

It's a wild, wild world. It's a wild world. I remember it. Desperately having to support this, and I supported this as recently as level up tutorials to do our invoices and stuff like that and make the invoices look nice. Yeah. You wanna print the invoice page? You don't need a separate page for that. Just stick it to the current page you're at and make it look nice with print styles. Yeah. But and there's, like, a whole

Print styles for invoices

Wes Bos

Set of like header footer.

Wes Bos

Yeah, we should we should do a show on it. It'd be kind of fun. It's it's not something you use all that often, but If you have a tool that needs to export something to print and you're doing it in CSS,

Topic 55 53:51

Plan for print CSS episode

Scott Tolinski

that's what it is. You know? That's what it is. Alright. Well, let's get into the part of the show of sick picks and shameless plugs.

Scott Tolinski

Sick picks. Picks that we think are sick, things that we like, And I think you're cool. Wes, do you have any sick picks for us today? Dude, I

Wes Bos

loaded up my list here. So we got here.

Topic 56 54:05

Standardized containers

Wes Bos

Yeah. I'm going to sick pick, now that kids are back to school, it drives me crazy when Tupperware and snack containers are not standardized and drink containers.

Wes Bos

I only want one of something in the house, because if I'm searching for the lid for something, I'm furious because this is such a waste of time.

Wes Bos

So I'm big on the government standardizing Tupperware and socks. Honestly, government can back off of literally every other aspect of my life.

Scott Tolinski

But socks,

Wes Bos

standardized socks and containers. So a while ago, I had gotten the like Tupperware.

Wes Bos

They have like a knockoff version at Target in the States. I got a bunch of those and they were good for 3 or 4 years, but they started shattering.

Wes Bos

So I Got these other ones. We've had we had a couple for many years from when the kids were babies. They're meant for babies. They're called Beeba clip containers, And they have 3 different sizes and they're plastic, but like kind of a flexible plastic, like not enough that it will fall over, but kind of similar To like a deli container, a little bit more rigid than that. They're seal proof and the lids clip together so the lids work on all 3 sizes.

Wes Bos

They screw on and then you clip them together. So I do this. I clip all the kids together, put it in their lunch pail and they're not falling all over. It's nice and neat.

Topic 57 55:29

Beba Clip containers

Wes Bos

And I ordered like a 100 of them, and we have way more than we would ever need. But we have a bunch in the basement just for As when they do get lost or when they do get stained from tomato sauce or whatever in them, then then you'll start to bring out The extras. So I have standardized.

Wes Bos

I did. I did so much research and I have standardized on the Beba Clip containers, they're meant for baby food, but they are the best. Cool. Yeah. We got something kind of like this

Topic 58 56:09

Kodiak Cakes protein oatmeal

Scott Tolinski

For going to the pool, our pool had, like, you know, no glass rolls, so we got something that they they screw to the screw together on the on the top instead of clip. Clipping Seems pretty nice. Although, like you said, I'm not about to standardize on something else. I am going to sick pick a, oatmeal Because I was I was telling Wes, I'm struggling to get enough, like, protein in my diet.

Scott Tolinski

It's hard, man. It once you start doing, like, the macro counting and everything, it. It it's you realize very quickly, you get a lot of carbs and a lot of fat, but not enough protein Yeah. Pretty much across the board every single day. So it. I wanted to get some way to get some more protein in my diet in the morning, so I I got these. And I I do wanna say, like, I I have it. The protein shake stuff. I I can't do, like, 8 shakes a day. That's not gonna happen. No thanks. And I'm I'm not gonna eat a, an a massive amount of eggs, CS. Even though I don't know if the price on those is back to normal or what, but either way, I got, a massive pack of Kodiak Cakes oatmeal. It. Kodiak Cakes' famous for their pancake mix, but I did not know. So I bought this pack of 6 boxes of Kodiak CS Cakes oatmeal.

Scott Tolinski

And it's, like, $26, and you get 6 boxes of 6 packets.

Scott Tolinski

It. And that's enough oatmeal for me for a long time. And what I'll do is I'll put a scoop or 2 of protein in that bad boy, and there's already in that 12 grams of protein it. Per serving.

Topic 59 57:39

Adding protein to oatmeal

Scott Tolinski

So you're you can get loaded up with protein in the morning if you do a scoop of protein on top of that, and this is like a sludge of it. Oatmeal and stuff. So if if that's you, you're out there. I I got the strawberries and cream, which, you know, they're they're sugary. It's sugary oatmeal, but, hey, they're pretty good. And Kodiak Cakes, I've always had good experience with them in general. So, check it out. I've been doing this as my morning oatmeal. Check it. I you. I see the pancake mix at Costco

Wes Bos

every time I go, and I always wonder, is that good? Like, that's our primary o that's it. That or or that's what we get primarily for our pancakes. Oh. Yep. Maybe I should try it. I always, like, I always was, like, hesitant because I I have made protein pancakes in the past, and it's They were not good. So I'll have to try this out. Sick.

Topic 60 58:25

Speaking at FITC Web Unleashed

Wes Bos

I'm going to shamelessly plug a conference I'm gonna be speaking at in October. So if you are interested in going to a conference, I would Highly recommend coming to FITC Web Unleashed.

Wes Bos

It is October 14 through 16 in Toronto, but it's also online.

Wes Bos

So I'm going to be speaking there. Lea Veru is going to be speaking there. Jason Langsdorf, Chris Coyre, Kyle Simpson and Matt Torsky.

Wes Bos

A good lineup. It's going to be good. If you haven't been to a conference since COVID, I highly recommend it. It's very refreshing to meet people in real life and get excited about this type of stuff and kind of look into the future of it. I'm not getting any kickback from this. I'm not even getting paid to speak at the conference, but it's one of my favorite conferences.

Wes Bos

I think I've spoken every year for, like, 8 years, So he gave us a half off coupon code both for in Toronto and online.

Topic 61 59:15

Discount code for FITC conference

Wes Bos

Poutine, he gave me like a code like West Boss, and I was like, I don't like When people give me my name as a fun code because it feels like I'm trying to, like, sell something.

Wes Bos

And, like, honestly, it just is an awesome conference, so I asked them to change it to poutine.

Wes Bos

Okay. I like poutine. Yeah. Come on down to Canada. We'll have some some poutine, And you can learn a thing or 2 about the web JavaScript CSS. I'm doing a talk on like AI and JavaScript,

Topic 62 59:50

FITC talk on AI

Scott Tolinski

So it's gonna be some good stuff. Heck, yeah. Well, I'm going to shamelessly plug the syntax TikTok. If you're on TikTok, we have a syntax TikTok. It. Just search for Syntax FM on TikTok. We're up there. We're doing clips from the show so you can get a little distilled content if that's the type of thing you're into.

Scott Tolinski

Maybe you can't catch every episode, or we're also doing kind of exclusive little videos where, you know, we Wes and I are are teaching you stuff. So check it out. You. Alright. Thanks, everyone, for tuning in. Catch you later. Peace.

Topic 63 01:00:08

Shameless plug for Syntax TikTok

Wes Bos

Peace.

Scott Tolinski

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.

Share