Transcript

[Banjo music]

MANTRA: Just Build Websites!

Chris Coyier: Hey, hey, Shop-o-maniacs. Dave and I -- well, Dave spoke at An Event Apart Spring Summit. He did a wonderful talk about Web components there. Then together we did a live ShopTalk Show at the conference. This conference was a couple of weeks ago now, and they've given us the audio from that session at the conference. Thank you, An Event Apart, for that. Very generous of you. We thought we would play it as this week's ShopTalk Show on the podcast itself.

There was some live interactive elements to it. In fact, we did a bunch of polls and people could vote in real-time. It added a fun kind of real-time aspect to the conference. Of course, as you're listening to this podcast, you can't vote. [Laughter] Some of the interactivity is lost there, but hopefully, we talk about the results of those polls as we go and, hopefully, the fun, live energy to it makes for a good podcast. Here is that.

Chris: Well, the bell has chimed 3 o'clock, so I think we should do this. Normally, there'd be a fun intro song. Dave did bring his banjo. Give us a cord. Give us a solid -- give us a C. I feel like C is the right cord for this.

Dave Rupert: Oh, C. I think it is written in C. We've had this podcast ten years. I still don't know the theme song, but here we go.

[Banjo music]

Chris: Ah! God, that felt good.

Dave: Hey there, Shop-o-maniacs. Welcome to another live episode of the ShopTalk Show. A podcast all about Web design and development. This time we're doing a video, so anyway this is very exciting. I'm Dave--in the booth or in the shed with the banjo--Rupert, and with me is Chris--in the booth with sound panels--Coyier. Hey, Chris. How are you doing today?

Chris: Yeah. No, you know what? I should have went in the booth, but I didn't. I'm just at my desk today.

You know I set up a teleprompter for this, too, so I can look you in the eye while the camera is at me.

Dave: Oh, whoa. Whoa!

Chris: I know it might be a little creepy for you. The eye contact is going to be strong.

Dave: The strong eye contact, I'm feeling it. That's alpha business maneuver that I appreciate it.

Chris: That's kind of what it was. I read a Seth Godin blog post--

Dave: Oh--

Chris: I feel like that's his style, kind of. This is going to be a ShopTalk Show. It's going to have live polls, literally, like Dave said. Normally, you ask questions of us. In this case, we're going to ask questions to you, but you can ask us questions too. In fact, the chat will be monitored for those. We'll get to them if we can.

There are going to be a bunch of polls. Maybe if you visit that URL right now, you can already see a poll. It's kind of a fake poll I put up. That's not a real question. Yeah, it's not even phrased like a question. But that'll give you a sense to how the polling works.

At any time, I can just take it down. Watch. I'm going to hit the stop button. Boom. Gone. You can't see that anymore, can you?

Dave: You just stopped it.

Chris: Can everybody see that? Can we get a thumbs up on the functionality?

Dave: Thumbs up in the chat. Thumbs up in the chat.

Chris: I mean there were like 30 votes.

Dave: All right. We've got a thumbs up there. All right.

Chris: There are plenty of them. Yeah. Okay. Okay.

Dave: You can get it on your phone. You can pull it up in another tab. The poll will go on. It'll direct you. You don't have to click a button other than to vote. There you go.

00:03:20

Chris: Yeah. All right. You know there was a theme, I think, or probably lots of themes. If you sat and listened to every talk -- I hope you did. I listened to them. I wonder if people could put a point on what they thought the themes were. I tried to do it. Dave and I tried to do it because I thought that might be a fun way to then structure this show to be like, let's talk about themes and the other talks as they happen.

The one that we landed on that will give some structure to this podcast is -- get this -- the Web is good. But also, get this. The Web is bad. [Laughter]

Dave: Dun-dun-dun...

Chris: [Laughter] A little ying-yang there.

Dave: Yeah.

Chris: The Web is good. The Web is bad. We're going to explain what we mean by that and how that might have possibly been one of the through lines for An Event Apart as the show goes on. First, let's kick off this poll thing--

Dave: Yeah.

Chris: --because that's going to be part of the deal. We want to get some demographics on you. Let me kick off this first one.

Dave: Do some user research. We're doing research. I think we just all learned about research, so we've got to do some research here.

Chris: You might call this low-impact user research. [Laughter]

Dave: Yeah. Yeah. This is going to be pretty -- this is easy. If you fail this question, you are a developer, a mixture of those, a designer, or something else.

Chris: Mm-hmm.

Dave: A designer, developer, mixture, something else. Just let us know. If you fail this, that's fine.

Chris: Yeah.

Dave: That's tough. But we try to make it broad enough for everyone, inclusive enough.

Chris: Well, this is fun to watch them come in. It was all I could do to resist putting designoper and all those dumb hybrid names.

Dave: Designeloper, yeah, that's not a word.

Chris: Yeah. I'm glad none of those went on there. We should have put that. We should have done the front of the front and the back of the back. Maybe we'll do that later.

Dave: Oh--

Chris: Anyway, it looks like there are a lot of mixture people here. Not a terrible surprise, I feel like, for An Event Apart. A lot of people have interests across the spectrum of what it takes to build digital products. It looks like your employed that way too, so that's cool. That's by far the biggest result here is a mixture between designers and developers.

Then when you add all three of those, 80% or so are design or a developer with 20% of you doing something else. I wonder what those things are. Hit us in the chat. Is that UX or content or I don't know.

Dave: Management? I don't know. Yeah.

Chris: Yeah.

Dave: Who cares. Yeah. Yeah. Very interesting.

00:05:43

Chris: I bet that's what it is. Anyway, let me stop this one, so we've done a little bit there. Then your level, as you do those jobs, then is one of these. I always struggle with that.

Dave: Yeah.

Chris: Everybody knows what junior and senior is, but are you when you're not, when you're in the middle, when you're just the thing and you're not junior or senior?

Dave: If you're not brand new, you're unpromoted? Is that -- [Laughter]

Chris: [Laughter]

Dave: It's junior, unpromoted, senior, and then more senior than that.

Chris: [Laughter]

Dave: So--

Chris: Yeah. I read this. Sarah Drasner had a good article and mini-website she made for this whole thing about career laddering. We should probably chuck a link in the show notes or whatever.

Dave: I got it. I'm on it. I'm on it.

Chris: She has worked at so many places, she has a good beat on this, but there is a staff developer. There's a principal developer. There's a distinguished developer. I think those are somewhat industry-standard, probably depending on the size.

Dave: Mm-hmm.

Chris: Like if you worked at Mozilla, Microsoft, or something. They'd have those levels, but we certainly don't at CodePen. We're all just the medium. We're all senior, we'll say.

Dave: Yeah.

Chris: Okay, lots of seniors, lots of medium people. Less juniors. All of y'all know what you're talking about, website builders.

Dave: Okay. Okay. Good. Good. Good. A lot of old people.

Chris: Yeah.

Dave: This is wonderful.

[Laughter]

Chris: Yeah.

Dave: Maybe some people even getting into management and stuff like that. If you've been senior long enough, eventually people say, "Hey. Go watch these people," right?

Chris: Yeah.

Dave: I don't know.

Chris: Very cool to see that most -- oh, the medium one just almost took over.

Dave: Just inked ahead. Okay. Well--

Chris: Oh, no! The medium one is winning.

Dave: All right.

Chris: Okay. Well, that's that. So, a lot of medium and senior people here. Good to know. Good to know. I guess, if you're a manager then or senior and you're responsible for other people, I'd think senior people probably are in that ballpark more so than others that they have to deal with other people.

Dave: Yeah.

Chris: You're not just a warrior of one.

Dave: Can you train this new hire here or watch these interns?

Chris: Absolutely. Write some documentation. Have some reports, as they're called sometimes.

Dave: Oh, yeah.

00:07:53

Chris: We've got a "would you rather" question here.

Dave: Would you rather?

Chris: Dave and I was thinking up here.

Dave: Okay. Would you rather work with idiots or manage idiots or be the idiot? Those are your three options.

Chris: [Laughter]

Dave: [Laughter] You get three options on the team here. Choose your team wisely. Oh, man, be the idiot. Being the idiot it out to an amazing leap.

Chris: [Laughter]

Dave: That was a late addition to the "would you rather."

Chris: [Laughter] I think I screwed that up. I convinced Dave to add that.

Dave: Oh, no, it's totally--

Chris: It would be fun to run this without that one.

Dave: I actually feel pretty passionate about this. Is it Cunningham's law or something? Put the wrong answer out and people will tell you the right answer. I think every team needs an idiot. [Laughter] I'm happy to fill that role. You just have to say, "Hey, what about this thing?" Then people will tell you, you did it wrong - literally.

Chris: They will. Yeah.

Dave: I had that last week.

Chris: What is the law? Did you have that? Is that one of those real law things?

Dave: Yeah, like eponymous laws. I think it's Cunningham's law. I can add it to my blog post about it.

Dave: Oh, my God. Here's a blog post idea for somebody. Write a blog post that says that all navigation in HTML should be within an unordered list.

Dave: Ooh--

Chris: And just see what happens. Make sure you put an open comment thread on the blog post just to see what happens.

Dave: Did this happen to you, Chris? Did this...?

Chris: Well, it was just one of those things where it's easy to have a very strong opinion. You'll find that people have opinions about it too.

Here's another one. All links that are not internal to your own website should have target blank on them.

Dave: Oh, yeah.

Chris: Just write that as a blog post like with no nuance at all to it.

Dave: That's good.

Chris: It looks like "be the idiot" is the victor.

Dave: Be the idiot, and that's Cunningham's law: The best way to get the right answer on the Internet is not to ask a question. It's to post the wrong answer.

There you go. Never ask questions. Just put the wrong answer.

Chris: Not even the wrong answer but just take a stab at it.

Dave: [Laughter] Just--

Chris: Random.

Dave: Yeah. Good, 80% confidence kind of out there. Go for it.

Chris: It looks like everybody here is very comfortable being the idiot on the team. That's probably a good place to go.

Dave: Yeah. Yeah.

Chris: Okay, so those are the demographic questions - for now.

Dave: For now.

00:10:27

Chris: Now we have an opportunity to get into some of the themes that we saw come out, I guess, in An Event Apart. Let's start with the Web is good because I felt like there was more focus on that, probably for the better.

Dave: Yeah.

Chris: Maybe positivity is starting to seep into the world lately, not just on the Web, but let's talk about the Web for now.

Dave: Yeah.

Chris: What's so good on the Web?

Dave: Well, you know Jeremy Keith kicked off this conference with really just, you know, I get the goosebumps when Jeremy is talking about the Web. It feels real good. Yeah, he talks of just the Web grows and grows, and then kind of just encompasses things and -- I don't know -- gets smarter and better every day. That's cool.

Chris: Yeah.

Dave: That's cool.

Chris: Jeremy's got a nice long view of the Web, too, and kind of the speed at which things move and stuff. There's a lot to say about his thing.

He made a point during his talk, though, of many points. I'm just picking on here about how jQuery was so popular. There are probably a lot of people. If you're a deep senior, I'm sure there are plenty of people here that write jQuery every day or at least remember the days in which they did if you happened to be kind of a JavaScript developer anyway.

Isn't it funny now how it's still here? It's still big. I think Scott made this point, too. But the Web platform sucked in most of it.

Dave: Mm-hmm.

Chris: Name an API that jQuery had that the Web platform doesn't have. We've got Web platform. We've got the Web animation API out of it. we have fetch now. We used ... jQuery for having such good ajax stuff. The "find something, do something" library, they call it - all that. What was the selector engine in jQuery?

Dave: Sizzle.

Chris: We got that.

Dave: Yeah.

Chris: I got query selector all. Yeah. So, we just got all that. Isn't that cool? Isn't that good of the Web?

They used to call it paving the cow paths, too, right? You see what a bunch of developers are doing and then the Web just kind of sucks that in. That's like, look at where the cows are going and pave that area for them. I don't know why you'd pave a cow path, now that I think about it. But that's cool. That's the Web getting better. That's Web platforms and all the people involved looking what developers are doing and making the Web better for it. That happened with native apps, too, you know?

Ire talked all about PWAS. That was so interesting about competitors come along once in a while and, to some degree, threaten the Web. Why would you make a website when you could make a native app, because the native app has these wonderful push notifications. It has geolocation access. It can read the temperature of the room. I don't even remember all the detail.

Anyway, isn't that nice that the Web evolves and then sucks those things in? We have geolocation API. We have access to media devices on the Web and all that. Pretty strong.

Dave: Yeah.

Chris: Cool.

00:13:34

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Netlify. Netlify is throwing another conference. In the past, they've thrown JAMstack Conf, which has been a very awesome conference. This is in a similar vein, but it's not just all about everything JAMstack.

It's specifically about headless e-commerce. It's called the Headless Commerce Summit. It's coming up this month, Wednesday, May 26th, from 9:00 a.m. to 1:00 p.m. Pacific. It's kind of like a half-a-day thing.

Guess how much it costs. Nothing. It's free. You should totally go to it. Of course, it's virtual.

They've announced the first round of speakers: Cassidy Williams right from Netlify, Victoria Duggan from Shopify. You've got Matt Foyle from Algolia. That'll be interesting. I'm sure it's going to be about how to get really good search on your headless WooCommerce site. Rachael Thompson from BigCommerce. A bunch of great names from this thing. I'm sure there'll be more.

You know JAMstack and e-commerce is interesting. For a long time, it's been kind of like maybe a hard thing for JAMstack to pull off because there is a limit to basically how many pages work well on a JAMstack site, but kind of not really. It depends on how you architect it. You could just have a shell page for products and then hit it, some kind of cloud function to get the data to prefill it.

But Netlify has been talking a lot lately about on-demand builders and distributed persistent rendering that are really good for headless e-commerce. It allows you to take more kind of fundamental JAMstack approach to things with a lot of prerendering but not have the wait times during development or for development for sites with lots and lots of pages. It's cool stuff.

I'm sure they're going to be talking about it at the Headless Commerce Summit. It's literally headlesscommercesummit.com. Check it out. Thanks for the support, Netlify.

[Banjo music stops]

00:15:47

Dave: Do you want to do one?

Chris: Okay.

Dave: Another poll now.

Chris: No, I mean there are so many things to talk about. One of them is how much synchronicity there is in the talks that mention CSS. There are three like kind of big CSS talks so far, which is Miriam talking about custom properties, but then Morten and Rachel talking about -- and they, fortunately, said some really powerful things together. The big one being that CSS has stopped being so damn weird. [Laughter]

Dave: Yeah. Yeah.

Chris: You know it used to be not only thought of but talked about and taught as, like, "Well, here's a weird thing in CSS. Guess you've got to learn it. Here's another weird thing. Guess you've got learn it. Here's another weird thing."

The lucky few don't hate that and power through and get to learn it. Now, if you're learning CSS, especially for the first time, and come into it with no baggage, you're like, "Oh, there's a layout system. It's totally logical. There's a way that pages flow. It's totally logical. There's literally logical properties that make sense. It's this direction or this direction." I'm finger gesturing (up and down, right and left) for the audio people there.

Dave: Yeah. No--

Chris: It just makes sense now. The tools are strong. It's less hacky. It's a system, and they both made that point strongly in different ways.

Dave: Yeah. I liked how it was just -- you know, before, just a layout. You had float and you just abused the heck out it, and 10,000 divs to just make it work. Now, you don't. We have sophisticated layouts.

I like the point that Morten was bringing, just like our tools shape our thinking. I think that's something we're going through not just in CSS land but in JavaScript land as well. The tools are kind of changing. The tools have gotten better. Even this year.

2021 is one of the hottest years for CSS there has ever been, like in the last decade, maybe, since 2011. It's very exciting, just all these properties coming. Our tools are going to shape our thinking about what we can do with the Web in the next year. It's going to be kind of incredible.

Chris: Yeah.

Dave: Then the same with JavaScript.

Chris: What I thought about, I did like that quote that he brought. Let me read it because I saved it in here, even. It's attributed to Winston Churchill and, like, five other people. It's one of those quotes that's like nobody really knows who said it.

"We shape our tools and then our tools shape us."

Dave: Yeah.

Chris: It reminds me of what I always think of as muscle memory in development that you learn one way to do something and then you just do it that way just second nature.

Dave: Mm-hmm.

Chris: It's hard to almost break that habit. But then if you do, then you have new muscle memory of doing it a new way. I remember so distinctly it happening with Flexbox where I'm just like, "Oh, my God. Now I get this. I'm going to reach for it every time I need something that Flexbox can do." Then grid, technically, I guess, it's fair to say, came a little bit later. Then you learned it, and you learned how they interact with each other. Then your muscle memory evolves again.

It was literally like an hour ago. I was working on a page that had a widget kind of thing. There was a lightbulb on the left like, "Hey, look at this!"

Dave: Yep.

Chris: Then some text on the right of the lightbulb.

Dave: Okay. Yeah.

Chris: Now my muscle memory is straight-up just like, "Display grid-gap to REM, done," basically.

Dave: Done. Yeah.

Chris: You might have to set up a template columns.

Dave: Main content.

Chris: Probably one of them is the size of the lightbulb and the rest of them is one RF or, yeah, max-content or main content or something. I don't even know what my fingers will do. It'll just do it. [Laughter]

Dave: Yeah.

00:19:32

Chris: Because now that's the right tool. Morten, in his talk, though, had some weirder ones in there like text that overlaps an image.

Dave: Mm-hmm.

Chris: He made some points about -- I don't know if they were students or coworkers or colleagues or something -- just being like, "Why would I do it the grid way? I have some weird hack I know how to do that where I use negative margins," or who knows how to do that.

But now it's like -- I don't know -- you just put the text in some grid areas and the image in some grid areas. If they overlap, it doesn't matter because that's the cool world we live in now. If I need to adjust that, there's always Z index and stuff.

You need to change your brain a little bit and have it. Then once you do that, that muscle memory will set in. I think it'll kind of be more clear why it's better, too.

Dave: Yeah. Just even Paravel, just our consulting work, we used to spend days, weeks, months coming up with some grid system that was fully responsive and [finger shooting]. Content choreography, I think Trent called it.

Chris: Right.

Dave: We used to spend a lot of time on this to make it all work, come up with a system for layout on a site.

Now, we don't even do it. We might even just do it at the end because you just type display grid, and it mostly lays out fine. Then you just figure, like, you nudge it if you need to. You know?

Chris: Yeah. Right.

Dave: The layouts are--

Chris: I remember even at An Event Apart when Jen Simmons would be talking about grid. She'd be like, "If we see CSS frameworks like we did for floats, inline-block, and all the way we did it for grid systems, they'll be laughable."

Dave: Yeah.

Chris: Because they'll be like, "You don't need a system anymore. The system is one line." It's like grid template columns - some stuff.

Dave: Yeah.

Chris: It's amazing. Now that's a true -- I mean there are a lot of reasons that CSS Grid was a victory story for CSS.

Dave: Yeah.

Chris: But that's in there. Let's do that poll question. Let's do some polls.

00:21:32

Dave: All right. Heading over to the poll-a-tron 5000 here. Hold on.

[Laughter]

Chris: Yeah.

Dave: You'll just see my desktop for just a smidgy of a second here, but here we go. Poll-a-tron 5000 is go. Let's--

Chris: Okay, everybody. You don't even have to go anyway, remember, if you pulled this up on your phone or computer before. It'll still be there. We just want to know. This isn't even a joke question.

Dave: We want the pulse of the nation right now.

Chris: Yeah. CSS Grid specifically, what's the deal? Do you just go--?

Dave: Yeah.

Chris: I don't know. Maybe this is better for audio to say what the answers--

Dave: Yeah.

Chris: --or the possible answers are. Liberally, meaning you just -- you know. I'm in that category. I just -- pfft -- I just use it constantly.

Dave: Yeah.

Chris: A little, meaning like -- I don't know -- you're still learning it or you sprinkle it in where you can or you're not really responsible for that but your Web app uses it or whatever.

Then I can't, which is -- what would be I can't these days?

Dave: You know. I think there's always an "I can't"-er in the group. They support IE11, or that's a big deal, and so that's just one of those situations you just can't or you feel--

Chris: Even IE11 even had it, didn't it, but it was weird?

Dave: It was a weird one, yeah. It was a weird one. But then I think some people, their organization has a no new stuff policy, and so you just get stuck in that.

Chris: Right. Yeah.

Dave: Yeah.

Chris: Or you work with idiots.

Dave: Yeah. Marne in the chat is saying IE11 has to be the explicit. You have to say, "Go into 11. You have to label every single thing." There's no gab. Yeah.

00:23:12

Chris: Yeah. Yeah. Well, now that you mention the chat, we should probably -- there'll be questions that pop in. Amazing organizers of this conference are popping them out for us. There's one here from Derek who asks, "I have next to no experience with Vue, React, Angular, et cetera. Is knowledge of these frameworks now considered mandatory or am I the only Web out there who doesn't use these?"

Mandatory is a big word there.

Dave: Yeah, it's a big work. I mean this is -- I think this is a good question. I mean I think I've struggled with this, too. It's like, am I--? I don't want to learn React. Am I going to be a dinosaur? I hope not... question mark, you know, like fingers crossed.

I'm in the, like, "You should probably know one camp." That's maybe not fully explicit. You could watch, like, take the Wes Bos course or something, or you could just kind of -- I don't know -- build a little app with it. Try that out. Maybe that's something you could do.

Chris: I like that idea because then it's a little bit less magical to you. You just get it, you know. You've played that game. You understand what it's for. I've always thought that about any technology. I have a bad habit of reading maybe too much tech news. You know? [Laughter]

Dave: Yeah. Yeah. Yeah.

Chris: I just suck stuff down. Just at lunch today, I watched some YouTube video for some JavaScript framework that isn't even open-source yet. You can't even play with it.

Dave: You can't even.

Chris: But I was like, "Really? That's neat. How does that work?" But I just file it away in a little bucket that's like my, "Oh, that's a thing that exists in the world," bucket.

Dave: Yeah, and there's--

Chris: Then actually I have to learn it. I just file it away.

Dave: There's some general principles. They're all trying to do the same thing. I hate to -- they all do it differently and they're all wonderful, loved snowflakes. But it's the idea that you have stateful UI, which means if a user logs in, the rest of the app knows that the user logs in and the app responds.

The easiest way to do that right today is JavaScript because that's the only thing that can change on the....

Chris: Yeah. I'm glad you brought that up. I think state is probably the most important kind of concept in these. I know that Jeremy rags on this over and over, and I applaud him for doing it. There is no real hard and fast way to describe the difference between a Web app and a website. I don't want to pretend like there is, but there is the difference between a website that makes liberal use of state and one that does not.

I happen to just work on CSS-Tricks, the website. It has very little state that happens on it, almost none, and I work on CodePen, which is entirely state-driven.

Dave: Yeah.

Chris: I have a foot in both worlds here and I feel like it is a very different way to play the game. Anyway, if you're making money, Derek, and your career is going fine and you don't care, well, rock and roll. Let's go. Let's do a -- let's do a --

Dave: You can also pay somebody who knows those things and it works out really well. [Laughter]

Chris: There you go. Consider outsourcing. It's amazing.

Dave: Yeah.

00:26:31

Chris: All right, well, the grid one turned out to be that most people use grid a little bit, so that's kind of cool to see. It's probably changed over the years. What about Miriam's talk? I saw more kind of mind-blowing emojis during that talk than almost anyone else because the people that geek out about CSS were probably like -- even if you know CSS well, I think Miriam is here to--

Dave: Yeah. I was feeling really good about my talk coming in, you know, feeling like, oh, I'm confident.

Chris: Yeah.

Dave: Then I watched Miriam's talk right before mine, and then all the imposter syndrome set in, and I did not feel good about my knowledge of the Web. Things happen. Miriam, I like that she explores to the fullest extent, like the nested variabling and stuff like that.

Chris: Yeah.

Dave: Kind of getting into these wild calc functions and stuff. That was cool.

Chris: Truly cool. It's worthy of a talk twice its length, almost, because there's so much to get into.

Dave: Yeah.

Chris: We had a guest author on CSS-Tricks write this post called "The Raven."

Dave: Ooh.

Chris: They really wanted to name their technique.

Dave: Yes.

Chris: It was basically like replicating the powers of container queries with custom properties.

Dave: Ooh.

Chris: It was literally possible. There are a million caveats, but technologically you could do anything container queries could do without container queries. It's the most complicated thing you've ever seen. It's so complicated that you'd look at it and be like, "We can't possibly ship that in production. I'd be the last developer that ever understood it."

But it was cool. It was very worthy as a thought exercise.

Dave: Yeah. Well, I thought it was going to be like Edgar Allan Poe. It was something that you bury in your....

Chris: Oh!

Dave: It beeps and keeps you up at night.

Chris: It would beep?

Dave: Yeah. Oh, fully artist. There we go. [Laughter]

Chris: Yeah. I know there's no base on my mic there, is there? It probably didn't get through. I'm too base-y.

Dave: It was good.

00:28:32

Chris: All right. How about a poll then?

Dave: Oh, heading over. Let me pop over to the poll-a-tron 5000 here.

Chris: We're sharing it on the screen as well for people that just don't care to vote but want to see the results for all y'all just watching. That's totally fine too.

The same thing as grid. Are you doing it? Are you not doing it?

Dave: Are you using custom properties: a little, liberally, I can't? We'll just see. I can't is coming out pretty strong here.

Chris: [Laughter] Yeah.

Dave: It's interesting. It's interesting that these are--

Chris: It is, indeed.

Dave: Going to be different because variables, I guess the fallback for variables isn't super great. You have to double the clear, you know, but--

Chris: I was -- I had a period of almost being mad at PostCSS. They have a plugin. You know how post CSS works, right?

Dave: Mm-hmm. Mm-hmm.

Chris: It doesn't do anything by itself. It just does plugins that you add to it to do CSS processing.

Dave: Yeah. Mm-hmm.

Chris: There's one for variables, and I was like, grrrr. I know what Miriam would say. You can't Polyfill this. This is a runtime thing. It works with the cascade. There is no way you can preprocess custom properties ahead of time and do what CSS custom properties can do. It cannot be done.

But the way that it handles it, and it is actually kind of clever. It's not trying to make it runtime-able. It's not injecting JavaScript to make them work. It's just a fallback, so it's not totally broken.

Dave: Okay.

Chris: What it does is it leaves your custom properties alone but figure out what the value is, as best as it can, and then puts it one declaration behind the one where you set the actual custom property.

Dave: Okay. Okay.

Chris: It's like if you just use it like you did Sass or something, it would be fine. It would Polyfill just fine. If you tried to do fancier things than that, it won't work but it won't be totally busted if you did it. I think it's okay. Yeah.

Dave: I would use that. You know I just want a little help. I just want to, hey. [Laughter]

Chris: Right.

Dave: Here's what you get, bud. We tried. We all tried. Right? You tried to upgrade your browser. It didn't work out.

Chris: Sure.

Dave: I tried to give you a website. [Laughter] Sorry.

Chris: Yeah, and you're going to get just 3% larger CSS because of it.

Dave: Get white and blue, beautiful white background, black test, and blue links.

Chris: Yeah, right.

Dave: It's going to be beautiful.

Chris: Yeah, so dark mode doesn't work. But maybe that really matters to your company. Then you can't do that. Then you have to do it some other way. Whatever. Okay. Most people are using them a little bit.

I'm almost in this camp on production, too. It was only recently on CodePen that we shipped kind of all our colors, just on the HTML element properties, so you could use them elsewhere. I found it very helpful. That is very lightweight usage of them, but it was nice because then just in case you ever need to use an inline style or we have some old areas of the app that might use a little jQuery to pop up a modal or something and there's HTML in there that I don't have a good selector for and I've got jack something. It's just nice to be able to reach for a custom property in any context.

Dave: Yeah.

Chris: It doesn't have to be preprocess. They're just globally available at runtime. Very cool.

Dave: I like, too--

Chris: All right. That's custom properties.

Dave: Yeah. You can do cool stuff with it. In your editor, if you want to -- oh, let's redesign this component or whatever. I want to use my whatever design system. You can select from variables you have on your site. It's cool. You don't have to remember hexes and stuff like that. You can just start typing in variable links, so it's cool.

Chris: Yeah. Yeah, I wonder if editors will get smarter about that, like IDE capable.

Dave: Yeah! That'd be cool.

Chris: Like you do dash dash and it kind of figures out what's available to you at that thing. All right. Let's do the poll on this next one. Well, no. Let's do the PWA poll because that's similar in spirit to this.

00:32:42

Dave: Okay. Okay. Yeah. Scotty Jehl's talk here. This was a question I had just because I've worked with companies that do and don't, but does the main project that people are working on, do they have a PWA? Sorry. This wasn't Scott. This is Ire's talk.

Chris: Yeah.

Dave: Sorry. I was thinking way ahead. Is it on your radar? Are you considering it? Are you not even? Did you accidentally install something and now you do have it? This is just something that happens, too. I have one of those, so whatever. [Laughter]

Chris: I love that. You have an accidental service worker?

Dave: Oh, why not? Some frameworks just have them.

Chris: I know.

Dave: Yeah.

Chris: Like if you use Gatsby, don't you just automatically have a service worker?

Dave: Yeah, and the same with like Nuxt.

Chris: You probably don't even know it.

Dave: Yeah.

Chris: Yeah. Nuxt probably does too.

Dave: There's a PWA module, but it's a one-liner to turn on. Then if you've turned it on during the setup process, it's just on. Yeah.

Chris: Oh, my gosh. Look at this poll. Is that what you expected? That is not what I expected.

Dave: This is not what I--

Chris: It's a lot of--

Dave: Okay, so one of the values was, "Yes, it's a priority. Our company is investing in it. We're PWA all the way."

Chris: Right.

Dave: "Yes, but it's not a priority. We have it. Not so maintained. Whatever." "Yes, accidentally." That would be me. No one -- it's just me, I guess. [Laughter] Then, "No. Considering it." That's at 36% right now. That's actually pretty good. Then, "No, not on our radar." That's 59%. That's kind of -- I don't know. It's interesting. Maybe not everyone feels like they need it.

Chris: It is, and that's PWA, not service worker. Service worker is a big part of it, though. To me, that's the meat and potatoes of a PWA.

Dave: Yeah. You need offline--

Chris: Just having a Web manifest file, it's like, whatever. That doesn't do anything.

Dave: Yeah, you should have that regardless.

Chris: Yeah.

Dave: But then the service worker gives you the offline page or cache a few pages along the way. That's a good, helpful thing. I don't know.

Chris: Yeah. I mean I'm super compelled by it, but I don't ship one either. I know Jeremy would probably slap our wrists for this or whatever. He's ... potential.

Chris: They're in all Web product and you don't ship a service worker. That's interesting.

Chris: No, because I'm scared of it for one thing.

Dave: Yeah.

Chris: Because you can screw it up such that it caches files in a way that you don't have control to un-cache them. Don't do that. There are ways to prevent that from happening. If you did just ship a really sloppy service worker that was just like, "Cache all this stuff forever," you know?

Dave: Yeah. Yeah.

Chris: Users, whenever they visited your website, for a long time, would get a bunch of weird, cached stuff and you've have no control over un-caching it. Oh, that would suck.

Dave: My favorite part of working with service workers is when you're working on localhost:4000 or something, and then you stop the server but the website still run. [Laughter] You're like, "Oh, what's going on?" But it's just the service worker. I call it local ghost. It's just still running in the background.

Chris: Yeah.

Dave: But it can get you into binds. I wish there was -- the thing I still haven't heard, and I've asked for this from Google people, would be just like a very simple, like, how to say, "Hey, the service worker updated." I know that's a common pattern, but just for the manual refresh notice or whatever, that would be super cool to me.

Chris: That's a big deal to me, too. It's unlike other Web tech things in that pretty much every time you push to your website, you're pushing a new service worker too.

Dave: Yeah.

Chris: Which implies build process. So, for these raw Web people that are just like, "I just like HTML, CSS, and JavaScript. That's my place. I'm raw, original Web kind of guy." Service workers don't jive real well, I think, with that world because you need a build process to help you with the de-caching. I don't think there's just one unchanged service worker that's just going to serve you forever on your site.

Dave: You can write bespoke service worker scripts. They're delicious. They're wonderful.

Chris: Hand edit it every time you update ... file.

Dave: Oh, yeah, I do that. Then you change the version number all by hand. It's wonderful. It's beautiful.

Chris: No!

Dave: [Laughter]

Chris: I'm not going to--

Dave: [Laughter] All right, here.

Chris: All right. All right. But workbox is compelling, I'll say.

Dave: Yeah.

Chris: That's the Google thing. I think that -- I don't know. I wouldn't say I'm bullish on it because I haven't used it enough for that, but I am compelled by, I think, some of this stuff is complex enough that it deserves tooling. IMHO.

Dave: I did not use workbox because I was like, I want to understand it. But now that I understand it, I'm kind of going back to, like, "Oh, maybe they actually solved all the problems I did badly." That's where I am.

00:37:57

[Banjo music starts]

Chris: This episode of ShowTalk Show is brought to you in part by Around. That's Around.co or follow the link in the show notes.

It's a new video calling app that's very different from the other video calling apps out there, I'd say. They say this, and I think it's really true. It's designed for collaboration more so than for meetings, so it's not this big rectangle and you're just looking at everybody in the rectangle. Each person that you're talking to is kind of like a floating head. You see their face cropped into a circle.

Then part of the UI and UX of it, there's a lot of fun built into it. You can apply filters to it and stuff. It just feels a little bit less fatiguing to know that you're just a talking head on somebody's screen and they're not looking at every pixel that your camera is picking up. It's really clever and it feels really nice.

Yeah, they say it's more for collaboration. I think that's true. It's very easy to fire one up. You fire open the app, get a link, share it with somebody, you're in the meeting. All kinds of security built into that. You can make sure that you have to approve them before popping in. Nobody is going to bomb your meetings anyway, but lots of protection there.

You're in Slack, you just type /around. It pops open a meeting. Everybody clicks into it. We'll probably use that a billion times. That's how things work. There's that pseudo-real-time thing of Slack. "Hey, can we chat this out?" Boom. /around. You're in there. It's great.

There are lots of fun UI and UX touches as a part of it that's great. The screen sharing is really nice. It's everything you expect in there. You share the whole window or select a particular window to share.

It has the control aspect built-in, too. If somebody is like, "Hey, let me take control for a minute. I'm going to type here." I do a lot of pair programming that way. It's got all those features built in.

Out of the gate, it's just a great video call app and it just seems like it has a super bright future because they just really got the details right. Thanks, Around.

[Banjo music stops]

00:40:08

Chris: Well, let's talk about Dave Rupert's talk.

Dave: Ugh.

Chris: He did a great job, I thought.

Dave: What a beefcake, huh? That guy.

Chris: [Laughter]

Dave: Yeah.

Chris: We're talking about the Web is good, remember. We're in the Web is good section of this talk. Web components are good. We probably talk about them more than we need to on ShopTalk. [Laughter]

Dave: Yeah.

Chris: But I know you live in that world.

Dave: And we've been playing with them and talking. It's kind of top of mind as I was preparing this talk for however many months, so, like, whatever.

Chris: What's the most compelling part about this, I feel like you should almost make this bigger and bolder in your talk, as general feedback--

Dave: Okay.

Chris: --is that now is the time kind of thing. I think you did go into it, but that these have been around for a long time, like, "I can't actually use that," kind of way.

Dave: Yeah. Yeah.

Chris: It's only now that it's starting to be a little bit like, "Oh, wait. Actually, maybe I can ship these for real for real in production." Before, you had that vibe about them. That's only now starting to go away, only now in, like, 2021.

Dave: Yeah. That was the most shocking thing, putting together the talk. I was doing that little timeline, like, "Oh, when was jQuery made? Oh, 2006. Oh, when was Dojo made? 2005. Wow!" I just went through all these things.

Then I was like, "Wait. When did Web components actually show up?" I think it was 2016, Safari got some pieces, although they're kind of the ones who don't implement a lot of the pieces. Then Firefox, in 2018, they kind of shipped a Shadow DOM. Then Edge didn't get it until 2020. That was last year when it switched to Chrome.

Chris: That's a big deal, right?

Dave: If you were using it before that, you were probably an early adopter, like a weirdo early adopter. But that's fine. That's fine. I support you.

Chris: Yeah, or the fallback for it just didn't matter that much. It was like a totally noncritical. Didn't GitHub use it to display the time or something?

Dave: Yeah. They do it for relative time, when you go to GitHub and it's like, "Oh, 27 seconds ago."

Chris: Yeah.

Dave: That's a time element that I think is extended via Web components to be like relative time.

Chris: Sure. Back in the days before Edge support it, then, if that thing fell back to just some text that said the time, who cares, right?

Dave: Right.

Chris: That would have been an acceptable way to ship that. Anyway--

Dave: Yeah. Yeah.

Chris: Okay, but that's boring, right? Web components that are real tabs or form elements or sliders, things that people actually use to build actual websites are more interesting and now are just becoming reality, as you showed.

Dave: Yeah. I just think now there are some cool examples out there. There are people who have kind of learned the hard way. You know there are trailblazers who have gone before you now.

Chris: Yeah.

Dave: It's less of a mystery world getting into it. There's help. There are helpers. I think that's a critical piece, too. It was kind of just Googlers before. How often do you get a Googler to help you? I don't know.

Chris: Yeah.

Dave: Yeah.

00:43:36

Chris: It took a while to shed that polymer baggage.

Dave: Yeah. No, I think that was a big piece of it, too. Kudos to Chrome for killing their darlings, or whatever, and just saying, "You know we should probably step back from trying to make everyone use this one thing."

Chris: Yeah. Yeah. People are more excited about Lit than they ever were about polymer. What's that a piece of polymer?

Dave: Yeah, so I think it was a couple of years ago. They announced, "Hey, HTML imports is never going to ship. Thank you, Mozilla, and then Safari. So, we're just going to move this over to ES Modules."

Then they kind of got this all in JS flavor. The syntax is nearly identical to React classic, the class version of React.

Chris: The class, yeah.

Dave: Yeah, so--

Chris: [Indiscernible]

Dave: Since then, React has said, "No! We are functional now. We're cooler than classes," so you're like, "Oh, okay."

I think it has that flavor, and so it felt a little more like the DX went up, if that makes sense. You could kind of be like, "This is what I'm doing. Now I am authoring JavaScript already. Oh, I don't have to write HTML files and stuff. I can actually do the JavaScript thing."

There's tooling to piece it together, slam it together or break it apart, so you know.

Chris: Yeah.

Dave: I think it helped reset what it was trying to do.

Chris: I think when I'm at my most cynical about this, I've been following it for so long that I'm like, "Impress me." Can I just peace out until you have something to show me where I'm like, "Wow, that's actually cool and useful"?

Chris: Uh-huh.

Chris: Because you're behind.

Dave: Did you not watch my talk? I made a 3D world. I made a whale that dispenses agile advice to you. Is that not impressive enough?

Chris: [Laughter]

Dave: Is that not impressive?

Chris: There are little things. There are little things that I like.

Dave: What do I have to do, Chris?

Chris: The whale being one of them. I like the ES6 import stuff. That's nice. And I like Shadow DOM because Shadow DOM is unreplicateable by any other Web technology. React cannot produce a Shadow DOM for you. You have to do it yourself. That's cool. It's just not enough. It's not enough for me to be like, "I'm going to actually rearchitect something in this."

Dave: I think that's the thing, too. In React, I think Morten is pointing out in the chat is the React plus Web component story is a little weird, right? If you're in a React and you want to use Web components, it's not that easy to just be like, "I'm just going to do a small delta; write a Web component instead of a React component." Other frameworks, I think you've got a little bit more latitude to do that.

Chris: Yeah. Fair enough. I like -- yeah. Whatever. We talk about Web components too much, even though--

Dave: Yeah. Subscribe to our podcast if you want to [laughter] talk about Web components.

00:46:39

Chris: Did we run that one? Let's run it.

Dave: What's that?

Chris: The poll.

Dave: Oh, yeah. Yeah. Well, here we go. We'll go back to the poll-a-tron 5000. I'm pulling that up. Here we go. Go ahead.

Chris: Mm-hmm. This is the four are that you've actually used them in production in anything. If you've mounted a component at all, vote on that one. You haven't used them but are now compelled to. We're not impressed.

Dave: Aren't impressed and would advocate against using them.

Chris: Or you worry it's not good technology.

Dave: Okay.

Chris: Yeah.

Dave: Everyone -- I don't want to influence the poll, but the amount I get paid--

Chris: [Laughter]

Dave: --depends on this question.

Chris: [Laughter]

Dave: I just hope everyone makes the right choice.

Chris: Hmm.

Dave: Oh, man.

Chris: While the poll is running--

Dave: Yeah.

Chris: --because this is interesting to see here, are you compelled about the design system story of it? When I think about how you really get paid, isn't that true that Paravel gets paid to do design systems regularly-ish?

Dave: Yeah. we make design systems for large companies. You know I've been on -- I am starting to propose it, and then I think it either -- like, the last two times it's been shot down, I think, but that's fine. [Laughter]

I think it's sort of like, "Hey, is this an opportunity?" I think it has a pretty good -- I think it's getting better and better.

There are some existing design systems: Lightning Web components and PatternFly Elements from RedHat. Also, all of YouTube is built on Web components. But that's all to say there are some systems out there that have paved the way, so that helps me be like, "Yeah, we could probably do it."

In my brain, when you start splitting your UI and having, like, "My button is its own stinkin' component," and then we add all these attributes and stuff, it's kind of like you're getting very fine. You're dealing with fine grains of sand. Then you have to figure out how to get those all stitched together and stuff like that.

For me, right now, I'm kind of just thinking in big elements. I wrote one for--

Chris: Really? Big dot small. That's interesting.

Dave: I don't know. Kind of like -- any time you're like, "Well, I don't want to code that again," and it's a little tricky to set up. That's a good--

Chris: Yeah.

Dave: If you ever said that, like, "Oh, you have to query selector these 15 different elements and then you have to glue it all together and split it apart and inject this, inject that," that's a great place for a Web component. Something where you're like, "Oh, that was hard. I don't want to do it again," It's great.

Chris: I like that. That's when you should feel the Web component tingle?

Dave: Yeah. I mean tabs is the perfect example that I worked on.

Chris: Yeah.

Dave: It's all this ARIA, man, and inverse states. You've got ARIA expanded or whatever and true and hidden false.

Chris: Yeah.

Dave: You can make it better, so you can ease burdens.

Chris: Yeah. I've been in ours so much. I would look at our entire components folder and be like, "I guess every single one of these is a use case."

Dave: Yeah. Yeah, any time you're just like--

Chris: All right.

Dave: --I don't want to do this again. Yeah.

Chris: Most people, by far, a huge leap for haven't used them but are compelled to. How interesting.

Dave: Oh, wonderful. Whoof. [Laughter] I can go home to the family tonight.

Chris: Keep your job.

Chris: Yeah. Yeah. [Laughter]

00:50:25

Chris: While you're sharing, let's do another one--

Dave: One more.

Chris: --that has nothing to with much, but I think this is just randomly interesting. Do you care what language your tools are written in? Let's say you use Gulp.

Dave: Yeah.

Chris: Do you care that Gulp was -- what is Gulp written in? JavaScript, probably.

Dave: JavaScript. Yeah. No. No. But do you want -- you want Rust now because Rust is so cool. Or you want GO, right? Because GO is fast, right?

Chris: Yeah, but Rust isn't written in Rust, right? Rust is written in something else.

Dave: Hmm.

Chris: C, probably.

Dave: C#, yeah.

Chris: That's what I'm asking if you care about. I think JavaScript people sometimes care when their tools are also written in JavaScript because then it's like, "Oh, I might be able to hack on that or learn it." But that's starting to go away a little bit, I think, because then all of a sudden tools like esbuild show up on the scene that have these amazing build times and are ten times faster than what came before it. But esbuild is written in GO, and some people know GO. I mean it's been around a while, but there are not nearly as many GO developers as there are JavaScript developers. Do JavaScript developers care?

Dave: Right. Well, you know, and there's also JavaScript and TypeScript. People get kind of--

Chris: Yeah.

Dave: --I don't know--persnickety about that. They have feelings. They have opinions, so I don't know. But most people here responding to the quiz say no, 61% no. All right. You don't care.

"Isn't everything JavaScript nowadays?" says Rodolpho in the chat.

Chris: Not anymore. Everybody is going GO.

Dave: Well, it's all something, but the way you use it is JavaScript, right? There's going to be a JavaScript at some point.

Chris: Yeah. Probably, yeah. Tools has a JavaScript API anyway, a little layer on top of it.

Dave: Yeah.

00:52:18

Chris: We ought to get to Web is bad, too, because there was more positivity than not. But of course, that's part of the theme of any good show here--

Dave: Yeah.

Chris: --is that you balance it out. There's plenty of stuff we're screwing up. For example, have you ever seen a talk about Web performance that isn't a little sad? [Laughter]

Dave: A little -- what is it? -- sinners in the hands of an angry God. [Laughter] Just yelling at you for a few minutes. No.

Chris: Websites get slower over time, or they stay the same. You know the SpaceJam website was recently -- they kept it around but now it's basically a landing page for a YouTube video for the new SpaceJam video. It's like ten times -- no, what was it? Thirty-two times as big but approximately the Web is about 32 times as fast as it was then, somebody found out.

Dave: Oh, really?

Chris: It's kind of like basically it scales linearly. As faster as the Web gets, that's how much crap we put on the Web.

Dave: Wow!

Chris: If the SpaceJam website was the one thing that we looked at.

Dave: Yeah. No, so the Web got faster and we're like, "I'm going to eat all those bytes. Those are mine."

Chris: Of course.

Dave: Yeah.

Chris: But that and more, is what we've found.

Dave: Yeah. Oh, boy.

Chris: That's a little bit too bad. We're going to lead up to that, though, with a little bit more demographic stuff. Weren't we going to do that?

Dave: Oh, sure. Yeah. we've got another poll here.

Chris: These are for you, everybody. Perk up. I want to hear from you, some yes or no's, some bullions.

Dave: Yeah. Lightning round here.

00:53:54

Chris: Yeah. Do you think that user experience is important?

Dave: Yeah. No, I mean it's a tough question. It's valid to ask.

Chris: [Laughter] It's a little tough. Yeah.

Dave: Especially at a UX conference. I think it's pretty hard.

Chris: [Laughter] Okay.

Dave: If your job is valuable.

Chris: I think we got the point here.

Dave: Okay.

Chris: Yeah. Well, let's stop. Let's stop. Apparently, 100% of you think that UX matters.

Dave: Okay.

Chris: That's weird, but okay.

Dave: Yeah.

Chris: What about the perf thing that we just talked about? Is that something that matters at all?

Dave: I thought performance -- is performance important? Let's see. Let's see.

Chris: Slap a YouTube on it.

Dave: It seems like it's going a little slower, but it's still hitting about 100% -- 97%. Okay. Here we go.

Chris: Yeah, these are rapid-fire, people.

Dave: Here we go. Okay.

Chris: Geez. Everybody is--

Dave: We got a no.

Chris: Well, a couple of naysayers here.

Dave: A couple naysayers. All right. Performance isn't that important. You heard it--

Chris: [Laughter]

Dave: Three percent of people think performance isn't important.

Chris: Yeah. I think we would have to cover those equally on Fox News.

Dave: Yeah. Yeah.

Chris: How about this next one?

Dave: Is accessibility?

Chris: Is accessibility--

Dave: Important?

Chris: --important? These are all bullion, all bullion.

Dave: Just yes or no.

Chris: How do you feel?

Dave: A simple yes or no.

Chris: This is all going on your permanent record, too.

Dave: Yeah. We are sending all these--

Chris: No, it's all anonymous.

Dave: This is all going to your boss [laughter] in a report.

Chris: [Laughter]

Dave: Oh, no! Three percent reporting accessibility is not important. Okay. Well, to each their own.

Chris: Just like performance. About the same vibe there. We do have one more of these, one more of these just that we want to drive home, get the -- get a feel for how you feel. This is the fourth major pillar of the Web here. How about security and privacy? You know they are a little bit of different things, but--

Dave: Yeah.

Chris: But related.

Dave: I think that kind of came up, right? You've got trackers tracking you all the way around the Web, right?

Chris: Yeah.

Dave: What do you do?

Chris: Have you heard about Flock yet? Did you read the Flock crap?

Dave: I don't have enough -- I don't--

Chris: Mental cycles to deal with that?

Dave: I just feel like I'm being gaslit a little bit and I don't have the energy to -- whatever -- cop it and be like, "What's going on here?" [Laughter] You know? I just don't -- ugh. Ugh. Okay, well--

Chris: That's what they were hoping for.

Dave: 100% of people think security and privacy is important. I guess -- okay. Well, you know, to each their own.

00:56:18

Chris: Okay. Now the fun part. I guess we kind of expected that, although that was a blowout in all four cases here.

Dave: all four cases.

Chris: All of you all think all four of those are important, right?

Dave: Yeah. Everyone does.

Chris: Now is the hard one. Now you have to put your thinking caps on.

Dave: Now....

Chris: Now it is your job to take those four things and put them in order.

Dave: What do you think? What's the most important?

Chris: I had to do this earlier and I almost fell down. I couldn't really deal with it.

Dave: [Laughter] You had, like--

Chris: But you have to deal with it.

Dave: Your heart was like, "Oh, no!"

Chris: I did. I had heart palpitations. It's impossible.

Dave: [Laughter] Yeah, so UX, accessibility, security and privacy, and performance: what's the most important? Rank them.

Chris: Oh, my gosh.

Dave: It's a rank choice voting.

Chris: Coming in hot.

Dave: Coming in hot. Accessibility just jumped up to the first place spot. Crike-a-doodles. Performance is down at the bottom.

Chris: Oh, yeah.

Dave: Security and privacy running in third. All right. Oh, man.

"Ugh. I don't want to choose," in the chat. There you go. It's good.

Chris: Ah! [Laughter] But you all said they were all important. How are you possibly ranking them?

Dave: Uh--

Chris: I'm sure everybody feels like how I felt, then.

Dave: Nope. You've got to rank them. This is reflecting on your permanent record. This goes--

Chris: Oh, UX jumped up!

Dave: Oh!

Chris: I couldn't believe it. Accessibility had the lead forever.

Dave: Oh, boy.

Chris: Now UX jumped it.

Dave: [Laughter]

Chris: Dave, you do it. You've got to do it.

Dave: Oh, I know if I touch a button, my whole computer will blow up. I don't know. I think--

Chris: Do it with your mouth. Do some mouth blogging.

Dave: Now? I'm going to come at this from -- I think accessibility is a subset of UX.

Chris: Dave, don't do that. Do one through four.

Dave: But I'm going to say accessibility number one. I kind of want to say security two, UX three, performance four. But maybe--

Chris: Oof.

Dave: I don't know. There are a lot of sites with no UX, like Craigslist or whatever, that are just fine.

Chris: Yeah. Oh, I guess. That's a fair point.

Dave: Oh, no.

Chris: But it has -- that's not entirely fair. Millions of people do the thing that they want to do on that website, so is that bad, actually?

Dave: Yeah. I don't know, man. This is a tough -- this is--

Chris: Yeah.

Dave: This is existential job crisis. I don't know. Why do I--?

Chris: I like the people that put perf at the bottom. Everybody knows performance is important, but when you rank it next to these other three, you can't possibly put it higher.

Dave: That's interesting. Yeah.

Chris: [Loud exhale]

Dave: That's--

Chris: Well, sorry for inflicting that pain upon everybody.

Dave: Yeah.

Chris: That's tough doing a bad job about any of these. And you'd say that. Is it true that the Web generally does a bad job on all four of those? I'm going to say yeah, they do.

Dave: They're hard.

Chris: The Web, as a whole, does a crap job at all four of those things.

Dave: Yeah. They're all important. I think that's what the chat is saying. They're all important. That's true but, in the next sprint, you've got four different tickets. Which one is the most important? You have to choose on a given week, or whatever. It's hard to do that.

Chris: Yeah.

Dave: I don't know.

00:59:34

Chris: What else is bad about the Web? We threw a big stone there. We didn't actually mention specifically about anything. That was kind of Scott's whole thing, wasn't it? Frameworks might be bad. [Laughter]

Dave: Yeah. I liked Scott's talk. I like that it was sort of -- I probably align with Scott. I have preexisting biases, but I thought it wasn't like framework hate. #frameworkhate

It was more like, "Hey, here's something you haven't thought of." When you do this, actually, now you're responsible for all this code that generates more code that generates more performance problems. Then you server-side render. Then it comes back. You served something nothing.

Chris: More and more frameworks have SSR built-in. That's server-side rendering.

Dave: Yeah. Yeah, yeah.

Chris: I've been seeing even more momentum that way, which is a good, positive thing, right? But let's say you coded a button as a div, or you made a toggle component but the toggle is just some spans and stuff. You didn't actually use radio buttons or a checkbox or something. Who cares if it's SSR then? It's still busted when it's SSR. It's still got to hydrate in order to matter at all, which is kind of a good point he had there.

If the framework encourages that in some way, and I don't know if they do. I sometimes think that's not entirely fair. React doesn't say, "Build your toggle components with spans." It doesn't say that. It doesn't encourage that.

Dave: Yeah.

Chris: There's no documentation that points to that. There's nothing. You can't blame React for that.

Dave: There's also some good -- there are good people in the React community who are really working on accessibility and stuff like that. I just want to blanket statement that.

Chris: Sure, but the concept of hydration and stuff, there is some kind of fair criticism to be leveraged at it. I don't know about hydration. I don't think it's--

I watched this whole talk from Fred. Remember we had Fred on the show?

Dave: Mm-hmm.

Chris: He's the Snowpack guy.

Dave: Mm-hmm. Mm-hmm.

Chris: He's got this new framework called Astro that's going to be highly SSR driven.

Dave: Yeah!

Chris: It looks cool, but it's still--

Dave: HTML forward.

Chris: It's foundationally about hydration.

Dave: Yeah.

Chris: It's going to be shipping HTML that doesn't work until it's hydrated.

Dave: Well, he had this cool thing--

Chris: Even the newest, fanciest stuff--

Dave: He had a cool thing where you could write HTML. You just write all your HTML and then you can idle, wait until this is idle, wait until this is visible on the page. I thought it was kind of cool, the controls. Anyway, that's something people can't really look at now, so anyway. [Laughter]

Chris: Yeah. Sorry. I'm just talking. I just feel like hydration is going to stick around.

01:02:19

Dave: Yeah. I also saw this interesting talk. Like I was sharing with you earlier, somebody did some research on CSS and JS - a controversial topic, I'm sure. They ran it like their style components versus Linaria. I think I'm pronouncing that wrong. Which is like basically runtime generation and build time generation. You run it on the client or you run it on the build server.

They found out that even if you send more CSS -- Linaria will generate a CSS file. Even if you send more CSS that way, you shave off about a second in load time. Basically, main thread time. Just by doing regular old CSS, basically.

Chris: Yeah.

Dave: Anyway, kind of cool. You can still author in your CSS and JS way. You just get server-side benefits. Anyway, I thought that was very interesting. I don't know. Interesting to think about, especially in the....

Chris: It is because it's very easy to throw stones at CSS and JS. Some people just love it because they just are JavaScript people. The more stuff they can write in JavaScript, they like.

Dave: Yeah.

Chris: Then it's easier to throw stones back and be like, "Yeah, but that's beefing up a size and not leveraging the Web for what it was made to do." That's going to be a holy war forever.

Now, we're in the next generation of that like, "Wait. What if you could author like this but have it shipped CSS? Look. Here are some tangible benefits to doing so." Very interesting.

Dave: Yeah.

Chris: Anyway, we're running out of time here. We should--

Dave: We've got to go. We've got to wrap it up. Hey, thank you, An Event Apart, for having us. This is really awesome. Thanks, everyone, all the chat for all your questions, and all your answers. We really appreciate that. Thanks, everybody. G'night. Bye.

Chris: See ya'.