What We Love About Vue CLI

Chris: This podcast is brought to you by our friends at Linode. Whether you're working on a personal project or managing your enterprise's infrastructure, Linode has the pricing, support and scale you need to take your project to the next level. Get started on Linode today, by going to linode.com/vue.

Ben: Hey everybody and welcome to Enjoy the Vue. I'm Ben Hong and today on our panel we have Chris Fritz.

Chris: Hi.

Ben: And Elizabeth Fine.

Elizabeth: Hi.

Ben: And today our topic is on the Vue CLI, which many of us know and love. So Chris, what is the Vue CLI for those of us that haven't used it as much?

Chris: So the Vue CLI is an officially maintained project by the Vue team that helps you start new projects and also maintain those projects, so. One classic example of something involved in a lot of big Vue projects that can be kind of a pain sometimes is managing Webpack configurations and writing those. And it's just a whole other set of skills that I consider completely separate from actually developing applications. And in Vue CLI we try to take managing Webpack configurations and other related skills to just get you a project set up with a great developer experience and let you focus on the problems that are specific to your app. And you can manage your dependencies as Webpack and other projects come out with new updates through just upgrading Vue CLI. And something really nice about Vue CLI is as you upgrade those dependencies, as long as you upgrade them all to the same version, they're guaranteed to work together.

Ben: Yeah, that's pretty great. Yeah. So the interesting thing is that not all projects are actually built with Vue CLI. I know I've always done some projects where you actually only import the CDN for Vue. So I don't know about you Elizabeth. What about your experience with Vue CLI?

Elizabeth: Yes. Most of the projects that I work on are not built using Vue CLI. Know their own big Webpack configuration, sometimes in combination with gulp or multiple build processes together. So I really have a basic knowledge of Vue CLI and I find it really useful if you want to spin up a project. Just this weekend I decided I wanted to start building a Solitaire project because I've been super obsessed with Solitaire and I'm like, okay, vue create solitaire app and then boom, I've got Babel, ESLint and a whole build process that works super smoothly. So really I only use it for... I just want to get a project up and running really, really fast and that's exactly what it does. I mean, I want it for a really simple use case and it is really simple to use, so I think it's great.

Chris: Yeah. And for people who don't want Vue taking over their entire front-end for like a "single page application" it might not be the best tool or it can be a little bit more difficult to bring into your project and sometimes a little bit more configuration is involved to just get it working. It won't work just out of the box. For example, if you want to integrate it into Rails, to Ruby on Rails, a backend like that to have it only take care of some views or some parts of some views. But yeah, for single page applications, yeah, it works right out of the box and you can just get started, get prototyping, get building.

Elizabeth: So would you guys say that Vue CLI is pretty extensible and has a lot of flexibility in comparison to other similar types of CLIs?

Chris: Yeah. We try to strike an ideal balance between not making you think about things that aren't really your concern in the project, but also giving you the flexibility to change anything you want without giving you power that will become unwieldy so that you just have a complete mess to maintain. So an example of this is, there are some project generators that sometimes don't let you configure anything or only let you configure very little, in cases where you want to make some changes to how your assets build or changes to your development experience, if you want to configure Webpack in some way or if you want to change which tools and technologies you're using altogether, if you're using TypeScript or Babel, that kind of thing.

Chris: And we have different plugins to allow you to use different things to sort of mix and match the, kind of, experience that you want and then also give you access to changing any part of the configuration so that you never have to completely eject. You never have to just dump out, abandon Vue CLI and have it dump out a full Webpack config and show you all of the files that it was using to do all that work under the hood so that you can just edit whatever you want there, which is kind of an extreme scenario. And then you have this huge build folder or something with a similar name that you have no idea what most of it is doing. It's kind of scary to look at.

Chris: There's not great documentation on where to go to change things, to configure things, to add new things. Instead, we try to make that configuration and keep it very, very simple so that you only ever have to worry about the things that you change from a typical project, and providing relatively few layers of obstruction over the tools that you're using so that if you already know how to use Webpack, you don't have to relearn how to use Webpack when it's underneath Vue CLI. You can just use Webpack directly if you want, without having to maintain the entire Webpack configuration. And you can also see the computed Webpack configuration if you want to with commands like vue inspect.

Elizabeth: Oh, I did not know that. Vue inspect. And so if you wanted to, let's say you were a Webpack master and you wanted to extend the Webpack configuration that Vue CLI gives you, would you use just a Webpack overrides file to do something like that? Or is there more recommended strategy?

Chris: Yeah, great question. So there's a vue.config.js file. And if you want to change something in Webpack there are two main ways. And that's with the chain Webpack option or the configure Webpack option. Configure just allows you to add the properties that you want to change in the Webpack configuration and it uses webpack-merge to merge those two objects together in a very smart way that is aware of how Webpack configurations work. And chain Webpack is a little bit of a more complicated syntax but is really, really powerful in that it allows you to change even parts of some values of properties. It's so, so powerful and control exactly how those changes are made rather than just overriding something.

Elizabeth: Gotcha.

Chris: And there's good documentation on both of those in the Vue CLI docs which also links to other documentation for webpack-merge and, I think it's called webpack-chain. It's webpack-chain or chain Webpack, whichever project it is. If you Google one of those it'll take you to whatever the real thing is. And they have some good documentation as well. Ben: Yeah. And then one of the things I love about the Vue CLI is, obviously just hearing Chris talk about, he has extensive knowledge of Webpack, but that's 100% not required. I'm one of those people who Webpack initially was just overwhelming and really hard to just navigate at first, but really Vue CLI, to Chris's point, allows you to easily get in there and just let you configure what you need and get back out. So a common thing that was really hard to do in the past was you might need your front-end to talk to a different port on the back-end, but of course you're going to get CORS issues, so cross origin resource sharing issues, and so with Vue CLI 3 it was as simple as basically dropping in a small conflict object that's documented on the site and once you switch that out it just passes through just as you want, and you don't have to muck through all the Webpack to get it to work. And things like that are exactly what makes life so easy when you are working with Vue CLI.

Chris: One of the things that I especially love about Vue CLI is the plugin ecosystem. So Vue CLI offers plugins for a lot of different really common things. Whether you want to use TypeScript or Babel, there are plugins for those. There are also plugins for the different kinds of CSS preprocessors that you might want to use, there are plugins for linting, plugins for testing, unit testing and end-to-end testing, and unit testing and end-to-end testing for different unit testing and end-to-end testing libraries. So you really have so much flexibility but can still have confidence that you can use all of these technologies safely because they are officially maintained. But there are also a lot of community maintained libraries that are really, really useful. And Ben, I think you have a favorite that you were talking about earlier.

Ben: Yeah, one of my favorites. A lot of times, for developers, we need component libraries. And one of the most popular ones in the Vue ecosystem is the Vuetify component library. And so typically when you're working on a project you need to npm install, save dev, all these different dependencies, but with the Vue plugin, for those who haven't used it, it's really just instead of vue create app, you just type vue add plugin name, so it'd be vue add vuetify. And what it does, it not just only installs everything to the dependencies like your package.json and everything, but it actually will oftentimes go a step further. So Vuetify will actually go into your index.html and include your Roboto font library, all your material icons, and so it'll configure all those things for you automatically so that, basically, immediately you can get started with very little configuration, which is one of the great things about plugins.

Chris: Yeah. Another favorite of mine is that there's an Electron plugin. So if you search for Vue CLI plugin electron, you'll find it and possibly even others. There are always new plugins coming out and it makes it really easy to just start a new Electron application using Vue. You have to do basically nothing to start you, you're just there and you can start coding, start building whatever is in your mind.

Ben: And speaking of which, Chris, have you ever written your own Vue CLI plugin?

Chris: I have. And so something that's pretty common, but less common than I think it could be, is companies writing a plugin for the changes to the configuration that are specific to that company. So something that you want to use for all projects and you want to share between projects so that you can maintain that same development experience, and when you make changes to that development experience that you can take advantage of that in all of your projects. And it's easier than a lot of people think to write your own Vue CLI plugin. We have some pretty good docs on that, contributed especially by Natalia Tepluhina and Jim from the core team. They've both contributed to the Vue CLI plugin docs to make it much easier than it used to be, and it's only gotten better.

Elizabeth: So can you kind of walk us through the process of start to finish of how you would do that? Briefly. Not, I'm not asking you to go read out all the docs but just... I mean, how do you even start creating a Vue plugin?

Chris: Yeah. It might be a little bit complicated but you only need a few files and depending on what you're doing, you might not even need all of those. But there are different ways. In short, there are different ways that you can hook into what Vue CLI is doing depending on what you need to do. Chris: Sometimes you might need to add some dependencies. Like in the case where you're introducing a new technology. Let's say you wrote your own, your company for some very strange reason is using its own CSS preprocessor that it built in-house. I hope you're not, please stop if you're doing this. I don't know. I can't imagine what reason you could possibly have. And you're adding some dependencies for that CSS preprocessor and then you also want to generate some files when you create a new project to add a configuration for that preprocessor. And you might also want to make some changes to Webpack so that files with a certain extension can be processed by a specific loader that you've also written for that preprocessor. That kind of thing.

Elizabeth: Yeah. Okay. So basically you can, I don't know... Are there hooks you can call or something to say, at this stage during the process, run this code or add this to the Webpack config? Kind of like that.

Chris: Yeah, exactly.

Elizabeth: Yeah. Okay, cool.

Chris: Yeah. And there are some lesser known tips and tricks for Vue CLI that I often wish more people would know because they're really cool. And I think a lot of these are becoming more and more popular. I think that the first one we have to mention is just Vue CLI UI, which is definitely Guillaume's brainchild.

Elizabeth: Oh my gosh, I just came across that the other... yesterday I think. And so basically the gist of it is you can run Vue CLI but actually through a user interface in your browser rather than through your terminal. Is that kind of the idea?

Chris: Yeah.

Elizabeth: Yeah, that's awesome.

Chris: Yeah, absolutely.

Ben: Yeah, it's-

Chris: Yeah, so like... Go ahead.

Ben: I was just going to say, one of the things I know I love about it is that whenever you run your local server, it'll actually do a infographic breakdown of all your dependencies and show you how big everything is or how long it takes to run on different internet speeds.

Elizabeth: Oh my gosh.

Ben: You get all these great stats.

Elizabeth: How long has this existed?

Ben: I want to say Vue CLI 3.

Elizabeth: Is it a part of Vue CLI 3? Okay.

Chris: Yeah.

Ben: I don't think-

Elizabeth: Wow.

Ben: ... it was more than that. Yeah.

Chris: Yeah, that's when it was introduced.

Elizabeth: I can't believe I only discovered that yesterday.

Chris: Not as many people are aware of it as should be.

Ben: Yes. It makes it really easy to do configurations, too, because everything's laid out in a form instead of navigating a gigantic JSON file. It's like you're filling out a basic web form and the updates [crosstalk 00:15:46]-

Chris: Yeah. And with a JSON configuration, oftentimes I'm looking at that and I have no idea what options I can change. Or for a specific option, what are the possible values?

Ben: So for example, would you want to output your build files to a different folder than the standard dist, you might have to go into the docs and look up which key value you need. But in the Vue UI there's literally a settings page, and I'm looking at it right now, there's a form that says output directory. The directory where build files will be generated. And you can just fill it out, save and you're good to go.

Chris: Yeah. And also for configurations like for ESLint for example, you can see exactly what your options are, and like a select box. I mean, there's a reason we've invented technologies and interfaces like select boxes because it's often useful to know what the right answers are so that you can't just put in something that breaks, sometimes invisibly, as it just wasn't valid. Or you entered something that was a typo and it's just not an option, but the library doesn't look for that option so it never raises an error to tell you what you're doing wrong and then you just stare at it for days on end sometimes, wondering what is going wrong, not realizing that you missed an i somewhere. Not that I'm speaking from personal experience or anything. That can happen sometimes to other people, I've heard, and Vue CLI UI can save you from those kinds of mistakes and headaches and, again, keep you focused on actually just building your app.

Ben: So Chris, you don't miss going into ESLint rules trying to say whether it's error comma two comma always, never? You don't miss doing that?

Chris: Oh, at this point, I'm pretty good with the general format of that. Just through sheer pain and repetition.

Ben: [inaudible 00:00:17:49].

Chris: But yeah, it is frustrating to know. And just because you know the general language of ESLint like error off one, two, for some reason.

Ben: Always.

Chris: I don't know why they even allow numbers. Yeah, it drives me nuts. But there are a lot of other options that are specific to each specific rule that you would never know what they are without looking at docs. And the interface with Vue CLI UI is the docs. It makes it so that you really can't do anything wrong and you can see at a glance everything that you can do.

Ben: And more. It makes it really easy to explore the plugins and you can install everything directly from the UI so you don't have to go search for the repo and stuff. Everything's linked directly inside. So it really goes beyond the CLI in a lot of ways.

Chris: Yeah, yeah.

Ben: Yeah. I definitely, more people definitely need to be checking it out. For sure.

Chris: Yeah. Another of my favorite tricks beyond the UI is modern mode. So this is a build flag and so when you're running vue build, you can run vue build --modern, and that will create, instead of just one single build, one single collection of JavaScript CSS files and an HTML file, it'll create two separate versions of JavaScript files. One is legacy version and the other is the modern version. And basically the legacy version is just for Internet Explorer and the modern version is for all of the other applications.

Chris: And what the modern version does is avoid transpiling the features that you're using, the advanced JavaScript features in Babel that really you can count on being available in the modern browsers like Chrome, Edge, Firefox, and that not only saves you room to make your... saves you space in your JavaScript files so that your JavaScript files are smaller and therefore download more quickly and are parsed more quickly, but using the native versions of those features, rather than polyfills included with Babel, will make it so that those features run faster because the engines can better optimize the native features than a polyfill. And so that's really, really useful.

Elizabeth: That is so good to know. So then do you need to do anything afterwards to ensure that Internet Explorer always gets the legacy version or does the plugin handle that?

Chris: Nope, it just happens automatically.

Elizabeth: Wow, that's so cool.

Chris: Yeah, it's really neat. So you can still support Internet Explorer without having to dump a ton of polyfills into your JavaScript just for, sometimes, the 3% of users that are using Internet Explorer, but those 3% of users you can't really let go. It's not possible in a lot of businesses to just say to your shareholders like, "We'd like to cut down on 3% of our profits."

Elizabeth: Right.

Chris: Yeah. "Would that be cool? It would make our developers happy." And the answer is, of course, no. Right? So this makes it so that you don't have to compromise. You can make the people using the modern browsers happy, and the people using Internet Explorer will just get the same experience they would've gotten anyway, but not everybody else has to suffer.

Ben: So hearing that, Chris, I know a common question to this is, why isn't modern mode turned on by default then? Why require a flag for building with modern mode?

Chris: So it is kind of a big change and it started as kind of an experimental idea. I think it very likely will become the default eventually. But with something like that where it works differently from the way that most applications do, we try to be pretty conservative with that. We don't like to surprise users with behavior that they wouldn't expect.

Ben: Yeah, that makes sense.

Chris: But it's been out for a while now and it's been used by a lot of different applications, and still seemed to be working very well. At least, I don't know of any big gotchas that we've encountered where it caused some unintended behavior that caused a problem. So yeah, it very likely will be but yeah, we like to be conservative. We really don't want to mess up people's apps and then have them wondering like, "What the heck happened? What changed? Why is this breaking when it worked before?" Yeah, that's not a nice experience.

Ben: Not at all. And so another lesser known tip and trick with Vue CLI, I know that you love this feature in particular, Chris, is commit hooks and linting on pre-commit. Can you tell us a little bit about that, Chris?

Chris: Oh yeah. I love linting. I am super, super into linting. I like to lint everything. And I especially don't like... I don't want to be that person in a code review who's saying like, "Hey, everything works and looks great. You're just missing a space here. So could you just fix that and then we can merge?" That's so demotivating. That person probably feels like I'm a complete jerk when I leave that review, and I definitely feel like a jerk. And it also-

Ben: I accept you left that review.

Chris: And it also wastes time because what I'd rather talk about in code reviews is the things specific to the application and the architecture that are more interesting and more fruitful and have a bigger impact on our developer experience. But eventually you want to merge stuff in.

Chris: So if you're doing a few reviews, a few rounds of review, with just those little things, you're never going to get to the actual useful stuff. And so I like to have as much of that done as possible, automated, and the pre-commit hooks, like in package.json, Vue CLI through Yorkie, which is a fork of Husky, adds a get hooks section to package.json, where you can list some get hooks like pre-commit. And then Vue CLI also comes with a project called lint-staged, which allows you to run some commands on any of the files that are staged for commit. A common problem with linting, especially as projects get really, really big. Let's say you're at a point where you have hundreds of thousands, maybe millions of lines of code across tons of files and linting the entire project takes a while.

Chris: But in an individual commit you're probably not making changes to hundreds or thousands of files at once, maybe a dozen, sometimes just a few, sometimes just one. And by only linting the files that are staged for commit, the process, that pre pre-commit task ends up only taking a second or two, which doesn't slow people down from making commits, which is a big reason why people often don't like pre-commit hooks, because they don't want to wait for a minute or a few minutes for the pre-commit hook to run to find out whether test pass and whether linting worked and stuff like that. So yeah, you can just run linting on stage files and just run unit tests on stage files and basically make it impossible to commit anything in your code base that has a linting error, has some kind of style error or has a failing unit test with, at least if you use chest, it has this flag called --findRelatedTests, which is so awesome.

Ben: Elizabeth, have you worked with commit hooks before?

Elizabeth: Not really. I just kind of commit and then hope that I remembered to run npm run lint beforehand. Otherwise, I have to wait for like 15 minutes to find out that I forgot a semicolon and then start over again. So it's probably something I should look into. I was listening to what you're saying, Chris, although a lot of stuff I work on doesn't run off of Vue CLI, but I'm sure there's another way to implement that. I recently tried to do the-

Chris: Oh yeah. Yeah, it's totally possible.

Elizabeth: I recently tried to set up automatic linting when you save, although I'm still... it's still not working. I'm still getting linting errors all the time when I try to run build so I need to look into that further and fix it. But yeah, I can definitely see the value in it. There's nothing worse than waiting 15 minutes for build to run to check if your change worked just to find out that the whole thing failed because you left an extra space after a line or something like that. It's such a waste of time, it just piles up the more and more that you do that throughout the day.

Ben: Mm-hmm (affirmative).

Chris: Absolutely. And in Vue Enterprise Boilerplate, which uses Vue CLI, I actually have all of the linting configurations that I like to use for most projects along with some documentation on the linting and the projects that are used for that linting so that you can see like what you'd have to install if you are implementing these outside of Vue CLI project and where to find more documentation to update parts of that configuration.

Elizabeth: Yeah. Cool. Good to know. Maybe we can put that in the... Do you think you can put that in the show notes?

Chris: Absolutely.

Ben: Absolutely.

Elizabeth: For other people to see too.

Ben: Mm-hmm (affirmative).

Elizabeth: So when you... This sort of pre-commit hooks you're talking about, will they actually fix the linting errors for you or will it just report them? Or can you set it up so it fixes linting errors for you and then you just have to commit and not do anything? Chris: Yeah, I like to have it just fix things for you. The linting tools that we have these days are often very, very good. They don't make very many mistakes. When they do make mistakes they're often fixed pretty quickly as long as you're using projects that are used by a lot of people. And the ESLint plugins that are used by Vue CLI and by Vue Enterprise Boilerplate are all really, really popular.

Elizabeth: Yeah, that's a little bit [crosstalk 00:28:45]- Chris: And so we fix those things automatically and then you don't even have to know that you made a mistake. And in fact-

Elizabeth: Just the way I like it.

Chris: And you can even have people... Something beautiful about this is you can even have people, if they disagree on something fundamental like, "I like to use semi-colons," "I hate semicolons blah blah blah blah," they can both write the code style that they like and then whatever style that you've chosen will just get automatically fixed when they commit.

Elizabeth: So you could just pass it back and forth, both effortlessly changing your coding styles and not even knowing it. Chris: Well, I mean, it wouldn't be back and forth, but let's say you decided no semicolons, people could add a semicolon if they wanted to. Heck, they could add three semicolons, that they'd just be stripped out if they're not actually necessary in that context.

Elizabeth: Okay. So can I ask... I've got a kind of unrelated question. So some people use semicolons, some people don't use semicolons. And I was recently, because we were talking about Vue 3, I was looking into the Vue next source code and I noticed there's no semicolons. Is there any reason to use semicolons anymore? I mean, the only thing I can think of is maybe if you're trying to debug or something.

Chris: I don't know. I don't know if we want to get into this debate.

Ben: Should we wait for Ari for this one?

Elizabeth: What's the other side?

Chris: Maybe we'll wait for a week when I'm not here.

Elizabeth: Okay, just say. So-

Chris: Yeah, I will-

Elizabeth: Semicolons or no semicolons?

Chris: I will say no semicolons. And I actually, I will contend that... I mean, there are some specific cases when semicolons are necessary. Let's say you're starting a line with just an opening square bracket, for example, to define an array and then immediately iterate over it, but you're not assigning that array to a variable or anything. That's a case where you need a semicolon before the array. But the thing is, all of the... And there are relatively few cases where you actually need a semicolon, the linting can pick that up and tell you that you need a semicolon, so there's actually no reason to add a semicolon just in case.

Elizabeth: Okay. And Ben, semicolon or no semicolon?

Ben: I am no semicolons as well.

Elizabeth: No. Okay, maybe I should change. And now another debate. Is it semicolon or semicolon? Because you both say it differently.

Chris: I pronounce it semicolon. I don't know. I don't-

Elizabeth: It's a divisive topic.

Chris: I grew up in international school so everything just kind of sounds good to me, and I just say things kind of weird.

Elizabeth: Do you say semi-truck or semi truck?

Ben: I say semi truck.

Elizabeth: Semi truck. That's why I say semicolon, too, but I don't know. Okay, sorry, that was-

Chris: I don't know. I just say honky truck.

Elizabeth: ... unrelated. So steering back towards linting.

Ben: Love it.

Chris: Yeah, so I think I finished, at least, anything that I wanted to say on linting.

Ben: Yeah. I mean, anyone looking for how Chris does it definitely should check out the enterprise boiler, his Enterprise Boilerplate solution. I've definitely used that before, so we can definitely include that in the show notes.

Chris: And I will say two spaces is, also, the apt total number of spaces.

Elizabeth: Two spaces, okay.

Chris: Because everyone asked.

Ben: I got to say, we actually, probably should have an episode on linting. I think that'd be actually pretty fun.

Chris: Yeah. But if, really if you've been offended by anything that I've said today, just send a response to @gloomyloomy. And yeah, I'll be happy to hear all of your comments. Just kidding. I shouldn't take advantage of that with Ari not here to defend herself. That's Ari's Twitter handle.

Ben: Yeah.

Chris: But she'd love to hear from you. I'm sure.

Ben: I'm sure.

Elizabeth: Okay, so we were talking about the unofficial Vue plugins, but then back to the official Vue plugins. Would that include something like Vue Router or Vuex? Do those go into that category of Vue CLI plugins? Chris: Yeah, yeah, those are official.

Elizabeth: So you could just run vue add vuex and it would add Vuex to your project, and vue add vue router and add Vue Router to your projects.

Ben: So the funny thing about Vue Router is it's vue add router, because I've made that mistake a couple times.

Elizabeth: Okay cool.

Ben: But it's just that easy.

Elizabeth: Easy.

Ben: And then it sets up the router.js for you. And that's just it, right? If you were to set up Vue Router on your own, you'd have to npm install from the file, the plugin does all that for you and it's so good.

Elizabeth: Which is how I've been doing it in the past. And so you can do that after you've already created the project, so you create blah blah and then you add whatever you want to add.

Chris: Yep.

Ben: And it scaffolds things for you.

Elizabeth: Yeah.

Ben: So I would say, actually, the one danger to scaffolding, which, I don't know, Chris, if you've run into, but if you don't commit the code you're changing and then you run a vue add, it'll actually override certain files because it's trying to set up a scaffold, so you could lose changes as a result. I would make sure you're on a clean commit. I don't know if, Chris, if you have-

Chris: Yeah, that's great advice.

Ben: Yeah. If you're going to vue add, definitely start from a clean commit. I have had the plugin override my stuff before. Cool. Should we move on to picks?

Chris: Sounds good to me.

Elizabeth: Sweet.

Ben: All right. Well, it looks like I'm first up this time.

Elizabeth: Okay.

Ben: So I got two picks for this week. The first of which is Pokemon Sword. This is our first episode recording in 2020 and so it only felt apt to start my new Pokemon journey, so I chose the Firestarter for those who are wondering. And then for my second pick, there's a great bid by James Corden on The Late Late Show where he and Harry Styles, they do a crosswalk concert where, basically, Harry Styles, all the band, they'll in the middle of an intersection will go and perform a song before the traffic light changes and then they have to rush off. And so it's actually a pretty funny bid that they do. So anyone who's interested in that kind of stuff, it's pretty, pretty entertaining. So that's my second pick for the week.

Chris: All right, I'm up next. I only have one pick. This is a song on SoundCloud. It's like some super indie exclusive music that I was into before it's cool. And so I just want to let you know how cool I am before I share this with you. And then it gets really big and then everybody's just all over it. I just want to know. I was in there pretty early, before they sold out.

Ben: What's the song called?

Chris: The song is called Time To Grow by Hope and Jessie, and there'll be a link to that in the show notes. And it is just a hauntingly beautiful song with wonderful harmonies, the chorus especially I really, really love. And it happens to be... one of the people singing this song is also a Vue developer.

Elizabeth: That's beautiful.

Chris: Yeah. Did you say it's Vuetiful?

Elizabeth: It's beautiful.

Chris: Wonderful.

Ben: It sounds beautiful. Beautifully haunting.

Chris: Oh, it's so good. Yeah, seriously. Listen, I probably listened to it like 60 times at this point. Ah, wonderful. It's so good.

Elizabeth: This is the one that you sent us before, right? Because if it is I can verify it is beautiful.

Chris: Yeah.

Ben: Yes, I third that.

Elizabeth: Yeah. So my pick is a show I was watching on Hulu called Castle Rock. And it's scary. It's a horror series. So if you get scared easily or you don't want to watch that kind of thing, then don't watch it. But it's produced by Stephen King and based off his stories and it is so good and just so complex and interesting. It's one of those things where afterwards I had to go on Wikipedia and read the whole plot. The amount of interest I had in the show doubled after reading all of the stuff that I missed because I clearly... a lot of it went over my head, but it was so good and I can't wait to start season two. So, that's my pick.

Chris: Oh, I actually have one more pick. Can I still do it? Ben: Yeah, of course.

Chris: Okay. So Katie and I, my wife and I have been watching The Witcher on Netflix.

Elizabeth: I was going to watch that recently.

Chris: I played the Witcher games and I was into them, especially The Witcher 3, which is a masterpiece, but I wasn't really excited about the show. I figured, and I enjoyed the game because I like being in that world and participating in it, and the game was really well made but I'm not so into the world itself, but this is some Game of Thrones level stuff. It's super, super good. Not only are the characters really interesting and the acting is fantastic, but the fight scenes are so well choreographed. This is some of the most beautiful fight scenes that I've ever seen. And apparently Henry Cavill, the person who plays Geralt, who is the Witcher in The Witcher, studied dance because he looked back and he, I guess on one interview he said that a lot of famous sword fighters were actually taught dance before they were taught how to use a sword.

Ben: It's all about footwork.

Chris: And then he basically just dances with the blade. It's so awesome. Oh wow, it's so cool. But also there's some gory bits, so you can close your eyes sometimes if it's too much. That's it.

Elizabeth: Sweet. That description made me actually really want to watch it. I would like to see Henry Cavill dancing with a sword.

Chris: He is also a beautiful, beautiful man and there's a lot of a shirtless Henry Cavill in there, so if that's your thing... All right, Ben, would you like to take us out?

Elizabeth: On that note.

Ben: On that note.

Chris: I see everyone's a little bit distracted now.

Ben: Yes, we're all googling Henry Cavill.

Chris: Just thinking about that image. Yeah.

Ben: And on that wonderful note. Thanks for listening today and as always, we hope you enjoyed the Vue. Wait, hold on, I screwed that up. Run it again?

Chris: Nope. Perfect take. That's it. Goodbye everybody.

Ari: This podcast is brought to you by our friends at Linode. With 11 data centers worldwide, including their newest data center in Sydney, Australia, enterprise grade hardware, S3 compatible storage option, and their next generation network, Linode delivers the performance you expect at a price that you don't. Know today by going to linode.com/vue.