465: Linters, Delivering HTML in a Single File, Specialist or Generalist, and Social Image Previews
We're talking about linters, should we deliver single file HTML? Should you focus on a specific tool or be more general? And we revisit social image previews.
Chris Coyier and Dave Rupert
Time Jump Links
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--in the shed with the cool, new camera--Rupert and with me is Chris--in the booth, back in the booth--Coyier. Hey, Chris. How are you?
Chris Coyier: I'm doing good. Yeah, you got me on the new camera, the ZR-1, right, Sony ZR-1?
Chris: ZV-1. Sorry. Yeah, I picked it up because there were some compelling features of it that I thought were cool like the one cable USB connection to the computer.
Dave: One USB.
Chris: I'll tell you. It can get choppy for me, though. I'm on a Zoom call and they're like, "It looks like," [stutters]. Did you use the out-of-the-box cable? I meant to ask you.
Dave: I am using the out-of-the-box cable but I'm thinking about changing it up. I don't know.
Chris: What's the limiting factor? It has old-school USB. What do you call it, USB-A or whatever? I wonder if that's just a little slow and you could get a faster cable. But I also send mine through a hub. It's a good hub, but it's still a hub.
Dave: Is it three? Is it a USB-3 hub? That might be it.
Chris: Yeah, it's a USB-3 hub. It's a Thunderbolt hub, actually.
Dave: Okay. Okay. Well, that should work.
Chris: I don't know. I'm worried about the choppiness. Is it the camera? Is it the cable? Is it the hub? It's one of those hard-to-diagnose problems.
I like the camera, though. My favorite thing about it is how the zoom is really fast and good on it, so you can't screw up.
Chris: You back up two feet in your chair; it'll re-zoom on that and it looks good.
Chris: Yeah, it's just a good piece of equipment.
Chris: Thanks for that. It looks like crap. I don't have a good thing here in the booth, so you have to look at grainy me in the booth.
Dave: That's fine. But you know what? It's fun to experiment with this stuff.
Chris: Oh, yeah.
Dave: I think it's like shooting 4K, so that could be part of it, too. It's just doing a lot.
Chris: Oh, that's true. I wonder if you could notch it down to very good but not 4K.
Dave: Yeah. I don't know. I don't know.
Chris: To me, the whole point is zoom, basically, and an odd screencast here and there where the end result is just 1080p.
All right. I have some questions for you.
Chris: It came up this morning because I was working on it. I actually listened to a syntax where they did a bikeshedding one where they did all the things that developers like to fight about: vim or indented syntaxes.
Dave: Ooh, nice. I love to talk about that.
Dave: We should actually issue a correction because Wes said it's not the image previews that are causing his build times to be exploded. He actually just uses a serverless function, sort of like what these DPR (dedicated persistent rendering) - or whatever DPR means. Like on-demand rendering, he kind of does that sort of thing for his images. Anyway, I just wanted to clarify that.
Chris: Oh, so they don't even run during the build. They just run....
Dave: No, no, they're just kind of like they fire up. They load up. Then that just remains in cache while basically, the serverless function is running. Then it'll spin down and then spin back up.
Chris: We have some stuff to say to follow up about that, so we'll do that later in the show. If you have no idea what Dave is talking about, don't worry. We'll get to that. It has to do with social media previews, which I think is a fricken' fascinating topic.
Dave: Yeah. You were going to finish your syntax thing but, for me, I was like, "Oh, they're nice to have." But now I'm just like, "They're in everything," and I think you've convinced me of that. They are so fundamental to how people -- it's the front door of your website now. You know?
Chris: Well, and it's true if it's an app or not or if it's social media or not or if it's a game or if it's a conference. That's the thing.
Remember, we used to talk about application -- not prototypes. What's the cool word for it that somebody invented? It's not just websites and apps. There are like 12 different ones.
Dave: Style tiles. No. Platforms? No.
Chris: Like prototypes.
Dave: Oh, holotypes. Holotypes.
Chris: Holotypes. What a weird word. Sorry.
Dave: It was Jason Miller's word. Yeah.
Chris: I liked it, though, because it stopped -- it's sort of painting the Web. There are different types of websites but there are more than two, certainly. There are probably more than 12 also, but it just brought a little nuance to a conversation that could use it, I think.
Chris: Anyway, all those holotypes, it doesn't matter. They can all use a social preview card for a URL.
Anyway, again, there are some interesting developments to that to talk about. But in that syntax thing, one of their bikeshedding things, I think it was named exports or not named exports. Then they were talking about barrel files, like, do you use index.js files in a folder or do you just have a file called tabs.js or do you have tabs.js and an index.js file? [Laughter] Then the import gets cleaner or whatever.
Dave: Yeah, and how many times have you gone into the index file and it just says import tabs.js or whatever?
Chris: Well, our whole codebase does that and I actually like it.
Dave: You like it?
Chris: I'd say, I have files that often have zero or one, but a lot that have ten imports at the top of them.
Chris: Not terribly rare. Doesn't bother me. But it's one of those things where everything else, we impose so much structure around. We impose structure on tabs versus spaces and how far the indent is and where we put white space and what types of quotes we use and blah-blah-blah.
Dave: Semicolons. Oh, man.
Dave: My one linter, the linter on all my projects, I am a semicolon person.
Dave: But the linter on my project just rips them out.
Dave: I'm like, "It's okay."
Chris: It's okay.
Dave: Okay. Fine. Fine. We'll get through it.
Chris: Yeah. You better be right, you stupid linter.
Dave: [Laughter] Yeah.
Chris: Okay. I think tools these days, like Prettier, have changed the game a whole bunch. That's the big industry-standard tool that came along.
Dave: If you can set them up.
Chris: Sure. Sure. Do you do it? That's one question for you. Are you a Prettier liker or would you prefer that your projects just didn't have any crap like that so there'd be less BS?
Dave: I like it because I can't stand it when my coworkers don't put a space in between the function and the semicolon or the squiggly, the curly--
Chris: Opening space.
Dave: Yeah, especially in CSS or something like that. There are just certain things where I'm just like, "I don't care, but I would rather just mandate something." I think you kind of said that, like, "Let's just have something."
Chris: Yeah, and you can't just have a rule because then you're slapping people's wrists for really dumb reasons. And there's commit noise, too, which I hate.
Dave: For my.... Yeah.
Chris: To see a red and a green line because of space change before a brace. It's like, "Get out of here."
Chris: I hate that stuff. That's a strong word, but it's like, "Just use a code formatting tool and the problems go away." You can even do it in a pre-commit hook.
Chris: If you can't be troubled to configure it, and I think probably the "right answer" is to do both. It's to have it on save so you benefit from looking at nice code all the time, but no matter what anybody's build environment is like, it runs it before they commit. Then it's guaranteed to be clean. I like that. You're pro-Prettier, generally.
Dave: Pro-Prettier, style in ES Lint, sort of. Prettier is -- I forget.
Chris: If you had your way, you'd throw them all on there?
Dave: I'm using all of them kind of in succession and then on my Vue projects, Veeder is kind of the default.
Dave: Which is kind of a meta-framework for all those things. But it's Vue-specific rules, basically, for Prettier and ES Lint.
Dave: No. No. Actually, I think it doesn't.
Dave: It forces the template. Yeah. Yeah. But one thing it's really picky on is, like, "Oh, no. V4 goes first and then attributes."
Dave: You know, like attribute orders and stuff.
Chris: ...move them for you?
Dave: Yeah, it will.
Dave: I think the hierarchy is, anything that can be auto-formatted, let's do that. But then where the linter -- because I had one on style lint, and I was doing ampersand.foobar for a modifier class, like a nested modifier.
Dave: It was like, "Oh, unexpected selector," blah-blah-blah. You know something. I just was like, "I'm disabling it because that's what the CSS needs to be. It needs to be a compound selector. I know what I'm doing.
Dave: F-you, style lint. [Laughter]
Dave: I'm disabling that rule. What I like about that is all that disabling goes at the top, so you're kind of like -- but that was one of those rules they couldn't autoformat to.
Chris: Ugh. Yeah, okay.
Dave: When it gets into un-auto formattable nuance, I think, just let developers decide. Yeah.
Chris: Turn that rule off. Yeah, don't give me the squiggles because, if you can't fix it, I don't want to be bothered.
Chris: I just like it. It feels very modern and satisfying to me to watch my code kind of autoformat itself into good ways. Yeah, I like it.
Dave: Kind of gives you--
Chris: I can just be sloppy. I can paste and it's formats.
Dave: Can I give you my hot drama here?
Chris: Yeah, please.
Dave: You know how most of those linters formatters will wrap at 80 characters?
Chris: Yeah, and that's configurable. But yeah, tell me.
Dave: Eighty is wrong.
Chris: What do you like?
Dave: Eight is so wrong.
Chris: Don't say 120. You're fired.
Dave: 120, Chris.
Chris: Oh, God dang it. Dude. It's 120?
Dave: We use computers. You can scroll left and right on a computer. It's fine. But you're probably not. Eighty is such an outdated number. I'll meet you in the middle at 100, but 80 is too aggressive and 120 is probably just fine.
Chris: I have this 13-incher, though. I got the new M-1 to make sure that our dev environment works on it and stuff. The 13-inch screen, it can't play with your 120 games.
Dave: But you've got 20 hours of battery life to scroll left and right.
Chris: [Laughter] Yeah. Fair enough.
Chris: I put on line wrapping anyway, and what really bugs me is that when your screen is too narrow but line wrapping is on too, your HTML and things like a paragraph in it, they'll have one word and then a line break because Prettier is enforcing the 80, 120, or whatever it is.
Chris: Then line wrap is also on.
Dave: Yeah. Yeah.
Chris: It just leads to very awkward. I go in there and try to delete the thing and then it autoformats wrong. I'm like, "What is going on?!" I'm like, "Oh, yeah. You've got to stretch out your window a little bit here, Chris. Bring it out."
Dave: Yeah. Well, and you know none of those tools handle SVG at all.
Dave: [Laughter] The idea of an array of 900 numbers, they never anticipated that would be a possibility.
Chris: Anyway, so then I go work on a WordPress site and I don't know that there's Prettier for PHP. Correct me if I'm wrong, but is it to third-party? Do I trust it? I've looked at one-off PHP formatters because I'm like, "I don't care if it's actually Prettier. I just want something to do it for me," because I'm so used to it that it sucks to not have when I go back to a WordPress site. But even then, Prettier does have HTML.
But a lot of times I turn it off because there's something that's hard to trust. Like white space does kind of matter in HTML, it has to make hard choices about what to do, and it doesn't have all the information it needs to do it. So, I don't know.
Chris: Once in a while (in JSX) you'll see things that are probably annoying to some people, like a curly brace with one space in it. The idea is that this allows us to autoformat the code but maintain that space character. I'm sure you're not making a good face about this.
Dave: You'll have to -- yeah.
Chris: If you have a line break like a closing div and then another closing div, it won't let those sit side-by-side in JSX. It'll put the one down onto the next line because it really wants to autoformat the HTML for me. But what if you need a space between those things? There is no white space in it when it compiles. So, if you need a space between two closing divs, you have to put curly bracket quote space quote curly bracket.
Chris: Whoof. Anyway--
Dave: I'm sorry.
Chris: [Laughter] I don't know how Vue does it, but it's not like that, apparently.
Dave: Wow. That's one of those things where it's like clearly, you're doing a workaround for the framework, so it's fine. I'm sure it's fine.
Chris: That's ES linty stuff helping you out. That's great.
Dave: Right. Right.
Chris: You know I have the new Axe one installed. If you put a click handler on a div -- God forbid. Please don't do that a lot, but sometimes the world is weird and it'll call you out for that. It'll be like, "Hey, what are you doing?" All kinds of stuff. It's pretty cool.
Dave: That's cool.
Chris: It's good.
Dave: I like that. Nah.
Chris: Here's another one. This is where I was trying to build up to is all those import statements at the top, the ten of them or whatever, you can have an ES lint rule that yells at you for how you format them and order them, which is a little much, I feel like, because it's like, "Who cares?" You know?
Chris: I've gone from, "Okay, here's our little established order. You put the stuff from NPM at the top and then your other components. Your style is at the bottom and you have little rules, but nobody fricken' follows the rules - myself included sometimes. It makes noise in the commit.
All this beauty that you've bought through Prettier and autoformatting, it's all out the window with your imports at the top. It feels like this missing piece of the puzzle. You could put the rules in ES lint, but then what can format them? Well, it does have a fixed rule. You can tell ES lint not only to bitch at you but to fix your crap too. I don't think people use it as much as they use something like Prettier and Prettier doesn't play this game, so you can't tell Prettier to do it. But you can tell ES lint to do it with a command-line thing, so you could put it in your commit hook or something like that.
Chris: There is a VS Code plugin that does a pretty good job of this, so it brings Prettier-like autoformatting to your import orders and it's really nice. You just hit save and it just goes [blap] and they all just go into the right order. That satisfies ES lint's rule too, so it's a pretty happy combo. It's just that the VS Code plugin is a little bit more opinionated than ES lint is.
Chris: And it doesn't have the tools to run across the whole codebase like ES lint does.
Dave: Ah, yeah, yeah, yeah.
Chris: You're in this position. If you decide to adopt it that there's going to be commit noise for the next six months of people saving files.
Dave: Yeah. Well, on that, man, you kind of -- because you're probably -- in a perfect situation, somebody is able to be like, "Everyone, hold off on commits. I'm going to mess up the repo today. I'm just going to power through. Put on some music. Do some grunt work."
In the real world, you have branches off of branches kind of happening, and so that's going to create all this merge conflict later when all that stuff tries to merge in, so it's just kind of unfortunate.
Chris: It is. But anyway, I just wanted to see where you landed on the autoformatting stuff and where you draw the line.
Dave: I would love a solution. You know what gets weird? There are some things where you import. I guess it's weird with require still around, but you'd import. Then you'd chain together how to use it, like child process spawn or something like that. But I guess with modules, it kind of -- it's maybe cooler because it doesn't matter. Am I right in that? Is execution order ultra-important? Can I put React DOM over React in my import?
Chris: As far as I know, it's 100% irrelevant, the order of your imports.
Dave: See. That's kind of cool. Yeah.
Chris: I think that might change with top-level await and stuff. You can't put an import after your first line of code that has actual logic in it.
Chris: You know.
Dave: Yeah. Yeah.
Chris: I do kind of like the willy-nilly. Another way to handle those imports is just to go willy-nilly. Just to be like, "I don't care. I'm just going to do nothing. Import whatever you want at the top. Who cares. Just nobody touch it. Nobody go in and format somebody else's imports because of how you like it. That's just unnecessary noise."
I feel like it's one or the other. Have a tool do it or just shut up about it.
Dave: [Laughter] I think there is -- yeah, I mean, two, if you're thinking of it as like an index of what this file uses, maybe it makes sense to put it at the top. I don't know. But you'd never do that in C. You import stuff in C all the time. You'd never be like, import alphabet one.
Dave: Or alpha, beta. You wouldn't do that. You'd just import what you need, so maybe that's just no-man's land, kind of.
Dave: I don't know. Unregulated territory.
Chris: I mean there are so many more opinions, like, how your Veeter is organizing, basically, attributes in the template. You can do it that way.
Chris: You can have all attributes be ordered if you want, alphabetically, blah-blah-blah.
Dave: It's really wild what it gets upset about. [Laughter] But what's nice, in Vue specifically, is you have so many different style of attributes. You have attributes. You have v-attributes. You have :attributes. You have @attributes. You have #attributes. It kind of handles it all pretty well. I'm pretty well pleased. The only thing that doesn't get me is when it drops like a closing bracket around a word.
Dave: It doesn't put the text in the middle. That drives me a little wild. I'll manually fix that sometimes.
Dave: But, yeah, sometimes -- I don't know -- closing brackets seem to confuse the hell out of these auto-formatters quite a bit.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by CMS Hub by HubSpot. Maybe you know HubSpot as a CRM. It is that. It has a bunch of different hubs (hence HubSpot). [Chuckles]
There's a marketing hub, meaning lead generation and automated marketing type stuff. A sales hub, which is the CRM. It does stuff like schedules meetings with your leads and provides quotes and stuff.
They have other hubs, but CMS Hub is what we're talking about. It's a content management software that's super flexible. You can build whatever you want on it. In fact, it's like any other CMS. You work locally using whatever tools you want and then deploy to HubSpot, so it's your host and it's like a framework for content.
What's cool is that the CMS part of it is tied to the CRM parts of it, meaning that you can build a website that people log into and use in that way. But then you're also customizing it because you know who they are and the fact that they're a lead and you know some information about them. You can customize the website around that. That's pretty darn cool.
This is an interesting example. They have a real estate site where normally you think of a CRM as people in the CRM. But in this case, properties are the things in the CRM, so like 123 Elm Street - or whatever. That way, the website (powered by CMS Hub) is grabbing that CRM data and making a website of real estate listings. But the real estate listings are in the CRM, so you're gathering leads on it, like Julie wants to go see the property at 123 Elm Street. I think that's just a really cool and interesting idea.
It's loaded with other built-in features, like this is pretty advanced style hosting. They have serverless functions, for example, which is a pretty modern, cool idea that I use all the time. It has membership management in there. Again, these are websites you log into, not just brochure sites or whatever.
There's search built in, for example. You don't have to reach for some third-party search. They have got search handled for you with it.
That's all I'll tell you for now. That's CMS Hub by HubSpot. Thanks for the support.
[Banjo music stops]
Whatever. Ludwig. What do you think? Ludwig, if you're accomplishing everything you need to do with your website by delivering some static HTML in the browser, you're doing it right, so don't worry about it.
It feels a little fist-wavy, though, Ludwig, so I'd hold off on that. If you're getting done what you need to get done, you do what you need to get done, but it doesn't mean that everybody has to get off your lawn. You know?
Dave: Yeah. I would say yeah. I think there's a bit of a pendulum swing away from SPAs, in my opinion. There's a lot in server-side stuff that is very awesome, like pages are rendered. You don't have to download extra files to render the page. It's awesome. A lot of these single-page app frameworks are kind of bending over backward to get some kind of server rendering shoehorned into their client-side framework.
Dave: Because they realized there's a performance problem. Now, it's just this jumble of complexity trying to get these frameworks to work. I think there's a pendulum swing back that we've talked about, but we can't show it.
Chris: It may be already back.
Dave: We've talked about astro.build.
Chris: But that's how Next works out of the box, and that's how Nuxt works out of the box. And that's how Gatsby works out of the box. The pendulum has already swung. The end result of working in these fancy frameworks -- I haven't seen a new, fancy framework that's client-side only in a hot while.
Dave: Redwood, maybe. [Laughter]
Chris: Oh, yeah, that does assume client-side, doesn't it? They're like, yeah, we'll do server-side later.
Chris: Sort of... I guess.
Dave: Yeah. I just think the pendulum has kind of swung back, and you may even -- like, what's old is new again. JAMstack is real hot right now. But eventually, somebody is going to be like, "You know what? We could just use a database," and that's what we'll do. You know?
Dave: We'll have a database and maybe that's the future. I just saw the other day SQL JS. Somebody took SQLite, compiled it into WebAssembly, and now it's on--
Chris: Sick. Really?
Dave: It's a file that sits on your server.
Dave: Like a DB file that sits on your server that you can read and write to from, like--
Chris: WebAssembly, dude, it's cool.
Dave: That's next level, and don't just be like, "That's it. I'm going to build my whole next business on that," because SQLite has big issues. [Laughter]
Dave: You find out real quick the lite part is very restrictive in SQLite, but it's pretty cool. If I'm just spinning up a side project and I want you to save little documents, like flat files or little whatever metadata documents, a bookmarking website, or something like that.
Chris: Yeah, but you need to do it with a relative database, not just KV.
Dave: Yeah. Yeah, so I could do a user table, but that would be kind of dangerous. But anyway -- [Laughter]
Dave: That actually freaks me out.
Chris: Well, it depends on what the use case is. I mean you could be designing this thing to be installed on one computer that runs on Electron that they use on a ship in Antarctica that doesn't even have Internet connection or something.
Chris: Then is that the right answer? Yes, it is. Well, maybe.
Dave: But maybe we'll do Web components. Hey!
Chris: Hey, maybe. Yeah, there's always stuff to look into. I just find the question weird that's like, "I'm doing things in a way that feels old to me but I'm happy. My clients are happy. I'm productive." Then they're like, "But am I doing it all wrong?"
It's like, "No, you're not." [Laughter] "You're good."
Dave: I think I worry about that, too, sometimes. It's just like, am I keeping up with the times? Am I employable still? Stuff like that. It gets into all those questions.
Chris: Perhaps this is related, so let's just do the same one from this anonymous fellow who is working at an agency of ten. He's the only developer. This is like a new fascination to me of companies where you're surprised to find out what job there's only one of.
Dave: Yeah, a WordPress shop where there's one WordPress developer.
Chris: Yeah. What are the rest of you all doing? I'm sure there's lots of work to be done, but one out of ten? Hmm. Strange.
Yeah, it was a pretty big company. I was surprised that it had one front-end developer and eight people on content creation. I was like, hmm, interesting. Not that it's the wrong choice.
Dave: Don't throw Netlify under the bus.
Dave: They just were on last week, Chris. [Laughter]
Chris: No. I don't think anybody -- do they have a full-time content person? They definitely don't have eight. That seems like a lot of people that are good devs and doing some content.
Anyway, one out of ten, a developer. They use ACF a bunch. Whatever. Giving a little background. He feels a little stuck.
Okay. That's why it's so related to the other one. You know? To some degree, I like it when people are really hardcore specialists in one kind of thing and that your mind churns in how can you solve it with this tool that you're already really good at using that tool. Even if you force that tool to do something that is a little bendy for it, perhaps, you're still being efficient with your time and sharpening your tool for future things and stuff. It doesn't bother me when people are experts, deep experts in one particular tool. I don't want to say, "Don't learn anything else," because yes you absolutely should learn other things, but I do kind of like when people double-down on one particular tool and get really good at it, especially in an agency setting where you're trying to extract cache. You're trying to build sites fast and well.
I just talked with an agency just specifically about this. They built a very fancy internal design system, not just componentry but had deployment, and it had its own caching layer. It just had everything and they named it. There must be hundreds of people at this company. They've now converted every single production site they've ever done to it - a huge, monumental task.
Chris: The whole point is, now -- and they only build a certain kind of site. They only do kind of like lead generation kind of sites for products - super niche.
Chris: So, they can just crank these out. Then they learn from it because they do SEO work, too, and lead conversion work. They can be like, "Well, this form does better when it's like this, or we remove this one field," or whatever. That's a component that can change the component in the system and roll it out across all sites when they've proved that it works better.
I was like, "That's great!" The thing is, they're just so doubled-down on that tool. For them then to change, even this anonymous person is like, "I want to learn Gatsby, I think. I'm sold on the promise of speed and the GraphQL layer and stuff."
This company, they're not switching to Gatsby. They're too deep into their thing that they've built that they can't then change.
Dave: I think there is a thing of being too deep. But yeah, I think, like what you're saying, how can this be done with WordPress? I think that's a great question to ask.
There are times. We throw around, "The right tool for the right job," or whatever, quite a bit. But that has no parameters, right? [Laughter]
I had a client who kind of had a WordPress and then it just grew and grew and grew. A membership platform, education platform, kind of all shoehorned and stuffed into this thing. It's good. It was working. It's making money, but it's just insufficient for their needs. It has gotten to a point, it's way unmanageable. They got version locked on Stripe by the payment plugin they were using and stuff like that, which is no longer supported, and so the payments are tied.
They need to switch something up. They need to change it.
It's easy to say the grass is greener, like, "Oh, if I just switched to this framework, my whole life would be better." I think you should try it. But again, try it on your own stuff, your own time, before you promise the world, like, "Hey, we can do everything better, faster in Gatsby." You've got to have some assurance on that and some skill-chops before you do that because I know those people are probably worried about how fast you can get them done and stuff like that.
Maybe you just pitch for a very small site. "Next time, I would like to try this, and it's going to--" whatever.
Chris: Oh, there you go.
Dave: Reduce overhead, and we won't have those problems. You list all the problems you had with WordPress, like the white screen.
Dave: Whatever. "It won't have those problems." Just say that. Just try that. Maybe they can still use WordPress and keep doing it how they do it and you're just using that GraphQL endpoint or something like that.
Dave: That works. You could also take a horizontal move and go to something kind of cleaner, better user experience like Craft. Kind of move one step over, or just different. Craft has a bit more of an enterprise vibe just from what you can do with it.
Chris: Yeah. Yeah. Yeah. I definitely like that. I see so well why Craft clicks with so many people. I shouldn't say that because I feel like I'm not that in your brains, but the part that maybe clicks -- I hope I'm right -- is that it basically asks you to model your data upfront.
Dave: Mm-hmm. Yeah.
Chris: You're like, what kind of site am I building? What kind of pages do I need? What kind of data is on those pages? You model that up. Then when you're done doing that, I can imagine it being so satisfying, being like, "I have this CMS now that almost feels custom-built to the type of content that's going to be on the site."
I don't know if that's the top-selling feature, but I can see that feeling very appealing to people that make sites in that way.
Dave: Yeah. It's the classic WordPress, like, everything is a post problem. [Laughter]
Dave: Like, everything is in the post table. If you want to find one post, you have to go through 17,000 different post types - or whatever.
Chris: Yep. Yep.
Dave: Every single thing has its own table and that's a strong thing.
Chris: True. Yeah. Yeah. WordPress knows this, and I think they've pointed at themselves sometimes, like, if that's not -- if somehow that database model is totally untenable for you, then that's the case that WordPress isn't right. But careful in throwing that stone before you really know that, right? Like, how often have I found the database structure of WordPress particularly limiting in my career? Never-ish.
Dave: Right. Right.
Chris: But I'm a front-end guy, so there's that.
Dave: But it's like -- and I think WordPress knows (down to the millisecond) the performance of a one million table of MySQL, like a one million row table of MySQL. They know that stuff.
Dave: They would change it if it was actually a ginormous bottleneck for them. It's just, from a developer perspective, you're like, "Oh, it's weird. I have to -- I basically make this weird rule true in advance custom fields just to get the job done," as opposed to coding up a second model.
Dave: I'm hacking the first model, as opposed to just making a new model.
Chris: True. God, we go off on tangents, don't we? I love that. That was good.
Dave: That question was about grocery shopping.
Chris: Yeah. [Laughter]
Dave: [Laughter] Trader Joe's versus Safeway. I think we covered it.
[Banjo music starts]
Chris Enns: This episode is brought to you in part by me, your ShopTalk Show editor Chris Enns. Rather than me telling you all about what I do and how I can save you time editing your podcast, I thought I'd let my clients talk about the thing they most enjoy being able to do, since they hired me to edit their podcast.
[Film leader blip]
Male: All right, Chris. How are you, sir? I notice that there is sound effect to start and a soundbite from my guest, so we'll pause for that. Three... two... one...
[Film leader blip]
Chris: This is going to be a tough one for you, Chris, Enns. Sorry about that. Do what you can.
[Film leader blip]
Dave: Okay. I'm going to dive into Web components. I just think it's [dog barking]... That's a good sign. [Dog barking] We'll let that pass, and we'll edit this out.
[Film leader blip]
Adam Argyle: Um... Ooh... [Dog continues barking]
Dave: Oh, that's my dog. I apologize.
Dave: We'll fix that in post. [Laughter]
Adam: Doggie thinks CSS3 should be a thing. All right.
Dave: No, he's big into CSS4. [Laughter]
[Film leader blip]
Chris: It's just the way it is. But you sound good, Dave. I wouldn't worry about it too much. Plus, we have the masterful Chris Enns on audio engineering.
Dave: I flew him down from Canada to sit by me. Oh, and a mixer. [Laughter] He's working on a mixer, live, right now.
[Film leader blip]
Male: And, oh, man. Chris, just erase that last part. [Laughter]
[Film leader blip]
Male: You know Chris edits this thing too, right?
Male: He does.
Male: He's got a heavy hand with his edits. He makes us sound really smart.
[Film leader blip]
Chris: Chris, let me just find this word.
[Film leader blip]
Female: Sorry, Chris.
Female: Chris is our editor.
Female: Whenever we're just frustrated with something, we just blame Chris for it.
Female: Just like our imaginary friend.
Male: Imaginary. Yeah, blame Chris. That's good.
Female: I'm so sorry, Chris. We love you. [Laughter]
[Film leader blip]
Male: Chris, we're going to now have to make this [laughter] and explicit episode.
[Film leader blip]
Male: Chris, have fun with this episode. Ha-ha-ha. [Laughter]
Male: [Laughter] Yes.
[Film leader blip]
Male: Chris is so good at editing that [laughter] it just doesn't make sense for me to do it. Yeah, we'll just send it to him.
[Film leader blip]
Female: But if you have any moments, too, where you're like, "Oops, I just misspoke," you can always just say, like, "Chris." [Laughter]
Female: Okay. Thanks.
Female: Please, Chris.
Female: Please, Chris, help us.
[Film leader blip]
Female: Our editor will figure it out.
[Film leader blip]
Female: I would tell Christopher Enns, [laughter] our sound guy, to take this out.
[Film leader blip]
Male: Nope. That's not the way it works.
Male: Um... Chris, will you go back to David and edit that part out? I'm going to start over.
[Film leader blip]
Male: Am I pink or you pink?
Male: You're pink. [Laughter]
Male: [Explicit] I totally [explicit] that all up, didn't I?
Male: It doesn't matter. That's why we have Chris.
Male: My bad. Chris, sorry about that.
[Film leader blip]
Male: Sorry. You'll have to cut this out, Chris.
[Film leader blip]
Male: Delete everything we just said, Chris.
[Film leader blip]
Male: Thanks, Chris. You're cool. Bye!
[Film leader blip]
Chris Enns: So, whether you've got a weekly show that you want help with or you want to do a ten-episode run of an idea you've got, get in touch with me, [email protected]. And be sure to mention hearing this ad on ShopTalk Show for 50% off your first episode.
[Banjo music stops]
Chris: Here's two kinds of hiring that I'll throw at you. Let's say you're out there and you want to build a shed in your backyard.
Dave: Got it. Done. Yeah.
Chris: Do you hire a company that specializes in building sheds or do you hire a company that they're just good builders, overall, and they can build anything?
Dave: I hired a company that specializes in sheds. [Laughter] 100%.
Chris: So, if you kind of know you need a WordPress site, do you go to the WordPress shop, or do you go to the Craft shop if you were building whatever? Or do you just hire a generic agency? I feel like that might be poignant for you because I think of Paravel as being hirable for large-scale projects but the tech is almost irrelevant. I've seen you get dragged into some pretty unfamiliar, weird tech, and you don't mandate what that tech is, generally.
Dave: Don't mandate that. Yeah, so I've used Java, Chris.
Dave: I don't know, man.
Dave: And .net. When I made the Microsoft website in 2012, they sent me a laptop or we bought a laptop at BestBuy. [Laughter]
Dave: Then they sent me a keycard reader that I had to plug in. Then I downloaded Visual -- I authenticated in with a badge card, like a plugin card. Then they gave me Visual Studio, and I had to compile.net, like XML crud to make their website. It was just like, "This is so foreign to me," but I can see where my templating language fits in here, and so I was able to do it and -- whatever -- hit an endpoint to get whatever data I needed. I could figure that out, but it was the same with Java. Java is kind of the same thing until you realize, "Oh, it's broken." Then you need somebody who actually knows Java. Yeah, I don't get to choose the platform, really, so that's weird.
Chris: And so, does that make you--? I think you're an incredibly strong developer. Does that fact that you've had to touch so many different technologies make you stronger in that you've seen so much stuff?
You used to be kind of a Rails guy. You probably still are to some degree.
Dave: I love Rails. I don't use it, but yeah.
Chris: Sure, but let's say you did nothing but Rails for all these years, since you were a Rails guy. Your knowledge of how that framework worked would be, I think is fair to say, a lot stronger.
Chris: What does that make you? Then if I had a Rails problem, you're sure as hell I'm going to come to Dave because you're an absolute expert in it. Or is that not fair? Should I come to you anyway because you've seen so much other stuff out there that you could diagnose whatever my Rails problem was because you just know how computers work?
Dave: I'm more full-stack in the sense of, like, I understand how the computers work and I know how the HTML works - good. If that makes sense. I understand just general computing principles, and I have a broad exposure to a lot of those. But I do think there's a generalist thing.
Dave Rupert does not have a lot of single-page apps out, [laughter] you know, out in public. I've built quite a few, but I don't have a lot out in public. Part of that is just the curse of being a generalist. I don't just sit there. My React jobs are like nothing because I don't just sit there and work on a React project every day.
Dave: You know? I mean right now, literally, I have two Nuxt projects and an 11ty site and, yeah, a big design system that was being integrated into a Java framework. Those are the three, four projects I have worked on this year.
Dave: It's wild. It's just different.
Chris: I think what I was pointing at is an almost interesting disconnect between if I'm hiring a shop or a person to do some very specific work, I kind of want the specialist. But if I'm the person hiring for my company, I might prefer a developer with more broad experience that's seen more, than they said, "Oh, I worked on this one design system for 15 years," or something. "That's all I know."
Chris: "I have no other experience besides that." That's almost like a weakness or something. So, there's some disconnect there. I don't know what to say about it.
Dave: We were building a -- I don't know how much I can say about this. Let's just try. [Laughter] We were building a progressive Web app for Windows Insiders. Projects kind of come and go, but we brought in a specialist, Eduardo San Martin Morote, who is on the Vue core team, to kind of help us with this Nuxt project and just make sure we had a good setup.
Dave: It was very helpful to us just because it was like, "Okay, we have this and a couple other irons in the fire. But at least we have an expert, a specialist, on this project."
Dave: That helped.
Dave: Having a specialist is -- I don't know -- like an insurance policy (is probably the wrong word). It's like, well, at least we know there's a certain quality.
Chris: Yeah. Yeah.
Dave: If the generalist comes through (me, in this situation) and coughs up code barf, he can say, "Oh, there's a better way to do that," or something like that.
Chris: Yeah. Yeah.
Dave: I think that's maybe where, for me, specialists and generalists work together.
Chris: Yeah, that's nice. I'd say it's not like super common, but we do it at CodePen pretty regularly; hire somebody as a contractor to even do what you're doing. "Can you just look this over? How are we doing?"
Chris: Did you see any obvious foot guns here or anything weird?" We just did it with Elastic Search specialists.
Dave: Really? Yeah.
Chris: We know it, but how well? Nothing compared to somebody....
Dave: You did it. You got it up.
Dave: But you now know, oh, it's persnickety enough. Somebody can put 15 minutes at it or 15 days or whatever, and it's way different.
Chris: Yeah. Look at some logs and be like, "This one is overworked. Why didn't you just split it into two little ones?" You'd be like, "Because I had no idea that that's a thing."
Dave: [Laughter] Yeah. You might be surprised, but I don't look at logs.
Dave: Elastic Search....
Dave: That may come as a surprise. Yeah, I love--
We're working with a company. I was doing charts, charts and graphs, ChartJS, building charts and graphs. It's like a big thing, but it was like, "I'm doing an okay job, but if you're going to be a charts and graphs company," and these are super important, "we could spend a lot more time on this. We could specialize in this. We could chuck more hours at this if you want to be a charts and graphs company," which maybe they did.
I think that's the sort of critical part is, what kind of company are you trying to actually be? Paravel, are we a Nuxt shop? Are we a Vue shop now? We kind of are. We have enough stuff, so we might need a Vue specialist at some point just because we're starting to do this work more seriously.
Chris: Let's circle to the social images thing because I promised we would. We talked about it in a previous episode. The idea being that, you know, those little images that show up when you tweet something or share it on Facebook. I see them in Slack or when somebody iMessages me. They unfurl a lot to have that image in place. It's massively important. You know? Just so many people see it compared to any other image. It might as well be awesome. It might as well look great and really compel people, not to mention that it turns the click target of your link into about 100 times what it was before.
Dave: [Laughter] Yeah.
Chris: They're kind of a big deal.
Dave: Do you remember back in the day, pre-Web times, where you'd work in a shop and marketing was sending mailers to people, like postcards of stuff? You'd send postcards to people, and they would open it up and call you on the telephone. That was hooked up to their wall. That's how it used to work.
These things are like that now. They were ubiquitous. This is your, like, "Hey, visit my website postcard."
Chris: Mm-hmm. Mm-hmm.
Dave: It might say, "Welcome to Texas," or whatever.
Chris: Yeah. Yeah.
Dave: And have bluebonnets in the background, because it's just that much of just a critical piece of your website.
Chris: Critical. Critical. Is it important for your podcast landing page? Yeah. We should probably get on that.
Dave: We should probably get on that.
Chris: Is it important for your blog? Is it important for your video game landing page?
Chris: Is it important for every kind of website holotype there is? Yeah. Another interesting part about this is that it isn't just like for some subsection of websites. It's kind of everybody should think about this, which is why it's cool.
Anyway, we've already talked about this in an episode and talked about dynamically building them because that's such a big deal, too. Websites are often at different -- have lots of URLs and the different URLs should probably have different social media images, one blog post to the next, and daverupert.com deserves a different social icon. If it's a conference, maybe you just have one. If it's a video game landing page, maybe you just hand-build the one.
But if you're GitHub, for example, I think people have probably been seeing these. GitHub has new, dynamically generated ones that are really nice that are dependent on if it's an issue or it's the homepage of the repo or if it's a pull request. Whatever it is, they're dynamically generated.
How are people doing that? GitHub does it because -- I don't know -- they're huge. They have unlimited developers and resources. So, I'd say I don't even care how they do it.
Dave: Yeah, in theory. Yeah.
Chris: Yeah, in theory. I'm sure there's one person on that job.
Dave: The details on how they did it is like, "Oh, well, we have 8,000 GitHub actions that automatically...." You know?
Chris: Right, right, right.
Dave: It's like, yeah, yeah, yeah. Stop. I don't care. [Laughter]
Dave: But how does the ol' Dave Rupert do it? That's what I want to know.
Chris: Right. Right. Right. There are ways. People have been writing about this forever. They have lots of links.
But since we talked about it, there are two. I got two or three emails from people, like, "Oh, you got me thinking about this. Look at how I did it." You know?
Chris: There's an interesting connection between last week's episode, too, where we talked to Phil and Jason about on-demand builders at Netlify. Now, one of the ways that's compelling to me about templating these type of images is that you can do it. Wouldn't it be cool if you could do it in HTML and CSS? Lay out the card and then that card becomes the social media image.
Now, you can't link to a .html file in the metatag. It's not going to render. It's got to be a JPEG or a PNG, pretty much. I don't even think you can do WEBP. You definitely can't do SVG.
Dave: Yeah. You can't.
Chris: Yeah, you've got to do an old-school image format. But guess what. You can turn HTML into PNG, as long as you basically have a Node server. There are probably other types of services that can do it, but Node is just extra easy at doing it because of Puppeteer, but there are even other libraries that can do it. Draw it to a canvas and then pull it off. There are always little tactics, you know?
Dave: Totally. Totally.
Chris: Here's one by Simone Griggs. This predates our conversation, but it was kind of cool the way they did it in Gatsby. Gatsby has a gatsby-node file and they have a special URL and the URL has the template and kind of does the trick. The post is very Tailwind specific, which is kind of irrelevant to what's going on, but so be it. That's cool.
The Netlify on-demand builder is particularly interesting because those can run Puppeteer and it means that they're not part of your build process. You don't have this -- you know you have 10,000 blog posts on your site -- or whatever. That would be a lot of blog posts. Say you have 200. That's still going to take time to build every one of them. The Netlify way then would be that you don't. You just don't build them. You just let the route to that social media image be on-demand, and it just gets built when it gets built.
Chris: It'd be almost cooler. They almost deserve more longevity than that, but I hate to push and break every one of your social images. But hey, so be it.
Dave: Well, I think this is the git-er-done approach. You're a little bit dynamic. Oops. If I made a mistake, I can just upload a new script and it'll get rebuilt eventually.
Chris: Yeah. Good enough, and it's better than in your build process, so there's that.
It was Lee Reemsnyder here wrote one specifically about Puppeteer and Netlify and on-demand builders, so we'll put that in the show notes for sure. It was so cool that they just were like, "Ah, that should work," and wired it up (between last week's episode and today), so that's cool.
There are so many other things that do this, but they tend to be centered around, you know, I have a build process locally and in the cloud, and I'm going to utilize that build process, whether it's Travis CI or GitHub Actions or whatever it is to build these images during that, or I have access to a cloud function and I'm going to build it during that - or something.
There are a couple of other approaches. Another approach is to use some third-party service that gives you a URL for them. Then it's a matter of getting the URL right or hitting their API in the correct way to generate these things. I think it's kind of a little -- it's not uncharted territory. It looks like there are a couple of startups and people working in that kind of direction. But it's like, are they--? I don't know.
I've definitely seen some of these that's just like, "Log into the app. Build your social media card. Then download it." You're like, "Oh, that's nice," but that doesn't help me at the last mile, like, at all.
Dave: Yeah. Yeah. I want -- [laughter] that's the part I have trouble with, like, getting it into my project, uploading it, maintaining it, referencing the URL, and stuff like that.
Dave: I want that automatic.
Chris: Right. Right. It seemed to me that big CMSs should absolutely have this. If you're Drupal, Drumla, WordPress, Craft, and stuff, shouldn't this be--? It feels almost like they're behind.
Chris: This is table stakes stuff for a big CMS to have and they don't.
Chris: But the problem is, it's a little hard because these CMSs are traditionally PHP, not Node. Node makes this easy. PHP does not make this easy.
Anyway, I got one up on CSS-Tricks. It's pretty neat. It uses PHP literally, the raw language PHP, to create, to craft these images.
Dave: Wow. You're using Image Magic to crunch them?
Chris: No, not even Image Magic.
Chris: Image Magic would be a luxury, I think, in this case.
Chris: This is not my work. It's Daniel Post who put this stuff together. There'll be a link to that, too. PHP has this internal API called GD.
Chris: I don't even know what it stands for, but it's kind of like canvas-looking instructions, like move to these coordinates, draw text with this font here, and stuff. But it's full-featured enough that you can do pretty cool stuff with it.
Dave: Make a design. Cool.
Chris: But what means to me is, like, that's neat. Good job. But I almost want to use a service or something only because I want to maintain what these look like and I want to build them myself with HTML and CSS. I don't want to learn GD to make a fricken' social media card.
Dave: How cool would it be if your WordPress theme came with a social media card template, too?
Dave: And an array of options, too, right?
Chris: That! In a WordPress theme right next to your single.php is social-card.php, and that's where you template it out. You save the title.
Dave: The plugin that gives you 40 options.
Dave: Then you go, "That one. Hipster. I'm choosing hipster."
Chris: Yeah, that one. You could even pick (on a per-post basis) variations of it or something. That's pretty close to what Daniel has done with this social -- I'll link it up -- socialimagegenerator.com. It's specifically for WordPress. There's a bunch of templates. But again, all the templates are GD. If you're like, "This one is close, but I want to move this over here," it's like, "No, you can't."
Chris: You can. You just have to code one up yourself. I got involved with this because I wanted it, but I already had a design in mind, and so Daniel helped me code up my design, which you can just do as a filter in WordPress. It's fine. It's just, I look at that code and I'm like, "I get what's happening here, but I'm not going to maintain this."
Chris: This is either just going to work or I'm going to rip it out.
Dave: My thought, too, was like, it might be cool if you could so SVG and pass parameters to an SVG or something.
Chris: Oh, yeah, buddy! Yes.
Dave: Then snapshot that, like canvas.
Dave: Or SVG to PNG or SVG to canvas to PNG, I guess it'd be.
Chris: Yeah. There are even libraries that are just SVG to PNG, and they don't require all of Puppeteer to do their thing.
Dave: See, that might be kind of cool, right?
Dave: Anyway, that would be kind of neat.
Chris: What I like about SVG is that it asks you to be more composed about what you're doing. It's like, "Make the overall size of this thing X by Y."
Chris: Because that's what social media cards are anyway. You don't have control over the size of them. They say, "Make them this size, please."
Chris: Then you do that in SVG and then you place things on the SVG, so you're already in the right mindset of, like, this isn't an HTML document where things just flowy-flowy everywhere.
Dave: Yeah. There's text anchor bottom to even just stuff there that you already have.
Dave: Yeah. SVG would be cool. My dream, too, would be, can I just spit out a page with all my posts and all my little cards, just to get a 10,000-foot view of how I'm doing on the social branding front?
Dave: Then hot-swap my custom ones in there too to be like, that's a really special one. That would be cool.
Chris: Exactly. Yeah, you need some kind of override, too, don't you? Because you're like, this block is--
Dave: That would be Dave Rupert's picky choice.
Dave: Just like if I want to establish a vibe, it would be cool to be able to do that. Yeah, I don't know. This has me thinking. There's so much, too. There's like GitHub stories and stuff like that. Not GitHub stories. [Laughter] Like Instagram Stories and stuff with a different portrait format, too. Wouldn't that be cool? While you're doing that, you just created the story card. Now you just Tweeted it out. You know? That would be cool. Why not? That should be more free. I don't know. Right?
Chris: Yes. All right, well, do you got any other thoughts for this week here, Dave?
Dave: No. No more zingers here. I've been busy, so sorry if I've been quiet in the socials and the blog and the [techno voice] Discord. But you know. I'm getting through a season, but we're getting through this season here, so.
Dave: Yes, sir.
Chris: Dave mentioned the Discord. That is a thing that we have. Access to it comes via Patreon, so go to the website. There's a Patreon. You sign up for the Patreon and then you get into the Discord. That's how it works.
We do have a couple of scholarships left, I think. Right?
Dave: Mm-hmm. Yep.
Chris: So, just DM Dave on Twitter if you want in.
Dave: There's a lot of fun going on. It has split into factions. There's Team Chris and Team Dave, so you do have to pick a side upon joining.
Chris: Some really surprising defectors from Team Chris, I have to say.
Dave: Yeah, we'll see. We'll see. But, man, it's a warzone. It's a literal warzone. No, not really, but anyway.
All right, well, that'll wrap it up. 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. And join the Discord, patreon.com/shoptalkshow. We'd love to have you.
Chris, do you got anything else you'd like to say?
Chris: Oh, ShopTalkShow.com.