447: Headless WordPress, Recent RSS Favs, Custom Post Types in WordPress themes, and Sharing Buttons
We answer your questions about using a headless WordPress set up, changing WordPress themes and what happens to custom post types, those share buttons on websites, and talk about the 3 recent fav articles that came across our RSS readers.
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--hard stop edition--Rupert, and with me is Chris--green booth--Coyier. It looks so good. The booth is still looking so good. Oh, my god.
Chris Coyier: Thank you.
Dave: My office is not done. They spackled. They did the tape and float of the drywall.
Chris: How is the roof? Is the roof done?
Dave: The roof repels water excellently. It's top-tier, A-level repelling of water, so now water doesn't go in (or snow). We have that now in Austin.
Chris: [Laughter] Leaves.
Dave: The water and snow don't go inside the building.
Chris: Sand. None of it.
Dave: Well -- but anyway, yeah, it's so close and you know it's that last 10% of the project thing where it's so close. I am just fixing to move furniture in there.
Dave: You know what I mean?
Dave: Just be like, "Come on, guys. Let's go."
Chris: It might actually be 10% in actual construction because you pound the last nail and it's done, you know, or whatever. I don't know if that's how it works. It feels like, in software, though, when you're so close that means you only have 80% left. You know?
Dave: Yeah. No, totally.
Chris: It's just incredible how the last mile takes.
Dave: Well, and that's it. Now it's rainy this week, and so the drywall mud is drying slower.
Dave: I'm just walking circles in my backyard.
Dave: Just pacing, you know, like, "Oh, hey, guys. You ready? You done?"
Dave: They don't appreciate it, but anyway.
Chris: I look forward to see you having that. That's pretty cool.
Chris: We've got some questions from users. Users-- You are users, everybody out there.
Dave: Hey, user.
Dave: Welcome, user.
Chris: I've always hated that word "user" anyway. Why is that a necessary thing to say? They're just people. Gosh.
Dave: Yeah. Isn't that weird? You abstract people. [Laughter] We already had a word for people that visit your website. It's "people."
Chris: Yeah. Right.
Dave: But I guess you're trying to distinguish between active, I guess, participants and inactive. I don't know.
Chris: Yeah, has an account or not. I don't know. So, some of you people out there who have written in, we really appreciate that. They trickle in these days. They're always good, but the volume is lower. You should just realize that you can do that. In fact, I think we're going to roll out a new design for the show or the website. We'll make the button bigger.
Dave: Yeah, bigger.
Chris: Like 11ty, like Zach's joke on the documentation button on 11ty. It's almost so big that it does it injustice.
Dave: It sort of stops looking like a button-- [Laughter]
Dave: --because it's 100% wide and like 50VW.
Chris: But once you know it's there and you know what you're looking for--
Chris: --it's hilarious. Yeah, it is about 50VW, if not more.
Dave: VH. VH. Yeah.
Chris: [Laughter] Imitation button, it's very big. Uh... so shall be our "Send in a Question" button because that is still the meat and potatoes of this show. Let's do one and then we'll do random crap and then we'll do more.
Chris: Just to prove that we actually answer questions on the show once in a while.
Dave: See. See. People doubt us. Look at us.
Dave: Glenn Doman writes in, "I really like the look of headless WordPress and would like to give it a go on a client site, but I'm not sure how to make the case to management over a standard WordPress build. The freedom of it gives devs on the front-end could be really powerful, but there are lots of templating stuff WordPress gives you for free. So, I wonder if it could slow you down. I think there used to be SEO concerned with retrieving site data this way, but my understanding is that has been rectified. Have either of you tried out Headless WordPress and can you give advice?"
Well, so I did try Headless WordPress once and it was working through an API. My issue was not everything came back, so things in custom fields and stuff like that. It was three or four daisy chains between the person who worked on the WordPress and me.
Dave: So, I had a few problems getting the right properties back to render even a 1:1 of what was currently being rendered, so there is that risk. I would say that. Just because you are not -- just because you ejected from WordPress templates doesn't mean you're done with WordPress. You might still be doing a lot of WordPress.
Chris: Hmm. Yeah. I like the idea of it because I don't like the idea of compromising on CMS quality just because I want to be JAMstack or something, or I want to build a React site, a Vue site, or something. I don't want to be like, "If I made that choice, now I have to use no CMS, CMS I don't like, a bad CMS, or something." I like WordPress, I like Gutenberg, and I like the ability to do that, whatever I want to do with my front-end.
The slow you down part is, like, maybe -- I mean anything will slow you down if it's new technology to you and your muscle memory isn't built up for it and all that stuff. Maybe it'll slow you down, but maybe it won't. Maybe you have a whole bunch of React devs on your team and they're way faster with that. If you gave them APIs that they could build out a front-end faster than they would be able to if what was weird to them was PHP, WordPress, and stuff. That "slow-down" stuff is totally relative. Who knows how to answer that?
You know what I'd look at? I think they've been a sponsor. I know Automattic invested in them for a minute, but it's Frontity, frontity.org. It's a React framework for WordPress. You didn't say the word "React." I'm saying the word "React," I realize here, but that's kind of a common use case is--
Dave: There's also, you know, Next is pretty advanced, versal.
Chris: Yeah. Yeah.
Dave: Hosting with them.
Chris: Certainly, Gatsby has connectors.
Dave: Gatsby, yeah, I think actually tries to help you make that jump pretty well. But I was just going to call it Next because isn't there a flag where you're like, "prerender this," or whatever, and it just will spit out the page? It's like you made the API call at build time.
Chris: Yeah. Yeah.
Dave: If your SEO is a worry, that would solve that. You'd probably get something a little more stable than your WordPress stuff if you do it that way, if you do it on build. But then if people are editing WordPress, how do you trigger builds? Ah! Now you've got another problem.
Dave: I don't know if it's panacea, but I do think the best thing you can do -- and this goes back to the mantra "Just Build Websites."
Dave: Play the clip, Chris.
MANTRA: Just Build Websites!
Dave: All right. Yeah. This would be a place where I would do it on my own site first or even the corporate site and learn the hard bits first before I pitch it as a client project.
Dave: That's what I would say.
Chris: Probably. You know what seems a little unsolved about this is that you've got two sites to maintain now.
Chris: You've got the whole build process and the whole banger for wherever you're building the front-end and you have to keep up a WordPress site somewhere.
Dave: You know where I could see this being solid-solid gold is if you're a company and you have a lot of WordPress sites that you manage yourself.
Dave: Let's say you manage a bunch of political sites because--whatever--it's politics season. [Laughter] You manage a bunch of these sites in a WordPress MU (multiuser) system. Then you just build your front-end however you want. That would be very cool because you have one code base for everybody you're operating on and then each little individual politician -- this is just an example. It doesn't have to be. It could be restaurants or whatever.
Dave: Each individual politician could have kind of their own vibe, but it's kind of the same engine behind it.
Dave: I think that would be a situation where you could pitch it to management.
Chris: That's not theoretical. People do this all the time. Yeah.
Dave: If you're working on a WordPress multiuser, now you've got a bunch of data. You've got a bunch of local hosts.
Dave: That's arguably, I think, harder than a bunch of decoupled front-ends, so I think that....
Chris: I think the MU thing is super-cool. Universities do it because it's like every department has their own URL even, really, or subdomain or something. Usually, it's like a very different site than the parent site of the whole university and those departments want to do whatever they want, but they can still be housed by one MU.
Dave: Mm-hmm. No, I mean--
Chris: Then you throw WP GraphQL in there, and then everybody is GraphQL-ing. Mm-hmm.
Dave: Yeah. Bingo-bango.
Chris: I know you don't love it, but that's the kind of thing that at least then it's consistent.
Dave: No, I love GraphQL, Chris. I just don't love the 17 things I need to use GraphQL for. [Laughter]
Chris: Yeah. Tell me about it. I wrote a post--it must have been a year or more ago now--that is kind of like the tooling-free version of GraphQL. You can actually just write a fetch against a GraphQL API.
Dave: Okay. Love it.
Chris: It's not totally ungraceful because what you send in the value of the post is a template literal string of a GraphQL query.
Chris: You know what I mean? It may not be like syntax highlighted super nicely. It may not Lint real well, but you don't have to have Apollo client - or something.
Dave: Yeah, but then you kind of want Apollo client so you don't murder your database.
Chris: [Laughter] Right.
Dave: You know, by accident. You know?
Chris: Right. Right. Right.
Dave: I don't know.
Chris: Yeah, it's not like a long-term thing. But if there's a GraphQL API sitting out there and you need to make one request against it, you don't have to tool your way out your butt to--
Dave: Yeah, yeah. No, that's true.
Chris: --to get it.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by CodeUp. Are you looking for a new job? Are you looking to get into this coding thing? Maybe you're listening to this podcast because you're trying to get into the world of Web design and development and all that stuff.
CodeUp teaches software development and data science in 22 weeks. The program includes technical skill development like learn what the job is and how to do it, professional development, career coaching, and job placement support.
Of course, there's more to this, like, "I want to switch careers," than it is to just learning how to program. You also need to learn how to interview, and how are you going to get that first job? They'll help you with all of that. In fact, get hired after graduation or they refund your tuition. Pretty darn cool.
Learn more at codeup.com. Their online classes are starting soon, so you apply for that. Get a job or get your money back - pretty sweet. Thanks for the support.
[Banjo music stops]
Chris: Here's a game. Open up your RSS reader. What are you using on your Mac now? Do you have one?
Dave: Oh, well, Feedbin, still Feedbin. I love Feedbin.
Chris: Feedbin rules.
Dave: I have Reader 4 on my iPad that I use on my iPad. I was using the Feedbin client but it was weird and it was hurting my wrists because I have baby wrists. [Laughter] I have fragile, baby bird wrists, Chris.
Chris: Yeah. Sorry, buddy. [Laughter]
Dave: I'm a big boy, but I have baby wrists, apparently.
Dave: Reader has a button right by my thumb that I can go to the next article, and that's so critical.
Chris: Oh, yeah. Ergonomics. You got it.
Dave: I was having to swipe through every article all the way to trigger the snap to switch. You know?
Chris: Mm-hmm. Mm-hmm.
Dave: Anyway, using Reader. I guess I could use Reader on my Mac, but I'm really happy with the Web client for Feedbin.
Chris: Reader on my phone is sweet.
Chris: The switch from 3 to 4, I think, 4 is big and you should get 4.
Dave: Yeah. Always have 4, so-- [Laughter]
Chris: [Laughter] 4 is good.
Dave: It's worth it, too. It's like supporting a small dev shop, you know.
Dave: It's sort of like how you pay for a tweet bot or whatever. It's worth it. If you love RSS, it's worth $5 or whatever I paid for it.
Chris: (Indiscernible) It's my favorite thing lately. I never look at the Feedbin UI ever because I have Reader on my phone, which syncs through Feedbin. Then on my Mac, which I like to read on my computer too, I use NetNewsWire--
Chris: --which has a pretty good iOS app too, but I like Reader better.
Chris: But NetNewsWire on Mac is good. I really like it and it connects to Feedbin too. Feedbin syncs all your stars and stuff.
I have all these apps because I go in and out of different apps like anybody else. You can do that with Feedbin because it has these great APIs. Even though I never even look at Feedbin, they're the ones I pay because they're the home base for it all. I can open NetNewsWire on my phone, even though I don't use it that often. It's 100% in sync with any other app I open. All my un-read are there, all my favorites are there, all that. I love that.
Dave: Chris, I've got some breaking news, bud.
Dave: There's a Reader 5. Reader 5 is out.
Chris: Oh, maybe that's what Allen meant. There's one dumb button. The only reason I said this is because if you're reading a post in 4, I think -- maybe it was 3 or 4--
Chris: --and it had an embedded CodePen in it, it would be all squished up to the left because something was weird in Reader and it was stripping out aspects of the iframe in there and they fixed it in the new version but have not backported the fix.
Dave: Oh, okay.
Chris: So, upgrade, please.
Dave: I wonder what it was. One of them was -- I was going to see if I could use a Reader that I already own on my Mac because I have the M1. I can do that now, but--
Chris: Do they have--? Oh, what?! Can you really run iOS apps on it or whatever?
Dave: Yeah, they advertise that, but I don't use it. That would have been one I would try. I like the Web client because, again, I'm reading websites, right? I want to read websites, so I want to get to websites as quick as I can.
You know when you open a new tab in an app and then you're like, "Well, that was cool. I want to share it. Oh, no. How do I get the URL," or whatever, without all the junk.
Chris: Okay, so you can star things in Feedbin.
Chris: That has made its way into Reader, NetNewsWire, and anything else. Pretty much anything has some kind of like mechanism, right?
Dave: Yep. Yep.
Chris: The game is, open whatever your thing is and tell me (without too elaborate of an explanation) the last three things that you liked.
Dave: All right. Okay. Here you go. Are you ready? It's been a while since I've powered through here. Here it is. You're going to love it because two of them are The Verge. Here we go. [Laughter]
Chris: I knew it! I knew they were going to be The Verge!
Dave: It's The Verge.
Chris: Okay. Go.
Dave: Dave likes The Verge. Okay. Deal with it.
Chris: Loves it.
Dave: Love it. Star, heart, favorite it up.
Dave: This one is, "This maker built a working Batman grappling gun in only a year." [Laughter]
Dave: It's this guy who made -- he was obsessed with the idea of building a Batman grappling hook that attaches to your wrist.
Chris: Yeah, but it can really fire, like to the top of a skyscraper.
Dave: Really fire up to a tree and hoist himself up, like up a tree and stuff like that.
Chris: Oh, that rules.
Dave: It was cool enough I clicked on it. But as a result of that, I now have all these maker videos and stuff like that in my YouTube algorithm and it's kind of outrageous but it's cool because I watched this 30-minute video on this epic $30,000 puzzle or something like that.
Chris: Oh, my gosh.
Dave: I'm just getting the best YouTubes, and I think it's probably from that.
Dave: What's that?
Chris: It's number two.
Dave: Number two.
Chris: Number two.
Dave: "Google reportedly asked employees to strike a positive tone in research paper." I don't know if you've read this--and this gets into hot drama here--but Google--
Chris: Shouldn't do anything.
Dave: --kind of a bit of a breakout with -- I forget her name. Oh, I'm blanking on her name. I'm going to just peek in the article.
Chris: It was like, "Oops, we fired you and now we regret it because we got bad PR"?
Dave: Well, yeah. GitHub also did that. [Laughter] This was a while ago. Timnit Gebru, she is an AI ethicist and she wrote a paper--
Chris: Oh, I remember this one.
Dave: --that said, "Hey, large language algorithms, AI, basically large networks of AI are bad, actually. They produce substandard results."
Chris: And wasn't her job to be a watchdog for that kind of thing on purpose?
Dave: That's what she was hired for, and she was fired by a guy named Jeff Dean. I don't know any of the resolution here but, apparently, there was sort of a policy within Google to take care to strike a positive tone and remove all references to Google products inside the internal how to write a paper. I get that it's your job but, for the sake of science, if you're a company that produces a large language neural network or whatever, you might need to address that. [Laughter] You know what I mean?
Anyway, obviously, I'm not a lawyer, so I can't really comment on any of these, but it just has this smell of like, "Oh, we're doing bad, but we don't want to--" It's like big tobacco-y. You know? It's like, "Oh, whatever. AI is good for kids. It gives them healthy bones." You know? That's the vibe I get from it. Yeah.
Chris: I see what you mean. Okay, an article about that. What was the publication?
Dave: That was The Verge. Yeah. Yeah, The Verge. [Laughter]
Chris: [Laughter] Cool. Okay. Next.
Dave: Can I do two more?
Chris: Sure. Yep.
Dave: 2020 Reads by Frank Camaro, I love Frank.
Chris: Aw! A new Frank post. I missed it.
Dave: Yeah, yeah. He wrote all these books he read and they're great. One thing I loved about it was he got into something and then he just read all of them. He read Octavia Butler and then just read all of them. Then he read James Baldwin, and then he just read all of them. [Laughter]
Chris: I don't see it on his site. He must have a secret RSS club.
Dave: Oops. Bleep.
Dave: Anyway, I don't know where -- anyway, it was good, but I just liked that it was just very -- I don't know. His reading was sort of like you could see the veins of knowledge he was trying to mine and I thought that was cool.
Dave: Then the other one was Best Anime of 2020, which I then posted about an anime called [laughter]--
Chris: Tell me right now.
Dave: What? Oh, you've got to watch this anime, Chris. It was on my blog.
Chris: What is it?
Dave: It's "Keep Your Hands Off Eizouken!" That's E-I-Z-O-U-K-E-N. It's on Crunchy Roll, but it's basically about these three girls in high school who decide to create an anime club. They don't want to be in the anime club because those people only watch anime. They want to make anime, so they create the Eizouken, which is film studies club, and they create this films study club and they make anime, these three girls.
It's basically like these girls start this creative shop, you know. I'm just like, "This is Paravel!" [Laughter] You know? Because there is one who is like kind of--
Dave: She's the boss girl and she's kind of funny because she's kind of like yakuza manipulator. It's kind of great. But then there's this one girl who is like the animator and she just really cares about things feeling right and looking right. It's kind of like the designer, basically. Then there's one girl who is in the settings, so she's making sure the whole underlying thing makes sense. You can think of that as a developer.
It's only 12 episodes - just something. I think there's a whole other season coming, but it just was awesome. It was like a good, fun anime romp.
Chris: That's great. I go on little anime benders where I watch four or five of them.
Dave: Yeah, and then you're just like, "That was great."
Chris: Yeah, that was great. It's very meta, right? An anime about making anime.
Dave: Yeah, and I think that was the thing in my best anime that stood out. I was just like, "What? Meta." But then I was like, "Yeah, okay," because these posts are actually good for me because I don't keep up with anime. I like it fine enough, but I don't keep up with it.
Dave: So, it's cool to, like, "Oh, okay. This is enough. Somebody was like, 'This was the best this year,' so it's enough for me to be like, okay."
Chris: There are certain aspects of it that -- this probably makes me feel like an ignorant jerk, but sometimes the length of them are weird and then they have super-sprawling intros and extros.
Dave: Yeah, outros. Yeah.
Chris: It's like you try to -- it's hard to get into a flow sometimes, with me, and it changes from show to show. Then I feel like never can you half-watch an anime because it's just too -- I don't know. Not that the plot is so intricate, but there's enough cultural difference between what I normally watch and them that I have to sit there and get the details right. Otherwise, I'm lost.
Dave: Yeah. No, they'll -- like, "Surprise! This person is an alien," and you're like, "Ah! [Laughter] What?! I missed it."
Dave: But no, the anime formula is like there's almost only 10 minutes of new footage every 25-minute episodes. It's because it's like 2 minutes of recap, the intro, which is pretty rocking, and then the 10 minutes of new content, and then the outro, which is like 4.5 minutes. You know?
Dave: It's the formula over and over.
Chris: But then you get a good one and you're like, "That was so good. It was so super original and a story I've never heard before, super engaging, got my blood going."
Dave: That's how I felt about Eizouken.
Dave: I just was like, "This is just -- I haven't watched -- this is good. I feel good." Then -- sorry. This is not an anime podcast. Maybe it is now. Whatever. 2021. Vibes only.
Dave: [Laughter] You know how like when people say, "New York is a character in the film," or whatever? It's like a thing or it's like a character in "Seinfeld", you know, New York is kind of a character.
This was the first time I've watched a show (or anything) and was like, "Wow, the city is actually a character," this fictional city of Shibahama. It's like a water town but, clearly, some global warming event has happened but no one really talks about it. Then the town has been ravaged by modernity, basically. So, it's kind of like this capitalism kind of created this. Anyway, but it's never addressed, and so you're just like, "Somebody, explain this to me!" [Laughter]
It's weird enough, you know, or if you ever watched -- I don't know -- like something really radical like Evangelion or something or Akira. You know? You're just like, "Whoa! That took a turn. Why? What is it?" You know?
Dave: I think it's those situations where you're just like, "I want to know more about that. It's too weird. I need to know." Anyway, I did mine. [Laughter] What are your likes? What likes do you have in the Feedbin?
Chris: One was from today, Jeremy Keith post, "Get safe." It was kind of a joke. I mean it's a pun title, but it was about explaining the difference between GET and POST, in a way.
Chris: Very fundamental concept of the Web in that a lot of the Web, like a link (and an href), that triggers a get request in browsers. I think it's very possible to be a WebDev today and just really not think very much about GET and POST.
He makes the point in the first sentence, really, that there's also put and delete and patch and stuff. I feel like maybe Rails devs were used to that because there were some mappings to those types of things and routes and stuff, but most people don't. Most people, even whatever--
Chris: If it's not get, you post.
Chris: You know? Whatever.
Dave: Well, yeah.
Chris: [Laughter] So--
Dave: I did use sort of the seven verbs recently, but I don't want to brag.
Chris: Oh, you did?
Dave: Well, once you know them, you're like--
Chris: Good job.
Dave: --"Gol, man, they thought of it, didn't they?" [Laughter]
Chris: Yeah. Might as well.
Dave: They figured it out a long time ago.
Chris: Yeah. They did, but that -- and then the pun of the title is that get requests shouldn't do stuff.
Dave: Yeah, yeah, yeah.
Chris: You shouldn't have ?post=read or something.
Chris: Then just by virtue of hitting that thing -- yeah. You would never do that, for various reasons, because browsing the Web should be safe, hence "Get safe." But it made me think about, like, that would be a good interview stuff. I'm not trying to be too esoteric, but this is pretty fundamental stuff about the Web. I could see writing an interview question at least about GET and POST.
Chris: Maybe not the whole thing but explain to me the difference. Why would you use them? How would you use them? What HTML mechanisms invoke that type of stuff?
Dave: Yeah. Even just like basic understanding of CRUD (create read update delete). What's the difference?
Dave: Why? You know, like, how would you go about doing this - or something?
Chris: I favorited one on the viget.com blogs from Trevor Davis.
Dave: Oh, man, Viget is still going? I haven't -- I think I have--
Chris: Their blog is -- they have really good blog posts, still.
Dave: I should put it because I have a whole Web agencies folder, so.
Chris: Yeah. I think they're still an agency. I mean whatever they're doing, they're still blogging. The post is what I love and hate about Tailwind CSS, and it made me, like, "Ah! I love that! I want to hear what another developer thinks: the nuances; the, like, "I've actually used this technology on a bunch of projects and I want to talk about things I like and things I don't like about it."
It's the best kind of blog post there is and I was just going off about it because I feel like I have ten emails in my inbox right now that are like, "I've got a guest pitch for you, Chris." It'll be about Tailwind, and it'll be like how to set up and use Tailwind on a project. I'm like, "I don't want that. That's not a good blogpost."
I hate to be a dick, but it's like, "That's what the docs for Tailwind are for. The docs for Tailwind are to tell you what it is, how to set it up on a project, and all that." It's going to stay up-to-date because that's what docs do.
My blog post about the basics of Tailwind will be out of date in, like, a month. Besides, I don't want to read that blog post. I want to read what you (the developer) like or don't like about Tailwind. That's what this is and I think they do a good job of that. It's that really, like, "I'm a developer. You're a developer. Let's talk about it."
Dave: Yeah. Well, this one blew up. It got retweeted and people -- [laughter] -- I don't know. People had big emotions about it.
Chris: Oh, did you search the URL on Twitter or something?
Dave: Yeah, well, I think I saw some people agree with it or such as and then very passionate Tailwind users were very--
Chris: Ugh! That's what I don't want. I don't want your hot takes on it. Write as many words as Trevor did and then I'll read that. You know? Any time I mention it on the site, they're like, "You didn't learn from the mistakes of the past! All classes like this are bad."
Ah! I know what you mean. I actually don't love Tailwind either. But not because it's bad technology. It's just, for various reasons, it doesn't click with me, et cetera. I could talk. I could write a post like Trevor too. I'm trying to avoid giving you my hot take because that's what I'm bitching about right now.
The hot takes aren't interesting. That's not enough. You're basically wrong if all you have is a hot take on this because it's more complicated than a hot take.
Dave: Even if your hot take is, like, "It's the best ever." You know?
Chris: Just as bad.
Dave: Just as bad, like, "Solves CSS." You know? Or whatever. Anyway. Yeah, no, that's a great -- I actually haven't read it all the way through. I just saw the kerfuffle about it, but I don't know.
Dave: I have my own sensibilities and feelings about stuff. Yeah, I don't know. I should read this because--I don't know--I'm curious.
Chris: Yeah, it's cool, and there's a good Eric Bailey post that compared Tailwind to BEM that I thought was pretty well done and stuff. This stuff kind of requires some nuance.
It's not the authoring. I don't like the authoring. I like the output. Atomic CSS output is amazing. It's super tiny and it's compressed in a way that only this type of approach can compress or that CSS and JS technology can compress. It's like a build process thing that can only be done this way because it has access to templates too.
Chris: That's cool.
Dave: A real story. I had a client. They were shipping like 3.9 megabytes of uncompressed Tailwind to the client.
Chris: From bad to good.
Dave: But we got them set up.
Dave: And it's like 10 kilobytes now.
Dave: But that was like a tooling breakdown, you know, so you inherit more tooling. Again, I like CSS. I don't like the 20 things I have to do to write and maintain to write CSS. That's just sort of the same thing.
It's like reprogramming you because you don't really edit Tailwind. You just edit the JSON config. That's a big jump in probably what you're used to. You're kind of not doing it writing CSS the same way. You can customize Tailwind quite a bit, but it's not the same way as writing your own CSS.
Chris: Mm-hmm. No, and isn't it neat to think about? I had a blog post about this recently about Atomic CSS output. It has nothing to do with Tailwind. Imagine you could just write CSS however you want to. Then magic happens and what goes to production is Atomic.
Chris: Classes and stuff. Now, that appeals to me because, you know what already happens to my authored code? All kinds of stuff, Dave. All kinds of stuff. It gets gzipped. It gets compressed. It gets put on CDNs. All kinds of magic happens between my fingers typing code and what actually goes to browsers, to the point where I have long since stopped caring about that. I want magic to happen to my files to make good performance things happen. This Atomic thing is a very interesting take on that.
Dave: Yeah. Yeah. Nah, again, I don't know that it's my fav, but it is interesting.
Chris: Fair enough. And you still want hooks, too. We had a podcast today I did with Shaw for CodePen Radio and we were looking at people's custom profiles on CodePen. Dave, yours has a butt that farts on you.
Dave: Yeah. It's good.
Chris: It's hilarious.
Dave: It's good. [Laughter] It gets me lots of jobs.
Chris: Yeah. [Laughter]
Dave: People just banging down my door to work with the butt guy.
Chris: In order to make that happen, we had to put a bunch of hooks all over the HTML that aren't really there for us anymore. They used to be.
Chris: But now, we leave them there in case you need them.
Chris: Whether we're CSS modules or CSS and JS or we go all Atomic or something, we can do whatever we want but the hook is still there.
Dave: [Laughter] Am I going to be on a video, like a CodePen Radio video? Is my profile--? Okay.
Chris: Oh, yeah. The butt. I got the butt on video today.
Dave: Good. Okay. [Laughter]
Chris: Well, because you had to do an extra trick because you put the butt in a pen, right?
Chris: The butt farts in a pen.
Chris: But normally, we put an overlay over the thing so it doesn't interfere with stuff.
Chris: You know? But you then also had to use custom CSS to remove the overlay so that you could mouse over the butt.
Dave: [Laughter] Man.
Chris: You had double-trouble.
Dave: I just did. I made code I kind of regret but also don't, so there--
Dave: I'm going to be famous. I'm going to send it to my mom.
Chris: All right. My third one is WordPress Tavern.
Chris: I think they do darn fine WordPress journalism over there even though it is owned by Automattic, so a grain of salt there. Word comes directly from them, but I find it pretty unbiased. The team over there does a good job.
They covered Kinsta. Maybe has been a sponsor here. Not right now, but I can't remember. They launched a free, local WordPress development tool.
Chris: Local by Flywheel has one that I feel like is way far ahead on this right now.
Chris: Local is really good and keeps getting better and is super-fast and all kinds of stuff. Kinsta, this is their -- you know. They find value in it and, honestly, I've told that to other -- I've had conversations with other WordPress hosts. I'm like, "You know what Flywheel is doing that is super smart and surely gets them tons of customers and they god-dang deserve it because it's amazing? They are answering not only local development but deployment too."
Chris: It's like, come on. Duh. You know?
Chris: Ask any developer what they struggle with.
Dave: What's your pain point?
Chris: It's like--
Dave: Local development.
Dave: With WordPress. They have a built-in database manager. That's kind of cool, so.
Chris: Yeah, this has some cool ideas and they have a couple of talking points in here that are like why they think it's better than local that I don't agree with, but I don't care. Compete. Go at it, you two.
Dave: Oh, yeah.
Chris: I will benefit from your war.
Dave: Yeah, more is better. I think, too, it's like what do you want. We use Local. It's good. But we're kind of bought into their hosting.
Chris: Yeah, they're hosting too. I use their hosting because their local is so good.
Dave: And it does work and stays up unless we set it in debug mode. So, there you go. [Laughter]
Chris: Yeah. [Laughter] Yeah, that was a weird day. That can't happen anymore, though, because we Cloudflare that sucker. That's all. That was my top three. I'll stop there. But that's a fun game.
Dave: That's a game we can play every week.
Dave: Recurring segment.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by WordPress.com. I wrote a little blog post about this on CSS-Tricks recently, sponsored by WordPress.com, of course. Thanks for the support.
It was specifically about the paid business plan on WordPress.com, which is like a couple of tiers up, of course, from the free plan. They have the free plan, which is very generous and robust. You can totally have a free site on WordPress.com, but it had ads on it and stuff like that. You pay a few bucks a month and then you get a domain name and you can remove the ads. It unlocks a lot of potential.
Then there's another tier. Then the other tier beyond that is the business plan. Now, that plan, a way to think about it is four things: plugins, themes, security, and performance.
Security is already, like, it's on WordPress.com. It's going to do pretty good, but you don't really have to worry about that in particular. But there are extra bonus stuff thrown in there. One of them that's cool that's related to security is the fact that you get backups then too.
It's this immediate rolling, real-time backups you have on the site. Even on your WordPress.com site, you're like, "Oh, shoot. I published something that I shouldn't have," or there's something weird that happened with comments or whatever. Whatever happened (literally anything) you can roll back in time to a different place (like yesterday or something) and just immediately deploy the site to that state and get it fixed. That's really powerful stuff and that's kind of what I mean by security.
The first two, plugins and themes, are particularly interesting. Of course, you have themes, right? You just pick the theme. No, no, no. You have real SFTP access. You can code your own theme and upload it, buy a theme and put that one up there, or buy a theme, then customize the heck out of it, do that, and set up a deployment process.
You have SFTP access to your site on WordPress.com. A relatively new thing. Kind of a big deal. Because you have that, you have access to the plugins folder too. Upload whatever you want, whatever plugins you want. Run them on WordPress.com. Amazing.
Then the performance thing is that not every single solitary site on WordPress.com is full all the way through CDN powered on their most powerful, global CDN. But on the business plan, you absolutely are. If you really want the highest perf, get on that plan and do it.
With all those things combined, the business plan is a no-brainer for me. That's the one to go for on WordPress.com. Just want to make sure you knew all that. Thanks for the support.
[Banjo music stops]
Chris: Speaking of WordPress, yeah, not bad, Jimmy Davis wrote in because we were talking about custom post types. I can't remember.
Dave: Mm-hmm. Mm-hmm.
Chris: But I use them on CSS-Tricks a bunch but not enough. I'm still looking for somebody, by the way, to maybe help with some of that stuff. Clean up my handling of my custom functionality plugin and stuff. I have a couple of other quirky crap that I just know I won't get around to unless I hire somebody.
Chris: Still looking, but he was wondering because, in order to use a custom post type in WordPress, you have to declare it.
Dave: Yeah. Okay.
Chris: Where do you declare it? In PHP.
Chris: You could do it in functions.php because it's not that many lines of code. It's probably 12, on average.
Chris: What's the name of it? What are some verbs that describe it? What features does it support - yadda-yadda-yadda? It's very tempting to just copy and paste it into the functions.php file, which is certainly there on your theme anyway.
Hey! You got a custom post type. Good for you.
The thing that people bitch about or think is a bad idea with that is that those are in your theme, so the second you change themes, your custom post type disappears.
Dave: Boom! Explosion. Yeah.
Chris: That's scary. But the reason that never happens to me -- this is the only time I ever make a new theme -- ShopTalk Show, anywhere, my CodePen blog, CSS-Tricks -- what I do is I right-click on the folder of the theme I'm currently working on and duplicate it. Then I start editing the other theme, so I never lose any of that code. It just evolves. So, I don't really think it's that big of a problem. But if that's not the case for you and you do pick random themes -- and I have sites like this too. In fact, just the other day in my email blog, I just randomly picked a new theme because I could because I don't have any custom code running on that site, so I'm just kind of free to just randomly pick themes. I was able to do that.
But anyway, if that's you and you switch themes a lot more, the answer is then to put something like your custom post type declarations into a plugin, which is really not that much more code either. A little extra boilerplate around it, but that's it. Then activate that plugin and that won't change, as you change your themes. Technically, it's a lot smarter. That's the correct way to handle custom post type declarations, I'd say.
Dave: Yeah. No, you can -- yeah, I don't know if you could find a better place for them. Hmm. Yeah, because--
Chris: There are only two. I can't think of a third place.
Dave: Wouldn't it be cool if there was another folder inside WordPress?
Chris: Yeah, kind of. It would be cool.
Dave: Because plugins get stomped too by somebody just going on an uninstall spree or something.
Chris: Right. Yeah. But there are styles of plugins these days. Like there's another folder called MU-plugins that are must-use plugins.
Dave: Oh, okay.
Chris: They're classified a little differently. Maybe that--
Dave: Oh, maybe that should be it.
Dave: Weird. Wow.
Chris: I think it's weird. I don't know that I dislike it, but it is weird.
Dave: I wonder how. [Laughter] I guess some PHP file that eats up React files or something?
Chris: Yeah, it's like which one is the real truth.
Dave: Yeah. I wonder.
Dave: Yeah, probably that's the prototype that PHP just eats. I don't know. Yeah, good question.
Dave: Well, cool.
Chris: Ah... What else do you got? Do you want to do another question?
Dave: Yeah, I've got another question.
Chris: Or do you want to talk about something else?
Dave: Frederick Rumbuck Eckland writes in a simple question. "Sharing links to social networks, do you know if anybody ever uses them? I know I don't. Of course, the buttons that trigger navigator.share on phones can be tasteful but I don't know that I would personally ever click a button on a website that says 'Share' and I definitely wouldn't click share on Facebook, et cetera. Do you have any data on this? There ought to be some studies or something similar, right?"
Chris: I thought this was a fair point, actually. Navigator.share is a relatively new API, right? They call it the Web share API.
Dave: Web share API, yep.
Chris: I think it's cool. Don't you? It triggers. If you have an iPhone (I know) and you're in Safari or whatever, there's a little button. I think it's like a square with an arrow pointing out of it or something.
Chris: That's like the official share button.
Dave: Mm-hmm. Yep.
Chris: You know if you click that you're going to get that little panel that slides up from the bottom that I find just tremendously useful. It's like, "Add to Notion. Add it to things. Share it on Message. Share it on WhatsApp. Share it on Signal."
I love that. That's so good, and so navigator.share on the Web brings that functionality to the Web. It's genius. Of course, I want that. You can create it yourself. You don't have to wait for the browser UI to offer it. You can put it somewhere else. But what do you call it? Is it just literally a button that says, "Share"?
I think Frederick has a good point. Would you click that? You have no idea what it's going to do.
Dave: Yeah. No, I mean I think we need a standard. This kind of goes to the hamburger menu. No one knew what it was, but now people do - more or less.
Chris: Yeah. Good point.
Dave: If it becomes a convention, it becomes used. If you just did that little share icon, which looks kind of like a Git branch icon--
Dave: --like with the dot spawning other dots, you could do that. But maybe you do need the word "share" next to it. Then if everyone does that, then we kind of get a thing.
Chris: We should do that.
Dave: There should be something.
Chris: I don't mind that one you just mentioned either, the little dot with the other dots, because Git branch is a little more specific in that it has a curved one on the top and stuff. I think it's distinctly different enough.
Dave: Yeah and, honestly, that's something I could roll out today in my little post-metadata area, just a button with no styles.
Chris: Yeah, and then it's not whatever Apple did, so that doesn't hurt either.
Dave: Right. Yeah, it's not just Apple. It's not just whatever. What's nice about navigator share is you just click it and it can go to whatever service they want. You're not prescriptive. It's not a Facebook button request. It's not a Twitter button. It's whatever they have installed on their phone.
Chris: I know.
Dave: That's so great. Facebook isn't siphoning data. Twitter is not siphoning data, which is why those buttons were created to track you around the Internet.
Chris: It's the best. It's the best possible sharing mechanism.
Dave: It is. My limitation, though, this is where -- the usage is really low on share buttons and stuff like that.
Dave: Facebook won't tell you the data because it's so abysmally bad, but I think they're not even really like, "Put like buttons on your page," anymore. You know? They would rather just keep you in Facebook and make you never leave. That's a lot easier for them.
Chris: They are really out of vogue, aren't they?
Chris: Those share buttons.
Dave: Yeah. But on big news sites, they're still there and they're still occupying bandwidth. But the thing about the share API that I find incomplete is the lack of images. I know that's a feature that's coming. I think there's a new files thing property.
Chris: What does that mean?
Dave: You're on Facebook or -- I don't know. You want to put something on Pinterest. You can't select and image to share out or tweet out. Let's say I'm in GIPHY and I'm like, "Share with a photo." You can't do that. It only does text and a URL, a title, a text, and a URL. That's my beef with it.
Chris: Oh, that seems like it would evolve.
Dave: Yeah, I think they're working on it, but my whole thing is it's 2021 here. [Laughter] You're going to share a photo. You know what I mean?
Chris: The worst thing you can possibly do is go find the buttons that social networks give you and copy and paste their code. They're bad for performance. The reason they exist is for data mining. Everything is bad about them.
The second best -- you know, whatever -- the middle thing is to use the URL formats they provide. If you really want a share on Twitter button, you can have an anchor link that says, "Share on Twitter," and it posts to twitter.com/intent/ whatever - blah-blah-blah. It opens up a URL that's specifically designed just for sharing. That's okay because the performance implications of that are almost none. Then probably even better than that is a navigator.share button because that opens up the native sharing mechanism on most browsers. Notably, not Firefox and not Chrome, but it does work on desktop Safari and it definitely works on all mobile browsers, so that's cool, which is kind of where it's most useful anyway.
Anyway, I don't know the answer. I like Dave's solution that we need to -- it feels like weird timing for it because you'd think this time has already passed, but we need a share icon that really obviously reads as sharing that technologically is known as the thing that triggers navigator.share.
Dave: Yeah. yeah, we need a marketing campaign. I do not have the energy for it, but we do need it. I could put it on my site today.
Dave: Why not?
Chris: I could and I have chosen not to, overall. I think I have no share buttons at all. I used to get things all the time that would perplex the crap out of me, Dave. I wanted to share your article, but there was no sharing buttons on it. Or they would tweet me that. That would be the ultimate one where it would be like, you know how you just crafted a tweet with your fingers? You can do that with a link in it too.
Chris: It just would blow my mind. It was sincere. It wasn't even a joke. It was like I wanted to share it but I couldn't.
I do remember having a conversation with Cassidy Williams about this. I think it was Cassidy, anyway. She had some muscle memory built up for using the sharing buttons because it would somehow give the site more credit or something. If you used the official button, it somehow benefited the site more somehow, which I relate to because I remember when Google+ used to be a thing. It somehow felt satisfying for me to hit +1 buttons on sites.
Dave: Mm-hmm. Mm-hmm.
Chris: I'd be like, I'm going to give this site a +1. I don't want to share it. I have nothing to say. I just want to +1 it. I don't even -- I wouldn't click "Like" on Facebook because then I feel like Facebook is going to make that public somehow or put it in my feed, and I don't want that either. I just want the chillest possible way to +1 something.
Dave: Pinterest will tell every single person you've ever met in your whole life that you liked some post.
Chris: That you liked something? Oh, my god.
Dave: Ugh! Eh!
Chris: I know Google+ was a joke and it closed and it was useless, but I always thought somewhere in the back of my head that maybe it would even give them a little SEO juice or something, which then was proven to absolutely not be the case. So, that's not it either, but I don't know. Now I feel like I'm just talking for nothing.
Dave: No. No.
Chris: We talked, for sure, and it was good.
Dave: Yeah, I'm making a CodePen of the share button right now, so here we go.
Chris: Good. Yeah. See if something cool happens in Edge.
Dave: Oh, let's see here.
Chris: Does Edge do something cool with it?
Dave: Let's see. Well, I need to add the event listener, document.queryselectorbutton. We're going fast and loose just query selectoring here, so--
Chris: [Laughter] I love query selector. I like how it just consistently only selects one thing.
Dave: Yeah, I use it all the time. Did you know you can pass? You can go "document.queryselector audio, video" and it'll just select whichever one comes first. Did you know that?
Dave: Yeah, you can use comma-separated values in query selector. Bingo!
Dave: That's how I do picture in picture and playback rate=2 on everything.
Chris: Well, that is so cool.
Dave: "Document.queryselectoraudio,video.playbackrate=2" all day long.
Chris: It's kind of like it runs two of them and if the first one matches, it stops.
Dave: Yeah, it'll stop on the first match, so you basically have the same snippet for audio and video, so it's pretty hot jams over there.
Chris: That is cool. That's cool.
Chris: I was going to mention that this is just in case, like get some nerd cred in case anybody remembers this. There was this game, 2005. It was a card game you could buy, but it wasn't a game that you play (like me and you) again each other. You'd get a random pack of cards and each of the cards had puzzles on them intended to be solved. If you solved enough of them, the puzzles kind of fit together towards solving a larger puzzle. There were some aspects of reality twisted into it too.
The ultimate thing that you could do in this game was find this cube that was literally hidden somewhere on planet Earth and, ultimately, the winner of the cube won $100,000 or something. It was kind of a big deal and it was just a fun thing to watch. There were ratings of the cards from easy to hard. The game was called Perplex City, by the way - Perplex City.
Chris: There were like ten ratings of how difficult the card was good from red all the way to silver were the really hard ones. There were only a couple of silver cards left in the game that weren't solved. One of them finally got solved. One of them was kind of an accident because it was a mathematical hypothesis called the Reimann hypothesis that will probably never be solved, so it was not really a practical thing to solve it.
One of them was just the picture of some dude. Satoshi was his name. It turned out to be a Japanese fellow.
Dave: Okay. Okay. The creator of Bitcoin or different? Different. Okay.
Chris: No. It turned out it was always just an absolutely random guy who had nothing to do with the game, the puzzle, nothing. Somebody just went up to him and be like, "Hey, will you be the guy in this game?"
Dave: [Laughter] Okay.
Chris: "Yeah? Cool." There's a picture of him with Japanese characters that translate to, "Find me," and that's it. Since 2005 until just December of this past year, it took to find the guy, because it's a really hard task. In the end, it required all kinds of computers and stuff. It just was a big mess to find him and somebody finally-finally-finally did it.
The trick was that you had to literally find him and be like, "Are you the guy from the game?" and he would be like, "Yes." [Laughter]
Chris: I know! Wild, right?! I used to play this game. I mean I never got into literally searching for the guy, but I remember it all. It's cool that it took 15 years, 16 years.
Dave: Wow! That's incredible.
Chris: It is.
Dave: Wow! Hold on. I almost got my button done here. Hold on.
Chris: I want to see it. I want to see it. I want to see it.
Dave: I'm learning things here. You could put async right there.
Chris: Does it trigger at all, like if you're in a desktop browser that doesn't know what it is? Did you have to wrap it in a little, like, "if navigator.jr"?
Dave: Yeah, it didn't do nothing. It hates me, so whatever. Test the share button. I don't know, man. This doesn't seem like it works.
Chris: Well, open it in Safari.
Dave: All right. Let's open it in Safari.
Chris: It'll work in Safari.
Dave: Safari. I have Safari now, so I can open it in there. Opening the technical preview just to make sure. Let's see here.
Chris: It'll open a thing in the upper right that's....
Dave: Oh, I must have bugs. [Laughter] It's not working.
Dave: Or it just doesn't--
Chris: You've just got to read the right blog post.
Dave: I know. Well--
Chris: That's okay. We'll figure it out.
Dave: Hmm. What?
Chris: Are you live? Do you need help? Did you miss a curly brace? Is there a missing period?
Dave: Button get attribute is not a thing, but it is--
Chris: Why do you need attributes? Is that how you pass it to title--?
Dave: Well, that's -- yeah, I was going to pass some text to it.
Dave: But whatever. Maybe I don't even care about that.
Chris: But, of course, Jeremey Keith has a great article about the way that he gets the text is to look at the title tag from the head. The way that you get the description is to look at the metatag for the description and get that. It might as well at least try to do that if you don't pass it any text. You know?
Dave: Hmm. Oh, hey, yeah! I got the little dropdown in Safari, man. There you go.
Chris: Yeah! There you go!
Dave: I'll just make it all public and then there we go. We did it. We solved the Internet. Now I have a share button.
Chris: See. Hire Dave. Literally, he can code a button in five minutes.
Dave: Five minutes, man.
Dave: That's all it took for one button that solves the whole world's problem. You know what I mean? I just solved the whole world's problem.
Chris: Well, it kind of does. In the case of sharing, that link isn't just some crappy link that kind of shares stuff. It's like the best possible sharing.
Dave: Yeah. I'm going to put it into Notes and see what it did. Oh, yeah. Linked to my thing. Add my own text. Bingo-bango. Chop-chop. We did it.
Chris: Did Notes expand it too?
Dave: Oh, yeah.
Chris: Because I bet it has Slack. I bet it has all kinds of stuff in there, right?
Dave: Yeah. It has more. I even have a "More" button and I can choose. Oh, yeah. I could--
Chris: Share it to Discord. Let me see what it looks like in Discord.
Dave: It was not one of the options it gave me, so-- [Laughter]
Chris: Oh, boo!
Dave: Oh, here. Well, I don't know. Here.
Chris: All right.
Dave: [Grunting] Here. I can text you. Here. [Laughter] I'll send it in messages to Chris Coyier.
Chris: We got eight-- [Laughter]
Dave: Here. Then it's just the URL or whatever, so there you go. I just texted you the URL, so now you have it.
Chris: I want to see if it expands. [Beeping] Oh, yeah.
Dave: Yeah, I heard that come in.
Chris: Did you hear that beep, people?
Dave: See, I just shared with you from my--
Chris: Oh, you meta edit. You shared itself.
Dave: Yeah. I shared itself, so there you go.
Chris: Oh, and you used the nice icon. Oh, good job.
Dave: There you go. We solved it. "The Share Button" is what it's called, so there we go. We solved a Web problem today on the show.
Chris: It looks great.
Dave: Thank you, listener, for downloading this in your podcatcher of choice. Are we done? We can be done.
Chris: Yeah, we can be done.
Dave: Be sure to star, heart, favorite it up. That's how people find out about the show. Follow us on Twitter for tons of tweets a month. Don't even follow us on Twitter. Just keep hitting that share button. You know what I'm saying? Hit the share button. Go blast it out to your network.
Dave: Bam! Just blast it. [Laughter] Follow us for tons of tweets a month. Yeah, I can't think of anything else. Chris, do you got anything else you'd like to say?
Chris: Not really. ShopTalkShow.com.