Latest / The Laravel Podcast / Mix, with Jordan Pittman

Transcript

Mix, with Jordan Pittman · The Laravel Podcast

• Matt Stauffer: Welcome back to the Laravel podcast season four, today, we're talking to Jordan Pittman about Laravel Mix, the front-end compilation, concatenation, mangalation, module packed nation tool, stay tuned. All right. Welcome back to the Laravel podcast season four, today we're talking about Laravel Mix, which is a front-end focus tool. It's what we're using for bundling our JavaScript and everything like that. I've got Jordan Pittman with me who has been doing a ton of work with upgrading laravel Mix to Webpack four, and now soon to be Webpack five. So before we get into anything else, Jordan, could you say hi to the people? And just again, my normal thing, if you meet somebody in the grocery store and they say, "So what do you do?" How do you answer that question? Jordan Pittman: Hi. My name is Jordan Pittman, I am a developer. But if I was going to meet someone in a grocery store, I typically just say, "I work on computers. Yes, I can fix your printer." Sometimes. But I work on websites. I work on apps for people and companies, and it generally boils down to the kind of person that I'm talking with. But generally it's just, I work with computers. Matt Stauffer: And if you were talking to a Laravel programmer and they were saying, "Well, what in particular do you do relative to your other average Laravel programmer?" What's your answer? Jordan Pittman: So I would say I build custom platforms for our clients. I work for a company called Cargo in Greenville, South Carolina. And we do stuff for several large businesses, like we help them market to small business. That's our niche. And so we do stuff for Mercedes and for Lenovo, we've done stuff for Microsoft, for Intel, for 3M. So several people. And I typically attend to work on more of the custom platform solutions. So we have a handful like marketing stuff, we do marketing strategy, whatever. But when I can, I work on architecture and I work on basically, "Hey, we need something custom to suit our needs." It's not a brochure site, but something more advanced. And that's typically what I focus on. Matt Stauffer: Yeah. Okay. That makes a ton of sense. And so, because we're talking about something front-endy today, it's helpful to know, what's your background? Do you come from more of a background.... Like, where were you before you were in Laravel? Jordan Pittman: So, I probably started more backend, honestly. Because I've been doing this for 15-ish years, I think. Something like that. And so I remember like... When I originally started it was HTML, CSS and JavaScript. And then I got into PHP, back in the early days of PHP 4.1 and 4.2. And I remember using CodeIgniter, I used CakePHP. I remember building sites that didn't have a framework at all. And so that's where I started. And then I got more into the world of working with JavaScript and more interactive stuff. And I just threw myself into that. I threw myself into trying to work on design work as well, like in Tandem. And I found this niche for me really, where I like being full stack effectively. Where I handle backend and front-end because I think about, "Oh..." Like I'm doing the front-end work, I think about things that some people wouldn't think about necessarily. And so I ended up just throwing myself into that. Matt Stauffer: I love it. And for anyone not familiar, I'm going to give just a real quick introduction to what Mix is and then I'm going to throw it over to you for the five-year-old explanation. So in its simplest form, Laravel Mix is a tool to help you compile and manipulate and mangle and bundle your front-end assets, usually in Laravel about apps. And it's sitting on top of another tool called Webpack. And Webpack describes itself as a module bundler, which makes it sound a little bit like all you're doing is concatenating things, but there's a lot more going on. So again, Mix is a configuration layer, convenience layer, a convention layer on top of Webpack. So Jordan, you're talking to a five-year-old, whether or not in the grocery store, how do you talk about Mix? What is Mix and what is Webpack? Jordan Pittman: Mix is basically like you're making sandwiches, you're making food, but for computers. So you have these layers of stuff that you give it. Let's take a banana and mayonnaise sandwich, which is the greatest sandwich on earth. You have bananas, you have mayonnaise, you have bread, you have a knife, you have the manpower or woman-power that you've got working on making the sandwich. So you basically take these ingredients, you put the bread down. These are the files that you give it. So you take the bread, you put the bananas on there, you put the mayonnaise on there. You put more bread on there. Mix is basically the knife, the person doing the job. And the files that you give it are the ingredients. And then the thing that you get out, the sandwich, that's your bundle. But like you said earlier, a bundle is not just one thing. It can be multiple things. So if you're cutting a sandwich, that's pieces of a bundle. And it could be any shape you want. It could be dinosaur shaped. It could be a dinosaur princess. Matt Stauffer: Oh my gosh. My daughter is now not allowed to listen to this episode because otherwise that will be everything she wants for every sandwich ever. "Okay, dinosaur princess sandwich, banana and mayonnaise sandwiches." Jordan Pittman: You're welcome Matt's daughter. Matt Stauffer: That was good man. I like that. Jordan Pittman: That's what it is. It's basically, you're making a sandwich, you're basically putting things together. And what does every five-year-old know about? Food. Matt Stauffer: Yeah. No kidding. And being very picky about the shape of their sandwiches. It turns out. I love it. Yeah. Okay. That was good, man. You said Mix is the knife? Jordan Pittman: Mix is like the knife, it's the thing that's doing the job. So part of that is the knife. You could also be a representation of Mix because you're doing the job. So you're giving it stuff. And so the act of actually taking that and turning it into something that you want to eat or use. So you give the browser something it needs, that's the bundle. But the act of actually doing that is what Mix does. Matt Stauffer: Okay. I like that. And in all of our circumstances, the person who's defining what should happen, the creator of the Mix file, the person who chose how to implement this is Jordan Pittman. Because of course a banana mayonnaise sandwich could not come from anywhere else. So very clearly that analogy is all about how Jordan Pittman is in all of our computers running Laravel Mix for us. That's basically it. Okay. Got it. Jordan Pittman: Absolutely. Matt Stauffer: All right, cool. So, Laravel Mix. Let's talk about it from a perspective of somebody who has not used asset compilation before. So let's say I have been writing handwritten CSS and hand-rolled jQuery and JavaScript. And I spin up a Laravel app.... A PHP program. I spin up a Laravel app and I'm like, "What is this resources/ whatever.JS and when I make changes here, why doesn't it show up? And then somebody told me about webpack.mix, like "What's going on here and what is this thing?" So could you explain Mix for somebody in that context. Jordan Pittman: Mix is basically a fancy way to say, "Hey, I want to write modern Java script. I want to write modern CSS. And I don't want to care about what the browser support is for the most part. I just want to write stuff and I want it to work. And if it goes all the way back to IE11, shudder, it will. And so, you have this basically set up that you have to deal with. You have a workflow change. You can't just edit something in the public folder, because it will get overwritten. Or if you edit something here and you're not running your watcher, and you're like "What's happening? It's not working." So there's this tooling hurdle that you have to get over. Thankfully, Laravel documentation makes that incredible. And so it's like, you run this watcher in the background. Either you install your note dependencies, you run this watcher and the goal is you just write your code and it just works. Matt Stauffer: Yeah. That's the goal for everything, right? Jordan Pittman: Absolutely Matt Stauffer: Write a really simple syntax in the API, hit the button and it just works. Jordan Pittman: Absolutely. And you can use modern features like async await and generators. And if you go to CSS, you can have PostCSS plugins for variables or whatever, all kinds of stuff. And webpack and Mix on top of that, give you the power to do this. Matt Stauffer: And if we're coming from a jQuery background and we use jQuery because of the fact that.... It does get as an easier syntax, but also one Of the things it does is standardize across browsers. That's a very understandable appeal there. So if you were to, I don't know if you know off the top of your head, but if you were to open a brand new Laravel eight app and take a look at the Mix configuration file, first of all, what file is that? And second of all, what is Mix doing for us out of the box without us having to configure anything? Jordan Pittman: So the file is webpack.mix.js, and it compiles JavaScript, and it compiles PostCSS out of the box. And so you can find those in your resources folder, resources JS, and resources CSS, and automatically applies more modern JavaScript style, like async await and generators and all that. And then for your CSS it applies autoprefixer: false and gives you a convenient place to add additional plugins. Like if you're using Tailwind. Matt Stauffer: Right. That's great. So the JavaScript is being run through a tool called Babel. We're still using Babel, right? Jordan Pittman: Yes. Matt Stauffer: Okay. So it's being run through a tool called Babel that allows us to ensure that we're getting that backwards compatibility. I assume it's also being minified. Is there anything else that's going on in the JavaScript or is it just those two? Jordan Pittman: So it gets minified in production. It generates source maps. If you have it configured, it does asset resolution if you're importing files. So in a JavaScript file, you can actually import CSS files with the right settings. And it will just insert it into the document when the JavaScript loads. And Webpack does all of that. Matt Stauffer: So we can talk, if we have a moment, I don't know if we will, we can talk about source maps and we'll definitely talk about the production flight later. But let's talk about PostCSS. So a lot of people don't know what PostCSS is, and we can talk about that in a second. But before we do, what is happening to the CSS? You mentioned Autoprefixer, which is the same idea as Babel for CSS. It says, "If you're using one of these advanced features, we're going to look at whatever your supported browser set is and then give the prefixes." Are there any other things that is running on the CSS by default that you know? Jordan Pittman: By default I think it's just Autoprefixer, but you can add with a PostCSS config, postcss-preset-env and that will take your browser list and your package.json if you have one specified, I'm not quite sure what the default is and say, "Alright, I want to write modern CSS. And basically turn it into something that's generally supported in most browsers." Matt Stauffer: Yeah. All right. So if I were to go into public/js/app.js and public/css/app.css. I'm sorry, not public resources/js/app.js and resources/css/app.css. If I configure those things, it's not actually going to be served directly from that resources directory, right? Jordan Pittman: It will not. Matt Stauffer: So what does the process look like for me to get those changes made? Let's just say I have a brand new Laravel install, I haven't done anything else, just Laravel new, whatever. And then I go in and I add a couple of lines to public/css to set the background to turquoise. What does it take for me to get that to actually show up when I'm serving the site? Jordan Pittman: If you have a new install, you want to run a Yarn to install your node dependencies, so you only need to- Matt Stauffer: You use Yarn instead of NPM? Jordan Pittman: Absolutely. Matt Stauffer: Really? Jordan Pittman: Yes. Matt Stauffer: Okay. We're going to get there in a second, I'll take a note. We'll talk about that. You could either run NPM install, which is what I do, unless you convince me otherwise, or Yarn. But somehow you're going to install your node dependencies. Wow. Okay. We're talking about the Yarn here. Alright, keep going. Sorry. Jordan Pittman: So you run Yarn or NPM install. And after you've done that, you do it once, and then whenever you need to update stuff, you run Yarn or NPM dev or watch, and that will compile the files and put them in the public folder. And at that point you can actually load up the Laravel app and see your changes. Matt Stauffer: So with Yarn, do you have to type, run? Is that what you're saying? Jordan Pittman: You don't, actually. Matt Stauffer: Okay. So with NPM, it would be npm run dev or npm run watch. The difference between dev and watch, could you talk about that real quickly for us? Jordan Pittman: Yes. So dev basically builds it from start to finish and then it's done. Watch will actually basically build it and it'll sit there in the background, watching the files for changes. So if you're working on stuff and you change the background of turquoise and you look at the page, it's turquoise. But if you have the watcher running and you change it to red, it will recompile and then you reload the page and the background will be red. And that works for JavaScript as well. Matt Stauffer: Yeah. Watch is nice as you're going to be doing any changes as you go rather than just a one off thing. Jordan Pittman: Absolutely. Matt Stauffer: Okay. So if you do that, it will do all the compilation steps and then I'll output them into public/js/app.js or public/css/app.css, which is why you don't want to be editing those files in public anywhere, anytime. Because I've seen that happen before, because the moment somebody runs that it's going to wipe all your changes, plus you're not getting any of the benefits of Mix when you do that. Jordan Pittman: Guilty. Matt Stauffer: Yeah. Okay. So that's the basics of what it looks like to be a Laravel programmer and getting the availability to us for just the baseline of what Laravel Mix does. So the next step I always go to here is when is the last time you've used this? And it's obviously that it's something you use a lot, but I would just be curious for you. Are there ever applications when you don't use this or what does it look like for you to use Mix in anything other than the most standard ways? So conscious, when I ask you that question, what pops to your mind? Jordan Pittman: So I use Mix every single day. In fact, I probably have a watcher running almost 24/7 on my laptop. I turned the watcher off before we started the podcast, just so my fans didn't spin up. Matt Stauffer: Yeah. Got it. Jordan Pittman: And I've used Mix outside of Laravel projects. I've used Mix in like a fully Zen framework app before. And it's fairly simple because all you have to do is basically some additional pieces to configure it. And if you follow the layer of all convention for resources, it generally just works. Matt Stauffer: Nice. Yeah. And that's the best part about it. I wrote a blog post about how to use Mix outside of the context of Laravel, but it's a little bit out of date. So I don't know if I would actually recommend people to go there, but it's pretty easy to set up. The only thing you really have to do in that context is just configure if you want your paths to be any different than the default Laravel paths. And if you don't, if you're willing to make this other project just use Laravel default paths, then you basically don't have to do anything. Cool. So, I want to think about when you see people using Mix, what are the most common things that they do that are outside of just those two standard things that we just said? So if someone were to go in and actually make a modification to their Mix file, what do you think the most common thing is for them to do? Jordan Pittman: I would say probably changing CSS URL processing. That is especially if you're using SASS, that can bite you. And I've had that problem a lot where. And Mix gives you a really good escape patch. So it's Mix options. And then you can turn off process CSS, URLs. It's super handy, but it can also slow down your build a lot if you're not careful. And so that's one of the biggest things that we've had, like I've had at work that everyone that I work with has had that we- Matt Stauffer: More common at some point. So interestingly, that was more common in the past, I think because SASS was the default CSS compiler and in Laravel eight, it's not anymore. So the good news is you don't need that if you're not in SASS, right? Jordan Pittman: Well, it's still technically does some stuff, but I think it's less of an issue if you're not using SASS. I think it causes less slow down and less problems technically. Matt Stauffer: Okay. So outside of that one fix, because that's obviously almost a bug fix, what do you think is the most common of my freewill? If I were to modify something, Jordan Pittman: TypeScript. Matt Stauffer: Okay. Let's talk about it. Jordan Pittman: TypeScrit. If you're using TypeScript, Mix has TypeScript support. So you can do like mix.ts instead of mix.js. And that's a big thing. Before the default was PostCSS, that's one of the things that I saw a handful of people do that I would do for any new projects. They would change it from SASS to regular PostCSS. And then, even if we are using SASS, you can add PostCSS plugins on top of that. And so like Tailwind, it's a PostCSS plugin. So regardless of how you're using it through SASS, through LESS whatever, that's a really big thing. You would configure it to add PostCSS plugins to add Tailwind. Matt Stauffer: Yeah. That's definitely the most common thing that we do at Tighten. Is we go in and we take it, we take out SASS, we changed it to PostCSS, because we haven't written SASS in ages. And then we add the PostCSS plugin or the Tailwind PostCSS plugin, which you can get the instructions for that on the Tailwind website. So there's a lot of other things you can do other than the things that are most commonly used. There's all sorts of simpler things in compilation and combining JavaScript files and stuff like that. There's so much more complicated things like Hot Module Replacement and code splitting, but let's stay at the simpler right now. So we're going to get all the things we described in terms of JavaScript and CSS and stuff like that. Matt Stauffer: Let's talk a little bit about a few of the other things that are most common for people to look for. One of which is versioning concatenation minification. So we're getting concatenation by default with most of them, unless you use Mix or combine or something, but let's just ignore that right now. Let's talk about minification and versioning, because those are often things that happen purely in their production context. So could you talk to us a little bit about what is minification like, what is versioning like and what does it look like to do things differently for your dev build versus your prod build when you're working with Mix? Jordan Pittman: Okay. Mix supports this idea of versioning assets. And what it will do is it creates what's called a Mix manifest and it maps the files that you import, your entries, your JavaScript file your CSS file that you specify in your webpack.mix file to basically that file name with a query string on the end of it. That query string serves as a cache busting mechanism. So whenever you make changes, it reads the new file name. It says, "Hey browser, this has changed." And so it basically forces, if you will, the browser to go request a new file because something about it has changed. And that is typically only done in production. You can actually do it in dev if you want but it's a little finicky. But if you use the Mix helper, it doesn't matter, it handles all that for you. And then additionally on top of- Matt Stauffer: When you say the Mix helper, let's just real quick say you mean the Laravel helper that's available in your blade templates. Jordan Pittman: Yes. Matt Stauffer: Can you tell us about that helper real quick or do you want to get back to.... So you can do... Okay. Jordan Pittman: Absolutely. So Laravel has a helper function that you can use in blade templates, that's called Mix and you pass it a file name. And all it does is it reads out your Mix manifest and converts the file from whatever the file name is to whatever the manifest has specified it to be with the query string on the end of it. It does some other fancy stuff if you're using Hot Module Replacement, which we will get to. But effectively it pre pins your local host and port on top of that, if it needs to. So back to the production build, you also get minification. And so you have minification of JavaScript and minification of CSS. Jordan Pittman: And this only happens in production because minification can be a very time consuming and CPU intensive process and you wouldn't want to run that repeatedly over and over and over again. The goal there is it should never be any different. If you're using something like Tailwind, it actually detects a production build and will purge your CSS for you, if you have it configured to do so. And so your CSS output will be different than your dev output. But as long as you've configured purge CSS correctly, or the purge options correctly, that will handle that and you shouldn't see any difference. Matt Stauffer: Yeah. So how do I tell Mix that I want to production build in my assets Jordan Pittman: Yarn run prod or NPM run prod, and that will kick off a production build and stick them in the same place. File names are the same, it'll update your Mix manifest file. Matt Stauffer: Yeah. And in the past, if you've been around for a while they would actually change the file names of those and put them in a different folder. But now that we're using query strings, thank God we don't have to worry about that anymore. It's a lot simpler. Jordan Pittman: That was a Laravel extra thing. Matt Stauffer: Yeah. And if anybody didn't follow this Mix manifest idea, basically if you were to imagine you had a file called app.js and you were making all your changes locally. Your local thing, you just hit refresh and it would get you the newest version of app.js. There's a really common pattern on servers where you want people to not have to constantly re-request your files. So you set a really long cache on them like seven days or a month or forever. But the problem is if somebody comes back and you've made a change, they're not going to get it. They're going to get the cached version. So that's why Jordan was talking about cache busting, is that if that app.js file has changed, but you set a super long expiration on it's cache, now you can say, "Hey, this isn't actually the same file. Look, the file name is different." Of course, it's the exact same file. But that query string tells your browser to treat it like it's something different because the browser doesn't know that it's not a different file. Jordan Pittman: Yeah. And sometimes browsers are just super aggressive with caching in general. It's like, "I've refreshed this five times and it hasn't changed." Matt Stauffer: Yeah. Which doesn't make sense. But it happens. So we have gotten into production builds. We've talked about minification, we talked a little bit about versioning. So let's talk a little bit further about some of the other a little bit less common things that still happen often. I think the biggest one... We've already talked about PostCSS, configuration plugins, Tailwind to me seems to be the most common plugin. Have you seen people using many other post-CSS plugins? Jordan Pittman: A handful of people use like the postCSS import and nesting plugins that gets you some SASS style stuff, and stuff that comes with less baggage. But one of the nesting plugins is actually based on an in-progress, CSS specification. And there's a bunch of PostCSS plugins for color functions. So you can write a fancy color whatever function and CSS and it gets converted into RGB or HSL. Matt Stauffer: Nice. There's an interesting thing... If you all are super interested in learning about how this all works with PostCSS, Adam brought me on the full stack radio podcast basically just to have somebody to talk at. So basically, I became like the questionnaire because he had learned so much about PostCSS that I was there mainly to just listen and ask questions and learn alongside him. He didn't bring me on because I'm a PostCSS expert that's for sure. But that episode was really good. I'll link it in the show notes because I learned a ton and I'm still referencing it now. And one of the things that he mentioned to me then is that PostCSS, like you mentioned very frequently people would tailor plugins around trying to give you access to upcoming CSS specs early. We also talked about the fact that with PostCSS, it's much closer to CSS because something like the syntax that you design has to technically be valid CSS. Matt Stauffer: So you can't just go completely crazy. It has to be valid CSS, but people have been able to be creative doing things, like Jordan was talking about a lot of people use SASS in order to get nesting and in order to get includes and maybe variables like that might be it. And you can now get all those with PostCSS without a lot of the baggage and overhead. And if I've had any NPM issues recently, it's almost always been a node SASS thing. So again, just so you all here Titan moved office I was team SASS quite a while ago. We've all moved off SASS ages ago, and I definitely encourage you all to do it as well. Jordan Pittman: Anytime I've ever run Mix and been greeted with a wall of text, it's been a no task problem because I've upgraded node. Matt Stauffer: Yeah, absolutely. Yeah. Okay. I think the next thing... So CSS pre-processor, so you can do all the latest ones. You can do SASS and you can do LESS and you can do whatever those other ones- Jordan Pittman: Stylus. Matt Stauffer: Stylus. Yeah. Jordan Pittman: That's a very- Matt Stauffer: It's interesting because I don't hear about those as much as... It used to be so vital to have those. And it seems to me like it's just less and less a thing. It was a big war between SASS and LESS and now it's was like, "Do I have to use either of them?" Jordan Pittman: Sure. Really it's because PostCSS has started to become more prevalent and then you have stuff like Tailwind. So I think it's a one-two punch, because one of the things that SASS would give you is nesting because people used to, myself included, would write CSS that followed the structure of their document. And when they nested a class inside the class, they added more classes and that's the CSS. And with the advent of utility style frameworks, that is less of an issue. And when you write CSS, you don't have to write as much of it. And on top of that you have these features like import and variables and whatever, PostCSS gives you. And so if you've already using PostCSS or PostCSS plugins, like Autoprefixer or Tailwind, you have less need to go for anything else now. Matt Stauffer: Yeah. I think that's a big factor of it for me, for sure. Is that, we had already rolled off of SASS quite a bit. It's funny, because you can hear me also on the Full Stack radio podcast, episode one, talking about why BEM is the absolute best object oriented CSS and then I'd given a conference talk about that. I was a big fan and he's introducing this utility, this was before he worked at Tighten. He's introducing this utility CSS idea and I'm like, "I'm not sure about it." And he worked at Tighten and we started writing some code together like that. I was like, "Never mind. I'm sure I love this." And so I got to use pre-Tailwind and stuff with him a little bit. Matt Stauffer: And then I got to use the tail end alpha or something like that on my site. So basically since before tailwind even released the first one, I haven't touched any of these pre-processors once, because like you said, there's no reason for me to do it. The amount of custom CSS I write is very, very, very, very minimal. And I am using at apply, which I know Adam criticizes all the time, but I use it. I love it. But yeah, just the need for these things, especially if you're going to Tailwind, then you definitely don't know whether need these things. But even if not, it's just a lot less necessary. Matt Stauffer: So you can do CSS pre processors and Mix if you need them. But I don't even think we need to spend a lot of time about them. Let's talk about the more complicated aspects of it. So we've got code-splitting, we've got Browsersync and Hot Module Replacement. And I feel like there's another one. Well, let's just talk about those. Talk to me a little bit about any of those individually or whichever picks your brain and I'll grab the other one right after that. Jordan Pittman: So code-splitting is actually split into two different styles. So you can split out your vendor, basically dependencies. So anything that you have, that's not your code you can split it out. And all you have to write is a Mix.extract. That's it. It's that simple. And you get three files when you do this. Manifest.js, your app.js, and a vendor.js. You include them in the order of manifest then vendor, than app. Although technically it doesn't matter, as long as the manifest is first. And what it does is it says, "Okay. Hey, I've got these dependencies and they're not changing as much as my app code." Jordan Pittman: So when you make changes, that vendor file is not as likely to change. And so the browser caches and doesn't have to download it again. And then your app file will change however much you need it to because you are making changes to the website. And then Webpack also has this concept of async chunks, which are admittedly a little bit broken in the current version of Mix, but it is fixed in the next version. So with Webpack five, we will have proper async chunk splitting support. And I am very happy about this because I've got an app that's on Mix 3.0 that hasn't been upgraded yet because of this very problem. Matt Stauffer: Got it. So, okay. Jordan Pittman: And these async chunks, what they do is basically say, "Hey, I've got this point where I want to split this code out. I don't want to end my main bundle." Because.... Let's take vue, for instance, it's very common Laravel community you can do, async loading of your components. And let's say you're doing an app where you've got like this really large form and page in a vue component for some reason, but you don't want to load it in your main bundle. You can do an async chunk split and say, "Hey, I want to split this off in an async report." And it will load that when it needs it, at runtime. So your main app.js file is not bigger because of that. Matt Stauffer: Okay. That's cool. I didn't know about that. I like that. I know about extract. I like extract. I didn't know about that. Let's go back to extract real quick only because it's available right now. What's the downside? You've got three files, so you've got an extra HTTP negotiation, anything else? Jordan Pittman: Honestly, not really. It gets more files to keep track of, but I do it in every project I ever use. I add that to every project. I'm actually surprised it's not in the default. Matt Stauffer: Yeah. I'm surprised that I don't use it more because I learned about it and thought this was really cool. I've actually learned about it multiple times. I've learned about it once when it was announced, once when I added to my book and probably at least another time. And each time I went, "This is cool. I should use this more." But I still don't. So it's helpful. Jordan Pittman: One of the things that you used to have to do, you used to have to list every single dependency you wanted in that list. And when the Webpack four upgrade happened, we made it so that it would just do anything you imported from node modules. And so you can still provide it a list if you need to. But you don't have to, you can just say mix.extract and that's it. Matt Stauffer: That's nice. And that might be part of it. Is like, it was a little bit more manual work now you just add literally an extra line. And it's crazy how many things you get for free from this, I've built versioning from scratch or from external dependencies before, and it was awful and I'm glad I don't do it anymore. So the same thing here, just the amount of power that you get with a single line mix.extract is pretty freaking incredible. Jordan Pittman: You're still having flashbacks of your 250 line gold file. Matt Stauffer: Oh my gosh. Yes. Actually. Yes. The one that I copied between three or four different projects before finally, "Thank God, we've got off gulp." And it was great before that. Okay, so let's talk about browsersync in HMR. So I know they're not the same thing, but both browsersync and Hot Module Replacement have to do with the development experience of basically seeing your site change on your browser as you're making the changes in your code. So could you tell me a little bit about both of them and how they're different? Go ahead. Jordan Pittman: Yeah. So basically they serve to provide you a way to see changes without having to reload the page. And with Hot Module Replacement specifically, you can tie into that. So vue does that, it will tie into Hot Module Replacement and say, "Hey, reload this component, but keep it saved." And Hot Module Replacement specifically is more about JavaScript. I think you can potentially do some CSS stuff with it, but it's a little bit funny and that's where browsersync comes in. Is it will actually when assets change, it will reload assets. I even think it will do images if you replace an image. Jordan Pittman: But I know it will do your JavaScript, it will do your CSS and it basically provides a server in the background that it can retrieve assets from and then listen for changes. Like, "Hey, this has changed." And then it will update it on the page. And so they both served that same purpose. Admittedly, I don't use browsersync that much. And I use Hot Module Replacement mainly for vue components. I don't really use it for much anything else. If you're ever developing something vue-cli that is the default. Matt Stauffer: Okay. All right. So HMR or Hot Module Replacement is doing a little bit more of a complicated thing, but for JavaScript, basically only JavaScript. Jordan Pittman: Yes. Matt Stauffer: It's what I hear about a lot more. I remember when it got added, it was very exciting a lot of people. I bet you, there's still a big contingent of people that do use browsersync, but it does feel like I don't hear about it as often. So that lines up from my experiences. Jordan Pittman: Yeah. It's like when you make changes to your JavaScript, it basically says, "Hey, I just want to take this module, this chunk of stuff that you've added and I want to replace it with something else and then just rerun it effectively." Matt Stauffer: Yeah. So other things we can do in Mix, we can do things copy files or concatenate files. Those are all so clear to see that you just go look at the documentation and you'll figure it out there. Are there any other, before we move on to my normal common questions. Are there any other aspects of just what people can do with Mix that you feel we haven't done a good job of covering? Jordan Pittman: I typically add a handful of Webpack plugins. The one I mainly add is the Webpack bundle analyzer because it lets you see what in your dependency list is taking up all that space. It's like, "My JavaScript file is seven megabytes. Oh my gosh." And so if you take that.... And now you can see why. And it does a good breakdown to see "Okay, your vendor file is really big, but your app JS file is not." And so like, "Okay." That gives you some fodder there. But if your app JS file is really big, then that's where you probably want to start doing chunk splitting. Which is a admittedly a little bit broken. So to clarify what's wrong with that currently is, when you're producing CSS, it results in zero byte CSS files. Matt Stauffer: That could be a little bit of a problem. Jordan Pittman: Yes. The JavaScript portion works fine. Matt Stauffer: Yeah. So today is September 8th, 2020, do you have a sense for when we're looking at that, is it a couple months out, or? Jordan Pittman: That is a very good question and I don't. Webpack has a release candidate coming out pretty soon and we'll have hopefully another build of Mix of the next version out soon thereafter. But my goal- Matt Stauffer: And that's going to be Mix five, right? Jordan Pittman: Six. The current version is- Matt Stauffer: It's going to be six. The current is five, right? Jordan Pittman: The current is version five. My goal, if everything goes according to plan is to have Laravel Mix six ready to go on Webpack release day. Fingers crossed Matt Stauffer: Fingers crossed. Yeah. I get you. I love it. Cool. Okay. So usually what I talk about next is things that are difficult for people. A little bit less about what they can do and a little bit more about what trips them up. So when is the last time some aspect of Mix tripped you up or just common challenges you see people running into? One of the ones you mentioned was processing CSS URLs, but what else is there? Jordan Pittman: So one is actually not strictly related to Mix, but something you can still do with it. If you try to write JavaScript using currently, optional chaining or no coalescing, we use Babel under the hood. But those aren't currently enabled by default. And so sometimes you need to add Babel plugins for that. And so you can create a Babel RC file to add presets and plugins and other configuration necessities for Babel and Mix will actually honor that file when using Babel to compile your JavaScript. So if you're writing some JavaScript and you're using this new no optional chaining operator where you do something, or you might get an error. But you may not get it until you load the page which I've had happened before. And so if you see that, then that means you probably need to configure your Babel plugins to basically turn on optional chaining and no coalescing. And any of those other, not quite ready features. Matt Stauffer: Got it. Okay. That's helpful. Are there other common challenges you think people tend to run into or something you wish everybody knew about Mix that they don't tend to? Jordan Pittman: Webpack is complicated. And so sometimes if you get frustrated, it's okay. I get frustrated too. This is something that, it is what it is. And if you get frustrated with it, that's normal. And our goal with Mix is to make sure that it doesn't happen. But if you have to dive into something a little funny when you're editing your Webpack configs Mix provides you an opportunity like add plugins, change resolutions, basically any escape hatch that you need, you can do mix.webpack config and go whole hog. I want to change everything willy-nilly and you can absolutely do that. And I find that a lot of times I have problems and other people do too, when they go to customize that thing and they get some weird errors and it's like, "Oh my gosh. What's- Matt Stauffer: There's a safe land of Mix now. Jordan Pittman: Yeah, exactly. You're out of the safe zone and so it's like, "What do I do?" And it can be a little daunting, but that's normal. Matt Stauffer: Let's say I had a perfectly functional Mix file. And then I come back a couple months later or I clone in a different computer and I'm getting some wall of text, whether or not it mentions a node SASS. Often happens when I run NPM install, sometimes maybe when I hit NPM run dev, what's my first step to do when that happens? Jordan Pittman: Trash node modules and re-install. Matt Stauffer: That's it. That's the truth. I hoped that was going to be your answer because if not I was going to be like, "What about..." Yeah. It's crazy that that matters. But it matters. Jordan Pittman: I find that it matters the most when you have any dependency that compiles binaries on your computer. And honestly it can be something as simple as the thing that Webpack uses to watch files because when node updates, it's not ABI stable. That's a very complicated thing. But let's just say that means when it changes, you swap out the binary and you node upgrades, the things that build before aren't going to work. Matt Stauffer: Don't work anymore. Jordan Pittman: Or if they do, it's a miracle. And so- Matt Stauffer: So the swapping of the node modules is basically deleting compiled binaries that no longer are rele... Okay. That's helpful. I always deleted it, but I wasn't always 100% sure why. So- Jordan Pittman: That's why node SASS didn't work. Matt Stauffer: Yeah. Because it was compiled. Yeah, look at this. Learn new things everyday. That's awesome, man. Thank you. So delete no modules. Do you ever have to delete package-lock.json or whatever yarns version of that is or not? Jordan Pittman: Or yarn.lock file. I have. I try not to. But I have. And sometimes when reinstalling node modules doesn't work, that's my next step and I have that in version control. And so I can do the changes. Now, I'll be honest if you trash your lock file and then you rerun, you're going to see a lot of changes most of the time. But generally, I found per projects following sim-ver, bugs accepting, I don't usually have a problem with it. I'm maybe lucky in that respect. But I have had to do that and I don't necessarily recommend it, but if you're still having problems, try it. Matt Stauffer: If you're still stuck. Yeah. I'm with you on that. Yeah. Nuking your node modules is easy because it's just a vendor directory. Nuking your package lock or your yarn.lock is a little bit tougher, but I'm with you. If you've got no other options, it's better to do that than to feel like you have to dig deep to understand every aspect that's going on. Start with those two, nuke your node modules and then nuke your lock file. And then only after that, if you can't get it fucking working, that's when you have to start figuring out, "All right, what does this giant wall of texts actually mean? And looking at stack traces." Hopefully none of you dear listeners ever have to experience that. Jordan Pittman: Fingers crossed. Yeah. The other thing I would say is, if you're running yarn or NPM in homestead and you're using virtual box, you're going to have a fun time. So don't. Matt Stauffer: All right. So don't run it. Honestly, I think that I'm trying to remember, but I'm pretty sure the advice is never run any of your - right? You have composer install a PHP unit in there. Jordan Pittman: I always run composer inside homestead, 100%. Matt Stauffer: You run it inside it? Okay. I couldn't remember what the rule was. There's a rule and I can't remember which way it was. Jordan Pittman: I don't ever run yarn or NPM or anything like that inside homestead, performance is one of them. But especially if using virtual box, file system issues can crop up that are just like, "I unzipped this file and it's not there after I unzipped it, what's going on?" Matt Stauffer: Got it. So I think I remember that being why I would run composer outside of homestead too, but it's been so long that I can't remember. So you don't have any big performance hit from composer inside homestead? Jordan Pittman: I don't. Not normally sometimes I do run it outside, but I typically run it inside. Especially at work, we have projects on different PHP versions. And so I actually run composer with a specific PHP version, locked down. Matt Stauffer: You've got to do that. Yeah, for sure. All right. So is there anything else... Actually no, I have two things. There are other... Oh no. Do you have more challenges and gauches you wanted to share? Jordan Pittman: I don't. Matt Stauffer: So I got two things and it looks from your face, you have something too. Why don't you go first because I wrote mine down. What else do you have on your plate to talk about this topic? Jordan Pittman: One of the fancy things that you'll see, and it's just a little nice to have is whenever you're using Mix, when you're using the watcher and you make changes Mix will actually notify you on Mac iOS, on windows, maybe even on Linux I'm not quite sure when your files have updated. And so like, "Oh, it's taken a long time." Mix will actually say, "Hey, notification. Success." Or if it failed, it will basically send you a notification saying, "Hey, something's wrong. It failed." And it's just one of those things that it's like a super nice to have. You don't have to think about it. You just get a notification where you expect that. Matt Stauffer: Yeah. I love that. Okay. So I've got two things on my plate. One of them is source maps. You mentioned really quickly about it building source maps. If somebody is not familiar with source maps, could you tell us A, what are they and B, how are they generated differently depending on context and Mix? Jordan Pittman: So source maps are mainly used for production, but what they are is they basically take positions in your files and map them in your production built files and map them to positions in your development files. And so let's, if you're using any error handling service that's monitoring for client side JavaScript errors, we use Bugsnag at work. I think people use Sentry, Rollbar, but typically you can upload source maps or it will detect them. And when you get errors, instead of having one long, one line string in your- Matt Stauffer: Because it's all a minified, right? Jordan Pittman: Yeah. Because it's all minified. The source map basically takes that and says, "Hey, this is actually where the error is in the dev version." And so your stack traces will actually be nice for the most part. Matt Stauffer: Yeah. You don't have good function names more often because... Well, no, actually I guess you do once it maps it in, right? Jordan Pittman: Yeah. Because it maps functions over. And so if you're doing... There are some weird things that can happen, but for the most part your stack traces should be almost like they were in development. Matt Stauffer: Yeah. For some reason I thought that they didn't build when you're running NPM run dev or yarn dev, but I actually don't remember for sure. Do they still build those contexts or only in product? Jordan Pittman: I think they only run in production by default. Technically, there is a source map that was actually built in dev. But it's a Webpack internal thing, because you can actually change it. It has to do with the way Webpack actually generates your app JS file in dev. Matt Stauffer: Okay. So not what your average person is actually dealing with when it comes to the source maps? Jordan Pittman: No. Matt Stauffer: Okay. And note for everybody, source maps are also parsed by the Chrome developer tools. So if you are looking in your Chrome developer tools at a console error, and you say, "Where is it?" You click the error and it shows you where the error was and you see this horrible long string, you say, "Well, how am I going to find this error in the middle of compressed and minified files?" Well, the answer is you enable source maps and then you... I think the flag is owned on by default and Chrome developer tools, but if not you turn it on to say, "Source maps." Matt Stauffer: And then in theory, when you click that same thing, it says, "There's an error online, blah, blah, blah." You click on it. And it's going to take you to a version of the file that's not actually being served, but it's shown in your Chrome developer tools as if it was actually a file there. And so that's really cool when you end up in, for example, minified CSS, and you click on it. It actually shows you which of your sass files it comes from or which of your source... What's it called? Post CSS files that comes from something like that. Alright. One last question before we start wrapping it up. Tell me about yarn. Jordan Pittman: Okay. So I'm probably going to get some hate for this, but I like yarn just because of the speed, honestly. There are a few things I still use NPM for, gasp! I know. Which is global dependencies. I can't get those to work with yarn. I don't know why. They used to work and then they stopped working. I don't understand. And so I still had to solve those with NPM. But for the most part, I use yarn for everything because of speed and- Matt Stauffer: Yarn install or yarn run things or both? Jordan Pittman: Both. It's convenient to use one tool. And so I just use yarn for pretty much everything and that's basically what it is. It's mainly a performance thing for me, because I started this when NPM was doing the nested folders and... Like before, I was... I don't exactly remember when yarn came out around that timeframe because it may have been a little after NPM three, which is when they flattened the structure if I remember correctly. But performance was always a very big thing for me. And if I can run yarn and have a node modules folder in 60 seconds versus five minutes, that's important for my workflow. Matt Stauffer: It's interesting. Because we switched to yarn because it had a lock file and because it did better dependency management and I don't know if I ever remember there being a speed issue. And so once NPM brought those back, we switched back over to NPM, just keep life simpler. So if everyone were to switch to yarn on your recommendation right now, are there any downsides that you can think of relative to using NPM? Jordan Pittman: I honestly can't think of any. I know there's this whole thing about yarn Berry, which is yarn version two, which I haven't tried yet. It's supposed to be really interesting. It's got something called plug and play support, which is one file it's not even.... You don't even get a node modules folder, it's wild. I don't quite understand how it works because I haven't played with it. But I would say for me, I don't really see any downsides. I generally find it to be just a good option. Matt Stauffer: Okay. I'm going to have to take a look at it and run a speed test. I'm just going to pick whatever my most recent project is and I'll try and run a speed test on both of them and see how they pan out. If I remember to do it, I'll do that and tweet it out. Jordan Pittman: Yes. Matt Stauffer: Very cool. All right, so that was the last of those questions. So before we start wrapping up, is there anything else that you feel like we should have talked about that we didn't get a chance to? Jordan Pittman: Mix plugins actually. This isn't something I use very often, because I don't need to as much anymore. Because there was a purge CSS plugin, there was a Tailwind plugin, but I've actually done some interesting things. You can do, I think it's mix.extend I can't quite remember the exact syntax. It's the same mechanism that the internal Mix plugins use to register themselves. And I'll give you an example of something I did on a project last year I think. Where we have this monstrosity site, which is code based, it's like 10 different websites in one, because they're all basically the same thing. So it makes sense for that project, but they all have vastly different styles in JavaScript. Jordan Pittman: And so I extended Mix using this little API. It's probably a small function op just on a good hub where I read an environment variable to say like, "What site am I currently building assets for?" Because if we didn't do that and it compiled all of them every time it took minutes, like 10 minutes or something to compile everything because there's so many. And so I basically just wrote a little Mix plugin that says when I write mix.site and I give it a site name and a function, it basically runs that to basically register what files Mix actually needs to process. Jordan Pittman: So inside that I have mix.js and mix.css or post CSS or SASS or whatever. Because some of those are using SASS and some of them are using post CSS or are even using different tooling. And so that's the thing that you can do to clean up your files or tweak your build and Mix just has that ability. And so if you want to try that to clean up your file, if you have a really gnarly Mix file, it's not really a common situation, but if you do, why not give it a shot? Matt Stauffer: That's awesome. I love that. And a note it doesn't have to be a plug in that you're going to release you just described a plugin that they just use internally and that's a helpful thing in all this stuff. Even with PHP packages. Build packages for yourself, even if you don't know if they're ever going to go public. Jordan Pittman: Yeah. And this plugin is literally inlined in the Mix file at the bottom. It just calls mix.extend in the bottom of the file. Matt Stauffer: It's like an plugin definition. Yeah, exactly. I love it. All right. So if somebody wanted to learn more about Mix, where would they go? Jordan Pittman: The Laravel documentation is big. It's pretty extensive actually. And it covers basically the compilation, configuration, all the compensation options, all the different tools. You can do CoffeeScript, you can do TypeScript, JavaScript, you can... Heck, Webpack is so powerful, you can import REST files if you really wanted to. You would have to configure that one manually. But it talks about the escape patches for Webpack config. And so the biggest thing for me, when I get stuck, I look at the literal documentation. Matt Stauffer: I love it. This is from someone who, I don't know exactly how much to claim for you, but you have had a very significant hand in writing much of the Webpack related.... And I want to say, you know the internals pretty darn well, let's say that. So the fact that you run to the documentation is pretty awesome. I love it. Okay. So our last moment, if you've listened to the podcast all the season there's a personal fund moment for everybody. Jordan Pittman: Oh dear. Matt Stauffer: You can probably guess yours. I had written it before we started recording. Jordan Pittman: I have no idea. Matt Stauffer: What on freaking earth is going on with mayonnaise and banana sandwiches. That's what I have to ask. I saw it in your Twitter profile, I don't know how long ago. And I've been waiting for this moment to ask you. What on earth is going on with this thing? Jordan Pittman: Have you never had one? Matt Stauffer: No, I've never even heard of one until I saw it on your Twitter. Jordan Pittman: Okay. So people are commonly eat peanut butter and banana sandwiches, right? Matt Stauffer: Yeah, of course. Jordan Pittman: Okay. Try it. It will change your life. Matt Stauffer: Okay. So let's just talk for a second. Oh, no. Go ahead. Tell the story first. Jordan Pittman: I grew up eating this. I thought this was a normal- Matt Stauffer: You did? This not something you made up? Jordan Pittman: No, I grew up eating this. I thought this was a normal thing. Matt Stauffer: You're from Georgia, right? You're not from- Jordan Pittman: Yes. Matt Stauffer: Okay. You're from Georgia. Jordan Pittman: I'm from Georgia. Matt Stauffer: I live in Georgia right now. I'm going to have to ask people around me if any of them have heard of it. But so far I've never heard of it. Jordan Pittman: Interesting. Matt Stauffer: So can you tell me a little bit about... Actually, when did you first figure out that other people didn't eat mayonnaise and banana sandwiches? Jordan Pittman: Probably bickering on Twitter. Matt Stauffer: What? So did other people in your town eat it or do you not know? Because- Jordan Pittman: Yes. Matt Stauffer: Really? Jordan Pittman: Several of my family and friend group ate them. And I remember having arguments with people at work about mayonnaise and bananas sandwiches. Matt Stauffer: I believe it. Jordan Pittman: And I'm like, "This is the greatest sandwich known to man. I don't understand how you've not tried this before." Matt Stauffer: So I'm Googling it right now because I was waiting until I talked to you to see it. But there's quite a few website results. Dale Earnhardt Jr. teaches you how to make his mayonnaise banana sandwich. Jordan Pittman: Yes. I love this. Matt Stauffer: What is going on? Jordan Pittman: I have to poke a little bit of fun at Eric Barnes right now. Because he and I, we are back and forth on Twitter about Die Hard. About whether or not it's a Christmas movie. And it is a Christmas movie. Because the whole point of the movie is he's going to see his family for Christmas. Matt Stauffer: Right. That's awesome. Jordan Pittman: But I remember we always have this back and forth banter about this. It's amazing. I love it. Thanks Eric. I love this. I love this fun. But I remember tweeting something about mayonnaise and banana sandwiches and he said something. I was, "Oh my God, is this the thing we're going to agree on?" Because he eats them too. Matt Stauffer: Because he's Southern too. Yeah. According to Google, it's a super Southern thing. Jordan Pittman: And I was like, "I think this might make me forgive you for your Die Hard tweets." And then someone chimed in and said, "You all are disgusting." Matt Stauffer: So I'm looking at pieces of just white bread or semi meat or something. And then you just.... Tell me about it. Because they're not looking at these pictures. Tell them exactly step by step. Jordan Pittman: So I take two pieces of white bread. Typically, I make two sandwiches so four. I get some bananas- Matt Stauffer: Does it have to be white or would it be okay to use a honey wheat or something? Jordan Pittman: It doesn't have to be white. I think it's better with white bread, but that's just a personal preference. Okay. Duke's or Hellmann's mayonnaise. I think probably Hellman's is probably my preferred, but either one would be good. Matt Stauffer: I thought also the nurse thought Dukes was better. Jordan Pittman: I just like mayonnaise. Matt Stauffer: I'm not that picky. Just give me some freaking mayonnaise. Jordan Pittman: Not vegetable mayonnaise or degennaise or vegenaise's or whatever. That tastes not quite the same. So Duke's or Hellmann's and then bananas, sometimes I'll slice the bananas sometimes I'll cut it into two pieces and make basically long on two pieces of bread. Sometimes I'll- Matt Stauffer: Banana split type things. Yeah. Jordan Pittman: Yeah, exactly. And sometimes I'll slice it. It just depends. And I put mayonnaise on both slices of bread because of course, and I eat it. It's delicious. It's the most amazing sandwich known to man. Matt Stauffer: So I'm going to provide a counterpoint that I'm not actually co-signing on because I've never tasted it. But when I Googled mayonnaise and banana sandwich, I was trying to look for one with a good picture. And the one from GQ, I guess, had a good picture. So I go to their article and the first thing they have is a tweet where they said, "Would you eat a banana and mayonnaise sandwich?" And 56.6% of people said, "Not in my life." 25.5% said, "No." And then 8.8% said, "Yes, delicious." And 9% said, "I'm eating one right now." Okay. So that's out of 34,000 votes. So this article is, "We tried five gross sandwich combinations people actually eat." So this author tried all of them and the options are banana and mayonnaise, peanut butter and pickle, peanut butter and cheddar, peanut butter and mayonnaise and pineapple and mayonnaise. So I'm pretty sure he hated all of them. He hated all of them. So we're going to give a little bit of a credit that maybe Freddie was not the right person to be writing this article because it doesn't look he has the most expansive palette. But I will just for fun, I'm going to read you his description of the banana and mayonnaise sandwich. And then I'm going to go have one later and I'm going to tweet it. I actually might even make a video of myself doing it on YouTube or something like that. Jordan Pittman: Oh my God. Please do it. Can you live stream that? Matt Stauffer: What's that? Jordan Pittman: Can you what live stream it? Matt Stauffer: I want to have the audio so I can put it in this podcast episode. So if I remember, I will try it. And then after the outro music will be me trying a banana and mayonnaise sandwich. So he says, "Origin: To my surprise, it wasn't invented by Dale Earnhardt Jr. It turns out the banana mayonnaise sandwich is considered a Southern delicacy, blah, blah, blah. Preparation: One whole sliced banana sandwich between two slices of white wheat bread and a healthy coating of mayo. How does it taste: Absolutely terrible. Texture-wise it's a slimy, gooey mess. And there are no complimentary flavors. You bite into it and all you get is a strong hint of salty mayo, followed by the faint echo banana practically an eternity later. You think the sweet banana would be some relief from the bitter mayo, but it's just a reminder that other better foods exist and you could be eating those instead of this garbage. Would I eat it again? Not if you paid me, I would have happily licked a subway seat if it meant getting the taste out of my mouth." Jordan Pittman: Wow. I have paid someone to eat a mayonnaise and banana sandwich. I literally aid someone 20 bucks to do it. Matt Stauffer: That's awesome. His description here sounds Like what I imagined it tasting like. It's like the bitter and the sweet.... But I'm going to try it. I'm going to try it and it's going to be recorded. Jordan Pittman: Oh my God. This makes me so happy. Matt Stauffer: Yeah, if I didn't have things to do and we didn't both have jobs, I would go do it right now, live. Hold on. Jordan Pittman: I literally- Matt Stauffer: Do you have a job you have to get to? Jordan Pittman: I'm done for the day. Matt Stauffer: Okay. I'm going to go make one real quick. Jordan Pittman: Oh my God, yes. I was going to say, I literally could go get some bananas from the cafe near me. Although I don't know if they have the mayonnaise. But yes- Matt Stauffer: I have bananas and I have Duke's mayonnaise. Jordan Pittman: Oh my God. Yes. Matt Stauffer: All right. So I am back from having gone to the kitchen to create a banana and mayonnaise sandwich. I've got now a camera pointing at me from the side for the YouTube friends. So YouTube friends, this is the Laravel podcast right here with Jordan Pittman. And then this is a banana and mayonnaise sandwich, and podcast folks you're not going to be able to see the things I'm describing. So you should go check out the YouTube after you listen to this podcast. So I'm going to try it live because Jordan tells me that this is the best sandwich of all time. And I don't know if I'm a glutton for punishment or if I'm an adventurous human being, but whatever it is, it's going to happen. Jordan Pittman: This makes me so happy. Matt Stauffer: I'm trying to get good audio on the mic and also look at you YouTubers while I'm at it. So let's see if I can do it. Alright, so you ready for this? Oh yes. This is nature's own honey wheat bread with a medium amount of mayonnaise on both slices of bread. And then about three quarters of a pretty decent sized banana. So let's do this. Oh, by the way, YouTubers you didn't get to hear this in the podcast. I just read a GQ article about how this is the worst. The guy who tasted it, rated it as a negative 100 out of 100 flavor-wise. Jordan Pittman: Here we go. Matt Stauffer: Some people really hate chewing noises. And they don't want to listen to this podcast. I might need a warning upfront. Jordan Pittman: Can you move the sandwich and view it a little bit? Matt Stauffer: Yeah, totally. I'm not sure how I feel about this yet. Oh my gosh. It is... Okay. It's definitely weirdly salty and it's weird because, you mentioned this peanut butter is salty. But this is weirdly salty in a different way. There's moments in eating it where I go, "This is great." And there's moments in eating it or I go, "This is not great." And I'm trying to figure out what if it had more banana or less banana, more mayo or less mayo, would one of those feelings be more likely to happen? It's hard to tell. It's strictly is not a negative 100 out of 100. That's stupid. Jordan Pittman: I would try adding more mayonnaise. Matt Stauffer: More mayonnaise next time. Jordan Pittman: Yeah. Try- Matt Stauffer: I'm going to take one more bite. It's a very confusing flavor profile. Jordan Pittman: It is confusing. But I love it. Matt Stauffer: But next time, I'll actually add more mayonnaise on the second half and then come back. I'll make everybody wait on that. But yes. Okay. Yeah. So when it's tasting good and familiar, I'm basically tasting a banana sandwich with a little bit of salt on it. And I think what tastes a little weird to me is when I start noticing the mayonnaise flavor. So I do think that.... I'll show you YouTubers. That's a pretty good amount of mayo, but I'm pretty sure that you wanted more mayo than that. So, okay. I don't know if I could concur that this is the greatest sandwich of all time. It is not quite as weird as I expected it to be. So I'm going to... Okay. There was one.... I'm trying to remember. What was the thing I tried last time? I tried something else. It was the... Not Marmite, but what's the... Vegemite? I tried Vegemite on a stream once and that stuff's amazing. Have you ever had vegemite before? Jordan Pittman: I've never had it. Matt Stauffer: Oh my God. It's amazing. So there is a part of it like that the way I have been eating Vegemite, it's basically like toast and then an incredible amount of butter and a little bit of Vegemite. So I'm basically eating salted butter toast. So maybe if I had less butter on it, I wouldn't like it quit as much. But with it the way I ate it, it was heavenly. I think my verdict, so I'm going to stop this for the YouTubers. I think my verdict is, first of all, I'm going to go have to try it with more. Second of all, it is not a negative 100 out of a hundred. Mr. Freddie Campio from GQ.com. But I'm not ready to say it's the best sandwich I've ever tasted in my life. So Jordan, if we're in the same place physically, I'm going to have you make one exactly the way you make it, and I'm going to try that. But for now after this video, and after this podcast, I'll go try it with more mayonnaise and if I discover that more mayonnaise made it the best sandwich in the world, I will update the video in the description and I will update the podcast notes. Cool? Jordan Pittman: Yes. Matt Stauffer: All right. See you YouTubers. Okay. Podcasters what's up people? So if you want to see the joy of that sandwich or me in a very hot day, because I can't run the fan, definitely check out that YouTube, I'll put it in the show notes. Jordan, thank you for introducing me to that aspect of your family tradition and your Southern culture. Because I live in the South, but I'm not from the South. I'm from Michigan. So I feel like I moved to a new city and tried a new thing, and it was this new experience and it was not a negative 100 out of 100. If I would say the best sandwich in the world is a hundred, I would say this is a 55 to 60 maybe. Jordan Pittman: That's not bad. Matt Stauffer: And I'll try it your way. I expect you to be like a 15. I'm now curious, more people. I want you all to go try this thing and try it out. And I'm actually trying to look at the pictures. I'm going to link a picture in the show notes of how much I had on mine. But I'm looking at these pictures of people like the Dale Earnhardt Jr. and they all put maybe a little bit more mayo than I did, but not a ton more. So I'm wondering if you're the mayo King. Jordan Pittman: Oh my God. I love mayonnaise. And I feel absolutely honored to introduce this to you. Matt Stauffer: Nice. This is a good moment. Yes. All right. So as always, we're running so late because we're having such a freaking good time. But we should probably start wrapping it up. So if people want to follow you and your joyful opinions about Die Hard and banana and mayonnaise sandwich, and also Laravel Mix and all these things, where do they follow you? Is there something you want to plug? All that kind of stuff? Jordan Pittman: So I'm Jordan Pittman on Twitter, two T's. And then I'm the Cryptic Ace on GitHub, Instagram, I'm that in a ton of other places. So you can find me there as well. Matt Stauffer: And those will all be in the show notes as always. So The Cryptic Ace? Jordan Pittman: Yes. Matt Stauffer: All right. Jordan Pittman: I'm a card guy. Matt Stauffer: I was figuring it was something card related, so I've got to ask one thing. What does being a card guy mean? What kind of cards are you playing? Poker, or card tricks or what? Jordan Pittman: Card tricks. I literally have a dresser with a ton of decks of cards on it right now, behind me. Matt Stauffer: Really? Jordan Pittman: Yeah. Matt Stauffer: Is it anything that would show up on a YouTube or something that? Jordan Pittman: Potentially. It's bunch of different brands, Allusionist and theory11 are the two main brands that I have. I'll pull out something to show you and I'll take a picture of this. Matt Stauffer: I might be getting you all some YouTube magic here. Jordan Pittman: I literally have like a- Matt Stauffer: That's fancy. I don't even know what I'm looking at, but it looks fancy. Jordan Pittman: So these are two decks of cards. These are actually sealed in a little case. Matt Stauffer: Actually this is a really fancy. If I knew about magic, I would know that those really fancy... They look amazing. Jordan Pittman: They're a little... They're not super pricey, but I think that thing may have been a little bit. But I like to get some nicer decks of cards just because they're intricate and I really. Really enjoy that. My two biggest things are cards and a pool actually. I love playing pool. Matt Stauffer: Okay. Jordan Pittman: Fun facts. Matt Stauffer: I feel like I could just keep going on with more questions, but I'm just going to stop for the sake of this not being the two hour long podcast episode. But Jordan, this was a ton of fun. As always, I get to take these wonderful people who are doing great things for the community. Thank you for everything you've done to make Webpack, just work for the rest of us. Thank you for helping people in the issues. Thank you for introducing to me this very interesting and somewhat enjoyable, we'll see where I end up long-term thinking about it. But definitely an interesting experience. I'm glad I had it. And yeah, just thanks for being you man. I really appreciate you. Jordan Pittman: Man. I appreciate it. Thank you, sir. I am so glad to be here. Matt Stauffer: I love it. Jordan Pittman: Thanks for having me. Matt Stauffer: See you all next time.