Vue ESM Support on CodePen with Chris Coyier and Stephen Shaw

EPISODE 68

[SPONSOR MESSAGE]

[00:00:00] Al: This episode is sponsored by Ionic. To learn more, visit ionicframework.com/vue. 

[EPISODE]

[00:00:16] Al: Hey, everybody. Welcome to Enjoy The Vue. I’m Alex, and today on our panel, we have Ari.

[00:00:22] Ar: Hello.

[00:00:25] Al: Tessa.

[00:00:25] T: Hello.

[00:00:27] Al: And our special guests for this episode are Chris Coyier.

[00:00:32] CC: Hello.

[00:00:33] Al: And Stephen Shaw.

[00:00:34] SS: Hello.

[00:00:35] Al: Chris, tell us about yourself a little bit. I don't know if anybody's ever heard of you.

[00:00:40] CC: Right on. Thanks for having me, by the way.

[00:00:44] Al: Thanks for coming.

[00:00:46] CC: Yeah, it’s great. I really like topic-specific anything. I used to really like going to topic specific conferences back when conferences existed and podcast just –

[00:00:55] Ar: The old days.

[00:00:59] Al: The before times.

[00:00:59] CC: Yeah, I'm here with Stephen, who you'll hear from in two seconds. We both work at CodePen, which is like an online, I used to say playground, but that makes it feel so childish, doesn't it? It's really a place to write code, a social development environment, is the grownup way to say it. So, you have an account, and then anything you build there, we generally call a Pen. So, there's a special Vue editor that we'll get to. But generally, it's for frontend, web designers and developers, you write HTML, CSS, and JavaScript, and you save the thing and it's called a Pen, and then it has aspects of a social network to it, right? 

I can like yours and you can like mine, and we can comment on each other. And then we apply machine learning to it and tell everybody what the hottest things are that day. So, if you go to the homepage of CodePen, you'll see things that are trending, and things that your friends are doing and stuff. So, it's like apply the social network model in a sense to to coding.

[00:01:57] Al: Awesome. Stephen, tell us about yourself. You clearly work for CodePen.

[00:02:03] SS: Yeah, so I work with Chris on CodePen. We kind of get all the frontend stuff working, and all those fun little challenges of making something that people type code into, and then it executes. That's always very exciting. Yeah, before that, I was working at an advertising agency building websites for clients and that was when I initially found out about Vue, and was coming from a traditional like HTML and CSS and a little bit of JavaScript kind of approach with PHP mixed in there. And then, when I discovered Vue, I started integrating Vue into that. So, Vue in WordPress, and like, all these weird combinations that were probably not the intention of using Vue, but it helped me bridge the gap from kind of a server rendered model to a client rendered model. I fell in love a little bit.

[00:03:01] Al: Awesome. So, I'm going to ask it, Tessa, and Ari are here too, and do you all use CodePen? Have you all ever used CodePen? And if you do, how do you use it? Ari. You want to go first?

[00:03:11] SS: There is a right answer to this.

[00:03:13] Ar: I have used it. I did not realize until recently like that, you can do stuff specifically in Vue with it. Otherwise, I probably would have been using it more when I just need like a little proof of concept. But I don't do a lot of coding outside of like the projects I'm working in. So, I probably don't use it as much as I should.

[00:03:39] Al: Tessa, how about you?

[00:03:41] T: I generally use CodePen – well, I used to use CodePen if I wanted to try out something but I didn't want to be weighed down by the production. But then I made my own separate repo with a very childish name Vue playground. So, now I mainly use CodePen if I want to have an isolated example to share with someone else and like there's other editors, I think, maybe before the changes we'll discuss today had some features that CodePen didn't have available, but CodePen is a bit lighter and faster. So, a lot of times that would be one of my first go-tos.

[00:04:18] Al: Cool. Yeah, I definitely use CodePen a lot to make mock ups and examples that I can quickly share with other people. I use it too, especially when somebody goes, “Hey, how does this thing work?” I can very quickly just like jump into a Pen and be like, “Alright, let's import the things that we need and then go”, and just like start writing stuff. So, I use it all the time for demos and examples and stuff.

So yeah, Chris you kind of explained it a little bit already, but if you want to go into a little bit more, so what was like the inspiration for making CodePen? Like where did it come from? Give us a like quick 30 second to a minute history of CodePen.

[00:05:03] CC: Sure. It's kind of middle aged. It's not like this brand new startup that we're on this podcast to talk about. In fact, next year, we'll be 10 years of CodePen being around. And I've worked on it full time for those 10 years. So, it's real, like real pretty near and dear to my heart, I'd say. It's like an app that has pro plans, and we do some advertising stuff on it. So, it's also like, super, definitely a job. I mean, I literally pay Stephen. Stephen over there, that guy, on the payroll.

[00:05:33] SS: I appreciate it.

[00:05:35] CC: That’s how well we're doing. It's amazing.

[00:05:39] SS: [Crosstalk [00:05:40]

[00:05:43] CC: So, not totally like a spring chicken. It's kind of old and we've gone through so many technological changes. I know, that's not exactly what you asked me. But it's kind of like, imagine 10 years ago, if Vue didn’t exist, we certainly weren't, like, “How do we build this app? Let's use it for client-side JavaScript framework.” People would be like, “What's a client-side JavaScript framework? That wasn't a thing.”

So, this is an app that was Ruby on Rails and jQuery and just whatever we slapped together at the time, and it's also so big. I don't know, if people have a good mental model of other people's apps. But I feel like, I feel like sometimes people are like, way off when you like, “Oh, fresh books, how complicated could that be?” And you're like, “I don't know, here's the answer. Super, extremely.” CodePen has a lot of crap going on. It's very complicated to me. There are a lot of services, just a lot going on. So, as we kind of work on it, it's so cool to still be around and excited about it and building new stuff and have a strong vision for where we're going and have like the technological prowess of a smart team, which, thank God, we have Stephen.

To push this, we can now build a – we’re building a CodePen with more modern architecture, that's awesome. It's not the last time we not the first time we've re architected and won't be the last. We’re nerds. We like to stay on top of that kind of stuff. Where it came from 10 years ago, the real quick story was that I have a blog that I also still have, kind of a believer in the long-term projects, called CSS tricks. So, if you've never seen that, it's terribly a hokey name and it's not just only CSS tricks. It's just the name of my stupid blog. But I write about all kinds of stuff web related, mostly frontend related. There's a CSS bend to it, because I'd like CSS, you know, I tried to stay on top of it. But we'll write about. We’ve articles on Vue. We'll have articles on React. We'll have articles about WordPress, whatever. We just talk about building websites.  As long as I have like, enough expertise in that piece of tech that I can vouch for it, essentially. I don't have any articles about Ember, because I've never once touched it. So sorry, maybe we'll get there, but whatever.

So, I've always had this blog forever. There are tens of thousands of articles on it and I write about frontend stuff, and I always wanted, like, you should be able to read an article about frontend development, and more than just a code snippet sitting there, you should be able to, like see the output from it. In the very early days, it was, “I'm just going to make like an HTML file and FTP it up somewhere, and I'm going to link you to that, and that's my demo.” So, I'm like, “Okay, blah, blah, blah, do this.” But then I'd make a button or probably like an HREF, a link to that class equals button, Vue demo. And you just go to it, and you'd look at it. And if you want to see the source, your freaking Vue source on it if you want to, or whatever.

So, I have demos, and I had hundreds and hundreds and hundreds of demos. This is how you do tabs and CSS. This is how you'd make uneven border radiuses on things or whatever, just hundreds of them. I was like, entrepreneurially about it, right? Because it's always been a little entrepreneurial. I'm going to put ads on them. But I have hundreds of demos, where the hell am I going to put the ads? So, I went back to all my demos, and I made them index.php, instead of index.html.

Now that they're PHP, they can have includes. So, I'm going to put a header on them and a footer on them. And on the header, I'm going to put a logo that says, “This is a demo by CSS tricks.” And then the footer, I'm going to put Google Analytics, because now I can track my Google Analytics and if I ever need to change this crap, because the design of the site changes now I can do that. And then, if I want to put an ad up there, I will. I don't even remember if I ever did. But I had to like invent a way to do demos that didn't suck, that I could put in articles because there was no great way as just a WordPress blog. I can't just like dump HTML, arbitrary crap in the blog. It’s not going to age very well. 

But prior to CodePen, the tools like JSFiddle and JS Bin predate CodePen. They've been around longer, and they're still both around and eventually made embeddable views of them. At the time at CodePen, I was like, “I should probably pick one of these and do all my demos in it, because those apps are like next gen.” That is really super smart. I don't know who's the first person who had that idea was which one was the winner, but it's a damn good idea. The idea is you can see the code and the output at the same time, which is in the world of programming is just necessary to do what you do. We all work all day programming, you got your freaking browser open, you got your code editor open and that's how you work.

So, bringing that into one browser window is pretty cool. I still feel like we're not even really at the cloud IDE level. But we're kind of getting there. Hopefully, CodePen can be part of that story. But I was like, “I should just pick one of these, move all my demos to it, then I can embed them in blog post and the experience for everybody that reads my blog is better.” So, I roped in some friends, and we built the first version of CodePen and the whole point was embedding. It wasn't the website itself, it was putting demos elsewhere. So, that was like the first feature we ever built for it. But of course, you need this full screen experience to actually build the things. So, v1 of CodePen was basically just like a clone of JSFiddle. It's just that we were like young and cocky, and like we're going to do what you do, but better.

[00:11:37] Al: How all great ideas start.

[00:11:39] CC: And then it just was like, the super quick start. This was fun. Look at all these people that like using it, that prefer it. Well, how do we know what cool stuff people are making? Let's make an admin screen that does a database query that's just like, output everything in order. So, we can look at it. And then we'd look at it and be like, “This is amazing. Look at all this cool crap people are making. Maybe we should make that the homepage.” So, we did. It was just just like, output everything in order, basically. And then you're like, “But if we put a like button on it, then we could order them by likes.” But we also have the time to so let's write a decay algorithm that over time, will like not remove likes, but value them less so that the homepage is this algorithmic representation of the coolest stuff on CodePen.

And then we'll add comments, and then we'll track views, and then we'll do this and this and this, and then the algorithm gets more complicated. And then you have to build an off system.

[00:12:36] SS: And then the whole thing became self-aware.

[00:12:38] Al: Yeah. And that is why we now have [Crosstalk 00:12:40].

[00:12:42] CC: What if we do this? What if we do this? We're still doing that, literally a decade later.

[00:12:47] Al: Awesome. Yeah, that is fantastic. I don't think I've ever actually heard the full start of why CodePen started. This is great.

[00:12:55] T: Well, I was going to say as long as CodePen doesn't decide that it loves JSFiddle, and JS Bin and all the other code sandbox type sites, and then they all go off into space together, and we're left alone.

[00:13:06] SS: We're not at that level of self-awareness yet.

[00:13:08] AL: We need to figure out how to embed a JSFiddle and a CodePen in a thing and a thing and just have it be like self-referential, all the way around. So, one of the features that you've introduced recently, in the last year and a half, I think, 2020 has really thrown off my time, understanding of time, is you've made an editor for Vue single file components. What was the impetus for that? What drove you all do that? Because I feel like there were several other editors that came out at the same time, too. I think there was like a Flutter editor and some other stuff. So, what was the inspiration for that?

[00:13:48] SS: I've kind of been the main proponent of Vue for the CodePen team. The UI of CodePen migrated to like a React, Rails, Hybrid, probably three years ago, something like that. So, most of the team is very familiar with React, keeps up with the React ecosystem. But Vue wasn't as known. So, when I came in, I was more experienced with Vue, but coming into React world, and I saw so much of the value of like Vue and the way that single file components work, and that's very much a CodePen-y thing. The HTML, CSS and JS, like seeing all that at one time and we were approached about the Flutter editor and got that up and running. That got us thinking like, how can we make more customized editors for different languages or different processing types, and we had plenty of ideas about about that and we're still evolving that and how that like shapes the future of CodePen. But Vue was one that was very much like the Flutter setup. Flutter has kind of a single file component-ish setup. It's not named anywhere near that. 

But with Vue, the way that you have the template, you have a style and you have the script all kind of baked in there, it made it really easy for us to kind of integrate that as a Vue file, send it off through our processing system as specifically a Vue file and then spitting that back out into into our pre-Vue area. Shortly after that, Vue 3 was becoming a thing. So, we added a selector for Vue 2 or Vue3. And the Vue team, I believe was using some of it for their docs. They're using CodePen overall for a lot of the demos and the Vue editor specifically for some of them. 

[00:15:46] CC: That's right, that was a big part of it, wasn't it? That kind of like, “We got to get this ready, because they said they're willing to use it in the docs.” For any company are like, crap, a lot of people look at those docs. That's like a, we need you, moment. In business exchanges, there's always kind of incentive on one side and the incentive was for us to make sure that that worked, because that's just good for business. Being the docs of a major project, like Vue, yes, please.

[00:16:17] SS: So yeah, we've just kind of iterated on it from there and made improvements and responded to user feedback. And yeah, it’s a pretty sweet little experience for getting familiar with Vue, or just like dropping a Vue single file component into the editor, and having it easily shareable and other other people can use that as a template or adapt it and play with it. It's a very nice experience for single file component.

[00:16:52] CC: In a way, just behind the scenes. It's also kind of a proof of concept for us. I already mentioned, CodePen is super complicated, right? At one level, you could be like, “How easy is this?” You already have a system that takes some code in the processes, and it shows you some output, so like, how hard can it be to just make another one that takes a different kind of output and farts it into an iframe? The answer is, it's not really, some of that stuff really isn't actually that hard. But you have a system that then needs to know what kind of thing you're making, and the data model needs to support all that, and the UI is pretty similar, but it's a little different. Stephen mentioned, it has a drop down to select Vue 2 or 3. Well, that's totally unique to the Vue editor and not the other editor. So, what do you do, just copy and paste the settings modal HTML to make a second one? No, that's ridiculous. Now, you have the technical debt burden of having two different settings modals that you'd have to keep in sync for the rest of your life.

So, a lot of this is like, how do we rearchitect CodePen in such a way that you can do things like that and not have it be such an embarrassing amount of technical debt that you'll freaking never do anything again. Apps that are 10 years old, really can struggle with that, like, it's just an amazing amount of work to just keep it going at all, let alone be nimble, and want to move forward and do new cool things. So, it's that. And like, we take screenshots of Pens. Does this new system know how to take a screenshot of itself even though it's new technology? That's the tip of a giant iceberg of stuff.

So, for like, “Let's do this. Let's do this for the Vue team. Let's make a custom editor.” Not only will it be awesome, and I think the result is pretty good, let’s do another one too. Let's also have a Flutter editor. That way, we're proving out the concept that we're not building a one off. We're not doing something that's just for this one technology. We're going to set ourselves up in making smart choices that can support a variety of technologies.

So, there's just those two editors for now. But I mean, you can imagine, it doesn't take much imagination to see where we might head with that type of technology. But there it is – I think a developer seeing it for the first time, like this is weird, kind of. It's like one input and one output. It's like, you put a single file component on one side, and you see the output of that single component on the other side, nobody like works like that. There's no Vue app in the world, that's one single file component. I could see reacting to that and being like, “Wow, what is this? Why? Why wouldn't I use something where I can have a sidebar full of dot Vue files, because that's how we actually work in real life.” So, like, “Sure, of course, that would be cool.” But remember, the nature of CodePen is very like, it's about constraints in a way. Like the Pen editor of today is like a little place and you dump in some HTML, CSS and JavaScript and people have done that literally tens of millions of times. So, there is some desire to work in like a constrained place and on purpose because people form that mental model, then this is a place where I go to do a little one off thing with no strings attached where everything is ready to go for me, there's no NPM install, whatever that's going to be some minutes in between my idea and what I'm about to do. So, that's what it exists. But at the same time, wouldn't it be nice if you could have multiple Vue files, and that's when you kind of entered the story, Alex.

[BREAK]

[00:20:33] 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:20:48] 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:20:56] Al: Are you telling me you haven't heard of Ionic?

[00:21:00] T: Ionic?

[00:21:02] 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:21:12] T: That sounds too good to be true. How do I know if I can trust it?

[00:21:17] 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:21:29] T: Nice. But what if I need help?

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

[00:21:38] 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:21:53] 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:22:12] T: Amazing. How do I get started?

[00:22:15] Al: At ionicframework.com/vue.

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

[EPISODE CONTINUED]

[00:22:29] Al: Yeah, I think you tweeted something out about like playing with JSX, and you did a weird trick where you can change how JSX compiles. So, for those of you who don't know, there's this thing called JSX and it allows you to in line, like HTML tags into your JavaScript, and then run it through a parser and it will turn it into JavaScript. And there's a way that you can make it work in CodePen or in anything that uses JSX with Vue without needing like the fancy Vue compiler, and when you made that video and shared that trick, I immediately went, “Oh, this actually fixes the thing that I was trying to do.” So, I made it do the thing. I had like a single file Vue component in the regular Pen editor. And then I was like, “Okay, cool. Now I should be able to bring this one into this other one, and like start importing Vue components into each other into different Pens, because Pens have the ability to export their JavaScript as a JavaScript file or something.”

[00:23:37] CC: Well, isn't that how people build Vue applications? It's like your own abstractions of what should be a component. I have a component for my text areas, and I have an image component because it does fancy crap, and I have literally 80 of these things, and then I piece my whole application together with my AD Vue components. Kind of, basically.

[00:23:57] Al: I mean, that's how it works. So, we ended up started talking because of that through various channels. And yeah, I had started making weird tooling to be able to do imports of Vue components, like Pen editor Vue components into other view and editor –

[00:24:18] CC: Which was trickier than it seemed like, right? So, you Vue people you like, a dot Vue file is just – somebody just invented that stuff. Probably Evan, right? I don’t know who invent stuff. That's totally invented syntax. No, that's not native. No, they're not –

[00:24:38] SS: It's based on like web component structure, I believe. [Crosstalk 00:24:42]. There was some spec, I think, back in the day when that was written that it was kind of based on but –

[00:24:53] CC: I suppose. If you picked one up and put it in an HTML file, it will not – it just will be blank, because there's no HTML actually, it's in a template tag. But it won't air. There's nothing invalid about it, I guess. Yeah, it's not as weird as JSX is. It's kind of valid HTML. Anyway, whatever, it's still not really real. It doesn't actually do anything unless you compile it. So, if you're using a Vue file, there has to be a build process, there has to be some crap that processes it into JavaScript somewhere and Vue has its own thing. I don't even know what you call it, but it's a thing, and it goes through the thing, and then it comes out as JavaScript. But that thing, there's like all kinds of options, like it can go through roll up and spit out in some way. But there are options. And I think at the time we built that, we probably didn't even consider that. We're like, “Does it work? Yes. Cool. Ship it.”

Not really thinking about the format that it comes out in, and how useful that might be to somebody else. So, there's one aspect to this that you got to understand that's weird in CodePen specific. We have a “API”, not really not an API that you might think of it. But any URL at CodePen, that's a Pen, at the end of it, you can put dot HTML, or dot JS or dot CSS, and it will look at that Pen and just ship you a raw copy of that thing in that text. It'll serve it at the right content type and all that stuff. It's just like, just give me that stuff raw. So, imagine you make a JavaScript Pen, and then you're going to like use it inside another Pen. Like let's say you just set up a bunch of constants or something because your app uses a bunch of constants, you could then link to that Pen, dot JS, in 20 other Pens, and they all use that same constants file.

That was useful for a long time. Now JavaScript has, yes, six imports, you can just type the import thing. Well, guess what our little dot JS extension works for that. You can just type import constants from and then the URL to a Pen dot JS, and it will just import it as a module. Magic, right?

[00:27:14] Al: Magic.

[00:27:15] CC: But now then you saw that or tried to use that, I think, and I was like, “Nope.”

[00:27:20] Al: I was trying to do that with the Vue editor. And it was like, “No, you can't do that here.”

[00:27:26] CC: Because us, just not thinking about it, output Vue from the thing, which I apologize, I don't know what it's called. It's like a plugin, I guess. I think it just output common probably.

[00:27:39] Al: I think was UMD.

[00:27:39] CC: UMD or something.

[00:27:42] SS: Well, it was running through Webpack, which has essentially no support for ES modules, which was very surprising. But like we dug into it like going all the way into the documentation to try to get Webpack working because we already had Webpack setup. We had the single file, component compiling all working. We just needed to tweak a Webpack setting, right? Just allow –

[00:28:07] CC: Certainly, output format. ES6, whatever. Let it be, because UMD means universal module, right? It's not very universal, though, is it? Because you can't even import it, nor can you import comment. If you're using ES6 imports, and you're writing a statement that says import foo from bar or whatever, it has that JavaScript file that you link to has to have an export statement in it. It has to say export foo somewhere in it. So, like Stephen was saying, there's got to be as Webpack setting. Webpack is notorious for complicated config, but config, right? Surely there's a Webpack setting that's just like turn the switch and then it's output as ES6. But now, it's totally, totally, totally unsupported.

Rollup, though, does support it, and we're like, “Oh, Rollup is going to be amazing.” And then we found it's basically just as complicated as Webpack. But it does have the switch that you can turn.

[00:29:04] SS: Yeah, it ended up being way more complicated than we were hoping for, like, the reputation of Rollup is simplicity and all that. And I think there is an element to that. But a lot of it is abstracted away. So, as you get into it more, you get kind of lost in it, and the documentation is just as bad as Webpack. Just trying to find the right place for things was very, very difficult. My apologies to Webpack and Rollup teams, they're incredible bundlers and they do amazing things, but please invest in the documentation team.

[00:29:45] CC: Vue docs, you know what I’m saying?

[00:29:48] Ar: We do know what you're saying.

[00:29:53] Al: I feel like we've all struggled with Webpack and or Rollup configs at one point or another here. 

[00:29:59] CC: Yeah. So, Stephen finds the right switch, and outputs now in a format in which the output JavaScript says export component from self or whatever. Cool. That's now that cool dot JS format for our URLs has that in it. So, without too much more magic, now at the top of your Vue single file components in the script area, you can right import my map component or whatever, from some other Pen. You can make 20 Vue Pens, and they all import from each other and it's all good all day, which is cool.

There was one little trick is that we not only need to like process that file and make it available for use in other Pens, it needs to work in itself too. It needs to like mount itself and then render itself. I think that was weird, too. Wasn’t it?

[00:30:48] SS: Yeah. So, with the way it's set up, like for just regular Pens, we have like an HTML template that essentially pulls in all the CSS, all the JavaScript and all the HTML and kind of compiles that into an actual index dot HTML web page with the external includes and all that kind of stuff. For Vue, we’re essentially doing that behind the scenes to where Vue is actually coming from a CDN. And then like, there's just a small little script snippet in there that's mounting your Vue component to an app element or something like that. So, with this new setup, we kind of had to adjust that to actually use the ES modules as well. So, it's importing my component from the JavaScript, and then it mounts that using using the typical Vue.

[00:31:36] CC:  Yeah, it's not that weird, I guess. But it's a little weird, because it has to support everything else CodePen supports. So, if you want to use bootstrap, the way that CodePen users are, like aware of using bootstrap as you open the CSS settings, and you type B, O, O and then it populates to bootstrap and you press return, and then now that's just available to you. Well, you don't have to like write that into your view, single file component, we just like, bunk it onto the page for you. We just put a link tag in the head that has bootstrap and then it's just available to you.

That’s one of like many features that do something similar on CodePen. For example, there's stuff forehead section on CodePen. That's weird, but in a Pen, not a Vue Pen, on a regular Pen in CodePen, you don't write the full HTML document. Did you know that? You just write what's in the body. So, you just write like div rock and roll and we know to like, put that into a fuller HTML document context. The point is just to save you some time. That's the point of using CodePen. I don't want to write doctype, open bracket, exclamation point, HTML doctype. It’s just boilerplate crap that I don't want to write or see.

[00:32:55] Al: Every time that I have to, like, open up a blank file and go, “How does this start?”

[00:32:59] Ar: I literally can't remember the last time I actually typed that, like, it was years ago. 

[00:33:06] CC: You could even make like legit mistakes, like the HTML tag really needs to have a Lang attribute on it, like break stuff.

[00:33:14] Ar: Try to remember, like the format for that reason, I was like, “I know like there's a Lang thing in there somewhere, but what is that again?”

[00:33:20] CC: Where is it? Is it in the body?

[00:33:22] SS: Language, yes.

[00:33:26] Al: Yes. I have language, yes.

[00:33:27] CC: So, we put that in there. But some people might be like, “Well, that abstract is too much for me then.” What if I want to put a meta, there’s a new feature called accent color on the web? We've seen that, you throw a meta tag in the head, and then on your Android browser, makes the URL bar orange or whatever, just like, whatever. It's the new thing.

So, if you want that on your Pen, because you're going to deploy it or whatever, bring it somewhere, where do you put it because you can't put it in the HTML editor, because that'll end up in the body and meta tags aren't valid in the body. So, whatever. Since the beginning of time, we've had a little special setting where you go into your HTML settings, and there's a text area and it says, “Stuff for head”, and you just put stuff in there, whatever you want. And we'll put it in the head for you. So, like that needs to work in the Vue editor too, just because that's a CodePen thing and whatever. So anyway, that was a long-winded way of saying something not very useful. But that even works in our Flutter editor.

[00:34:32] T: One thing I'm curious about is I think I remember, like the way that Vue compiles with Webpack, there's some kind of safeguard there for if you have a circular dependency, what happens if you have a circular dependency with your CodePens?

[00:34:46] CC: Are you suggesting crossing the streams? 

[00:34:53] SS: If you forget my component from this file, like the Pen itself, I think our servers might explode. Yeah, I’m not positive on that one.

[00:35:01] AR: So, who’s going to try? 

[00:35:08] T: Wait until after the episode comes out.

[00:35:10] SS: Please, yes.

[00:35:10] CC: They run in a lambda, just in case you're – so, we take your code and we have a little AWS lambda whose job is to spin up real quick, run, roll up and give us back the crap. So, if it does literally cause an infinite loop, which it absolutely might, I have no idea, then just that lambda will die, and you won't get a response, and you'll have bad UX, but it won't – unlike the early days of CodePen where it was the web server itself, which might crash, which was an incredibly stupid thing to do. But that didn't last very long. But eventually, we did start, for example, will run your SaaS and will will run your less and will run all these other languages where you were on other servers. It was wasn't long in Code Minister, we started breaking off those services into their own servers. But still, you could, there's one dedicated server for SaaS. So, one bad actor on that server that managed to do an infinite loop might actually screw up SaaS processing for literally everyone trying to do that. [Crosstalk 00:36:10].

Those days are long behind us. You'll only mess up yourself today. But it is fascinating. Of course, you could do that. One imports the other and that one imports the other.

[00:36:25] SS: Yeah, because it's going through roll up, and it's using ES modules, I think you would only get into an infinite loop on the client itself, like the client itself would error out in some capacity.

[00:36:37] Al: So yeah, it would probably be up to the browsers and how the browsers are handling circular dependency.

[00:36:40] CC: Yeah. You’re right, because it doesn’t – it just leaves it alone. That’s how I thought of it while we working on all these projects is like, “Where the hell is the leave this file alone button?” I know, we need to send it through your processing. But like there's an import statement right there. Just leave it alone. That's all I'm asking you, Webpack. Just leave it there. 

[00:37:01] SS: Please. Please.

[00:37:02] Al: Anybody got any final questions?

[00:37:05] Ar: Not so much a question, but a feedback. I believe very strongly that the script tag should go on the top. I mean, you even said script tag at the top, but it's not. So, I'm going to leave that out there.

[00:37:20] SS: So, in the Vue single file component, like default template, you want the script at the top?

[00:37:27] Ar: I do. It's a very controversial subject, but I'm right.

[00:37:31] SS: I think the style needs to go at the top, personally.

[00:37:35] Ar: Blasphemy.

[00:37:37] CC: Does anybody ever get [Crosstalk 00:37:37] or template at the bottom if you're from React, like there's all this crap at the top, and then generally at the bottom of React components is where you finally get to the HTML part. So, I could see that being a –

[00:37:52] Ar: I guess, for me, it was literally the context in which you said at the top of your file in the script tag. Imports, imports to me just belong at the top of a file.

[00:38:02] CC: They do. I'm a total convert. You've convinced me.

[00:38:07] Ar: Yeah. We have the script tag in the middle, but my imports aren't at the top like, what crazy world is this?

[00:38:13] CC: Isn't all of the state that you set to, feels like should be at the top before you actually use the state?

[00:38:21] Ar: Yes. You get it.

[00:38:23] CC: I do get it.

[00:38:24] Al: Ari’s crusade for script tag at the top, it continues.

[00:38:26] CC: [Crosstalk 00:38:27]. It literally changed the world, depending on what's in the Vue docs?

[00:38:33] T: In the style guide, it has said script first for about two or three years now.

[00:38:38] Ar: Because I will say the person who wrote the vast majority of the Vue 2 documentation was a proponent of script at the top.

[00:38:49] SS: Okay. I learned Vue like three or four years ago, so the old style is still embedded in my head. So, it's going to stick with me.

[00:38:57] CC: I think we can make this – is it doing it now?

[00:39:01] SS: I'm perfectly fine to it. 

[00:39:03] CC: You think I could tell Stephen what to do, but I really can’t.

[00:39:08] SS: Wait, we don't have blocking commits here. So, I'll just sneak it back out. But yeah, I'll look at the Vue docs and see the latest there. Because if that's the recommended, now I'm like, “Let's go for it.”

[00:39:20] Al: Find Ari's account and just change the template just for her accounts. She sees it that way.

[00:39:27] SS: Yeah, you can totally edit that, like in your Pen itself, like it should still totally compile.

[00:39:33] Ar: It does. I tried.

[00:39:33] SS: That’s just the default.

[00:39:35] Ar: But it was really annoying to have to hit Command X and then Command V.

[00:39:42] SS: Well, have you heard of CodePen templates? This is a little-known feature that's like –

[00:39:46] Ar: I’ll just make my own then.

[00:39:47] SS: Right. So, you can set up any Pen as a template and just use that over and over again. So, like our Vue editor has a whole bunch of like boilerplate kind of stuff in there, app styles and basic template, just so people who are unfamiliar with Vue can get like a little preview of what Vue does. But that's kind of annoying if you like know what you want to do and want to type it all out or you have like a basic setup that you want, you can set that up just in a regular Pen, there's a template setting that you can set, or you can just URL hack it to make a template and go from there as as your Vue base.

[00:40:24] CC: It’s like dependent or it doesn't have anything? If you just go to slash/pen at CodePen, it's just blank. But the Vue editors, like it's so specific about what a dot Vue file is, that I think it'd be weird to get dropped there and have it be blank, wouldn’t it?

[00:40:40] Al: It's a much better experience to have stuff in there. It's more like bringing up the hello world Vue app that everybody gets when you start Vue CLI. So, it’s definitely the better way.

[00:40:51] CC: It doesn’t seem very controversial. Seems like it'd be weird to do it in other way.

[00:40:54] Ar: Yeah, I feel weird every time I make a new component, and it's a blank file and like, what is this? 

[00:41:02] SS: [Crosstalk 00:41:02].

[00:41:03] Ar: But I finally caved and made a snippet, just do my default stuff.

[00:41:08] CC: Is it just one file is nice, too. Us slumming over here in React land, we got to make a folder, and then our how style guide is we make an index dot JS file that does nothing but export the name file, that way you can do your import statements look nicer and other files, which to me is just bananas that we have to have a code base just full of these useless index.js files. But whatever, that's what we decided, not salty.

[00:41:36] Ar: Apparently, that's not just a React thing. I know that the back end where I work, our node has a lot of that, which was like a new concept for me. So, I guess now I know maybe it came from React.

[00:41:48] CC: I don't know if it does or not.

[00:41:50] SS: They're not completely useless, because if you get it wrong, it will break and very obscure, hard to decipher ways.

[00:41:57] CC: So, not only do you have to make that file, but then you have to scaffold the component itself. And then because it's React not Vue, we have a separate file for the CSS and then, so like we don't just get a code snippet is insufficient. You need like an editor level snippet that scaffolds the whole damn.

[00:42:13] Ar: Man, I am spoiled.

[00:42:15] CC: You are spoiled. 

[00:42:16] Ar: Complaining about making a snippet in VS code. I had no idea.

[00:42:21] T: I worked on a few app once that did the whole index dot Vue thing. It was super fun trying to find which index dot Vue you wanted or which table dot Vue you wanted, because l table dot Vue under which folder. 

[00:42:34] Ar: No.

[00:42:35] CC: You think this should help a little bit because you type the name at least you get the folder autocomplete. But I don't know. This is probably like tabs versus spaces, holy War, all along.

[00:42:46] SS: Yes, we’re walking into it.

[00:42:48] T: No, the style guide actually has an opinion there too, on how you should name the files and it is not by using folder hierarchy.

[00:42:55] Ar: Flat structure. So, eventually you just scroll a lot in your project.

[00:43:01] CC: I like folders and flat. Why can't it be a flat directory of folders?

[00:43:07] Ar: I feel like there is a time and a place where you really should have a folder for things that are really just related to this one specific thing. You don't need to know about that stuff, unless you want to know about that one specific thing. But yeah.

[00:43:21] CC: I’m going to teach you about folders right away because it always freaks me out if kids don’t know what folders are.

[00:43:28] Ar: Oh, my god. Yeah, I haven’t thought about that. Because yeah, iPhones don't really have folders. I mean, they kind of do but not really.

[00:43:36] T: Okay, I couldn't tell if you're talking about like physical folders or digital.

[00:43:39] Al: It's like your drawing paper but it's for holding them in you put it inside of it.

[00:43:48] CC: We did what is an envelope last night so I can use that as a metaphor.

[00:43:53] Al: But is it a sandwich or is it a taco? Is it a paper taco?

[00:43:55] T: I was supposed to add, is a folder a sandwich?

[00:43:58] Ar: Paper burrito. 

[00:44:01] SS: That’s an envelope. [Crosstalk 00:44:03].

[00:44:04] CC: I thought the licking will be the fun part, but she just licked the same spot over and over. I'm like, “Oh, you got to go. You got to do the full, the whole top.”

[00:44:14] Ar: And then you write paper cut on your tongue, the worst.

[00:44:18] Al: Alright, so Stephen and Chris, where can people find you on the internet? Chris, you first.

[00:44:23] CC: Well, I use my full name everywhere. I know, controversial. Chris Coyier is my name. I own that dotnet as my personal website, which is a bit of a portal to everything else I do. So, just to not confuse things, I'll leave it at that, chriscoyier.net.

[00:44:40] Al: Cool, Stephen?

[00:44:42] SS: So, most of my handles are @shshaw. That's just shortening of my name, but most places just Shaw. So, I also run an educational web series called Key Framers with David Khourshid and we do web animation tutorial kind of stuff. We do live streams and have some content related to all that. We use CodePen for kind of live coding stuff, and it's pretty fun. You can find that keyframe.rs.

[00:45:14] Al: Awesome. All right, well, now it's time to move on to this week's picks. Tessa, do you want to go first?

[00:45:22] T: Yeah, I can go first. My first pick is the Samsung Galaxy Buds Live. I think I haven't picked these before. So, I like them a lot, because they are wireless earbuds, but they don't have like the little silicone tips or anything, although you can get little silicone socks for the bottoms, which I maybe have mentioned before the socks. It's nice if you don't need noise cancelling because you don't have so much of the feeling of like there's something blocking my ear canal. My second pick is Among Us, which I have picked before. But we are currently in the week before the new map, the airship map drops. So, I'm super excited for that. So, that's pick number two.

[00:46:10] Al: Cool. Ari, do you have pics for us this week?

[00:46:12] Ar: I have a pick. I don't think I've picked this on this particular show before. But if I have, I don't care. I think some people know that I was on a different podcast in a different life. But we don't speak of that podcast.

[00:46:25] T: Completely forgot.

[00:46:31] Ar: Podcast that shall not be named. But my pick is a show called Derek which you can find on Netflix. So, imagine they did the Office but in a nursing home with the nursing home staff. It is truly one of the best shows I have ever watched. It will make you cry and laugh immediately after in a way that feels so human. That if you have not watched it, you are literally missing out on life. So, you should definitely watch Derek on Netflix.

[00:47:04] T: Is this also Ricky Gervais show?

[00:47:04] Ar: It is.

[00:47:05] T: I only like laughing like a robot.

[00:47:09] Ar: Well, maybe this isn't for you, Tessa. So, that's okay.

[00:47:14] Al: Chris, do you have any picks for us?

[00:47:17] CC: I like that we all do TV, almost. That's fun. I have an Apple TV. So, I did the free trial of the Apple Plus or whatever. So, there's a handful of shows that are unique to it. And there was one, I was just at work in the middle of the day and I flipped it on, and there's a show called Calls, just C-A-L-L-S. I was like, “What is this? That's weird. It's only 15 minutes long. I'll watch that because that's about how much time I have.” It is like audio only. So, it's like a TV show that's only on Apple TV, but there's no video. There is but it's real minimal. It's just like a line between two names that has like the audio waves, almost like in Zen Caster here. It's two people talking to each other. But it changes who's talking to each other and it's a story that unfolds and it was so scary. In 15 minutes is broad daylight in my office. I'm kind of a wimp about horror, anyway, but it ended up being kind of horror, like thriller and I was like dead scared like noon on a Tuesday. It's like freaking scary. So, if you happen to have Apple TV, I know that it's like a barrier to entry there and Apple land but I found it pretty good. But on Netflix, so kid likes waffles and mochi that new like Michelle Obama Food Show is like, really good. 

[00:48:41] SS: Yeah, that's a good one.

[00:48:43] Al: Cool. Stephen, do you have any picks for us?

[00:48:47] SS: Well, I do want to hear more about these earbud socks were recommended.

[00:48:52] T: So, the ear bud is shaped like a bean, and so it's like just a little silicone sock that covers the bottom half.

[00:49:01] SS: Okay. A bean sock.

[00:49:02] CC: So, it fits better, maybe?

[00:49:04] T: Yeah. The idea is if they don't quite fit in your ears, I guess it adds a little bit of bulk and friction. And also like, the joy of putting little socks on your ear buds.

[00:49:16] SS: And you can wash them, hang them up on tiny clothespins. For my pick, my wife and I just finished re-watching the Last Man on Earth, which was a 2015 TV show, I forget what network it was on. But it's Hulu. Fox? Yeah, hey, that's at the beginning of every episode, but it was a very premonition show the like, virus spreads throughout the earth and this guy's kind of left on his own. So, it kind of has all these themes of like isolation and pandemic and like, but it's framed in a comedy, but it does have a lot of like emotional depth to it as well and amazing actors like Will Ford and Kristen Schaal. January Jones, Jason Sudeikis. It does get a little heavy at times. So, probably pair that with the other Jason Sudeikis is show Ted Lasso, highly recommend that on Apple TV Plus. That's a much more uplifting show, but the Last Man on Earth, hilarious, very, very enjoyed.

[00:50:13] Ar: It definitely it different watching it after living through a pandemic because like I've watched it several times before, but it hit different.

[00:50:24] SS: Yeah. There was an interview with him, with Will Ford after 2020 started really happening. And he was like, “Yeah, we regret some of the jokes we made”, because it was just so accurate. And like seeing actual nurses wearing like protective equipment with like trash bags and things like that, which was like some stuff they did in the show like it was. Yeah, it was wild. Yeah, it's very good show. Cancelled probably a little too early. But it does have like four seasons, so it's worth checking out.

[00:50:53] Al: Awesome. Cool. So, my pick for this week is I have convinced my wife to start watching Star Trek: The Next Generation. She has never seen Star Trek. So, for those of you who also have never seen Star Trek, there is a website that has a really excellent list of episodes, you need to watch. So, they have a small list of three episodes where they're like, if you just want to taste of Next Generation, here are the three episodes that you want to watch. It'll give you a nice, like, taste of what the show is like. If you want to watch a little bit more, you don't want to invest in the entire seven seasons, here's 20 episodes you should watch. And these are like the really good, really solid Star Trek episodes. And then here's the list of all seven seasons and everything that you can skip.

[00:51:50] CC: Dude, look at season one, you can skip like 90% of season one.

[00:51:53] Al: Yeah. So, season one, you watch the first episode, and then you skip 18 episodes and then you watch another episode. And there's like out of 26 episodes and like the first season, you watch five.

[00:52:06] Ar: This is not selling it for me. I have to say.

[00:52:08] Al: Yeah. Season one and season two of Star Trek: Next Generation, terrible. You got to work through those. It gets better around season three.

[00:52:19] SS: It was made in the season of like TV where filler episodes were very much a thing and like you had to have a certain number of episodes per season. So, like there was a lot of padding.

[00:52:28] CC: I don’t remember what the bottle episode is. You remember that term where it's like no –

[00:52:32] T: Oh, no. Not a bottle episode.

[00:52:34] Ar: I just watched the bottle episode on community last night.

[00:52:41] CC: Wow.

[00:52:41] Al: But yeah, if you are wanting to introduce someone to Star Trek, this is a very good list. My wife has not gone off screaming yet. She does scream at the TV quite a bit about how things are wrong, which is good, because that's how you should watch Star Trek anyway. And so yes, that is that is my pick this week.

[00:53:00] T: I just want to say I find it very amusing that you traded your wife watching Bridgerton for let's skip 90% of Star Trek.

[00:53:14] Ar: I feel like maybe that wasn't fair for you.

[00:53:18] Al: I am enjoying Bridgerton more than I thought that I would, so –

[00:53:21] Ar: Don't admit that outloud.

[00:53:23] Al: Sorry. I did not admit that I enjoy Bridgerton darling, please. I don't think she's listening. It's fine. Cool.

[END OF EPISODE]

[00:53:34] Al: That's all for this week's episode. Thank you to Stephen and Chris for joining us on this week’s episode. If you aren't following us on Twitter, head on over and find us @EnjoyTheVueCast. Be sure to subscribe to the show and if you have some time, leave a review, it really helps and makes it easier to find us. 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]