Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, a podcast all about front-end Web design and development. I'm Dave Rupert and with me is Chris Coyier. Hey, Chris. How are you?

Chris Coyier: Hey. Good. I see you’ve got a poster behind you there. Every day, just moving in a little further.

Dave: A little bit. A little bit. The big thing, the big upgrade--I'm going to pan you over--is the bookcase.

Chris: Holy, what?! That looks great, Dave. It does.

Dave: Oh, we are -- this is sort of a--

Chris: You're going to have to move your desk so that's your background. It's way more interesting.

Dave: Yeah. Unfortunately, I am. I have to move my 300-pound Uplift desk. It's fine.

Chris: Yeah.

Dave: That'll be my background. You move into somewhere, right?

Chris: Yeah.

Dave: You move and then you have boxes of crap on the floor. I was low-key feeling the stress of all this crap on my floor, boxes of books I've had since high school, and then little boxes of electronics and crap. I've got CDs on the floor behind me. What am I doing with CDs? But I've got CDs behind me.

Chris: [Laughter]

Dave: But I got this bookcase from IKEA. It's the IVAR System. Love IVAR because it's got three qualities. It's cheap. It's like $200 for this whole--

Chris: Yeah.

Dave: --whatever 6-foot by 8-foot bookcase, or something.

Chris: Love that.

Dave: Cheap. Number two, it is modular, so I can add pieces to it. I can remove pieces to it.

Chris: Yeah.

Dave: Pretty simple.

Chris: Mm-hmm.

Dave: That's cool to me because you buy a bookcase and then it's like, "Oops. I put too many books. I have too many books."

Chris: Right.

Dave: I can't....

Chris: Says the guy who likes Web components and is working on a talk about Web components. He better like modular systems.

Dave: Yeah, you better like modular systems. But then even just assembly. Have you ever put together--?

Chris: I put together shelves just like yours two weeks ago, so I'm there.

Dave: Yeah. These are just the vertical rungs (or whatever) the little ladders in between the shelves.

Chris: Mm-hmm.

Dave: Then I just pop in these metal pegs (like dowels) and then slam the shelf down.

Chris: Oh, is it screwdriver-free?

Dave: Screwdriver-free 2003. It was amazing.

Chris: [Laughter]

Dave: I am just like full-on -- I love this bookcase, but it was sold out and I was all sad and surfing Wayfair for whatever crud I could find. Ugh! But then it showed back up at my IKEA and I'm thrilled.

Chris: Yeah.

Dave: And I got it.

Chris: Good. It looks great.

Dave: Now my stuff isn't on my floor.

Chris: Yeah.

Dave: And now I feel less like a crum-bum.

00:03:03

Chris: Yeah. Once you get your YouTube channel started, you point it at that and then you've got to be really specific about what's on the shelves.

Dave: Oh, yeah. Yeah. You need a Chinese symbol that inspires you.

Chris: Right.

Dave: You need different sort of things.

Chris: Right. Right. It's just like you can't screw it up, Dave, because if you accidentally put an Ayn Rand book there or something, people might be like, "Ooh, what's this?"

Dave: Boom!

Chris: They're going to read into it.

Dave: Yeah.

Chris: It can't be like, "Oh, I got it at a garage sale and I was just interesting." Not good enough, dude. Illuminati. That's not what's happening.

Dave: Okay, well, I'm going to just see what incriminating stuff--

You know I have Catcher in the Rye, like one of the original cover ones. Can't do that one. That's for serial killers.

Chris: Is it?

Dave: Yeah, but it's not. I still like it.

Chris: I hate to tell you I remember reading and enjoying that book but feeling, at the same time, this is a little dickhead twerp. Isn't that enough to know? It's not like I want to be like that kid.

Dave: Yeah, I don't know. It's just sort of a kid who is mad at everything, and that's a fun book to read when you're a kid that's mad at everything. I don't know. Is that the point? I don't know.

Chris: I think that's the basic read, but what if you were reading it and being like, "I understand this character's perspective, but I don't see him in myself." Even if I see little aspects of him in myself, it's not like he's a superhero and I want to be like him.

Dave: Yeah.

Chris: Anyway. Whatever.

Dave: I don't know. I don't know.

00:04:39

Chris: That's what books are. They're supposed to open your mind to stuff. But if there is actual -- I'm probably foot-mouthing here. If there is actual big problems with that book, let me know. I put on the Jungle Book on Disney+ the other day and, when you do that, there's a big opening screen that's like, "There are some cultural missteps in this movie that were not okay then and they're not okay now. Rather than pull this movie from Disney+, we're going to allow it here but you should just know that going into it."

That's not the exact words, but that's where we're at in society. I read it and I wish there was a little more just to educate me because it seemed like an opportunity for education. I know that individual people don't have to educate me, Chris, white male, about that. I should educate myself. But in the beginning of a movie from a huge corporation like that who is going to tell me that this movie is bad (before watching it) that's an opportunity to teach me why it's bad. I honestly kind of don't know.

Dave: Yeah.

Chris: Which again is a little foot-mouthy.

Dave: Well, I'm sure it's racism in that particular movie, but the same with those controversial Dr. Suess books that basically Dr. Suess quit publishing because it was like, "No one is buying these racist books we have." Then they're like, "We're just going to actually take them out of circulation," and then it caused an uproar.

Chris: Hmm.

00:06:04

Dave: Anyway. Yeah, I don't know. Your bookshelf is weird, right? It's like a trophy--

Chris: Yeah!

Dave: It's trophies from your life.

Chris: A trophy case for nerds. Yeah.

Dave: Well, sort of. Yeah. It's like, I read that book. Yes.

Chris: Yeah. And as soon you write one, that one, you can't put that one spine out. You've got to put it cover out. People....

Dave: Oh, yeah. Full cover. Oh, yeah. Okay.

Chris: I don't even think that's optional. You've got to go cover out.

Dave: Oh, man. It might be a while before I get one.

[Laughter]

Dave: Anyway, but no. Yeah, it's like trophies, but then you're going through your life, through the bookcase, and it's always a little weird, right? I have little sections, like a Japan section and stuff like that. I don't know. Just hobbies. It's like, ooh, yeah.

Chris: I expect some Japanese stuff from you.

Dave: Yeah.

Chris: I'll send you a list of my Dave's bookshelf expectations. Your coworkers, I can't imagine the pressure you're under here. These are very design-focused individuals, so you can't let them down either.

Dave: Trent will buy books just for how they look on eBay, like old good-looking books. His behind-the-bookcase, behind the Zoom bookcase, is really on point. He has a bust of Larry David. It's really great. [Laughter] Like a porcelain bust of Larry David.

Chris: I would assume that behind Trent is, like, a decommissioned barbeque restaurant sign, like the neon from it.

Dave: Oh, possibly. Yeah.

Chris: Like had trucked in from when that restaurant closed.

Dave: Yeah.

Chris: Yeah.

Dave: Yeah, if it's not there, I'm surprised.

Chris: Yeah.

Dave: Yeah, and then Regan has all these -- he has a den, like a proper 1970s den that he works in, like wood panels.

Chris: [Laughter]

Dave: Built-in cupboards.

Chris: Yeah. You just can't see the shag carpet, but it's there.

Dave: It should be there, yeah.

Chris: [Laughter]

Dave: He reads a lot and he reads a lot of like Pulp Fiction novels, like mystery novels and stuff like that. His whole bookcase is floor to ceiling, wall-to-wall, and it's just full behind him. It's just so cool. I'm like, "I bought $200 worth of IKEA. Look, it's got a book." It's got four A Book Aparts. [Laughter] Four of, like, 23 - or whatever. I don't know.

Chris: Mm-hmm. Mm-hmm. Books are a roller coaster in my life. I like that I own these. I am a book-having person. Even though I know my actual reading habits are like three books a year and one of them was a comic book. You know?

Dave: Yeah. Well, that counts. I've got a lot of comic books. I've got a couple shelves of those.

Chris: Then I get rid of them because I'm moving and blah-blah.

Dave: Nah, nah. It's a stuffed shelf.

Chris: Well, thanks for showing me your shelf. I love it. I'm in the same boat getting my -- I'm still, after all these years, getting the Zoom setup just perfect. You know? You get the beautiful camera. You get the right tripod. You get the lighting right. You get the angle right. You build an entire shed. [Laughter]

Dave: Yeah. Oh, yeah.

Chris: Once you're there, then you've got to frame it. Get out your director self. Make those index thumbs thing going on.

Dave: The shots, yeah.

Chris: Get the shot right.

Dave: You have to -- you might as well. I guess you don't have to, but you might as well.

Chris: Oh, yeah.

Dave: What else are we doing here in the pandemic?

Chris: Just digging into the hobby. Why not?

00:09:37

Dave: Over in the [techno voice] Discord, Melanie -- we were talking cameras, I think, in the gear channel. Melanie was like, "Did you know they make cameras for vloggers?" or something. You don't have to buy the $3,000 DSLR. There is like a $700 version that's pretty good and you can use as a webcam and stuff like that. I've been thinking about one of those.

Chris: That seems like a great entrepreneurial idea because of course, you don't have to buy the $3,000 one. Anything that has clean HDMI output you can use. But then your computer almost certainly -- I mean I shouldn't say that. I'm sure lots of Windows PCs do. But anybody on a Mac has no HDMI input.

Dave: Right. Right.

Chris: You have to buy a thing. But if the camera was special made, it would come with a cord that has probably a USBC thing because that's what computers are now, right?

Dave: Yeah, and then ... piece--

Chris: That'll save you $200 off the bat.

Dave: No, for real. You don't have the cam link. I think some of these, too, they're optimizing for a focal length of--whatever--six feet, or three feet, or something like that.

Chris: Yeah. It should give you some options, too. Mine is a little too tight, and so I was messing around with it because I have the DSLR. I buy a 24-mm prime to see, and I think that was not quite right. Then I got one that was like a 40, I think.

Dave: Mm-hmm.

Chris: Then that was more right, but it was just a little pancake prime lens, one of those lenses that's one inch thick.

Dave: Yeah. Love them.

Chris: Rather than I have a beefy Tamron like 24 to 70 or something like that. That's zoom. It has some zoom capabilities. It's clearly so much of a better lens that I prefer using it over the pancake anyway because it just looks better. Anyway, it's a long story short. It's hard to that.

A camera better have some options as to what angle, you know, how zoomed in it is on yourself. Because every desk is going to be a little different. Every room is going to be a little different. It should look great and having some options.

Dave: No, I don't know enough about all this, but you can watch videos where they change just the millimeters or the focal length or whatever.

Chris: I don't know what you call it. Yeah, focal length, I guess.

Dave: Whatever.

Chris: Zoom.

Dave: They change the zoom, but the subject stays in the same place and they just move, or whatever.

Chris: Oh...

Dave: But it's weird how your face can flatten out.

Chris: Yeah.

Dave: If it's more of a wide-angle lens. Not to -- it's a hack or whatever, but you know. If you're a heavyset individual like myself, I don't want the fat boy lens. You know?

Chris: [Laughter]

Dave: I want to make sure I don't get that.

Chris: Yeah. That's a good point.

Dave: I've got enough. I want to learn how to get the optics working in my favor.

Chris: Right. Because you have a nice bookshelf, you might consider not really tight on your face.

Dave: Right.

Chris: I think that's a little awkward anyway in a Zoom call where they're backed up and you can see their head in 25% of the screen and your head is 80% of the screen. It's just weird. It has a weird dynamic to that.

Dave: Yeah. But then you get to Philips hue lights that bloom, blast the ambient bisexual colors on the wall. It's just going to be great.

Chris: Oh, yeah. What is it, pink and blue? I forget.

Dave: Yeah.

Chris: Yeah? Oh, did I nail it.

Dave: Get it looking real good. Oh, yeah.

Chris: I gotta choose. I'm going to go purple today.

Dave: I love it. Purple.

Chris: Bisexual premixed.

Dave: It's perfect.

00:13:26

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you by Flatfile.io. They say one of the worst ways to spend your time is manually formatting spreadsheets, which I can't agree with more. I feel more productive watching Netflix than manually formatting spreadsheets, I think.

Thankfully, Flatfile has created Portal, the elegant import button. Flatfile Portal is a turnkey data importer that automatically formats, validates, and transforms customer spreadsheets so that the data is ready to use in your backend. Portal integrates with virtually any application and, in minutes, can upgrade your customer data onboarding from emailing Excel files back and forth to importing even the messiest data correctly on the first try. Start for free at Flatfile.io.

I will just add that I think this is a very good idea if you're like, "I'm going to do a startup, and it's going to help you with your wedding somehow," or something. Everybody is like, "Oh, I'm going to get all my people for my wedding in an Excel spreadsheet and get it all ready to go." Everybody does that when they're getting married. I had like five spreadsheets when I was getting married.

Let's say you're going to do a startup and you're going to help those people with something. Don't build a CSV importer from scratch for your app. That's not time well spent. Time well spent for you is finding people who are getting married to be your customers and marketing towards them and building the UI and UX around this good wedding app that you're going to build. Not being like, "Oh, my god. What am I going to do if people put two commas in their CSV?" or some crap. Outsource that.

Use Flatfile.io. Make sure that the import experience is great for that app and forget about it. That's definitely the way to go.

This is a buy, not build, easy, in my book.

[Banjo music stops]

00:15:34

Chris: Okay. We'll talk technology now.

Dave: All right. We can move in. Here we go.

Chris: Thirteen minutes. We'll put a time stamp that says tech talk.

I had this random thought -- this will be two minutes -- that there are people that pick headless WordPress. You know what I'm talking about, right? I'm going to spin up a WordPress site, but I'm not actually going to use WordPress.

Dave: Those people. [Scoffs]

Chris: I'm just going to extract the data out of it and then build the front-end however I want to.

Dave: Mm-hmm.

Chris: I'd be tempted to do that, honestly, sometimes, because I'm kind of in love with the block editor. I think it's a nice way to author pages of any kind.

Dave: Mm-hmm.

Chris: Maybe even a whole site, although I'm not there yet. That maybe pick a complicated technology stack to make headless WordPress happen just because they like the block editor but have bought into way more technology than maybe they were hoping for, just to use it. Is there a world in which you yank the block editor out, which is a separate open-source project, and just use that but don't actually use the whole WordPress install? Just use it and have it poop out HTML files or whatever.

Dave: Oh, you think straight to HTML? Hmm.

Chris: Maybe, or Markdown, but it can't really be Markdown because so many of the blocks have custom HTML that make them do what they do.

Dave: Kind of extend.

Chris: You kind of want the HTML or you're going to get it whether you want it or not, so who cares if it's Markdown or not. It might as well just be HTML.

Dave: Yeah, I think it would be really cool. I just don't know. I assume they still exist, but the Mac apps that hook up to your blog, do you remember those?

Chris: Yeah, sure.

Dave: It's like you're writing a native app, almost like a Notes app, and it just publishes to your blog.

Chris: Yeah and I think WordPress had XML RPC or something that it could talk to, or others.

Dave: Yeah.

Chris: But now there's just an API, so I would use that, probably.

Dave: Just use that, yeah.

Chris: Yeah. Yeah, that's what I'm thinking of. I want to build an 11ty site but use Gutenberg. Yeah, but then they've got a chance to reinvent the UX of authoring a blog post and have it just barf up to WordPress. The problem is whoever is in charge of doing the blog post authoring has to make choices about what the HTML output is. You have to trust that thing and be like, "Well, I'm using the Rabbit editor, so it makes all of its HTML classes prefixed with rabbit- because it's a proprietary authoring system."

Dave: I guess this is my ignorance, maybe, about how Gutenberg works. Does it just chuck a shortcode in there for when you do a block or something like that?

Chris: No, it's cool. It's different than that. But anyway--

Dave: What's the data model?

Chris: The data model is -- get this, Dave -- HTML comments.

Dave: Oh, really?!

Chris: There's an HTML comment at the top of the block that has what kind of block it is and then the data for that block, like stuff about what settings it has and crap.

Dave: Okay. Okay.

Chris: At the bottom of the block, there's another HTML comment that says that. Now, that's totally ignorable by a build system. You just be like, "I don't know. Just strip those out," or whatever. You don't need those. They're useless to you now. But then inside those HTML comments, there's HTML, like div WP columns and whatever. It has, this is the setup for the columns. They had to make choices about what those class names are going to be.

I trust those class names because they come from the mothership. I can design around them and know that they're going to probably be there in eight years. But it is kind of a trust system.

Dave: Your Gutenberg 11ty thing is, you could save out a file. That's almost on Web tech, right? Being able to write to the file system, right?

Chris: Pretty close, yeah.

Dave: Save out of Markdown. It has a little comments and data model. Then you have to teach 11ty to just basically chew the data, right?

Chris: I don't know. At that point, it doesn't matter because that data that's in those HTML comments is also in the HTML. It's just when you open it back up in the editor, it needs something other than HTML, some consistent thing that it can read to make it look like it needs to look back in the editor itself.

Dave: Okay. Okay. Yeah. All right.

Chris: The HTML comments, at the time that it writes to the HTML, maybe you could even teach Gutenberg, like, "Don't even bother outputting those comments." Well, no. You'd kind of need them to reopen the file in the editor again.

I don't know. I just think it's a thing. I think headless WordPress is cool, but I think there is a whole middle market where you don't really actually need WordPress. You just want the editor.

Dave: No, I agree.

Chris: I don't think I'm crapping on WordPress by saying that. I got the idea kind of from listening to an interview with Mullenweg who said, "It's in Drupal now." There's a plugin, and we like that. I almost hope all CMSs use this because this is a good editor experience. We're not hoarding Gutenberg.

I keep saying Gutenberg. I don't think they call it that anymore. That was just kind of like the code name for it for a long time, so I use that word. Really, they just call it the block editor. Anyway--

Dave: Block editor.

Chris: It went longer than two minutes. Sorry.

00:20:58

Dave: No. Well, we use Netlify CMS for a client and Netlify CMS is great, but you kind of have to program it. You have to give it the data model for the whole page. One thing that's nice about -- it's the blessing and the curse, I guess, of the Gutenberg editor is it's like, "Oh, we just have pages." Then you just add these little blocks in there. Whereas Netlify CMS is way more on the schema out your YAML front matter kind of vibes, right?

Chris: Yeah. I wouldn't take that away either. I think there's a world in which you could use Netlify CMS, but then when you -- there's a type of field in Netlify CMS that's just like, "Text area. Rich text stuff."

Dave: Right.

Chris: Have that be Gutenberg. Have that be the block editor. But all the rest, because I use the heck out of the block editor, but I also use a ton of custom fields. I literally have over a hundred different custom fields on CSS-Tricks. That's just crap like the running time of this screencast.

Dave: Mm-hmm.

Chris: Or the direct URL for this link post, or the bite-size of this audio. There is just a lot of them. I just invent them whenever the hell I want to because I think good CMS should support that. I can add an arbitrary key-value pair to anything I want, and I just use that. I don't want to make a mess, but I leverage the hell out of it.

Dave: Yeah.

Chris: To me, that's Netlify CMS. It's key-value pairs for a piece of content.

Dave: All the way down.

Chris: All the way down. But then, often in a CMS, there is just chunk. Okay, I got the metadata. Now, where is the [barf] of stuff? That could be Gutenberg because then you get columns. You get nice Twitter embeds. There's just all this nicety that comes along.

00:23:01

Dave: You know what would make this a little bit easier, Chris? I don't want to tell Mr. Mullenweg how to do his job, although, @photomatt, if you are listening, you can pay me to tell you how to do your job.

Chris: [Laughter]

Dave: Web components, Chris. They work on everything. They work on any website.

Chris: You know what? That's a great idea, Dave. Gutenberg could barf out Web components and that would be pretty rad.

Dave: Just WP gallery, or whatever, Web components, wp-gallery. Then you have to NPM install WP gallery on your 11ty site.

Chris: Yeah. That'd be a hell of a win for Web components if WordPress picked those as the little blocks.

Dave: Yeah.

Chris: We were talking about Josh's big release of that course and his blog and how successful all that is and stuff.

Dave: Oh, yeah. Yeah, yeah.

Chris: I maybe mentioned this in a previous show, but I was kind of like, I think some of Josh's blogging success and why I'm so jealous about his blog is that he writes in that literate Markdown or whatever.

Dave: MDX or whatever.

Chris: Yeah, MDX.

Dave: Yeah.

Chris: Because then you can just arbitrarily put in anything. Web components open that same kind of door.

Dave: Mm-hmm.

Chris: I want to just dunk a Web component in the middle of some content but that Web component needs to have a special DOM and special JavaScript stuff happening. I want to have cool control over it. But you don't see that very much today, especially in a CMS environment, because of leaks.

Dave: Mm-hmm.

Chris: What? I've got to namespace every piece of everything in this?

Dave: Yeah.

Chris: What's going to leak in and what's going to leak out? With a Web component, you wouldn't have to. It's just a beautiful little boop right in the middle there.

00:24:42

Dave: A little piece of encapsulation. Yeah. No, I'm doing this talk. It's for An Event Apart, so the Spring Summit. It should be pretty cool. We're going to be there, so we should plug that.

Chris: AEA Spring Summit! Dave is doing a real talk. Then I'm just going to show up. [Laughter] No, I'm kidding.

Dave: Yeah, we're going to do our thing.

Chris: We're going to do a great show. We're going to wrap up.

Dave: We're going to vote on the best talk. [Laughter] That's our MO. We run everyone through a bracket and we vote on the best talk.

No, so anyway, I kind of went deep, right? We've talked about it in on the show before. Silent Web components is a little bit of a fuss, right? And I went through it, man. I made a little custom alert Web component and I tried to style it every which way I could. It's really interesting about the rules. You can style Light DOM. If you have put a P-tag in your alert, you can style that.

Styling Light DOM is okay. You cannot deep style, like if there's a button in the custom element. You can't deep style that button. That's really only the element, the biggest limitation.

There are these things called inheritable styles in CSS. If you think of, like, styles that pass to an iframe, those will pass through. That's color, fonts, text-transform, and stuff like that.

Chris: Right.

Dave: Those will pass through.

Chris: They will, but not every element is cascadable, as you know.

Dave: Right, and custom properties will cascade through, too. Anyway, it's really interesting. I think, through doing this talk, I learned, like, "Oh, they're actually maybe not quite as limiting as I thought. Although, it would still be cool if I could deep style through the Shadow DOM.

Chris: Yeah. It really kind of forces you to learn CSS in a deeper way, doesn't it? Like how this stuff works. I used to be like, "Oh, my god. Custom properties, they have this amazing ability to kind of penetrate the Shadow DOM." I think that's an okay way to think about it, but I don't think anybody wrote any custom code necessarily to do that just for custom properties.

Dave: Right.

Chris: It's just the nature of how CSS kind of works in this context. They just go down because so does everything else. So does color.

Dave: Yeah. Yeah.

Chris: So does font family. You know? It just goes right in there. But the thing is, let's say you add a P-tag.

Dave: Mm-hmm.

Chris: And then a Web component and a P-tag inside the Shadow DOM of the Web component that wasn't slotted.

Dave: Mm-hmm.

Chris: Then on the outside you said, "P color red." Only the outside one is going to be because it can't -- like if you said, "Body color red," they'd both be red because the color will come in.

Dave: Right.

Chris: But if you said P color red, only the top one is going to be red because it can't select the P-tag inside that Shadow DOM.

Dave: Yes.

Chris: That is mind-numbingly weird to me.

Dave: Yeah. Anything the component generates, you can't -- you don't have access to unless you expose it by part or something like that. You know it's telling that, like, people like you are like, "Ooh, that's weird." We put some Web components out there and my coworker Trent was like, "Oh, hey. How do I do these tabs?" It's like, "Oh, well, that's parts," or whatever.

It's telling that people who do CSS and stuff like that still have a little bit of just a hiccup.

Chris: Yeah. Right.

Dave: This is not what I'm hoping for, but it comes down to that whole--

Chris: Do you think it might be just some muscle memory of being around so long that if you were coming in fresh, you wouldn't be confused at all? But because we've been around so long, we're like, "How does this work?"

Dave: Yeah, it's almost entitlement.

Chris: Uh... True.

Dave: Like, I write CSS. It's global. I will style whatever I want to on the page, damnit. I'm just going to type star transform SKU, or whatever. [Laughter] I'm just going to mess it up.

You expect that you have all-consuming power from just a CSS file and that's true and you maybe should, but the Web components break that model. They're like, "Hey, no, no, no, no, no. Only certain properties and custom properties can come through here. Everything else is a no."

Chris: Yeah.

Dave: We made this. We're trying to make this. Don't mess it up.

Chris: Pretty soon Dave will give his AEA talk on Web components and we will have it all shaken out of our system. Okay.

Dave: Yeah. No, I know. I could quit talking about them after that, but it's been fun.

Chris: [Laughter]

Dave: You know, too, with An Event Apart. This is maybe just -- the bar is kind of high. I don't know if you've felt that.

Chris: Oh, yeah.

Dave: Just for An Event Apart talk. You're like, "Man, I really got to, like--" I can't just be like, "Web components are cool. Check out this one about a podcast player I made." [Laughter] I can't. I have to be kind of thorough.

Chris: No, you're going to have to ask Trent to borrow one of his books or something and make some metaphor about the trucking industry from the 1960s or something because that's kind of required.

Dave: You've got to have a big, deep metaphor. I overcommitted. My talk is called HTML with Superpowers, and then I was like, "Wait a minute. I have to roll superheroes or something in here." But anyway, I figured it out.

Chris: Good. Good.

Dave: But it was--

Chris: Stressful for a moment there, right?

Dave: It was like, "Oh, buddy." [Laughter] I have to plan a talk. It has to be in-depth, kind of thorough, and introductory at the same time. But then it also has to be styled. [Laughter]

Chris: At our age, aren't you like -- I'm only going to do this a couple a time ever in my life.

Dave: Mm-hmm. Yep.

Chris: You're kind of defining the Dave Rupert legacy when you do stuff like this.

Dave: You know I will say I think, until last year, I gave a talk on Backlogs, log jams.

Chris: Yeah.

Dave: That was the first talk I was like, "Hey, I did it. I did a talk. I wasn't flying by the seat of my pants."

Chris: Yeah. Yeah.

Dave: I did the talk and then even the design of the talk kind of was coherent, and I have these things called loopbacks, I call them. It's a video game term where you end up in the same place you were before. But you have spatial recognition.

Chris: Uh-huh.

Dave: Anyway, I put those in my talks, you know, where you end up at an idea again, or whatever, or you reuse an element. Now, in this new context, it means something a little different. Anyway.

Chris: Well, I'm excited to watch it. I wrote in my little post about it that I'm going to be virtual front row for that, Dave.

Dave: Virtual front row.

00:31:57

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Linode. Linode is great. They've been around forever; one of the first companies in cloud computing, three years before even AWS was a thing. They are their own beast, in a way.

I think this is a pertinent way to describe it. If it runs on Linux, it runs on Linode. You can do anything. These are cloud computers that you buy to do anything you want.

For example, let's say you're a gamer. They have all kinds of one-click apps that are gaming-related. You want to deploy your own Minecraft server or Counterstrike or whatever? You just click a button and spin it up on your Linode server. That's kind of cool. It's probably mostly for Web stuff.

It's also notable that Linode is a step past entry-level hosting, I'd say. If you want to be super in control of everything, actually own every detail of your hosting, Linode is a step up to totally customizable cloud computing. It's VPN friendly, all that stuff. Obviously, they have great human beings that are going to support you in what you're trying to do. They've got GPU hosting if what you're trying to do is machine learning-based - that kind of thing.

Again, if cloud computing is what you need, if it runs on Linux, it runs on Linode. Go to the link in the show notes. They have a special page just for ShopTalk Show listeners where you get $100 of free credit, which is pretty generous of them, I think. Try that out. Thanks for the support.

[Banjo music stops]

00:33:45

Chris: Now that we're on it, I'm going to hijack this one more time before we get a question because it's about Web components.

Dave: Hit me.

Chris: I don't know if you are hip on this, but it's some brand new stuff. I only know about it because there is a post on CSS-Tricks about Element Internals. Do you know that?

Dave: Yes.

Chris: That's interesting. Let's say you have a Web component. Inside that Web component is an input or text area or radio button or something. Outside of that, back in the regular DOM, there's a form element. It's like you made a Web component out of HTML form elements. You kind of expect they're going to render. They're going to look like form elements, but they won't hang out with the form. They form will not know that they're there. They will not participate normally in the context of a form.

Dave: Yeah.

Chris: This Element Internal stuff is a way to get them to do that. Now, you can use form elements to compose forms, which I do think is kind of a big deal. Right?

Dave: Yeah. That's actually -- there's a little bit of accessibility, like focus management.

Chris: Yeah.

Dave: You cook a label and it should go to the input, right? Focus should go to the input if it's properly set up.

Chris: Yeah.

Dave: But if that input is inside the Shadow DOM, it doesn't go there because it doesn't have the ID ref. There are some problems, but that's very similar to the problem where, if you had Web components inside your form and you submit your form, you expect all that post data to show up. It's not in the post data.

Now there's a thing called Form Data, which you can hook into, but then the attach internals stuff. That also gets you validation, like required attributes and stuff like that. You can hook into the whole -- I think they call it -- the form lifecycle, like pre-submit or validate submit - stuff like that.

Chris: It's nice because when I'm working in React or whatever and building componentry, some of the components I almost always have are form related.

Dave: Yeah.

Chris: We do forms in this kind of way and I can just make a capital I input form that has some stuff that I like. For example, the one I'm working with right now has a full-width prop. You just send it in and then it does what it needs to do to be full width, which is not just width 100% but, in our case, it has some bottom margin too because now it's full width, so it's behaving like a block, so it pushes away stuff below it, for example.

Dave: Oh, smart. Okay, smart.

Chris: But that's an input. I can do that in React because what it ends up in the DOM in just flat HTML. There are no Web components in the way there. Now, it's nice to know that I can use Web components and not worry about, like, "Oh, my forms don't work now. Whoops."

Dave: Yeah. I think that was kind of a gotcha. I think there are still maybe a few hiccups there, but I think it's all getting better. One thing I did notice as I was putting together a talk, I was doing a timeline. Web components were proposed in 2011, but it wasn't 2013-14 until it showed up in Chrome (any kind of version of it). Then Safari didn't get Web components until 2016 (a very non-committal version of it). Then Firefox was 2018. Edge didn't get it until 2020 when it switched to Chrome. If you were using Web components before now, you were kind of in the risky territory because not every browser had it.

Chris: Right.

Dave: I think, even now, reevaluating--

Chris: We just passed the not risky line.

Dave: Yeah. I think JavaScript in 2020 or 2021 here, like, oh, legit. They actually are in browsers now and the stuff like attach internals and stuff is pretty well propagated and stuff like that. So, it's -- I don't know.

Chris: That's a good point you should make in the talk, if you haven't already.

Dave: Yeah.

Chris: That's a strong point that this is very different. If you had some opinions about Web components, they probably should be reevaluated at this point.

Dave: Yeah, and I think I talk about it, too, but you're not wrong if you don't use them or you didn't use them. That's not the case I'm trying to make. They've had their share of problems and standards move slower than -- whatever -- React frameworks, or whatever. [Laughter] you have to kind of accept the fact that, hey, this will not be the new shiny all the time, but there is some longevity there, so anyway.

00:38:35

Chris: Yeah. Okay. Love that. I think we have time, probably, for one random topic and one random question. Let me do a question from Jay Jenns here. I like this.

Jenns says, "As I am the most experienced developer at my work, I get to choose almost all the tech. For example, all the tech in a website rebuild project we're working on right now. We've got two junior developers with me on a team, which puts me in the senior role. I'm responsible for all the architectural decisions and the process making and that stuff, as well as then almost like the big job is dealing with those two junior developers, like you're responsible for their personal progress at the company."

Jenns says, "I'm essentially a developer. I'm comfortable with my technical skill set, but the things that go in that soft skills bucket like managing the developers' progress and learning and dealing with code reviews from them and all that - not." I don't know. Is code review a soft skill? Maybe. Anyway--

Dave: Maybe.

Chris: A little half and half there. "It can be frustrating spending a lot of my time doing non-programming things instead of just programming, myself just doing it. I have this feeling --rational or not, right or wrong or not -- that it would be more effective to just code it all myself. My job might be easier to not have two junior developers, essentially." [Laughter]

Dave: Well. Well.

Chris: The question is, "Have you ever been in a similar situation, like going from a code monkey programmer?" I think that's a term that just means, like, "Get code. Do code. Do nothing else. Dr. Pepper." [Laughter] More of, like, what's that transition like to go from that to being more of a leader role with leader responsibilities. Do you have any tips on how to handle it? He's asking for books or should I ask the company to hire a project manager? What should I do here?

Dave: Wow. Yeah, I mean I'm in a similar boat. We've hired some people, kind of contractors, but kind of long-term contractors. I'm not just managing myself. I'm managing other things. They're not exactly junior, so I wouldn't say that, but you know. We have more people under the engineering umbrella now at Paravel.

Chris: Yeah.

Dave: It's hard. It's hard to be like, "Okay. I have to manage, make sure all the code is good, and then also write a bunch of code myself." That's hard to handle.

I sort of think they are maybe two jobs. I don't know. [Laughter] It's hard to maintain, but I'd be curious how it works at CodePen there, too.

I think you may not be a manager, and that's fine too. Maybe you need to tell your boss.

Chris: Yeah.

Dave: Like, we need somebody else to do this.

Chris: I'm not senior. I'm not junior, but I'm not senior either. Put me in a role where I don't have to be a leader to other people and know that I don't want a promotion. If a promotion exclusively means people skill management, I don't want it. You can say that.

Dave: There may be a time where you want to stop writing code and management may be a great option, or whatever, or you want to write less code, or whatever. Maybe you -- I don't know. I think you can still be an engineer. If that's what you want to do, I'd let your bosses know about that.

Chris: Yeah. Yeah.

00:42:25

Dave: Laura Hogan's book on engineering management is really good.

Chris: You're never going to do better than that. She's the best.

Dave: Yeah.

Chris: I want it so much. I almost envy your role a little bit because my day is so full. I write a lot of code still. I do design work still sometimes. I do people stuff. I do email stuff. I do planning. I do lots of stuff. My day is absolutely too full. I cannot have two junior developers that I am personally responsible for. It's not going to happen.

That sucks, though, because I want that. I want to be a manager. For six years, at least, I've been like, "Please, God, can I at some point have so many developers working for me that I can guide this ship and use my long-term experienced in the industry and with this product to guide it to a happier place but it doesn't need me writing so much code from scratch and whatever? I can just do more reviews and just have people under me, like a whole team. But we're so small that that's not a compelling structure at CodePen, right?

Dave: Right.

Chris: It requires a little bit more success to get to that point (if we do). But I think that would be fun. I want to be the old man who helps the junior developers level up and be successful themselves. That would be a cool way to continue giving back in the world (for me). But not everybody is capable.

We're hiring right now at CodePen. Again, we've done this in the past, are intentionally hiring at a high level, not low-level. I'm not looking for interns. I'm not looking for junior or even really mid-level people. In this particular case, we need somebody who is really good at GO because we're really leaning into that. Now, we have some GO expertise but it's certainly not me. The people who are writing GO at CodePen (mostly Dee and Alex), they want somebody who is better at GO than they are.

Dave: Right.

Chris: That's the point. We're so small, that's just the way it has to be. Oh, do I dream of hiring junior developers to help lift up their careers and give back in that way? Hey, yes, I do. But everybody's life is different.

Jenns, your life is different. You know what you want. You know what you're capable of - that kind of thing. I would say that you should probably stretch yourself a little bit here, though. If your opinion is just like, "I'm a code monkey. I want to be a code monkey. I don't want to ever do anything else." I think that's -- I'm not saying that's necessarily what you're saying here, but if that's the ... realize that being a senior -- and I think it was Marco Rogers who said this for the first time that I really liked is that being senior is being a force multiplier.

Dave: Yes.

Chris: It means that if you want to be a great programmer, getting everybody around you to be better at programming, too, is way more useful than just you being a good programmer - way more useful. If your goal in life is to make this organization succeed and hit goals and kick-ass, you cannot do it by yourself. You'll never be as good as somebody else who lifts up everybody else around them. You'll never be as good as that person. If that's your goal, then do that.

If your goal is, like, I just really like algorithms and data structures, and I will never like having a Zoom meeting with somebody, well, I guess then you've just got to know that you've maybe hit your ceiling already then.

Dave: Yeah. I forget who said it. It might have been Laura Hogan's book or some other business book, but management is the art of getting two people to do the same thing, whether that's making lemonade at a lemonade stand and sell the lemonade - or whatever. That's all it is.

You can even scale back your expectations of yourself and for these people. Maybe they're asking for personal progress reviews but give them homework or something like that. I don't know but, like, "Go make websites. Go make something cool. Just built websites."

I think code review, you called that out specifically. I think that's definitely part of the process. I don't know. Whenever I get -- I don't get this often, but if I get--

Chris: ...more productive with no code review. [Laughter]

Dave: Right. If you're just going to let them -- you're going to have to hire more senior, I think, if you're just going to be like, "We don't do strict code reviews." But I think code reviews are your chance to be like, "I'm going to get this the way I would have coded it," more or less. This is my chance. That's the forced multiplier thing. You didn't have to sit there for 8 hours and type 600 lines of JavaScript. You just sat there for one hour and said to actually move these commas over here, or whatever. That's great. There you go.

Chris: Yeah. [Laughter]

Dave: Isn't that better? Your code still gets out, but it's just been written by somebody else.

Chris: You've got to realize that when you show them, like, "Oh, actually, our house style is this, and actually this line is confusing or could cause a problem because you're not validating something," or "I've seen this mistake before. This may pass a test now, but it's very fragile," because you have that kind of experience that it's not like -- you know maybe you'll have to correct that mistake again one day, but you're lifting up that person. The chances of them making that mistake again, if it is a mistake, is lower. That means next week's code is going to be all that much better. You're playing this little game of making everybody better. It's awesome.

Dave: There are things you can do, like just install Linters and stuff. That way you don't have to be the bad cop all the time. It's like the robot is the bad cop.

Chris: Mm-hmm.

Dave: Like, "Move this comma here." Just try to use tooling to eliminate any nuance, I guess, or whatever. Just say, "This is what we're doing. If you want to change it, we can do a big PR," or whatever. "But here is the standard we're working with." That might help you.

Then I think it's check-in with people, too. One-on-one is a pretty classic thing, but it doesn't even have to be that formal. It could just be like, "Hey." Every Monday morning you DM, like, "Hey, what's your plate like? How do you feel? Any questions? I can help."

Chris: Yeah. Wouldn't it be fun if you know you need tests for a certain area, so you wrote the tests?

Dave: For my whole app, yes, Chris. Thanks for bringing it up. Yeah.

Chris: Well, yeah, I know you did. But if you took your senior skills and wrote the test, made a PR with just the test in it and gave them that and said, "Okay, well, do this. There's all this tooling in place so you can't screw up the commas, anyway, so don't worry about that. But you need to write the actual functionality and, obviously, my test better pass because it's sitting there waiting for you."

Dave: Yeah. That's a big move. That's a big move.

Chris: That's a cool idea. I'm not sure that it's going to work every day, but maybe.

Dave: No. No, and you may have to work, too, with upper management and just maybe also say, like, "Hey, we maybe need more self-motivators or something." I think that's one thing we look for in people. I think you do that, too, at CodePen. Somebody you have to prod along the whole project is less useful in a small company. It sounds like you're on a team of three developers, a pretty small-ish company. You may have to put a requirement in the interview process, like, we need very motivated, self-motivated people because I can't be motivating all the time.

00:50:27

Chris: Great. Let's mention real quick at the end here just because we can that there has been a little movement in the container queries world, hasn't there?

Dave: Ooh-hoo-hoo-hoo.

Chris: I don't think it's worth doing a whole episode yet because you have to enable a feature flag and thing. It seems very unstable, and they're being clear about that. In fact, not even talking about it, as far as I know.

Dave: Yeah.

Chris: We just know people who know people.

Dave: Argh. We've got a pirate version. No, there's feature flag in Chrome for a really sketchy version. But, man, it's fun! It's living the life. I made a CodePen with an actual container query. I'm loving it. I'm loving life.

Chris: Yeah, literally, you can do it on CodePen because you just download -- what is it -- Chrome Canary, I guess.

Dave: Chrome Canary, and then I forget what the flag is. CSS experimental features blah-blah-blah.

Chris: Yeah. You flip it on and then the syntax is an @. It's @container. We're not talking about the switch statement, although that's a thing, too, which is container queries-esque. We're not talking about conditional custom properties or higher-order custom properties, which is interesting and possible, too. It's just straight-up @container, which is exciting to me.

Dave: Yeah.

Chris: I think there are limitations like, well, what's the limitation? Is it direct children only? You have to have containment on the thing?

Dave: Yeah.

Chris: There's all kinds of stuff.

Dave: Contain layout size, I think, on the parent, like whatever your parent container is.

Chris: Right.

Dave: That kind of got me a bit because you have to -- well, again, we'll see how it shakes down, but it was kind of like, "Oh, you need this on an element that's at least full width and can also be full height, maybe. It kind of knows its height or something. But it was -- yeah.

Chris: There's going to be stuff that not everybody likes. It's not just like, "Imagine what you think container queries will be, and then just like a media query but for a container, and you can do anything you want." Not quite. Sorry. But it's still pretty cool.

The switch statement wasn't enough for me. I think that's cool that it can do that but having to do that on a property-by-property basis isn't as cool as, "Write the rule and then write stuff inside that can change any number of key-value pairs, essentially." Property values.

Dave: I think I heard Miriam Suzanne call it one-dimensional queries, the switch statement, because you can only do grid template rows or something. You can maybe do columns.

Chris: Yeah.

Dave: Sorry. Grid template columns. You could maybe do those.

Chris: But then you have two switch statements because there are two.

Dave: Yeah, yeah, but anyway, I think I heard it one-dimensional. I thought that was pretty cool just to think of it as, like, I'm going to just change it on this axis only, or something.

Chris: Yeah.

Dave: Anyway, it's so cool. Yeah, I have this little card UI.

Chris: Yeah.

Dave: Where I use mix-ins, like hooks, basically, to let you compose any card you want with any behavior, and stuff like that. It was just years of frustrations with card UIs and stuff. I need to blog about it, but anyway, my friend Joel helped me out with it. I flipped it over to container queries, Chris.

Chris: Nice.

Dave: It's beautiful.

Chris: That's great. I haven't turned it on. I haven't actually tried it yet.

Dave: And it only cares about itself. It only cares about itself.

Chris: That is great. I do think you do a command shift F or whatever and find in project and you look for @media and you look at all of them. If they are min-width, max-width type stuff, there's a good chance -- I'd say almost definitely over 50% -- that what you should be writing there is a container query. It should be based on its container, not this. It may take a little mental -- you might have to take your brain out of your head and smack it around a little bit and put it back in, but that is probably what you're trying to say.

Dave: Yeah. The viewport is a lazy proxy for what you actually want. It's dumb. It's good and it's the best tool we have right now, but it just tells you about the viewport. It doesn't tell you about the actual page or the actual element, like what it needs.

Chris: All right.

Dave: Well, cool. Well, we should wrap it up. [Laughter] Yeah, we'll wrap it up here.

Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show. Follow us on Twitter, @ShopTalkShow, for tons of tweets a month.

Head over to patreon.com/shoptalkshow and join the [techno voice] Discord because it's popping off. It's been a lot of fun.

Chris: It's the best thing we ever did, Dave.

Dave: I know. We had a Clubhouse the other day where we all just hopped in and chatted. It was good times - good times. Good people in there too.

All right, Chris. Do you got anything else you'd like to say?

Chris: Hey! ShopTalkShow.com.