Did You Enjoy the Vue, Cassidoo?

EPISODE 63

[EPISODE]

[00:00:00] T: This episode is brought to you by Ionic. For more visit ionicframework.com/vue.

[00:00:16] Al: Hey everybody, and welcome to Enjoy the Vue. I'm Alex and Today on our panel we have Tessa.

[00:00:24] T: Hello.

[00:00:25] Al: Ari.

[00:00:26] Ar: Hello.

[00:00:28] Al: Ben.

[00:00:29] B: Hello, hello.

[00:00:31] Al: And our special guest for this episode is Cassidy Williams. Cassidy, would you like to introduce yourself?

[00:00:40] CW: Hello, my name is Cassidy and I'm on the developer experience team at Netlify with Ben over here. What do I do Ben? What's my job? It mostly means –

[00:00:52] B: Photoshop our heads onto things, apparently.

[00:00:54] CW: I code sometimes. But what's really my tasks? So, really, I actually focus mostly on React and Next.js. So, when Alex reached out and was like, “Hey, do you want to try Vue?” I was like, “I can.” And that's kind of what led me to be here today.

[00:01:13] Al: Yay. Yeah. So, we did. We reached out to Cassidy, I reached out to Cassidy, let's be honest. I reached out to Cassidy and I had this crazy idea. I was like, “Let's get somebody who's not in the Vue community to try Vue and then talk to them about it. So, that's what we're doing here today. So, Cassidy graciously accepted our invitation and you went on stream, I think and did some stuff. But first, before we do that, how did you get into tech? Was your childhood just full of like robots and memes and stuff?

[00:01:48] CW: Yeah, my parents are robots, actually.

[00:01:51] Al: Okay.

[00:01:51] B: That explains so much.

[00:01:54] CW: So, I got into tech, not actually, by any natural means. My parents are not very techie people and nobody else in my family really is either. I was walking home from school, and I heard someone say, “Check out my website.” And I was like, “Oh, you can make one of those?” And then this was in like, eighth grade, and I started looking up how to make websites. Back then it was not – there was no such thing as this React and Vue type of community. It was like, basic HTML tutorials on W-3 schools, and it's about it.

So, it was a lot of self-learning and figuring out how to do things and kind of opened up my world. After doing that then, and I would make websites for like, my high school classes and stuff and just play around with things. I took AP Computer Science at the end of high school, and then majored in computer science in college. That kicked off my journey into hopping around different tech companies and stuff.

[00:02:49] Al: Cool. Yeah, that's awesome. I know that I did theater for a while. But back in high school, I was also doing computer stuff.

[00:02:58] CW: So, there's quite a computer –

[00:02:59] B: You went to computer camp too.

[00:03:00] Al: Yeah. I did go to computer camp.

[00:03:01] T: Yeah, actually, eighth grade was the magic year that I went to computer camp.

[00:03:04] CW: Nice.

[00:03:08] Ar: Good times. But yeah, I feel like there's a lot of like theater nerds and stuff in the tech community to or people who are really into music and then they were like, “Hey, coding is kind of similar, but not.” And now we're all just coding instead.

[00:03:21] Al: So, you work at Netlify with Ben. You said that you work on Next.js. What is Next,js?

[00:03:28] CW: It's a framework on top of React. So, it's somewhat controversial to say this, but I stand by this. I don't consider React a library or a framework. I consider it a library. And then Next is a framework on top of that library that React is. So, the way I define it is like jQuery, which again, it gets controversial when I say this. But like jQuery, I feel like React is really good for enhancing your existing JavaScript and you can add a small React app and an existing larger React app. You can use all these functionalities that it gives you, all of these methods and stuff. But you could also just use Vanilla JavaScript, amongst your React. So, that's my slightly controversial opinion about React.

So, Next.js is a framework on top of that, that provides structure to your React apps. So, with Next, it's a lot more prescriptive, or it's just like, okay, some of your React components are page components. Every single page component is a route. If it's in this folder, that means it's going to be a route or an API endpoint or something. So, it still lets you do React. It still lets you do your JavaScript, but it has more opinions around it and wants you to structure your apps in a certain way.

[00:04:46] Ar: This whole time I thought React was the one that was very insistent that they were a library and not a framework. Was I thinking of Angular or like I feel like that was a big thing?

[00:04:55] CW: That's the thing. React themselves, they also call themselves a library. The community is very torn on this. I'm sure there's like 10 medium articles on this, if you want to hear people argue about it. But that's my high-level overview.

[00:05:10] T: No, I go to Twitter for my arguing like, who reads medium

[00:05:16] AR: Luckily, in the Vue community, there are zero controversies. Nobody argues about anything.

[00:05:22] CW: I've noticed that. Yeah, everyone's happy in Vue.

[00:05:25] Al: Everyone's happy in Vue land.

[00:05:29] T: Join us.

[00:05:31] B: And for those looking for like a parallel to, if you've used Nuxt, then you could think at a high level that Nuxt is like a Vue inspired version of Next.

[00:05:41] CW: Yeah, just really confusing naming schemes for everybody.

[00:05:48] Al: We like to reuse other people's names, but just change it a little bit so that it fits with like the Vue name thing.

[00:05:57] Ar: But where’s the U coming from? They should have named it like Preview us or something. So, your Preview us.js and Next.js.

[00:06:08] CW: Also, Vite seems very cool from what I've seen, but I thought it was Vite for the longest time. Because like, I don't know, Vite, it's close.

[00:06:16] B: You and most of the world.

[00:06:19] CW: I've learned that it's Vite in the past 24 hours.

[00:06:22] B: Yes, we love our French words.

[00:06:23] Al: Yes, we do. Cool. So, we challenged you to do some stuff in Vue. So, tell us about what it is that you did.

[00:06:36] CW: I did the most basic thing you can, a counter. And then I expanded that and did a to do app. And so, if anyone remembers the good old days of to do MVC, I basically followed that route of thinking. So, for context, I have touched Vue before but it was a long time ago, like I gave an intro to Vue talk, I want to say like three and a half years ago. It was like baby days of Vue. I liked it then. It was still it very early, but it was cool to see how I could make something work relatively quickly and the errors were really awesome. Because they were so descriptive. I didn't have to go to the docks, whenever something went wrong. I was able to just do it.

But I didn't dive in too much, because it was still changing a lot at that point. I think my talk was out of date, like a week later, because there are so many changes happening. Also, I remember, I hope this talk isn't on the internet. But it probably is. I messed up the parsing of an API during my talk. So, I was live coding the whole thing. But I couldn't get the image to actually show up. And I was like, “The response is right there. You can see it works. And this should be an image. But it's not.” It was embarrassing. That was a painful talk. But self-deprecating jokes work everywhere, and so I was able to get through it.

But anyway, I had touched it a long time ago. So, coming to this Vue app was interesting, because it was touching on Vue 3 for the first time. So, there were some things that were particularly new to me. I knew the general structure of like having the template, the script and the style of everything, but not a ton beyond that. So, what was also cool in the stream, the stream chat was very helpful in helping me debug as I was figuring out how to build this to do app and quite a few people, they were still used to Vue 2 stuff, some people were in the Vue 3.

So, it was kind of cool talking out certain things, people saying, “Ah, you can actually do this now.” And people say, “Oh, I didn't know you could.” It was a really interesting experience and it was cool how easy some of it was. I admit some of it, I was just like, it works and it felt magical to the point where I was just like, “It almost feels feels wrong. I need to suffer a little more to make this work.” But that part was nice. So, I called it To Do Vue, but I named it as if it were spelled like Vue, so it’s Tue Due Vue. Might as well get on the confusing naming scheme with everybody else in this community.

So, I started with the counter. I'm actually looking at the code as we speak and that part was relatively simple. I remembered adding methods inside of like the script was something that I could do. The old school that was like the ad click, and then something that I'm not entirely sold on, but this is just how it is and I have to live with it is the fact that you put the method names in quotes, instead of in curly brackets, or curly braces. It's like, “No, that's not a string, though.” That I admit threw me off quite a bit but it’s fine, that's just syntax and the counter was quick. It was basically making an add method count plus, plus and then you click that in the template. So that was cool and relatively simple.

[00:10:07] Al: I’m going to stop you there because – so you've done counters and obviously you've done counters and stuff like that in React, and in Vue, did you find it easier, harder, better? What are the differences that we would be seeing?

[00:10:22] CW: So, I do think that the code is shorter in Vue, which there's something to be said for that. I wonder which one would be easier. In React, I would be able to do this relatively quickly. Instead of having that data method, I think that's what it's called, the data one that has return count zero to start, I would make a state variable. And then with that state variable, instead of doing count plus, plus or whatever, I would set the state to count plus, plus or something. And so, there's a few more method wrappers around things in React. Whereas with this one, it's basically like just directly interacting with the variable. There are probably pros and cons to that. I could see like, if you're working directly with the variable, and you want to protect that variable from something, there might be something that needs to happen at scale there. But then for example, with React, if you have a state variable, it's kind of protected by the use state hook a bit more, maybe?

But besides that, this was nice and quick. Knowing how to set a variable, knowing how to change a variable, putting this counter together, it was pretty fast.

[00:11:32] Al: Cool. So next up, what other components did you make?

[00:11:35] CW: The todo.vue. So, that one, I purposely made it a little bit more complex, just because I was trying to learn things. So, I made a to do list and then a to do item. So, the to do item was just going to be the component. This part was really interesting to me because of how props work, and how events work. Because typically, in the React world, is pretty much always parent down for everything. So, if you want to change the state of a parent from a child, you have to pass a prop from the parents down to the child, and that prop will be a function, and then when the child calls that function, the parent will have access to that.

So, it's always top-down in react. But it was different in Vue and that threw me off because people were like, “No, no, no, no, don't do it that way”, as I was doing that on the screen. Like, “That's not how it works.” Saying that events bubble up. So, events always go up and props always go down. That was a bit of a mind shift that blew my mind temporarily. I was definitely like, “Oh my gosh, will I be able to do this live in front of people?” Because it did admittedly confuse me at first. But then once I did it, I was like, “Okay, I'm not scared anymore. I'm understanding a bit.” So, what I initially did was I had like, the to do items, and then I was wrapping it in a for. So, it was just going to be like, for every item that exists will produce an item and, and the items in the list were just an array of strings. And so, it wasn't anything complex. I didn't add any editing or anything, it was truly just add and remove to this list.

What was very, very funky to me, but cool, was – so I had the to do item and when I put that into my to do list, I had the V-4 as a property on the to do item. That blew my mind not wrapping it in something, but have the property to be just like, “Oh, yes, I am a loop thing now.” That still kind of is difficult for me to compute. But it's cool. Because again, less lines of code, it's very clean, it just knows, “I'm this component that loops now.” The difference between like the colon before a proper attribute or whatever you want to call it and the @ sign, that I kind of had to understand a little bit more. But that was wild to me for the delete, and having like a method that says remove item and just saying this dot lists dot splice at this index, and then having add, delete, and then that calls the remove item. That part was probably the most mind-blowing thing of this entire project.

Because first of all, it just worked. But also, it handled like the new indexing. I didn't have to readjust all the indexing for the list. It just automatically says, “Okay, well let's remove from the list.” Now, when I delete it again, I don't need to have a specific ID or anything. I don't need to change how the list works. It just deletes it. That part was the most magical thing of all of this and it probably sounds very simple to just delete something from a list and because I know it's simple. But that blew my mind. That introduced a lot of power that was happening under the hood and Vue that I didn't really expect.

[00:15:09] Al: Yeah, I think I've seen examples of like how you delete something from an array in React, and it's very verbose.

[00:15:20] CW: It's verbose. And like you tell yourself, you're just like, “Ah, yes, I have a lot of fine-grained control of how this works.” I debate on that, because with this, it's really nice to not have the fine-grained control. But I wonder at any time, will I miss that? I don't know. Currently, no. But I'm so not used to it that I'm not sure.

[00:15:41] Al: Yeah. And there are ways that you can, I think, with Vue as well, you can write it to look more like React, and you can do things in a more React way, should you choose to do it that way.

[00:15:56] CW: Right.

[00:15:56] Al: So yeah.

[00:15:58] T: I'm just curious what type of fine-grained control, because I think I'm the only one here who has actually never used React. So, I'm super curious, like, what can you do with React that you don't feel like or you're concerned, you might not be able to do with Vue?

[00:16:12] CW: I need figure out how to describe it well. Because, again, it was just the kind of thing I was like, “Oh, my gosh, it was so easy.” I just have to kind of think back to my war stories of how difficult something might have been to remove something from a list. Because sometimes, if I have some sort of complex list structure of some kind, if I remove something from that list, but I'm also removing, I'm going really fast or really slow, there's some kind of race condition there. I need to update the pointers in the list to make sure that if I delete something, and then delete something else, I'm deleting the correct thing, if that makes sense. I just didn't have to worry about that with this. It just automatically handles that. As soon as I wrote this dot list dot splice, I was just like, “That'll just work.” But then I have to change the indexing later. And then people in the chat were like, “No, you don't.” That was the part that blew my mind. It was interesting in the to do item, how there's like the button that admitted the delete thing. So, I did like @ click, and then it admitted the delete, again, from below. So, it was defined above, but it didn't need to be passed necessarily. It kind of just happened.

That part was cool, too. I get it now. But typing it, I was just kind of like blindly trusting the chat and seeing if it would actually work.

[00:17:42] Al: Awesome.

[00:17:43] CW: Overall, it was really cool.

[00:17:45] T: A couple of things that I was curious about was how did you find the experience of setting up a new Vue app compared to setting up a new React app? Because I haven't had to do that in a while. But I remembered it feeling like there was a lot of stuff to set up a React app.

[00:18:03] CW: So, I think back in the day, it was a bit more of a pain to set up a React app. But these days, our tooling has evolved. So, that's not as much of the case.

[00:18:12] T: Nice.

[00:18:12] CW: It was actually pretty similar. Creating a new Vue app is pretty similar to doing just a basic create React app, or create Next app, whatever you're doing. It was nice to be able to kind of pick and choose what kinds of things I needed. I just kind of went with the defaults and rolled with it. Luckily, that part was pretty comparable. It was truly just running the command and the CLI and hoping that it works.

[00:18:37] T: Nice. Another thing I was wondering about was how did you feel about the experience of having the CSS in the file with the component, like with your JavaScript and template and stuff?

[00:18:47] CW: So, I'm a CSS modules person in the React world anyway. So, I did not mind that at all. I don't really like things like styled components, or CSS and JS things myself. I understand that they have a purpose and some people have those preferences. But I really like having my CSS separate and per component if I can, and then I'll have some global styles that I can import at a top level. But besides that, each one having their own. So, that I kind of liked it makes sense to me to just have like that style scoped and just put it in there, because it feels like CSS modules even though it isn't, I can just do class whatever and it works.

[00:19:28] Ar: But you can do CSS modules, just saying, and pretty easily.

[00:19:36] CW: So, why? Forgive my ignorance, like why would someone choose CSS modules when this is built in? Are there limitations?

[00:19:42] Ar: There are. So, by default, it's not scoped to a component per se. You will declare it with the component, but you can end up having some bleeding and collisions if you’re not careful.

[00:19:59] CW: I see. Okay, that makes sense, because if you can't reuse class names necessarily across components.

[00:20:04] Ar: I mean, at least not without some interesting side effects.

[00:20:08] CW: That makes a lot of sense. Okay, that makes sense. So, is it common for people to use CSS modules instead of the styles in the component?

[00:20:17] T: I would say no.

[00:20:19] Al: It depends. With Vue, it gets into a lot of – you get a lot of flexibility in how you can do things. So, for instance, if you don't want to use HTML, and you want to use Pug, right, you can do that. You just change the language to Pug for your template, and it will be a Pug template at that point. Same thing with your style module. You can add in whatever language you want to do, SaaS, or Stylus. So, it's one of those where it's opinionated, but it's not opinionated.

So, for instance, at work, we use CSS modules. Most of my personal projects, I'm using scope styles. There are other projects where I think they actually, they keep the CSS in completely separate files. So yeah, it's sort of personal Vue has – Vue lets you kind of do it how you like.

[00:21:17] CW: With scope styles, in effect will have pretty similar behavior to CSS modules. But what it's actually doing is just adding a unique identifier to the component, that it just sort of like, adds them to the selector for you.

[00:21:32] Ar: Gotcha.

[00:21:32] T: Yeah. I think that's one of the benefits or differentiators of the modules is like, since you kind of have control over how it's being scoped, you can refer to other scope styles across components. But with something like Vue scope styles, you can't really do that. I feel like another one is something like you can’t use your variables and your CSS and your JavaScript or vice versa, or something. I think that also is related to module somehow.

[00:22:00] Ar: Yeah, you're like ternary classes that are applied or something.

[BREAK]

[00:22:05] Al: Hey, Tessa, your new PB&J topping selector website is really blowing up. I wish it came in a mobile app version. So, I didn't have to bring my desktop to my kitchen every single time I'm hungry.

[00:22:21] T: Tell me about it. But I don't know the first thing about mobile. I'm a Vue developer through and through. Oh, well.

[00:22:30] Al: Are you telling me you haven't heard of Ionic?

[00:22:32] T: Ionic?

[00:22:34] Al: It's a mobile app development platform that empowers web developers to easily make native mobile and progressive web apps all in Vue.

[00:22:45] T: That sounds too good to be true. How do I know if I can trust it?

[00:22:49] Al: Well, Ionic is the technology behind about 10% of the world's mobile apps, including ones from Home Depot and Target. It's also open source, so anyone can contribute.

[00:23:01] T: Nice. But what if I need help?

[00:23:05] Al: Well, Ionic has got you covered there, too, with their premium tools and services.

[00:23:10] T: Wow, that sounds almost as smooth as my favorite brand of peanut butter. But I'm no good at design. Apple and Google have like super stringent standards on mobile user experience design.

[00:23:25] Al: Well, that's the best part. The Ionic Vue Library comes with over 100 native components and utilities, including animations and icons. So, you don't need to design anything to get started. Capacitor will take all your JavaScript and package it into a stunning mobile experience for you.

[00:23:44] T: Amazing. How do I get started?

[00:23:47] Al: At ionicframework.com/vue.

[00:23:51] T: I can't wait to make everyone jelly of my new PB&J mobile app.

[EPISODE CONTINUED]

[00:24:02] CW: I'm curious for the Vue scope styles or just Vue styles in general. Are there naming conventions to avoid that kind of thing? Just based on this, I would be just like, “Oh, okay, well, if I don't want to deal with CSS modules, or any other libraries, but I also don't want to deal with weird conflicts. Should I name all my classes like to do underscore and then whatever the class name is, and then apply it that way? Or is that not a thing?”

[00:24:28] T: I mean, there are definitely people who love them and hold on to it with like a death grip. It's the whole idea of scope styles. This is kind of that scoping aspect of it is built in so you don't need to do that yourself.

[00:24:42] CW: Sure. Oh, cool.

[00:24:44] B: Yeah, I think the CSS piece, I think a lot of it does boil down to a little bit of like, people don't quite understand how CSS modules works. So, I think when people learn about it, they're almost instant convert because scope styles does have that risk factor. That's something with higher specificity could override the data attribute. So, I do my best to sort of try to tell people to use it. The way you use it in Vue is you literally just add module attribute to your style block and that's it. Most people think it's like some additional config was literally just adding an attribute and then Vue takes it from there and does it for you.

[00:25:14] Al: Yeah, within your component, you have access to the dollar style object, and it will have all of your classes on it, so you can just pull them off of there.

[00:25:25] B: What's interesting with Vue, especially with the new experimentation is that they're looking to have you inject your JavaScript into your CSS modules. So, you can figure out ways to do Reactive variables and that kind of thing with CSS variables and that kind of thing. So, some pretty cool stuff coming down.

[00:25:40] Ar: That sounds really exciting. I'm just saying.

[00:25:44] CW: That's super neat. I admit, there's so many symbols like having the @ sign before variables, you just mentioned the dollar sign before variable, the colon before variable.

[00:25:51] T: There's also the pound sign before a variable.

[00:25:55] CW: Oh, my gosh, there's –

[00:25:56] B: No. We pretend that doesn't exist. That does not exist.

[00:26:01] T: You’re the person doesn't exist.

[00:26:02] B: I do not teach that.

[00:26:03] T: I use it.

[00:26:06] Al: The thing to remember is that all of those shortcuts are actually like they're just shortcuts. You don't have to use those symbols. You can write out the full like v dash on and v dash bind. So, v dash on is the @ symbol, and v dash bind is the colon. And then that way, you're writing the actual directives that are being used there. So, it's a lot easier to if you want to go that route, you can stylistically but we also offer the shortcuts, because you're going to be writing that all the time.

[00:26:38] CW: That makes sense. I didn't actually realize that the @ sign was for v dash on so that clears up a confusion that was in my brain, because I remember someone said that the colon was v dash bind, and I was like, “Oh, people must use that a lot.” But that makes sense. Do you anticipate other v dash whatever's taking on symbols? Will it just be symbols everywhere? Or do you think –

[00:26:59] Al: Well, the pound sign that doesn't exist for Ben.

[00:27:02] B: According to me, at least.

[00:27:03] T: Yeah, that one is v dash slot.

[00:27:05] Al: Is the v dash slot? So, I think in React, you have like children?

[00:27:11] B: I think you're right.

[00:27:12] Al: That you can use to render stuff?

[00:27:16] CW: Yeah.

[00:27:17] Al: Yeah. And so, in Vue, you have slots. And so, you say, “Okay, I'm going to have component, and I'm going to put a slot tag here.” And then when you use that component, anything that you wrap inside of it will display in that slot.

[00:27:35] CW: Okay, yeah, that is like children.

[00:27:37] Al: And then there's also, you have the ability to name slots. So, you can be like, “Here's the slot for the head and then here's the slot for the foot.” So, you could be like, “Okay, I don't want to change the stuff that's default, but I want to change like what's in the footer.” So, you can then do v dash slot, colon, name of the slot that you want to use.

[00:28:00] CW: Okay, and so why does Ben think it doesn't exist?

[00:28:06] Al: It was mildly controversial.

[00:28:08] T: He's an MD.

[00:28:10] B: So, the thing is, is that when you see it in the template, so basically, you'll see a template element, and then I'll be like, the pound symbol, and then the name, right? So that's what new developers will see, and because the hash symbol is already so prevalently used in like front-end world, it's kind of hard to Google what that means. So, that's part of it, is just like the accessibility of it is a little bit lower in that regard. So, it's mostly we'll get CSS ID, HTML ID, not Vue slot ID. Vue slot name shorthand, that's going to be buried in search results. So, for me, I usually, I will teach it so people are aware it happens, but it's usually I think, usually you just write out longhand in this particular one, I think. But that's just my personal opinion.

[00:28:52] Ar: Or you can cheat like I do and I just use ESLint, to then transform it to v slot. So, I have the luxury of just typing hashtag, and then it just automatically fixes it for me. Everybody wins.

[00:29:06] CW: You save so much time.

[00:29:09] Ar: Yes.

[00:29:10] B: I like it.

[00:29:10] T: All I'm going to say is I just googled @ click, and it gave me the Adam Sandler movie and then a bunch of other things that have nothing to do with programming.

[00:29:22] CW: Man, that Adam Sandler movie, though, that was a while ago.

[00:29:25] T: Yeah, there were some like gut punches in there.

[00:29:30] B: But to give you some context, Cassidy on – I know like the quotes when you're doing the v bind in the HTML, it definitely felt weird to me at first coming because I actually don't know if you know this, my background is in React as well. So, I think a part of this is that Vue is actually, I think, in this regard, I like your definition of library versus framework because it is meant to be like a jQuery when you can just drop it in an HTML page and then enhance current HTML. So, I think for that reason, if you did have like sort of JS syntax of the curly brackets, that would break because it's not like valid HTML. So, the v bind was there to use like enhanced current, like whatever is in HTML normally, and then to tell it like whatever is inside of the quotes is a JavaScript expression.

[00:30:11] CW: Interesting.

[00:30:12] B: Yeah, so that's why it is a little weird, though, especially coming from that world.

[00:30:15] CW: Even again, still looking at this code. I'm like, “I don't like that. But okay.”

[00:30:21] Al: You do have the option, which I don't think that you explored very much. But you do have the option in Vue to write JSX if you were to choose to. So, maybe someday I'll sit down or Ben, and you can sit down and we'll be like, “Okay, cool. Watch this.” Because the Vue flavor of JSX is different than the React flavor. So, it has some extra fun stuff in it.

[00:30:48] Ar: Yeah, until you said something about using the quotes instead of curly braces, like it's not something I had ever considered. Because in my mind, I was like, “This resembles just vanilla HTML.” But I can totally see your point about making it clear that it's something that's interpolated.

[00:31:07] CW: Right, that it's not a string. Because I still have an input typed as text, and that's a string. But then there's the v model equals new item, and that is an expression. And so, having that differentiator, I get it, the whole HTML explanation, that makes sense. But I don't know if I like it.

[00:31:29] Ar: I'll tell you the one place where that we're using the quotes absolutely trips me up, is if I'm passing in a Boolean. I cannot tell you how many times I failed to bind on a Boolean. So, you end up passing the string true, which can have some very interesting side effects. In fact, I think Ben, you helped me solve a problem with that and it took us both forever to be like, “Oh, that's not actually bound as a Boolean.”

[00:31:58] CW: Gotcha. Yeah, because well, especially because true as a string is truthy. So, when it's false, and suddenly it's false, but a truthy string.

[00:32:08] Ar: Yeah.

[00:32:08] B: I wonder if we can do something with the tooling to enhance that, because that's what Vue is like anyways. There's nothing stopping us from enhancing the Vue tooling to allow us to skip the HTML v bind and just like if you do attribute equals curly brace, that that would then interpret it correctly, because then you could get the syntax highlighting that would make it immediately obvious to developers that this is a JavaScript expression, and not a string, because I totally recognize that flaw of like, if I'm scanning it, it does – at least in my editor, it’s all white, regardless of whether it's a string.

[00:32:41] T: I feel like a lower hanging fruit might just be to change, like the syntax highlighting so that when it’s JavaScript, it's a different color.

[00:32:48] Al: I know that I use WebStorm and it definitely changes the color for me.

[00:32:53] Ar: That's what you sound.

[00:32:55] CW: What was going on in my head is now Ari, how did you hear it?

[00:33:02] T: Aren't you fancy?

[00:33:03] Al: Yeah.

[00:33:04] T: I mean, going from like nine Jags to AngularJS, and then React and Angular, like, I think the thing that was hard for me was I kept on wanting to put quotes and curly braces, and then I got rid of that habit. But then when I tried to go back to React again, for a minute for like an interview or something, I did it again. But like reverse. Now, I was trying to put quotes and curlies in React, and they were like, just put the curly braces and I was like, “It feels wrong.”

[00:33:27] CW: Yeah, at first what I was doing this, I was doing the curly braces. And we're like, “Oh, no, it's a string thing.” So, I put the quotes in the curly braces, like it truly did not compute. Now we know.

[00:33:43] Al: Now, we know.

[00:33:44] CW: But, yeah, it makes sense. If you're calling a Vanilla JavaScript thing, it's in quotes in HTML. And so, you win. It makes sense. I just need to get a better syntax highlighter and I'll be good.

[00:33:58] B: We got to start to update our theme. That’s what we need to do. Add to our list of things to do.

[00:34:02] CW: Yeah, of course.

[00:34:02] Ar: She's not busy.

[00:34:04] CW: No, she's not.

[00:34:06] T: What does she do?

[00:34:06] B: No meetings, whatsoever.

[00:34:08] T: Make burgers.

[00:34:09] Al: She probably has to like deal with just memes, endless memes from Cassidy all the time.

[00:34:15] CW: It’s not even just from me. I think our entire team just –

[00:34:18] B: I was going to say, the rest of the team is pretty brutal to be fair.

[00:34:22] CW: It's kind of just a contest to see who can drive each other mad, just constantly.

[00:34:31] T: Yeah, so Cassady, one last thing that I was curious about was how is the experience of going through the docs review? How did you find navigating them when you were stuck on something versus like in React?

[00:34:42] CW: So, I have so many words. First of all, I don't like the React docs right now. There are people working on it who are trying to make them better. Luckily, I know enough React that I don't have to go to them anymore because I don't like them. So, in comparison, the Vue docs are great, in my opinion. That being said –

[00:35:03] T: You don't just have to say that because Ben is here, by the way.

[00:35:10] CW: But anyway, the Vue docs are good. There were a few times where I did have trouble just searching for specific things, because we were just like, “Oh, look @ this.” And I was like, “What?” So, I just kind of was trying, and I think I was more of knowledge of – or lack of knowledge of what I should be looking for, and me listening to a Twitch chat, rather than following a guide or anything like that.

But overall, I would kind of like skim it and be just like, “Okay, this generally makes sense”, and went through it. I kind of would almost have to try again to give more accurate feedback. I would say like, I'll give it a B. But overall, it was a decent experience, and significantly better than the React docs, in my opinion. But I think I also ran into some issues where I would like Google how to do something, and it would take me to outdated docs. So, I would, I would have to do that. But that happens with pretty much every documentation site I've ever tried.

[00:36:10] Al: Great. So, Cassidy, question that we have for you. Is, did you Enjoy the Vue?

[00:36:19] CW: I Enjoyed the Vue.

[00:36:23] Al: Yeah. Excellent. Was there anything about your experience that you would have been like, “I wish this would have been a little bit easier, a little bit better”, or anything else? Any other comments that we haven't come across yet or anything?

[00:36:37] CW: Honestly, I think a lot of my comments would come down to I should probably practice this more. As someone who knows JavaScript, like doing like the actual JavaScript parts of like, adding something to a list, removing something to a list, increasing variables, that kind of stuff. That part was easy. There were some nuances with the symbols with the colons and the @s and stuff. I didn't actually realize what they were standing for what they were doing. I was just kind of again, obeying the chat. That probably could have been a little bit better. But overall, it seems great. I would be down to experiment with it again, and try some other kind of project.

[00:37:16] Al: Cool. All right. Well, Cassidy, where can people find you on the internet if they are so inclined to go looking for you?

[00:37:25] CW: Well, if you look up Cassidy Williams, you'll find me in a Scooby Doo character, and I'm not the Scooby Doo character.

[00:37:31] T: Thank you for clarifying. I've made that mistake so many times.

[00:37:34] CW: Yeah, it happens. It happens. So, you could look up my name otherwise, Cassidoo is my handle for pretty much everything. C-A-S-S-I-D-O-O. That is my Twitter. That is my GitHub. That is my code. Ben, you could go to cassidoo.co, that's my website. If you go to cassidoo.co/ newsletter. That's my newsletter. It's a weekly newsletter, where I do an interview question of the week and a joke of the week and useful links and crap. That's where you can find me.

[00:38:00] Al: Awesome. And with that, it's time for us to move on to this week's picks. Tessa, do you want to go first?

[00:38:12] T: Yeah. So, my first pick is this site, Talk to Me in Korean. My friend Felix who came on before we wanted to do a class together and he found this one. I was like, “I don't really like self-paced classes.” But I also didn't want to look up an alternative. So, we signed up. They had a really nice new year sale. I feel like a bit of an imposter because I don't agree with my rating. So, I score like a seven or something and I went back to the level one class and I'm learning some new stuff.

So, that is a tentative recommendation for people interested in learning to speak Korean. I don't really see that much in the way of writing or reading, which is a bigger concern. But there you go. I am in a position right now where I have to learn React, and a friend recommended JavaScript and React for developers on Udemy. Maybe some of you have heard of it. She said it was a great course. So, I will probably be taking that one.

[00:39:08] CW: I taught that, actually.

[00:39:11] T: What? I had no idea.

[00:39:13] CW: Let me give you a free coupon for that. Don't pay for it.

[00:39:16] T: Thank you.

[00:39:17] CW: Also, I will say, it's kind of an outdated course because it's using React 15 instead of React 16. That being said, I have other courses and so I can point you in the direction of things.

[00:39:28] T: Nice.

[00:39:30] Al: Awesome. Ben, do you want to tell us your picks next?

[00:39:34] B: Yes, sounds good. So, my first pick actually comes from the great Cassidy which is Albanese gummy bears. So yes.

[00:39:42] CW: I love these things.

[00:39:44] B: So, we had like, team food extravaganza. And these gummy bears are awesome. If you like sour gummy bears, that is one of my picks for fun snack things. Another one which actually funny enough, I did learn from Cassidy, is Tetris effect. So, for those who don't know, I'm a big Tetris nerd. So, really got really competitive back in the Facebook. I felt what that platform is called where people would compete with each other on various things.

[00:40:08] CW: Tetris Battle or whatever. It’s so good.

[00:40:12] B: I played that so much.

[00:40:14] CW: I loved that.

[00:40:17] B: So, Tetris effect has like great music and like stuff, but it also has the battle functionality, which I've yet to try my hand at the people in there. So, I look forward to maybe doing that on stream sometime so that people can see it.

[00:40:29] T: Ben, serious question. Is there anything you're not a nerd of? I feel like I could just make a blank nerd selector and just all of them would be correct.

[00:40:38] CW: Because he's a nerd.

[00:40:40] B: That may be true. I am a serial hobbyist. But I did deep dive into Tetris for some time, like even studying techniques and that kind of stuff.

Finally, for those who don't know, Cassidy also plays on online Go server, which I also, funny enough, I guess I'm proving Tessa’s point once more, huge Go nerd. So, OGS, Cassidy is very active on there and loved watching her games and that kind of stuff. So, although Cassidy, missed opportunity, you failed on CassiGo, it has been so great.

[00:41:14] CW: Oh, CassiGo. Dang it.

[00:41:15] B: Done it.

[00:41:16] CW: Next time.

[00:41:18] B: Next time.

[00:41:19] T: Maybe there's dot go domain.

[00:41:22] CW: If there is, I want it. But it feels like something that isn't a thing.

[00:41:25] B: Yeah. So, so I was going to say, “Now, I'm going to go to Namecheap and buy too many domains if it really doesn't exist.”

[00:41:32] Al: Cassidy, do you have any picks this week?

[00:41:33] CW: I do have picks. So, the first one I wanted to bring up it's kind of similar to Tessa. I got this language app for trying to learn Korean called LingoDeer. So far, so good. I am not good at Korean, but my husband's Korean and his entire family is Korean, which makes sense. So, I've been trying to to understand it a little bit more and I had tried it on Duolingo and Duolingo is good for helping me like read it a little better. But that was about it. So far, LingoDeer has been really nice because I can actually – I was able to say a sentence yesterday for the first time.

[00:42:09] T: Nice.

[00:42:09] CW: I'm trying it out. We'll see how long it it goes. But they also had a new year sale. So, going for it.

[00:42:14] T: Fighting.

[00:42:16] B: But Cassidy, the real question is does LingoDeer make you feel really guilty if you don't take lessons and shame you?

[00:42:25] CW: I mean, it's not like the Duolingo words like a crying owl that's sent you, but just like, “Why have you abandoned me?” Not yet.

[00:42:32] T: But then it's like you go into Duolingo and all of the sentences are like, “I'm alone in the basement. My cat left me. There's a chair and a string.” I'm like, “What is happening?”

[00:42:42] CW: Some of the sentences, you're just like, “Oh, no, the poor owl.” Man, I wish my family loved me. There are such tragic sentences in there, sometimes. But anyway, so I've enjoyed that so far, because it seems to be more geared towards Asian languages. I do speak Spanish and like Duolingo has been helpful for like maintaining that a little bit because I don't get to practice much. But I'm excited to go along with that.

Also, along a similar vein. I just finished watching the Korean drama, Itaewon Class, and it was very good. I finished it two nights ago, I think. That one is about a person who is seeking revenge. That's kind of like as high level as I can really get. But there's like a ragtag group of friends who end up coming together to try to make it possible. What was cool about this one, it was the most diverse Korean drama I've ever seen. I've seen quite a few of them. But this one, like they had a black character that never happens in Korean dramas, and they had trans characters, and they had gay characters. They had all these different categories of people that you just normally don't see in these shows. So, it was very cool to see that kind of representation and it was also just a very fun story. So, I definitely recommend that.

My last one, I'm reading a book called The Dreamers by Karen Thompson Walker. It is very interesting. So far, I'm not done with it yet. But it's a kind of sci fi modern fiction book about a sleeping disease. People will fall asleep and then never wake up. But they're still actively dreaming. It's kind of like mysterious in a way too and I've been really enjoying that one.

[00:44:23] Al: Nice. So, my picks this week, there is a series of games called UNLOCK, all capital letters. Yeah, I don't know if any of you all enjoy escape rooms or not, or like solving puzzles. But UNLOCK is a series of escape rooms in a box. You are given a deck of cards, and there is an app that you get on your phone, and the app has the timer but you like draw the cards and the cards have instructions, and they go together. You have to like add numbers together sometimes and then other times like solve a machine puzzle on the app. So, there'll be a number that you type in, and various things like that. What's great about these sets is that there are other escape rooms in a box. But with these, they give you a deck of cards.

So, once you go through it, if you had a friend go through it, you can repackage that, and then pass it off to another friend and say, “Hey, you all should play this one.” So, it's a great way to like, share the joy. Other escape rooms, you like end up destroying the kit, because they're like, “Cool, cut up this piece of paper, and then weave things together, whatever.” But with this one, it's just it's a deck of cards. You can do everything without destroying anything.

[00:45:37] T: So, like Sisterhood of the Traveling escape room, basically.

[00:45:40] Al: Yeah, basically, it's fantastic. They have a brand-new Star Wars series of them that we have gotten. We've gotten some of them. They're pretty fun. So yeah, that is my pick for this week is the UNLOCK escape room in a box series of games.

[00:45:55] CW: Those games are the best. That was actually a wedding present that my husband I got. At first, we were just like, “Oh, well, thanks for the board games or whatever.” Because our friend gave us a ton of them. But they were amazing, because we were able to do them with friends. We did them ourselves. We were able to pass them on. It was kind of like the game that kept on giving. Some of them are really challenging. We weren't able to solve a couple of them on the first try and then some of them, they're just fun and clever, too.

[00:46:21] Al: Yeah, we got one where you have to have enough people to play it because you have to split up into two groups.

[00:46:27] CW: Yeah, because there's so many things to solve.

[00:46:29] Al: Well, no. There’s actually a point at which half of you go this way, half of you go that way and like you each –

[00:46:35] CW: I haven't had one that did that.

[00:46:37] Al: You each take separate sets of cards, and then you're having to like talk to each other to explain like, “This is what I'm seeing. This is what I'm seeing. How do we – I don’t know.”

[00:46:47] T: That's like 999.

[00:46:49] CW: That's so cool.

[00:46:49] Al: So, they’re super fun. I highly recommend them.

[END OF EPISODE]

[00:46:52] Al: That's all for this week's episode. If you aren't following us on Twitter, head on over and find us @EnjoyTheVueCast. Be sure to subscribe to us in your pod catcher of choice, and if you have some time, leave a review. Finally, remember, the first rule of Vue Club is tell at least five or six colleagues about Vue Club. Thanks for listening and until next time, Enjoy the Vue.

[END]