New in Vue 3: Teleport

EPISODE 47

[INTRO]

[00:00:10] AC: Hey, everybody. Welcome to Enjoy The Vue. I’m Ari. Today on our panel, we have Tessa.

[00:00:16] T: Hello.

[00:00:17] AC: And Bean.

[00:00:19] BH: Hello.

[00:00:22] T: Why does Bean always get his own voice?

[00:00:25] BH: I don’t know what name I’m given.

[00:00:29] AC: Let's talk about Vue 3's new feature, Teleport. Ben, what is Teleport?

[00:00:36] BH: Well for me, I think of Teleport as a way to decouple a piece of the template from a component in a single file component and basically tell it where to show up on the actual page. I think the conventional example being used in most talks is you have a modal that's outside of your ID app that would typically sit in an index.html page. You want your single file component that's controlling maybe what's going to be inside the modal to appear in an ID app outside, but that's just the conventional example. What do you think Teleport is, Tessa?

[00:01:07] T: Actually, I had a question for you, because I’ve been thinking a lot about that warning in the docs, where they say like, you want it to be outside of your Vue app, but they don't give a justification. I don't know that I would add anything to your question in terms of the definition, so much as why is it generally restricted to that?

[00:01:26] BH: Yeah, that's a great question. In terms of the Teleport, the conventional to what Tessa said, you'll notice that currently when you use it in the Vue 3 Teleport, at least the way it's built in, you tend to direct it outside of the Vue app, right? We normally mount it to an ID app and then the conventional example is bound to a sibling idea of modal and it'll teleport things there.

[00:01:47] AC: I think I got a little lost.

[00:01:49] BH: I’m so sorry.

[00:01:51] T: I’m trying to think of the example in the docs and I remember it being confusing, because they didn't really give an – I think they just attached it to body, so I’m a little confused.

[00:01:59] BH: All right. Let's level set as far as the mental model will be go – you're probably using for most of this episode. We have our index.html page. Inside of our body tag, we have two divs; we have our ID app then we have our ID modal and they’re sibling. Typically, our Vue app will be mounted to ID app, so that's where all the Vue magic tends to happen. When Tessa refers to rendering content outside of the app, it would be for example, in the ID modal that we have sitting as a sibling to ID app.

Right now in the docs, as Tessa mentioned, there's this warning that you generally want to teleport content outside of the app, meaning, outside of ID app to something like ID modal. The reason for that is, from what I can understand natively the way Teleport works if you think of it from a technical implementation is that it's going to take a piece of DOM and it needs to drop it in another place in the DOM, but it has to already exist.

There's a tricky thing from what I understand with the way the virtual DOM is – or the way that DOM is implemented with Vue that we're probably going to need some helper functions in the future, but when you want to teleport things to other Vue components, you have to make sure that the element exists. Because if it doesn't exist, there's nothing to teleport it to. It needs a destination. That's why as far as reliable teleport behavior, it's saying that you teleport it to an element that already exists on the page. In the case of ID app and ID modal, we know that modal exists on index.html. Any other single file component thing that you're using may not exist on the page when you're teleporting to it. This is where it starts to get a little dicey.

[00:03:34] T: Okay. Yeah, that makes sense. I figured that was the case, but I was really bothered, not going to lie, that they didn't explain explicitly why it was the case in the docs. I was having a hard time, because it's a long story, but I was trying to send a lot of bananas from one Vue component to another Vue component using Teleport. If you want to know what that's about, you're just going to have to watch my talk, I guess.

It wasn't working, because the other component didn't exist yet. If I wanted to preload with bananas, which I expected based on the Vue school video that was listed in the docs, but in the Vue school video they were getting some warning and I wasn't getting any error messages. I’m just basically trying things out and figuring out how Teleport works based on what's not working in all those experiments.

[00:04:19] AC: I don't see an obvious warning in the docs, so maybe make that more explicit, just saying.

[00:04:26] BH: Yeah, that is good feedback. I’m making a note of that right now.

[00:04:30] T: A good time to bring back the marquee element and bling.

[00:04:35] BH: Yeah, this part is a little bit trickier, because I know, I played with some as well. For those who might have used the Vue 2 version of this, which is Vue Portals, which Linus Borg, if you recognize by the handle, he's the primary author for. It is designed to be so that it has a built-in wait function that it waits for the thing to be mounted before it teleports it in. That's what I think, I would like to probably see. We might add suggest as an API to Evan and the team as far as making that more of a built-in thing. Because right now, I think Teleport works with the raw DOM right now, rather than applying some helper functions to ensure that before it teleports something to another element that it actually has been rendered on the page, if that makes sense.

[00:05:18] T: I don't know if this is getting into the weeds too early, but what do you mean by raw DOM? Because my understanding is for example, if I disable Teleport, then it's not going to destroy the element and create a new one. It's just going to move the element in the DOM. I’m not sure if that's something that can be done with raw DOM or not.

[00:05:35] BH: Yeah. Maybe I will take back the use of raw DOM, because I think the people who are really knowledgeable on the technical jargon on that. I just meant more like, when we know for a fact that on an index.html page, we as developers can visually see what's been mounted. Whereas, when it comes to JavaScript mounting everything, that's a little bit more magicky, because you're not – Unless, you're explicitly doing console logs. It's hard to tell what's happening during what life cycle. That's all I meant by that.

[00:06:02] T: Oh, this is off topic, but I don't know if anybody else has this problem, but there's certain words that I hear that if I hear them, I have an auditory memory that always gets linked and replays in my head afterwards. With portals, I always hear, what's his name from The Good Place, talking about Blake Bortles immediately after I heard –

[00:06:19] BH: Bortles.

[00:06:21] T: Does anybody else have this problem?

[00:06:23] AC: I do now.

[00:06:27] BH: My new portals talks will feature Blake Bortles from now on. I would dress like Jason Mendoza.

[00:06:36] T: He'll be next year's VueConf host.

[00:06:41] BH: Ari, what are your thoughts when you first saw the teleport element?

[00:06:44] AC: Obviously, I was like, “Oh, that's pretty nifty.” It wasn't something I’d put too much thought into. I guess, I’m the type of person that just accepts problems and just tries to figure out how to work around them, as opposed to being like, “There must be a better way and a better world.” I’m just like, “I’m just going to find a hack. It's fine.” I was like, “Oh, that's actually – That does solve problems, doesn't it, huh?”

[00:07:09] T: I feel we can make one of those Dungeons and Dragons affinity charts based on this. Because I’m at the other end of the spectrum, where once somebody has been like, “There must be a better way.” I’m like, “Let's see how I can use this in the worst way possible.”

[00:07:25] BH: You are what? Chaotic –

[00:07:26] T: Neutral?

[00:07:27] BH: Or chaotic evil, I would say the worst way possible.

[00:07:31] AC: I always envy people who think about how can I use this in the worst way possible, because that's a much more creative state of mind than mine. Whereas, I’m just until I encounter a problem, I really don't care about solutions. A solution doesn't matter to me, unless it's actually solving a specific problem. That's me. I guess, I’m just much more boring and practical. I don't think it's hard to be boring.

[00:07:59] T: It's hard when you have a solution, and not want to apply it to all the problems. When you have a problem, locate the correct solution. There should be Tinder for matching solutions to problems.

[00:08:10] BH: Swipe right when this algorithm solves your problem.

[00:08:14] AC: Actually, today before the episode, it was a bit of a mental exercise for me to think outside the box, because I’ve encountered some things where I’m like, “Oh, if only I had Vue 3 and I could use Teleport, that'd be fun.” I had to think about, what could this solve? What problems do I not have yet that this could possibly solve?

Then I started to think about hey, this is like slots. Only the other way around. Instead of going from the parent to the child, you're going from a child to a parent. I started to think about how you could do modular layouts without ever having to use a silly slot and all the headaches that go with slots and then I started to think about a layout blooming from the inside. Then I felt really proud of myself.

[00:09:02] T: Nice.

[00:09:05] AC: No. I mean, so imagine you have pre-placed divs, or if you're being all fancy, semantic. Actually, no. You could just do divs. You can do divs, because then you can attach the semantic HTML elements with Teleport. Anyway. See, I didn't fully think this through before I started talking, because that's just how I roll.

Anyway, so you have various divs that are part of a layout. Then inside a child of that you just be like, okay, this is the component. Then from inside of that, you tell it where to put it outside of itself. Yeah, it explodes onto the DOM. Sorry, anything to not use slots? I am able to be creative when it comes to that.

[00:09:51] T: Yes.

[00:09:52] AC: I’m not saying that this is a good idea, but it's an idea.

[00:09:55] T: I mean, I like it. I’ve already been trying to exploit that, actually. I’ve been having a lot of problems, because this – I’m not a 100% sure if this is how it's supposed to work, because it's not documented. I hope it's not documented, because I wrote that part of my talk already and I don't want to go back and fix it at the last minute. I was trying to send bananas to other components, but I also wanted them to exist inside the current component.

I wanted a box, basically, where I could drop in bananas and I would teleport them somewhere else, but I could see myself dropping bananas into my box and send them to say, Ari's box. This is not good, because Ari was just talking about how she was thinking outside the box and now I’m already putting her back in the box.

[00:10:33] BH: At least she has bananas though. She's getting bananas.

[00:10:36] T: I mean, in the docs it does talk about how you can't put the teleport destination, I think in the same component, which is maybe I’m misremembering, because I was able to do that. The issue that I ran into is if you have more than one teleport destination and they're all the same, it seems like it's only going to send your thing to the teleport destination that comes first in the DOM. It's not going to send a copy to all the areas in the DOM.

[00:11:02] BH: Right. Because it's only supposed to find – usually, you're sending it to an ID and not necessarily – Right. If you use a class as a selector, it won't send it to every single instance of that – or every element that's attached to that class.

[00:11:14] AC: Imagine it would find the first one.

[00:11:16] T: Same with the class. Although technically, Ben, technically, the people who know all about the raw DOM don't come for me. There's nothing enforcing only one idea on the page. That's just something we all decided, but nobody's forcing us to do that.

[00:11:31] BH: That is true. No, I really like that mental model that you're saying, Ari, regarding the simplest version of teleport really is these slots, where you have this one thing that you want to drop into. This one level. Though slots is a one-level teleport, but whereas, gosh. I’m thinking. I imagine Michael Thiessen is going to have this blog post where it's like, what if we never use slots and only use Teleport?

[00:11:54] T: He actually came out with a newsletter today about scope slots. I think Teleport was mentioned, but I didn't read it yet.

[00:12:00] AC: No, literally. That was my thought. I was like, what if I never had to use a scope slot again? Because really, because you can encapsulate all the logic inside the one component that you actually care about, or the one component that should care about that logic and then just disperse it wherever you need it. That to me solves so many problems in terms of my brain not being able to handle scope slots. Because I just start thinking, I don't know. Somehow, it makes my brain go into Inception mode and it's not a fun place to be.

[00:12:31] T: Yeah. Although, I think going along with this idea of using Teleport instead, one thing that I was having trouble understanding was styling. In the docs, they mentioned this prop that teleport has called 'disabled'. The Vue school video also covered it for a bit where they were like, notice how if I put disabled on here, the style doesn't come from the parent. If I don't put disabled, it does, or vice versa, whatever.

No matter what I did, the style always came from the parent. I don't know what's going on there. That's one thing that I think is potentially tricky is where are things being inherited from? Is it from the parent that holds the thing that we're going to be teleporting, or is it from the parent of the teleport target destination?

[00:13:12] AC: I was about to say like, wait. Which parent?

[00:13:17] BH: Yes.

[00:13:18] T: I was reminded of this tweet I saw recently that was like, how to hit a bullseye. First, throw the dart and then paint the target around it.

[00:13:27] BH: Yes. If we saw the original portal that can – the component that contains the teleport element as portal 1 and then portal 2 is where it ends up, are you saying that the styles from portal 2, the thing that's wrapped around portal 2 is what unpacks the styles, or portal 1?

[00:13:43] T: I have the thing that I want to teleport to you, Ben. You're the destination. I have the styles and you have your own styles. No matter what I do, it seems like the styles are always coming for me and never from you, regardless of whether I teleport it over or if I disable teleport.

[00:14:01] BH: I see how that could make sense from you're coupling this template with the component, so you would want the styles from that component to couple with the template. I could see the logic of that. Then to your point, is there even an escape hatch if you needed to override? That's, yeah. I’ve made a note.

[00:14:18] T: Well, I guess it's not really my point. It was like, in Vue School, they were showing how they turned the styles on and off and I was like, I can't turn them off.

[00:14:25] BH: Who knows what version of –

[00:14:27] T: That's true, because they also saw error messages and I have not seen a single error message, which either means I’m really, really, really, really good at Vue 3, or – the thing that’s actually the truth.

[00:14:40] BH: Yes, that is tricky.

[00:14:42] AC: Ben, you're supposed to have every answer to every Vue question ever.

[00:14:45] T: How dare you? Are you even on core?

[00:14:48] BH: I know. I will say, what I’ve gotten really comfortable with is just knowing that I can find the right people to get the answers.

[00:14:55] AC: I think that that's honestly the most valuable position you can be in life.

[00:14:59] T: That's probably why Google has made so much money, if you think about it.

[00:15:04] BH: Wow.

[00:15:06] AC: They do. They have all the answers.

[00:15:08] BH: Podcast thoughts.

[00:15:09] T: These are more like, haven't slept in three weeks, it's 4:00 in the morning thoughts, I feel like. That's the caliber I’m at right now.

[00:15:15] AC: Those are always fun.

[00:15:19] T: I’m curious. I feel the go-to example is always modals, but are there other prototypical examples that the Vue team has kicked around as like, these are also probably very likely use cases?

[00:15:34] BH: Yeah. Unfortunately, they seem to center around just the idea of I would say, actually, I’ll just classify as notifications. Whether it's the little pop-up from the bottom, or banners.

[00:15:43] AC: Toasts.

[00:15:44] BH: Yeah, toasts.

[00:15:46] T: All of my favorite things. They just need to throw in tool tips and it's all the things I love coding and getting tickets on.

[00:15:51] AC: Having had to implement an application that had a lot of toast notifications and sometimes a lot of them would show up on the screen at the same time, they're a B word to do well.

[00:16:04] BH: It's a bench. Just a bench that –

[00:16:06] AC: Yeah. They're a real bench to do well. Yeah. I had to have all of this Vue X state to clear them in FiFo; first in, first out. Yeah, I hated it so much. It was the only global Vue X action I had was for the notification. Everything else was in a module, but that one I was like, “No, that's going to be everywhere.”

[00:16:31] T: I feel you could have saved yourself a lot of trouble if you just use an event bus instead.

[00:16:37] AC: You’re right. Yep.

[00:16:38] BH: That would just solve everything.

[00:16:41] T: I feel like, any element that floats over the webpage, I’m like, make it go away.

[00:16:48] AC: In this particular case, they were helpful because there was a lot of asynchronous actions that could often take a long time to complete. Actually, most people would want to go do other things in the app while that particular task was completing. It was helpful to know when it was done. For example, installing an OS on a server. You don't really want to wait all three minutes for that to finish and just be like, just watching this bar. Actually, there was no bar. It was good to know when it was done, without having to watch some little icon just glowing and pulsing at you until it was done.

[00:17:29] T: Yeah. I think there's a lot of good use cases for them. Now, I’m getting more into design stuff. I just feel like a lot of times, pop-up notifications and tool tips and stuff, it's always just like, that hammer that we use to squash all the cockroaches that come out of our user research and I’m like, I’m so curious what other solutions there could be that don't involve those approaches, but I don't really know.

[00:17:52] AC: There's definitely something to be used sparingly and only in specific use cases, because, yeah, otherwise, they can be super annoying. I’m not going to lie. They were probably still annoying in this particular app, but they served a purpose.

[00:18:07] BH: I mean, as we're thinking about other use cases for teleport, Tessa, you bring up a really interesting point that's worth mentioning here is that you can only teleport to one other destination. You can't have one, the origin teleport, some of these populate eight different components at once, because it takes in the one selector. It would be interesting to see how people use that from a design constraint, because I know with slots and scope slots, people were nesting slots within scope slots and then within slots and then slots. It'd be interesting what happens if people started nesting, I don't know, teleports or something.

[00:18:40] T: I already nested teleport inside my slot, but now I’m realizing I also need to nest a slot inside my Teleport, so I can make sure that I can't duplicate it just in case there's a way.

[00:18:51] BH: Oh, my gosh. I look forward to this talk.

[00:18:55] AC: Teleports and teleports. Now, that really does just sound like Inception.

[00:19:00] T: I guess in that sense though, teleport might be a more descriptive name than portals. Because if it's a portal, if you have multiple portals open, then theoretically, everybody could see the original thing. Then I feel metaphorically, it could make sense that it's visible in multiple locations, except then why isn't it visible in the original location? With teleport, when I’m teleporting somewhere, I can't also clone myself to multiple locations. At least, that would if Vue 3 sticks with this idea of you can only teleport to one place, it would be a decent mnemonic.

[00:19:32] AC: Also, if it were a portal, multiple things could go through it before it closed.

[00:19:36] T: That's true. Yeah.

[00:19:37] AC: We're getting really in the weeds here.

[00:19:41] T: You can teleport – Sorry, I’m still caught up on as I was saying mnemonic, I almost said nemonic and I was like, I can't believe I forgot how to pronounce the thing that helps you – Anyway. With Teleport, you can't send multiple things, right? It just goes in the order of whatever you happen to send them in, which I imagine a lot of people will run into pain points with that in the future. I’m thinking about toast, for example. If the toast happened to land in the wrong order.

[00:20:08] AC: You can send multiple teleports to the same destination, but it's still technically multiple points of origin, not a single point of origin just like spamming came through.

[00:20:17] BH: That's an important distinction.

[00:20:20] AC: Oh, my God. I’m just imagining using a set interval to spam things through a teleport.

[00:20:27] T: I feel you just keep on coming up with these, this would be a really terrible idea somebody did. I’m like, “Yup. That's what I’ve been doing.”

[00:20:35] AC: I feel that's a great way to really understand something is to find its limits.

[00:20:43] T: I have teleported 50 bananas.

[00:20:47] BH: On command, or is this this just –

[00:20:49] T: On command. You can increase the bananas with a button.

[00:20:57] BH: Oh. We will be sure to drop the resources, or sorry, the link to Tessa’s talk when the show is published.

[00:21:05] T: It might be not out by the time this show is published, because it’s in November.

[00:21:08] BH: Well if not, you can keep an eye on the show page and we'll drop it in on the website.

[00:21:12] T: Ben's like, you're not going to get away with not seeing Tessa’s talk.

[00:21:17] AC: If by some miracle this comes out before her talk, we're talking about a talk at Vue Toronto.

[00:21:24] BH: Yes. Yes. November 4th.

[00:21:26] T: Through 6th. I hope I’m not on the 4th.

[00:21:30] BH: No, that is [inaudible 00:21:30] from what I understand.

[00:21:33] AC: If you're giving your talk that day, whoo.

[00:21:35] T: Yeah. I mean, if you're looking for a workshop to go to, I hear a certain legume is giving one on the 4th.

[00:21:43] BH: So the rumors are.

[00:21:47] AC: Oh, my God. Now all I could think about is a community where he's like, “You have no idea how mean this team can bean.” Sorry.

[00:22:03] BH: Good time community.

[00:22:05] T: I mean, we talked a lot about how I’ve been ruining Teleport, but has anybody else been using it recently?

[00:22:11] AC: I’ve just been thinking about how I want to use it, but I’m still in Vue 2 land.

[00:22:16] BH: Yeah, I played around a bit as a sandbox. I’ve gotten some of the warnings that which is interesting, because now I want to see if I can recreate those warnings, where I try to teleport to something in a component that hasn't rendered yet, and so I was getting that warning that basically, I don't know where the destination is. It doesn't exist yet.

[00:22:31] T: Sorry, Ben. You just have to be as good as me, then you get no warnings.

[00:22:34] BH: Yes. Apparently, I have a long way, to go to unlock my powers. Again, I think people will find some very interesting uses for them. Should be pretty interesting to see what people come up with.

[00:22:47] T: Yeah. One point that I thought was interesting about the video that was linked in the docs is that they suggested that if you needed more complex use cases to still use Linus Borg's portal Vue package, which I did not use because it said right at the top, if you need a simpler implementation, then use simple portal or something. I was like, I just wanted to try this out for a hot second, so I immediately went to the other thing. I don't know what those extra options are.

I thought the idea with Teleport was to bring this portal view functionality into Vue 3. I’m curious, are there other things that if you know, are there other things that portal Vue does that Teleport doesn't? If so, was it a specific design decision, or is it just a matter of implementation and available people to work on that problem? Or would somebody still use portal-vue with Vue 3?

[00:23:36] BH: At this time, I still think portal Vue still has some – I’ll call it nice developer experience things, like I was talking about. In portal Vue, if you do it in Vue 2, it allows you to do portals between components. Meaning that somewhere inside a portal view is basically waiting to check that that thing exists and then it'll just throw it over the fence. In Vue 3, I think when it was designed from what I can tell, it's using – it's trying to keep to the spec as much as possible from how Teleport should be working at a raw level. I think that's what's probably important to understand here, is because originally, there were discussions about naming it portal, because it is shorter. I think, the actual HTML5 spec, or the spec is considering doing their own implementation of this feature.

As Vue as much as possible really does try to avoid conflicting with native language things. That's why, fun fact, for those who don't know, filters is disappearing for a similar reason, since pipe operator is also going to end up getting its own meaning in JavaScript. Rather than being like, “Oh, this is the Vue pipe that formats your text," it's just going away altogether.

[00:24:45] T: I don't know. I feel that's a bacronym or something, where now that this thing is coming out it's conveniently like, “Oh, that's why we're getting rid of filters,” and not like, people have been advocating to get rid of them for a long time, which –

[00:24:57] AC: I just never saw their value.

[00:25:00] T: It just feels really nice, but maybe because I learned Angular.js before Vue. It's just fun to have my little thing on the left and then be like, “I’m going to transform it when it passes through this little wall.”

[00:25:10] AC: Yeah, I know. That was my mental model when I was learning pipes too.

[00:25:15] T: Nice.

[00:25:15] AC: I don't know.

[00:25:16] BH: Mario comes in?

[00:25:18] T: It's a rom-com makeover montage.

[00:25:24] AC: For me, it just always made more sense to just have a method to format it and just do it that way, because I felt it was just as readable and conveyed the point just as well. Okay. Actually, that depends on whether or not you use the word format in your method name, which if you're not, you're doing it wrong and you should stop.

[00:25:48] BH: Format currency. Not just currency.

[00:25:51] AC: Yeah, no. If it's just currency. Come on now.

[00:25:54] T: At the first VueConf Toronto, Michael Thiessen gave a talk about just doing everything using the template part of single-file components only. That talk really resonated with me and that's all I’m going to say about filters. Yeah, Ben. Have you tried using Teleport and how has the experience been for – or portal, I guess. Have you tried using teleportals, let's just put it like that?

[00:26:17] BH: Teleportals.

[00:26:18] T: How was the experience been?

[00:26:21] AC: Teleportals.

[00:26:27] BH: Oh, gosh. To answer your question, yeah, so I’ve used it more from a documentation perspective of just playing around and seeing some of the ins and outs. I haven't stretched it to limits to the way you you've been talking about, which I think is really fascinating just to see the limitations. Maybe even again, either finding bugs or things we can do to make it better. That's the other thing too is Vue as much as it tries to give you raw things that you can always escape out of, it does try to provide guardrails to help for things that you have to do all the time.

That's why we love the V4 directive, rather than having to do a render function and decide between four each and four, or math, or whatever. We don't have to do that. It's just V4. Yeah. I think, my biggest hold up was trying to find a way that made it convenient, because I know other people are going to try to teleport things into other components. I had a warning. I definitely got the warning, so I will see if it's maybe something's changed since I last used it.

[00:27:19] T: Yeah. I was going to say, I’d love to help report bugs, but I just haven't gotten any. Time flies.

[00:27:24] BH: You're just so good, Tessa. You’re just so good.

[00:27:28] T: I had one last thought there, but it's been teleported elsewhere.

[00:27:34] AC: That seems like an amazing note to end on.

[00:27:38] T: It'll reappear in a future episode.

[00:27:42] BH: Two equals [inaudible 00:27:44].

[00:27:45] AC: We may get a warning message, because it does not yet exist. Boom. Full circle.

[00:27:52] BH: Loved it.

[00:27:54] AC: Does anyone have any thoughts that have not been teleported, to round out with?

[00:27:59] BH: I’m ready for a picks.

[00:28:01] T: I’m thought-free. I’m ready to steal Ben's picks.

[00:28:06] AC: You know what? Normally, I’m nice to Ben. Today, I’m a bad person. I don't know. Tessa, do you have any picks?

[00:28:16] T: Yeah, I have one pick. Yeah, so I just finished watching this show and I don't know what the deal is with the show, but just I have never been so bored by the fashion choices of all the characters in the show. It's not usually something I pay particular attention to, but everybody wore the blandest colors and every sleeve length was exactly the same. Then I watched this show after that, Ssanggappocha, Mystic Pop-Up Bar in English. I believe it's based on a webtoon, but I could be wrong.

The storyline is this woman is cursed to run this thing called the pocha, which is basically a tent with different kinds of foods and alcohol and she has to help people resolve this thing called han, which is basically some deep-seated desire that they can't resolve on their own. She has to save 10 souls left. She has a 100,000 total and she has 10 left. She's working with her helper in the kitchen and also this random guy who when people touch him, they tell him all their life problems, which I can relate with a little bit.

The thing about this show is I don't know if it's just the contrast with the last show I watched, but everybody's clothes, even though they all clearly look like they belong in the same world in the sense of a story world, they really enhance or depict each character's individual personality. I really appreciated that aspect of the show. This is my first time recommending something for sartorial reasons, but that's my pick for this week.

[00:29:45] AC: Okay. Ben, did she steal your pick?

[00:29:48] BH: No, Oh, yeah.

[00:29:49] T: Damn it. I really tried.

[00:29:51] BH: I want to say I watched the trailer for that show before though and it seemed like an interesting premise. Yeah. My picks for this week, I have two gadget picks for y'all. I got to assemble my first mechanical keyboard, like replace the switches and stuff. The Evo-maker GK68X. It's a 65% keyboard. What's particularly cool about it is you can actually turn the space bar into three different keys. I don't know if people are that smooth with spacebars. If you think about the spacebar is just one giant long rectangle, but you really only need two spots on. It's actually a really big key for – You need it a lot, but it doesn't need to be that big. When you split it up, you get this – Anyways, I’m nerding out a bit here.

Anyways, you have split keyboards and now I have all these keys and it's awesome and I can wire stuff. We will link to that in the show notes. Super loving the build. Super solid. My other one, I know that webcams and stuff have certainly been a bit sparse, especially in these quarantine times, but if there is one worth the money, I recently got the Logitech stream plus and I really, really like the ergonomics of the fact that it's easy to mount, dismount, but more importantly, you can actually rotate the stand, so that it's landscape or portrait.

It actually has a lot of use cases, because I think it can record, I want to say 4k, but don't quote me on that. It's just for anyone who's starting to do videos or those things, it seems like a really solid investment for a very minimum setup. It has a USB C-plug, so it goes directly into the new MacBook pro, so that's nice, because the more I can get rid of my dongles, the better.

[00:31:22] T: I’m smiling in my heart at this idea that everybody else's videos is landscape and you bought a new camera just so you could be that person in portrait mode.

[00:31:31] BH: I sat in portrait right now, but I should give that a shot. The fact that I can makes me very happy.

[00:31:36] T: Listeners, it's in portrait right now.

[00:31:39] BH: Is it really?

[00:31:39] T: No, no.

[00:31:42] BH: I was looking at [inaudible 00:31:42]. Yeah, those are my picks for the week.

[00:31:48] AC: Okay. Well, I’m going to preface this with there was recently a tweet from somebody who said that if you use a mouse, or something to the fact that if you use a mouse while coding, then they just assume you're a junior developer. I’m going to go full junior developer and also be contrarian to Ben and talk about my new mouse that I got.

[00:32:10] T: Oh, another new one.

[00:32:10] AC: With my new job. It's the G604 and it has six buttons, six programmable buttons above the thumb rest. I can do things like, bind duplicate block of code, which I absolutely have bound to my mouse.

[00:32:28] BH: That’s amazing.

[00:32:29] AC: I can just highlight, duplicate it.

[00:32:30] T: Or to send things to different portals.

[00:32:36] AC: No. Actually, that is a great point about the spacebar, because I exclusively only use my left thumb to hit the spacebar. Yeah. My right thumb could be doing a lot more. Just saying. No, it has yeah, six buttons on the side and then two next to the left click. I use those for copy and paste, because they're easily accessible and I use copy and paste extensively, because I am extremely lazy about typing. Yeah, so that is my pick is the Logitech G604. Also, the battery life is incredible on this, which is nice because the last Logitech gaming mouse I had had the worst battery life ever.

[00:33:16] T: How incredible is incredible?

[00:33:18] AC: I think it said that in regular mode, it can last up to five and a half months.

[00:33:23] T: Whoa. Nice.

[00:33:24] AC: Continuous use.

[00:33:25] BH: That’s amazing.

[00:33:28] AC: Yeah, so incredible battery life. Yes. Whereas, I literally had to keep my last one plugged in all the time. It had an actual battery in it, but it was also rechargeable. I had to keep it plugged in all the time, because it could not hold a charge. It was the worst.

[00:33:42] T: At least, it wasn't the magic mouse where you had to plug it in on the bottom.

[00:33:47] AC: Oh, yeah. Oh, no. The cable that came with that one did create a lot of drag on the mouse, so I ended up getting a different cable that didn't drag as much, because they tried to make it look like it was part of the mouse once it was plugged in and it was just a terrible idea. So far, very happy with this mouse.

[00:34:04] T: Your preface, it reminded me of this tweet I saw from I think Rick Hanlon last night, where he was – he says, or they said, I don't know their pronouns. “Are all your friends not addicted to tech Twitter like you? You ask them like, hey, what did you all think about that tweet about rock throwing, like what rock size and they don't know what you're talking about?”

[00:34:23] AC: Yeah. That's the worst. Fortunately, I generally get all the references. If I don't, because it's that I’ve missed reference on tech Twitter, I then just scroll until I find it, because it's there.

And with that, I believe that is this – words. That's it for this week. Until next week, enjoy the Vue.

[00:34:49] T: It would be amazing if one day we just closed an episode like, “Well.” Then it just ended.

[END]