With the arrival of July comes a chance to look back at an opportunity we mentioned a few months ago – The State of CSS Survey. Project mastermind Sacha Greif released the findings of the research recently, and also ruminated on some of the findings in a blog post at CSS Tricks. We look at his predictions and toss in some of our own thoughts on what the future holds for CSS.
UX in Architecture
The State of CSS
- CSS Houdini
- CSS Zen Garden
- The Future of Style
- Introduction to Variable Fonts on the Web
- New CSS Features That Are Changing Web Design
- Practical CSS Scroll Snapping
- The State of CSS 2019
- Tailwind CSS
- Three Predictions From the State of CSS 2019 Survey
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
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?
I don’t know. Next episode let’s start off with Santa someone screaming. What? No, like happy like it’s a surprise kind of thing. Oh, surprise. Sorry that I guess what I said that it? Yeah, I could see that
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.
I’m your other host, Aaron Hill TV. Dan. Michael, we fix the co
host thing there. I think
other hosts is still like people are still hearing in their heads co host.
Well, then I don’t know what to do.
I don’t really care personally. It’s fine,
guys, gals, people.
I mean, if you die while we’re airing the show, then I have to take over as host that’s just like a pilot copilot thing, right?
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.
I know a guy. Okay.
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
is well above freezing. Here in Africa, New York. So I wanted a nice summer drink.
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.
We had that last week. Right? So and you had yours?
Uh, yeah, Saturday, I think. Okay.
So Mike, my neighbors are from Brazil. Like they have he has land in like a rain forest. He built his own house, but by his own hands and, and he was saying that, like we had this dense fog in the morning. And he was saying that that’s what it was. It was like being back in the rain forest again. It was it was weird. To be surrounded by cotton.
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 wish you could have seen that you the audience because that was really funny face that.
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.
Speaking of new and different. What about it? You should have seen this article that I saw. We were just talking about UX stuff a couple episodes, right? Yeah,
I mean no. Every episode or so.
Yeah, basically. They don’t mention and Steve Krug and an episode you have to take a drink. That’s a rule.
Oh, it should be.
Oh, wait, hold on. Merchandise idea. We need to have some kind of placard that has drinking rules for drunken UX.
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.
Every time. Every time one of us stumbles or the marbles in her mouth because much.
Yeah, sorry. I derailed
you. You You had you had a thought. Yeah. So there was we talked about UX a lot on the show. But there was this this really funny article. It was about architecture UX, but like problematic architecture UX.
Is this back so the the far side comic, the he’s pushing
on the door that says Paul Mudville school for gifted.
You know that off the top of your head, I can’t do that.
I’m the comic was me in real life for a long time. Anyways, um, no, it’s it’s like, if I ever been in a like a modern office building, and they have like, you go into the bathroom, and then the lights automatically turn on. Right? And then they’re
usually on when I go in, they turn off after I’ve been in there pooping for 15 minutes. Right? Exactly.
Yeah, I had to happen. One. Um, so it’s like, that’s the kind of thing you’re talking about. It’s where you know, the light. It’s like Smart Controls, maybe it helps them get like an energy star rating for the building. Or maybe it helps them like save money on climate control costs, or the lighting or other things. But it’s the what, that’s what they’re calling architecture UX, like that sort of stuff. Sure. Yeah. And it’s so it’s situations where the people who are actually in the building and using it, sort of like silently rebel against these features. Like one of the examples they had was, like, you know, remember those dipping birds? Like it’s like a ball with a bird’s face kind of Molded on it. And then it has another ball on the other side is a liquid that goes back and forth through the between the two glass balls. I watch Looney Tunes as a kid. Yes, one of those. Okay, so someone would put one of those near the sensor in a room so that the light always stayed on. And so it’s like, sort of like little hacks to kind of get around this.
Right? Because these these buildings, right? Isn’t it called like lead? I think is the
Yes. Yeah. LEED certification. Yeah, certification.
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.
Yeah, so so Julia, K, de da y, did a study on these things. And just sort of like found different examples of architecture UX gone wrong. Gone Wild. Yeah. Oh, one of the funny ones was, and this this is this is I would say bad UX. There was a Ok, so imagine you have a building. And you know how, like, in a normal climate, as the day goes on, it will get cooler outside. And then at some point, like you should open up the windows, because it’s cheaper to cool the room you’re in by letting air in from outside than it is to use air conditioner, right? Oh, yeah. Right. Yeah, that happens in most places,
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.
Right. And so what what Julia found was, there was a building that had that. And what they had was a sensor. And the sensor went all back to like this kind of main control panel that was in a hallway. And it had a series of like, green lights. And if the light was green, it meant that you should open the window up, because that makes complete sense, right? Yeah. Yeah. But I remember looking at it and thinking that, that looks like if you’ve ever looked in like the utility closet of like, a commercial space, there’s like a, you know, kind of like the circuit breaker, which like shows like which of the lights are currently running?
Yeah, like one of those big alarm panel kinda, yeah,
yeah, yeah, yeah, exactly. Oh, look, sir. It looks like that. Like, why would anyone I mean, I don’t think anyone would intuitively know, like, what, what they would need to have, and it seems like this would be easier to do is just have a sensor right by the light. And then our sorry, have the the, the the display or the light right by the window. And then when it’s time to open the window, it just lights up. And you could even just make it light up a thing that says open the window to cool the room. But simple.
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,
you would just assume it was something like I would just Yeah,
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,
like i’d blindness or you’re just learning to ignore those things.
Yeah, no, I completely get that.
Yeah, it just seems like that’s one of those things where like, there’s a disconnect between the people who were designing the system, and the people who are intended to live with live or work within it.
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
that a movie?
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
that I mean, they’re like building a building. And kind of requires like a waterfall management style just because of the constraints of the task. Because rapid iteration isn’t really possible, like at certain stages. But I think that maybe like usability testing strategies could be used for something like this, or should it just feels incomplete? Like, it seems like the people that designed the idea, took it as far as like getting it like, okay, we haven’t wired up, basically, they made an API, but then no one connected the API user interface. That’s what it seems like, right. But the thing that made me think of though, is in Design of Everyday Things, which I think in our drinking game, this would have to be like, you have to do a shot now. Because I just mentioned Design of Everyday Things.
Okay, once. Okay, go on home.
So in that book, I mean, I’m the front cover of the book. And the addition that I have is a it’s a tea kettle, yeah. The tea pot with with like, the handle on the same side as the spouts. Yeah.
And what do they call that the impossible tea kettle or something? Got a name.
But the, I mean, he says early on in the book that, that these principles and things are, it doesn’t, it doesn’t have to deal with computers, specifically, this is stuff that affects everything, anything humans interact with
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,
yeah. Oh, that was the one that was the most hilarious was, I think they did the lights turn off.
So that they Oh, yeah, some kind of test. And the room had new light switches.
Right. And so the way they got around this was whenever they had to do these tests, everyone had to sit completely still for 15 minutes. And then they would run it. Yeah. I can’t even imagine working in conditions like that.
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,
apparently, but whatever it was, was so inconvenient that it was easy, just sit still for, for multiple people to sit still for 15 minutes than it was to do the other method.
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.
And I think it also there’s, you know, the whole the competing concept of separation of concerns, where you have kind of not siloed but maybe like modularized things that are related together, for example, the the thing with the the window, cooling sensors stuff, you know that their particular interface they did was like a terrible implement. But as long as the underlying sensor apparatus if they had some kind of like hardware API, that could be tapped into then repurposed, depending on what how the room was being used. You know, I mean, you could work with that it would be different if it was, like, you know, with the lab where there’s no way for them to change how the lighting the lighting works.
Hopefully, we’ll get better at it down the road, we probably won’t.
But I would, I would love to see that be a career for people or just to have that kind of expert become more commonplace, like a usability expert for like real life, you know, work and living spaces.
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.
It reminds me of two things. The first one is Kaizen. The it’s an agile principles. It’s the the Japanese management style of continuous improvement. Where you have a person on staff to constantly be looking around the workspace and identifying those frustrating and fictional pain points, and then resolving them. But it also reminds me of you remember those shows, like Trading Spaces, or vaguely extremely takeover Home Edition?
Yeah, I didn’t watch them. But I’m, you know, you know, of that I know of them.
Okay, so like, in those shows, they would always have, you know, like, the kid would have some kind of, and I don’t know, like a medical condition or something. And, but he really liked racecars. And so the designers like, go over the top making this whole race car themed room. It’s like, you know, big racecar bed that’s made out of like actual car parts. It’s like bolted
to the walls.
Yeah, yeah. Yeah. Yeah. And like, you know, race car themed everything, but like, built structurally into the room tire. And every time I let’s see this, I think that’s going to be super cool for like, six months, two years tops. And then he’s going to be into something else. And then he’s going to have this like, over the top race car, his friends are going to come over be like, Dude, what’s with the room? And it’s like, we were on that show.
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,
I don’t have the time to do something like that. But please, if someone does, like, send us the link, I want to watch it.
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?
Of course, yeah. Everybody about the state of JS survey.
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
is from Paris. Why do not speak French.
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,
the site is a 2019 dot state of css.com.
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.
I saw that in the show notes. And I looked at the site, and I was like, it’s not bad. But then it looked at the title of the article, and it says the future of styles like all right, yeah. And you’re pushing it now.
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.
Oh, yeah. If you make the browser like
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 just it’s, it’s what web stuff if you’re ever curious about what the web looked like in the mid 2000, lot of text. And well, you know, like the images like scale, when you expand or, like contract the window. I think it’s worth noting all this stuff about the appearance because By comparison, the state of CSS 2019 site is fucking amazing.
It is a very pretty sight.
It’s it’s like everything that there is to love about modern CSS. I
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
masthead on the site. But the the has the logo, and then it has like little call out things that point to the various elements of the logo and say, like, which CSS property it is.
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.
I have a smart TV, but not like with a device you use?
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
I want to just really underscore the core adjustment functions. I recently I currently working on, coming on my, the diaper app about taking all these different color variables, like color liberals, and then finding like kind of like one central color in each group. And then doing the rest of the colors as like, calculated. If you if you do literal colors for everything, even if they’re all sort of variables, it still requires so much extra work. When a lot of times like you know, like you’ll have like a cover that your primary color. And you know that like you want the shadow color for it to just be slightly darker. It’s easier just to do that using like calculations than it is to have to find the hex value each time.
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.
It’s I don’t remember that one.
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
the amount of stuff that we can do with CSS is mind blowing.
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.
Yeah, so they can each of the things, they have two circles and like so there’s the light blue circle, which is how how many people have heard about it, to compare relative amounts on those. And then inside of that light blue circle is the dark blue circle, which is how many people have used it. Of this people who have heard about it. And so the the flex box one was You and I both talked about flex box before. Yeah, really awesome stuff. Most people who have heard of it have also used it. So the two circles are nearly the same way. 95. Unknown Speaker But the one? Yeah,
but the grid one, it looks like I don’t know, like a subway token or something like it’s 55% of the people who are aware of it have actually tried it.
And take put that into perspective, though. That’s half the people who have heard about it, have used it.
Right? Well, the number of people who have heard of CSS Grid is similar to that of flex box. Like the light blue circle, you’re doing the same size? Yeah, yeah, your sweat, sweat be smaller. But
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.
It’s really not as obvious why you might want to use a CSS shape, even if you’ve heard of it.
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.
I think the fact that you did a border radius, and that that was the first place I went to when I was thinking how I would do it is very indicative of kind of the divide between. I don’t want to call us the old guard on CSS, but like people from who we have our level of experience, compared to like newer people who are just getting into it and learning all of this stuff. I’m
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
the other in addition to the things that you’ve mentioned. So far, the animation things and flex box. There’s three other circles that have 90% or above adoption. And that’s the calc function. font face, like the font face at thing. And then mind breaking properties. And I’m not completely sure what that refers to.
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, I mean, that’s something to me. But that’s kind of a style choice.
Yeah, no, it’s definitely like thing, but
like, will always need to use fun face. But initial letter is sort of like, you may or may not.
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
don’t know if I have.
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, definitely. It’s I have not used it. I thought it was maybe something else, but I haven’t used it yet.
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%.
That’s where like, you hit a button, and then it like, jumps down to a spot but eases?
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.
Oh, and then you hit a button like you hit next or something, right. It’s just it is doing next, then it scrolls the next one. And
so when you are like on a mobile device, if you’re using a swipe action to scroll, it will Yes.
You know, we we use that for menu navigation and my job. Yeah, that’s right. I have seen that before, but I haven’t used it myself. But
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.
I could also see that Yeah,
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
I know, it’s the the funny thing or is, is, it’s great until your settings get like messed up somehow on the page, and then it keeps wanting to snap to like something, it’s like 50% off. Yeah. And you just you can never get the thing to stay on the screen. I had that happen, what’s
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?
I think that this should be another you have to do a shot as I
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.
Wait. Before you go further, I just want to read his opening paragraph, because it’s so relatable do it if you if you’re old enough to remember the CSS sin garden, or to actually learn CSS through it, in which case, I know how you feel my back hurts when I get up in the morning as well.
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’s uh, but but then he says, then this next trend might seem weird or even downright wrong. And I completely agree. Yeah,
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.
Yeah, it was it was early 2000s. It was right, right around when? Right around WordPress, too.
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.
If you use the web anywhere from, you know, early 2000s. Till, oh, 2010, like the first decade of 2000, I think most sites had a layout kind of like this,
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.
Oh, actually, yes. If you haven’t seen it before, do go look at it.
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.
Well, yeah, like the idea of the site was that given given some raw semantic HTML? How many different ways can you present this using purely CSS to modify the presentation, right? Because Because this was back at a time when, when we were sort of coalescing around this idea that HTML was for the content. And for the markup of the content, but not the display of the content. And CSS was for modulating the presentation or or how it looked. And really separating those two responsibilities entirely. And so like you, your site had, like a good site, or like kind of the standard you would try to get to is one where you weren’t doing styling on any of the elements directly. You were just doing it in the 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 depends on your site.
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.
Well, okay. So and from that perspective, I agree with you, I think that it was a good exercise. In the same way that doing like, you know, code exercises are good practice, even if the stuff you’re doing and code exercises aren’t specifically directly applicable to your day job. But I but I think that what the take home that that I got from doing CSS, and Gardner looking at it was that doing redesigns, the friction is greatly reduced, when your content is separate from your presence. Yeah,
So and that, and that has borne out true for me. And in practice, because taking the content, if you organize your content, well, you do you know, containers, and you separate things out into different regions and everything else, then when you have to later on, you know, make the page dynamic, because you’re suddenly, you know, using PHP instead of static HTML, or you have to, I don’t know, change the layout completely, because you’re using a new redesign. It’s far easier to take out those the contents, the content you need to read to remove and move into a new thing.
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.
It was Episode 13. first season crap. Okay. Yeah,
I don’t feel bad about not remembering where that bell.
We’ve done three times that many episodes since then. Or this is the three times this is
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
100% of people are aware of food. Yeah,
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’s like, it’s like yet we know about you. What is interest? It does interest mean, that like, I want to learn more about it, or it is interest mean, I want to use it or what does it mean?
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.
What is Taylor?
It’s a it’s a functional framework, functional CSS framework. Tachyon had a 66% satisfaction, right?
I heard of that.
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,
okay, I’m looking at tailwind CSS, it’s pretty neat.
I have no idea when so I don’t know what their technique is.
The site is tailwind to CSS calm. And the homepage has kind of like a cutout frame of a looks like maybe a sublime editor. And then a like a widget of showing contact information for someone. And then there they show the HTML and then just adding Tillman CSS classes to it. As they and as they’re doing it. It’s like live updating the widget. And you can see how like, each of the things they add affects the the widgets appearance. It’s pretty cool.
Yeah, I’d really like to hear more of it. This is pretty quick
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.
I would say that that bem CSS like Bako Block Island modifier is probably the closest to like traditional CSS and garden CSS. times can I say CSS? Isn’t
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.
I think the degree to the if you have to insert content, or stuff into the content area that deviates from that if you have to style like if you you have an image, maybe it’s remember that graph we talked about a while ago, the episodes ago with the showing the value of the realist, yeah, suffered. Yeah. So um, that was like a pretty wild thing. So if you have to do something like that, okay,
that it, it has to live in that page.
Right, right. But like, if you can modularize it as much as possible and kind of silo it into its own thing, you know, wrap it in a div and class, the div, but you know, not future proof or whatever, I just make it so that it’s easy to find and extract an isolate, if possible. Having been someone who has been party to at least a half a dozen redesigns, maybe more. Future You are the people who are place you will thank you.
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.
Oh, it’s on technologies. Okay, so So imagine, if you could think back to like, maybe High School algebra, you have like the four axes access 1234 quadrant 123, and four, except in this case, every number is positive. And it’s just divided in half on user count, and divided in half on satisfaction percentage satisfaction percentage goes bottom to top zero to 100. And user count goes left to right, zero to 10,000. So it’s divided in half, and the top right is adopt. The bottom right is analyze. And then on the left side, on the top left, we have assess the bottom left is avoid. So avoid an adopter diametrically opposed and then assess and analyze are diametrically opposed. But what they mean though, is assess is low usage, high satisfaction technologies worth keeping an eye on. So it’s like, don’t use it yet. But be aware of it. Adopt is high usage, high satisfaction, safe technologies to adopt. It’s worth noting, there are only three technologies in there, and one of them barely made it. Yeah. Avoid is low usage, low satisfaction, technology is probably best avoided, currently, and then analyzes high usage, low satisfaction reassess these technologies if you’re currently using them. I also think that this quadrant also means it’s if it’s highly used, but but not satisfying. If it’s highly used, that means there has to be some reason why so many people are using it. But if it’s not satisfying, it means that it hasn’t kept up with with what we need today. And so maybe that could be like dress somehow, oh, there’s only one thing in that just
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, so SAS, By comparison, SAS is far away up in the top right. It has a 9682 respondents using it and 90% satisfaction. So like, if you’re not already using SAS for your CSS compiling. You should be
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
that would that would be neat to see.
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.
So So Foundation has 3545 people using it. But don’t but 45% satisfaction. And so it’s kind of like almost near the center, it’s right near the top of the avoid quadrant almost to assess. By comparison, bootstrap is technically in the adopt sector. Barely at 52%. It’s sitting right above analyze, which I think is I think is pretty spot on where it should be 9753 people using it?
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.
The fact that bootstrap exists, I think that bootstrap could easily be supplanted if someone else wrote a something, it would serve the same purpose. And what I mean by that is bootstraps purpose and which is perfected even its name is that it is a thing, you can just drop in to whatever, you know, app, you’re spinning up, you know, hackathon or whatever, you just drop it in there and you get a serviceable looking site is this isn’t meant to be like your long term, by site’s going to look like this forever, it still calls back a little bit to the CSS Zen Garden, like ethos of like, you know, we are using this for CSS for now the content is independent. Later on, we’re going to replace it with better CSS. If we care to, I think that if someone were to make a thing that you could drop in, that was just like, throw it in there. And the site doesn’t look like shit. Then bootstrap, I could see that going away.
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.
Yeah. The things that I that I dislike about bootstrapping foundation is that for both of them, you have to learn how to use it. And and the more complicated this frameworks got, because back when bootstrap was just called Twitter Bootstrap, it was really simple. And very severe, a few classes, you just drop it in, and then the site doesn’t look like ass. But it’s got more complicated over time in the same way that WordPress has. But I think that if there was something where you just drop it in, and you have like, you know, very basic framework, and then it just looks simple layout. Yeah. Tell By the way, tailwind is 81%.
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,
strictly speaking, interesting,
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,
is that we talked to Dustin shallow about two episodes ago,
which I think was Episode 31.
Yes, that sounds
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,
you know, this one is? So if you’re doing curve fitting before, counter wedding, curve fitting,
oh, I was like I, I don’t want to get arrested.
They don’t admit to the counterfeiting. counterfeiting when you have a scatter plot, then you find the function line that best
fits. Yeah, I remember that.
Okay. So if you look at the green dots, so these are the CSS and j s, it’s
does Yeah, logarithmic, that’s a stick. So it’s like starts very low. On the left side, it goes up very quickly. And then at about 20%. Roughly, it’s about halfway to its maximum, which is about 85%. But then the the yellow ones are almost linear straight across, and they just above and the red ones are are over, there isn’t enough samples for red ones, but I wouldn’t, I would probably guess that to be a like a linear from stylist, if you may draw a line for a stylist, a SAS stylist is about 48%. SAS is just above 90. And they go like all the way almost all the way across the graph. But then the purple ones are a almost a not quite power law. But like a, it starts hot kind of high in the far left. So like people who very few people who are using them have high satisfaction. But then the ones that are like more widely adopted have lower satisfaction, that’s boots, what’s
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
it says a very narrow thing very well,
I think it’s really cool. How much different many different CSS frameworks there are. And it’s really great that so many of them I’m have such high satisfaction. I I am not at all surprised about bootstrap. I still use it. I mean, I, I that would still be my go to framework, but like, it’s sort of like, I guess I use bootstrap kind of thing. And not something I would get excited about like tailwind was exciting to watch.
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.
So you explained it to me earlier, once you explain what it is.
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?
That seems like something that is realistic that we could accomplish, given that we have media queries already?
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, so right behind container queries at 2.9% was parents selector. I know exactly what they’re talking about. And this would be amazing.
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.
But the other ones, I’m just gonna read the really quickly nesting browsers support functions, scoping mix ins, which you kind of already have in SAS, but I guess putting them in Mega CSS. Um,
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.
The one I really liked it was Houdini. And there’s only one third of a percent of 39 total respondents asked for this. We had to look it up.
I had not
heard any, it’s pretty wild. There’s a put a link in the show notes for it. It’s Houdini glitch me. And you described it as it does for CSS, what Web Components did for HTML?
lets you tap into the CSS rendering engine and modify how the CSS behaves, I guess.
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
is, I mean, it seems exciting, but also like terrifying future. But
does it? Does it sound like magic?
You have to do a shot for that.
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.
Hopefully, Mike will be alive and I won’t have to take over piloting this craft into the ground.
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
just go and click through a couple of the pages. You just got to see the the nouveau Nico,
Nico, Nico thing is awesome. Hats off to him
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.
I tell you, I kind of want to learn more about tailwind. If that many people are satisfied with it. I think it’s worth worth checking out.
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.
This is summer vacation. You’re not supposed to get homework on summer vacation.
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.
We only got fog. We don’t get tornadoes. So I guess the
folks, thanks for joining us this week. We appreciate you sitting down and spending your time with us.
Yeah, be sure to come and connect with us. You can hold me accountable about my homework. Or if you’re from tailwind CSS, you can contact do my homework for me. Facebook and twitter.com slash drunken UX and slack Kajaki two x.com slash slack and the Instagrams, instagram.com, slash Trek and UX.
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’re going to talk about that.
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