566: View Transitions and Passkeys
How should a podcast start? Talking View transitions, Google's Baseline, Passkeys, how to start a company, and ordering a spicy chicken combo at Wendy's.
Guests
Chris Coyier and Dave Rupert
Time Jump Links
Episode Sponsors 🧡
Join us on Patreon! ()
Dave and Chris have been making ShopTalk Show for over 8 years! We thought we'd give y'all a way to support the show directly, and as a cool bonus, join us in a Discord.
Transcript
Dave Rupert: Previously on ShopTalk--
[Banjo music plays]
Chris Coyier: Ah, hey. Hey, Dave.
Dave: Oh. Hey, Chris. Didn't see you there. What's happening?
Chris: Nothing. Just stopping by. Hey, I got this big idea, man. I think me and you should do a podcast together.
Dave: Are you kidding me?
Chris: Not kidding. Nope.
Dave: I just bought a domain name for a podcast.
Chris: Boom! Unbelievable.
Dave: Yeah. It's shoptalkshow.com, and my idea was we should do a podcast and talk about shop.
Chris: That's what I wanted to talk about. I wanted to talk about shop.
Dave: Shop is my favorite thing. Well, great.
Chris: Nice.
[Banjo music plays]
Dave: [Singing and mumbling] ShopTalk is a....
Chris: ShopTalkShow.com.
[Banjo music plays]
MANTRA: Just Build Websites!
Dave: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. I'm Dave--in the shed--Rupert, and with me is Chris--in the booth--back in the booth--Coyier. Hey, Chris. We threw everybody through a loop last week with no standard intro. Man!
Chris: Yeah.
Dave: We just mixed it up. Mixed it up last week.
Chris: As we're recording this, I don't know if we'll have an intro or not this week. No idea.
Dave: Yeah.
Chris: Maybe?
Dave: Who knows. Yeah.
Chris: I don't want to just... I feel like the decision was made because you did some mouth music intro.
Dave: Yeah. Yeah.
Chris: It was good, and you didn't do that this time, so maybe we'll add it.
I don't hate it. As much as I love some banjo music and stuff, I like flipping it up. In the podcast that I listen to where I hit the podcast button and they're immediately talking, totally appealing to me.
Dave: Feels good.
Chris: I like it.
Dave: Yeah.
Chris: It does feel good. It doesn't mean that there's no music ever. It's just used more sporadically as breaker-uppers.
Dave: Yeah. I could do either way, but yeah, yeah. I messed with the format a bit. I also like:
[techno music played]
Dave: Previously on ShopTalk, Dave talked about adding animations to his site via transitions. Guess what. I did do that, Chris!
Chris: Yeah. Was it just last week we talked about that? I think it was. Yeah. They've been on my mind heavily.
I don't know. It just seems like we should know when that was dropping. And I played with... There are two things, people, podcast listeners. View Transitions means, one, a JavaScript API that has one method - one. It's called Start View Transition, I think, off the document. You call it and, inside of it, you change the DOM. Then it's smart enough to (when it can) tween the changes between what happened before that function was called and now that the function is done.
It's great, but it's only great for things that happen on a single page. I'd say SPAs, but it's not really just for SPAs. It could be for just a slideshow or something on a page.
Dave: Yeah. Yeah, like big replacements. Ideally, you have a router in the mix that's kind of doing it. But yeah. Yeah.
Chris: A classic is a hamburger that opens up into a drawer or something. That's neat. Why don't you let View Transitions do that? It means that the code that you have to write is very minimal.
Dave: Yeah. Yeah.
Chris: I think it's really neat for that kind of thing. That's one. One. put a one with a circle around it.
Dave: I do want to call out Nuxt has an experimental version. It might even be in main now, but Vue has this transition component that has before, enter, leave, and all this stuff.
Chris: Yeah.
Dave: They have an experimental one that is this native page transition, so taking Vue's little thing out of the mix, Nuxt does in 3.4, I think, or 3.3. Anyway, it's catching on is what I want to say. Now that this API is out, people are like, "Ooh, we can kind of build with it," because that is turned on in Chrome main, that JavaScript piece.
Chris: That one, the one with the circle around it, the Start View Transition API, that is in stable Chrome. Yeah.
Dave: Mm-hmm.
Chris: Wild, right?
Dave: Unexpected. Yeah.
Chris: And by all accounts, took the correct path through standards and whatnot.
Dave: Mm-hmm.
Chris: There's some gap in my mind about how that's supposed to work. What I mean by that is it was still totally invented by Chrome, documented by Chrome, blogged by Chrome, has Web standards championships from Chrome, and then was shipped by Chrome only and nobody else has done anything whatsoever.
Dave: Mm-hmm.
Chris: Wasn't there a time when that was--? I'm such a huge fan of this, so I'm trying to be critical just for fairness a bit. Wasn't there a time when that was not cool? You weren't supposed to totally ship it unless there was some kind of signal or something from other browsers.
Dave: Yeah.
Chris: Maybe not even signal, but they at least attempted an implementation or something.
Dave: Yeah, well, and I think even Jake Archibald versions of page transitions, [laughter] the first one from 2013 - or something like that - that didn't fly. That didn't happen.
Chris: Right.
Dave: And so, it is curious why this one made it through. But I guess maybe there was some signal or some informal, like, "Well, that's more possible than it's ever been before," you know?
Chris: Hmm...
Dave: Previously, it was all based on meta tags. I think adding... It's that classic thing where adding a JavaScript method isn't that big of an issue. Then you kind of gateway people.
Adding a CSS property, less of an issue. Adding a meta tag, less of an issue. So, anyway, hopefully--
Chris: Yeah.
Dave: Yeah.
Chris: But I stopped one with a circle around it. Let's do two with a circle around it. There's a second kind of view transitions. These are the ones that you've implemented. This requires no JavaScript - none.
Dave: None. Zero.
Chris: In fact, you can't. There isn't even a relevant JavaScript API for it.
Dave: I wouldn't know how to do it. Yeah.
Chris: Right.
Dave: [Laughter]
Chris: You put a meta tag on your thing. Again, I mentioned this last week. I don't totally understand the meta tag, but okay. Let's call it a prerequisite.
Dave: Yep.
Chris: Then once it's on there... You know why...? Now that I think about it a little more... Sorry for the backtracking.
Because, if you just put the meta tag on the page, you do get some behavior. If you click a link to your own website, it cross-fades one webpage to the other page, which is kind of cool.
Dave: Yeah. That was a surprising thing. We were kind of hashing it out in chat after that episode. It was like, "Add this tag." Then I added it, and it was like, "Whoa! My site is now a PowerPoint," like instantly.
Chris: Right. You get the... Isn't there a little dropdown of slide-to-slide transitions, and one of them is cross-fade? It's really, you've got a PowerPoint or Keynote or whatever.
Dave: I have a Keynote just with one meta tag across my site.
Chris: Right.
Dave: You need it on the before page and the after page.
Chris: Yeah.
Dave: Yeah.
Chris: I think you said in the podcast it's kind of fine. There is... or maybe were even more positive than that, that cross-fades are kind of good-ish. You know?
Dave: Yeah. Yeah. You know accessibility-wise, it's one of the things you can do. It doesn't make people barf.
Chris: Right.
Dave: There's no little bit of object permanence like, "Okay, it changed from the before to the now."
Chris: Yep. Yep, yep. Okay, so you put the meta tag. You get the cross-fades. Got it. Now, more compelling to me -- maybe not to everybody, but I think this is amazing -- you have to know this is where one and two kind of overlap a little bit. You put a view transition name via CSS onto whatever - anything, any DOM node.
There can only be one of them with that name. That's crucial. Then when you click a link and it's going to the next page, I think it does a little like HTML pass real quick.
Dave: Mm-hmm.
Chris: It checks (in CSS, I guess) if there's anything on the new page that also has view transition name on it that has the same exact name, and there can only be one of them on that page, too. If that unique situation happens, it will tween the elements together, meaning its position and size and everything on the page.
There's a little secret cross-fading stuff that happens in there, too. For example, Dave, on your site -- sorry to ruin it. This is your work.
Dave: No, that's fine. This is great.
Chris: You have a list of blog posts on your homepage.
Dave: Yep, a classic list.
Chris: Each one of them... I think you're probably on the wrapper of the title and the little subhead and stuff.
Dave: The LI, yeah - or whatever.
Chris: It has a view transition name on it. Then that, you have some kind of header of your blog post that has some of that same stuff in it. You put the view transition name on that, too.
Let's say you're halfway down the page of your homepage and you click a blog posting. It'll slide up. That's what I mean by tween, like animation tween. It'll move itself up to the top of the page because that's where it is when you've clicked the link and moved to the next page. It's an amazing thing to behold.
But let's say it's font-weight 200 on the homepage and font-weight 800 on the other page. It's not actually tweening the thickness of the letters on the way. The magical cross-fade look to it kind of makes it look like it is, though.
Dave: Yeah. The way it works... My understanding is it creates a raster almost like a snapshot, an image.
Chris: Yeah. It's a fricken' JPEG or whatever.
Dave: It creates a transparent PNG something.
Chris: Yeah. Right.
Dave: Then it says, "Cool. What are the dimensions of that on the next page? Cool. I'm just going to morph the height and width. I'm just going to resize transform. Then I'm going to translate it to the position it needs to be in. Then I'm going to cross-fade it with the actual thing."
It has the before and after states there. Then it will just cross-fade between those as it's going.
Chris: Incredible.
Dave: It's basic but convincing, is what I'd say.
Chris: Right.
Dave: The effect on my site is it's this floaty up, like that thing you just clicked now becomes the page title. Is it perfect? No. No, no, no. But is it pretty damn convincing? Yeah, yeah, yeah. It's pretty great.
Chris: Very convincing.
Dave: I'm into it, and it was very cheap. Then Adam Argyle suggested I put one on my nav, too, because that was just kind of--
Chris: Mm-hmm.
Dave: Everything else gets cross-faded.
Chris: One way you can think of this is paint holding. I think that's how Adam brought it up to you, and it makes sense, is that you say... you're like, "Make sure you chuck a view transition name on this other element, too. That way when you click, it paint holds between the two," rather than being cross-faded or something. And it feels good.
Dave: Right. Right. My nav doesn't disappear and then reappears. But what happens, actually, is my nav... If you were scrolled down the page and clicked, my nav drops in from the top. The title floats up. Then the post fades in. It's cool.
Chris: Something to behold, yeah.
Dave: Yeah, and I have added two CSS properties.
Chris: Yeah! You wrote no animation code whatsoever to make this happen, right? Nothing.
Dave: No animation code.
Chris: Nothing. It just works, which is important because the defaults then have to be really good, and they are, thankfully, and will probably get better. I heard lots of feedback on this from looking at replies on the various social networks these days of people being like, "But wait. Where is the code that does the movies?" You're like, "There isn't any. It just does that."
Now, crucially, you can control it if you want to. There are ::view-transition -- blah-blah-blah. There's stuff that says, "Don't do your default animation. Do this animation instead," which to me is amazing.
Let's say, Dave, while it was sliding up to the top of the page, you wanted it to do a dang 360 turn on the way up there. Just write that then as the animation and it will do that. That's amazing.
Dave: You can. Yeah. You control the... It's weird and fairly undocumented.
[[Laughter]
Chris: Yeah.
Dave: You control the out. It's called View Transition--
Chris: Isn't it old and new?
Dave: Old in View Transition New, so the old thing going out and the new thing coming in.
Chris: Which is funny because the early spec of it was outgoing and incoming, which I think is more clear, actually.
Dave: More clear and also like email, and that would make sense to me. [Laughter] But yeah, so you have the opportunity to style that. One thing you may want to do is fade out the old stuff faster and fade the new stuff in a bit more dramatic, or vice versa.
Chris: Right. Right, right, right.
Dave: It's really as far as you want to take that. You could have... You could literally go full stupid and put the entire Star Wars script in a content after and then scroll it, if you wanted. You could do a full, stupid transition if you wanted.
Chris: Absolutely. Absolutely. But the defaults are good, too.
What I think about partially is, just open your phone for a moment. You're looking at... On my iPhone, I'm looking at a grid of icons with some widgets and stuff. Any one of them I click -- and I'm sure you can turn this off, but by default -- it zooms out just whoosh from where my finger is. Whoop, there's the app.
I'm going to open Overcast, the podcast app, because we can agree that is cool. It's going to... It immediately went to the last page that it was on for me. But whatever I do in Overcast, anything that I click, there's a whoosh.
If I go back to a page that's hierarchically higher, the way that this app is set up is that the entire page slides to the left and shows me the thing on the right. If I click a button, it slides back to the right and shows me things there. I click an individual podcast, a little thing slides down to show me tools for it. If I click a menu, it whooshes out the menu to show me that.
Everything moves in native apps - everything. It's what gives a native app a kind of movement. It makes it feel like a native app.
Dave: Yeah. Even the weather app, which has got to be the dumbest thing. You click on the little doppler. Whoop, you're full-screen now.
Chris: Everything moves on mobile apps, and it's just become a feel to it. I think that's what people key into when they're like, "Well, what's the difference between a web app and a mobile app?" You're like...
Dave: Motion.
Chris: Somehow, mobile apps got away with just bucketloads of motion - bucketloads.
Dave: Yeah. Well, I think it adds this... We've been calling it, at Paravel or, sorry, Luro... [Laughter] Paravel. What's Paravel?
Luro, we've been calling it makes it feel expensive.
Chris: Hmm...
Dave: For some reason, people like expensive things. You fix the spacing.
Chris: Right.
Dave: You fix the animations, the zips, and it makes it feel expensive.
Chris: That's something, especially for an app or an agency or whatever. That's an important thing.
All right, so in the past, this path was only open to you if you built a single-page app.
Dave: Yeah.
Chris: You were altering the URL yourself. You had a client-side router. That was the absolute only way to do it. This has just upended all of that. Now it's a multipage app situation.
I do not like saying multipage app. It's just a regular website where you click links and the browser reloads.
There's just a lot to love about that (as a concept) that you can now design what it's like to transition from one page to another is massive for the Web. It can bring that -- whether you like it or not -- bucketloads of animation. It brings that expensive thing that Dave just said to the Web.
And you can still respect people's preferences. You can add a couple of lines of CSS that say, "If prefers reduced motion then ::website-view-transition-duration-zero-seconds -- or whatever that happens to be.
Dave: Yeah.
Chris: You can still respect that in the way that I assume there's some kind of reduced motion thing on phones.
Dave: Yeah. View transition none. Yeah, I added it to my site just to make sure it worked.
Chris: Yeah. Absolutely.
Dave: I tested it in the browser and stuff like that. That CSS, the fact that you can... Because if I code a big JavaScript thing, I guess I could do the prefers media query before I do the JavaScript stuff.
Chris: Yeah, you can.
Dave: But, like, am I? No, I'm not going to. [Laughter] But anyway, it's more responsible. Man, the progressive enhancement story here is so awesome because, how does it work in other browsers? It just loads like a normal ass webpage, and that's beautiful.
Chris: Yeah.
Dave: How does it load? Literally, no browsers have this turned on by default right now, so it just loads. It works like normal.
Chris: Yeah. Yep.
Dave: You turn it on, and now you have a very cool experience.
Chris: I think we're going to start seeing... A) I think... I hate to be so grandiose about everything, but this is a big deal. It's like container queries big deal, I think. And we're going to see a lot of it. Then we're going to see it find its way.
Dave: Mm-hmm.
Chris: Partly is going to be coupling it with media queries, literal old-school media queries, like, "Only do this if the page is under 500 pixels wide," for example. I think a default of moving the entire page all the way to the left on a 2,000-pixel wide screen is too much.
Dave: That's a vomit comet, yeah.
Chris: Yeah. But if it's on a little screen, it feels much more natural and people are kind of used to it. I think that's a big deal, so apply that transition on small screens and not big screens. Sure.
Dave: We have a view where you're looking at a document, like a project or something in Luro. You click edit, and we want to go to this edit screen. We've done this whole magic morph to make it. Then it goes down to two frames a second. I am very interested in this world where, hey, I can just make that animation happen very smoothly when you click the edit button.
Chris: Mm-hmm.
Dave: It's going to look really cool, and I could even get down to, "Move this element to this position." So, when people are like, "Oh, where is my title field?" It's like, "Yeah, you saw it move. It's great."
Chris: Yeah. Yep. Also beautifully works with progressive enhancement. It literally doesn't matter if this stuff runs or not.
Dave: It doesn't.
Chris: It doesn't matter.
Dave: Yeah.
Chris: It requires a little bit of coding. Not so much for the multipage transitions or, I'll just call them, page transitions.
Dave: Mm-hmm.
Chris: But for the start view transition, the stuff that happens on a single page, you have to check. You have to go, "If document.start-view-transition, then call document.view-transition, else do whatever you were going to do otherwise." But that's easy.
Dave: Yeah.
Chris: That's the easiest kind of progressive enhancement - kind of. This leads me into talking about something else that we mentioned on our newsier show before, which is the concept of baseline, which Google dropped at Google I/O with a Rachel Andrew video. I think she's been working on it for a long time. Congratulations for getting that out. This would not be baseline.
Dave: This would not meet the baseline. Yeah.
Chris: View transitions are not there, and I have yet to find... I spent my morning looking. Not my whole morning, but just a little time today because I was watching the video for it and bouncing around to try to find it. It feels like they have a nice component for baselines, but if you really go looking for them, they're really only in a couple of places. It needs a lot more getting these things out there.
Dave: You need more baselines on the MDN. Yeah, yeah.
Chris: Sometimes they're even... I looked up one about style queries, a really interesting, new CSS thing. Man, CSS is just popping off, isn't it?
At the top of it was like, "This is part of..." Part of the blog post I was reading about style queries is that this is a part of kind of the container query land. It's part of the same spec or something, so the baseline component at the top of it was for container queries, which looks green all the way across.
Dave: Right.
Chris: Which is wrong.
Dave: Yeah. The specs are so funny, like color level four. Relative contrast - or whatever - is in color level four, right? But other people, people are like, "Oh, we support P3 and OKLCH. We have color level four." I'm looking at you, Chrome.
Chris: Mm-hmm.
Dave: But they don't have the relative color syntax. But they get a green checkmark in Can I Use even though it's partial support. It's like, "Okay, well, we need..." I don't know. You're supporting color level four. I agree, the big part, but we need the whole picture.
Chris: I hate to do this on a podcast where I don't know the answer to it, but how many times have we done that on this show?
I'm trying to understand if it doesn't have... Does the baseline tell you if it's not supported, too? The only ones I've seen are green all the way across.
Dave: They're green across the board? Hmm...
Chris: Maybe you don't get a baseline unless you meet the baseline - or something. It feels like there should be a red bar version of it that's a warning. That seems even more important than the one that tells you that can use it.
Dave: Well, and I would love this in a portable format, too, like a Web component or something.
Chris: Yeah. Give me an iframe for it - or something.
Dave: Yeah because if I'm going to blog about my view transition stuff, I would love a little baseline brick that just said, "Don't use this," or "It's Canary only right now."
Chris: Yeah, it should be a Web component. Dave, it should be a Web component.
Dave: Web component. Web component.
Chris: I bet there kind of is one already.
Dave: Are Web components on baseline? [Laughter]
Chris: Maybe. Because remember there was... So, there was Can I Use, right? Great. Then I think it was Ira Atkinson. Sorry to brutalize that name, but she made a Can I Use widget, but it was kind of before the days of Web components, or at least really widespread use of Web components.
But the idea was, gosh, isn't Can I Use a great resource? Shouldn't anybody be able to embed a really lightweight, nice, Can I Use widget on a website? For some reason, Can I Use doesn't offer that. They should because embeds are smart.
Dave: Yeah.
Chris: But she made one, and it's nice. But it's not a Web component, I don't think. Anyway, it's probably a little heavy, too. This just is begging for an "anybody to use it" Web component. Of course, it would have to make a fetch for the data and stuff, but so be it.
Dave: In theory, that's in a thing. I'll make the Web component. I'll make the API. [Laughter]
Chris: Whoof!
Dave: Just point me in the right direction.
Chris: Yeah. But we're not looking for one that says the feature is not supported. I didn't really find it yet, so I look forward to seeing examples of that. I feel like the view transitions page should say that. But it is tricky because it's kind of like--
What did Andrew say in Discord the other day? It's like I want... It's like I need three answers: yes, no, or yes with progressive enhancement.
Dave: Ah, yeah.
Chris: And I think he's right. That's smart. It's not yes or no. It's yes or no or yes with progressive enhancement. And view transitions works in that, so I almost don't want to see a red bar at the top of the view transitions docs, which don't exist, but there are blog posts.
Dave: Mm-hmm. Mm-hmm.
Chris: That has that bar that's like yellow or something that's like, "Yeah, it's only in one browser, but it's very safe to use."
Dave: Yeah. Yes, no, yes with progressive enhancement. That's what we need, folks.
Chris: Yeah. You've been on a tear lately about, like, "This stuff is too complicated! We need answers!"
Dave: I am.
Chris: [Laughter]
Dave: My old man is coming out, man. I don't know. I turned 43. I'm just on a rollercoaster of whatever male menopause is. [Laughter]
We have to get rid of nuance, man. It can't be, "Hey, man. Can I write a table, but use display grid on it?" No.
Chris: [Laughter]
Dave: That answer needs to be super [explicit used]. I'm tired.
Chris: [Laughter] Yeah.
Dave: Having to look up every line of code you write is not a sustainable solution. We just can't do this anymore. The foot guns, everything, I was looking at... Here. Not to get too mad.
[Laughter]
Dave: I was looking at Heidi De Vries has a post about the new popup attribute, which is awesome because you can say "Button popup target my popup," and then you have popup or, sorry, div popup equals my popup or popup equals auto. But it has an idea of my popup. I don't know.
Chris: Yeah.
Dave: See. I don't know how it works. I've already messed up. Make it easier. You know what I mean?
Chris: Yeah.
Dave: I'll just write a Web component that does it for me [laughter] predictably, but how do we just eliminate nuance? We need to think about that.
I know accessibility, too. A lot of people depend on the nuance, I should say. Full disclaimer. It's Global Accessibility Awareness today, the day we're recording this.
Chris: Mm-hmm.
Dave: But a lot of people depend on the nuance and need that to be considered. But I think a lot of accessibility has too much nuance. It's like, "Well, if your text is 82 pixels tall, then it can be doubled one, single A, and then... You know?
Chris: Mm-hmm.
Dave: It's like, "Just fucking eject, please." Just say yes or no sometimes. [Laughter] You know? Let's not... We have too much... We're not building road signs that people are looking at 20 miles away. Maybe we are -- digital road signs -- but we're building computers a foot in front of somebody's face, so let's just have some standards. Let's just eliminate the nuance. Anyway, that's my new thing.
Chris: Eliminate the nuance, that's nice because I feel like I spent a good decade telling people that there is so much nuance to all this that it's just too hard. Anybody that has a strong line answer I would accuse as being dogmatic. The Web is a big place. I was trying to add nuance to the Web.
Dave: I'm an appreciator. Okay? [Laughter] Nuance, I think, too, you get thought diversity, which is probably good.
When you're just like, "Man, how do I build a website?" and you're just like, "Well, is it a website and a space station?" It's like, "I don't know, man. Just a website. Tell me about a website." You know?
Chris: Yeah. The bigger things like, "Should this website be accessible?" There's no nuance to that.
Dave: No nuance. Just do it. At least get 100 on Lighthouse. Then people are like, "Yeah, but you can trick Lighthouse." Yeah, you can commit fraud. Anyone can commit a fraud, Chris. I could commit bank fraud.
Chris: Yeah.
Dave: It doesn't make me a billionaire. It just makes me a fraud. So, those arguments are so stupid when somebody is like, "I got 100 on Lighthouse and I made a bad page." It's like, "Yeah, good job, you fraud." [Laughter] That doesn't matter.
Chris: Yeah. Yeah. I've heard that one so many times, or on any Web feature somebody will raise their hand and be like, "But that could be abused." And you're like, "Color can be abused," anything, for a feature to exist or not.
I'm not talking about the abuse like that API could be used to fingerprint people or something. That needs to get thought about.
Dave: Yeah. Yeah.
Chris: But if it's just like, "You made animation, another way to make animations? People will abuse that." Every single padding can be abused. You know? [Laughter] It's just crazy.
Dave: Yeah. Yeah.
Chris: Where the Web Needs Less Nuance - or something. Nah, that's too nuanced of a title. I like the "getting rid of nuance on the Web," or something.
Dave: Ruthlessly, eliminate nuance.
Chris: Whoof! Yeah. Three--
Dave: That's my A Book Apart book. Holy... I maybe got it, baby! There it is!
Chris: [Laughter] I know. That is a book series that embraces nuance, I'm afraid, Dave.
Dave: [Laughter] They will not like it.
[Laughter]
Chris: You need something else.
Dave: Hey, other publishers. Smashing, call me, baby. [Laughter]
Chris: Yeah.
[Laughter]
Chris: Okay, so there's one thing I wanted to smash into this show that we have talked about in the past because, apparently, we just go on about the same subjects. I'm surprised we haven't brought up color yet, but it feels like we're probably going to have to. You got one.
But this one is about passkeys because it's getting more and more popular. More and more popular because it came from Apple. Apple has rolled it out everywhere. You can passkey your life up on Apple if you'd like to, especially on their services.
Google has too, which is pretty cool, for even all the basic stuff you would want in the world. Use Gmail? You can use a passkey instead of a password to log into your Gmail now if you want. That's awesome because passkeys are great.
But in the past, we've struggled to explain why they're so great. First, a couple of things you should know. Podcast listeners, this URL is even for you.
G.co, like a really short URL.
Dave: GCO.
Chris: G.co/passkeys, that'll just shoot you right to where Google has set up to start using your passkeys if you want.
Not an ad for Google. Although... Call us.
Then you can add on. You should probably do it from your phone.
Dave: Hmm...
Chris: Rather than your browser, just so you have the passkey on your phone, which is slightly more useful, I think. But you can do it from your computer, too. You can have as many passkeys as you want. You could do both.
Then you make a passkey, and now you've got one for your Google account. Aint that nice?
Google will kind of know if you have one or not so, by default, rather than seeing that screen that you've probably seen a million times in your life that's a little popup that's like, "Log into your Google account," and it doesn't ask for your account and your password, God forbid. It asks for the one first and then the password second, so you have to unlock your 1Password twice to get in.
No, no. No more, people. Your passkey will just be like, "Oh, you have a passkey. Do you want to use it?" Yeah. Face ID. Done.
You're like, "Ah..." [Kisses]
Dave: Well, I'm going to hate it at first because I keep my phone in my pocket, but I'll probably need to get one of those little mag-safe desk things. [Laughter]
Chris: Absolutely. There are more ways than one. What I thought was so confusing about this was, does passkeys require biometric stuff? I think the core technology of it does not, but it kind of does because you need to protect it.
Here's how it works. Public-private key cryptography. Right? But the public one is stored by Google. So, if Google is hacked or if we implement this at CodePen and CodePen is, which will never be because we're vigilant about everything. But you know what I mean.
If some service that you're using get hacked and all that service has of yours is your passkey, it's irrelevant. It doesn't matter. It's just a public key. Anybody could have it. You could blog it. You could paint it on the roof of your house. It doesn't matter.
Dave: You send that public key to every website you visit. [Laughter]
Chris: Everywhere. Everywhere. Yeah. Yeah. It's just your public key. Who cares?
What you have is your private key, and so the technology of passkeys just require you to send your private key over to match with that public key and let's you in.
The trouble is... Not the trouble, but they don't allow you to type in your private key.
Dave: Right. Right. Right.
Chris: That's not... There's no input field for that. It needs to be sent securely over a backchannel or whatever to make that secure part of the process. The way that gets unlocked on your device is a biometric thing, like your finger or your face or whatever.
Dave: Yeah. It's almost like the biometric challenge is just to get into your device, your personal device.
Chris: Right.
Dave: The phone is just like, "Click yes." If you had it fully unlocked, I guess it would just be like, "Click yes."
Chris: If it's unlocked, it's ready to rock.
Dave: Yeah.
Chris: Yep.
Dave: I think what's getting me, my mental hangups -- which maybe we need somebody on here to talk about -- is I'm Dave Rupert. I've had the experience where I lost my phone. It popped out of my bike bag. It shattered on the road. Boom. Disappeared off of the face of the Earth.
Chris: Yeah.
Dave: What do I do?
Chris: Somebody picked that up. Well, I think we just misspoke just there, so I might as well correct ourselves a little bit. Even though your phone is unlocked, so say that criminal not only stole your phone but got your phone unlocked too. At least the couple of times I've used Google recently (after setting this up), it does biometric before it sends the key.
That might be an option. You might be able to turn that off. But it's biometric each time, which when you're on your phone is no big deal at all.
Dave: Mm-hmm.
Chris: You need to do that all the time.
Dave: Yeah. Well then that makes me comfortable. That's great. But I guess, how do I get back into my account? If I can just register another phone, right? "Oh, sorry. This is Dave's phone, too," right?
Chris: Yeah.
Dave: That's cool. Now I have Dave's phone one and Dave's phone two on my Google account. What's preventing fake Dave, bad actor Dave, to just say, "Yeah, I'm Dave, too, and I've got Dave's phone three"? [Laughter] "Let's just pop that in there."
Chris: Yeah, I don't know. That's where my expertise is limited here.
Dave: Yeah.
Chris: I believe there are answers to all of this. They did not forget to do that. You know?
Dave: [Laughter] Yeah. Somehow, Dave Rupert has figured out how to subvert this entire--
Chris: Right. But you're not really asking about the deep technology. You're asking about the UX of it, like how. Am I creating any foot guns for myself here?
Dave: Basically, yeah.
Chris: Yeah.
Dave: If I lost my phone and my computer in the same day -- or something like that -- I basically lost my 1Password. You know what I mean?
Chris: Is it harder or easier to get in?
Dave: Yeah, so what do I--?
Chris: That's why 1Password does factor into this. For one thing -- side journey here -- they have this. I think it's kind of like an SDK or something. They're calling it Passage, which is a way that let's say you wanted to add this to Luro, Dave, that they give you this toolkit to integrate passkeys into your app with this thing called Passage or Passkey Flex. I should read more about this.
But anyway, that's helpful. But you can put your passkeys in 1Password, too, and probably you should because it means that then they're there, not on your phone directly. But I don't think they can be on your phone directly.
If you have an Android phone, they're going to be on your Google cloud whatnot. If they're on your iPhone, they're going to be in your iCloud. I think it's possible to use a phone without iCloud, but then I don't know what the story is there.
The point is if you lose your phone or you drop it to the bottom of a lake, and you go to the Apple store, and you say, "I need a new phone. I lost mine. It's at the bottom of a lake. It will never be recovered," what's the way back in?
The way back in, I think, is just to log into your iCloud, however you do that, and all your passkeys are there - rock-n-roll. You can log in.
Dave: Okay, yeah, because I guess it's storing my identity.
Chris: If there's some way that we could say, "Look. This particular pathway to logging into a website feels like a little bit less secure to me," or something, like somebody grabbed my phone from the bathroom and they pointed it at my phone and unlocked something and logged into my AWS or something, okay. Yeah.
Dave: Are you talking about your daughter?
[Laughter]
Dave: Because my daughter does that. She'll just--
Chris: She'll point it at your face?
Dave: Point the phone at my face and try to....
[Laughter]
Dave: Not quite when I'm on the toilet, but I'm actually not--
Chris: Maybe the world has decided that that's somehow less secure or something than a password. Okay, but what you buy from using this, overall, is more security.
Now, all of a sudden, theoretically, there are services that do not even have your password, which is just kind of nice.
Dave: I love it. I don't want people's passwords, Chris.
Chris: Yeah. Well, you don't have it, right?
Dave: I don't have it because it's all NaughtZero, and I'm kind of hoping they come up with a solution here.
Chris: We do have passwords. But, of course, they're salted and hashed and crypo'd, yadda-yadda-yadda. It doesn't seem to be a big problem. But yeah, it'd be cool to not have it.
Chris: I think we're a long way away from not having it at all. Despite the fact that I've added passkeys to my Google account, I still have a password, too. They didn't even offer me to delete that.
Dave: Yeah.
Chris: I think, for now.
Dave: Yeah. That's maybe their recovery solution.
Chris: Maybe.
Dave: Which that's--
Chris: But if it's both, then that doesn't seem to be a big security enhancement.
Dave: Right. Right. If your password is still password123, rut-row. [Laughter]
Chris: Right. Yeah, and I think of iCloud as a dangerous thing, too. It's been going around the Apple circles that if you unlock a phone, like if I grab your phone out of your hand, dude, and do what your daughter does and point it at your face, and it manages to unlock it, I can, without knowing your existing iCloud password, reset your iCloud password to something that only I know, which to me is wild that you can do that.
Dave: Yeah. Yeah.
Chris: But was a very intentional decision by them for some reason.
Dave: Oh, that's how I get my kid off his iPad. [Laughter]
Chris: Now... Yeah.
[Laughter]
Dave: I break in and I change that damn pin code. That's how it works.
Chris: Yeah, so it works out good for you.
Dave: It's called security.
Chris: But now with the advent of passkeys, that little trick, which is a big deal because it means that you have access to everything -- their photos, whatever, email -- now you have all their passkeys too.
Dave: Mm-hmm.
Chris: Wow! You know?
Dave: Yeah.
Chris: That seems a pretty big deal. But I guess biometrics comes into play there, too. You can't steal their face, theoretically, unless it's the movie Face Off.
Dave: Right. Yeah. Man, there's so much here to unpack, too. One morbid scenario I always come across is what happens if I die, suddenly, unexpectedly.
Chris: Hmm...
Dave: That is a thing that humans can do.
Chris: It is.
Dave: How does my wife pay for the house?
Chris: Hmm...
Dave: She doesn't know my weird 1Password account. I'm sure she can get on a phone and cancel stuff and all that stuff.
So, this idea of passkeys, she's got my phone. She knows my pin code. She can get in. She can log into any site.
Chris: Yeah.
Dave: Maybe that's cool, as long as you can inherit or get in that way. There's a way around through our family account or something like that. But then changing that, flipping that on its head, my wife and I are in a loving, trusting relationship. What if you're not? What if you're in a not-so-good one?
There's risk and danger. Your partner can just immediately control your phone? That's rough. That's tough.
Chris: Yeah. Yeah, I feel like the iPad reset comes in helpful there if you can unlock the kingdom of your parents or whatever it is. That occurs to me, too. In fact, we just brought up Ziade+Ford's podcast where they just did one about Paul was kind of unpacking his recently deceased father's stuff and dealing with email and all that stuff.
Dave: Mm-hmm. Uck. Yeah.
Chris: Really, the first thing that you should get access to probably is their phone because then you can get into their email, and the email is what you need for everything else.
Dave: Yeah.
Chris: If you're like, "Oh, where is your mortgage? Oh, it's at M&I Bank in Deerfield," or whatever. You're like, "Uh, okay. How am I possibly going to log into M&I Bank? I really don't want to drive over there. Even if I do drive over there, they'll probably tell me to call customer support. Ugh!"
Nope. If you have their email, you have a mechanism for resetting what is sure to be their M&I Bank password. Then you're in. Then you can deal with their mortgage or whatever.
Dave: Nah. It's so much to think about. Yeah, my mom was just in town. Yeah, she's not in danger or anything, but she was like, "You're the executor of my estate." And I was like, "I'm stressed out, mom. I don't need this right now."
[Laughter]
Chris: Yeah.
Dave: You're doing fine. You're good. Please don't add that to my life right now. But it's fine. Yeah.
Chris: I know what you mean. Yeah. Yeah. Mom did a good job. She's got that all locked in, in a folder somewhere.
But what's certainly not there are her 50 passwords to the world. You know? I feel like when that gets--
I feel like I have my strategy. My strategy is going to be: get into the phone, get into the email, and then I'm good to go.
If I'm being more proactive, we'll sit down some day, and we'll do a shared 1Password or something. I got them on 1Password ages ago, but I have some... I just don't think they really use it correctly.
Dave: Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. So, maybe it's a switch to passkeys. I don't know.
If I was starting... I think about... I do fantasy startup sometimes. [Laughter] If I was starting a company today versus even last year when we started Luro, I would probably go all in on passkeys, to be honest. It's a Web spec. It's well-supported.
Chris: Yeah.
Dave: Most people have a phone that supports it, so why not? Why not simplify your password life?
Chris: You'd be early these days, but I think you could try it. I would also go all in on Stripe. [Laughter] Everybody, feel free to steal that one. Having one payment provider is the way to go there.
Yeah. Use one service for stuff. Man, you'll be able to... Because the trick, everybody -- and I know you've heard this about startups -- is to focus on the thing that your startup does and not the 500 other things that are really easy to get sucked up into dealing with. Man, all of a sudden, you can just only deal with side stuff and just kind of forget about the core value of your product. Even if you haven't forgotten about it, your actions are portraying that you've forgotten about it.
Dave: Yeah. Yeah. I could go on forever. Yeah, it's just like I would even putting payment in pretty late in the product game. I would probably, day one, charge, like have a paid version, and it's a Stripe button.
Chris: Yeah.
Dave: We kind of are on the freemium situation right now, but--
Chris: Well, then you've thought about it, and you've coded it, crucially, into every aspect of the thing. All the logic of, "If paid, if not paid, or what plan they're on," is there. Yep.
Dave: Yeah.
Chris: Yep. Yep. Ideally, you've kind of baked it into a permission system, too. I know some of this stuff starts to cross the line of premature optimization or doing a little too much work too soon.
For example, I could see somebody else saying, "Oh, you should make sure you get Kubernetes up before you even start."
Dave: Yeah. Yeah.
Chris: Which is like, "No, I shouldn't." But in the case of permissions, you might want to consider it because there is an awful lot of, "Is paid, is not paid," logic in our app.
Dave: Yeah.
Chris: I think that's okay, but it's a little better to make an abstraction like "can create collection" - or something - which is a function call, which may or may not have to do with their paid status.
Dave: Mm-hmm.
Chris: You know what I mean?
Dave: Yeah.
Chris: Because there could be other factors, too. It could be like, "Oh, but have they been invited to the parent thing of this?" It gives you this abstraction layer where you write the logic on whether somebody can or cannot perform an action. That's where the payment code really belongs, I think.
Dave: Now you're talking about this really sophisticated action system.
Chris: Okay. Okay.
Dave: You've got to have those enums all set up. Oh, man.
Chris: It's sophisticated if you've never thought about it - or whatever. [Laughter] It's not that bad if--
Dave: If you've been doing it for a while, if you have it, it's fine. But if you're like, "Ah, man. We need actions," uh-oh. [Laughter] We'll just spend 20 weeks retrofitting that in.
Chris: Yeah. Sometimes that's the job.
Dave: Oh, yeah. Sometimes it's the job. Then the next thing would be if you're starting a company, be prepared to send an absurd amount of email to people, just billions of emails. And if you're uncomfortable with that in any way, get out.
[Laughter]
Chris: Uh-huh. Uh-huh.
Dave: Be prepared. If you aren't comfortable sending people 20 billion emails, get out of the startup business.
Chris: Oh, my God. That's.... Now that's an A Book Apart book.
Dave: Yeah.
Chris: Are you scared of contacting people? Your startup is going to fail.
Dave: Yeah.
[Laughter]
Dave: Hey...
Chris: No because it's also a metaphor because it's about you've got to hammer the social media. You've got to hammer the in-app notifications. Don't be afraid of those either.
Dave: Oh, man. Yeah.
Chris: If you think people understand what your app does and what all the features of it are and even the fact that they can upgrade to pro, you're wrong. They don't.
Dave: No.
Chris: Tell them again.
Dave: The analogy I would like to use is my dear lovely wife. Every time she goes to Wendy's, it is like she has never been to a Wendy's before. She pulls up to the drive-thru like, "What do they have here?" [Laughter]
Chris: [Laughter]
Dave: It's a fucking Wendy's. It has a #6 spicy chicken combo with a large fries and a large diet Coke.
Chris: Yeah. Dang right.
Dave: That's the only thing is has, Jessie.
Chris: Yeah. And it's Wendy's, and it's really weird, but they have baked potatoes too. You should know that.
Dave: You should know that just in case. The chili sounds good, but it will wreck you, so just be careful there.
Chris: They have Frosties, not milkshakes. Come on. It's been the same since 1987.
Dave: But no. My wife comes up to the... "Okay, what do they have?" [Laughter] Like she's going to order the baconator.
Chris: What is the right etiquette for that? I always feel like they're always really nice when you say you need a minute. They're like, "Oh, no problem. Just say when you're ready."
Then I'm always like, "Do I just go, 'Ready!'?"
Dave: Yeah.
Chris: What's the proper thing to say?
Dave: "Okay!"
Chris: Yeah, "Okay!"
[Laughter]
Dave: "Listen to me now!"
Chris: I always think it's awkward, too, when you roll up, and they're like, "Ah, hey. Welcome to Schmick Schmonalds. Would you like to try our new chicken bacon ranch salad deluxe?" or something.
Then you're like, "That was a question, so I feel like it should be answered," and I say, "No..." but I don't want to say it too rude.
Dave: I'm sure it's a fine sandwich. I just don't want it. [Laughter]
Chris: But then somebody with a different voice then follows up.
Dave: Oh, yeah.
Chris: That's my favorite where you're like, "But you just asked me... Did you switch?" No, it was a recording. Oh, my gosh.
Dave: Oh, yeah. Yeah. My least favorite thing right now is the mumbly teenager.
[Laughter]
Dave: It's just like... we drove up to Panda Express - my daughter's favorite food. Drive up, and this is real old man crap we're going through here, but anyway--
Chris: Yeah. [Laughter]
Dave: Drive up. [Mumbling] "Uh, yeah, orange chicken, please."
Chris: Yeah.
Dave: Get up to the window and he's like... I'm like, "Here. Here's my card. Thanks. Here's my card." And he goes, "Oh, the credit card machine is down. Cash only."
I'm like, "There's no way you told me cash only in that first mumble."
Chris: Wow!
Dave: But it's just like, try to be a cool dude.
Chris: Did you just have to drive away?
Dave: I had to drive away, dude.
Chris: You just didn't have any cash? Oh, that's incredible.
Dave: Didn't have cash. It's like 9 o'clock.
Chris: Yeah.
Dave: My daughter is yelling for food. It's fine. We're good.
Chris: Oh, yeah. "It's gas station sandwiches time, kids."
Dave: Nah, I can't hurt my...
Chris: [Laughter]
Dave: That's child abuse. [Laughter] But yeah. We figured it out, but it was just like, "Man, dude."
Imagine a world where there's a stereotype about drive-thrus. Chris, they're hard to hear and understand. Why would you put the mumbly kid on the drive-thru mic? You need somebody with a tiny bit of enunciation, a very clear, present voice. You can't give it to - whatever - Mumbles McCool teen who is just like [mumbling].
Chris: Good help. Good help is hard to find.
Dave: All right. Hey, we should wrap this one up. I think we talked about Web development today, so I'm just going to call that a WA. [Laughter]
Chris: Yeah.
Dave: Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.
Follow us on TikTok - I don't know. [Laughter] I don't know where. [Laughter] Mastodon. Anyway, follow, and join us over in the D-d-d-d-discord, patreon.com/shoptalkshow.
Chris, do you got anything else you'd like to say?
Chris: Oh... ShopTalkShow.com.