Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to a 2021 edition of the ShopTalk Show. I'm Dave--heading into the ninth season--Rupert. Or tenth season? Is it? With me is Chris--comfortable in the booth--Coyier. Hey, Chris, how are you?

Chris Coyier: I'm doing very well. I actually just got to see a photograph of your new booth. Not really a booth. More like a giant room in your yard. I feel like you showed me early on pictures. I remember we were looking at that website and I went on that whole tirade that it looks like Tailwind, even though that's not fair because Tailwind can look like anything and yadda-yadda-yadda.

Dave: Then they told me, "Hey, that drove so much traffic to our website; we weren't prepared for that." [Laughter]

Chris: What?!

Dave: Yeah. Yeah.

Chris: The ShopTalk Show effect is real! Gosh, if we sell one booth -- what's the commission on one booth?

Dave: I don't know.

Chris: A couple grand, I bet.

Dave: I hope. I hope.

Chris: I hope so too. It looks absolutely epically beautiful. It looks like Uncrate or something.

Dave: Oh, yeah. I'll put it on there.

Chris: [Laughter]

Dave: Yeah! Buy my house, babies.

Chris: Yeah.

Dave: It's $1 million.

Chris: Yeah. Oh, at least.

Dave: Starting price. Yeah.

Chris: In Austin, Texas, with that thing in the back yard, that's a million-dollar house, for sure.

Dave: $20 million.

Chris: Twenty. Yeah. Let's get into the double digits, for sure.

Dave: Yeah.

00:01:39

Chris: Well, it's a new year. It's starting off just horribly.

Dave: Just pandemically, yeah.

Chris: [Laughter] There's that. I feel a little, of course, isolated from some of the worst of it here in Bend, Oregon, because once in a while you might see a Trump fanatic with flags flying in the back acting like a complete asshole, but I don't see buildings being ruined and people being shot and all that, not that we want to dwell on this. We're going to talk about technology, for sure, but it just feels especially raw right now. Sorry, everyone. Hopefully, this podcast will -- the technology vibes will wash over you.

Dave: Yeah. Meanwhile, my senator is Ted Cruz, so anyway -- let's go onto the next thing.

00:02:22

Chris: Yeah, well, you're blogging. You're a static thing. I heard you might finish your 11ty conversion - two years' deep. But it hasn't happened yet.

Dave: Two years into my 11ty conversion. I stalled out last year because it was 0.5 seconds less.

Chris: A little slower.

Dave: Slower than Jekyll on my Windows machine.

Chris: Yeah. Weird call there but hey.

Dave: That was stupid.

Chris: [Laughter]

Dave: I just had this cost-benefit panic.

Chris: There must be something else. Yeah.

Dave: I had this, like, why in my brain would I choose something slower? But I know the benefits are: if I'm all on Node, I'm in my wheelhouse.

Chris: Exactly.

Dave: Not tinkering with Ruby and crap. Then I can just code and mess my site up really good. I can add in GitHub Actions a little bit easier. I'm not balancing two, three environments, or whatever, in GitHub Actions.

Chris: Good point.

Dave: I just was like -- there are a lot of reasons I would switch over.

Chris: Not to mention we know Zach and we can hit him up about questions, which is a pretty--

Dave: Yeah, and I could be like, "Fix this for me. I invested $16 million into your little GitHub project."

Chris: [Laughter] At least you could answer my Slack messages, Zach.

Dave: Yeah. Yeah, so anyway, I am very -- I want to be on 11ty. It was slower and I just was like, "Oh, my gosh." But I think you get into the minuscule details. I think it's because Jekyll 4 can use the liquid.c, like the C binary to process Liquid templates. I think 11ty v1 or maybe 11 does it, 0.11. But 11ty version 1 will use that too. I think the speed difference will just be nuked.

Chris: Yeah.

Dave: I know Alex--

Chris: They're both pretty quick these days, though. None of them touch Hugo because GO is just ridiculous.

Dave: No. Yeah, but the limit there is you have to use GO templates, or else you don't get any of those benefits. That to me is kind of a deal-breaker because you're bought in. My migration to 11ty, more or less, other than weird filters I chose--

Chris: Yeah.

Dave: --all my Liquid works. I just move it over. It just works.

Chris: Yeah. You're a Liquid guy, huh? Liquid is the default.

Dave: I love Liquid, actually.

Chris: Do you really? Liquid is the default in 11ty, too. If you don't do anything, you get Liquid.

Dave: I think so, yeah.

Chris: Yeah.

Dave: Then Nunjucks is kind of a first-party thing as well.

Chris: I'm definitely a Nunjucks guy, but that's so untouched. It is abandoned. Kind of who cares because it just works fine. It's not like you're like, "Gosh, I wish Nunjucks could do this." It feels very feature-complete to me, but hey.

Dave: It does!

Chris: Yeah.

Dave: Well, you know, I have this weird thing on my blog. I'm doing weird stuff. That's me.

Chris: Yeah.

Dave: My About page is weird. My Books page is weird.

Chris: Sure.

Dave: I do weird stuff. Article page is a little weird, but I have this thing where it's like one template has to be Nunjucks and one template has to be Liquid because I was using some Jekyll feature or something.

Chris: Okay.

Dave: I wish I could remember why.

00:05:32

Chris: 11ty would love that. 11ty doesn't care.

Dave: 11ty doesn't care.

Chris: Yeah.

Dave: That's the beauty of 11ty. You say, "Here's a file. It's in this template." It's like, "Cool. I'll just do my best, bud." [Laughter]

Chris: [Laughter] Uh-huh.

Dave: It doesn't even care.

Chris: Uh-huh.

Dave: It's impressive.

Chris: It's been on my mind a lot lately, too, for reasons I can't get into here, but I'll show you later. Secret stuff.

Dave: Secret meeting.

Chris: The reason I even mention this at all, even though we're both working on our websites -- I launched a whole new design. Maybe we'll talk about that in a little bit.

Dave: Yeah. Congratulations!

Chris: Yeah. Thanks.

Dave: You did your thing. You did the Chris Coyier thing.

Chris: Yeah.

Dave: You just hit publish. You just hit publish.

Chris: Mm-hmm.

Dave: You do it.

Chris: It wasn't no work. It was probably two weeks of half days, you know.

Dave: I would put it in the kind of realign category, right? Because it has the spirit of the previous version.

Chris: Mm-hmm.

Dave: You're up to, what, version 20 or something?

Chris: It's 18, we called it.

Dave: Eighteen now?

Chris: What's nice to me about it is that I still have my chops. I'm not the world's best designer but, when it's my own site and I take my time, I don't think I'm the world's worst designer either. I'm kind of happy about that. I think it looks okay. There's a lot more polish I can do, but it's not without its polish.

There is kind of a lot to it. Believe it or not, it's somewhat of a complex site - thousands of authors and lots of different content types and tags and categories and art directed blog posts as well.

Dave: Hey-oh!

Chris: All kinds of stuff, and e-commerce and checkout and old forums. There's just a lot to think about, so every time I get the opportunity to -- V17 was not on purpose--a complication--but I worked with Kylie on the design of it. It was very fancy. There was a Web component that had an SVG in it to set text in a circle because that was just part of the design of it.

Dave: Yeah.

Chris: That was really cool, but now that I'm a little more on my own and I wasn't working with anybody else on this, I'm like, "I'm afraid the circle text needs to go because that's a little technical debt I don't need right now."

Dave: No, I think it's very much like that V17 was a very big shift. I think of the pastel gradients and stuff like that everywhere. This feels like just a realign, a little tightening up of kind of what you were doing.

Chris: Mm-hmm. And cards, I would say. I didn't really do cards before, and now these are very much like just an absolutely prototypical card thing.

Dave: Mm-hmm.

Chris: There are variations on the cards and all that, of course. But I think that works for a site with some 20,000 pieces of content on it that I tried to pack a lot of onto pages because that makes sense a lot of times for sites like that. Anyway, I have more to say about that because we were talking about you, 11ty, Jekyll, static sites, and that type of thing.

Dave: Mm-hmm.

00:08:29

Chris: Your recent post was on how you could art direct a blog post. You know I used to rally against that word "art direct." What we're talking about is when you go to a blog that probably has a normal template for blog posts. It's just, they all generally kind of look the same, which--in the world of publishing--

Dave: Column of text.

Chris: Yeah, it kind of has to be that way. If you're publishing four posts a day, there's nothing wrong with just using a generic template for that. That's the way the world turns. But it is really fun sometimes to be like, "I'm going to turn this article on its head; apply special colors and fonts and layout, and have a special header," yadda-yadda-yadda.

They call that "art directed blog posts." That was kind of called out at one point as being a misuse of the word "art direction." I'm starting to come around to it because, okay, we didn't hire an art director to do it. An art director is a real job that's very defined and is a big deal and stuff. But still, the end result of a blog post that's been highly customized, it is kind of like you art directed it. Anyway, I'm okay with that term.

Dave: Mm-hmm. Yeah.

Chris: Art directed blog posts, I can tell you four or five ways to pull it off in WordPress. Maybe I'll get to that, but it's a little bit of a different world in a static site. You were kind of exploring. How did you do it, Dave?

00:09:46

Dave: Yeah. I think Colly (Simon Collison) had a really good post over the break. He was just saying all these personal websites are so boring and it didn't use to be that way. Maybe it's some old man feels or shakes first at cloud kind of stuff, but he was kind of just, I think, getting at, these are your personal websites. Make it personal. Have fun on your website.

Any time somebody posts that, I'm just like, "Yes, 100%. Thumbs up. Let's go."

Chris: [Laughter]

Dave: Let's go. Let's do it.

Even in your series over the break, the kind of, "What did I learn in 2020?" I noticed. I don't know if everyone noticed, but I noticed a little bit of art direction, a little bit of Houdini outlines or whatever on some links or text and stuff like that, some hand-drawn fields, some multicolumn bits here and there.

Chris: For the record, on that, that was lightweight and it was largely almost like a Gutenberg-powered thing.

Dave: Okay.

Chris: It was almost like we didn't craft a style sheet for each one of these. It was kind of like, we have all these tools for applying list, custom styles to these posts on an individual block basis, on the whole post basis, et cetera. Why not take advantage of it where we can?

Because this was a special series, we did it a little bit -- we pushed the needle on that a little extra harder than we normally do on a day-to-day basis, but they weren't [laughter] Jason Santa Maria's holiday candy post - or whatever.

Dave: Right. Yeah.

Chris: Or even a Dave Rupert [laughter] art directed post because you pull out the stops once in a while too.

Dave: If you're a better designer like Jason Santa Maria, he produces these posts about candy every year -- favorite Halloween candy. They just were like, the candy -- there was photography. There was texture. There was text aligned.

Chris: Mm-hmm.

Dave: It was really amazing and it gives way to some really cool experiences, just reading experiences on the Web, if you take time to do it. I would almost call art direction a blog post you take time in styling.

Chris: Right.

Dave: It's not, you know, if you hate the term "art direction."

Chris: Doesn't that mean you need -- maybe you can pull it off in just CSS. I kind of like it when you can because it means that--

Dave: Yeah.

Chris: I don't know. It seems like it's going to last a little longer because then, if you rip off that CSS, it just goes back to the regular template and it's not a disaster.

Dave: Yeah.

Chris: Like eight years from now or whatever, which I do care about very really.

Dave: No--

Chris: But then sometimes it involves some HTML, too. Then you get into a little trickier territory. Maybe that's fine, but maybe it's not. You know?

Dave: Yeah. I mean if you're trying to style a certain paragraph, you can do P Nth of type 5, or whatever, now. That's sweet, but maybe you would add an ID to the P tag or the section or something just to make it really pop or whatever. Once you code HTML in your text editor, you're stuck with it for a while. [Laughter]

Chris: You are, and I think there's a slightly higher chance that you regret that custom HTML in the post or that it causes you future problems.

Dave: Yeah.

Chris: Maybe not 100%, but a little bit. That really is kind of what Gutenberg is doing. It's just a level of trust.

To me, a big deal is just a simple one. Let's say I want to set two things side-by-side in a post. You need HTML to do that. There needs to be a wrapper and two inside children and you use some kind of CSS to make that happen.

Dave: Mm-hmm.

Chris: You could do that on your site easily. You just type a div.

Dave: I do. Yeah.

Chris: You type a div because Markdown supports divs and all that stuff. That's fine, but Gutenberg is doing it too. It's doing it in a way (with classes and stuff) that I trust will last forever because it's built into the core product. Then I can latch onto those classes and say, these classes are never going to change.

Dave: Mm-hmm.

Chris: I don't know which one. I just felt like mentioning that. What did you do, though, on this site to unlock the possibilities of art direction?

00:14:09

Dave: It's three tricks, basically. I think the baseline is, I think, CSS custom properties, and that's your light theme, your dark theme. But then you're getting into post themes.

If you're doing a post about the blood moon or something--I don't know--maybe you want an all-black website with red text or something. You just want a vibe, add a vibe. CSS custom properties are really awesome because it's the cascade, right? As long as the styles you add are later in the cascade, you override the default style.

Chris: Okay.

Dave: I find theming to be pretty awesome, like variable, like a good set of variables. I find that to be pretty awesome and I could probably take this. I just do colors, I think, and maybe I have a padding variable.

Chris: Mm-hmm.

Dave: But you could take this farther. You could take it to heading sizes or something. It's like, I want to set my H1 to 9000 pixels. I want to do that all the time because my heading size is always a smidge off.

Chris: [Laughter]

Dave: I'd love to relatively boost it or something like that.

Chris: Okay. Okay. But by using custom properties and then setting them at the individual post level, are you kind of saying--? Is there a comment in your CSS file or something that's like, "Never change this variable name" because it's literally going to be used on custom posts and I can't?

Dave: I kind of just know. I mean it's sort of like, if I create a variable, I have committed to that variable. It's the API of my website. I have to support it forever.

Chris: Mm-hmm.

Dave: But with static sites, here's the power. If I change a variable, I just find in project and replace it everywhere.

Chris: Yeah, because your content is in your repo. It's a lot harder for me to change content on a WordPress site across the book.

Dave: Yeah.

Chris: It's not totally impossible. You could write an SQL query, but that's a different ballgame.

Dave: You don't want to do that. You don't want to do that. I mean you could, but no, that's one of the advances of static sites is it really is just like I have some local testability.

Chris: Right.

Dave: I think even if you're doing static sites but you're on Contentful or something like that, these services are great. Don't get me wrong. I think you would be limited in what you can do there.

Chris: Mm-hmm. It's not unchangeable, but that idea of revisiting every single post to manually make changes has just never been a palatable choice.

Dave: Mm-hmm.

Chris: That's why, since the beginning of time on the Web, we've been like, "Oh, gosh. No way would I hard code my navigation into each page. I'm going to have an include that includes it there so I can change it once and it changes everywhere."

Dave: Yeah.

Chris: That same concept is what we're talking about now in 2021. I don't want to change--

Dave: Yeah, change it once; change it everywhere.

Chris: Right.

00:17:12

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by WordPress.com. Did you know WordPress offers high quality, educational courses? The URL for those is wpcourses.com. It's brought to you right by the WordPress.com folks.

It's a pretty new thing they're doing. They have a course called "Blogging for Beginners," and they just launched a brand new one called "Podcasting for Beginners."

It's $99. You get access to the thing for a year, and they have all kinds of stuff like quarterly sessions led by the WordPress.com team, on-demand access to the content, regular office hours. You buy the course and you get access to the course, but then you have access to the people behind the course to ask questions and do what you need to do.

It's a six-hour video course, so it's going to take you to knowing a heck of a lot about podcasting. This is the thing to do if you want to get into podcasting. You know how engaging of a format it can be. You're listening to a podcast right now. So, there's that. Pretty compelling in that way.

I like the thumbnail for this course is a Shure SM7B microphone, which is what I am speaking into right now, so they know what they're doing with recommendations for gear and all that kind of stuff.

Then, of course, because this is offered from the WordPress.com people, they're recommending something that you can do on WordPress.com. If you're interested in starting a podcast, know that you can do it on WordPress.com as well.

Of course, I recommend that you do. I want to listen to your podcast. Do it. Tell me what you podcast. [Laughter]

[Banjo music stops]

00:19:04

Chris: Anyway, this is lovely. I liked your--what do you call it--front matter idea.

Dave: Yeah, so I do. So, the way I inject styles, I don't just write a style brick in my post. I could.

Chris: Yeah. Why not?

Dave: I just don't.

Chris: You just don't.

Dave: Well, I mean you could. For me, it needs to go in the right place.

Chris: Ah, yeah.

Dave: Because if I inject a style brick in the thing, well, that might render on the RSS reader.

Chris: Oh...

Dave: All of a sudden, somebody's RSS reader just turns black or something. I don't know.

Chris: It might.

Dave: That might be weird.

Chris: That's also a little not cool to put a style tag in the body. I think it's kind of supported but may not encouraged or maybe it is invalid, technically.

Dave: Yeah. I want things in the right place, especially if you're painting. I'm trying to paint as quick as possible, right?

Chris: Right. It could be blocking. Yeah.

Dave: Yeah, if you chuck it in your post, you're going to see the flash of what it thinks the site should look like.

Chris: Oh!

Dave: Then it'll say, like, "Oh, there's more style? Cool. I'll just stop what I was doing and recalculate."

Chris: Flash of un-styled art direction. Yeah.

Dave: I created two variables in my front matter. Three or four, actually. But there's a body class, so I can just set a body class to turn it light or dark, like theme light, theme dark.

Chris: Okay. Clever. Yeah.

Dave: Just basic. I actually have five themes. It's hidden in my CSS file - or something. There is a Minions one.

Chris: [Laughter]

Dave: I think it's still there. [Laughter] It's hideous, but it works. But then there was a--

Chris: Head/foot.

Dave: Head and foot are kind of the two key ones. Head injects stuff in the head like style tags.

Chris: Right.

Dave: But I don't want to just do styles. Fonts are also something I want to do. If I wanted to preload some images or another article or something, I would do that there too. I just didn't want to limit myself just to only styles, which I think is what my art direction plugin did for WordPress.

Chris: You know what? I think it started that way and then it became, just inject whatever you want. It was only head, not foot.

Dave: Inject.... Right.

Chris: But you could put a script in there too. It just was a very generic, like, "Whatever you put in this text area goes in the head. Have fun." Yeah.

Dave: Yeah. So, then I did foot and foot is for scripts and stuff like that.

Chris: Right.

Dave: In theory, it could be whatever, but foot is just, yeah, scripts in the foot. That was maybe more important. I want it to all run after my content anyway, but I put it after all my site scripts had run. That was maybe more important back when I was using jQuery and I needed jQuery to load before I write jQuery.

Chris: So, you could use the dollar selector because if it was in the wrong order, that would be a problem.

Dave: Exactly.

Chris: That's classic. I'm sure somebody right now on planet Earth is like, "Why is dollar sign not defined? What the--?"

Dave: Yeah, why is dollar--?

Chris: [Laughter]

Dave: Object is not an object. What? Or not a function.

Head and foot, pretty simple. Then the third thing was -- I went back into my blog history, and I think it was like 2016. I was bored with Web design, and it probably shows up on this show too. But I just was like, this is boring stuff, man. List details and flows. That's what it is every single time. You write a list of posts. You write the detail of the post or product. Then you do the flow, the checkout flow. That's it every time, every day.

Chris: I remember this Dave.

Dave: That was my whole life. I was bored. Then I just started realizing, you know, through people like Sarah Drasner, a lot of people -- SVGs are really awesome for creating animations and simple animations and stuff like that. I was like, hey, this is actually a really good territory to add expression. If I just make an SVG title metadata front matter thing, I can inject an SVG into there and render my title as an SVG, and bingo-bango--

Chris: So, it's like instead of outputting text as an H1, it's just like, "Put whatever I wrote in this"?

Dave: Inside the H1, yeah, and add an ARIA label. It's cheap and the commitment I'm making there from an accessibility angle is like my graphic will always express the title of the post. If I was doing something different, I'd have to figure out a different way of life.

Chris: Mm-hmm.

Dave: The idea is, my whole site, I can add art up at the top and that's a really cheap effect, but that really says, "Hey, this is something I've put time into. Surprise! Here's a title as an SVG."

Sometimes, it's like a full-blown out illustration I made. I'm not good at illustrating [laughter], or sometimes it's just an outline of text. It can be that easy.

Chris: The sky is the limit. It's an SVG. Literally, an SVG can do, you could just plop right in there.

Dave: Yep.

Chris: It doesn't even have to be SVG, because I looked at the code you put in the blog post. All it does is jack whatever is in there into an H1 tag. [Laughter]

Dave: Yeah.

Chris: It could be a canvas. I mean not really because you'd need a script tag then.

Dave: No, it could. Yeah, it could totally just be a canvas or whatever. When you have SVG, you can do cool stuff. You can animate SVG with CSS, which is what I did on my little post. But you can also use JavaScript, which I've done before.

Chris: Mm-hmm.

Dave: In my 2020 post, I have this big county map of the United States. I just kind of was like, I'm going to make it so if you hover a county, it'll get more Corona, basically. I just was like, that's fun. That's what I wanted to do. I'm done.

Chris: I like the idea. It's giving you a lot of freedom but some constraints. Just the idea that you called it SVG and the point of it is, do more SVG titles, it's going to encourage you to do that.

Dave: Mm-hmm.

Chris: Yeah, and it will.

Dave: Yeah.

Chris: The ARIA label is a nice little touch there because it's just an image. I can just dunk whatever I want in there. The post title will have the ARIA label around the H1. You're not materially harming accessibility in any way. You do need to be a little careful because, hopefully, people read on the page with their eyes, kind of, is that title too because I know that's -- you know.

Dave: Yeah. Yeah, that's kind of what I'm thinking. I think the next phase of my art direction life is I'm kind of interested in this concept of weight. You kind of do it on your homepage. It's like you want the heaviest weighted article at the top. I just have a chronological list.

Chris: Hmm.

Dave: If I say, "Oh, this is an important post. I feel like it should be heavier, outlined, or different," and stuff like that.

Chris: Mm-hmm.

Dave: I'm trying to figure out what is up at the top.

00:26:12

Chris: That is very tricky. I've never really solved that, myself. I do this concept of link posts. In fact, in my mind right now, I feel behind on them because I have a good five link posts that I'm dying to get written and published.

I like how they're really -- they can be extraordinarily short. I probably bring up Gruber too much, but he's been really pissed lately because of all this country stuff. I'm like, "Yeah. Go get 'em, buddy."

Dave: Oh.

Chris: [Growls]

Dave: Get 'em, John.

Chris: He published--

[Laughter]

Dave: Sweep the lake.

Chris: Yeah. He's just a little more badass than I am about being able to speak his mind and I like it. It's not like I'm afraid. I just don't know what to -- I don't want to sound dumb. Anyway--

Dave: Sure.

Chris: He published the definition of the word "sedition," which is an alternative word to "treason." All it is, it says, "Miriam Webster:" and then a quote of the definition of what sedition is. Everybody knows what he means. It's good. It's educational. It's fun. It's a poke at the current times. It's so short as a post.

I don't have a template on CSS-Tricks that does that justice. You could probably pull it off a little better. It's just a header. It's a white page. Because you do kind of the single column thing, which I really, really like. It's just business-wise, I can't pull that off.

Dave: Hard to do with ad supports and so much content.

Chris: Right.

Dave: I have--

Chris: Even if I didn't have ads there, I'd probably use the real estate for related things. I'd use the space in some way.

In fact, Dave, I have a post template that I think I call it "art directed," which isn't the only way I can art direct posts on the site but, when I activate that post template--because that's a cool WordPress feature. I can just pick a template from a dropdown. Which template do you want to use for this post? We don't use it a ton but what that one does is it makes a big header, kind of like what you've got, a big, full-width header.

Dave: Yeah.

Chris: It doesn't have a lot of stuff in it. Our normal template is like, it could have breadcrumbs and special dates, tags, and all this stuff. It's just the title, the author, and the date. But it's big. By default, it's like, ooh, this big -- because the idea is probably I'll put a big image behind it or something.

Dave: Mm-hmm.

Chris: Then it's a single column all the way down, nothing on either side, white. The idea is, I have a better base template in which to apply art direction to. It kind of encourages. It's more of a blank slate. It looks nice on its own, but it's more encouraging. That's what you start with every day. I should call the template "Dave Rupert" or something because it gives me that base template to work from.

Dave: Or "blank."

Chris: Blank? [Laughter] But you know what I mean? Then a link post on the site, it still has this big sidebar and all this. I feel like I should have a template that renders when you hit the URL of a link post on CSS-Tricks in a way that a very small amount of content still feels right. It almost feels broken if you land on a post that's that short on CSS-Tricks.

Dave: Yeah.

Chris: It works okay in the card but not on the page template.

Dave: I have link posts on my site and I do a different title treatment, slightly. I have a Vue link button in the header or the metadata section.

Chris: Yeah.

Dave: I have a link icon, basically, like a font awesome icon or something that just kind of says, "This is a link. Hey, this is different than a normal post. I'm talking about something."

Chris: Oh, you do. You have some kind of metadata that suggests that?

Dave: Yeah.

Chris: That's smart.

Dave: Yeah.

Chris: That's smart, you know. That's called -- what do you call it? [Laughter] I don't know.

Dave: It just flags main tags, categories, content strategy.

Chris: Content strategy. Even if you're not using it right now, you've thought of it because it's an important piece of meta-information about that post that you may want to use at some point.

00:30:04

Dave: Yeah. One thing I'd maybe like to do is, if I talk about a video specifically, I want the video to be the first thing you see and click. Then I'm going to talk about it afterward.

Chris: Yeah. Yep.

Dave: I do that. Talks would be something I do or something. I don't know. I think that's a great way.

How many videos do I watch a week? A hundred or something. [Laughter] I should just talk about some of them.

Chris: Yeah.

Dave: Some of them are good.

Chris: Oh, my gosh. That's funny. I just had that happen to me on CSS-Tricks. I watched five good videos. I feel like it's one post per video maybe is the right way to do it but um... I didn't like that for some reason. I feel like it might be overload on different videos, so I published a post that said, "Some recent videos about websites that are pretty good," and I put all five of them in there.

Dave: [Laughter] Chuck them in. There you go.

Chris: It's fine. It's just then you'll never be able to find it again if you're like, "What's that one?"

Hayden Pickering had this wonderful video on briefs.video of what progressive enhancement is. It's hilarious. He makes great points in it. I could see somebody reading that and be like, "Oh, I've got to find that again."

If I called it--the blog post on CSS-Tricks--"Hayden Pickering Gets Weird About Progressive Enhancement," you'd probably be able to find it. Hopefully, you remember Hayden Pickering and you just Google it and find it yourself. But if you remember you read it on CSS-Tricks, it stands to reason you might come back here to look for it. Now you're never going to find it because my stupid post title has no indication at all about it. Hopefully, the onsite search will get you there. But I'm not doing you any favors.

Dave: Yeah. Titles are hard. I did weeknotes for a while, which are awesome if you're doing weeknotes, but it's basically like, here's the stuff I saw this week, and here's the stuff I thought.

Chris: Yeah.

Dave: That's all you have to do.

Chris: Yeah.

Dave: Short thought. Short set of links. However you want to do it. But as a result, I have a bunch of content buried in these weeknotes posts that I'm like, oh, I know I talked about that on my blog but I have no idea where. I have to cruise through all the weeknotes and try to figure out where it is.

Chris: Yeah. You can open your site in VS Code and search.

Dave: As much as I love those posts, I now slightly regret them just because I don't remember what's in each one.

Chris: Yeah. It is. This content strategy stuff is hard for us non-content strategists.

00:32:33

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you by AWS Amplify. Now, they had a release right at the end of last year that, if you missed it, you should really be aware of.

AWS Amplify, it's not really a framework. When I say the word "framework," I think Vue, React, or whatever on the Web. Amplify isn't that. It's not necessarily giving you a UI framework like that, but they call it a set of tools and services because, if you're going to build a website like that, then you're going to need to have Auth, for example - maybe, if you want it. If you need it, Amplify can help with that.

How about a data store? How about a real-time GraphQL data store? That'd be pretty cool. AWS, oh, we can offer that.

Or like image hosting. I've got to put my images somewhere. AWS has S3 buckets - the world's standard for storing assets like that. Amplify helps with that.

AWS has the tools and Amplify kind of helps you use them, tie them together, and be a really nice place to work. It's like the part of AWS that really takes DevOps super seriously.

Amplify had this release that, okay, it's this set of tools. There is a CLI to use the tools. It's nice. There are a lot of niceties in there.

Now there are new releases. There's a visual component. They're called Admin UI. Imagine you're working on your site (even locally, of course) and you can just go to /admin at it and all your Amplify stuff is there. You are using their data storage.

Well, this new UI has a way to view all of the data that you're storing (using Amplify) and even model it as well. So, like, "Oh, yeah. Hmm. What's my data model look like again? Let me just open /admin, go look, manipulate it, develop a schema for that data, and all that."

"What are the users of my app? Oh, why don't I go to /admin, look, and grant people new permissions and revoke other permissions?" Now you have a UI to handle all that, which is highly appealing to someone like me.

Check out Amplify and definitely check out their Admin UI release. It is really cool.

[Banjo music stops]

00:34:59

Chris: Let me recap Dave's thing here because this is really cool. Art direction, Dave is on Jekyll, but it could be any static site generator because it's just front matter that's doing this. You have your CSS set up such that there are custom properties that any post could set that change things like colors.

Dave: Mm-hmm.

Chris: You can see that on this post. There's a light blue background. It looks great. That's one.

Two, in your front matter you say, "Head, foot, SVG title, class name for HTML tag," whatever. You've given yourself a set of hooks in the front matter that really open up the door to any type of styling you might need to do, but do suggest some particular ways to do it, like have a big beautiful SVG header. But the door is open. Put whatever CSS and JavaScript you'd want in there.

Dave: Yeah.

Chris: The JavaScript is intended to go in the footer - kind of thing. That's really cool. That's a way that anybody could do that. This is not super advanced stuff. Your template just needs to grab that front matter, jack it into the template, and you're off to the races. Art direction is cool and fun.

Dave: Yeah. I would love to see if people run with this. Again, it's just a little personality on a website goes a long way. If you spend more than a week on a post or something, spend another week or a day just juicing it up a big or something. I don't know. Not every post has to be a banger, but just give yourself a little bit of something. Maybe it's a custom HR or something.

Chris: Oh, lovely. Yeah ... Sara Soueidan with her birds on a wire HR. It's like the best.

Dave: Yes! You're cheating because....

Chris: I know. I love it. I just have a big beefy, gradient bar, which is kind of funny. I feel like I should do this in Gutenberg. Oh, this is a good idea because Gutenberg has variations on blocks and it gives you this beautiful UI for picking which variation you want.

I even have a variation of a paragraph. That's what I do on CSS-Tricks for the blocks that say, "Hey!" and then have this orange kind of gradient around it. It's just a P-tag where I switch. Oh, this is a hey block, so--boop--and now it's a hey block.

One of the things that I like about this, and this might be 100% not true for people that almost prefer writing in a code editor. In fact, I had a meeting yesterday with my partner in crime, co-president of CodePen, Alex. Alex is one of my damn heroes. He's very good at expressing not only his thoughts, but how he comes to those thoughts and how he prefers to express those thoughts.

He was like, "I know we use Notion. Notion is fine. I like Notion." But a lot of times, because I stare at VS Code so much, he writes in Markdown files just in VS Code, in Markdown.

Dave: Mm-hmm. Yeah.

Chris: It just comes out of his brain better and he likes to look at it in that format. Then he'll push it to GitHub or something so that we can look at it formatted instead of seeing his Markdown, which I don't want to look at, really.

Dave: Yeah, well.

Chris: Anyway, my point of that is that I don't like writing like that - not at all. I like writing very visually. In the Gutenberg editor, when I click that "Hey" block, it visually turns into a hey block in my editor where I'm editing it - immediately.

Dave: Yeah. Cool.

Chris: The same with code. My code is sitting there, syntax highlighted, in my editor. When I do a blockquote, it looks like a blockquote immediately. When I apply custom CSS when I'm styling a post, that CSS is applied into my editor immediately, so I can see what it's doing.

[Laughter] We used to make fun of WYSIWYG, and it's like, "Well, sorry. WYSIWYG has arrived. Now this really literally is WYSIWYG."

Dave: Yeah. No, we have a client set up on--

You know we were going to do the whole Netlify CMS and preview stuff, but just through whatever restrictions, we couldn't use it. We're kind of in this GitHub content authoring flow or Git-based content authoring flow. It's like, "It's just not as great, man." You know? For content authors because they hop into a file and sometimes there's a bunch of HTML or something in the Markdown because that's what Markdown does. It's just like, "Oh, this is noisy. What is this stuff?"

You've got to really center. If you're building a CMS or content site, you've got to sort of center around who is going to be authoring the content and what they're going to be uploading and stuff like that. It's really important.

My next post, I think -- probably. It's going to be about how I do blog posts on my site.

Chris: That's great.

00:39:50

Dave: I made this whole Notion Kanban. I have 90 post ideas in there with different statuses of completedness and stuff like that. It's cool, but then when I get to the final draft when it's like, "Okay, time to stop tweaking," I'll export all that. Then it goes into my code editor as Markdown. Then in my Markdown editor, I have a few plugins like write good linter, which I think I've talked about before. It's a grammar linter for Markdown. It's kind of like Hemmingway or even Grammarly or something like that.

Chris: Mm-hmm. Mm-hmm.

Dave: Very basic, but it just says this is a weak word or you're in a passive voice, so quit that, and stuff like that. It helps me tune up the post just before I send it out. Then I publish it.

Chris: Please write about it.

Dave: It's a little convoluted.

Chris: Yeah. No. No.

Dave: It's a little convoluted, but it has helped me--I don't know--just at least organize my brain because having 90 posts in a folder was not helpful to me.

Chris: I love people's convoluted flows. You should write in to ShopTalk Show. Go to our website and do the thing and talk about what your convoluted flow is for publishing or deploying or anything. I know we're talking about writing blog posts here, which is kind of what I'm getting at, but I guess it could be anything. Convolution is the key. Write it and tell us. I'll copy Dave and do a real quick one.

Dave: Yeah.

Chris: That series, that end of years series that you were talking about that we did.

Dave: Mm-hmm.

Chris: There's also a thing in WordPress called a featured image. For any given post, you could have one of them. You click it in the sidebar and you upload or pick from your media library or whatever a featured image.

Now, you have to turn that feature on but because it's part of the WordPress world that you can do that. Lots of stuff uses it. Lots of themes use it. There are APIs in PHP in which to access it and use it. Search results use the featured image as a little thumbnail right next to it. Social media integration will use your featured image as the metatag thing in the head. It's just very built in to a lot of stuff, so we like to use it. We've been using it for a long time. Cool. There's that.

Oh, where was I going with it? Oh, the convolution of the flow, right?

Dave: Mm-hmm. Yeah. Yeah.

Chris: Then that series has a homepage, too. They're not just blog posts but there's a category page that shows all the blog posts together. That's a custom template in WordPress. We called it "Category: End of Year 2020," or whatever -- .php. That way that category template automatically gets picked up by the theme and just used. Right? We don't have to write any code for it. If you name the file correctly in WordPress land, it'll just use it.

I was able to apply custom CSS on that page and it's nice. There's Dave Rupert's head with some fancy little circles behind it and a block quote of one of the pulled articles from it. It says, "Dave Rupert," and the date.

We designed it and the shape of it is almost that kind of 16x9 look that looks pretty good on social media. I'm like, why would I open up Photoshop or Figma or Acorn or something and design one from scratch for this image when what ends up on that page is pretty much what I want?

Dave: Mm-hmm.

Chris: Like a screenshot of that would be fine. Now, I didn't do the whole Puppeteer crazy town because that's fun, but I didn't want to go there yet.

Dave: Oh, come on. Come on. Come on.

Chris: But I also couldn't publish the post in WordPress then go take a screenshot then go upload the featured image because the dominos have started to fall when you hit the publish button. It automatically gets tweeted, yadda-yadda. I needed the screenshot before I hit publish, so we designed that category page to have a custom SQL query on it that would query for all posts in that category whether they were a draft or not, because you can just do that.

Dave: Mm-hmm.

Chris: It's just a computer. It's in a database. The first thing we'd do when we were writing the post is, we wouldn't give it the category until the last minute. Then right before you publish it, you give it the category. You go to the category page. It's there--even though it's not published yet because that's how we wrote the query--take a screenshot, upload the screenshot as a featured image to the post, then publish it. There's only, for a split second, is it on the category page before anybody can read it. That allowed us to have the screenshot to use when we did hit the publish button. Super convoluted.

Dave: Yeah. Yeah.

Chris: But it only took us about five minutes to think up and get live, so it was kind of like, "I don't care that it was convoluted. It solved a problem and it did it nicely."

00:44:47

Dave: Nah, I could make it more convoluted for you.

Chris: [Laughter]

Dave: What you do is--

Chris: Switch operating system.

Dave: What you do is, it's an input to look up a post by the ID and then you plop that and then it'll--

Chris: Oh!

Dave: Then it'll spit you out the image for you. Then you can -- but maybe you have different templates. A little dropdown selector.

Chris: Would you use a secret query parameter deal?

Dave: Oh, yeah. Yeah, totally, like /image. I don't know. No, I'm just kidding. Getting too complicated. I know Wes Bos creates an SVG for a lot of his posts and stuff.

Chris: Mm-hmm.

Dave: All his posts have an SVG graphic and then some process on the Gatsby build pipeline he has will screenshot that or turn that into an actual PNG, I think, because you can't just upload an SVG to Twitter.

Chris: No, you cannot. You can't have it as your metatag in there.

Dave: Wouldn't that be so handy, though? [Laughter] But I guess if you have a picture of somebody's face in there, that can be....

Chris: Anybody that's fallen in love with SVG has also come to terms with how second class citizen it is in the world of image formats.

Dave: Oh, you mean on Windows when you download an SVG and it gives you an Internet Explorer icon?

Chris: [Laughter]

Dave: Yeah. Yeah. [Laughter] Yeah, yeah, we're familiar. We're familiar over on Windows. [Laughter] But Mac's alternative is, like, "What is this file? Is this math? I'll just show you math."

Chris: Yeah.

Dave: That's what....

Chris: Yeah, this is no good. Then you install one piece of software that recognizes them and then that's the icon for them forever.

Dave: Yeah, Illustrator. For the rest of your life, you're opening SVGs....

Chris: Yeah. Then you install Parallels once and something it took over there, so now when you double click them, it tries to start Windows for you to open it.

Dave: Yeah, and it opens IE.

Chris: [Laughter]

Dave: In Windows, yeah.

Chris: Oh, my gosh. That is funny. You know, but they're so powerful. I published a link to a blog post. I think the prior art for it is who knows what, but I think there is -- gosh. Now I can't remember the details of it, but here are the technological details. An SVG can have a style block inside it, as you probably know.

Dave: Yeah. Yeah. Yeah.

Chris: Then if that is the case, which could include animations or whatever, then you use that SVG as an IMG. Not even inline SVG; you just use it at an IMG. That animation will still run.

Dave: Yeah. Wow, right?

Chris: Really wild, which means you can get weird in your GitHub read me and stuff. Your RSS can have animation in it because it's just an IMG tag.

Dave: Some of that stuff works and some of it doesn't.

Chris: Yeah. I wouldn't count on it - quote/unquote.

Dave: Yeah, and then if you use SVG Use, it's like, "Oh, this is in the DOM," even though it's from a different website. If you don't, it's different.

Chris: Yeah, I'd keep it simple if you're going to do that. Okay, well that was fun. We talked about building new websites and stuff.

00:47:43

Chris: One point I wanted to make, though, is that I did it over break because, even at CodePen, we'll be like, "We're off for two weeks."

Dave: Mm-hmm.

Chris: Don't worry about everybody.

Dave: Yeah.

Chris: We'll split up support. Take a mental break, please. We're doing a lot. We have a lot going on in the new year. Come back fresh - kind of thing.

I'm like, I'm going to do that too. I didn't probably as much as I should have but, you know, it freed my mental space up to do other things, which, of course, as a ridiculous, unhealthy nerd, I'm like, I'll program other things instead, instead of actually take a break. That's when I did my CSS-Tricks design. I spent two weeks, little quarter days, half-days poking around at design--whenever I felt like it--and got into it.

You know what? It felt great. It felt like a break. It felt fun. It felt rejuvenating. It felt like a hobby and not like a job.

Dave: That's a good way to put it. It's not a hustle. It's just what you enjoyed doing.

Chris: Yeah, it did. I have this Jessica Hische poster that follows me around because it's a beautiful piece of art, I think. Now that I'm not looking at it, I'm going to get it wrong, but it says the work that you do while procrastinating should be the work that you do for the rest of your life. Then it's set on this beautiful typography or whatever.

I like it because it's not a reminder to maybe do that someday, but it's a reminder that I think I've kind of done that my whole life already and that I ended up where I am because I spent a lot of time in college and stuff. My friends would go out. "Do you want to come with us?" "No, I'm just going to download things on LimeWire," or whatever. Which partly was introversion and partly was actually I'm going to poke around at CSS because I had fun in that way too. Then I decided to turn that into a job, and I just want to hold onto that youthful exploration stuff as much as I can.

Dave: You know what my wife and I were talking about the other day? [Laughter] You know how, like, in the LimeWire days you would download every TV show theme song there was?

Chris: [Laughter]

Dave: You'd be like, "Dude! Dude! Come over to my room. I got "Charles in Charge"! Dude, check it out!"

Chris: [Laughter]

Dave: You'd just sit there and listen to "Charles in Charge" theme song and people would high-five each other like, "Hell, yeah, dude! You got it." [Laughter] What an innocent, wonderful time that was. Just like, "Oh, my god, dude! "Wheel of Fortune."

Chris: Oh, my god.

Dave: "It'll take 16 hours, but -- you know, come back tomorrow." That was, I swear, half of college was scamming TV theme songs. Anyway--

Chris: Oh, my god. I had like Homer Simpson clips, like a whole folder full of them.

Dave: Yes, everything.

Chris: Yeah. There's one where he sings, "Shaving my shoulders," that I still remember. He's in the shower shaving his shoulders.

Dave: That was so good. Back to Chris's break, you just reminded me. You said LimeWire, and I was triggered.

Chris: Yeah. [Laughter]

Dave: I wrote a blog post and my kids were like, "Hey, dad. Why are you working? It's not a workday?" That's a bummer, but I was also like, "Hey, bud. Days don't matter no more. They're all the same." [Laughter] It's just like, there's no such thing as days anymore.

Chris: I know we taught you about days, but--

Dave: Yeah, but not anymore. It's 2020. We're just getting through it. But then I put the computer down, and what do I do? I organize the pantry. That has tangible family benefits, but is this not programming? It feels like I'm just organizing a blog post or something like that.

Chris: I know.

Dave: As different as this is, organizing the pantry, which I did and I enjoyed. But it was like, this feels like programming. Is that not it?

Chris: I know. My brain is just like yours. It really is. I'm like, I need to get into light welding.

Dave: Oh, yeah.

Chris: Collect all the stuff. I've got to get a case to keep all my welding stuff in, and I've got to look at blog posts. I'm just devouring this new hobby just because it's my style.

I know other, probably healthier people, who are like, "Oh, I can't play an RPG after work. I've got to play Doom because all I want to do is shoot monsters in the head. I can't think about the game." I'm like, that's boring. I want a game where I need a notebook to keep track of my inventory where I can do hand-drawn maps because my brain has to be that activated all the time.

Dave: You mean this notebook for my D&D group?

Chris: [Laughter]

Dave: I write the lore, the whole chronology of the entire group.

Chris: Oh, that's amazing.

Dave: Then every meeting commences with a re-reading of the transcript.

Chris: Right.

Dave: Anyway--

Chris: That's like a non-passive hobby. You know?

Dave: Yeah.

Chris: It's not exactly like programming, but a little bit.

Dave: Yeah. What hobby maximizes the number of people and, basically, required--

00:52:49

Chris: But what if--? Then is the lesson from that, this work that I just did (or that you do or anybody does) that feels different, rejuvenating, fun, fresh, and stuff, is that a sign that you should do that all the time? Or if you did it all the time, would it just become boring, rote, blah, like anything else? Not that I feel that way about my job, but I don't feel the same way about it as I do about doing sometimes fresh feeling work.

Dave: Yeah. I mean I think it's -- I think you can trick yourself into thinking it's a fun time, but it's actually work time.

Chris: Hmm.

Dave: You can slip into that or something, or you may be burning the candle at both ends. But sometimes it's just like, you know, if I get this out of my head, if this is gone and moves to the next checkpoint, I'm so much better. My whole life is better. I don't have to think about this. I get one less email looming over my head. I don't know. Again, all days are the same, but you just kind of got to figure it out.

I think there's a lot of science, too. Just like taking breaks and getting rest. That's worth it.

Chris: Yeah. Yeah.

Dave: It's huge.

Chris: It reminds of that, "Took a walk. Was amazed by a blade of grass. Came back refreshed."

Dave: I've heard walking is the best productivity tool. I've heard somebody say that. Unfortunately, my physiology gets kind of amped up after any kind of exercise. [Laughter] Then I can't focus all day, so whatever.

Chris: Oh, jeepers.

Dave: Probably need medicine. [Laughter]

Chris: I've been doing these. For the holidays, we decided to buy each other one of the Peloton machines.

Dave: Ooh! Yes, yes, yes!

Chris: But it takes untold months to arrive.

Dave: Okay. Okay.

Chris: It'll be Q2, you know, by the time we get this thing. But the second you buy it, then you have access to the videos and stuff.

Dave: Yeah. I have quite a few friends who have used it.

Chris: Yeah. I'm doing those at the office. You put it on the Apple TV in here.

Dave: Oh, heck yeah. Your office looks like one of the Apple TV or Apple fitness studios.

Chris: Yeah, it does.

Dave: Yeah. Yeah. It's good.

Chris: We ordered some new furniture this week that arrives, so I'm excited about that. It's fun.

Dave: Nice.

Chris: It's fun.

Dave: I have a little bike trainer. I might start doing that in the new office. I had it in my current office, but then the kids found it and cut themselves on the pedals.

Chris: Are the kids excited about the new office?

Dave: Yeah, yeah, the kids--

Chris: Or are you like, hmm, that's a place where kids don't go? [Laughter]

Dave: You know. Well, so, my current office will turn into their playroom.

Chris: Oh.

Dave: I think they're excited about their playroom.

Chris: Yeah.

Dave: Which I am excited about because all of the Legos go in there. They don't go in the living room.

Chris: Yeah. I already have a lot of Legos and I don't know that she has the dexterity to even put two Legos together yet. [Laughter] My wife kind of side-eyed me a little bit like, "Why did you buy all these? These are for you, right?"

Dave: Yeah, yeah, yeah.

Chris: I'm like, um, they kind of are. I've never got into Legos before, but now -- I used to have kind of a snooty opinion about them, which I won't share at the moment because it's a sidetrack thing, but now, following the instructions closely and just building what they tell you to build is very Zen. I like it.

Dave: Very Zen. I put together a Lego, a ship in a bottle, this week that I got for Christmas.

Chris: Nice.

Dave: But again, it's just programming. I'm just following instructions. [Laughter] I'm just doing instructions.

Chris: You just read the docs, man.

Dave: Just read the docs and followed the instructions. But yeah. No, it's cool. Legos with kids, it happens very fast. It goes from not interested, not interested, to you have giant buckets of Legos. It's very, very quick.

00:56:41

Chris: [Laughter] Let's do one question really quick.

Dave: Yeah.

Chris: Matt Batman is wondering basically about the connection between React and Facebook, essentially.

Dave: Okay. All right.

Chris: React is Facebook. What are your thoughts on abstaining from a certain open source technology because of the organizations that support and benefit from them? For instance, it seems like there are a number of people who use Vue instead of React in protest of Facebook. Do you think this is an effective strategy and do you think there's merit to this concept at all?"

Dave: Yeah. A headed question. I mean I think it's clear Facebook has torn the fabric of society and led to the fall of American democracy.

Chris: [Laughter]

Dave: But is React part of that?

Chris: It's a hell of a sentence to say "but" after.

Dave: I don't know. But is React part of that?

Chris: I don't know.

Dave: For me, it does factor in.

Chris: Mm-hmm.

Dave: But that's just me. I know other people it factors in for.

Chris: Yeah.

Dave: I like Vue, so there you go.

Chris: Yeah.

Dave: I have a choice.

Chris: Would you say it's your main factor? It's more about -- like if you liked the syntax of React? You like Vue for more reasons than just the fact that it's not contributing to the downfall of society, but you also like the APIs, right?

Dave: I like the APIs. I think I am into directives like v-if and v-for are awesome. I know people don't like that and a bad taste from Angular and stuff like that, but it's pretty awesome in Vue. I like Vue's SFC model, like the scripts go here, template goes here, styles go here. It's awesome. There are no important style from foobar FAS. It's just there. You just write a style, so I like that.

Chris: I want to give some -- can we give some ShopTalk Show people some homework here?

Dave: Yeah.

Chris: I've been trying to get our Vue SFC loader to not mess with ES modules imports.

Dave: Hmm.

Chris: You have a Vue SFC and you want to load a library from Skypack or Unpackage or whatever as an important but leave it alone, like don't do anything fancy. Just let the browser do it. I haven't found a combination of bundler stuff that supports the Vue loader properly that will leave it alone.

Dave: Oh.

Chris: I just can't find it. But there must be something, right?

Dave: You can have an aggressive Webpack strategy.

Chris: Yeah.

Dave: Because you're not writing JavaScript.

Chris: I aborted Webpack right away because they just don't -- I've played this game before with Webpack and lost. We got on Rollup right away because it looks official-ish, the Rollup Vue SFC plugin.

Dave: Mm-hmm. Mm-hmm.

Chris: I like Rollup.

Dave: Yeah.

Chris: It feels like a loaded thing to say, but anyway.

Dave: No, I think it's good. I like it, too. It feels like Grunt versus Gulp, to me.

Chris: Yeah.

Dave: Webpack feels more like Grunt and Rollup feels like Gulp.

Chris: I kind of want to be like, I will give you $50 if you give me a repo that can process a Vue SFC with Rollup and leave the import alone, but don't actually do that because I don't want 10 people to do it and owe you all $50. You have to email me first. [Laughter]

Dave: Yeah. Email. Yeah, you have to claim it and then--

But anyway, I like Vue for a lot of reasons. I think if I were to design my own framework or component framework, it might actually look something more like React. It's very clever. It's very ingenious. The Reactivity model is awesome. I don't -- if you're using React, that's great.

Whatever. Not to cause too much hot drama or beef. I know we're trying to wrap up the show here. I feel like there's been some historic ignorance, sort of, or playing down of the cost of a whole client-side thing, a client-side sort of system. I think we're saying it now with server components, which we didn't talk about. We can talk about probably the next show or something like that.

We're starting to see the real world hit where it's like, "Okay. Yeah. This actually does need a whole server story," and stuff like that. Anyway, I feel like that's maybe addressed a little bit more naturally in Vue. That's just me.

Chris: Yeah. That feels fair. My opinion is that Dave is probably right in that it does -- you know, like your morals should play a role in technology. But I also feel like if you want to punch Facebook, I do. I'm mad at Facebook. You're bad.

Dave: Yeah.

Chris: You're bad. You do a bad job. Sorry. Pissed.

Then punching Facebook, the best way is to not engage with that at all because they're not a company if you're not there.

Dave: Mm-hmm.

Chris: But don't engage either, like, "Oh, this friend group wants to organize something. Oh, let's use Facebook." Be the friend that's like, "No. Let's do email," or let's do some startup or something that you like that can do the same thing to keep your friends organized.

Dave: Mm-hmm.

Chris: You don't even have to be the voice of dissent. Be the voice of, like, "I don't use Facebook and won't participate on your Facebook group, so here's an alternative that we could use there." That punch is a little stronger than, "What JavaScript library are you going to use?" in my opinion.

Dave: Yeah. Yeah, your JavaScript library choice isn't going to take bucks out of their wallet, which I think is the ultimate penalty and bucks off of the stock market. I think if you -- again, but the roadmap of React--and this this has been some criticism lately too--is controlled by Facebook.

Chris: Yeah.

Dave: Server components showed up out of nowhere by people who work at Facebook.

Chris: Yeah.

Dave: That roadmap, it's a product built for Facebook. If it meets your company's needs, awesome. But it's a product built for Facebook and they control the roadmap.

Chris: Yeah.

Dave: If you want to change React, you either have to do -- I don't know how you're going to do it because they pay half a dozen, a dozen people to work on it full-time.

Chris: Yeah. I don't know what to say about that. Of course, this comes from the guy, me, who uses it in production and who has an Instagram account and stuff, so--

Dave: Yeah, yeah. Again, if you're using it, I think it's great. But if you're like, "Do I have a choice?" Absolutely, you do.

Chris: Yeah. Yeah. I feel that way about design systems, too. You know how React is for Facebook, which it is. Maybe they are aware that it's a bigger global thing than that and they're beholden to slightly more than that but, really, the motivation is motivation. It comes from a place, you know.

Dave: Mm-hmm.

Chris: Sometimes design systems are like that too. They're like, "Look at our amazing design system." You need to understand that's for them, not for you, even if it's open source.

Dave: Mm-hmm. Yeah.

Chris: There's some where the motivation is different. I even feel like Bootstrap is in this category. It's not for anybody. It's for you.

Dave: Yeah.

Chris: That motivation is aligned correctly.

Dave: Yeah. No, I mean Bootstrap started for Twitter internal apps. You know? (Indiscernible)

Chris: Isn't the story of that like kind of?

Dave: Internal app.

Chris: Yeah, it was for internal apps, kind of, is what I--

Dave: It just got picked up. Yeah, and then--

Chris: Right, and it's not anymore. I think that story is weird. Isn't it still on NPM as Twitter Bootstrap, which it just feels like one of their weird stories in tech where that honestly doesn't have a hell of a lot to do with Twitter. It's not.

Dave: No, not anymore. Yeah, well, and I think that's the best thing that could happen to React is it leaves the umbrella of Facebook. You know? But we'll see. I don't know.

Chris: Yeah. I don't know either.

Dave: That would be interesting. Anyway, hey, Chris, what a smashing show with only one technical difficulty. [Laughter] What a way to kick off the year.

Thank you, dear listener, of course, 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.

We're heading into a new year. We've got some new plans. Maybe new website and all that kind of stuff, so, anyway, stay tuned. We'll post updates over there.

Chris: Mm-hmm.

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

Chris: ShopTalkShow.com.