401: Dreaming About Foldable Phones, RSS, and SEO
We're pontificating on foldable phones and what that means for the web, automating and finding things we like with RSS, talking about a new CodePen feature, and trying to figure out SEO.
Chris Coyier and Dave Rupert
Time Jump Links
MANTRA: Just Build Websites!
Dave Rupert: Hey there, Shop-o-maniacs.
Chris Coyier: Woo-hoo!
Dave: You're listening to Episode 401 of the ShopTalk Show. We're in the future now, Chris. I'm feeling like we're in the future. We are covered in lasers. This is great. This is just a 3D podcast now.
Chris: Yeah, I think we crossed a threshold with 400.
Dave: Yeah. We're broadcasting in VR now, you know, only VR. We're only -- [Laughter] Just our two floating heads in VR. That's what we do now. That's our whole podcast.
Chris: That's fine and if you happen to get the MP3 version of this then it's just because we used progressive enhancement.
Dave: Yeah. Yeah, it's progressively enhanced in the VR space. That's not true at all, but that would be cool. Anyway, Chris.
Chris: It was suggested that we skip Episode 404, which was hilarious.
Chris: Maybe we should do that. I don't know.
Dave: Yeah. No, I think that's a great idea.
Dave: It seems apropos.
Chris: Yeah. Yeah.
Dave: Maybe it's a surprise. I don't know. Maybe there's a surprise cooking. Winks at podcast editor, Chris Enns. Wink.
Dave: Who knows. We don't know.
Chris: Nobody will care. It just will be funny. I had a dream about foldable phones. I know they're coming out and my reaction was, like, I could care less about this.
Chris: But I think it was after Jen because she was talking about there's some CSS possibly coming that lets Web developers know how many pixels down the fold happens or something. Again, I can't grok it quite right now why you'd care about that, but okay, fine. Better to have the control than not, I guess. What do you think? Are they cool? If there was a really good one, would just the folding of it entice you to care about it?
Dave: Well, okay, so I'm going to start with a link. zouhir/spanningccsspolyfill over on the GitHub, works at Edge. Edge is proposing this for their new devices, the Duo and the Neo.
Dave: Right? That foldable phone and the foldable tablet they kind of proposed. There's an explainer. GitHub actually shows what they're talking about: a single fold horizontal and a single fold vertical.
Chris: Mm-hmm. Mm-hmm.
Dave: These sort of like pseudo-element sort of things or this is sort of like a new CSS property. The idea is, you use these and there are environment variables too.
Chris: Oh, I get it. This is a good explainer.
Chris: Because where you fold it does matter because let's say you want to show some special stuff on the left of that fold and some special stuff on the right of that fold. I was thinking more vertically but left and right almost makes more sense. Then there's an environment variable that's like, you should make the size available, for example, in a Flexbox layout as wide as that left or right section is.
Chris: That's kind of nice, actually.
Dave: Right, so I'm curious how this works. I actually tried to set up the emulator yesterday and it was like you need to be on an insider version of visual studio code and all this stuff or Visual Studio big boy, not code.
Chris: To make a Polyfill work? That's weird.
Dave: Well, to do the emulator, the Windows 10x emulator, and so I just gave up, but I'll maybe pick it up because I'm interested in this on two levels. It's new CSS. That's kind of neat. To be fair, Microsoft is a client of ours, so full disclaimer there.
I bought the iPad Pro 11. Do you know what I'm talking about, the iPad Pro?
Chris: Is it super big?
Dave: It's big and it's nice. It's beautiful. It's just a beautiful black rectangle.
Chris: Why do you have it?
Dave: Well, I like it. I like the form factor and I'm reading comics and stuff like that.
Chris: Oh, okay.
Dave: But I don't know that it's the perfect device. It's clumsy to hold. Holding it with one hand is perilous in bed because it'll just fall on your face. I'm like, maybe these folding things are cool. That's what my brain is saying.
Chris: Mine is too, kind of! The form factor is -- I don't know. It's two precious devices now and, to some degree, a foldable is like they still look great but somehow they feel like more durable because they're less precious somehow. Maybe that's the future.
Chris: Looks good but it's still just a piece of plastic, you know.
Dave: Or it's almost like a moleskin or something. One thing I always do, and this is where my brain is going -- one thing I always do is I'll listen to audiobooks on my phone. Then I'll hear something cool like some quote or something. I'm like, "Oh, I've got to write that down."
Dave: Then I open up the Notion app and I start typing. It takes forever to open but, anyway, Notion eventually opens. I start typing and then I'm like, "Oh, crap. What is it?" I go back to the audio thing. Then I rewind it. Then I play it. Then I pause it. Then I go back over.
Wouldn't it be cool if I could dictate in one side of my phone while the other side is playing the audio? I could manage them both at the same time. It's such a dumb thing, but that would give me a 5% quality of life upgrade for how much I listen to audiobooks. I'm just like, that would be cool.
But then you think of other multitasking. Multitasking on the iPad is not quite there yet. It technically exists, but it is not good. It's clumsy. Half the apps implement it.
Chris: Oh, my god. That's all the Apple world can talk about. I downloaded this NetNewsWire, which you don't have because I think it's Mac only, but it's like an RSS reader app. I switched to it just because it's nice but it synchs with Feedbin, which I know we both use, which is really nice too.
Dave: Ah, Feedbin.
Chris: Yeah, I love Feedbin too, but I really like Feedbin how it's kind of like an API hub, right?
Chris: Like I have a different reader on my phone that also synchs with Feedbin.
Chris: I use Feedbin on the Web, too. I think it's pretty good but, for the most part, I only use Feedbin as a central API hub and use different clients to actually do my RSS reading. I think that's where its value is in the middle. But anyway, there's more stuff to talk about there.
But when I signed up for NetNewsWire, too, or downloaded its app, because it's like a Brett Simmons, like inessential, it came with a bunch of Apple news sites built-in like the Loop and Daring Fireball and Michael Tsai and Six Colors, all these Apple bloggers.
Chris: I just left them all in there and sometimes it's really echo chamber-y. That's fine. I'm sure Web dev is like that too. You sign up for all these newsletters and it's the same link in five newsletters.
Dave: Right. Right.
Chris: In Apple land, that's all they could talk about for a while is multitasking on the iPad because Gruber was all pissed at it for a minute, like, "It's not intuitive. It sucks now," and so everybody is making their own interpretations of how you can do it and yadda-yadda. That's my whole point.
Dave: It's not. Well, if it exists, that's cool. I am not finding it. That's my experience. You look at a foldable device with two screens, it's literally multitasking built-in. Two windows that go full screen on each side, that's pretty damn cool. It maybe limits you. You can't do three-quarters or whatever, but can I have Twitter and an article open?
Chris: Yeah, it's a big deal. It's cool, right?
Dave: That's kind of way too much noise, but that's cool. Yeah.
Chris: It is. Oh, yeah.
Dave: Or you think of an RSS feed. You have your RSS reader and then you just spawn out to the actual article. How cool would that be? You operate the reader and then you click the link and you go to the thing.
Dave: It opens Safari and then you go back and it's just gone forever, the thing. [Laughter]
Chris: I mean I probably used the swipe up application switcher on my phone like a hundred times a day and probably half of those circumstances are situations where I wish I could leave one of the apps freaking open for a minute while I do the thing in the other one. I think if you really got multitasking right on the iPad, it would potentially even sway me to get it. I've had all kinds of iPads, but I get them and then I just don't use them, which I know is terribly wasteful and stuff. It ends up being my daughter's iPad or Miranda gets a new one because it's really because I wanted to see the new one, but I have never made it part of my life. Maybe I don't read comics enough or whatever, but I can never seem to get it into my life.
Dave: $60 a year for Marvel unlimited, and there you go - every comic you'll ever want to read. No, there's -- I mean, yeah, if you don't -- comics is a big driver for me. Watching eSports, having a private eSports device was helpful, too, because you know your kids. They're watching Daniel Tiger or whatever at max volume and your fricken' living room and you're just like, "Could I just watch this YouTube video?" or whatever. I'll just sneak and earbud in like a deadbeat dad and just watch my Overwatch league.
Again, these are just excuses for why I bought it but, also, there's something to be said. Remember when the iPad was announced, right? It was different. There were chairs on the stage.
This is an Apple podcast now. Sorry, everybody. Two wise guys talking about Apple.
The iPad was announced. A chair sitting on stage and Steve Jobs sits in the chair and pulls out the iPad or whatever. The posture of the iPad is different. You have the phone. It's up in your face, right? You're like--
Chris: Right. Right. Right.
Dave: "This is so cool." You know? But the iPad, you don't want it up in your face. You want it kind of opened and broad. I feel like those are two different postures, to me. Almost to my family I'm saying, like, "Oh, I'm on my phone. I'm not open to conversation," but when I'm on my iPad, I'm open to conversation even though I have one earbud in and I'm watching eSports or whatever. [Laughter]
The posture of it, I think, does communicate something like, "Hey, you can interrupt me. I'm just reading something." You know? I feel there's a subtle difference but it still is device time, technically, and you get wrapped up into it.
Chris: Yeah. Yeah. It's who you are. If that posture is good for your day-to-day usage, that's cool. I find sometimes there's some small fraction of my life where I'm in that mode. It might be on a plane or something. So often, even if I'm on my phone, I'm looking at RSS articles and then immediately my brain goes into, "Ooh, I need to--" like you, I need to write down that quote or make sure this link gets saved in a good way that I know what I'm going to do with it. I just kind of jump into work mode. I feel like a multitasking environment might work for me better that way so that I can have that chill posture but if I need to flip into a much more common for me mode, which is like I'm chillin' but I'm also doin'. [Laughter]
Dave: Right. I would be curious what percent of your job as Chris Coyier, Editor of CSS-Tricks or CEO -- what's your -- I don't know what your CSS-Tricks title is.
Chris: I don't know, dude. I started it.
Dave: Starter of CSS-Tricks, like what percent is reading industry articles and just kind of mentally filing that and tagging it, maybe in Notion or something.
Chris: Yeah, some hour a day-ish, at least.
Dave: Hour a day-ish, right? Just kind of keeping up, you know.
Chris: But I also like it, you know, like I think a lot of us do. That's just the paper for me. But I just tend to approach "the paper" with some business attack, too. Like this article is interesting, but it's useless to my enterprises. It's somebody talking about, like I was reading -- sometimes it takes me a while to decide about a tab.
There was a great article I thought about design critique and I was like, I like this. What can I quote in here that would make it good for CSS-Tricks? I'm like, I don't know. At the moment, it's nothing but I'm not ready to close the tab yet because maybe my brain will spark something or I'll read something that connects to it. Once I have two posts, then it's more worth it. That kind of stuff happens a lot.
Dave: No, I mean as dumb as it is, part of your day is researching articles and I feel like that's part of my day, too, just knowing about new CSS--
Dave: --so that I can integrate it into client work and stuff like that. I think, for me, the posture is very important in having a casual device that can do the posture. Right now, the iPad or a Galaxy Tab might be good too, but that's the best device. I'm really interested in this next class of device.
Chris: With the folding?
Dave: The foldable.
Chris: Yeah. Yeah.
Dave: Because you just put your thumb in the middle. It looks like a book and then, oh, somebody gets your attention. Splat, close it.
Chris: Just close it.
Dave: Clamshell it shut.
Dave: Just be like, "Yes, talk to me.
Chris: It is. It's the future, isn't it?
Chris: It's cool. It's going to happen.
Dave: I think it's a future. Is it really practical right now and do all of the folding devices from Samsung and Motorola have huge problems? Yes. [Laughter]
Chris: Yeah, but of course they do. It's early.
Dave: Yeah, it's early days. I think Microsoft, they said they kind of skirted all those problems by putting the fold in there, having that gap. There's going to be design problems. You pull up your homepage, I think of the Paravel homepage with an animation on it of a Paravel sitting by a campfire or whatever. It's going to get chopped in half and have a bezel right in the middle of the website. That's not going to be good for our website.
How do we respond to that? Is there a way we can, I guess, adapt to that well? I'm just kind of curious.
I think the right answer or the lazy or probably the easiest route--that's what I want to say, the easiest route--is they can just deal with it. That's their fault for buying a device with a fold in the middle. I very much feel that, but they can put it to one window or one piece of glass if they want. Now my brain is starting to spin on, like, what sort of stuff could you do to make a better experience?
[Banjo music starts]
Chris: Hey, ShopTalk Show listeners. This episode is brought to you in part by Clubhouse. That's Clubhouse.io. I like what they have written about themselves, so let's roll with that for a minute with light commentary from me.
Using project management software can be a job all to itself. Not so with Clubhouse.io. Here are some words that describe Clubhouse: fast, intuitive, purple, flexible, rectangular. Usually, its shape really is actually dependent on the size of your browser window, but you know. It's still a rectangle. Enjoyable: Well, at least as enjoyable as project software management can get.
Does this sound like the project management software you're using? If no, that's not nice. If not, well, I mean it's nice for you if it's all those enjoyable parts. It's not nice for you if it's not. If not, there's a solution. Use Clubhouse.io.
Let's look at some other highlights. This is a sponsor spot for Clubhouse, you know. They're very clear about that. Fully customizable workflows. Each team can set their own workflow states to ensure that Clubhouse matches their own approach to tackling projects. Personally, to me, that's huge. We have our own states. Even project-to-project, it differs a little bit, so customization there - clutch.
Advanced filtering: You can quickly and easily drill down to different projects and teams to see how everything is progressing. No team's work is hidden in a silo. Sprint planning: Set your weekly priorities and let Clubhouse run the schedule for you.
Integrations, you know, with stuff like Slack and of course there's all that stuff. You set the task using a pull request and preview designs with Figma links. Build your own integrations with an API. Awesome. Awesome.
Really nice collaboration. Enjoy a drag and drop UI, emoji reactions, dark mode. It's like an app that was built in 2020, believe it or not. Love that.
Clubhouse, because you shouldn't have to project manage your project management. Give it a try. They gave us a URL, clubhouse.io/shoptalk. That's two free months of any paid plan. Generous of them. Try it out, clubhouse.io/shoptalk.
[Banjo music stops]
Chris: We're RSS people. It probably is obnoxious. [Laughter] Not obnoxious, but I don't know. We talk about topics too much sometimes. Although, I don't know if we talk about RSS as much on this show. It just comes up in chat a lot.
Anyway, for most people on Earth, RSS is this, like, "What?" You probably are blissfully unaware that RSS powers things like podcasts in their entirety.
Dave: Yeah. Surprise, listener. You've been using RSS the whole time. [Laughter]
Chris: Yeah. I like it for its really basic, nerdy function of, I can subscribe to your website in a central location. It's not a newsletter. It's just your site. You publish stuff and I read it in my reader.
Sometimes I'll read it on my reader. Sometimes I'll pop over to your site. Whatever. But it allows me to keep up with the industry and, thankfully, enough really nice websites and a lot of dev websites, particularly, still have RSS feeds. You get one for free. I think even Gatsby has it for free, but I don't know how many Gatsby sites I read, but probably several. WordPress, Drupal, the big CMSs, you just get it for free, so thanks.
Chris: Anyway, Feedbin, like we were saying, we both use because it's pretty nice. It has this feature built-in called starring, which is just a little bookmark kind of thing. Google Reader had it back in the day too. I don't think it's fundamental to the tech of RSS, but it's becoming a pretty standard bolt-on feature for RSS readers. Anyway, you discovered that you can flip on a little -- this is very meta. If you flip this switch in Feedbin, you then get another RSS feed of the things you starred.
Dave: Yeah, so I figured this out. I don't know why I was in the settings, but I was like, "Hey, wait. What? I can get a starred article feed?" It gives you a feed of your RSS likes. It gives you an RSS feed of your RSS likes. I took that feed and I used an article I saw on CSS-Tricks about getting XML feed.
Chris: Which is not what I was imagining at all, but that's cool. You used that little parsing thing. Yeah.
Dave: Yeah, like an RSS parser. What was it? Yeah, it was an RSS parser, or whatever. And so, I just was like, "Well, there it is.
Dave: No, I mean I would have probably been like, "Oh, god. I need some NPM thing, like XML to JSON or something."
Chris: Right. [Laughter]
Dave: Then I just was like, "What the hell am I going to do here?" But then it was serendipitous that you had posted that article two days before I discovered this feed was here. We're working on the Paravel site, but we're going to pull some ShopTalk episodes into the Paravel site or whatever because that's something I do. It was just like, "Oh, hey, I can do that! Now I know how to do that." Anyway, it was very cool, very serendipitous.
Chris: Yeah, you could probably do it in Node, too, if you wanted to not have it be a client-side thing all the time or whatever.
Dave: Yeah, yeah, and I think some other people have started picking up on this and they'll pulling their feeds in. But I'm doing a request every time because -- I don't know. It's probably a dozen requests or whatever a year.
Chris: Yeah. Yeah, who cares? Right.
Dave: Not a super big deal. I'm sure Feedbin will call me if it gets out of hand. I like the idea of a preprocess build. When you're going to Netlify, you just say, "Hey. Go grab this XML. Pull it all down," and then you could convert it into JSON, stick it in your data folder, and there is it.
Chris: Right and now you have this really cool portion of your site that's just publicly showing you things that you've liked. Now that's cool for you because, hey, it makes my personal website way cooler. It's cool for me because that's absolutely fascinating to me, especially us fellow tech people.
Dave: You joked. You joked, though.
Dave: You said I like too many Verge icons.
Chris: Well, your likes feed was saturated with Verge likes.
Dave: Just so much Verge.
Chris: [Laughter] But of course it is, isn't it? Don't you want to know what your friends are liking on services? That's what makes Twitter and stuff so addictive. Well, I don't mean to paint this in a bad light. I'm trying to paint it in a positive light. It's super cool to know what your friends are into. That's even extra valuable to me as a light journalist. That adds some extra weight if I know Dave is particularly interested in something.
Where I'm going with this is that, well, of course, now I can subscribe to your feed. I see Robin Rendle did it too, so I can subscribe to Robin's feed of what he likes.
Ideally, I'd subscribe to a ton of people's but then this is pretty manual, right? I'm subscribing individually to all these likes feeds. It'd be nice if it kind of aggregated it, wouldn't it?
Dave: Mm-hmm. Yeah.
Chris: Or it was more of a built-in feature of the thing. If I follow enough people, I'm going to see repeats all the time.
Anyway, I just like this and I wanted to bring it up. If other people want to do it, that'd be cool too. We could have a little likes party and just see what people are liking. It's super-low effort. To some degree, that's what subscribing to CSS-Tricks is, too, is I'm sharing with you stuff that I really liked and I'm doing it with context, links, and stuff. I'm not trying to undermine that too. That's my actual likes feed, essentially, is my own website.
Chris: But this is low effort.
Dave: Yeah. Yeah.
Chris: I click a button and it's on there, so that's cool too.
Dave: That's what I'm getting out of it because it's almost like sharing. I'm sharing this on Twitter or whatever. It's like, "Hey, everybody. I like this enough to star it, just like I like it enough to tweet about it. It's like a social network where we didn't have to talk to each other and you don't have to follow me in real-time. You can just catch up on a weekend or just mark as is read and get away, like you never had to talk to me at all." I love that aspect of it.
It's so calm to me just not having this pressure to keep scrolling a timeline. Right now, Andy Bell, I've got 23 unread stars from him, 11 unread from Robin. It's like, I'll get to them. I'll figure out what they like later.
Chris: Oh, you did subscribe to their likes feeds?
Dave: I subscribed to their likes, yeah.
Chris: Ah! Good for you.
Chris: I haven't actually done that yet because everybody is doing something visually cool with it. I was like, eh, I'll just -- because chances are we all subscribe to the same crap. I don't know.
Okay. Here's another extension of where I'm going with this, though, because obviously there is something more exotic you can do with the nature of multiple feeds and combining them. This is brand new. It happens to be live on production CodePen right now, but I haven't talked about anywhere at all, yet. It only went live yesterday.
Chris: Check it out. It'd be interesting to get your first impressions. If you go to CodePen now and click onto the following tab -- you know you've been a member of CodePen for years so, presumably, you follow at least a few people, right?
Dave: Mm-hmm. I follow a few people, yes.
Chris: Yeah, I mean, ideally--
Dave: So, I am now in my following section.
Chris: Here's the thing is that following has kind of sucked on CodePen for a long time because it was just so basic. It was just like the following tab was just like straight-up chronological, whoever you follow, whatever they publish, just here it is. You know? I think that's largely fine, but this new experience is a little bit more.
Bear in mind, this is our very, very, very first crack at this. It's going to get a lot more interesting as we go. It's giving you, hopefully--I can't see what you're seeing, but probably--some more context as to what other people you follow are liking and adding to collections and what they're doing on the site.
Dave: Yeah! I see things that you've liked. I see things that you posted. I see a fork that Christopher Schmidt did. Then I see a -- I see Sarah Drasner's stuff. Yeah, I like -- you're putting likes or loves, I guess, into this feed.
Dave: That's very useful for me, actually, because I could maybe discover what you liked, I feel like, or maybe I just would go to the top picks. But knowing what you liked is actually pretty cool.
Chris: What's notable here is this is not algorithmic. This isn't us being like, only show Dave things that the computer behind the screens has determined that Dave will like. In fact, I want to do that and we are going to do that. That's going to be kind of a different experience.
This is a little bit closer to chronological. It's just giving you some context as to what your friends are doing, too, and sprinkling it in with some of that likes and activity kind of stuff. It should just be way better, I hope.
The way that this works, why I've related to it is that everybody's stuff on CodePen can become programmatically like a stream. It's just a stream of stuff. Then we can make other streams that are combinations of other streams.
Chris: What you're looking at is a unique stream to you but all it is, is a programmatic pointers to other streams and combining it all together and then some magic behind the scenes to aggregate stuff. This is just our first crack at this. It's going to get a lot cooler.
The company behind this is literally called GitStream. I think they're just called Stream, but the company is GitStream. I don't know. it's early days for us but that's their whole vibe in the world is we do the magic sauce behind making streams of stuff, them combining them in interesting ways, and then giving it back to you. Then we send it through our APIs. There is all kinds of magic behind this. I’m not sure I'm talking about it all that well.
Dave: No, I think it's kind of like, so you're using a third-party then to sort of marry these two streams together. Yeah.
Chris: Yeah, because it does some stuff that's programmatically hard to do that they kind of get right and moves the computational load off of our back.
Dave: Yeah, well, I was going to say it's almost like -- oh, my gosh. I just went to Cassie Evans's CodePen profile. Holy-moly.
Dave: Like 3D blobs moving around. Nice job, Cassie.
Yeah, I think of, like, you can run your own search where somebody types a letter and you go fetch every result that contains an S in the title. Then you do it for when they type S-T. You can run a search like that on your own database, but it will just murder your database that everyone else is using and stuff like that. You almost want to keep search outside of it.
Then these little stream things, too, is very similar. You almost want to keep that outside of your main database. Are you going to run a cron job or a task or a rescue operation every time somebody hits save on something or likes something? Are you going to do the whole loop and update 10,000 people's feeds? No way!
Chris: I know.
Dave: That's cost-prohibitive.
Chris: I know but make somebody else do it for you. [Laughter]
Dave: Well that's for those sort of heavy kind of database things. I guess you'd call it an ON JOIN, right? ON2? It's a pretty significant JOIN. You have a list of followers and you have a list of likes. Then you have a list--
Chris: Oh, yeah.
Dave: There are a lot of things coming in together.
Chris: In our case, there are eight-some-things you can do, at least, and ideally more. The more information it has the better, in a way. Yeah.
Anyway, what if there was an RSX experience? I think Feedbin is probably the company that makes the most sense to impose this kind of thing, although I'm sure Feedly is doing similar things. I don't know. I just click better with Feedbin than Feedly, but I know probably more people use and like Feedly.
Dave: Mm-hmm. Mm-hmm. Mm-hmm.
Chris: But if I follow you, Andy, Robin, Sarah, Val, Rachel, Jen, Ethan, and all these people on RSS, not only what they publish but what they like, and then saw some kind of aggregate feed rather than having to look at everybody's feed individually, that's so cool in a sense that I don't know that even Google Reader ever got there. I know people lament Google Reader, like its interesting social features and stuff, because you could star stuff, comment on stuff, and kind of see other people's stuff. But I don't think it did it particularly well.
These days, you could do so much more with these aggregated streams. Let's bring that back. Somebody get on that.
Dave: No, it'd be cool. Yeah, like even just boiling it down. The nice thing about RSS is it's all casual. It's on my own time or whatever. But if you could just get -- every click is precious, so let's say there's a 50% overlap between all these likes feeds I look at or even articles that I've already liked as well. Maybe those just go away. Just a little bit of data handling and then it's like, "Hey, here's your RSS social." Let's make an RSS social. [Laughter] But then I also think it would be cool if you could comment on these things.
Chris: Let's make -- yeah, why not?
Chris: Yeah, but then isolating that to a walled garden is weird.
Dave: Well, and RSS is so much like, I want to see this and never see it again. [Laughter] You know? Unless I star it, I just want to never see it again. The idea of, I have to go into my RSS reader to keep up on a conversation would just drive me insane.
Chris: That's a little weird. I wonder if Webmentions could factor in there. That's almost the problem with Twitter, too. It's so big and there are so many Web devs there that good conversation is had there and good conversation around particular URLs but they're disbursed. All that stuff gets to me as somebody, like, "Well, you know I run CSS-Tricks." I wish I could take the best of what commentary that people had put on Twitter and also anywhere. Who knows? Facebook. Who knows?
Chris: On their own site. Put that into the comment thread so it's not lost.
Chris: It's still like, "Oh, that person had something interesting to say from Twitter. I should put that here." If you're a big enough site, I think it would make sense to have some kind of full-time role that did that because it's so fragmented these days and that can be potentially so valuable, but I can't do that.
Chris: I don't have time or budget for that. I want it to happen programmatically. That's kind of the promise of Webmentions, but I've never seen anybody pull it off well enough.
Dave: Yeah. Yeah, Zach Leatherman has Webmentions on his site. Funnily enough, I found a bot was transpiling his thing, using his thing called snarky to kind of Sponge Bob case all the text and his Webmention was ending up in his Bing search result or whatever when you look for an article.
Chris: Oh, my gosh!
Dave: It was his article tech but in this snarky text. It was sort of like a weird malfunction. I think it's all been resolved.
Chris: We've got to be careful about that.
Dave: Sorry, Zach. I wasn't calling him out but, yeah, it's kind of like, oh, if all these Webmentions come in and now it's a cannon, what do you do? I don't know.
Dave: You can fix it but then how do you fix the search engine? Can you just call Bing and be like, "Hey, Bing. This is Dave. Fix it."
Chris: Yeah. Yeah, is there any HTML attributes? There's ARIA hidden for screen readers, but then there was also ones for not a screen reader but a screen reader, you know, like the little button, reader mode.
Dave: Uh-huh. Okay. Yeah.
Chris: There used to be attributes that are like, reader mode ignore. That's not what it was but there was attributes specifically for that to teach the page what's not important. Are there SEO ignore tags or things you can put on your page that say, "Search engine, this is not -- don't worry about this. No index." [Laughter]
Chris: No index, but just this attribute.
Dave: I think you just do H1s, a bunch of H1s.
Chris: I don't think so.
Dave: No, I don't know.
Chris: I don't think there is, really.
Dave: No. If there was, people would exploit it. You know what I mean?
Chris: Yeah. Don't even mention -- although, why? If you put no index on something, how is that exploiting anything?
Dave: That would be cool if no index could be on whatever.
Chris: Data no index.
Dave: Don't index these comments. This is a garbage fire. [Laughter] Please don't.
Chris: Yeah. I don't know what kind of value I get after that. After all these years, I always kind of thought, in the early days, that it's like, "Oh, free content! You're doing SEO for me! Thank you, readers."
Dave: Yeah. Oh, yeah.
Chris: But are you? How many people end up finding a post and does it hurt you sometimes? Now Google reads your page, but Google reads your content and all these comments. If the comments are kind of lame, does it dilute the value of the original post?
Dave: Yeah, I wonder. Well, and keyword stuffing and all that, you know. Did somebody over-comment certain keywords?
Dave: Now you're de-ranking yourself.
Chris: I don't know.
Dave: I don't know.
Chris: You'd think this is the moment where we should be like, "Let's talk to an SEO expert," but I have such trepidation there. Does anybody actually know? I don't know. It's such secret sauce that I don't care if you're an SEO expert. I know that Google doesn't tell you exactly what to do, so you don't know either. You know as much as I do, which is nothing. [Laughter]
Dave: Unless it's Matt Cutts from Google--
Dave: --I really don't care. [Laughter] I guess he's at the USDS now, but unless it's that. Yeah.
Chris: I just saw one. I just saw a post just this week in RSS. I subscribe to some SEO blog or something. It was like, do your header tags matter? They were like, "No, it doesn't. It just matters that it's a big piece of copy at the top of the page." Instead of using headers, you used a div and made it big and bold and put it at the top of the page that Google wouldn't even care. Your header tags are irrelevant.
They ran one test where, instead of a div, it was just an H2, so like on their whole site they didn't have any H1s on the page. It was only H2s at the top of the article and changed it or something and were able to A/B test it. It made no significant difference at all, which was sad because there was no mention of accessibility anywhere on the entire page. They're just like, "It doesn't matter. Use whatever header tag you want. Boop. End of story."
Chris: I don't know how that plays out exactly but it was interesting. It wasn't exactly statistically significant data, overall, on the Web. Maybe there are some other reasons why this particularly one website didn't change rankings over time. Even when there's data, I question it, is my point.
Dave: Well, so here I just ran my site, daverupert.com, which is the premier website example.
Dave: If you ever need an example.
Dave: It's perfect. Ran Lighthouse SEO, you know, has a little SEO thing.
Dave: The reports are like, "Has a meta viewport tag." Okay. [Laughter] "Has a document title." Yep. "Has a meta description." Really? I do? But okay, sure.
Chris: So the bar is pretty low here for SEO.
Dave: Yeah! "It has a successful status code. Links have descriptive text. The page is a block. Robot text is value. Images have ALT attributes. Document has a hreflang?" What?! Okay. Sure. Yeah, I do. "Document uses 100% legible text. Avoids plugins," which is not true because I have fricken' -- I don't have Flash, but I do have Disqus on my site. I don't know, but anyway. I don't know, man.
Chris: Mm-hmm. Did you get 100%?
Dave: I got 100% on my SEO. Of course. Naturally. You're talking to Dave Rupert of Dave Rupert, LLC.
Chris: I wonder -- I'm nervous.
Dave: [Laughter] Yeah, up your SEO game. I wonder how SEO is now. I know it's like, get your meta. Get your keywords. I think a lot of SEO is now into this content strategy game. Make a page for every business location so that that page gets indexed. Dave Rupert Chicago is very high up on Web developer Chicago. Just make sure your title has those words you're looking for.
It's sort of like the SEO is more like targeting, almost. You look at Google AdWords and you pick the ones you want to be in. Then you target those. Then you key your content to that almost like you tune your content to match, overcome, overtake those keywords. That's cool, I guess, but you've got to really know what people are searching. I think it's marrying this idea of what people are searching versus how your content can meet those needs. I don't know how CSS-Tricks, but--
Chris: I got 100. Thank God.
Dave: Yeah. Good job. If somebody was like, "Oh, man. React is super-hot. You've got to post React stuff," you're going to want to make sure you've got React on the front page just so you index well for that or something. I don't know. I think that's kind of modern SEO is, like, figure out what people are searching for and then try to meet those searches.
Dave: I think the days of tricking Google are over. I could be wrong.
Chris: Yep. Yep. Yep, I mean there's one way to really do great at SEO and it's just to be super passionate about one particular niche subject and blog about it for a decade.
Dave: [Laughter] There you go.
Chris: Your SEO is going to be pretty okay; I promise. That's a tall order and people can't do that. Hence trying to not trick it, but a little bit trick it by producing less content and somehow getting a bunch of links back. I don't know how that all works exactly.
At the same time, I feel like if I dug into it, there's probably a lot to learn that I could benefit from. Even the nature of. I was looking at this tool the other day that was like A/B testing a title alone. Just that one job.
Chris: "The Complete Guide to Flexbox" does good for us, but what if I called it just "Complete Guide to Flexbox" and removed the word "the"?
Dave: "Flexbox: A Complete Guide."
Chris: Yeah, why not A/B test that and see? Are there enough gains to be made there with just running those types of tests that it's worth somebody's part-time/full-time job, just title testing or that type of thing? I wouldn't want to do it in some kind of client-side tester kind of thing, but I think there are nicer ways to do it.
Dave: My friend James works at an A/B testing company here in town. They do a lot of that, but all different kinds. I think a lot of A/B testing is valuable if you're a company of significant size. You should definitely do it or consider it. You could test a new design and stuff like that, but then you're going to spend so much time. You might just want to launch the new design and then get qualitative feedback. [Laughter] You know? Put something out there. Get feedback. Then iterate and make it better. Just keep doing that.
I feel like, in an organization that's maybe risk-averse, like, "We can't mess with this money machine or else the stock market investors will get mad and then we look back." I think that's fair and you have to kind of then -- it's like, "Oh, you're risk-averse? Cool. We have to install this A/B thing that makes our site slower but we can test features before they go out, or something like that, or test redesigns or test headlines to see if we can crack something. I don't know. Very rarely does it work.
Chris: I think it clicks with me because I'm like, you know what? Honestly, I wanted to publish this blog post so I just wrote it and did it. I didn't sleep on it and think about the title and stuff. Often, if I come back a week later and look at the post, I'll be like, you know what? I'm going to update that intro. That title isn't quite right. Even the slug, I feel like I could have done a better job with. When you come at things fresh, like anything in the world, but this is just an example, you tend to have a little bit more clarity on what very likely would just be better.
Dave: Mm-hmm. Yeah.
Chris: It's so tempting then to look at your whole archives and be like, "Gosh, what if I approached a wide swath of this with totally fresh eyes? How much value is there to be unlocked there?" It's probably a lot.
Dave: There's some value to testing this stuff to learn because you hear about the, "Oh, we moved this and we made a million dollars."
Dave: We moved the button.
Chris: There's that.
Dave: You know? But there's also value in learning what doesn't work, if that makes sense. We ran A/B testing for a billion-dollar pizza company. I think some of the best tests for me, although we did have big moves, but some of the best tests were like, "Oh, this actually does nothing," or, "This does negative sales."
Dave: We should not spend the next six months building this because that's bad for the website.
Chris: Gosh. Yeah. If you have enough of those build up over time, you're learning this secondary lesson, too, which is that that A/B testing alone is not that -- if you're not using it to unlock positives, then maybe don't do it at all. You know?
Dave: Yeah, well, but there's also value in, I guess, locking up negatives, figuring out what are the negative repercussions so you don't have to do those. Maybe you could do a thing like, "Oh, it turns out titles that don't have verbs do poorly," or something. What's the one? If there's a question mark in the title, no one reads it. Something like that. You could test these theories out or these cliches or something like that. You can mess up the subject/verb agreement and just see what that does. [Laughter] I don't know. Just see how good you can make it.
Maybe I could do that. I could do an A/B test where I write an article and then I make a branch and I run that article through an editor who actually edits the article. [Laughter] Then do an A/B test on which one converts better. Maybe I should do that. We'll see.
[Banjo music starts]
Chris: Hey, ShopTalk listeners. This episode is sponsored in part by Frontend Masters. Quite literally, that's the URL, frontendmasters.com. It's online training for all the best in front-end engineering. It's like they've picked some of the best, hottest, most important topics happening in front-end and bring you courses on them. But not just courses from anybody. They bring you the best names in those technologies.
What's kind of cool is, they teach it live, so there are students in the room. It's being recorded all high quality. There's just a nice vibe to it. Then they turn that experience into video that's available to you and me and everybody who subscribes to Frontend Masters.
It's not just courses. They have learning tracks and stuff, too, if you need a little guidance on what to follow and what to do. They have an incredible app for your phone. It's like the thing to subscribe to if you're trying to level up your front-end development skills.
If you're like, "What should I do? I want to get hardcore into front-end development. What is the place to subscribe to and learn and the place where I should be doing my learning? It's Frontend Masters, for sure.
Look at this D3 course with Shirley Wu. Incredible. Shirley is amazing. She's who you want to be learning this stuff from.
The best teachers out there, the best content out there about front-end development. Check out frontendmasters.com.
[Banjo music stops]
Chris: Uh, anyway, maybe we should actually answer a question from somebody or something.
Dave: Let's do a question.
Chris: If your stipulation is, "I want to use absolutely nothing else at all," then you can't. I think that's whack. I do not understand why there is no--
Chris: --why there is no include kind of thing in HTML. That's what an image tag is, right? An image tag is, "Go get this image and put it in the HTML." That's what video is. That's what object is. All these tags in HTML. That's what a link tag for CSS is. "Go get this resource and apply it to this document."
Why is there none? I'm sure there is a great reason for this. It just totally alludes me. A tag that's, "Go get this HTML and plunk it into this document."
Dave: Yep, it's silly. I think it's just -- I don't know, man. That's why people use PHP. That's why people build static site generators. It's purely for this purpose.
There is not a way. HTML imports was the way, was the future, but that died a terrible death. There is, if you're into Web components, you'll have to include one script tag, but it can be an unpackaged script tag, called html-include-element by Justin Fagnani. I hope I got your name right, Justin. This is just basically, like, it goes sucks up the content and spits it into the page where it was, like in Shadow DOM or something like that. So, html-include, it looks like HTML, html-include-source-my-file.html, and it'll plop it right in there. I think that's the best option, really, like a fake iframe, kind of.
Chris: Oh! That's a good idea.
Chris: Or a real iframe.
Dave: You could do a real iframe, but then you've got to know the height. Now you just hurt your whole….
Chris: Wasn't there some whispers of some kind of auto-height iframe out in the world?
Dave: Oh, man.
Chris: That would be cool. Seamless exists. Doesn't Seamless exist?
Dave: Seamless exists, and I thought--
Chris: But Seamless is about inheriting CSS and stuff.
Dave: Yeah, and I thought it was going to solve the problem but I don't think it did.
Chris: Yeah, maybe the browser support isn't agreed upon entirely.
I was just thinking about this. I'm working on this new talk and I have no idea if this will make the final version of the talk or not but I was like, I'm going to start with my classic laundromat thing. Let's say you're making a website for a laundromat, which should be about the simplest website in the world because anybody visiting that website, they have pretty low expectations of what they're going to find out. They probably just want to know your hours and where you are. That's it. Okay.
I've made this site now like ten times because I think it's fun to experiment the different ways. But let's say you really are going to do it. You want to have three different HTML pages. Harry specifically said no PHP, but PHP is an option. Includes, you know. Includes are great.
Chris: I've used PHP just for that.
Chris: You know Zite supports PHP? If you need a little cloud little banger because sometimes you're like, "Oh, I want to use Netlify, but I really just need a little PHP," done. You can't use Netlify then because they don't support PHP. Zite does.
Chris: Cool. Now you have a Netlify-like experience that's PHP.
Dave: That's interesting.
Chris: But then there's also 11ty and things like that.
Chris: Wiring up and include in 11ty, you don't need anything other than 11ty because 11ty supports Liquid. That's the default engine in it. It used to be Nunchucks. I liked Nunchucks better but whatever. It's Liquid.
Chris: Liquid has includes, so out of the box you can do it and I think I even wrote about this one because I was so fascinated by it. You knew this long before I did. You don't even have to install 11ty. You can write NPX whatever 11ty, and it executes 11ty without any NPM install. You don't even need a package.json.
Chris: That's crazy.
Dave: That's a critical feature in my book. It's that feeling of, like, I'm not super tied to this dependency. That's the feeling it gives me. It's not this. It feels like a lightweight build process, but I'm sure it's still megs and megs, but I don't know.
Chris: Of course, you should install it. Just install it. It'll be way faster. There's no problem to install it, but it's cool that their default, it talks to their philosophy that you don't even need to install us for cripes sake. Anyway, yeah.
Dave: Well, and how many times have you been like, "Oh, I have Gulp 4 on my system."
Chris: Oh, my god.
Dave: "That's like Gulp 3. Now everything is biffed."
Dave: The thing does not work. That's a problem. If you use MPX it's like, nope, everyone is using the same remote one, whatever … Internet.
Chris: I didn't even think about that. That's cool.
Chris: Gulp, that's a great example because it kills me. I have it fixed now but Gulp 4 is way better. You want to be on Gulp 4, for sure. It's just a better place to be.
Dave: Getting to Gulp 4.
Chris: Yeah, especially if you have a long history of Gulp 3. It's a mother.
Dave: Yeah, well, because there are plugins. They're like, "Sorry. I only do Gulp 2," and you're like, "Damn it!" [Laughter]
Chris: Yeah, well, because there are two things at work. The CLI is now like, it's either built in or not built in. I can't remember which traction they went.
Chris: You're going to have some problems.
Dave: That's right.
Chris: Anyway, I've fixed it now. Now I'm kind of a fan again. But it's like, well, it was broke, which it was broke on my machine for like 18 months. It wasn't a little struggle thing I went through. I struggled and then I gave up. [Laughter] My version of giving up wasn't even to give up on Gulp. It was to go back to version 3 because it worked.
Dave: Yeah. [Laughter] Yeah.
Chris: Anyway. Harry, if you don't want to install anything, that's an option too. Technically, it's another language and you said no other languages. But if you're down with a little bit of Liquid and NPX, that's a way to do includes.
Dave: The other thing I can think of is you can download a copy of Dreamweaver MX 2002.
Dave: And create a .tpl file, a template file. That's your template.
Dave: You can do that but it may inject some layer elements, which are not standard, but that was due to the software at the time. It did its best, but you can use Dreamweaver MX 2002 from Macromedia. Thank you, Macromedia, for sponsoring this episode of the ShopTalk Show. We really appreciate it.
Chris: Oh, hilarious.
Dave: Oh, man. Shoot, man. We should do another 2000 episode, flashback episode.
Chris: Oh, yeah. That was….
Dave: Where we had sponsors from like Dreamweaver.
Chris: I saw that episode the other day because our new website is going to have these ideas of collections of shows that are related.
Chris: Including one collection that's going to be our "Hello, World" collection, which, if you've never heard of the show before, these are the episodes you would listen to. I like that because I've done that on other podcasts before, like, "Oh, there's so much stuff on this podcast. What are the good ones?" I hope people will find it that way. That episode should totally be in there because even if it's the first episode you ever listen to of this show, I think you'd appreciate how weird it got.
Dave: It sort of sets the tone. It sets the tone.
Chris: Yeah. [Laughter]
Dave: I'll never forget when Alex Sexton called in. Oh, man. That was great.
Chris: [Laughter] We should try to do it in the year 3000 too. We should do a few.
Dave: Oh, shoot! [Laughter] Oh, my gosh! Oh, wow. The year 3000, man. Okay. I'm ready. I'm ready.
Chris: Oh, my god. That would be weird. That's kind of how this episode started….
Dave: Yeah. No, I'm feeling in the future, VR websites or VR podcasts.
Chris: Well, we got to one question and none of the things on my list of things to talk about. Oh, no, we did a few things on that list.
Dave: Hey, it's a question and answer podcast.
Chris: You pick the last one.
Dave: Not questions and answers. Okay, here we go. Here, this might be a good little ender.
Steven Bennet writes in, "What are your thoughts on new design tools like FramerX? If you have no idea what I'm talking about, think of it like Sketch Figma but all the components are available to UI/UX designers or artifacts of React code defined by React code. This really brings the whole single source of truth to fruition." Have you played around with React plus FramerX?
Chris: Only a little. Have you?
Dave: Yeah. No, I don't have any active React projects.
Dave: But it is interesting.
Chris: So, you don't necessarily have to care about React. You could just use it in a Figma-esque way.
Dave: Oh, I guess so. Yeah. I think it's good. I think bringing -- I think closing the gap is good. I would be curious to hear from almost like a two-part show. Part one: We interview a designer and they tell us how much they love it. Then part two: We interview a developer and they just tell us how much they hate it to death.
Dave: You know? Or something. Not to build more animosity between designers and developers, but I just wonder. Every time I see a thing, I'm like, "Okay, where does this fall short? What do I not know right now?" Does that make sense? What piece of information do I not know right now that would cause this to fail or not be as fluid deployment?
That said, it's pretty cool. For me, it's really important that designers can contribute to a process and they feel like they can contribute something that gets closer to production. I think that's very important to feel. But does it create more headaches? That would be my only question and I don't know that answer.
Chris: An interesting part of this question that made me want to pick it and add it to this show was the last sentence. "This really brings the whole single source of truth to fruition." I think that's interesting to dig into.
I'll say I've played with FramerX a little bit. They have sponsored me before, too, and I'd done an article and a video about it. FramerX also has a motion library for React. That I will unequivocally say is awesome, I think.
Chris: If you're doing animation in React, it's free. It's just an NPM thing. It's nice. It's a good syntax for animating, period, and a reason to use it at all. And it's what FramerX uses internally. It's just that FramerX then gives you this ability to drag stuff around and be all Figma-like about it.
Dave: I think that's cool then because you have your whatchamacallit. You're already using Framer's animation. I feel like if you weren't, this would be the kind of thing. If I'm not using Framer's animation library, then I just have total problems, you know.
Chris: Yeah, then what? Then you've got to rewrite it. Right but the fact that if you're working on a React project and you're using this library, anyway, is that what you're saying?
Dave: Yeah. Is that the make it, break it point or something like that?
Dave: Any time somebody is like, "Hey, it's a cure-all." [Laughter] I listen to this other podcast called Sawbones. It's a medical advice podcast between a husband and wife. The wife is a doctor and the husband is a comedian. It's a medical history podcast, not an advice podcast.
They always say, "Cure-alls cure nothing." It's kind of like this old-time man would come in and be like, "Oh, I gotcha snake medicine that'll cure all your ailments," you know or a snakebite and tar finger and creaky elbow. Just rub some salve on there.
I think of that whenever I see this thing, like, "Oh, we solved design and development." You know? I'm like, "Um… really?" There are a lot of people in that process, but I would also be curious when it works and when it doesn't. I don't know. I know Framer is a good company, so I'm not speaking specifically to Framer.
Dave: I’m speaking abstractly.
Chris: Yeah, I think it's a big deal that that animation library is kind of best in breed anyway. If you're doing animation in React, I would highly recommend that you check it out because it's pretty sweet. Then it's like, then you've used this tool that just makes that tool better. Isn't that appealing? But I do have questions.
For one, it's a little bit presumptuous that things that you design then are built in React at all. But I guess you don't have to care. It could be just a prototyping tool. I think the money is on the idea that literally designers have been talking about this since I ever even thought about a computer. Why is design and development so separated?
Chris: There are some people that maybe are coming down on the conclusion of, like, maybe this struggle is important and the separation is valuable for some reason. Now, that would be interesting. Maybe a topic for another day. More so, people have been like, "God, there's got to be a way to smash these two things together where designers can be working in a tool and applying all of their abilities as a designer and the output of that is not a picture, a painting. It's the real deal." There's not this lost effort of translation to take their work and then use it on the website. This is early days of that. Maybe some people are actually doing it to some degree with a tool like FramerX but it has to be React. It has to use these libraries, yadda-yadda.
Even if your website is React and every technology lines up for this thing to be perfect, I wonder what it's actually like. I know several codebases that are all Reacted up. The way their components work and are organized, they're full of stuff. They're full of queries. They're full of inline styles and stuff. They're full of hardcoded data. They're full of business logic. They're full of stuff.
Dave: We have to do this because of IE or whatever.
Chris: Yeah. Sure. That's like, what happens to those components? Those don't just get to live in FramerX anymore. I don't get how that works. It seems like it's still a one-way street. It's not like you just pull your React project and drag and drop the folder onto FramerX and it builds your whole project. Then you're dragging stuff around and working in it. It's not that yet, as far as I know.
It seems like a little irrelevant to me that they're React components. You can't actually. Maybe you use them once the first time after prototyping, but then that's it. It's not a two-way street as far as I get it. It's not the single source of truth, in other words.
Dave: Yeah. Yeah, and that's what I'd want to know. Is it like, "Oh, we use it. We started here. Then the wheels fell off the cart," you know, or something like that? "We had to abandon it. Now we have to maintain two things like a junior set of components or abstractions and then the real abstractions." Ugh. What do you do? What do you do? I would be curious.
I tried to ask somebody here who is one of the company's listed on the FramerX website if it is solving all their problems, but I haven't heard back. Maybe we'll get some stealth intel here eventually. Who knows.
Chris: Mm-hmm. It's worth checking out. I think there are people out there that want to live this dream where design and development eventually live in the same tool. It's cool. If somebody nails it, it's a big deal.
Dave: Yeah, I think it could be a big deal - and has good performance. Anyway, we'll talk later.
Chris: Is accessible too, yeah.
Dave: Yeah, and accessible.
Chris: [Laughter] Good SEO.
Dave: Thank you, dear listener, for downloading this in your podcatcher of choice.
Dave: Oh, yep. Can't forget that. Hundred … layouts.
Dave: 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 if you hate your job, head over to ShopTalkShow.com/jobs to get a brand new one because people want to hire people like you. Chris, do you got anything else you'd like to say?