#40: Outlooks from the State of CSS Survey

Everybody welcome to the Drunken UX Podcast. I’m not going to do any clever intro this time although by saying that I guess I kind of am doing an intro which defeats the purpose I guess in the long run so maybe, maybe when my mind man next episode, just gonna come in and just going to be nice comforting. Hey, how you doing?

when I went to a dark place. I’m wearing my Metallica shirt right now. You know? There’s a lot of ways that could be interpreted, folks. I am your host, Michael Fienen.

host thing there. I think

Well, then I don’t know what to do.

guys, gals, people.

Like I have I have to I have to take the show in while you’re dying. And then after the show’s over, then we got you hell but you don’t have access to our AWS account to upload this episode. So that’s a problem.

Just steal my SSH keys. You’ll be fine. Folks, if you are in the market for a map Be sure to stop by our nice sponsors over at New cloud you can check them out at in you cloud.com slash stroke and UX. You can check out their product the their illustration services, their 3d mapping services and what not. What not what for what, where? When you cloud when I’m in the wind cloud. Let’s see. And you can find us on the things such as Twitter and Facebook, run by a slash drunken UX at either of those Instagram at broken UX podcast. slack is broken UX com slash slack. What do you got in your fancy little cold glass there? The looks icy. This is a Tanqueray and tonic. It’s a very warm day. It’s like

Right. I went outside last weekend and that I I joke about Kansas as weather a lot because Kansas is weather isn’t in fact weird. But it was so humid. Again, it was a kind of humid. That even surprised me and I’ve lived here for 37 years. Yeah, like it was it when people say you know you can cut the humidity with a knife. It was like that, except worse.

Uh, yeah, Saturday, I think. Okay.

Yeah, it was it was bad. It it’s I mean, it’s still not great. It’s cooler now but our humidity is still just normal. As such, I too am drinking a cold refreshing glass of scotch ice broke out my tomato and 18 which I’ve had on the show before to make 18 tomato tomato it’s a Highland and that’s really all there really is today about it’s nice. It’s a very robust I just took a sip of it and forgot that this is a strong 18

I mean, it’s it’s bottled at 46% so I mean it’s got a bicycle, but it’s also got a good strong flavor to it. It’s nice. I do like it I just forgot momentarily. I’m drinking it out of my nice little slant the ice glass so it is actually chilled. Nice. I like that I do I’ve grown to really enjoy this glass because it does give you that nice cold quality without watering down the scotch. It has a nice flow really. So the water and helps kind of open it up as you go. So trying to I’m trying to put this bottle away and I’m going to go shopping soon. So maybe we’ll have some new stuff for one of our future episodes. Excellent. new and different, I guess.

I mean no. Every episode or so.

Oh, it should be.

I have. I have one. Look. I throw a rule on there. Every time. You mentioned Jacobs law you have to chug Unknown Speaker that fair.

Yeah, sorry. I derailed

Is this back so the the far side comic, the he’s pushing

You know that off the top of your head, I can’t do that.

usually on when I go in, they turn off after I’ve been in there pooping for 15 minutes. Right? Exactly.

Right? Because these these buildings, right? Isn’t it called like lead? I think is the

So they they implement and some of it, I’ve seen this stuff like it, there’s some of that the motion sensing lights, like, those are just showing up places. It’s not a whole lot different from like, the motion sensing. Paper Towel Dispenser was like this. So that stuff is leaking into all the places regardless of if it was built with it or not. Right, it gets it gets retrofitted in and then others are these buildings that when they are created, you know, people have this grand vision of what we’re going to do all of these things. We’re going to put stuff on the roof. We’re going to make the AC systems be intelligent. We’re going to right yeah, again, with the lights, you know, we’re going to bind the lights to certain different motion sensors in rooms and whatnot.

that the failing there, right, is you’re relying on the human to open the windows, you’ve got the equipment there, but you aren’t making the equipment good enough to to open the window itself.

Yeah, like one of those big alarm panel kinda, yeah,

We’ve, we refer back to those laws of UX a lot. And for good reason, because a lot of those laws are have been aggregated from different places over time, and they are very universally applicable. And there’s a couple of like, one of them is the law of common region. And the other ones law of proximity. They’re very similar in terms of what they mean, which is the way people perceive things that are either close together, are grouped together, right, like what you were describing, you know, because when you started talking about what the panel looked like, in the building I used to work in here at Pitt State, right, when you walked in the doors on the right hand side, they had some of those big panels. They were always locked, you know, and they just had, like, they were like a panel of little lights. And, you know, nobody in the world needed to worry about those except for like, the campus police or whatever. Because they were they were just fault sensors. They were Yeah, they were tied into the fire alarm and the security sensors and all that for the building. But nobody else ever looked at that. Because to them, the thing on the wall with all the lights was the fire alarm. That’s right. That’s what it was. And so if I saw another box on the wall with lots of lights that was near that,

I would, I would a assume it was part of that and be I would totally wipe it out my field, like I wouldn’t even care,

Yeah, no, I completely get that.

It reminds me a lot when we were talking with Rachel cherry about the Gutenberg accessibility stuff. And that that idea of the forest for the trees, when you’re looking at problems and solutions, like on paper, the idea of let’s let’s have a system that the AC senses the outdoor temperature, and then alerts the users to know when they can open their windows, because that will be better. Right? That idea. Sounds great on paper, and probably and it passes all QA testing in functions exactly the way it is meant to function. Until you put it in space, right, until somebody else has picked that up and put it into another system. In this case, like if you consider the building itself to be a system, you know, now, nobody is coming in afterwards. You know, there’s, I shouldn’t say there are there are I’m sure there are people out there who specialize in building usability as just a trade. But nobody hires those people, in most cases to come into a building after the fact and go through it. It makes me think about what was a Towering Inferno, the remake with the rock

Yeah, it was it was a Towering Inferno or something like that, where he’s, they they’re burnt, the the terrorists want to burn down this building, and using false in the security system to do it. But the rock was the guy that was hired to come in and test the security system for any and all possible failings like that was his job to come in and look at the system that was put in place and then figure out what they did wrong when they put it in, or, or not what they did wrong, but but what consequences there that weren’t accounted for. Yeah, that were that that’s kind of what that makes me think of is somebody needed to come in after the fact and look at these systems and say, Oh, yeah, I wouldn’t put that there. But you also can’t do it after the fact. Right? Because it’s already been wired in, it’s already bolted up and wired in and all that, too. So there’s a whole other set of dependencies at that point

Okay, once. Okay, go on home.

And what do they call that the impossible tea kettle or something? Got a name.

usability in general, that’s, that is the you know, that’s why in the field, we refer to guys like Norman, like, Nielsen, Jared spool all of these folks because they have usability experience that does transcend the web, and the techniques that go towards learning, the usability problems in any given system, and I use that phrase system, incredibly broadly, beyond computer systems, the the skills and techniques you use to surface those are very cross applicable. Across the board like to really like if you want to talk specifically about computer usability, what I tend to tell people to look into is h ci, oh, yeah, human computer interaction. That’s where you start thinking about usability, but only within the confines of the user, the keyboard, the monitor, right? But you don’t have to do that to get in the usability in a system. And I, I do I like this, because like, think about to use this example. So we’re talking about buildings. And even if that building is absolutely perfect, from the moment it is launched, and they do have people come in and and check these systems out and ensure they’re laid out, well, what happens the first time, they decided they needed to change a storage room into office space. And so now, their motion sensors were laid out differently for a different purpose and different usability. But nobody is coming in after the fact to address you know, those kinds of things are if an office gets changed into a show room, or if your blogging platform gets changed into a CMS, oh, topical, I just gonna throw that one out there and run away from it. But it that’s it’s that kind of changing modality, though in a system again, to use the word broadly that adapting to that number studying the challenges, because that’s what some of this article was getting into as well was like, they would have these lab rooms that weren’t lab rooms originally. So that was I think that was the one with the with the drinking bird example. Oh,

So that they Oh, yeah, some kind of test. And the room had new light switches.

It’s double weird, because it makes me wonder about the system that was in there, because any of like the motion switches I’ve ever seen. Yeah, they’ll have a button on them, too. Yeah, that’s odd. Like I’m left wondering what kind of room This was,

But the you know, the big takeaway here is how this reinforces the idea that this stuff is a cycle, it’s not a finish line. Even it doesn’t matter how perfect it is, when it launches, it matters, what you do to make sure you are maintaining that standard six months down the road a year down the road, as you add features as you change features are you still being as judicious that far down the road as you were when you created it.

Hopefully, we’ll get better at it down the road, we probably won’t.

Unfortunately, I see it a lot. Like I look at you know, website redesign, you know, how many companies are willing to hire a consulting firm, you know, a marketing firm designers all this to come in and do a job, and then send them away when the job is done. And yeah, and that’s what I think happens in these cases, like, even with these smart buildings that are built from the ground up to be forward thinking and all of this stuff. Yeah, they’re built with all that in mind. But as soon as the building is done and open, then it’s, you know, a landlord tenant relationship. And like, so many of those, the idea of bringing spending money to bring somebody back in, you know, anytime you’re implementing spaces just as something, there’s no point to doing for them.

Yeah, I didn’t watch them. But I’m, you know, you know, of that I know of them.

to the walls.

That damn show wouldn’t be good to start doing that with websites. I actually, I would enjoy the shit out of that. I would love a website where it’s like, you know, extreme makeover website edition. I’d be down for that. I would judge that show. Oh,

Let’s switch gears over to CSS. Unknown Speaker This has nothing to do with you. Because

this has nothing whatsoever to do with UX at all. It’s totally boring. And off the off the beaten path. Do you remember Episode 30?

So Episode 30 was an episode where we talked about a triad of topics, which ranged from privacy to the Captain Marvel website, which was damn cool. But we also talked about the state of CSS. There was a survey that was going on back then, three. I was gonna taste through CSS tricks, which is not the right way to phrase that. It was. It was Yeah, it was one of the folks who writes for CSS tricks and has done in the past. And I’m like being cagey about the name, Sasha grief. And Sasha, if I’m mispronouncing your name, I apologize vehemently. But it looks like Sasha grief. And I, I think that that is not a German last name. So I’m pronouncing that he first

But he started the state of of JS survey back in 2016. This year, they decided to do the state of CSS, which was super cool. And we said, hey, go fill this out, that will be beneficial to everybody to hear about what you know, people think about CSS in this day and age. That survey is now complete, and has released all of its findings. And he posted a little article at CSS tricks that will have linked in the show notes that were it was three predictions from the state of CSS survey. So I thought it would be fun to sit down and look through those. Yeah, and a see if we agree, but also, you know, throw out any of our own predictions for the topic of CSS,

Yeah, and there’s a, there’s a ton of information that like we’re not going to go over anywhere near all of it at all. Yeah, certainly not in the next 45 minutes. But go do go check it out. And it’s, if nothing else, it’s a very cool exercise in data visualization. So to start off with, I do want to mention one other website that’s kind of adjacent to all of this, if you’re interested in keeping up with the evolution of CSS, and what people are talking about, and what’s getting created. The w three actually has a site called the future of style. And we’ll have a link to it. Because the The link is kind of wonky, it’s w three.org slash style slash CSS slash planet. The site is actually not awesome.

And the thing about it is the thing that will like really get Yeah, is that it’s so that for those folks who aren’t looking at it, it’s a they’re using CSS columns, at least I think they are, I’m just assuming that from looking at it. So on my screen, it’s a four column layout. And all of the latest article links are anchors to story snippets elsewhere on that page, which as it turns out, using anchor tags, like it inner page anchors, on a multi column layout is super not usable. But it is a source of all of what is getting talked about and it is actively maintained. And it’s definitely a good use case. If you ever want to find a an example of CSS columns.

that, because I’m they are actively using columns on it for for the layout. Yeah, I see that. And it’s applied at a very high like the body tag is where they are defining that. So I mean, it’s Yeah, it’s it’s clean markup, I just don’t think it looks great.

It is a very pretty sight.

love it. Cool. Yeah. And in all fairness to I think you do need to give credit to Rafael Benito, a, whose name I will also apologize for if I said it wrong. Because a lot of the like, the visualization stuff on the state of CSS site is the Meebo database library that they created. So okay, like, there, there’s definitely a lot that went into making it look beautiful, I think, but it’s very good. Well, yeah, I definitely think it’s it’s a very cool kind of layout. They have they have a T shirt that has the logo from the

Oh, nice. Yeah, that’s pretty neat that that’s cool. The, the thing about CSS, because the article is about, like, what the predictions are. And one thing I’ve just kind of want to throw out there is that I’m a firm believer that for something like CSS and JavaScript to for that matter, a lot of the A lot of what we see is the future is already here, so to speak. Like, yeah, we’ve seen in the last couple years, you know, the explosion of CSS Grid, and the way it was adopted, the way CSS Grid was adopted into the spec and rolled in, was very clean compared to past iterations. You know, the increasing use of CSS variables, the ability to do CSS shapes, the increased focus on being be able to do functions and CSS, like, you know, we’ve got a tribute, we’ve got calc, and there are some others that are in the works. Darker, Unknown Speaker lighten

saturate units, you know, now we’ve got fr units, we’ve got VW units, what’s what’s up, I don’t know, off top my head, it’s like fractional ratio or something unit like they’re, they’re meant to be, or maybe just means fraction, because Fr. But like, if if you are laying out CSS Grid, you can lay them out in in fr units to control the scale. So each one is one they will be equal. If one is one in one is how can or you know, point five, then it will scale them accordingly. But it gives you that finally, you know, part of that scaling ability that we couldn’t cover well with something like percentages sometimes. Sure, because you know, Fr units can go above one. Whereas if you go above 100%, and CSS funky, things tend to start happening. And then we also have more stuff coming. So there’s things like spatial navigation in the works as a spec for CSS, which is really cool. It for if you haven’t read any of it, it’s Do you have a fire TV, Aaron, or Apple TV? No.

Do you have like, if you ever use like Netflix or something on it? Oh, yeah, yeah. And and so you know how like you use like the arrow keys on your remote to kind of go up and down inside the side and all that. Yes. So that’s spatial navigation, as opposed to, like, think of it compared to tab navigation, which tapping is linear through the layout. Spatial is designed to complement that. So imagine being able to be on a page and use your arrow keys to Okay, like a tab, except that you don’t have to go next, next, next. Next, you could go next, down, and down again, and then left and end up into something else spatially on the page. So that’s a spec that’s currently under, as I think that’s in release candidate, but I may be wrong. More functions are always in the mix color adjustments. I think that was what you were just talking about, like being able to define, you know, changes to a color from lightning and dark and the saturation and things like that. There’s a color adjustment spec that’s coming into play. There’s a bunch of these outline, there’s an article, it’s it’s from last year, but some of this stuff still hasn’t come out quite yet. But Smashing Magazine had a good article on it, that will link the

Yeah, it you know, that reminds me and this is kind of a tangent, but it it makes me think about it. Do you remember the essay? Do you remember it’s still in existence, but the Adobe Color tool? But it was spelled k you ll er? color? Oh, yeah.

Now. It’s just color. adobe. com, but they actually spell it correctly now. But it’s it’s a color picker. And it’s designed to help you create color palettes. Oh, yeah. And they they give you all of these ways. Like you can tell it I want, you know, try ads or I want Yeah, I want complimentary colors or things like that. And so using that you can help specify like the way the colors are related from a shading standpoint and everything. I thought, I think that would be very cool to see something in CSS to support from a calculation standpoint, because that’s all it is. I mean, they’re just doing mathematical calculations against the the hue saturation and all that. So Sasha, his first prediction was a very simple one. And it’s one that I think is important, which is that there is still a lot of unexplored territory in the realm of CSS, as it exists today. It’s phenomenal. Like

And I think like we’ve talked before, one one area like I’m particularly weekend, and this carries over from my days when I was trying to learn flash back in 2002. Is animations. Like the things you can do with CSS animations, it’s crazy, pretty nuts. And it gets really involved as far as like, animating key frames and defining, you know, what’s translating the what and all of that. That stuff is, is hard. One thing that they pointed out was how underutilized grid was still. And not just under utilized. But like under known about.

And take put that into perspective, though. That’s half the people who have heard about it, have used it.

and interestingly enough that the animation stuff is actually according to this survey. animations are 91% transforms or at 95%. Transitions are at 95%. So am way behind the curve on animations as it were. But yeah, I found it interesting that there’s still a lot of reliance on flex box and much less reliance on grid at this point. And I don’t know if that’s a comfort thing, if it’s an appropriate in this thing, because flex box and grid do have different applications. And so yeah, I don’t know what the reasoning is. And unfortunately, this survey doesn’t have the depth to answer the Y, really. But it does certainly raised the question that there is a lot of territory there. css shapes was another one, CSS shapes is in use by less than a quarter of developers from the standpoint of being able to produce elements that have a shape to them, like, you know, you can define if you’ve got a an image that you want to wrap text around, you can say, you know, this has a circle around it, or whatever. So that text actually flows. And I was thinking about that one in particular. And I think this is one of those areas where it may be this is misleading, because I think the application for that is somewhat limited. Like a lot of people have heard about it. But it’s it’s the smallest out of all of our shapes and graphics. comparisons, everybody has pretty much heard of all the threads. And she has the least utilized, I can’t write feel like that just means that the use cases for shapes is maybe lower.

Now, a comparison for that is the masking to me. Because masking is roughly similar, it’s slightly higher. I think it’s like 26%. use masking. Yeah. But you know, if you think about and I’m guilty of this, and it’s, I say guilty, it’s just different. You know, there’s different ways to accomplish the same thing. If you look at our transcripts on the website, when the little speech bubbles pop up, and it’s got you and eyes avatars next to it. They’re round, but the edges are not round, the images are square, right? And I’m using a border radius to do that, because that’s okay, you know what a lot of people don’t, they just bought a radius, the images and and that gets you a circle. But you could just as easily apply a CSS mask to create a circle.

glad you didn’t come to me and say, hey, let’s make them triangles. Unknown Speaker I’m not sure I could do that with a border rating is

Oh, yeah. So yeah, line break for Chinese Japanese Korean text. Okay. Yeah. I’m thinking of word wrap is what’s in my head. initial letter isn’t used very much, which is interesting.

Yeah, no, it’s definitely like thing, but

I think it stands out to me, because it’s one of the things that the Drop Cap option is one of the things that’s in Gutenberg. Now, for paragraph Oh, yeah. Like, you can turn on Drop Cap. And I think they use the initial letter selector to do that. Yeah, it’s one of those, again, random kind of things there. But yeah, so and variable fonts, has a uses race ratio of 37%, variable fonts, or something that I think will probably get its own episode with us at some point? I don’t know. Have you seen variable fonts at all? Have you played with them at all? I

So these things are are super cool. And I saw them demoed at an event apart up in Boston, a couple years ago. To do I think was Eric Myers was talking about him. And what he was showing was like, you can set up these fonts that can have a properties of their own. So for instance, like and I apologize to all my typography. folks out there, I don’t know all the lexical like lexicon, lexicon, lexicon for typography. But like, if you’ve got a be you know, and you’ve got the the stick that comes up from the top of a lowercase b, you can you can define your a right so even you know this better than I do. They you can set your fonts to make those longer, or the the Seretse, you can have a setting stress under a cinder a center. That’s right. I know that phrase I senders and let me guess what a P and a Q us? Is it? Is it a the center words? Yes. That is correct. But you can set you know, and like you can set the way the font gets thicker and lighter, you know, if it’s regular or bold or whatever, as opposed just their weight. You can change the way they get thicker and lighter. Any basically all of these different little properties of the fonts, you can turn into properties that you can set in CSS, but it’s cool. They’re actually at this point fairly well supported, oddly enough. I 11 doesn’t support variable font properties. And of course, but edge does. Firefox does chrome does Safari does. They just are they obviously take a lot more effort to create. I don’t know I haven’t looked at like font squirrel or some of those were, you know, or even Google fonts. I don’t know how many, like bought repose have a lot of variable fonts yet. But they’re definitely interesting. From a design concept. I think they provide a lot of options to people outside of just that question of well, what thought do I use well, pick a font and maybe you can make that font more interesting. Whatever it is that you want or something there’s there’s some stuff there that I think would be very interesting to dig into.

Yeah, it’s really cool. I’ll throw I’ll tell you what, after we record Tonight, I’ll go hunt down an article for it. Now throw it in the show notes for everybody. So if you want to go learn about variable thoughts, there you go. Nice scroll snap, used by 12%.

Well, not so much hitting a button. But just like when you scroll. This is especially useful for mobile devices. Okay, so like, if you’re scrolling your page, you know, with your thumb, you can have it kind of bind the two sections a little bit kind of like an anchor. Okay, so that you can scroll in between. So like that where you’ll see this be really useful is if you’ve got panels of something. And okay, and while I hate to use this as my example, but a carousel.

so when you are like on a mobile device, if you’re using a swipe action to scroll, it will Yes.

that’s at 12%. I this is what I’d like to learn more about myself from an accessibility standpoint, because I feel like I feel like on on one hand scroll snap feels like a really good assistive tool for people with motor control. Oh, yeah, issues to that. But I also wonder if it doesn’t simultaneously create a, you know, friction for them. As a consequence.

like, it’s one of those things, I see opportunity, but also concern, and it’s until I work with somebody that can tell me I don’t know, on

the end result being like all these things we’re talking about, they all kind of fall into this bucket of interaction kind of stuff. And it feels like looking at these results from the survey, that the interaction area is where there’s still a huge amount, you know, overflow anchor, that’s got very low adoption over scroll behaviors that run in about 50% 48%. But all of these interactive pieces, and this is where CSS is evolving to naturally I think it’s I think it’s normal that we would see less coverage there. But it does speak to how much opportunity there is for you know, folks to still be a CSS expert. And being a CSS expert really does mean knowing the things that the other people don’t. It’s not just about knowing how to, you know, shorthand, a thought declaration that used to be like, the pinnacle of being a good CSS guru. I can shorthand, shorthand. Background I can shorthand fought. And nobody else can do that. But anymore, knowing how to write good calc functions, knowing how to write these interactions, knowing how to do the animations, those things are still, I think opportunistic for folks. Yeah. Sasha’s next prediction is that functional CSS will increase. So do you remember CSS and garden? Yes. Did you use CSS in garden? Yes. Did you contribute to CSS in garden? well know how many times can I say CSS is in garden before it just really starts running together?

was getting there. So CSS then garden is an example that Sasha uses for those who are uninitiated to it. Back when CSS was first becoming popular and exploding onto the scene. Keeping in mind, CSS is 23 years old now with 23 this year. Like, oh, been around forever.

I read that. And now Now that you have read it, I realized I wish you hadn’t read that for my bed. That cuts a little deep. It’s Unknown Speaker too real. A little little too. Yeah,

a little too real for me.

it does. There is that certain quality and I have had to make arguments for some of these things as a consequence. Because they are different. So this is in garden, for those who aren’t familiar with it came out. I don’t know what 2000. God 2003.

And what they did was they built a site that was just very clean semantic HTML. And it was a very basic layout, I think what it had a header area with a nav bar, I think there was a sidebar and a section for content with a few like little items thrown in there, right, and image and text and stuff.

it still exists for what it’s worth, like we’re talking about it is if you can’t go look at it. Now. It’s it is still a thing, and you can still go check it out.

Because it’s really cool stuff. But the whole idea was that you would take their site and write your own CSS for it. And you would go into their gallery, and you could look at all the different ways that you could present this site using nothing but CSS.

Yeah, using the nested selectors, or whatever the case was that Yeah, the problem was that, at least in today’s day and age, but even back then a little bit was that it was a really great exercise, but not altogether practical. Like as a production approach.

It does depend on on your site, the art, or the the argument I’ve heard, I can’t remember if this was in an argument that Sasha made, or if it was somewhere else that I had read about it. But the thing was that very few people build websites in a way that they need to update their sites, the whole other layout while maintaining the markup. Like if they’re doing a redesign, they’re generally redesigning the site. They aren’t just redesigning CSS, although that was kind of the philosophy that was being preached at the time.

totally.

The reason that we explain this is because the approach to CSS and garden relies on techniques that are diametrically opposed to functional CSS, functional CSS, is, is the approach of like, bam, block element modifier, or Tachyon, or atomic ss, these, these approaches that believe in like, you know, one selector one purpose, but as a consequence, your content must have all those classes in it. Whereas CSS Zen Garden is all about nested selectors and things of that nature. Oh, yeah, we even didn’t we do an episode on functional CSS? I think it was a long time ago. Yeah.

I don’t feel bad about not remembering where that bell.

this is Episode 45. And that was Episode 13. You do? I don’t think I said that at the start of the show. So it’s fair that I sent out anyway. But yeah, so the approaches are in a very different and what what you’re seeing are a lot of these frameworks like Tachyon, like bam, that are growing in popularity, and that are finding their place, despite the fact that it does encroach on your content as a consequence. But people are finding them very good to work with and that they’re able to get what they want. Interesting. And they’re also finding that the the sort of monolith frameworks like bootstrap and foundation, yeah, out of, there was a big list of of all these frameworks, and they ranked them by, like, I forget what it is, I think it was like who either Who’s heard of it, who uses it, and what their satisfaction is, are there or wants to learn it? Like there was this calculation they did. But foundation and bootstrap, two of the three bottom spots in satisfaction. So yeah, like boots, bootstrap. Everybody knows bootstrap. Oddly enough, 79% of people knew about foundation. I don’t know where the other 21% of people are living. But then yeah, so you have awareness, you have interest, and then that goes into satisfaction and

that’s, it’s that’s really well, and only 17% have an interest in it. Like that’s, that’s in an incredible that it’s literally a 100% flop. bootstrap goes from the most aware framework to the least interesting.

It is, so they have their methodology here. The interest level is the calculation of those who said they are interested, divided by the number who said they were interested and not interested. So it’s a it’s a ratio percentage. God. interest. Yeah. So bootstrap had a 52% satisfaction rate foundation at a 45% satisfaction rate. But then tailwind had an 81% satisfaction rate.

It’s a it’s a functional framework, functional CSS framework. Tachyon had a 66% satisfaction, right?

Yeah. Tachyon says, another one. So this idea that functional frameworks are going to, you know, grow in popularity is something that is maybe to watch out for. I don’t know that I agree or disagree. I think a lot of it has to do with selection bias a little bit, maybe in the survey as well. Because I think the way you approach CSS frameworks depends on what you’re building. You know, if you’re building WordPress themes versus you know, Angular applications, the way you approach CSS is going to be very different, I think,

I have no idea when so I don’t know what their technique is.

Yeah, I’ve pulled it up here. It does look very much like a Tachyon style. Yeah, approach and yeah, I without but but readable without digging more into it. I don’t know if like this, because I see him, like the way they’re doing their, their text great 600. I’m wondering if they aren’t doing like a, you know, a JavaScript scaffolding around that as well. So that you don’t have to like write to the individual classes you you write like the the parent classes and then like the dash number is then calculated with JavaScript or something like that. Maybe Unknown Speaker talk to us tell us let us know.

that the utility classing approach seems to be popular and increasing. I don’t I don’t know. And I I do kind of go back to that comment about if you grew up with CSS in garden, you may look at functional CSS a little differently. And because I do, I guess, yeah, I know. I do look at it differently.

them is is close ish. I think a lot just all comes back to like what I was saying it depends on what you’re making. Yeah, I, I don’t know a better way to describe it than that be simply because people who are doing app frameworks, you know, the way that you have to think about everything in your browser windows different from somebody who is writing a news article. Yeah. If you’ve got a lot of classes in those news articles that are ultimately reliant on your framework, it means you can’t change those articles over time. And you think about, you know, an organization like, you know, CNN or like Fox, or MSNBC, or any of these folks that have now been around for decades and decades and decades and and on the web, most of that time. And if you’ve ever done any digital archaeology, and gone back and looked at like, the articles from CNN on September 11 2001, you know, those articles are still available, and they need those articles to still be readable and accurate. Oh, yeah, presentation tab standpoint. And there’s a lot of emphasis. Now, I know Washington Post has done a lot of these, The New Yorker does a lot of these, like these articles, that they’re kind of one off articles, because they’re embedded with all kinds of data visualization and imagery, right. And like the page itself is and an experience. And their approach to those things has been that those pages have to be like little miniature apps, basically, they have to contain all of their own stuff, because in 10 years, they want that content to still be archival, basically, archival, right, you know, in quality.

that it, it has to live in that page.

The last step prediction that Sasha made is the one that you were starting to look at there, which is that the battle has just begun. And this is where this quadrant, this is really cool. So what they did was they they took all these frameworks, and they created a a scatter plot in four quadrants, which, which, if folks want to find out where is is that under the environments? No.

Yes. And it’s worth noting to like this is all also broken down by tight. So this whole thing like includes frameworks, CSS and j. j. s, methodological approaches, and the pre and post post processor approaches. So you’ve really got everything in this matrix. As far as that goes, that the Analyze quadrant has the one thing and that was what you said less is the one thing that’s there, and basically, less is getting its ass kicked by SAS.

Yeah, it’s it’s killing everything now. Oddly enough, post CSS does have higher satisfaction.

Yeah. So way lower adoption. So that may, I’ll be interested next year to see if that is able to cross that threshold from assess into adopt

Yeah, there’s a handful of things in the avoid column. Not many are quadrant, but one that will stand out to folks I think, is foundation. Yeah.

This is this is the first year of the survey. You know, it’s it’s there’s no trend yet. If I had to guess if they had done the survey last year, I think both of those would have been higher last year, probably Yeah. I think there is an increasing trend for folks to move away from monolith frameworks. And I will raise my hand on that. Because I think for foundation in particular, because we use foundation and one of the biggest problems with it is it’s just so much more than I need. Yeah. That, you know, once I identify a layout, and I know, I only need a handful of things, I don’t need a even a full grid, you know that there was that emphasis early on. And you should do grid layouts and get a grid framework and all this kind of stuff, because Boy, that 12 column. That’s the future, but it really isn’t. Yeah, we have the tools and resources available and CSS that I don’t need foundation to do a simple grid, I could do it in a couple lines of CSS now. All right. And so there’s no reason for me to bring all of the other j s and all the other CSS, even in the simple version of foundation.

But I think that’s why looking at their quadrants material is higher than foundation. It’s officially in the assess quadrant. And I would probably say that if I had to guess, I think that it’s trend is probably the opposite. I think material is probably increasing in velocity right now. Because I think it kind of does that.

That’s the highest of all of the of the print CSS things. Tachyon. is, I think, a good example of what you’re describing, like Tachyon, even though it’s got low adoption, and satisfaction is ok. But it’s one that once you learn the methodology of Tachyon, adopting it is very easy. But yeah, there is very little guessing with the Tachyon approach, or atomic CSS for that matter. Atomic CSS is higher, I guess I find it interesting. They’ve got Tachyon labeled as a framework, but atomic CSS as a methodology. And I guess,

as opposed that is true in a strict sense. I think of them very similarly. The other thing that’s worth noting here is that out of all of these, there is one, CSS and JS technique that’s getting ready to make the hop from the SS column to the adopt column. Oh, yeah. And that’s the style components approach, right,

which I think was Episode 31.

right ish, somewhere around there. Yet when Dustin was on, and his whole thing was, he taught CSS and JS techniques. Now again, right, that is a specific technique for a certain type of development approach. That isn’t something you would do for everything. But as if you are a person who deals in CSS and j. s, it looks like from that standpoint, the battle is being fought and won by style components, CSS modules is up their CSS modules and style components both have very tightly coupled satisfaction percentages. But style components is running away with the adoption rate,

oh, I was like I, I don’t want to get arrested.

fits. Yeah, I remember that.

almost logarithmic

what’s that? The the name for like, when it starts out really chaotic. Like it goes out? It has a lot of variation. But it then smooth. Oh, yeah. Oh, whatever that like, I literally have not had a math class since high school. So Taylor said whatever that yeah, whatever that series is called and statistics that that’s what that looks like to me that the post processors definitely they’re only four. So that’s not enough. But I mean, SAS is running away with that SAS is good. I mean, that’s, that’s all that mean, like SAS really is good technology, as far as

what I think you can take away from all that those that a lot like JavaScript, CSS, and all of this is not standing still, whether that’s looking at the processes, looking at the frameworks, looking at the methodologies. You know, one of the reasons there are so many in the SS column is because the adoption rates are low, because there’s a lot of people attempting to innovate. And the people who tend to adopt those things early on are generally you know, what you would call those true believer type personalities. So you will see a lot of high, I think, satisfaction with those technologies early on. But it’s a testament to the ecosystem that we’re seeing a lot of that, and a lot of these, you know, new system tell and i i want to say tailwind is newer, I don’t know, it’s it’s me. But a lot of these names that get thrown out, even if you start talking about things like radium and Aphrodite or whatever, you know, their their new their up and coming there. They’re different approaches to different things. And it’s good, because in the wash, the best stuff will come out. And you’ll see that adopted into the bigger, better frameworks, hopefully, without them necessarily getting bigger.

I’m waiting, I think, you know, if I had to make a prediction based on all these results, and and what I personally think will be coming, you know, we’re getting better at dynamic CSS, you know, the use of variables and functions and things and CSS. The reason if folks don’t know, you know, like SAS, the reason we use SAS is because we need to compile all of this complex stuff into a output plane thing. Because asking the browser to do that is a very heavy action. I mean, if you’ve ever run, you know, gulp styles, or something, I like that, and you’ve sat back and waited 18 seconds for your styles. You know, imagine that for every time you visit a website, it’s it’s a lot to ask. So we we can’t do that at this level yet. It’s just not that not appropriate. But I think it will get there. Now I’m thinking that that prediction is years out, I think in the next five to 10 years, you will see something like a SAS approach to CSS be possible in browser, I think that is a thing that could be done. One thing that we should mention, is the missing features. What a developer’s feel is currently missing from CSS. This was neat. So 3% of respondents, this is the most number of responded, container queries. Yeah.

It’s so yet, like, you know, you’re familiar with me to media queries? Yeah. Yeah. This is the same kind of thing, but at the container level. So checking, you know, How wide is a div? And based on that, figuring out how to display this stuff in it, as opposed to how wide is my viewport media queries are only interested in viewport width?

I Yeah, I think so. And I think, you know, what we’re going to see there is maybe the approach like feature queries. And we can do feature queries now, and being able to test whether or not a browser, a given browser even supports a given CSS function. And if you know that, then you can do other things. And I think that’s the gateway cuz that’s kind of how grid was approached, where they use feature queries to gate off the grid functionality until it was finished and deployed. And then you just got rid of the feature where he, right. And so you could do that same thing here with a content or you could say, you know, what, do a feature query for container with or whatever. And if it supports that, then display it this way, if it doesn’t just do it normal, or you know what you would have default? And then eventually, you would take away that feature query and have the ability to check Well, if it’s, you know, if it’s 50%, wit, then we’re going to do this if or if it’s, you know, 600 pixels will do this. That may seem weird, the folks because they’re gonna say, Well, yeah, but that’s responsive design. But it’s not an application, you know, write an application may have a window in it that has a variable with or things like that. That’s where it’s important to remember that these techniques and tools and features don’t apply to just writing a blog template, you know, that’s where this stuff like, it’s great in a world where your containers are perfectly predictable, but they aren’t everywhere. So yeah. Another good example would be like if you’ve got floated elements next to each other, and knowing like if you’ve got one of those floated elements, and you don’t know how, why, if it’s a picture, right, maybe that picture can be different widths, depending on what kind of showcase you’re doing. So if it’s wider or narrower, you know, you change the way you display the image details next to it.

Yeah, there are a lot of reasons why we don’t have that yet. Unfortunately, it’s kind of like the SAS thing, which is that the process of looking up a parent is just an expensive process or ask for the browser right now. Right? Because of the way the DOM is rendered. And the way there’s an I would explain it better if I could, and I can’t. Yeah, I’ve read articles on the way that you know, browser reads the DOM tree and parses that out. And that that look ahead, then look back to the parent is just a funky. It’s a funky request for the way browsers read the DOM. But again, I think that it is reasonable to imagine that in a world where our CSS is constantly evolving, I think we get that i think i think we get it sooner rather than later. I think that will get to the point where it ceases to be inexpensive ask for cell phones and for tablets and all that.

yeah, that that comes back to that what I started off with, which was, I think we will get SAS level functionality down the road. But again, it’s it’s that heavyweight, okay? Now, you gotta, you basically need that browser to process your CSS. And that takes tech.

I had not

That that is the way I read it. And if anybody from Houdini wants to clarify that for me, I’d love to hear it. But the way I read was it basically lets you extend the CSS with JavaScript, which is what white lets you for he

Yeah. Or define new. Yeah, you know, know your own CSS, as long as you’ve got a library that will do what you want, then you could tie that into the job

does it? Does it sound like magic?

Damn it. Okay, let me take. Let me take a break here. And then I’ll do a shot. And that satisfy what what you need. Okay, here, let’s see, look, I’m going to I’m going to hold it up to the to the camera for don’t, I’m going to shoot this and we will be back here in just about 60 or so.

Don’t worry, we’re already there. The drunken UX podcast is brought to you by our friends at New cloud. New cloud is an industry leading interactive map provider who has been building location based solutions for organizations for a decade. Are you trying to find a simple solution to provide your users with an interactive map of your school city or business? Will new clouds interactive map platform gives you the power to make and edit a custom interactive map in just minutes. They have a team of professional cartographers who specialize in map illustrations of many different styles and are ready to design and artistic rendering to fit your exact needs. One map serves all your users devices with responsive maps that are designed to scale and blend in seamlessly with your existing website. To request a demonstration, or to view their portfolio, visit them online at New cloud.com slash drunken UX that’s in you cloud.com slash drunken UX. Well, hope you found that useful. If you want to know all the details, go by the state of CSS website, it’s 2019 dot state of css.com. And they’ve got a ton of information there on everything from frameworks to methodologies, to processors, adoption rates, features, all of those things. The site is beautiful, the data is great. Be sure to go by and check that out and

Nico,

and sign up for their mailing list so that you know next year when they do the next survey, because that I mean, the information, at least to me is always interesting. It reminds me like the state of development that Stack Overflow does developer survey, that’s always it’s always neat to get that information then this kind of thing. You’re out what people are doing. And I think, you know, it helps me make decisions. You’re seeing something like bootstrap falling off the radar from a adoption standpoint. You know, that matters.

So I’m going to give Aaron a homework assignment and I’m going to do it on air so that all of you can hold him accountable to it. But Aaron needs to reach out to one of Deb’s for tailwind and invite them on the show and we’ll have a nice Sit down.

Well, your summer is so much more enjoyable than mine anyway, because it’s a whole 53 degrees up and I think you can suffer that.

folks, thanks for joining us this week. We appreciate you sitting down and spending your time with us.

Folks, stay tuned. always going to be more coming up. Exciting stuff. We’ve got other giveaways planned for the short term, the long term and other things will be different places. I’ll have stickers, I’ll have coasters will have all of those things. Share us with a friend, share us with your office. Just don’t share us with your neighbor because Carl, and I just were having trouble. That’s all I can say. You know,

We are and I will tell you the same thing. I tried to tell him and he just wouldn’t listen and I don’t know why. But I tried to tell him you know what the best advice I give him for his for his yard and for his life and for his work is to keep us the personas close and users closer by