Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hello, Shop-o-maniacs. Coming to you live from Cupertino.

Chris Coyier: Whoa!

Dave: It's Dave--Apple UFO--Rupert, and Chris--Apple--Coyier. Hey, Chris. How are you?

Chris: [Laughter]

Dave: We are not in Cupertino. That was a lie.

Chris: Yeah.

Dave: That was a lie.

Chris: No. Yeah, I've never been to one of those events. I guess that's the big news that you're alluding to, like WWDC has just wrapped as we're recording this. Maybe a couple of days ago, but it's still, of course, dominating the news because Apple had a lot to say.

It's not really one of their product announcements. Yet, they announce tons of products at these things for some reason.

Dave: Mm-hmm. Mm-hmm.

Chris: Probably more than they normally do. I this case, of course, dominated by the headset. But there's a little bit. I mean that's pretty nerdy, so it's a little unavoidable to have a little fun talking about.

Dave: We'll probably have to talk about a headset in this episode.

Chris: Yeah, we might have to. And it's kind of fun. If you're totally bored of that, just skip it. I get that sense sometimes.

Sometimes, I open my podcatcher thing, and I'm like, "Oh... If I already know what you're going to talk about, it bums me out a little bit." But we have fun in a nerdy, code-y way, I think, with it.

One of the biggest things, just because I know you watch this world so much (and I believe had immediate questions about it) was that you could just be on a website and -- I forget what the mechanic is -- essentially drag it right down to your doc in MacOS and, all of a sudden, you have this. The behavior is very PWA-like (only on desktop).

00:01:52

Dave: They called it Web Apps, which was not progressive Web apps, so that was like SUSS, but Jen Simmons further clarified. It does not require a manifest or a service worker, which are part of what is a requirement for a PWA.

Chris: Yeah. Right.

Dave: Apple will--

Chris: You don't need anything at all. There are no requirements for it.

Dave: No requirements, but it gets better if you have those things. Does that make sense?

Chris: Which is what websites do.

Dave: Which is what websites do.

Chris: That's what she's trying to say is it's a website that you drag down into your bar. For some reason, part of me is like, "That's really smart," and some part of me is like, "Oh, so it's not special in any way. It's just like a bookmark."

Dave: It's a bookmark, but it's got a few properties like it launches in its own standalone environment.

Chris: Sure.

Dave: It's not quite the... It's app-feeling. It's kind of an electron killer, if that makes sense. If you were going to the website and you were like, "I want this to be an icon in my doc," you have that ability now. You did before with fluid or something like that.

Chris: Hmm... Those never caught on, though. This should be a much bigger deal. Crucially, will be Safari rendering engine.

Dave: Yep. Yeah.

Chris: I wonder if you can A) prompt, because that was always a big deal with PWAs is you have to tell people to do that.

Dave: Yeah.

Chris: Even if you can't, people will explain it. I'm sure they'll do everyone's favorite technique, which is user agent sniff for Safari and then show little prompts on how to do it.

Dave: Yeah.

Chris: I'd be tempted to do that. Yeah, it's to show people how to do it, essentially. If not, is there actual mechanics behind it? Can you offer a button which does it? Hmm...

Dave: Probably not.

Dave: Probably not.

Dave: It's going to be that whole point to where, in the UI, you'd think it is, but that actually just got a little tougher when the UI is a three-dimensional universe. [Laughter] Where in space-time reality is this added to the home screen...?

Chris: I've always been surprised at how good people are at that. They'll even do it in a tweet or something. As part of the graphic, they'll point at the retweet button or something. I'm like, "How did you get that right?" Isn't there--?

Dave: I tried that and it's just fail. It's just like--

Chris: [Laughter] You know it.

Dave: Write a line. Somehow I turned on write a line in my tweet.

[Laughter]

Dave: I don't get it. I'm not that good.

00:04:39

Chris: Yeah, definitely. I'm not online enough to get that to work anymore. Although, this is good. I think we can circle back to Apple, but this brings up a good point.

You want to point at something in a UI. How challenging is that? I literally blogged about this this morning because--

Dave: Oh, yeah. You did. Yeah, I saw that.

Chris: I was so fascinated by some of these challenges that apps take on. In fact, Luro app -- go sign up now--

Dave: Mm-hmm. Yeah. Sign up.

Chris: --doesn't quite have this complexity but has its own as far as you need to be parsing other people's websites, but that's a little different. Let's say your app needs somebody else's website to do its thing, like I want to point at something on your website.

Dave: Yeah.

Chris: Maybe it's even a browser extension needs to do that in some way. Well, then it's on you to find what you want to point at. How are you going to find it? What options are available for you to find it?

Well, you could use X-Y positioning. You could just absolutely position something and try to point at it that way. Nobody does that. Or at least they don't anymore.

It's just responsive Web design has arrived. You have no idea what's going to happen there. That's just a disaster waiting to happen. Nobody does X-Y coordinates any more as far as, like, I want to comment on, point at something on a website.

What you're going to do is select it. Probably with JavaScript, query selector, query selector all, whatever, which is, I believe, identical to CSS selectors, right? Do you know that off the top of your head if query selector is 100% exactly the same as CSS selectors? I think it is.

Dave: I'm going to say yes. Yes. I'll say yes.

Chris: Yeah, I think so.

Dave: Yeah, query selector. Yeah.

Chris: But anyway, it's so close.

Dave: It just returns the first one, so yeah.

Chris: Yeah, right, and that's what I mean because usually you're trying to point at something, so you only want to select one anyway. If your selector selects two things, now you have another problem.

Dave: Yeah. Yeah.

Chris: Not a good problem. You know? [Laughter] So, maybe you just select the first of them.

Dave: Yeah. Unique selector.

00:06:53

Chris: Right. Okay. Then I pointed to three apps that have this problem. At CodePen, we use AppCues. Sometimes it's pointing to, like, "Click here to upload an asset," or something like that. We're trying to educate people and, in some cases, often cases, to upsell, like, "You could do this if you were Pro." You know?

Dave: Mm-hmm.

Chris: That kind of thing. They expose (in their app) a way to select the elements. They'll do it for you. I'm sure they have plenty of customers who have never once thought about this because they'll do it for you. But I find when you just click on something and they use their own heuristics to find that element, it's a gnarly selector.

Dave: Mm-hmm.

Chris: It looks very fragile. You would never write the selector in CSS.

Dave: It's like, "Arrow, arrow, arrow," or "Carrot, carrot," "Greater than, greater than, greater than." It's just as specific as possible, right?

Chris: Very... Yes.

Dave: Yes.

Chris: And it loses a lot of... And I think this is probably mostly true of apps that use JavaScript frameworks. Let's say you have a suspense boundary or a context thing or whatever. Those tend to manifest in the DOM as a div. Even the router, a fricken' React router, puts a div in the way of stuff. You're like, "Thanks for the extra div."

But that means that there are all kinds of... Next has a big old wrapper with id__next, or something. That's in between the body and whatever thing you're trying to select. So, if it's trying to be really specific, there are all kinds of that crap in the way.

It's got to be smart about did a browser extension put that there because, if it did, you should probably ignore that because not everybody is going to have that installed. Just the person who is clicking it did. Very complicated.

We've talked about this before. I think the way to do stuff like that is use a data attribute on your own and point it at the data attribute.

Dave: I was just going to say, yeah, you need whatever data appcue=signup -- or whatever.

Chris: But if your Appcues or any app that needs to make this easy for people, you cannot make that a requirement of your app.

Dave: For sure.

00:09:08

Chris: Nobody will. Yeah, it's a disaster. So, that's them. Then I'm looking at this browser extension. I think it was late... I think it was December or something. Chrome put out this, like, "The most popular browser extensions," blog post. I was like, "Oh, that's fascinating," because I use so few of them.

Dave: Mm-hmm.

Chris: But they are so powerful. It was just a very compelling blog post to me. A bunch of them were very interesting. Some of them were new takes on how to find coupons on the Web and stuff like that.

One of them was called Tango. Really neat. You install it. Then you go to a website. This would work great on Luro.

Dave: Yeah.

Chris: You go click-click-click-click-click or click-type-drag-click -- whatever. Do anything on the website and, while you're doing it, it's like taking quick, little, interesting screenshots of what you're doing.

Dave: Mm-hmm.

Chris: Then it makes a step-by-step guide. It was like, "First, Dave went to the navigation and he clicked here."

Dave: Yeah.

Chris: "Then Dave clicked into this input and he typed "hello." Then he slid this slider to the left." Then you're done.

Then you'd be like, "This is how you do X in Luro."

Dave: Okay. Okay.

Chris: You've made a guide in 20 seconds.

Dave: Yeah.

Chris: To explain that to somebody is really cool. You could make your docs in that way -- whatever. They launched that product. It's pretty neat.

Then a couple of weeks ago, they launch a thing called Guidance. It's in addition to your guide. Now at the top of your guide, there's a button. If you click the button, it takes you over the website, and instead of you having to read the guide, it just walks you through it step-by-step in the actual website.

Dave: Oh, wow. Okay.

Chris: Now they've just 10x'd the complexity of this website because now it needs to re-find the elements that you interacted with when you made that guide. Hopefully, they saved the CSS selectors or query selector--

Dave: Along the way, yeah.

Chris: --along the way. And I talked to them a little bit about it, and they said, "Not only do we, but we save a whole bunch of them. We have like five takes on it." Then if one of them breaks somehow, they'll try the next one and see if that still works -- or whatever. All the way down to X-path. Do you ever hear of that?

Dave: Yeah. Yeah. It's kind of dark, dark magic there.

Chris: Yeah. Yeah.

Dave: Yeah.

Chris: It does work in JavaScript, still. You can get your hands on DOM nodes with X-path. I've never done it. I know nothing about it, practically. We even save one of those just to try.

Dave: Mm-hmm. Wow.

00:11:38

Chris: Interesting. They're in the business of that, too. Then everybody was talking. The other week, Arc Boosts launched their new version of Boosts. Yeah.

Dave: Well, it just--

Chris: A little hot drama.

Dave: Why was it hot drama? It's a very cool feature. Maybe we are just in this parallel reality, but I saw some talking heads saying, "This is a crime against humanity." I'm just like, "Man, I think it's cool." [Laughter]

Chris: Well, there were some surprising heads saying stuff. I even say... Back it up. I'm going to do this. I'm so sorry, Nicole Sullivan. I love you so much. You've done so much for the Web. Amazing. But even she was... It seemed to me, in the category of, like, designers know what they're doing. Why would you take control and change what a trained designer would do on the Web?

Dave: Right.

Chris: She has her reasons, I'm sure. But I was also surprised. I'm like, "I don't know. Just because I want to make this website pink and I literally don't care what you think." [Laughter]

Dave: Yeah.

Chris: I'm just kidding. [Laughter]

Dave: Let me be a fricken' goblin.

Chris: Yeah.

Dave: I'm going to wreck this website. I posted a post. I change robot bot posts on Mastodon to be in teletype, like in monospace font.

Chris: Yeah. I remember that. That was cool. Yeah.

Dave: Well, it's just what I want to do, so back off.

[Laughter]

Dave: This is not... I don't know. That's what I want to do, Internet.

Chris: It's such a power user thing to do, and you have to make that choice, just like installing a browser extension or anything. The other argument I heard was, like, "All of a sudden, websites are going to be inundated with support requests of websites not functioning properly because they've been manipulated by these boosts." The people that add these boosts are doing so very aware of what they're doing, I think.

Dave: Yeah. I mean support request is fine, but we're already doing that. The first thing I ask whenever somebody says, "I have a problem," it's like what browser and what extensions do you have?

Chris: What browser extensions, absolutely. And there is, Dave, a 50% chance that that's what it is about.

Dave: Mm-hmm.

Chris: I might be exaggerating a little bit. From the CodePen support desk, it happens all the time.

Dave: Yeah.

Chris: All the time.

Dave: We wouldn't bat an eye at, "Oh, you've installed an extension?" Under the hood, that's what an Arc Boost does is it creates a Chrome extension.

Chris: Yeah. Yeah. So, are they right to some degree that it does mess up websites? It could possibly do that? Yeah, absolutely. But no more than we already could. And Arc is like 0.001% of your users. I'm telling you.

Dave: Yeah.

Chris: It might look a little popular with Web nerds, but I don't think it's--

Dave: Well, it's not on Windows yet, and so that's a deal. But yeah. I'm probably on literally the polar opposite side of, like, "We should be adding more hooks so people can mess our sites up more."

Chris: [Laughter] Yeah.

Dave: I'm so far on the other side of, like--

00:14:56

Chris: You should do it on CodePen quick. Just open the boost thing on CodePen and then drag the color one around a little bit.

Dave: All right. OpenIO and then--

Chris: I don't know if they did something special. It doesn't seem like it. But if you make it a little green or something, it doesn't just change the background color to green. It redoes our entire color palette in a very pleasing way, I feel like. I'm a little jealous of how well it did.

Dave: Dude, yeah. I got a little blue. I'm less emo on the black.

Chris: It just looks great. [Laughter] Like, "Wow! Good job."

If you look around in the CSS, it's not that. I feel like they tapped into some lower level."

Dave: Like cue rotate kind of thing?

Chris: Right, but at the rendering level or something because I'm looking around the DOM to see, like, did they did some overlay thing that changes all the colors? It's like, "No, that's not there."

If you try to look at the rendered color in the DOM of elements, it's what they originally were. So, it's like I don't know what they're doing, but it's something very fancy.

The point with these boosts is to me more like the zaps. The zaps... Remember, ages ago on CSS-Tricks, I worked on the print eliminator. The point was that you could open this browser thing and start clicking on crap and it would just dot and remove it from the DOM. That way when you went to hit Command-P print, that stuff would be gone.

It was like this website forgot a print stylesheet because nobody does print stylesheets. I want to get it in good working order before I print it. It's like that. You just click on stuff and it removes it. Only, in the case of boost, it permanently removes it. If you just can't be bothered to look at the trending topics on Twitter, which I feel bad that I even fricken' use Twitter at all practically anymore. It's such a shitshow over there.

I can't look at those things. There's 100% chance it puts me in a bad mood. Boom. You zap it and now it's gone. You refresh the page, it's still gone. Amazing.

How does it do that? It needs to save some kind of query selector or something that's going to work. Now, if they change that, which surely they will because, if you look at the DOM of Twitter, it's just full of just computer-generated barf class names and such. The chances of that selector breaking, I think, are pretty high. But for a while, it'll work.

It's just interesting. I don't know. I have no further points to make on that. [Laughter]

Dave: Yeah. No, I'm just like, "Let people have fun." I don't know. I have a green CodePen now. Now it's orange. Now it's kind of red. This is fun.

Chris: It does great.

Dave: I'm curious what they are doing here. It's actually pretty impressive.

Chris: Yeah. Tell us, Arc. Write in and tell us how you make the colors shift because it's really strange.

Dave: It's like you have a primary hue rotate and a secondary hue rotate - or something. They have determined how they're going to do that. I don't know.

Chris: Try to find it in the DOM. I swear to God they're not manipulating the DOM to do this.

Dave: Well, yeah. It went over to the CSS, and it was like the CSS for the thing, like the code.

Chris: Right.

Dave: And it's empty. [Laughter] So, what happened? Anyway--

00:18:19

Chris: At first, I was like, "Oh, they just changed the background," because the sites that I did it on, it looked like that's what was happening.

Dave: Mm-hmm.

Chris: But then I'm like, in my head I'm like, "Well, how do you know what element I'm doing it on? Is it on the HTML? Is it on the body? Is it on a div that overlays the whole page? How are you doing that? How would you know what the background element is on my page?"

Dave: Yeah.

Chris: But then it looks like that's kind of not what they're doing. They don't need to reach in and find anything. And somehow it doesn't mess with images, so the images just stay the way they are. I think they tapped into some lower level.

Dave: It's not just a hue rotate.

Chris: Well, it's not on an overlay. Yeah, something crazy is going on. I don't know what they're doing.

Dave: It's like, yeah, they patched CSS. They messed with it at that level.

Chris: What are they going to do, Dave? Let's just, for 30 more seconds here. It's amazing. I'm such a fanboy of Arc, but they have no business model at the moment, and their growth rate is wild. They have all these apps. They are going to launch Windows, theoretically. They launched the mobile app, which is a little... It's not controversial. It's just not everything people were hoping for. I find it a little bit useful but not amazing. But clearly, they have lots of teams and lots of people working on lots of stuff and lots of love.

Dave: Mm-hmm.

Chris: Does Chrome pick it up? Do they start selling subscriptions and actually make money doing that? What are they going to do?

Dave: I don't know. That would be a good question. I don't know how you have a non-big-three-browser, to be honest. I don't understand the financial mechanics of that. It costs a lot to run a browser.

Chris: Brave is doing it. Who else is doing it? Pretty much just Brave.

Dave: Brave.

Chris: Nah, there must be a few others.

Dave: You could put Edge in that world. They basically were like, "We're not going to maintain--"

Chris: They can lose money all day. It doesn't matter.

Dave: Try that anymore, but I don't know, man. I assume there's some sort of--

What I always assume is there's some sort of kiosk-y OS play. Does that make sense? There's Arc-enabled museum browser things. Maybe there's... It's got a little drawing app. It's got a little boost, you know, website manipulator something, so maybe there's some education bend or something.

Chris: Hmm...

Dave: If there was a Chrome OS but it had Arc on it, would that be interesting? Maybe. Arc Books. I don't know.

Chris: I'll put $5 on acquisition, for sure.

Dave: Yeah. I think it's just a different take. It could be the money is coming from Google or somebody or something or just as... I don't know how they're funded. It could be part of it is just like, "Let's push the edge of what a browser can be and incubate ideas."

I guarantee you if Firefox came out with this sidebar thing with no actual URLs, it would just cause panic in the user base. Maybe Firefox is like--

Chris: Hmm...

Dave: You know? "Let's just see what a version of this Chromium Firefox that's to the extreme weird angle might look like." You know? I don't know. I hope it comes up with some sort of plan because I like using it.

Chris: Yeah. Yeah. I like that it's just interesting software project to watch that has nothing to do with VR or AI or whatever. It's just like, "This is a UX play, and it's interesting."

Dave: Yeah. It's making a browser more user-friendly.

Chris: I feel like I would be immediately bored if they announced some AI thing. I'd be like, "Oh, checked out. Sorry."

Dave: Yeah. No thank you.

Chris: Don't care. Unless it does something amazing. I don't mean to be a total hater on it, but it'll be a little bit like... I don't know what to say. But I want to know what you think about this because you're a perfect candidate, in a way, for the headset because you're attracted to this type of technology. I don't know. What is it about the thing that makes you pay attention?

00:22:49

Dave: Apple... What is it called, Vision Pro? Apple Vision Pro.

Chris: Yeah.

Dave: It is a headset from Apple, aluminum, glass, and it costs $3,500, which is a lot of money. In fact, I told my son. I said, "Oh, hey, Apple launched their VR thing, their augment--" You know.

Chris: Mm-hmm.

Dave: He's like, "Whoa, cool." And I was like, "Guess how much it costs." He was like, "I don't know. $2,000?" I was like, "No, $3,500." And he goes, "For one?!"

Chris: [Laughter]

Dave: I just was like, "That's the perfect answer," because--

Chris: For one?!

Dave: For one?!

Chris: You don't even get two controllers? [Laughter]

Dave: Yeah. He's right because a Meta Quest, which I've been putting off buying one because I know it's the primary - whatever - at-home virtual reality platform.

Chris: Yeah. Okay.

Dave: But I'd been putting it off because I just don't like Facebook. Sorry, everybody.

Chris: Yeah.

Dave: If you've been listening to the podcast, you probably knew that. Apple coming out with one is very interesting, but the Meta Quest is like $500 all said and done with everything, two controllers. We could buy Meta Quest for everyone in the family to be in VR for a fraction of the cost of this Apple Vision Pro.

I want to just say, first and foremost, it's an astronomical amount of money, and I think it's about as much money as the HoloLens costs from Microsoft. And kind of the vibe I was getting or the news vibe there was it's basically... We're not actually selling this price. We're giving you access to it if you want to experiment in this world or if you want to invest in this idea. This is what we'll sell it to you for.

Anyway, I think it's priced for these prosumers who want to just experiment in this realm or experiment with Apple's take on it.

Chris: Yep. It all makes sense. It all makes sense. Even though you're interested, you don't even own a Quest? You don't have any of them?

Dave: I don't. That's mostly... This is where Apple kind of has me. The anti-socialness of popping on a thing and--

Chris: Oh, extreme. Extremely antisocial.

Dave: I had a roommate in college. I hope he doesn't listen. Or after college. [Laughter] We'd have parties at our house, 20 people, boom-boom-boom.

Chris: Yeah.

Dave: He just sits there and plays Guitar Hero on the TV in the living room by himself not talking to anybody. Even though he's in a room and there are people and no headset, it was so antisocial. It set this weird vibe for me. It's not wrong. It was just where we were at - or whatever.

Chris: Hmm...

Dave: The idea of putting this Quest thing on, and it's like, "I'm having a fun time but you're not. You're just actually in the danger zone of me hitting you." That's bad.

Apple, I think, with their little--

00:25:59

Chris: "This is for work." Don't you think it was saying that. It felt like that.

Dave: Most of their examples were like, "This is for work." Then you can dial down the privacy and go into your VR realm and play games or whatever." I thought that was very cool.

I think that little dial to augmented to reality to virtual reality was cool. I think that's cool.

Chris: Yeah. Yeah. Okay.

Dave: But the little projected eyeballs, that's straight-up dystopian. [Laughter] That was weird.

Chris: Truly weird. It's interesting how they look set back. It's not like the screen and your eyeballs are clearly right on the surface of the screen. They have some weird depth to them. Then it looks like there's this purple light put onto them. Perhaps that's the dystopian thing. It looks a little bit like something Trent would put on album art or something.

Dave: Some robot with fake eyes or something. It's this weird thing.

Chris: Do you think you could walk up to somebody wearing those things and have a conversation with them and be okay with looking at their weird little video eyeballs? It remains to be seen. I'd be like, "Can you take that thing off for a moment, please?"

Dave: Yeah.

Chris: I need to fire you in person. [Laughter]

Dave: Sandra, please take that off. We need to have a serious conversation.

[laughter]

Dave: No, that's hard. Right? I think that and the dad playing soccer with his kid while wearing the headset or whatever, that was so bizarre. But let me also say, most parents--this is not a parenting secret--are just looking at their phone all day ignoring their kids. Is it super different if I'm ignoring my kids but I have projected eyeballs on my goggles? I don't know. I don't know.

Chris: I don't know. I don't know. Okay.

Dave: Anyway, this is where it just gets weird and dystopian, and I don't think it's an Apple issue per se. I think it's just the format.

Chris: Let's say that problem is solved because you're alone in a room. Right? You're alone, and you just want to do something so the people thing doesn't matter.

Dave: Yeah. I'm in my shed.

Chris: Everybody wants to know. Yeah, the shed thing will work for you. What everybody wanted to know was why. Why would I drop these bucks? Not only now but ever. Is there ever any answer to why I would strap this thing on my head? Is there something it can do that's markedly better than what I can do now? At least that's my question.

Dave: One thing is, immediately, I can have four 4K monitors just floating around me.

Chris: Yeah, that's it. For us nerds, you don't need a monitor anymore, or you probably will have one for a long time. But you get a giant monitor. You get lots of giant monitors. You get any configuration of monitors you want.

My coworker Robert (here in the office), he loves his monitor, man. It's like a 60-inch TV that he just puts right on his desk right in front of him.

Dave: Yeah.

Chris: It's almost....

Dave: A foot from his face. Nice. Yeah.

Chris: Yeah, it's just absolutely enormous and he thinks it's hilarious and loves it. And it's the lowest res thing you've ever seen.

Dave: Sure. Perfect.

Chris: [Laughter]

Dave: Yeah, that's great.

Chris: But he's like, "I don't care. My eyes are old. I benefit nothing from these high pixel density things."

Dave: Right.

Chris: Anyway, that does do it for me a little bit. But isn't that interesting that it's a 2D thing that makes this 3D thing interesting. The last I heard anyway, with the Quest and stuff, that there wasn't anybody coding in it.

Dave: Mm-hmm.

Chris: It somehow lacked the resolution or there was something about it that made it just too bad to code in there.

Dave: Yeah.

Chris: So, that... There needs to be a strong answer for that. But if that's the case, I have a $5,000 monitor, Dave. That's how much my monitor cost. I'm not even joking. It's the Apple Display X - whatever it is - XDR something.

Dave: Yep. Yep.

Chris: It's great. I love it. There's a little crack in it. I wish they would fix it, but I can't be without it for long enough for them to fix the tiny, little crack. Really sad. Anyway, that's neither here nor there.

The point is, if you really want a high-end monitor, that price alone right there can do it. If it's essentially just a 2D experience, but you just put this thing on your head, and you can code in it really well, maybe that alone is it.

00:30:43

Dave: I think that's the difference. I had a Microsoft VR headset thing, and I would try to code, but it was weird. Because it was my thing, but it was tilted. It's almost like somebody put skew, CSS skew on your code editor, and you're just like, "I'm not comfortable." It's like a monitor that's misplaced.

Chris: Right.

Dave: But then I could type, but I was very... touch typing, right? Just memory from my keyboard. If I didn't remember or I mis-stroked or whatever, it would be bad. I would be very stuck.

Chris: Oh, because you weren't just using your keyboard? It seemed like, in the demos, people just used their regular keyboard.

Dave: Yeah. Yeah. You'd use a virtual keyboard, and so where Apple's augmented reality thing is actually cool is you can probably see your actual keyboard while... So, the thing you're touching is real and the projection of your screen is just a projection like it is now but it's in a different format. I think that's cool.

I like VR stuff. I've done a lot of Web VR demos and things like that over just the past years, a decade of making stuff. I think there is this world where it would be cool if we're chatting here on Riverside FM--

Chris: Yeah. Yeah.

Dave: --if there was a little more depth or something, reality to it, a little more 3D or something like that. That would be kind of cool. That's probably super far off. But then if there was--

Chris: I would do this show with you in it. I have heard... That was kind of the ... Ben Thompson take is that meetings in that space are very compelling. Then he would say that and then also admit to the fact that his entire team just has them in their drawers and they never touch them.

I have a Quest. It's in a drawer, Dave. I bet I used it four, five times ever.

Dave: Yeah.

Chris: I wanted to try it, and I wanted to try Wolvic, or whatever, the browser.

Dave: The browser, yeah.

Chris: Just to see what it's like there. I'm sure they're watching it very carefully because the whole point of that was what are the input mechanisms. How do you type? How do you go back? How do you drag things? How do you click?

Dave: Mm-hmm.

Chris: How do you do all these things? They have an answer for that. Apparently, there are little cameras that point down at your hands. I guess you can't do it behind your back. But all you do is pinch, essentially. But you don't have to reach up and pinch. You look at something and then pinch wherever your hands happen to be. That's weird! But that's cool! How cool is that to think about?

Dave: Yeah. I was digging lint out of my belly button and I bought a $10,000 ... from Amazon.

[Laughter]

Dave: No, no, no! Don't buy it! Don't buy it! Don't buy it! Ah...!

Chris: Is that one Canny Valley that you look at things to interact with them? That freaks me out a little bit.

Dave: I think that's very natural. I think it's the amount that we look at things. I do wonder if that can be exploited. You're tracking.

Chris: Oh...

Dave: A tracker can just say, like, "Okay. What are they "hovering on," quote-unquote. You know?

Chris: Yeah. There's going to be a lot of buy now buttons that are nipples.

Dave: Right. Right.

Chris: [Laughter]

Dave: Very boob-shaped buttons. I think that's maybe some kind of bad things about it. But I don't know. I'm interested in seeing that. I'm interested in seeing a website with a little bit of depth.

Everything is 2D. I think it's always been a threat that Apple would release a device that would change the world again. Our perception of information and technology is very 2D. I am very interested in a 3D world.

I could write up thoughts on this, and I've kind of experimented, too. But you imagine we always do X-y charts. It's like, this is good. But if you amazing a Z-axis that's bad for the world, [laughter] you want your thing to be as flat as possible on the Z-axis or not going bad for the world.

A chart can go up, but I don't know. You think of... I just feel like there are other... You can add dimensions to data. You can add dimensions to all kinds of things.

Can I give you an idea? Can I just paint a word picture for you?

Chris: Mm-hmm.

00:35:37

Dave: You want to fix tags on your WordPress site.

Chris: Yep. Yep.

Dave: Not fun. It's not the best because you go into each post, and you're like, "Ugh!" Wouldn't it be cool if you could go into this virtual reality and your pages fly by and then you have a scanner gun in your hand and you go pew, and you just apply the tags you want. It's like that old... You twist what tag you want to put on and go pew-pew.

Chris: [Laughter] Yeah, sure. Take a rote task and make it more interesting because of the tactile real-worldness of it.

Dave: Yeah. Yeah. You just turn something boring like tagging or cataloging or approving or whatever and you turn it into something more interesting, like approving issues or moving things across a board or whatever. It could be more interesting.

Chris: Yeah. Yeah.

Dave: The kanban board and instead of you just dragging it, you pin a little sail to it, and then it swims across the board.

Chris: Ooh, yeah. Maybe there'll be an arrow where experiences need to be kind of progressively enhanced into a 3D world. You start 2D because it does seem like that's the foreseeable future here is 2D experiences in a 3D space. But that kind of makes sense in that you interact with them in one space, but then it's not like you have the thing strapped onto your head absolutely 24 hours a day.

Dave: Mm-hmm.

Chris: In fact, it definitely won't be.

Dave: It's like max two hours or something.

Chris: Right.

Dave: Yeah.

Chris: And not everybody is going to own one and whatever. But that doesn't mean that your Trello board or your Aboard board or whatever can't behave a little differently in the 3D space and add some tactile coolness to itself when that's available but fall back to a 2D experience. It's kind of a clever idea.

Dave: Yeah. I even think of a Kanban board. You know when you're dragging issues across. You're like, "Oops, we have to go back to in progress because it's not out of PR because it has to get reworked."

Chris: Right.

Dave: What if instead of just that card going backwards and everyone getting upset, the card becomes twice as tall. Now it's like a king in checkers - or whatever.

Chris: Hmm...

Dave: Then every time it slides back, you put another tab on there to make it taller. That tallness of your Kanban card is not a defect. It's basically just saying, "We are refining how... This is this thing's third or fourth journey on the Kanban board, and that's okay. It's just becoming more powerful and more refined and more--"

Chris: Sure.

Dave: It's not just a failure of a developer or a failure of a product planner, although it could be. But it's more about this is just getting fortified and refined and a better solution. I feel like there's stuff like that we have not entered into in our 2D technology.

Anyway, I'm patenting that idea. Everyone knows that. I've just patented it.

Chris: Yeah.

Dave: ...Luro, we're doing that. No, I'm just... But think about it. Anyway, that stuff is interesting to me, so I am actually kind of on the fence about getting one. I don't know. I need to make a business expense.

Chris: I couldn't tell you. Definitely haven't made the decision yet because you don't have to make a decision for kind of a long time. They said 2024 at some point.

Dave: I'm such a wuss. I'm not a buy instantly.

Chris: Impulsive?

Dave: Yeah. I didn't get on the waitlist or whatever they've got now. I'm very much a got to see it first.

00:39:31

Chris: Yeah. Well, here's one for you. Think about... Throughout the years, I have gone from... I don't know if I've ever done three monitors. I think I probably have. But that didn't last very long. I've mostly been a two-monitor guy. At the moment, I'm a one-monitor guy. Changed my stuff up a little bit. Although, once in a while, I'll crack the laptop open next to it, meaning it's kind of two monitors.

But I'm starting to be (in my older age) a little more sensitive to it because I find -- and I think you've had this experience, too -- if you poorly set up your desk in some way and you're moving your head around a lot back and forth because perhaps instead of having one monitor straight on and another one to the right, you put them both at... The crease is in the middle. Now you're constantly back and forth.

Dave: Yeah.

Chris: It has some physical implications. It's not very comfortable after a while.

Dave: It broke my back.

Chris: That could be extreme in that way, but it can also be a minor irritant, too. Anyway, does that problem get worse now? Yeah, then even if you have one monitor, all of us tend to have our opinions about window management, right?

Dave: Mm-hmm.

Chris: I have sometimes... A lot of us that probably listen to this show, at a minimum, code on one side, browser on the other kind of thing. But then there's like, "Well, where do you put your console then?"

Dave: Mm-hmm.

Chris: Then you're waiting for your build and pop over into your social media. How do you do it? Do you whisk the entire screen away and go into another screen that has all that stuff up? Then you're like, "Oh, I've got to check my email." Is that just a tab in the browser, or do I have another app for that?

Dave, I've never solved this - never. I have my own little ways that I do stuff. But I'd say, every hour, I look up at my screen. I'm like, "This is a mess. There's crap all over the place." Then go, "Ah... I've got to close a bunch of stuff," and then kind of get it into a nice state again and then just let it deteriorate over the next hour as I do stuff.

Dave: Yeah.

Chris: I’m a mess. Now I'm going to have the whole world as a place to keep my mess. I wonder what window management looks like.

Dave: Yeah. I kind of wonder if it's like, "Honey, where'd I put my credit card tab? Is that in the kitchen?"

[Laughter]

Dave: "Oh, God! Honey, where is my credit card tab?"

Chris: "Where is my virtual T-rex?" You left it in the garage.

Dave: Oh, the T-rex is in the garage again! I don't know. Yeah, I don't know.

Chris: And if it's VR, you'd be like, "Remember, you shrank down to the size of a bug and then you kept it in a sunflower petal." [Laughter]

Dave: Ah! The sunflower petal. God. Thank you.

Nah, I don't know how that's going to work. I don't know. I think one thing is it's cheaper to create spaces, so that's good, like dedicated spaces. Right?

Chris: Mm-hmm.

Dave: For me to have a monitor for email, a monitor for chat, a monitor for my Web dev, a monitor for just browser tabs, that costs $10,000. In my $3,500 Apple Vision goggles, I can just be like, pew-pew-pew, so I think, right now, the only way to create a space is to hide, like spaces, right? You just say, "Okay. That's a whole..." Hide that, right?

Chris: Yeah. Man, I had a good two years there I was big into spaces. I was a spaces guy.

Dave: Just swiping fully in swipes.

Chris: I'm over it now. I don't know why, but it's gone now.

Dave: Yeah. No, it's a... I'm not good at it, or it's the "Honey, where's my tab?" situation because it's like, "Where did I...? I was just doing taxes. Where did it go?"

[Laughter]

Dave: But yeah. It's interesting. I don't know. I think I'm interested in the ideas of what 3D can do for information, communication, and design. That's what I'm interested in. I think I would like to see that. Maybe I'll buy it. I don't know.

Chris: Yeah.

Dave: Vote. Vote. Let me know if I need to buy it.

Chris: The fact that my Quest is in a drawer that I never touch and really don't plan to is a bad sign that I should not buy it.

Dave: Indicative of--

00:44:03

Chris: But I like Apple stuff. Ack!

Dave: See, that's the tough part. You know? That's maybe Apple's advantage is those goggles, they had the example of, like, you had the laptop open. You just look at the laptop and then, all of a sudden, your laptop is on your goggles. Right?

Chris: Ah, that's just ridiculous. It's the number one reason I want it, really.

Dave: Right. When you plug into Quest, you're doing a different thing. You're not doing the same thing you were doing. It's not the device you were just using or the device you use every day. It's another device I've got to use.

Apple's thing, if we're in the Mac ecosystem, which you and I are right now, Apple's thing is basically just put it on. It's the same thing you've got everywhere.

Chris: Yeah. It plugs into your same. That's a huge, huge, huge, huge advantage, I think, because Meta, they're not even Microsoft. If Microsoft had one, it would plug into that ecosystem at least a little bit.

Dave: Mm-hmm.

Chris: But it's not even that. When you buy a Quest, it's not like you're logged into your Facebook immediately. Nor is there a particularly compelling Facebook experience on the Quest. It's all like go to the store and download some stuff that looks okay to you. Make sure you put in your credit card first.

Dave: Yeah. Yeah. Yeah.

Chris: I got a couple of games or something. They took forever to download. The friction is crazy, like we covered with Tears of the Kingdom. I am just a helpless idiot in video games. I feel like there's some way finding mechanisms commonly used in video games that are lost on me. That there's some expectations that are like, "I'm going to take you through this learning thing. You should walk into the next room." I have somehow missed the cue to walk into the next room. I'm staring at the chest for nine minutes, and I'm like, "Oh, yeah. I guess--" and then that cue to do the job is long gone. That's just one example, but I feel like somehow... The amount of friction to play one of these games was so high.

Dave: Yeah.

Chris: I found friction points everywhere and to the point where I'm just like... If they weren't in that drawer anymore because somebody walked out of here with them, it'd probably take me six months to notice. [Laughter]

Dave: Well, that's... Anyone from Meta is listening, we do consulting here on the ShopTalk Show. We do free consulting for your products, and we let you know what's wrong with them and why they're not sticking.

Chris: Yeah. Send us some free stuff.

Dave: Yeah. What is maybe also interesting, too, is Apple has announced this. There's going to be a Samsung version, so we're going to see some clones and some product kind of... I'm sure we'll see some competing ideas, so that's interesting too.

00:46:49

Chris: Yeah. Good. We got a question here from Simi Da Clarke, a hobby developer from Cape Town, South Africa. "I'd love to come to your town someday. I've heard so many amazing things about that place from friends and family alike. Love the show."

Thank you so much, Simi. Wrote in with a Pen. It was a pretty decent take on this already, but I think it's an Android-ism where, if you're going to have a sticky header, it's not just sticky all the time. It would be on the Web but imagine this more of a native concept in that you're scrolling down the page and the header is gone. The header has left the building.

But then you scroll up a little bit no matter where you are on the page. It could be halfway down, all the way down, whatever. The header comes back into view. But it doesn't just detect, "Oh, they started scrolling up a little bit. Immediately show the entire header." It's as if the header had followed along wherever you were scrolling. And then if you scroll up ten pixels, you'll see ten pixels of the bottom of the header. It's like it's been repositioned just out of view no matter where you are on the page. It's a really neat effect, I think. It's a compelling thing that Android has done there.

Simi is wondering. He has a Pen that does exactly what it should do. But it's a little -- how should I say? -- janky or something. He uses a document.on-scroll event, meaning it's firing 20 billion times as you scroll down the page to do its thing. If you're on a low-power device, that's just not a good approach.

Dave: Shredding gutter.

Chris: Not to mention, you have to do all the math yourself. Yeah, it's not using an intersection observer or anything. He's just wondering if there's a better way to do it.

I looked at this for a little bit and was like, "I don't know." [Laughter] I couldn't.

The first thing I thought of was debouncing. But sure, that'll do a little bit. But if it's not fast enough, it won't... You lose the spirit of it. Then on the way down, it doesn't matter as much. You can debounce on the way down. But on the way up, it needs to be... I don't know. It's just tricky and I couldn't think of an awesome way to do it.

But I didn't think of there is now a scroll end event, which kind of... If you've been debouncing your whole life, you should be aware of this. I don't think it has dropped across all browsers, but hopefully it will. It's just called On Scroll End, which never used to exist before. Hence, debouncing. But it kind of waits for you to stop scrolling and then fires the event once. That's just good to know, I think, for y'all out there.

Dave: Mm-hmm.

Chris: But I don't have any better answers than the Pen Simi already put together. What do you think of, Dave?

00:49:48

Dave: Oh, man. I have tried this like 15 times, and I never love what I came up with. There's this pattern from somebody at Google -- I think Eric Bidel. Does that sound right? -- called the Sticky Sentinel Pattern where basically you're just doing a position sticky, but you're sort of... And it's sort of like for the pseudo-classes that don't exist, like stuck and unstuck - or whatever.

Anyway, you basically have these sentinels that trigger stuck and unstuck.

Chris: Yeah?

Dave: But how it applies here is basically you're saying on scroll down, you just don't stick at all. But then on scroll up, you're going to apply that sticky sentinel - or whatever.

Chris: This is what you need then.

Dave: If you check the sentinel, which is the before or after kind of almost like pseudo-elements, but they're actually real elements, but you just check if those are intersection observering. If they're not, then you add sticky to the thing. Otherwise, you just remove it on scroll down, but you maybe want to do a little bit of... I forget what I did. We have it in Luro somewhere. I should find it. Actually, we deleted it because we moved stuff around.

It was just a little effect to stick something at the bottom when you're scrolling, or at the top, I guess, when you're scrolling down. But hide it. It's hard. It's not intuitive. It's not really great.

Chris: I think I found the blog post where it mentioned it. I'm like, "Oh, my God. That's way more complicated than I thought it was going to be." [Laughter]

But it does kind of achieve a pretty nice effect. What I like is that there's some attachment still to your actual scrolling, like what you're doing with your input. You can still kind of half-see the header if you want to. It feels like you're a little bit more in control, and I like it. I don't know.

I will say that I saw Slide from Una on stage at CSS Day in Amsterdam. The thing said state queries. She was, I think, trying to just tease some theoretical work starting to happen on being able to query for stake because now we have container queries. We have style queries. What is a state query?

The immediate answer was the position sticky thing. Is the thing stuck or not stuck? Maybe relevant here. I don't now if it's the whole answer, but it might be part of an answer if you could know that in CSS. Maybe you could do it.

That was Simi's direct question is, "Can I create this in CSS only?" And I'm fairly confident to say, "No, you cannot right now."

Dave: No. But Simi was using just setting a style property, like setting a variable. I think that's a really good strategy just to set the variable. You lose some fidelity because you can't do sub-pixel scrolling and stuff on scroll-Y and stuff like that. But that's a good approach. But, yeah, we just don't have it. But if we had a state thing like :scrolling-up or something, that would be pretty cool.

Chris: Right.

Dave: Then you could be like, "Cool. Fly that guy in."

Chris: Mm-hmm.

Dave: I don't think we're there yet. I think you still need some JavaScript to do the little peek, peekaboo header kind of thing.

Chris: Yeah. Right. And you did one header, Simi, and the thing that Dave mentioned, the sentinel thing was more concerned with having a bunch of headers down the page.

Dave: Yeah, but it's kind of like the way to see if something was stuck or not stuck or that change. There was a change in sticking.

Chris: Right.

Dave: The idea applies kind of everywhere.

Chris: Mm-hmm.

Dave: It might be overkill for your thing. I think what you had is pretty good, but I did see a little bit of glitchy, but it's not... But I think it's--

Chris: It's not that bad. Yeah.

Dave: I don't think anyone is going to notice unless they're really going for it.

Chris: Don't underestimate a scroll to top button, which is a good accessibility feature anywhere. Not scroll to top, but just kind of like move to top or return to top, go to top.

Dave: Go to top, yeah. Yeah.

Chris: Your header is up there. If you click that, then you're back at the header. I know that's not the effect you're looking for, but it has the same result.

Dave: Yeah. Exactly. Maybe that's the zero-dollar solution. That's what I always think of this stuff as.

Chris: Yeah.

Dave: What's the ten-peso version? You know?

[Laughter]

Dave: What's the ten-peso fix, not the million-dollar fix?

Chris: Right.

Dave: What's cool about those buttons is you can just be like sticky bottom zero - or whatever. It's like, "Oh, okay. I'll just show up in the viewport suddenly."

Chris: Right.

Dave: You're like, "Oh, wow."

Chris: Mm-hmm.

Dave: Great.

Chris: Yeah, sticky. Sticky anything on mobile is especially tricky because the second you're doing it, you're kind of gobbling up some of already limited screen real estate. You better be darn sure that's a good idea. If you're sticking it on the bottom, then you better be darn sure that it's not totally hidden by some browser chrome.

Dave: Yeah.

00:55:22

Chris: Oh, my God. It's just such a tricky thing. I don't envy the mobile Web developer these days. Although, it's getting a lot better.

I managed to sneak in dynamic viewport units into my talk, which you know. Let's eliminate some nuance from the Web, Dave.

Dave: Yeah.

Dave: I think that anywhere you use VH, you should just use DVH.

Dave: Ooh! I love it! Love it! I love it. Eliminate nuance.

Chris: It's just what you should do these days. Yeah.

Dave: Do it. It seems like the right call. I was a little... All these little -- what is it -- SVH and DVH and LVH were announced.

Chris: Yeah, the small viewport. The big viewport. You're like, "Why would you do that? That's just asking for more trouble. It should just be the dynamic one."

Dave: Yeah. when those were announced, I was a little bit like, "Why are we doing...? We have lost the way. We have fallen from grace." [Laughter] But it is, I think DVH is probably....

Chris: I'm sure they have their reasons. But you know what you should do? You should have fixed VH to be like DVH and then that's the only thing that should have shipped.

Dave: Yeah. Yeah.

Chris: But I don't know what the nuance to all that stuff is.

Dave: We are in unit town, though. I tell you what.

Chris: Oh, my gosh.

Dave: I saw Jen Simmons's CSS thing.

Chris: RLH, did you see that one?

Dave: RLH (root line height).

Chris: Gees.

Dave: You say margin bottom P, margin-bottom one root line height. It's like a ghost line of text, basically, and you didn't do anything different. That's cool. That's exact vertical rhythm, which we've never had.

Chris: It was. She was setting padding in it, and then it looked like there was some space between, for example, the header and a paragraph and some paragraphs, which means that probably the margin block end was also a set in RLH.

Dave: Yeah.

Chris: Which is... I could see it. I could see it.

Dave: Yeah. Yeah, well, and then you have a padding one RLH around your card - or whatever. That's line-height-based, like we were doing text-based, which is awesome, but now you're like, "No. Just basically a line of text."

Then you have margin trim, and so you're like... On the card, though, you basically can do star margin block one RLH - or whatever.

Chris: Yep.

Dave: Then just say, "But on my card, trim that margin block, margin trim block."

Chris: Right.

Dave: Margin trim colon block, and that will just trim off the top and the bottom margins. Now you have no problems. [Laughter]

Chris: Nope.

Dave: It's interesting. I'm still reprogramming my brain around all this stuff.

Chris: It's amazing. I feel like margin trim would have been the hottest thing going in CSS except for that now we have gap for Flexbox and Grid. I know it's not the same, but I think there's a lot more usage of componentry that is using those layout technologies in which it just doesn't matter as much.

Dave: Well, yeah. It's basically a way to apply gap or margin trim is almost a way... Margin plus margin trim is a way to apply a gap to anything that's any layout or any sort of assembly of elements.

Chris: Yeah. But I do wonder if a best practice will be if you have any element and you've added padding to that element that you should margin trim in the direction of that padding.

Dave: Mm-hmm.

Chris: That's just as a general best practice. If add padding, then margin trim in that direction, just so that you know that you're never in the position that something can butt against it and add to that padding.

Dave: Mm-hmm.

Chris: That's not a bad idea, actually.

Dave: A blog post idea there, maybe.

Chris: Yeah, but it'd be like theoretical CSS proclamations are a little bit dangerous territory when I've never even tried it.

Dave: What?! No.

Chris: [Laughter]

Dave: No. Just go based on theory.

Chris: Yeah, well, maybe it'll start life as a Mastodon post.

Dave: Good. That's good. Let's do the old A/B test route. That's good.

Chris: I think that'll do it, huh?

Dave: That'll do it. Yep. I think we're at time, so we should wrap it. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. Find out about the show.

If you're buying them goggles, let us know. If you think I should buy those goggles, let us know. We appreciate it.

[Laughter]

Dave: Tell my wife. Please don't. [Laughter]

Then, yeah, please join us in the D-d-d-d-discord, patreon.com/shoptalkshow. Chris, do you got anything else you'd like to say?

Chris: [Buzzing sounds] ShopTalkShow.com.