461: Dave Fired Everyone, WordPress Audio Player, Shared Element Transitions, and Fonts!
Dave's base got camped and Chris tried to improve the WordPress audio player. Also discussed: shared element transitions, Turbo, Astro, typography and fonts, and just simply blogging.
Guests
Chris Coyier and Dave Rupert
Time Jump Links
Transcript
Dave Rupert: Hi, everybody. It's your old pal Dave Rupert, and I'm here to do an ad for the [techno voice] Discord. You know about the Discord. It's a cool place. People hang out. You go through patreon.com/shoptalkshow to get in.
We've got a bunch of people, a helpdesk, there's a meme channel, of course, but then show and tell stuff. You can share what you're working on, get feedback, get help along the way.
That said, it's a great place. We want you there. But this is actually a very specific request here. We have people who like it so much, they've actually donated extra money in the form of scholarships. And so, we have scholarships specifically earmarked for underrepresented minorities in tech, and so that's women, black, indigenous, people of color. If you fit that, there are actually scholarships available and we would love to give those to you. If you want to reach out, you can DM me (@davatron5000) on Twitter and get out to me directly, but we have money earmarked for you to gift you a sub into the Discord. We'd love to have you.
That's the specific request. That's the ad is literally a free thing. But we want everyone else to join the Discord as well. But I'm just letting you know that that exists and I want you, the listener, somebody who actually listens to this podcast and doesn't skip the ads, I want you to have first priority access to these scholarships and these gifted....
I want you in there, so anyway, hit me up @davatron5000 on Twitter. DM me, and we'll try to get you in or at least get you on a queue to match the supply and demand. All right. Thank you very much. Talk to you later.
[Banjo music]
MANTRA: Just Build Websites!
Dave: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, a podcast all about front-end Web design and development. I'm Dave--in the office with the lights -- see that, Chris? [Laughter]
Chris Coyier: Fantastic.
Dave: A little bit of glow there, and then you're obviously in the booth. Chris in the booth with the -- you've got some magenta, I think, going on now.
Chris: Yeah. We just happened to be in Around at the moment, so I can mess with the lighting at the filter level. How about purple?
Dave: Around is pretty--
Chris: How about kaleidoscope?
Dave: Yeah. Around is pretty because, even if you don't have cool office lights, it can actually vibe that for you. That's kind of important.
Chris: It can. It can, and kind of distract. I don't know. It's fun. It has the side effect of knowing when somebody is not really paying attention in a meeting, though, because if they're messing with their filters, you can be like, "Oh, I see what you're doing there. Is it mess with filters time of the meeting?"
[Laughter]
Dave: Yeah. Did I talk too long? Is this sentence...?
Chris: The irony, though, is it's great. It's great. They even say it's not really for meetings, in a way. It's for this kind of casual stuff. It's for working together cas' style.
Dave: Collab.
Chris: Yeah.
Dave: Collab'ing.
Chris: It's not really like meeting software, although whatever. We use it for that too.
Dave: Yeah. I mean I would say -- whatever. We did a big [laughter] review of it. But it's like floating heads, right? I can do work while I do this. It's different than, like--
Chris: Right.
Dave: --a Zoom where you're just like, blah, only look at this window.
Chris: Yeah. It's just weird how big of a change that is.
Dave: Yeah, it's cool.
Chris: Yeah. What do you got going on? What are you working on, man? Has your life chilled out?
Dave: Well, so, I fired everyone in my company.
Chris: [Laughter]
Dave: I just said--
Chris: Severance?
Dave: Yeah, well--
Chris: Did they get good severance, six months' pay?
Dave: For the ones who have been around a long time, you know--
Chris: Right.
Dave: I just was like, "Hey, you bunch of goof jerks. I don't like you talking in Slack, so you're fired." [Laughter]
Chris: Oh, my God.
Dave: Yeah. Yeah.
Chris: Did they mention politics, those jerks?
Dave: Oh, yeah, all politics.
Chris: Yeah.
Dave: They were like, "Ugh. I have to go vote." I was like, "Pfft. You're out of here."
Chris: Oh, my God. They voted!
Dave: Mm-hmm. Yeah.
Chris: Oh, my God.
Dave: Active citizens, dude. Can you believe? Can you believe what's happening in tech?
Chris: It sounds like that would be distracting for the company.
Dave: It's just distracting. People voting what to do with their tax dollars and trying to rally-- [Laughter]
Chris: Yeah.
Dave: People who they spend their daily lives with around similar causes, it's just too much, dude. It's just gotten out of control, I think, so I fired everybody.
Chris: Yeah, but not -- I hope you posted a manifesto first.
Dave: Ah, yeah. No, I wouldn't fire everyone without blogging about it first. You know what I mean?
[Laughter]
Dave: The newsletter has to go out on Monday.
Chris: Right.
Dave: That's when all the traffic hits. So, yeah, I fired everyone via blog post, and then I let them know.
Chris: Oh, yeah.
Dave: Yeah, then we had a good discussion about it.
Chris: That's how I do it, too. I actually have a different approach, though. Mine is to fire them and then I get the lighting just right in my office.
Dave: Mm-hmm.
Chris: I get a lens with a low depth of field focus.
Dave: Oh, yeah.
Chris: I cry a little bit and then I stop crying. Then I start the camera, and I apologize about the people I just fired.
Dave: Oh, but you don't put too much focus on those people. It's all about you, right?
Chris: Yeah, I use a lot of "I" statements.
Dave: Yeah. Yeah.
Chris: [Laughter]
Dave: I feel bad for you having to fire all those people.
Chris: Oh, my God. It's just how I like to operate as a business. That's all.
Dave: Tech is kind of in a situation right now [laughter] as a whole, so hopefully it gets better here, but we are witnessing -- I don't know -- something.
Chris: Yeah, it's pretty funny. I don't know. It's not funny. It's serious crap, but I don't know what to say about it.
Dave: Yeah.
Chris: I'm just some asshole, you know. Although, it was a weird moment. Yesterday, I was -- I've been poking at this for a minute. You know ShopTalkShow.com, a little website we operate.
Dave: I've been there. Mm-hmm. Mm-hmm.
Chris: It sees 15 or 20 visitors a day, maybe.
Dave: I go there at least once a week.
[Laughter]
Chris: Yeah. Once a week is my limit, too.
Dave: At least once a week, yeah.
Chris: But there's a podcast on it, and you can click onto an episode. It's a WordPress site, so it's got a URL. In there is a player for the podcast. You can't have a podcast website without a player.
I realize that probably 90+% of podcast listening happens in some kind of podcast listener. In fact, I know that it does because we can track that to some degree. Overcast is huge. Pocketcast is huge.
Dave: Apple Podcast.
Chris: Apple Podcast is huge. Spotify is huge.
Dave: It's like 40 of everything.
Chris: All four of those together, really huge. Not that many people come to the website to listen to it, but you know who does? Probably people that are shopping around or that they get a link on Twitter. I do sometimes listen to some parts of some podcasts through their player. You just kind of got to have one, you know?
Dave: Yeah. I would say my personal anecdote here, like 50% of my podcast listening is just one-offs that I don't want to subscribe to.
Chris: Fifty percent!
Dave: I mean just in a given week.
Chris: Wow!
Dave: If I listen to six shows, probably three of them are just one-offs. But I've started using Spotify, which has its own problems. [Laughter]
Chris: It does.
Dave: Well, you know, but Spotify, which uses icon fonts and I can't forgive them, but Spotify is a business. But because I'm in Spotify already, so I started subbing in Spotify, following, just because it was like, "Well, that's a way I don't lose it." That stuff like the Netlify podcast and there's another one about this guy who wants to find pizza at McDonald's. But anyway--
Chris: That's great. The whole podcast?
Dave: Yeah, about 200 episodes.
Chris: [Gasp] Holy crap.
Dave: Yeah.
Chris: Holy crap.
Dave: Yeah.
Chris: Anyway, okay, good. So, you listen to half Web half Spotify, some on something else, whatever.
Dave: Yeah.
Chris: You're all over the place.
Dave: Then a podcatcher.
Chris: Yeah. I don't think you're rare. I think that's probably common for some people. Although, the proof is in the pudding. Most analytics, even across podcasts, are pretty heavily weighted towards some kind of app or something.
Dave: Mm-hmm. Yeah.
Chris: And not the website. All that said, you've got to have a player because it's weird not to. You've made a Web component for us that's really neat, I think. I was like, you know what? I'm going to steal Dave's thing.
Here's the feature that we don't have on ShopTalk Show. This is what I've been trying to say. If you then click on some other show, for example, our shows are paginated such that if you're viewing one show, there's a link that says, "Go to the previous episode," or "Go to the next episode." If you click that, guess what happens to the player. The page reloads. The audio stops playing. You're back at a paused state at the beginning of whatever that next show is. We made no effort in the technology of this website to maintain your listening experience.
Dave: Mm-hmm.
Chris: You know how much I care about that? Like 5% or something. I don't care that much. Some people, you kind of know what you're doing sometimes.
There's some stuff we could do. We could add an on before unload handler that would say, "Oh, you're listening to audio. Are you sure that you want to leave this page?" or something.
Another option is to architect the site somehow, some way, such that the audio just doesn't stop. It's just a pinned thing and you can browse around the site. Maybe each show, rather than having its own unique player, just has a button that says, "Play this episode," and then that pinned player, that doesn't change as you navigate around the site then picks up that show and plays it. That's what I've been trying to play with.
Dave: Mm-hmm.
Chris: Not because I think ShopTalk Show, the website, desperately needs this functionality.
Dave: Mm-hmm. Mm-hmm.
Chris: But that it's kind of a cool idea to play with and some sites do. In fact, this came from an email I got from somebody that said, "We want to do this." I think they live in Nashville or something and worked for public radio there and were like, "We have a bunch of websites and wouldn't mind just having this idea built into all those websites."
I think that's smart, especially for public radio where I would guess there is probably more website listening to. I don't know why I guess that. I just do. It's like a hypothesis I have.
Dave: That's just it. When you go to a webpage and it has an audio player and you hit play, the same with video. You hit play. You're stuck, man.
Chris: [Laughter] Yeah.
Dave: Don't close that.
Chris: Yeah.
Dave: You lose your progress and everything, so it would be kind of cool to have that.
Chris: It seems like you could do it.
Dave: SoundCloud does it.
Chris: Right.
Dave: Yeah....
Chris: I did this ten years ago. I had a friend, Chris McGarry, good buddy of mine, lives in Denver, guitar player and stuff, and he put out a record of his own. I still like this record. He did a good job for an indie musician guy.
He bought his own name as a domain name. I built a website for him just because he's my friend. I look back on it. I'm like, "Dang, that was a nice website. I did a good job on that."
Dave: What a nice friend.
Chris: It's long dead. It's not on the Web anymore. But what I did was just a one-off, an index.html page only because there are only a couple of pages on the whole site. There's an About page. There are a couple pages. I just threw them all on the index.html document and then wrote some jQuery that would just basically hide and show different areas of it as you clicked. If you clicked the About page, the URL didn't even change.
Dave: It just fetched, like, about.txt.
Chris: It didn't even have to fetch anything. It was already on the page. It just moved a div up.
Dave: Show/hide it?
Chris: Yeah. Yeah, but I didn't just show/hide it. I animated it into place. I went like whoosh-whoosh.
Dave: Classy. Yeah. Yeah. Yeah.
Chris: Just because there was jQuery.animate and stuff. As you clicked around the site, it was kind of fun. The side effect was that there was an audio player on the site and it never stopped. You could preview his album. As you clicked around to learn more about Chris, the audio never stopped. That was the guts of the decision was I didn't want to mess with changing the URL.
Now, this was ten years ago. Ajax still existed, I guess. I could have done it some other way, but that's how I did it.
On ShopTalk Show, we can't output every episode onto one page and animate stuff around. We need another tactic to do this if we want to pull it off.
Dave: Yeah.
Chris: There are ways. I've seen three, four libraries that handle this kind of thing. The one we've probably mentioned on the show before used to be called Turbo Links and is now called Turbo. The reason I'm thinking about this in addition to -- whatever -- it's a podcast and I was just working on it is that it's from the Basecamp guys, which then all of a sudden mixes in politics to technological choices.
Dave: Politics now in your podcast website.
Chris: I don't think I've been shy about this before that Facebook pisses me off. They make a lot of choices that I think are very bad for the world and I don't like them that much. That's complicated enough in just usage of Facebook and its properties. But it gets complicated again when React is Facebook. GraphQL came out of Facebook.
Dave: Yeah.
Chris: There are technologies that I use that come from a company that, in general, makes me mad.
Dave: Mm-hmm. Mm-hmm.
Chris: But I haven't stopped.
Dave: Yeah.
Chris: I have stopped watching the Cosby Show.
[Laughter]
Dave: That was a pretty easy stop, yeah.
Chris: It was a little different. But isn't that interesting, that stuff, like how embedded or what does that mean about us? I would think that there are definitely people in the world that would question my moral backbone.
Dave: No, I think so, too. Yeah. Unfortunately, there is probably a jerk at every company at some higher level.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you by Automattic, really, and the makers of WooCommerce, Jetpack, WordPress.com, and great software like that that you know.
You know Jetpack had a ten-year anniversary last month, which is pretty cool. That's quite a milestone for a piece of software, Jetpack being a WordPress plugin for your self-hosted WordPress site, one that I run on every single WordPress site that I even touch. Even if it's a friend's site I'm like, "I'm going to put Jetpack on there for you."
But that means different things these days because Jetpack is, in a sense, split up into different parts. There's Jetpack Backup, which is a great backup plugin, but you can just pay for it and just use it all by itself, which is probably what I'd install on a friend's site just out of safety reasons for them - kind of thing.
They work together, though, nicely too. WooCommerce is what powers all the e-commerce stuff on WordPress.com, so there's obviously synergy there. If you run WooCommerce on your own WordPress site, like I do to sell posters and stuff like I do on CSS-Tricks, Jetpack Backup works really nicely with it too, in a way that not other backup plugins don't necessarily do. I'm pretty sure that none of them do this, actually.
For example, you can back up to a point in the past, which will update the database to that point in the past, and your site files, and just kind of rollback history, but not rollback orders. So, it's not erasing the fact that somebody ordered something on your website. That's kind of a big deal. You'd hate to have to restore a backup of your site and then know that you're losing important customer data. That would suck, so that's a thing.
Anyway, thanks for the support. Bye-bye.
[Banjo music stops]
Chris: This isn't on the ShopTalk Show site. I just made a rep on GitHub and I made a WordPress theme that uses Turbo to--
Dave: Mm-hmm. It accomplishes this effect without React, right?
Chris: No React.
Dave: That's the other solution, right?
Chris: It's just WordPress. In fact, do you know how many lines of code I had to write to accomplish the effect? Zero.
The way that it works is you put data turbo permanent on elements that you want to persist as you click around the site. Functionally, it works like if it sees a link and it's an internal link to the website, it makes an Ajax request or fetch, as we call it. I've joked that Ajax makes you sound old these days. It kind of does, doesn't it?
Dave: Yeah.
Chris: For whatever reason, we don't say Ajax anymore.
Dave: Yeah.
Chris: It fetches asynchronously on the network. The new page, once it has it, it just replaces literally the entire thing, HTML down. It's not very efficient, I would say.
Dave: Mm-hmm.
Chris: React, Vue, and Svelte, whatever, these modern frameworks are more efficient in that they intelligently replace only what needs to be replaced.
Dave: The mutated stuff, yeah.
Chris: Yeah, which literally is more efficient. It just is.
Dave: Mm-hmm.
Chris: And there's less -- I don't know. It comes with its own baggage. The fact that this replaces the entire HTML document means that the title element is replaced, too, which updates the title in the browser tab.
Dave: Mm-hmm.
Chris: Whereas in React, you're like, "Oh, make sure you use React Helmet to replace the head section because that's not done."
Dave: Right.
Chris: So, you do all these workarounds to do how the Web works naturally. Which is the better approach? I don't know.
Dave: What about build tools? How many build tools have you got going to get this turbo going?
Chris: Yeah. Well, none, which is kind of nice.
Dave: None?!
Chris: Yeah.
Dave: That's kind of cool. I don't know.
Chris: Yeah.
Dave: I pulled it up in BundlePhobia because in the repo it's like 92 kilobytes and I was like whoof.
Chris: Whoof.
Dave: [Laughter] But then looked it up in BundlePhobia and it was only like 13K.
Chris: Was it 13? I thought it was--
Dave: 13.5 kilobytes gzipped and minified.
Chris: Very good.
Dave: I was like, that's pretty good for, you know.
Chris: Especially because it has -- if you don't even need all that extra crap it does, because it does extra crap. It has this concept of frames, which is like let's say you were building, hey, their email client.
Dave: Mm-hmm.
Chris: There is a sidebar full of emails that you have. You click one of those emails and then, guess what, the entire page doesn't refresh. Another column that actually shows you the email refreshes. It's built for that type of functionality. Also, this permanence feature and stuff. There's stuff in there. There are bells and whistles.
If you needed none bells and whistles, it's actually a handful of lines of code. Here they are. You discover links that are internal, not external. When they're clicked, you intercept them. You make a fetch request for the URL of the href of that link. You do an inner HTML equals replacement on the HTML element.
There are a couple of more things you have to do. One of them is update the URL. There's an API for that in JavaScript. And you have to listen for the back button in the browser and perform the same action in reverse upon a back button press. You basically have all that functionality in more like 15 lines of code, yet zero bells and whistles.
Dave: Hmm. Hmm. That seems good, right? I don't know. That's like you get that single-page feel from a multipage app or your legacy CMS (or whatever). Then features like this just keep the audio player playing. That's kind of cool.
Chris: I think it's compelling enough. It was compelling enough to make a demo that's kind of modern.
Dave: Yeah. Did you see? Did you see the proposal for shared element transitions? Did you see it?
Chris: Yeah, man. I blogged it a couple days ago.
Dave: Oh, you blogged it. Well, I'm behind on the old RSS, but--
Chris: I only blogged it because I wrote a post. It was kind of an untimely post. I said, "Still hoping for native page transitions."
Dave: Mm-hmm.
Chris: Dave is bringing this up, by the way, because once you've done this, you've essentially built a really basic single page app, meaning you've also kind of sort of opened the door for using some animation. Let's say you wanted to slide the previous page out and slide in the new page. Well, you kind of can now because the whole page isn't reloading.
Dave: Yep.
Chris: As a matter of fact, that's why people reach for SPA sometimes is because you're like, "Oh, juicy. I can make a really fancy interactive page when the page never reloads."
So, I write this post called "Still Hoping for Native Page Transitions," and I link up some resources. I talk about why. I talk about what we have so far - blah, blah, blah. Not realizing that they've made some progress and they were just about to drop Chrome Canary having this thing in it called Shared Element Transitions.
Dave: Yeah.
Chris: Which looks like an evolution of Jake Archibald's stuff, but I'm sure there are more people involved. I just think of Jake because he's been harping on this for a long time.
Dave: He kind of announced that navigation transition API that was kind of old, you know.
Chris: Right.
Dave: But that just never got any traction, but this one seems to have some traction. You know--
Chris: Well, once it's in Chrome Canary--
Dave: Maybe this is a good example of where Chrome status can kind of affect, make a positive change, or positive because I want it.
Chris: Yeah.
Dave: This is an in-demand feature, I think. I think all browsers are struggling with the amount of JavaScript that we're sending down the pipe. Heck, we even got a new browser that does all the JavaScript on a server somewhere.
Chris: Mm-hmm. Mm-hmm.
Dave: Then sends you the result. That's the new mighty browser. We're sending so much JavaScript where processing JavaScript in another computer, like on a 16 core CPU somewhere.
Chris: This looks sweet. It's called Shared Element Transitions because rather than just having the entire page just going, bop, the new page is here, you can specify. Yeah, except for this element over here, don't mess with it during the page transition. It's going to be present on the next page too, so just hold onto it.
Dave: Mm-hmm.
Chris: You do have to put contained paint on it, apparently, because that's going to tell the browser to literally not -- you're not planning on repainting.
Dave: Just keep it when it does something.
Chris: Right.
Dave: Okay.
Chris: But that means though that then you can run a little kind of a callback function and move it, like animate it to a new position. This is going to make for extremely compelling new page transitions. This isn't just like carousel your website, even though that's kind of cool too.
Dave: Yeah, because it comes with PowerPoint effects, right? Like reveal left, reveal right, reveal up, reveal down, cover left, cover right.
Chris: Yeah. Yeah. In the [techno voice] Discord, Alex pointed out that. Did you know Edge had this before they went fricken' Chromium?
Dave: Yeah.
Chris: I did not know this. There was a metatag and it had 20-some cheesy page transitions that you could just do it by throwing in a metatag. I did not know that.
Dave: Yeah, that was like an IE feature because -- what was their page? Oh, what was the Microsoft page builder? Is that what the software was?
Chris: I think so. Yeah.
Dave: Anyway, they had all these effects built into that and then, yeah, so IE could do that. Also, credit to IE. Don't do this much on the show. It used to have this thing called Media Player, so if you played media on your browser, it would actually -- like real audio kind of stuff -- it would actually go into a media player in the sidebar and stay persistent.
Chris: That's awesome. Look at that, and now we're starting to have APIs like that, and we think of them as so super extremely modern in Chrome.
Dave: Yeah.
Chris: Yeah, IE had that.
Dave: I mean this is in Chrome now or Canary right now?
Chris: Yeah. That's what I was so shocked about because it went pretty quickly from like, "Oh, this is an idea," to now it's been prototyped. That's exciting to me, though, because I feel like things that are prototyped kind of have their way of going forward. Although, I always think of like Jen Simmons and situations like this who has worked at Firefox and now is at Safari has definitely -- and you've called it how Chrome DDOS other browsers with features, which I'll never forget.
Dave: Yeah.
Chris: It's kind of in that category.
Dave: It is.
Chris: I have no idea what the participation of other browsers is like on this. Just because I like it, I'm kind of sweeping that under the rug a little bit like, "Oh, Chrome has got it! When are you going to do it?" But it's kind of not fair and I get that.
Dave: Well, yeah. No, I mean it's really too bad. No.
Chris: It does seem kind of optional-ish, like the fallback is that you just go to the next page, so who cares.
Dave: Where do you want it? You want to use this in mobile apps, right?
Chris: Yeah.
Dave: Like the swipe-y drill-down transition.
Chris: But I'll tell you what. Go to ShopTalk Show's homepage right now, just ShopTalkShow.com. Then click the episode, the last episode we had with Adam. Look what happens to the header. The logo is real big on the homepage.
Dave: Oh...
Chris: Then you click it and I intentionally made it smaller because I wanted to not draw so much attention to the logo on a subpage.
Dave: Yeah. We're elevating the player.
Chris: Yeah.
Dave: The person in the photo will show up there, right?
Chris: Right. it's a trivial little change. It just changes the grid template columns a little bit, but can't you imagine a shared element transition where it goes whoop, and it makes--
Dave: Ah!
Chris: Wouldn't that be neat?
Dave: We could maybe that roll that out today.
Chris: Yeah.
Dave: Put it in the old--
Chris: That's a good idea. We might as well. It's ten lines or so. I don't even understand how this works exactly. The API is document dot document transition dot prepare.
[Laughter]
Chris: It's kind of a--
Dave: Mouthful.
Chris: It seems nice to me. Then it's like a promise, I guess, that gets fulfilled. In the promise, then that's where you do the page in stuff. I guess it's the in-between stuff. It's a little hard to think about.
Dave: I guess what's nice about Chrome doing this because they've been advocates for like flip animations and stuff for quite a while.
Chris: Yeah.
Dave: They know what they're doing. We're not going to get some, like -- I don't know -- genius solution that is kind of awkward. You know?
Chris: One-off? Yeah.
Dave: Yeah. It's kind of what people have been doing, so I don't know. Yeah. No, this sounds really cool. Hopefully, other browsers pick it up, but we could also just progressively enhance our current site and botta bing botta boom.
Chris: I'm tempted to try it. Although, we've been in that lately. It was you who showed me how color contrast in Safari worked.
Dave: Mm-hmm.
Chris: I had to download a copy of technical preview of Safari. I don't just have one sitting around. Maybe I did at one point, but I tend to clean up crap like that.
So, I download and get it because I want to play with color contrast, because you had me convinced with a CodePen demo that you built how freakin' cool it is. I also thought it might be a fun ten minutes to spend in the old [techno voice] Discord doing something fun. Just hop into the clubhouse and share your screen.
Dave: Yeah.
Chris: People have been doing that, including me and you. I think it's cool. I was like, I'm going to play with color contrast as a little Discord fun moment. I didn't really get how it works. They don't really do flags in Safari. Although the function has flags, they're part of a menu. You go to the developer menu and then you have to just check it on. I actually prefer the UI. I think it's a little cleaner than a flag thing.
Dave: In, like, about flags. Yeah. Well, and it's very granular. You want to turn on contrast; you have to turn that on. You don't get color mix in that. In Chrome it's like just experimental Web features, basically.
Chris: Hmm.
Dave: Anyway, yeah, Safari has some cool stuff in there. I got on Twitter. In that dropdown, there is a model element, HTML model element for like 3D models, basically. I got looped in by a bunch of VR nerds, like WebXR nerds. They were like, "Dude, wait. This isn't working."
I was like, "Okay. You've got to go to develop, and then you've got to go to experimental features and turn it on."
We're all sitting there. It was some day we were just trying to figure out how it works. It takes a source element, which is kind of weird. Then that populates a current source. People could load a source and it would fetch it, but then it wouldn't do anything with it. It's still experimental and being built, but you know what else is in there?
Chris: Huh?
Dave: Huh? Huh?
Chris: Huh? What?
Dave: Dialog.
Chris: Oh, right!
Dave: Dialog.
Chris: I remember you showing me that briefly. Yeah, there is no indication if it's any better than it was, but they did it.
Dave: Yeah, it doesn't have the modal-like backdrop stuff, but it's basically just a detailed summary. You click a button and it'll just pop it onto the page. But, hey! That's something.
Chris: Yeah. I mean that's -- I do like that when it's like -- I don't know. It's not much, but it is probably the primitive by which you should build fancier things.
Dave: Mm-hmm.
Chris: You know? You know?
Dave: Yeah.
Chris: Just like ESM. Gosh, I read this spicy tweet. I think it was Devon Govett - or whatever.
Dave: Uh-huh.
Chris: This was years ago now, but said, like, "Was ESM worth it?"
Dave: [Laughter]
Chris: His spicy opinion was, no, it wasn't.
Dave: Really?
Chris: Because it's better, but it caused half a decade or longer of extreme gnarly churn in the JavaScript ecosystem that maybe wasn't worth the pain. The pain is still real now, but I look at it. I disagree only because of how excited I am about ESM, in general.
Dave: Yeah.
Chris: And the doors that it opens because there had to be an in-browser solution and that's what ESM is. The same thing with dialog. You have to get the primitives in there and then make them better over time, or let us build on top of those, like Web components.
Dave: Yeah. I remember being at a talk, an awesome JavaScript talk with Michael Rogers. We were all in a tiny room but with Michael Rogers from Node. He was building out the, like--
Or because Node had to basically just come up with the require syntax. They were like, "We just need something," you know? Like, "We're building this." You know?
Chris: This is early Node?
Dave: So, it was like early Node.
Chris: Oh...
Dave: Like before you really used Node. [Laughter] You know?
Chris: Yeah? Hmm.
Dave: Then they had to basically decide. They decided on it. Maybe it was Ryan Dahl who decided on it. But then ES Harmony was coming out. That was kind of pre-, just pre-modules. But then they were just kind of like, "No, it's not going to work. Our solution is better," or something like that.
There was kind of a fork in the language, and so if you think of Node as an implementation of JavaScript and a browser as an implementation of JavaScript, there's like a fork in the language. Then I think it's going to be a long, hard road back, but yeah. There are so many advantages, and especially because Deno, the new Ryan Dahl -- is that his name? I think it is -- kind of TypeScript-based.
Chris: Yeah.
Dave: You know, Node.
Chris: It looks sweet. I mean I just don't -- you know.
Dave: One design decision he made was no package manager at all. We just use URLs. I'm just like, that's kind of legit. You can still bundle however you want, but we'll just fetch URLs. That's the source of truth. It's not some name-spaced thing you clutched up.
Chris: Right. It looks good. I think I blogged this too. I don't write Node all day every day, although I do write it plenty, but just not in that ecosystem as I am in browser business stuff.
Dave: Mm-hmm. Mm-hmm.
Chris: But knowing how excited other people are for -- is it Deno? Is that how you say it? I feel embarrassed.
Dave: Deno.
Chris: It's probably Deno.
[Laughter]
Chris: The secure by default thing was exciting to people I've talked to about it because of that, like, Vue doesn't just access the file system, for example, by default.
Dave: Mm-hmm.
Chris: You have to unlock that type of thing and I think that's kind of clever.
Dave: Mm-hmm.
Chris: Fixing things that they just knew were a problem from that. Not a lot of people get a chance to fix their big thing they built in the world.
Dave: Yeah.
Chris: I think that's what makes that story interesting is you built this thing that's just incredibly successful and then get to walk away and build it all over again but fix it. That's so cool.
Dave: It's Sisyphean, maybe. [Laughter] Just pushing that rock up a hill again, but I do like -- his announcement was very like here's ten problems, very specific tactical regrets about Node and was just like, "Here are my ten issues that I'm trying to fix this time around," and so it's kind of cool.
Chris: Maybe that could be the thing that finally unseats CSS. There has never really ever been a take on trying to replace CSS. It's always been like, let's tool our way out of it, whatever. but once it gets to the browser, there is nothing other than CSS. But maybe browser vendors get so sick of it at some point that there's an opt-in CSS ex-neo-something.
Dave: Mm-hmm. Origin trial.
Chris: Yeah. I thought of that famous document of the mistakes in CSS that the working group keeps that are like, these things were just a bad idea in CSS - or whatever. [Laughter] Some next-gen version of it could fix all those problems but have it be kind of like opt-in, so it doesn't break the Web.
Dave: Yeah. There's a lot of that stuff. I'm in Open UI and we're talking about new elements, cooking up some, doing research. We're like the research arm.
Chris: Mm-hmm.
Dave: Then we kind of show these little researches to browsers. There are browser people in there, but just kind of like, "Hey. This is very high usage. People want this." Tabs, that's the thing I'm working on.
I was in a meeting and people were just like, "Ugh. Open. Details open, that's so bad. Ugh. What a bad design."
I just was like, "What do you mean?" There are a few problems where you can, in JavaScript, be like open equals not open, but there was never a close method fired on. You can change the attribute, but set attribute open equals false, or whatever, but the details doesn't know that you closed it. [Laughter] It can maybe query its own attribute.
Anyway, that attribute is kind of problematic just from a programmatic standpoint because it can be changed from different angles. I understand the problem now, but I just was like, "Why is everyone so mad about details open or an open attribute?" But I guess people are -- I don't know.
There's a proposal to maybe fix it with a pseudo-class like colon open or something like that in CSS.
Chris: Yeah.
Dave: Which might make -- and then that can be applied after it's open, not as it's open. That's another problem, issue with it, too. The attribute applies instantly whereas you'd maybe want to after the fact.
Chris: [Loud exhale]
Dave: Anyway, there's a lot of stuff like that in HTML and CSS. For me, I'd love to just level everything and just be like, "Here's how we load things." I don't know. Now we have a better idea of all the common problems. Maybe we could just level set, but yeah. I don't know. Maybe you just have to have the quirkiness, but it'd be cool if everything was easier.
Chris: Yeah.
Dave: Maybe we don't have audio/video. Maybe we just have a media element.
Chris: Oh, Dave! Crazy!
Dave: No? I'm getting out of here.
Chris: It encompasses IMG too?
Dave: Yeah.
Chris: Hmm. Juicy.
Dave: Object. I just invented object. [Laughter] Dang-it! [Laughter]
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by Around. That's Around.co or follow the link in the show notes. It's a new video calling app that's very different from the other video calling apps out there, I'd say.
They say this, and I think it's really true. It's designed for collaboration more so than for meetings. It's not this big rectangle and you're just looking at everybody in the rectangle. Each person that you're talking to is kind of like a floating head. You see their face cropped into a circle, and then part of the UI and UX of it, there's a lot of fun built into it. You can apply filters to it and stuff.
It just feels a little bit less fatiguing to know that you're just a talking head on somebody's screen. They're not looking at every pixel that your camera is picking up. It's really clever and it feels really nice. Yeah, they say it's more for collaboration. I think that's true.
It's very easy to fire one up. You fire open the app, get a link, share it with somebody. You're in the meeting. All kinds of security built into that. You can make sure that you have to approve them before popping in. Nobody is going to bomb your meetings anyway, but lots of protection there.
Or you're in Slack. You just type /around. It pops open a meeting. Everybody clicks into it. I'll probably use that a billion times. That is how things work.
There's that kind of pseudo-real-time thing of Slack. "Hey, can we chat this out?" Boom. /around. You're in there. It's great. There are lots of fun UI and UX touches as a part of it that's great.
The screen sharing is really nice. it's everything you expect in there. You share the whole window or select a particular window to share.
And it has the control aspect built-in, too, if somebody is like, "Hey, let me take control for a minute. I'm going to type here." I do a lot of pair programming that way. It's got all those features built in.
Out of the gate, it's just a great video call app. It just seems like it has a super bright future because they just really got the details right. Thanks, Around.
[Banjo music stops]
Chris: There's this video of Ross and Fred Schott from Snowpack and all that.
Dave: Yeah!
Chris: Fred has got some new--
Dave: Astro.
Chris: Astro. I joined the Discord just to do it, get the invite and play.
Dave: Nice.
Chris: I haven't spun it up yet, but I watched the video and I've been thinking about it. It's hitting on all cylinders for me. I know a lot of people were hit strongly when Svelte came out of what a beautiful syntax that is. I think Svelte is super cool, but it didn't hit me with the same kind of, like, "Wow!" as this.
All I've seen is Fred playing with it on a video, and still, I'm like, "Damn! I like this." He very much -- the gist of it, for people out there, is that it's like this HTML first kind of output that the websites are -- what it ships is totally JavaScript-free. Then you opt into any very specific JavaScript that you want. It's a lot.
He mentioned 11ty a number of times. You know how 11ty has the -- there's no JavaScript anything. It's just an HTML processing engine - kind of. It's like that, but 11ty just gives you liquid and Nunjucks and stuff.
Dave: Yeah.
Chris: Which are fine but not my favorite.
Dave: Yeah. It just handles every template language, basically.
Chris: Right.
Dave: It's kind of robust and, because it's built on Node, you can kind of go in and be like, "Okay, I need to fetch these 3,000 files and then build the website."
Chris: Yeah. Yeah. I mean it is awesome. This is no crap talking on 11ty. Please. But I do like, as a front-end developer who does write in plenty of JavaScript, the concept of components is very -- I am super bullish on it. I don't even care how they're expressed, but Vue knocked it out of the park with its component model. Svelte learned from it and has cool stuff. The component model hits strongly with me.
Dave: Mm-hmm.
Chris: And it looks like Astro is very into components as well and brings the best of all worlds. It has this Vue-like syntax where it's all kind of combined into one chunk, but it has front matter on the damn things.
Dave: Yeah.
Chris: Which is fascinating, and it's got MDX in there, so you can just write in Markdown and then just slap a JSX component in there if you want to. I'm like, "Hot damn! That is sweet."
Dave: It's really pretty cool and there was the killer feature for me. I was like, "Okay, I'm watching it." It's a Gatsby. I don't know. That's sort of what -- [laughter] I love the HTML firstness of Astro - just this little video I watched, but then you import, like - whatever - calculator component or something. But then they have a custom syntax where you can say calculator colon idle or calculator colon -- what's the other one? I'll just say defer or something like that or lazy load or something. I forget. Oh, no--
Chris: Visible, right?
Dave: Idle visible. You're right, yeah, and then it'll auto-generate the code to either put the intersection observer for when it's visible on the page or it'll auto say, like, okay, on document dot load. Then register this component.
Chris: Yeah, so now you have a little JavaScript on your page, but very minimal amount, and it asynchronously loads at the right time.
Dave: Fires at the right time.
Chris: Really compelling stuff. I don't know how -- I was wowed by that little part of the demo and also do I actually author like that. Is that going to be a mind shift? I don't know.
Dave: Yeah.
Chris: I don't know.
Dave: Well, but that's how you tell it. Those are your two choices. Otherwise, it's a statically rendered component basically, right?
Chris: Yeah.
Dave: That's how you tell it, like, "Okay, yeah. This is actually interactive, so just load this on the page whenever."
Chris: I could see using this thing. I don't know. It's going to have years of growth to get to a place on building like big, serious stuff with it, but oh, my God. Would I reach for it for a side project? Immediately. I love it.
Dave: Yeah, and I think maybe that's the theme of this whole episode here. That bridge between single-page application and just writing some HTML is starting to get very tied together. You have stuff like Turbo. You have stuff like these page transitions. Then you have stuff like Astro, which is making the authoring more multipage HTML but then bringing in different application grade framework support. It's going to be kind of cool.
Chris: The Web has not slowed down, has it?
Dave: No, it's a big, big, hot year. We just had Adam on, right? That was a lot of stuff. I’m still kind of wowed by all of it.
Chris: Right. That was a lot where people thought of that. Yeah, I was putting together a little post on one of the ways I blog, not commonly, but sometimes. In my Notion, I have the whole Web clipper. If I want to save something that I want to remember, I use the little (boop) in the browser and save it to my Notion thing.
Dave: Nope. Yeah. Yeah.
Chris: Then I tag them. I say, "What was it about?"
Dave: Oh, you do the step that I don't do.
Chris: [Laughter]
Dave: The actually organized. Okay.
Chris: It's only a little organized, but I tag it on purpose because sometimes I'm like, "I can't deal with this one right now." A tag almost means defer to later. It's like a mind map of, like, I'm going to give this article a tag of typography because that's what it's talking about in some way. Sometimes, I wait for four or five of them (or whatever) to connect. Then I'm like, is there a thread happening here? Is there some interesting way to connect these, or not? It doesn't matter if there is or isn't.
I had six or seven of them that I tagged typography. Then I just was like, you know what? I'm just going to barf out a blog post with all seven of these (or something) because I don't know that they're related, but whatever. Then I'll at least get a free blog post out of it (or something). I don't know where I was going with that exactly, but I don't mind that as content. But one of the links in it was this very specific font that was released by this, like a letterpress looking font.
Dave: Mm-hmm.
Chris: Some people think of modern-day letterpress. There are not that many. There's not that much wood typing stuff left. A lot of times when you're putting together a document, you just kind of pull what you've got and it ends up this mismatch kind of look of, like, that's an extra bold S but a thin I - whatever. It ends up looking like a wanted poster, practically.
Dave: Mm-hmm.
Chris: That's not how wood type was intended to be used. But, hey, that's what we've got. This font kind of looks like that, a little bit like a wanted poster type of a look. It's called Plymouth Press. You look at it, and you're like, "That's a font?" because it has that grunge look that was so popular like eight years ago.
Dave: Yeah.
Chris: Grunge is not that cool anymore, unless you're Wes Bos - LOL.
Dave: [Laughter]
Chris: But he was into these for a minute, I think, and then removed them. I think their font size for them can be way too high. You know how grunge, if you're expressing it as vector, which these need to be, file fonts need to be, the number of points in one of these characters would probably be more vector points than an entire font.
Dave: A whole alphabet.
Chris: Yeah.
Dave: Yeah.
Chris: So, the font size is unusable on the Web.
Dave: Because you have to carve out every hole.
Chris: Yeah.
Dave: And every distress.
Chris: Yeah. Too big for the Web, but who cares on desktop. You know?
Dave: Mm-hmm. Mm-hmm.
Chris: If you're just working in Illustrator, you might have some performance issues for you while you're working. But if it ends up just being a poster, who cares? I think that's kind of the idea.
But all that said, SVG fonts are a real thing that do work on the Web and you just never hear about them. You can make a full-on chunk of SVG a character.
Dave: Mm-hmm.
Chris: And with color and layers and all kinds of crap. It's just interesting how rarely you see that.
Dave: No. No, it's cool. Yeah. It says on this website Plymouth Press dot info. It's 12 megs.
Chris: [Laughter] Yeah.
Dave: They're saying not good for -- impractical for embedding as a Web font.
Chris: Oh, it does say that? I'm glad they do that.
Dave: Yeah. I mean, I'm sure if somebody was like, "Hey, this is slow," but "Ooh, download for free." Link.
Chris: [Laughter] I know, right?
Dave: [Laughter]
Chris: Put that in my free bucket.
Dave: Great. That was quick. Yeah, nah--
Chris: It's just cool. It made me think of color fonts, too, which are different and you never see.
Dave: I had that type, that art direction post on my website. This would be a great one. Just like make it and then cut a PNG and then make that do the background replace on your header. Ta-da! You did it. It's just fun. Just have fun.
Chris: That is fun. I was working on an art-directed post this morning. Somebody wrote in with like an open letters type of post they wanted to post, and I almost never say yes to that because I'm not that into other people's exposition on my website.
Dave: Yeah. Yeah.
Chris: But it was so fun and seemed right on to CSS-Tricks-ish.
Dave: Okay.
Chris: We can attribute it to them so clearly that I was like, let's make it look like a letter. We've been going back and forth on how to get it, but I still think it's fun. Wasn't it just Reagan the other day was like -- the post was about giving up on art-directed posts, in a way.
Dave: Yeah. Reagan, my coworker Reagan Ray. He does these posts. He just did a post for all the lettering for best picture winners, so all the title lettering.
Chris: So cool.
Dave: He has a whole post on that. He has a superhero lettering. It's just all these Marvel and DC Comic lettering for the character's name and stuff like that.
Chris: How does he even get them, get your hands on these things?
Dave: Well--
Chris: He's probably got to hand clean them up, doesn't he?
Dave: He does, absolutely. But this is the thing. I've known Reagan since we were freshman -- or no. I've known him since high school, so I've known Reagan a better part of like 25 years here. This is what he does. He collects these things and he has them organized on his computer. He knows where they're at.
You're like, "Hey, Reagan. Have you ever seen this semi-truck?" He's like, "Oh, yeah. I have that semi-truck letting in this folder here. on my computer."
Anyway, he collects. Anyway, but then he has a post here, like, "How I learned to stop art directing and love to blog," because he would do a whole custom kind of thing for every single post, but he's kind of been like, "You know what? I'm going to actually scale it back and maybe I have a few things and set up some constraints, some limitations, and then I just use theming and stuff like that to kind of get it all done." I think it's up to his velocity, his ability to put stuff out.
Chris: Yeah. You should be able to write a paragraph and hit a button and hit send and not have it be this weight on your life.
Dave: Like, "Oh, man. How am I going to do that?" I put a two-paragraph blog post up the other day.
Chris: Whoof. Good for you.
Dave: Incredible.
Chris: Yeah.
Dave: It was liberating. I tell you.
Chris: I need to learn a little bit how to get back to that because I've had on my list for a long time that I'd like to have not art directed, but if I post that then it can use a different format and I don't have to pick it. I could make a WordPress thing that counts the number of words in the post or something, and then lays it out differently. If you land on that URL, it doesn't look awkward because right now it looks awkward on CSS-Tricks because there's a sidebar and it has four advertisers in it, which then overpowers the paragraph that you just tried to write.
If you're at five paragraphs or more, it looks fine. It's totally natural. But if you want to write a one-paragrapher, which I do sometimes, I think that it's just--
Dave: You almost need another layout, right? Yeah.
Chris: Isn't it--?
Dave: That's been--
Chris: You know Colin Devroe. He started that little blog chain of like, "What's your typical day look like?" recently, and a million people responded to it.
Dave: Oh, yeah, yeah.
Chris: Which is pretty cool. He's a good blogger. But I subscribe to his feed, and take this with a grain of salt, Colin, if you listen to this. He does a lot of lot of one-sentence blog posts. That's too far for me.
Dave: Okay. Okay.
Chris: I want a little bit more. Have more of a complete thought than one sentence.
Dave: No, that's true.
Chris: It's like even shorter than Twitter. But a paragraph or two is -- I don't know -- better to me. I want to subscribe to a feed that's not your one-sentence ones.
Dave: Yeah. Yeah, the microblogging is a thing. Manton Reece -- I know Manton. He lives here in Austin -- does microblog, which is cool. I'm pro microblog because it's kind of like a Twitter alternative but you own it, right?
Chris: Right.
Dave: Then some other indie Web people, Adactio, take kind of a step further and you only post on your site, so all your tweets actually come from your site. Then they go to the -- you know they have a link back to your website.
Chris: Yeah. I like it conceptually, but there's just something that it's not even the technical wiring up that bugs me, but it's just like I don't know that I want my tweets to have that kind of eternity.
Dave: Yeah. Yeah, it just feels like it has -- yeah, I don't want it. It's more ephemeral for me. But I'm not going to -- they can do whatever they want, but--
[Laughter]
Dave: But I do like microblogging. I like this. The constraint almost is like, hey, here's a photo. Hey, here's a -- this is just kind of a one-off thought. I don't want to do a whole blog post about it. Here it is.
But I also like it in a separate feed. Sometimes, when they're all together, it's a little weird for me. But you know, that's fine.
Chris: Yeah.
Dave: I don't know. Let people blog how they want to blog. What's important is you published. That's the important thing.
Chris: I do. I mean I think so. I obviously don't need to defend blogging. Been a fan for a hot minute.
Dave: Yeah. Do it for the URL.
Chris: Yeah. Well, those are all the links I have. What else? Do you have a final thought to share with the world this week?
Dave: No. No.
Chris: All right.
Dave: I turn 41 here, actually tomorrow from when we're recording, but it's fun because you get to--
Chris: That's right. You share a birthday with Alex, my cofounder.
Dave: Oh, yeah. That's right.
Chris: That's right. I forgot.
Dave: I forgot that.
Chris: That's cool. Well, happy birthday. Yeah. 41.
Dave: Yeah, it's exciting.
Chris: Right behind you.
Dave: Yeah. We're here. But that just gives that time. I don't know. You're just like, hey, I'm going to think about my life. [Laughter] You just do all the -- and I've actually made a list of, like, here's the stuff I'm going to do. These are my goals. So, I've got some goals moving forward, but they're kind of high-level or awkwardly specific like, "Write a video game." So, you know. [Laughter] So, we'll see how that goes in the next 20 years or whatever.
Chris: Oh, God. I cannot wait to see what's in store for us both in 20 years. Think about how hard I work and all this website stuff. I'm like, "Am I going to be just schlepping around making websites in 20 years?" Then I was like, "I kind of hope so."
Dave: Kind of hope so. Let's see. Twenty years would be ShopTalk [laughter] 3000, I think, so we'll get there.
Chris: [Laughter] Maybe. It'll definitely be in VR at that point.
Dave: Yeah. It's exciting.
Chris: All right, man.
Dave: All right. Well, hey. Thanks, everybody, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show. Follow us on Twitter, @ShopTalkShow, for tons of tweets a month. Join us over on the [techno voice] Discord. It's fun. It's just genuinely fun. That's patreon.com/shoptalkshow, I believe.
I get to this point in the show now, Chris, we changed up the ending a bit. I know people have been commenting on it. But we changed up the ending. Now I'm just like, what do I do with my life? Anyway--
Chris: I know.
Dave: Chris, do you got anything else you want to say?
Chris: Got a lot of muscle memory for that. We forgot to get to any of your questions, but this is still a question-and-answer show. Send in your questions at ShopTalkShow.com and... ShopTalkShow.com.