Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: This would be -- I need to get to bed -- try this out.

Chris Coyier: [Laughter] All right. I already hit the button, so you just--

Dave: Oh! Are we recording? [Laughter] Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show.

Chris: [Laughter]

Dave: We were just looking at a burrito website. My name is Dave Rupert and with me is Chris Coyier. Hey, Chris. How are you?

Chris: Good. Good. Good. Yeah, I somehow got it into my head that I was going to try to eat every breakfast burrito in Bend, which is just a terrible idea.

Dave: No. It's a good December idea. It's not a good January idea.

Dave: Oh, yeah. That's fair. That's fair. You know, but it's going to be good again in February.

Chris: Yeah. [Laughter]

Dave: In high school, I was part of an elite crew of people called the Burrito Hunters.

Chris: Whoa!

Dave: We would go around all of Houston, Texas and try to find the best burrito.

Chris: Hmm. It's a worthy goal because, I'll tell you, it's really an artform.

Dave: Mm-hmm.

Chris: You'd think, "How different are burritos really?" It's a tortilla and you put some stuff in there. But no, I don't think so. I think people know that it's this wrapper. It's this torpedo of flavor.

Dave: Mm-hmm.

Chris: You've got to bring your A-game to the inside to stand out, and there are lots of possibilities there and just lots of details to get right.

Dave: Well, and in Austin, Texas, it's of course breakfast tacos is kind of our thing or twist.

Chris: Yeah. I'm sure you can find plenty of good burritos, too, right? But tacos is bigger. Yeah.

Dave: Tacos is more of the handheld way to do it. The history goes back way long ago, like in the early 1900s there'd be little outdoor kitchens where you pick up a breakfast taco.

Chris: That's neat.

Dave: Anyway--

Chris: I'll never forget the Amigas Taco in Austin. It's a dang near reason to move there. You couldn't find that here if you begged.

Dave: Yeah, and we could argue the superior. I don't know. I like a good West Coast breakfast burrito just because it's like, if you're going to eat this, your day is set.

Chris: [Laughter]

Dave: But, man, there are so many. In Austin, everyone loves this play called Taco Deli. Really great. It's good. It's good. It has this really spicy salsa. But, man, their potatoes are the wrong ones, just 100% wrong. They put mashed potatoes in the taco.

Chris: Oh, weird.

Dave: It's wrong. It's an abomination.

00:02:49

Chris: It's a filler choice. I've been documenting this closely now. I find that if it's really big, if it's large, it's going to be potatoes that gets it there.

Dave: Right. Right.

Chris: And it's a cheap ingredient. But I don't always hate it because I kind of like potatoes, myself, but you've really got to cook them right. Definitely some ones in town that put too much potato in there. It's like they cut them up in tiny little squares and panfry them, which is good. They get crispy. But then they're really dry, too, and they're crunchy. It feels like not the right move.

My favorite one in town happens to be a little potato heavy, but it's almost like they oven roasted the potato, like a big Idaho kind of potato, and used that unskinned.

Dave: Yeah. Okay.

Chris: It has about the same texture as an egg.

Dave: Okay. Yeah. Yeah.

Chris: It chills with the eggs good, and I think that's kind of the way to go.

Dave: My thing is it has to be hashbrowns. You get the hashbrown crunch.

Chris: Okay.

Dave: A little crispy.

Chris: [Laughter] I don't even think we have a hashbrown one. Now I have to find that or convince someone to do it.

Dave: Or invent it and be rich.

Chris: Yeah. I guess, yeah. Then is the default chorizo down there? If you get one, chances are--?

Dave: No. BPEC (bacon, potato, egg, and cheese) is sort of the classic.

Chris: Yeah, that's here, too. That's the classic.

Dave: The migas is pretty--

Chris: In a burrito?

Dave: Yeah. Yeah. It's kind of more like you'd probably get a chilaquiles would be kind of the West Coast variant, but yeah.

Chris: Yeah.

Dave: You get -- it's good, but we have all kinds. You can get a brisket one, blah-blah-blah.

Chris: Oh, my God!

Dave: Yeah.

Chris: Oh, you lucky bastard.

Dave: We're lucky here. We've got a good--

00:04:37

Chris: Not to dwell on it too much, but I find myself trying to write about them a little bit because I'm trying to take the picture. I even got a ruler. I wrote "The Burrito Ruler" on it and take a picture next to the ruler for context.

Dave: Mm-hmm.

Chris: So, you know what kind of size you're looking at. But then I want to write down a little bit about it, and I'd love to sound like a good writer. I feel like I'm - whatever - not the best tech writer in the world, but I can spit out some paragraphs about tech that are legible. I don't know. My tech writing ability is fine. Then I find myself writing about a burrito, and it's nothing.

Dave: Yeah.

Chris: I'm just like, "Mmm, good."

Dave: [Laughter]

Chris: "Has cheese."

Dave: Yeah.

Chris: "Like cheese." Just nothing. My fingers cannot write about it.

Dave: I love this delicious baby boy. This baby boy is very comfortable to snuggle.

Chris: [Laughter] Now that you're saying that -- I'm doing it in a fricken' VS Code as a Markdown file. It autocompletes my sentences as I'm writing, and it sounds like that. It sounds like that. I'm like, "I love this," and then in gray text after it, it's like, "juicy burrito. It is good."

Dave: [Laughter]

Chris: I'm like, I might as well just hit tab.

Dave: Hit tab on the copilot and let copilot juices by my copilot or whatever. I don't know. But copilot, take the wheel.

Yeah. No, I feel the same thing. I have that bookshelf on my website. Just as we were talking before the show, it's like, "Good. Thought provoking. Um... Interesting." I have like four adjectives that I just cycle through. Writing a succinct bit of text is really, really tough.

Chris: Yeah, outside of your norm.

Dave: Yeah. I don't know. I've tried to inject little facts about it, but then it's not a simple review. It's a whole synopsis. I'm like, well, I don't want it to be a synopsis, but "An incredible read."

Chris: Yeah.

Dave: The fastest book I've ever read. [Laughter] Anyway, some of them don't have reviews because I was just like, "What am I going to write, honestly?" You know? What am I actually going to put in here?

Chris: Yeah. Yeah. Yeah, got to write some defensive CSS. What if no description? Does cards still work?

Dave: If no description -- I actually did do that.

Chris: Yeah. Nice. I should say, speaking of things upcoming to the next year, I'm going to tone down my burrito consumption is the plan. But also, let's talk about what's going to happen in tech. We're stilling this. I saw Wes tweeted the other day, or maybe you grabbed it and tossed it in the Discord or whatever.

Dave: Yeah. Yeah.

00:07:12

Chris: Syntax, who I think we can prove it now -- how many more times popular are Syntax than this show?

Dave: They're twice as popular according to the State of CSS Report, which I'm disappointed. I don't know.

Chris: They're at 13.1% of people that answered the State of CSS survey listen to Syntax versus 7.6%, so not quite half as many. We're about half as popular as Syntax.

Dave: Right.

Chris: I'm shaking my fist at you, Scott and Wes. Just somehow genius podcasters.

Dave: They are a beautiful nemesis, but there's no excuse.

Chris: [Laughter]

Dave: I don't know. Everyone needs to step it up here. We'd really appreciate that.

Chris: We should just do a show one ahead of them. If they say they're going to do a show about something, then we just record on that really fast and put it out.

Dave: Zip in. Undercut them.

Chris: [Laughter]

Dave: That's good.

Chris: That's what we're going to do this time. They're going to do one on 2022 Web dev predictions. Let's do ours. I bet we can do this in 25 minutes.

Dave: Twenty-five minutes. Set the timer. Dink.

00:08:24

Chris: Something like that. Yeah, okay. I'll do a couple to start, perhaps. My biggest theory is that you don't look at the stuff that's about to ship, like container queries is great. Everybody is going to clap for that. There's a lot of momentum there, but it's not in any browser right now.

Dave: Mm-hmm.

Chris: Chrome will almost definitely ship it first. We have no idea if Safari or Firefox is going to follow. They probably will because it's so hot, but how and when? It's not going to be 2022. You're not going to be shipping container queries in 2022.

2022 will have lots of blog posts and we'll start getting excited. That's a 2023 thing, almost guaranteed.

Dave: Mm-hmm.

Chris: What you've got to look at is the stuff that has now shipped across everywhere because it was exciting last year.

Dave: I think there's a container query polyfill. Have you seen that?

Chris: There are two, right? There's a Jonathan Neal one and then there's a Surma one from Google who is saying this is kind of better.

Dave: 1.6kB, and I think since this--

Chris: 1.6?! Woo!

Dave: Brotli'd, of course, but I think because the thing has - whatever - normalized, I think we're pretty close to seeing it.

Chris: That is kind of a good point. And I believe the way it works is nothing special. You just write what they're going to be like in your just regular ass CSS.

Dave: And it'll try to do it.

Chris: And it does it.

Dave: That's scary because that's what Scott Jehl's little media query polyfill used to do. What was that one called?

Chris: MQ Fill, or no?

Dave: MQ Fill, or something, but--

Chris: No. No, that wasn't it.

Dave: That one was tough for a bit. [Laughter] Scott did a great job, but it was mostly IE's problem. It was a little bit tough.

Chris: I don't know. Maybe that will -- that could be a prediction. I'm going to say that people don't use them and that it's cool to be able to play with the polyfill, but I don't think we'll see wild adoption this year.

Dave: Okay.

00:10:23

Chris: Nor do I -- and I hate to -- like I really want to be wrong about this, but I feel like Web components still just has not captured people's hearts and minds (despite your best efforts).

Dave: Ah, well... Well, so, I'm going to be juicing that. I'm talking at An Event Apart. I'll maybe do a Front-End Masters Workshop. I've got things in the pipeline for Web components.

Chris: Yeah.

Dave: Web components is on my list, and here's why. React had (two weeks ago or something) an experimental branch that supports Web components. React has been one of the big ones that didn't.

Chris: Yeah. You'd be like, "Why bother?" because there's so much weird hoop jumping you'd have to do. You just wouldn't do it.

Dave: Yeah and, to be honest, I don't fully understand, other than the fact that props and attributes are kind of the same thing in React, but they're different things - kind of - in a Web component and stuff.

Chris: Also, the re-rendering, I think, matters. You can just rip them out of the DOM and put them in there willy-nilly.

Dave: At 10,000 FPS or whatever. [Laughter] Right? Yeah. You can't just -- because it doesn't make sense to re-instantiate it the whole time.

But it sounds like they are experimenting, which opening that door, I think, is a big thing. If it does land (like in React 20 or whatever it might be), I think that's very interesting just for Web components because one of the big adoption blockers is gone.

Chris: It could be big.

Dave: It could be big. I think, too, a lot of companies (and what I'm hearing, especially on the enterprise level), if you have the Drupal site in the back-end app and the front-end, your ability to share components is really, really low because it's like, "Well, they wrote it in React and we're on Drupal."

Chris: Hmm. It'll open up the shared components story?

00:12:18

Dave: I think there'll be a better shared components story. I signed up for Asana. You know Asana?

Chris: Yeah.

Dave: We're using that to do some project management.

Chris: Yeah?

Dave: You know what's interesting? I was surprised because the front of house of Asana is all this big, beautiful, modern, and then you go to the back of the house, like the app, and it's very app-y. [Laughter] It feels like a generation behind the front-end. You know?

Chris: Hmm.

Dave: Maybe it's a generation ahead or something, but the marketing seems so flashy and brilliant. Then you go to the app, and it's just a smidge more basic or more form-y driven. Right? Whatever. I'm not driving their product or anything like that. It's serving our needs.

But what I find interesting is I just was like, you know, I wonder if they're in a situation like that where the front of the house is on different tech than the back of the house, and so the front of the house can move at a different speed - or whatever.

Chris: Yeah. I would like to see it, because I could see developers resigning themselves to the styling story inside of a Web component if it meant shareability and stuff. Just be like, "Ah, whatever. Screw it. All can style in there."

It does worry me when people need components that, for example, have a GraphQL query in it, too. It's just like, "Can I just stick with my frameworks componentry then because all that is really first-class citizen-y and works great?" But I get it. So, you're saying, on the rise. I'm not going to terribly disagree.

00:13:52

Dave: Yeah. Somebody asked, "Where can I get started with Web components?" because I gave such a powerful talk.

Chris: [Laughter]

Dave: Everyone should book me for their conferences. [Laughter]

Chris: Yeah, they should.

Dave: No one is booking me anymore.

Chris: Me neither.

Dave: I think it's the classic header or footer. I probably, honestly, just start with the footer and just see how weird it gets because you won't get the flash of un-styled content.

Chris: Oh, there you go.

Dave: I think places like that, you might be able to just experiment, like the more static-y components.

Chris: Yeah.

Dave: But then you get into the more, I don't know. Then there are semi-static, like renewing a table or content or a block of content or your inputs.

Chris: I'd like to see design systems use them more and not worry about, yeah, that it's just in charge of the styling variations only.

Dave: Right, because there's Chakra UI, right? There's Chakra for React, Chakra for Vue.

Chris: Yeah.

Dave: Wouldn't it be cool if Chakra themselves could just do one? They might be like, "Cool. We're going to do one and then have some adapters if we need to." You know? That might be a lot easier.

00:15:07

Chris: I saw Agnostic UI the other day -- and that's worth a Google, quick -- that is intentionally for that, like, "Can you write one CSS file that absolutely works across React, Vue, Angular, and Svelte?" Yes, you can. Here's how it works. Pretty cool.

Dave: Hey.

Chris: But not a Web component, but I think that's probably in there, too, somehow, or it's just implied or something.

You know what would push the needle, I think, is if all of a sudden you started seeing it more third-party. What if you copy and pasted code from YouTube and it was youtube-embed or twitter-embed or something, and you'd see it?

Dave: Well, but we don't do third-party scripts. Thanks, Jeremy. But no. [Laughter]

Chris: No, but it would change your attitude a little bit. You'd be like, "Whoa! These big companies are doing it. Maybe we should look at it."

Dave: Well, I was thinking about that. If you wanted to do, like, CodePen, you could have codepen-embed - or something like that.

Chris: Yup.

Dave: Then if we don't want to do third-party scripts, if those are dead, then I NPM install codepen-embed--

Chris: Right. That'll instantiate it. Yeah.

Dave: Now I have a codepen-embed element in my repo, like zero.

Chris: Yeah. Yeah. I don't see any problem with that, necessarily. It means that we'd have to trust customers to update their NPM if we wanted to change things. You'd have to incentivize it somehow. Be like, "If you want this new feature." Whereas now, we don't have to support anything old because, if we ship a new version, automatically that script is updated.

Dave: Iframe is the only thing. Right. Yeah. Yeah. Yeah.

Chris: Yeah, but the JavaScript doesn't change all that much. It might be possible to pull off, but it is certainly tricky. I would move to a Web component, though, now, without the NPM thing. I don't see a big reason not to. We could scope the styles a little better.

Dave: Mm-hmm.

Chris: Protect them. Because right now it's an iFrame--

Dave: Mm-hmm.

Chris: --so you could avoid one level of iFrame-ness.

Dave: Mm-hmm. Mm-hmm.

Chris: Which might speed them up a little bit. It could be kind of cool, but I think if people saw those dashed components out there in the wild more that it would change their developer attitude towards them and you'd see it more. What I'm not seeing is new frameworks embrace them.

Dave: Mm-hmm.

Chris: A new framework drops, it's probably not using Web components. I feel like that's kind of a bummer strike is that people aren't seeing them in new frameworks.

Dave: All right. Well, maybe we'll see a framework. I don't know.

Chris: [Laughter]

Dave: I'm not going to release it.

00:17:36

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Netlify. Here we are in 2022. Welcome to January 2022, a new year, a fresh start.

We're going to be seeing lots of blog posts, making predictions about the new year. I bet a lot of those predictions are going to involved Jamstack in some way, and Netlify is the home for your Jamstack site.

I like how Jamstack has come to mean static and more. It comes to mean split your services amongst people that do those services the best. Use the best search company there is. Store your data in the most flexible place you can store it.

Build your front-end however you want to build your front-end. Statically generate as much as you can of your front-end. That's what Jamstack has come to mean, and I love it. It's such a cool thing.

Netlify's support and growth in that world has just been unprecedented, really. They have changed the game for Web developer worldwide, and we're so lucky to have them as a sponsor, and grateful. It's just going to be awesome.

I have so many sites (I can barely count anymore) on Netlify. If we're going to spin up something new, I love the idea of picking a framework, exploring what's out there in terms of static site generators and JavaScript frameworks. Just knowing that Netlify is probably way ahead of me and it's going to work great on Netlify, and I have never been wrong about that.

Again, thanks for the support, Netlify.

[Banjo music stops]

00:19:15

Chris: What else do you got? A totally different one.

Dave: Hey! Okay. Let me go back to my list. You know we've talked about it a little bit on the show, but I think Web3 will either take off or catastrophically implode. I don't know which one it'll do yet, but I'm curious to see what happens.

Chris: A lot of people (right at the moment) that it's a meaningless word. Nobody really agrees. It's kind of an umbrella term. Is crypto Web3 or is Web3 part of crypto? Are NFTs part of Web3 or is that a separate thing? Blockchain certainly is, but does it just mean a website that gets pulled from the blockchain, or is there more to it than that?

Dave: Yeah.

Chris: It seems like a little hard to define. And it seems like because there is some pretty healthy amount of poo-poo on Web3 and it's so new that it will probably pivot in names once or twice. A new name will come along to avoid the past scrutiny of it.

Dave: Yeah. Well, and I think it's something (like with the currency) will either go big or die or implode. [Laughter] That's probably on the government, like a little bit of regulation could tank that whole thing.

But let's say that all the cryptocurrency gets wiped out. Does Web3 still exist? Do you still want distributed apps? Do you still want distributed user authentication and stuff like that? I don't know.

Chris: Maybe. I would think something like NFTs will survive. If you bought an NFT with money, who cares. It's still on the blockchain. It doesn't require that you buy an NFT with cryptocurrency - or maybe it does. I don't know. I don't think so. I think you could still make an entry.

Dave: I mean you're paying somebody. Yeah.

Chris: Yeah, you give somebody money and then you get an entry on that--

Dave: Block.

Chris: --blockchain thing. It just seems like the more I look at what's happening in that market, it's just poppin'! I don't see any reason why it would slow down. I think it's exciting for people, and they're just riding that excitement. I think there's just a lot of -- you know new crap just gets minted constantly, and they're just slurped up by people.

They're having fun doing it. The artists are making money. I know it's dangerous. There are all kinds of problems. But as far as predictions go, I don't see it slowing down.

Dave: Yeah. Well, I think Neil Dash had a quote the other day. He was just like, "Whether you like it or not, it's here."

Chris: Hmm.

Dave: You might just have to eat that.

Chris: [Laughter]

Dave: Billions, literally, of dollars are invested in it, so what are you going to do? You know? But anyway, there's a blog [laughter] called--

Chris: Mm-hmm.

Dave: "Web3 is going just great"--

[Laughter]

Dave: "...and is definitely not an enormous grift that's pouring lighter fluid on our already-smoldering planet," by Molly White. Anyway, I identified with this one quite a bit. It's in my feeds.

Chris: Yeah.

Dave: Web3isgoinggreat.com.

Chris: I do appreciate the jokes. Yeah.

Dave: Anyway.

00:22:29

Chris: I'm of the opinion that there is a lot of nuance here. We need to watch and listen more than just shit on it or just be like, "This is all I'm going to do for now, forever. Blah." It's just that there are things to be learned.

Dave: I think there's a little air value. I think we could find it. It's so clouded for me to where I don't even want to be a part of it. It's like, "Hey! You can invest in this company, dude, and be a member of the DAO."

Okay, yeah, I'd like to be in the DAO. "Also, in the DAO, who has the most, is this kid who just only does acid all the time. [Laughter] Anyway, this kid is your boss now, in the DAO, because he has more DAO tokens."

It's like, I don't want that. I don't want that at all.

Chris: [Laughter]

Dave: Can I cash out? "No!"

Chris: There was a good Wes Bos tweet too where he said, "If it becomes big, you're not going to be left behind." If you don't know anything about it right now, believe me, you're still going to be ahead of the curve, really, when it starts getting big. If it really becomes a thing, it's going to be accessible to all.

Dave: Mm-hmm.

Chris: You're not behind. Don't even worry about it.

Dave: Yeah. Yeah.

Chris: I really appreciated that take. It's like, dude, it's going to be fine.

Dave: That said, though, it's tied to money, and so if everything costs a billion dollars, I'm priced out because I didn't buy enough Sheba coin early enough.

Chris: Yeah.

Dave: You know what I mean?

Chris: I think that's a very good point, too, that you can't even play unless you've got tossing around money.

Dave: Extra free money to invest in invisible fake money. [Laughter]

Chris: Right. Yeah. The chances of it being an investment is really low. A lot of it is just going to disappear to something like a gas fee. That's just gone. You know?

Dave: Yeah.

Chris: All right. Frick the nuances, but it's so poppin'. There's so much talk around it. For it to just disappear, not going to happen.

Dave: I think it'll either get a hook or, like I said, get a regulation and catastrophically implode.

Chris: Mm-hmm. Mm-hmm.

00:24:34

Dave: I think there'll be new elements in HTML. I think we're already seeing hints of that in Chrome Canary, so that could be kind of exciting for HTML.

Chris: Okay.

Dave: Then the stuff we've been talking about here, like I think CSS compat is going to be weird for a bit. And that's probably going to make (Mike Taylor and Jen Simmons) their job very valuable.

Chris: Yeah.

Dave: But it's just going to be a weird Wild West because I think a lot of properties are landing. We have color properties, color adjust, LAB colors, and all that stuff in Safari right now. But it's not in Chrome because Chrome has to update these engines and stuff like that.

We don't have Subgrid in Chrome because Chrome has to upgrade Grid NG or whatever.

Chris: That's what I'm predicting isn't a big deal this year because the compat isn't there yet. I'm so excited about Subgrid. I'm so excited about the color properties like from where you can convert one color syntax into another and all that. We've done videos on that stuff. That stuff is hot.

But the compat isn't there, which means I don't think it'll be big in 2022, just to caveat my predictions, whereas I do think scroll snapping stuff is going to be big because the compat is there.

Is and where selectors in CSS, sprinkling them out and using their abilities in the cascade, it's shipped everywhere. You're going to see more of it this year.

Using custom properties is not particularly new, but it's been around long enough and we're starting to see usage of it just sprinkle, sprinkle, sprinkle. I think it's going to be a big year for custom properties. I think it's going to start entering the developer consciousness, so they're just going to be used all the time.

Then what extends them is @property, which doesn't have the compat. But once that drops, I think it's technically part of Houdini. That's going to be big for them because it means, oh, this custom property, it's an angle, and you can treat it like an angle, and it's going to unlock custom properties even more. Probably more of a 2023 thing just because the compat isn't there yet.

Now that we have custom properties and stuff, using them as part of systems gets bigger and bigger. Using them with the color functions, once that stuff drops, it'll make them even bigger.

There's going to be an Andy Bell article dropping soon on CSS-Tricks as part of that end of year series about his strategy for fluid type. Fluid type had this moment of popularity and then I think it found something of an audience. But I feel like, generally, the technical debt for it has been a little high. Then along came Clamp, and it made it easier, but people kind of abused Clamp in weird ways and didn't do it right.

I think his article is going to be seminal on this because it's going to be like, "Look at this system of sizing that I can build pretty quickly. It uses custom properties to some degree. It sets a curve of font sizes that you can just reach for real easily." Fluid type plus Clamp plus custom properties, it's just going to be a big year for that, I think.

Dave: No. I think that's awesome. Yeah, I think all that can be easier. I think that's why people reach for all these CSS frameworks - or whatever - just because they have all the properties I need, the margins and the type sizing and stuff like that. I welcome that. I would love to see that.

00:27:58

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Backlight, that's backlight.dev. Super impressive tool tailormade for working on design systems.

Imagine you're on a team that builds, ships, and maintains a design system. Super common these days in product work and agencies that deliver design systems. You know the drill. It's a great way to build digital products is to have a design system to build them from.

Imagine the landscape. Maybe it starts in Figma, and you figure out how everything looks and what the different components are. Eventually, you pick some kind of framework. It could be whatever - some kind of component-based framework to code out the whole thing. There are probably design tokens involved. You might use storybook to get data attached to these components and have stories and all that.

The code eventually goes to a GitHub repo and eventually, kind of last step, there are tags in Git and those tags become versions. The whole thing goes out to NPM so that people digesting this design system can just pull it in from NPM and use it.

That's a lot. There's a lot of work there. There's a lot of stuff to get right. Backlight literally helps with all of that.

It's an in-browser. You might even call it an IDE because it is an integrated development environment specifically around design systems. All your design tokens, all the tiny little atomic components to the bigger molecule components and all that, every component is in there with: Where does the Figma come from? What's the source code for? What are the stories behind it? Can I make changes to things? Can I preview the components? Can I push those back to GitHub? Can I work on a branch of the design system? Can I push it to NPM? It helps with all of it.

Super impressive tool. You've got to check out backlight.dev. Thanks for the support.

[Banjo music stops]

00:29:50

Chris: Yeah. What about anything from at the meta level, not just Web platform but from libraries and frameworks or companies?

Dave: You know, in the D-d-d-d-discord, people have made some good points, like, of course, Ben Holmes, who does Slinkity, is very bullish on this.

This idea that we've been talking about where frameworks or static site generators are going to be kind of like, "Bring whatever -- your React, your Vue -- and we'll handle it." He thinks that's going to be kind of more of the standard and probably built on esbuild and all that. Kind of like getting away from you had to be all-in on a React framework just to build a blog or whatever, these sort of meta frameworks or sort of language agnostic frameworks.

Chris: Yeah.

Dave: It could be kind of cool.

Chris: I mean there's certainly trending happening there with Ben's thing, Slinkity doing it, and Astro doing it, and Isles doing it, and Remix saying maybe they're going to get into it, too. That's a lot of big names saying, "Hey, maybe multiple frameworks work."

React is obviously massively popular. I find it interesting. What was it? I think Josh said that he predicts maybe not in 2022. It might start in 2022 and, by 2023, we're starting to see more of a real movement of companies moving away from React, like on purpose. Like, "Oh, my God. We did too much in React. There's better stuff out there now. We need to hire people to get us off of React."

Dave: I think that's fair. I think maybe not next year, but in five years there's going to be a lot of work to, like, "Can you help us with our old React site?" or "Can you migrate us off this older website?"

Chris: Yeah.

Dave: I think there's going to be a lot of work.

Chris: [Laughter] We're hiring bootcamp kids and they don't know React anymore.

[Laughter]

Dave: Gees! Whoa! That could be a huge problem for people. j

Netlify had their State of Jamstack Survey for 2021.

Chris: Mm-hmm.

Dave: Laurie Voss' thing, and he kind of made the point, said Jamstack is the new jQuery, which #hotdrama.j

I think the idea there was it's the most widely used of all the Jamstack sort of technologies. It's sort of in position one. Companies are hiring for it. Stuff like that.

It was an interesting take, so I don't know if it's going to disappear right away, but that's something to think about.

00:32:36

Chris: Yeah. I think new frameworks as well. It's true that it has slowed down. There are still lots of JavaScript frameworks, but there hasn't been a new one at the scope of Vue, React, and Angular in a long time. That might be the end of that for a minute. Sometimes there are riffs on it, though. Have you seen SolidJS - or whatever?

Dave: Mm-hmm.

Chris: It looks basically like React. It's like when PReact existed, and PReact had a pretty good community, too, but maybe didn't fully get huge. You know? SolidJS, it's like an even smaller PReact, almost, but is basically the same thing. I'm probably not speaking about it majorly intelligently, but it feels like that.

Dave: I think it's twice the size at 6.4 kilobytes.

Chris: Oh, it's bigger but does more or something? Oh, gosh.

Dave: Maybe it has better compat or something but the same vibe, for sure.

Chris: Yeah. Maybe the JSXE frameworks, there starts to be more of that action. JSX doesn't necessarily mean React. It's just a syntax. It already is that. It's a separate project - maybe, maybe, maybe.

Dave: Well, and there's so much, too, like LitElement. I like LitElement, right?

Chris: Mm-hmm.

Dave: I have some hot drama on that, but anyway. [Laughter] LitElement, it's basically like a React component. It looks and feels like a React component. It looks and feels like a React component. You type HTML, like a templet literal with that tag in the front, so HTML tilde--

What is the tilde one, the back tick? To do your templet literal--

Chris: Mm-hmm.

Dave: I wish stuff would get onto that because that's actually a lot better, more performant for the browser because it creates an actual template fragment - or whatever.

Chris: Mm-hmm.

Dave: It doesn't have to invent a JSS language and stuff like that or a DSL specific language.

Chris: Oh... So, you wouldn't have to process it. It could just be used?

Dave: Yeah.

Chris: Oh...

Dave: That would be kind of cool. Anyway--

Chris: Yeah. Maybe we'll get away from JSX because JSX requires. It's not JavaScript.

Dave: It's not.

Chris: Hmm.

Dave: I don't know. I wonder if there could be some optimizations there. Obviously, old whatchamacallit is on it for a long time - React is. But I wonder if the--

Chris: Yeah. But you know something like Vue, Petite Vue proves that (even in HTML) there's enough syntax there with HTML elements that it's ergonomic to work with. I think JSX was like, "Ack. HTML is not ergonomic enough, so I want to have this hybrid of JavaScript and HTML." It's like, "No, maybe that was wrong." You know?

Dave: Mm-hmm.

Chris: I actually kind of like working in JSX almost because of the strict rules. The fact that Prettier works on it is kind of a big deal to me.

Dave: Yeah.

Chris: But I think that nut has been cracked, and you can get Prettier working on HTML, too.

Dave: Well, yeah. I used to not do it for a bit, but even hyphened elements would choke in the syntax highlighter and stuff. But I think it's better now.

Chris: Yeah.

Dave: Anyway--

00:35:51

Chris: Qwik looks interesting, too. Although, it's way too early days for it. But it used to be like, "Why would you ever use the DOM itself? The DOM is slow and bad, so I'm going to make another DOM that's not slow and bad."

Qwik is like, "We're going to store everything in the DOM." [Laughter]

Dave: In the DOM? Okay. All right.

Chris: State, everything. You know? It's like, "Wow! Weird! But okay. apparently it's now faster again."

Dave: Yeah!

Chris: Missed the boat on that.

Dave: Well, I think the marketing about DOM being slow, VDOM being fast, was maybe not scientifically reviewed. [Laughter]

Chris: From a book of faces. Yeah? [Laughter]

Dave: Depending on your situation. I don't know, but browsers have gotten better, so maybe that whole story changed.

00:36:35

Dave: I was just talking to my friend, John, who owns Uplift Desk. He was saying -- he has like the Oura Ring. He was like, "You know, apparently the--

Chris: Oh! Miranda's just arrived yesterday. Yeah.

Dave: Yeah.

Chris: Yeah. Anyway--

Dave: He's like, "I love it because it sleep tracks for me and stuff like that." I was like, oh, that's maybe something I should get into because I have the Apple Watch, but it's not comfortable to sleep in and it would never make it battery-wise.

He was like, "But you know I've been reading apparently the Fitbit is better at sleep tracking than the Ring. Just the technology there has gotten better. It used to be the finger could work, but now you can get a better track on the wrist."

I just was like, "Oh, my gosh. How do you keep up with that?" one, but then, two, "It's funny how technology kind of leapfrogs each other.

Chris: Mm-hmm.

Dave: And so you have to know.

00:37:27

Chris: We talked about compat a little bit. It does seem like, okay, container queries, cascade layers, style scoping, nested CSS; there's so much stuff happening to CSS that it's all going to drop at uneven times and compat is going to get weird, right?

Dave: Mm-hmm.

Chris: We kind of know that, but also none of those things are really particularly relevant to utility classes. If they solve problems where that was the reason why you reached for utility classes to begin with, maybe that's being used less or you really like the syntax of container queries and there's just not a sensical way to express that in utility classes that maybe they just get less popular. You need them less and you can't use them as well. I don't know if that's going to happen. It just seems like it's possible that they take a bit of a downturn because of the changes to CSS. I always like the things that, ultimately, they're still tooling, but you can still just use regular CSS, too.

Dave: Let's use ejector.

Chris: Right.

Dave: Well--

Chris: Yeah.

Dave: We saw Adam Argyle's open props.

Chris: Open props. Yeah, I should have mentioned that when I was talking about custom properties. Talk about custom properties exploding.

Dave: You know what's funny is it came out and I liked it. I got an early look at it, and it looks very cool. But I was like, "I don't know if I'll ever use this. I can write my own custom properties. I'm a smart genius, so I'm not going to do that. It's cool, but I'm not going to use it."

Chris: Yeah.

Dave: Guess what, man.

Chris: Mm-hmm.

Dave: He has this one. it's z-index, right? It's like: Layer one. Layer two. Layer three. Layer four. Layer five.

It just basically runs in z-index. You say, "Layer one," and then layer important is 2.000147 billion. Anyway, I just was like, "Oh, that's really clever," because you should really only have five layers in your application and you just pick one of the five.

Chris: Hmm.

Dave: The way I've been doing z-index where it's like 100, 101, 2000, that sucks. [Laughter] Layer one, two, three, four five: Why don't I do that? Anyway, so I'm just like, there's stuff in here that I could use literally today and probably should, and so I might just start. Rather than inventing my own language, I might just start using his stuff.

Chris: It does seem a little layer on able because of how little it is that it's like, "Who cares if you drop a bunch of these custom properties that you don't use on here?"

He does include tooling if you want to kind of tree shake them out. You can do that anyway.

Dave: Sure. Yeah. Yeah, and that's it, too. I mean I don't know if I want his fonts exactly - or whatever. But font weight one, 100; font weight two--

Chris: Yeah. Doesn't that seem like the next thing. Oh, it does say it's customizable. Map the props from JS. Yeah, there's got to be some way to change what the font stacks are. That would be weird if there wasn't.

Dave: Yeah. He has some fluid fonts.

Chris: Yeah.

Dave: Yeah, I would be curious getting into how do I generate my own specific ones because I don't know. I don't need all the colors, but there's stuff in here now that I'm like, actually just having this would be a lot easier, like ratios, just having those, and I could just say, "Ratio wide-screen." Done.

00:40:47

Chris: What I kind of want is a Figma plugin so that I can't do anything in Figma that's not represented as a prop here.

Dave: See. There you go.

Chris: Kind of like Figma for open props - or something. Figma is on my list a little bit, too, because of how huge it is, but also how much tooling you see based around it.

Dave: Mm-hmm.

Chris: In Figma, it's in the browser already, so it knows what the border of a thing is. It knows what a background color is, gradients, and all that. You can even see the CSS. You click onto the right tab in Figma and it's just like, "Here's the CSS for that thing."

Dave: See. Yeah.

Chris: It's like, that's cool. You design that well enough; you're seeing tools like AWS Amplify just yank it in, just be like, "Okay. That's a component. I'll just pull all the CSS for it into a CSS file through APIs because Figma has got fancy APIs to access it all." It makes the CSS file. It's kind of like nobody had to write any CSS. It's a little too dreamy in that it's like, "Well, what about the container query or the media queries? How do you map it to your custom properties?"

To imagine that nobody will ever touch the CSS for this site because it's automatically pulled from Figma seems a little too unrealistic. But the fact that you get a really clean base right out of Figma and changes get sucked over from Figma and stuff, it seems like that's a trend that's going to continue, mostly thanks to Figma's APIs and desire to be part of the design tooling chain.

Dave: Yeah. No, I mean we're pushing a lot of clients over to Figma. We're pretty bullish on it. It does a lot.

Then what I'm kind of experimenting with, and this is kind of Luro-land here, but getting tokens out of it. You just say, "Hey, give me all the design tokens in this Luro file." That would be kind of cool to see, visualize, and stuff like that.

I think it would be cool, too, if these custom properties, this open props or whatever, could also -- I don't know. You're just dealing with variables, right? Your design system variables and presets (I think is what they're called) in Figma.

Dave: Yeah.

Dave: Those things and your variables on your website are kind of the same thing. That would be kind of cool.

00:43:11

Chris: Mm-hmm. Yeah, the tooling around componentry and design systems and stuff is getting great. I think Backlight sponsored the show. I don't know if it's on this show or not, but I was really impressed looking at their tooling. It's kind of much cooler than you think it's going to be.

At first, I looked at it at first, I was like, "Wow. That's weird. It's like a whole IDE. Do I really want that?" Then you demo it, and you're like, "Yeah, I think I do want that. That's awesome." It's really pretty cool.

Then at some point you get your design system right, click a button, and it syncs to your repo, makes an NPM tag, and pushes it to NPM of your system. I'm like, what?!

Dave: Yeah. Yeah.

Chris: Wow!

Dave: Whoa!

Chris: That's amazing!

Knapsack looks cool. It's kind of in that vibe of helping you with your componentry in Figma and whatever. Then I mentioned Amplify too. It just seems like there's enough names knocking at the door of this that it's a trend, that it's a 2022 "thing." You know?

Dave: Mm-hmm. Mm-hmm.

Chris: Anyway, that's kind of cool. There's some pie in the sky stuff that'll never happen, but we're always surprised, right? If we're going to just kind of guess, I'd say it'd be kind of cool to see CSS do the final frontier, animating to auto. Can it happen? Can it happen?

Dave: Oh, my gosh. That would be cool.

Chris: Mm-hmm. Mm-hmm. Mm-hmm.

Dave: Is that on the menu for maybe this year?

Chris: I feel like I've heard tiny whispers from the depths that it's not impossible.

Dave: Man, I could use that today. I had an alert component, and it needs to shrink up - or whatever.

Chris: Yeah.

Dave: It'd be cool if it opened and closed all nice. Oh, man. That would be beautiful.

Chris: They're starting to get more support for dialog, but nobody has actually fixed the accessibility problem. So, as far as pie in the sky stuff, it seems like that dialog would ship in more browsers and they would do whatever it takes to satisfy the accessibility community with dialog. That seems pie in the sky, but that would be kick ass.

Dave: Well, yeah. I think it's coming or it's being worked on in Safari, which is kind of the major holdout. I think they're behind a flag in Firefox maybe too, but anyway. So, that would be kind of cool if it came out. It would help me immediately. [Laughter] Man, you build a custom UI; you don't want the native confirm or whatever. You know? You want a dialog. You just want to style that.

Chris: Oh, yeah. You want a dialog, for sure. I think there's an adoption path for it that's like, you know the outer most div for the modal you have now? Make that dialog. Maintain the styling however you need to. But just make that outer one dialog and then replace whatever JavaScript you have, APIs you have, for opening and closing it with the native ones. Then you get a lot for free - immediately. You know?

Dave: Mm-hmm.

Chris: Theoretically, the focus trapping and the escape key. You get a bunch for free, right? That's kind of a big deal.

Dave: Mm-hmm.

Chris: Managing your own little backdrop thing can go away. There's probably a lot of code that you can delete from your code base when you do that.

Dave: Click backdrop, hitting escape: those both deleted immediately. Then even close on form submit, that's a native feature.

Chris: Well, you might have 500 lines of code for focus trapping.

Dave: Oh, yeah. I don't think that's actually -- I don't know if that's in there--

Chris: That's not in there?

Dave: But I think it's being talked about. I think it's chicken-egg. One thing has to land first, and then we can go through and fix it or add a focus trap attribute - or whatever.

Chris: Okay.

Dave: We've been talking about that in Open UI. There are so many issues around it because what if an ad -- an ads focus trap and ruins the website? There are a lot of tough situations. But anyway, I don't know. I think it's a bright year for Web and tech and stuff like that, so I'm kind of optimistic, I guess, that we can do cool stuff.

Chris: Yeah. It's certainly cruising. [Laughter]

Dave: Yeah.

Chris: Probably at the most breakneck speed I've ever seen the Web move.

Dave: I think I, too -- me, myself, and I -- I'm generally more excited than I was previously because I feel like for a good three, four years, it was just like you have to do this website this way because Google said so or because React is cool. That was kind of crushing me [laughter] or just not as fun. I feel like we kind of have better tools, better CSS, better HTML - maybe. Everything is getting a little bit better incrementally.

Chris: Yeah. Right on.

Dave: All right.

Chris: Good year.

Dave: Yeah. If we missed anything, let us know. Send us your predictions. Hit us up, @ShopTalkShow, on Twitter. Follow us there for tons of tweets a month. Star, heart, favorite this up in your podcatcher of choice. That's how people find out about the show. You know that.

Welcome to 2022. Oh, my gosh. We're here, and we are cruising to episode 500. If you want to hang out, join us over in the Discord, patreon.com/shoptalkshow.

Chris, do you have anything else you'd like to say?

Chris: ShopTalkShow.com.