Unlocking Vue and Nuxt Potential: New Tools, Best Practices, and more - JSJ 652
In this episode, AJ and Steve dive deep into the world of Vue.js and API integration with a special guest, Daniel Kelly, a seasoned lead instructor at Vue School. this episode is packed with valuable discussions on using the useFetch Vue component for seamless API requests, navigating the challenges of migrating from Vue 2 to Vue 3, and embracing TypeScript for a more robust development experience.
Special Guests:
Daniel Kelly
Show Notes
In this episode, AJ and Steve dive deep into the world of Vue.js and API integration with a special guest, Daniel Kelly, a seasoned lead instructor at Vue School. this episode is packed with valuable discussions on using the useFetch Vue component for seamless API requests, navigating the challenges of migrating from Vue 2 to Vue 3, and embracing TypeScript for a more robust development experience.
They also explore the impactful updates coming with Nuxt 4 and Vue 3.5, the benefits of Vue.js certifications for career growth, and how tools like Nitro and auto-import features in Nuxt 3 can enhance your development workflow. Plus, enjoy a range of recommendations from books and music to tech innovations and humorous dad jokes.
So, whether you're a seasoned Vue developer or just starting, this episode offers something for everyone. Tune in, and elevate your JavaScript journey!
Socials
Picks
- Daniel - Fairy Tale
- Daniel - Believe by Yellowcard
Transcript
Steve Edwards [00:00:05]:
Hello, everybody. Welcome to another exciting episode of JavaScript Jabber. I am Steve Edwards, the host with the face for radio and the voice for being a mime, but I'm still your host, at least for today. Chuck is out, had some work to do. Dan is on vacation, so, he's taking some time off. So it's me. And on the panel, I have mister AJ O'Neil. How are you doing, AJ?
AJ O'Neil [00:00:30]:
I'm doing fine flipping fantastic.
Steve Edwards [00:00:33]:
Yo yo yo yo yo.
AJ O'Neil [00:00:35]:
I added the yo yo now.
Steve Edwards [00:00:37]:
Oh, did you? I did
AJ O'Neil [00:00:37]:
it on the back end.
Steve Edwards [00:00:38]:
Oh, back end. Sorry.
AJ O'Neil [00:00:39]:
You asked me a question,
Steve Edwards [00:00:40]:
so I Okay.
AJ O'Neil [00:00:41]:
I gave you the answer, and then I added the yo yo yo. Yo. Yo yo yo, coming at you live from my goodness isn't the weather heavenly today?
Daniel Kelly [00:00:50]:
Yes. It is here too.
Steve Edwards [00:00:51]:
It's awesome. I was thinking fall was coming way too early last week but it's warming up. It's supposed to be 90 here in Portland tomorrow. We're looking at some sunny skies and some good weather, so great. We did a drive
AJ O'Neil [00:01:03]:
through the mountains yesterday with the kiddos.
Steve Edwards [00:01:05]:
Did you?
AJ O'Neil [00:01:05]:
See the fall colors. Yeah. It was wonderful.
Steve Edwards [00:01:09]:
Yeah. Okay. It is after 21st, so I guess we can start calling it fall now, can't we? Although here, we tend to have really nice September October, Indian summer, they call it. So that's always nice. Anyway, as we blabber on, let's welcome our guest, mister Daniel Kelly. How are you doing, Daniel?
Daniel Kelly [00:01:26]:
Hey, Steve. Doing great. Great to be here.
Steve Edwards [00:01:29]:
So, Daniel is a prominent member of the Vue JS community. And so since I don't do the views on Vue podcast anymore, I like to bring in some Vue JS content into JavaScript Jabber every once in a while, and this is my chance.
Daniel Kelly [00:01:46]:
It's a must. Yeah. Get gotta get a rep view here.
Steve Edwards [00:01:49]:
Yes. That's right. We need a good view of what's going on. Sorry. I missed my, dang it. I missed my sound effect. I'll do a delay delay. There we go.
Steve Edwards [00:01:58]:
Thank you. Okay. So, first of all, Daniel, why don't you just give us an intro on who you are and why you're famous, and, we'll go from there.
Daniel Kelly [00:02:07]:
Sure. So, I am the lead instructor over at Vue School. We're one of the, primary places you can go to learn Vue JS, whether you're a beginner or, you know, even a a more advanced Vue person. We've got all kinds of tutorials, available for everyone. So, I've been working with Vue School for almost 4 years now. Has it really been that long? Yeah. Getting older, I think. Yeah.
Daniel Kelly [00:02:33]:
So, we also run-in the, in the conference kinda circuit there. I go to conferences all the time with Vue School. We put on a few virtual conferences and, also have recently got into the certification space. So we worked with Evan Yu to create an official Vue. Js, certificate so you can take an exam, you know, show potential employers I know my stuff. Right? Mhmm. So, yeah, that's kind of what I do on the the day to day these days.
Steve Edwards [00:03:04]:
So let's talk about that for a minute. I know way back when before I got into web development, I was, doing software, and I got into doing some network certifications. So, if you're looking at network certifications, for instance, I was doing on 1, this is Windows. This is early days of Linux. I don't even know if Linux was out yet, but, like, Windows NT network certifications. You know, there's a plus certifications. And I know that it's seen as a way to say, hey. I really know what I'm talking about.
Steve Edwards [00:03:37]:
I can remember when I was in the Drupal world. You know, there was always issue when, you know, when hiring a developer to do a Drupal site for you. How do you know that they know their stuff? And I know that Drupal Drupal has come up with certification test if I remember. I haven't looked in a while. So, you know, view development, any type of development can cover a wide array of of topics. You know? Absolutely. So I'm just curious. This first chance I've had to talk to somebody about this, can you talk about what's involved in generating a a certification test? And, obviously, you got the input from the guy who created Vue, which is you can't get much lower level than that in computer speak.
Steve Edwards [00:04:20]:
Right? That's right. We're we're
Daniel Kelly [00:04:22]:
very happy about that for sure.
Steve Edwards [00:04:24]:
Right. And then so and then what does it cover? What are the the main areas of
Daniel Kelly [00:04:30]:
So we've got yeah. We've got it really focuses on, like, core Vue JS. Right? And we have 2 different levels of the certification. So there's, like, a, mid level or just kind of regular level Developer cert, and then there's the senior level Developer Certification. And so, at the, at level 1, we're basically testing, hey, do you know just like the basics of Vue? Right? Can you create a component? Do you know how props and emits work? Do you know how to, you know, how to start a Vue application? Kind of basic things, like that. And the way we test you on that is we provide multiple choice questions at the beginning of the exam And then we provide, 2 different coding challenges that you have to complete to build some kind of, some kind of little app. Right? So it's it's fairly in-depth in terms of what you actually have to do to pass the exam. I mean, if you can't create this if you can't complete the coding challenge and actually write the code for yourself, you're you're not gonna pass.
Daniel Kelly [00:05:41]:
And then at the senior level, it's the same structure. It's multiple choice questions and 2 different coding challenges. But the topics are a little bit more advanced. Things like using TypeScript with Vue, things like writing tests for your Vue components, things like a few more advanced things that are a little less used but can be very useful for creating, you know, intuitive APIs for your components, things like provide inject, for example. So, Yeah. It's, it's an interesting dynamic, and we've had a a lot of good feedback from people. One of my favorite things to share is actually, we have a boot camp that goes along with the certification as well. It's a 3 day boot camp.
Daniel Kelly [00:06:31]:
It's a virtual thing. Right? But it's basically, me or a colleague of mine doing a, just an educational style boot camp thing. And people can ask questions, and we go over all the different topics that are on the exam and teach the concepts and so on. But I actually had, one guy who works on a very popular UI library in the Vue community who attended. You're like, why would he attend? Like, he knows Vue. Right? And he came out telling me he learned stuff. So I'd really like to talk about that. It's really, really makes me feel good.
Steve Edwards [00:07:03]:
So I assume that with I mean, there's a huge number of apps set up there and still in Vue 2. I mean, I work on a very large one every day. And, you know, v 3 has been out for is it 2
Daniel Kelly [00:07:15]:
years now, I wanna say? It was like this 2020, actually, I believe. I think it's been almost 4 years now.
Steve Edwards [00:07:22]:
Has it really? Wow. Anyway okay. So you have, you know, a lot of you to step out there, but Vue 3 is the latest and greatest. So are there, sort of case to test for both? Is everything focused on Vue 3?
Daniel Kelly [00:07:38]:
That's a great question. It is focused on view 3. All of our exams, focus on the the current level. And as soon as the, as soon as the current latest is is changed to, you know, increment to the next thing, then we will have new exam material for that that next level. That's kind of our strategy there. But, yeah, it's all view 3. It does focus on the composition API as opposed to the options API, because that is the recommendation from the the Vue. Js docs now, and that's the direction Evan wanted to take it while we were developing it.
Daniel Kelly [00:08:13]:
So yeah.
Steve Edwards [00:08:15]:
Okay. So how many any ballpark figure on how many people have been have taken taken it so far?
Daniel Kelly [00:08:22]:
Oh, how many have taken it? That's a really great question. I couldn't give you an exact number. I know it's, I mean, we're literally getting people taking it every day. Their exams come in every day for the past year. So do the math on that. I'm not sure exactly how many, but yeah.
Steve Edwards [00:08:40]:
So is this run through View School? Is that so is Vue School that's running the certification test, or is it more of a, open source type thing, I guess, for lack of a better term?
Daniel Kelly [00:08:51]:
Right. We, it it is our team that produces the content along with third parties like Evan. Mhmm. But, the brand, is is called certificates.dev. So the website is certificates.dev. And we had, we started out with just the view exam.
Steve Edwards [00:09:10]:
Mhmm.
Daniel Kelly [00:09:11]:
But we found that that was so meaningful to people that we pivoted to also well, not pivoted. We expanded to also do other certifications as well. So, now we also offer an Angular certification.
Steve Edwards [00:09:23]:
Oh, good.
Daniel Kelly [00:09:24]:
We're actually launching tomorrow a JavaScript certification, a more general JavaScript, certification. And we offer a NUC certification as well.
Steve Edwards [00:09:35]:
Okay. Yeah. I'll put the link up here in the little banner here for a second. Angular. So are you guys do you have somebody with Angular expertise that's that's doing that one?
Daniel Kelly [00:09:47]:
We do. Absolutely. So we we partnered with a guy named, Alan oh, he's gonna kill me because I I I'm gonna butcher his last name. Sherrard, I think it is. Anyways, he had an Angular certification, that he's been working on for years, and he wanted to partner with us just to make his processes a little bit easier and so on. So, he is, definitely an expert with that kind of material and provided a lot of that. It was just a matter of, you know, changing it up a little bit to fit our our standards and our platform requirements.
Steve Edwards [00:10:23]:
Okay. Yeah. So here's the view on interesting. So having had to administer and take online tests and and scenarios and stuff. Out of curiosity, how you'd mentioned that there's multiple guests excuse me, multiple choice, questions, throughout the test, and then there's some coding challenges and things. So how is that done? Is that like a a cloneable repo that you can do and push back to a repo, or is it just like an online thing like a HackerRank
Daniel Kelly [00:10:54]:
Right.
Steve Edwards [00:10:55]:
Environment? Or how exactly is that testing done?
Daniel Kelly [00:10:58]:
So it is all in the browser. In fact, we're we're pretty, what's the word for it? We are literally watching you during the exam. There's there's this entire proctoring setup. Right. Yeah. It's intense. Right? There's Mhmm. The your camera's on.
Daniel Kelly [00:11:15]:
Your screen is being monitored. Your your mic is on. It's it's monitoring everything. AG, you wanna say something. I could tell.
AJ O'Neil [00:11:23]:
I always bomb those.
Steve Edwards [00:11:25]:
Like, when when the pressure is on ago. Oh, yeah. I bombed with my ad.
AJ O'Neil [00:11:30]:
Yeah. When the pressure is on like that, I forget how to do fizz buzz. And and oftentimes and I and I it seems like in most of those situations, they're looking for a very specific answer. So it's not like, hey. Here's a here's a problem that's reasonable to have. And then, like, walk us through what are you thinking about that and how would you solve it. It's okay. So you've got the numbers 12, 20, 70, and 84.
AJ O'Neil [00:11:55]:
They're in an array, but they're backwards. They're inside of an object, and you need to have, less than o 2 login. Like like, so how do you solve this problem? And it's like, what?
Daniel Kelly [00:12:11]:
Yes.
AJ O'Neil [00:12:11]:
And then and and then and then, like, you solve it, and they're like, well, that's not the solution that we have in our book sheet here. So
Daniel Kelly [00:12:20]:
Totally. Totally. Yeah. And we we've done a lot of work to try to avoid that as much as we can while still being, you know, you have to have the parameters that they they they work in. And we tried to make the coding challenges, specifically kind of lifelike things. For example I don't wanna give too much away, but maybe there's, you know, in the the view one, maybe you have to create, like, a a carousel, right, that has some kind of functionality that requires JavaScript, rotating the images, you know, blah blah blah, so on and so forth. So we try to make it a a fairly realistic thing where you understand what the goal is. So, yeah, that that's kind of our way of trying to avoid the situation you're talking about.
Daniel Kelly [00:13:05]:
But we definitely have found over time, that we've had little instances exactly like you're talking about, and people report would report such things to us, and we've been able to to work and improve it over time. So during the coding challenge portion of the exam, it is all in your browser. We embed a Stackblitz project into the, into the platform. I don't know if you've heard of Stackblitz before.
Steve Edwards [00:13:31]:
So last week, we just talked to Tomek Sokowski from Stackblitz about tutorial kit, and I was about to ask I was about to ask you if that was what you were using or or maybe it was just embedding Stackblitz within your in the, test.
Daniel Kelly [00:13:45]:
Yep. That's right. It is just the the classic Stackblitz embed. They came out with tutorial kit. I believe they actually launched they announced it. They launched it at JavaScript. Oh, shoot. Now I'm getting my conference names mixed up.
Daniel Kelly [00:14:03]:
At Front End Nation, which is a conference fee school puts on an online conference. And, so, yeah, that that wasn't quite out when we first released the certification.
Steve Edwards [00:14:13]:
So, yes, we do know Stackblitz. We've had Eric Simons on, I think when they first started talking about in, embedding Node in the browser, a few years ago. So, yeah, we're familiar with Stackblitz.
Daniel Kelly [00:14:25]:
Right. Great. I'm sure it sounded a little crazy at that point, but I love it.
Steve Edwards [00:14:29]:
Right. Right. Right. For sure. So cool. What about okay. So people are coming in and, you know, taking the certification test. Hey.
Steve Edwards [00:14:39]:
I got the certificate. I can do view. Have you seen that being utilized, requested in the employment community in terms of people who are actually looking for Vue developers? What kind of reception has that been getting?
Daniel Kelly [00:14:57]:
Sure. That's an excellent question. From my point of view, I don't have any, I guess, state case studies per se on the employer side of, hey. We were looking for a Vue developer, and we saw some of our applicants had a had a Vue certification, and so they're the ones we hired. Honestly, our marketing team would probably have a ton of that Uh-huh. Ton of that valuable stuff. Right?
Steve Edwards [00:15:22]:
Right.
Daniel Kelly [00:15:23]:
But I definitely heard testimonials from, Vue developers themselves who have said, hey. I I got this in order to help me with the job search. Whether it actually ended up helping in the long run, that's something I don't have the feedback on, to be honest. But one thing we also think is a really great benefit, besides just the higher ability of a developer getting the cert, we also think another great benefit and something we hear actually from people who've taken the exam is that they really just wanna take it to kind of give them the confidence that they're up to date and they're knowledgeable. Like, they can kinda feel confident that, hey. I have the knowledge it takes to be a modern day day VU developer. So that's something they self evaluate. Right? Mhmm.
Daniel Kelly [00:16:09]:
And we get a lot of feedback about that being the case for them.
Steve Edwards [00:16:13]:
So it's, yeah, sort of just a measuring tool, I guess, or a way to bone up on what's the latest and make sure you're learning the the right thing and not focusing on something that's antiquated that's gonna go away.
Daniel Kelly [00:16:25]:
Right. Exactly right. Because because I haven't reviewed it all and said, hey. This is what you need to know. Right?
Steve Edwards [00:16:30]:
Mhmm.
Daniel Kelly [00:16:32]:
And, and, yeah, we also we have had, a a few employers, I know specifically who, you know, have given this exam bought this exam for their employees in order to, give people raises or, you know, elevate them in their position in the team, things like that. Right. So that's been a successful, use case for it.
Steve Edwards [00:16:55]:
Okay. Cool. Alright. So, let's talk about we'll do well, we'll do some shameless plugs towards the end for for Vue School. Yeah. Just in terms of Vue in general, obviously, we talked about how Vue 3 came out, almost 4 years ago or a little over 4 years ago.
Daniel Kelly [00:17:17]:
And I wanna Google that, Steve. I don't wanna tell y'all the wrong thing. Vue v 3.
Steve Edwards [00:17:23]:
Yeah. When
Daniel Kelly [00:17:23]:
did it come out? Let's see.
Steve Edwards [00:17:25]:
22. I'm sure you could It's 2 years. Okay.
Daniel Kelly [00:17:27]:
Oh, no. Oh, it is 22?
Steve Edwards [00:17:29]:
20 no. I'm sorry. It was officially released on September 18, 2020. Became the default version in February 22.
Daniel Kelly [00:17:37]:
Yep. Yep. That's that's accurate.
Steve Edwards [00:17:40]:
Okay. So so if you go to view dot, the view website, it's, by default, it's view 3, and then you gotta click on a link to go view the view 2 docs.
Daniel Kelly [00:17:50]:
Yep.
Steve Edwards [00:17:51]:
Is what sort of makes it the default. So we're on as we were talking about before, and we're on about 3.5 is the current release of Vue. What, what's so what's the latest and greatest coming out of Vue with with the latest releases since you're probably right on top of
Daniel Kelly [00:18:12]:
that? Absolutely. So, Viewpoint, 3.3 was a pretty big one. So with that came define model. I'm not sure if you've used define model yet. It's it's a really handy kind of wrapper around a common pattern for for taking a prop in and then omitting an event up whenever the value for that that prop changes. So think of, like, a custom input field. Right? You bring a a prop in that's called model value and then you send a, event up called update model value. Right? And so define model essentially just lets you skip the kind of song and dance there and directly alter the prop that came in inside of your child component.
Daniel Kelly [00:19:07]:
So whenever you actually assign a new value to that that prop, you're not actually mutating the prop, which would be a no no. Right? Mhmm. Instead, what it's doing under the hood is it's emitting update model value for you. So it's just a little ergonomic, yeah, quality of of development thing. So that was a a kind of big addition to 3.3. Now that's been quite quite a number of months now since that one's been out.
Steve Edwards [00:19:31]:
Can I ask you one question real quick? One of the things I used to talk about was component d model, which is basically where you, you know, you have a a parent and a child, and you can, do something within the, the child and then admit it back up to the parent. You know? And the example I have is one that I actually use in an inertia app where I have a, just like an index listing in a table. And then, within I do all the table itself is a separate component, but the search field that I'm using is in the parent. And because I'm using inertia, I gotta use a a defined URL. So, basically, in my table, I say, you know, I do all my stuff or no. I take it back. My route has to be defined in the parent. The search field is actually in the child, and so I read the child, pass it up to the parents so we can call the URL.
Steve Edwards [00:20:25]:
And that's basically component b model where you can map that real easily and have that dynamic field. Is this different, or is this an improvement on component v model? Are they just are they different things?
Daniel Kelly [00:20:36]:
It it's it's very similar. So really, we are talking about the same thing. Like, it's the v model on the using the v model in the parent on the child component. That's exactly what this is supporting. Okay. But it's just when you're doing your logic inside the child, it's making that logic inside the child a little bit easier to to reason about and ensure less lines to write.
Steve Edwards [00:20:59]:
Okay. So it's, yeah, sort of along the same. Yeah. It's really it's an easy way to because it's one of the thornier problems with making everything, self contained component, you know, trying to so you don't have this huge, you know, 500 line component with everything in it. You can break things into reusable components. But then you gotta communicate between the parent and the child, and that's where it gets gets, really sticky in dynamic ways. So okay. So sorry to interrupt.
Steve Edwards [00:21:25]:
So or you were going on from there.
Daniel Kelly [00:21:27]:
No worries. No worries. So 3.4, honestly, I have no real recollection of of what that was.
Steve Edwards [00:21:35]:
Very important release.
Daniel Kelly [00:21:38]:
Yeah. Truly minor release, right, at least in my my mind. So 3 in 3.5, just because it's very recent, I I am thinking about, of course, there's always performance improvements in every release. Right? But, also, 3.5 brought about a feature called props destructure. So, when you're working with the composition API inside of your script setup tags, you use a a macro called define props
Steve Edwards [00:22:09]:
in
Daniel Kelly [00:22:09]:
order to define your props. Right?
Steve Edwards [00:22:11]:
Right.
Daniel Kelly [00:22:13]:
Well, if you wanted to add defaults to your, to your props, you had to use this weird with defaults method, kinda wrap the whole define props call, and then have a second argument to the with defaults be your your actual default. So you're kind of, like, declaring your props here, and then you're declaring the the defaults for those those props here. And you just kinda have to, you know, put those keys in twice, and it's just kinda weird and cumbersome. And then when you're working with your props, you have to say const props equals define props, and then you're working with those, you know, those props off of that props object. Mhmm. So what props destructure does is it allows you to destructure your props from defined props. K? So now you're not working with props dot blah blah blah all throughout the components, throughout the script section, anyway. Now you can just get the actual prop name.
Daniel Kelly [00:23:09]:
Right? So
Steve Edwards [00:23:10]:
Oh, I gotta stop using this.
Daniel Kelly [00:23:12]:
And it's it's it's seamless. They're not real reactive refs, so you don't have to use that value. They're under the hood. It actually compiles back to props dot whatever the prop name is. Yeah. It's just super handy. And the other benefit is is you can define the defaults in the destructure statement. There's no with defaults function that you have to do anymore.
Daniel Kelly [00:23:35]:
So, yeah. That's a that's a big ad for 3.5.
Steve Edwards [00:23:39]:
I've wrestled with that for quite a while, in a particular app that I do, so that's I gotta look into this for sure.
Daniel Kelly [00:23:46]:
Okay. Yeah. Definitely do. Definitely do.
Steve Edwards [00:23:51]:
See. So I'm looking at your view school article on what's coming in 3.5. So use template ref. Yep. Use ID. That's more for server side rendering, it looks like.
Daniel Kelly [00:24:04]:
It is. That's a really cool one, though, especially if you're in the Nuxt world. Just getting a uniquely generated generated ID, but it's that same uniquely generated ID both on the client and the server. So there are no more, like, juggling and passing the unique ID that you generate on the server down to the client. You just you just call it, and it's the same everywhere. There's no mismatch, hydration, mismatch issues, which has just been a pain in the past.
Steve Edwards [00:24:30]:
Right. That's a good segue. So moving into Nuxt. We talked earlier about Nuxt and what's going on with Nuxt, and you'd mentioned this a few bullet points for those in the jobs world who might not know what Nuxt is. Nuxt is basically Nuxt for React. I don't remember which came first, and I know Nuxt is alphabetically before Nuxt, so maybe it came first.
Daniel Kelly [00:24:54]:
I think that's the case. Yeah.
Steve Edwards [00:24:56]:
Right? I think, Angular has a sort of similar tool they came out with. I can't remember what it's called. Svelte test, SvelteKit. So just so you can understand the Nuxt, side of things where Vue is just primarily front end JavaScript, Nuxt gives you the whole server rendering stack.
Daniel Kelly [00:25:15]:
Steve, I I think Next, like, had to come out first because Nuxt is like a play on words on
Steve Edwards [00:25:20]:
Is that what it is? Makes sense.
Daniel Kelly [00:25:22]:
Because who would name something Nuxt? Like That's a good question. Yeah. I think it yeah.
Steve Edwards [00:25:28]:
I could ask that about Vue and Drupal and any number of other names too. So
Daniel Kelly [00:25:33]:
So interesting fact, the name of the framework Vue comes from the French word for Vue, v I e w. No. That's Oh, isn't it? Oh, that's v v is fast. Fast.
Steve Edwards [00:25:45]:
V is fast. Yeah.
Daniel Kelly [00:25:46]:
Yeah. View is the, like, the the view layer, like, you know, the UI layer. Right?
Steve Edwards [00:25:51]:
Okay. So that actually has significance. Yeah.
Daniel Kelly [00:25:56]:
Never listen. Evan took the same strategy Evan took the same strategy for both Vue and Vue. He just, yeah, just grab the French word for
Steve Edwards [00:26:03]:
Right. Yeah. The the story of I always remember the story of Drupal where it came from, and it was actually a typo.
Daniel Kelly [00:26:10]:
Oh, really?
Steve Edwards [00:26:11]:
And, because, Dries' boytard is Belgian, and he was he meant he was he was trying to drop hell. It was like a French or Belgian word for drop, like a drop of water, and it was a misspelling and and ended up just sticking with it. And it took off from there. So sort of funny how some of these names come about.
Daniel Kelly [00:26:30]:
It's the best way. Yeah. Right. Happy accidents.
Steve Edwards [00:26:33]:
Yes. So, Nux, why don't you give us an overview of Nux, what it does and what its capabilities are, at least currently?
Daniel Kelly [00:26:41]:
Sure. So, Nuxt is like, the big benefit of Nuxt is the server side rendering portion. They take a lot of, I I mean, you could server side render with just vanilla view. Right? But you're having to build a lot of things up on your own if you decide to go that route. So Nuxt, makes it really easy to make server rendered view applications. But the really cool thing that's happened with Nuxt 3 versus with Nuxt 2, well, number 1, they've embraced the composition API, like, wholeheartedly. Okay? So Nuxt 3 composition API is, like, the first party way of interacting and and creating, which I like. A lot of Vue developers these days, I think, have jumped on the Composition API boat.
Daniel Kelly [00:27:28]:
I know some haven't, and that's fine, but it's kind of the direction a lot of the framework is going.
Steve Edwards [00:27:33]:
Mhmm.
Daniel Kelly [00:27:34]:
But, the other really exciting part, though, about these next steps is that you have the ability to specify where and how you're going to render things so granularly. And what I mean by that is, you could choose to render a certain page only on the client. So think about just that one page is rendered just like a normal view application. You can skip the NUC server side rendering altogether. K? And that's at the page level. You could do the same thing, for the server. You could say, render this page only on the server. Don't hydrate it on the client side.
Daniel Kelly [00:28:15]:
I don't want any of that JavaScript coming down and, you know, this is just a content oriented kinda page. I don't need it.
Steve Edwards [00:28:20]:
Like an about page or something like that. Right? That's the common usage.
Daniel Kelly [00:28:24]:
Exactly. Exactly. So you can do that not just at the app level. You used to could do that at the app level. Now you can do that at the page level. So you can mix and match your, you know, different rendering modes per page. But then you can also even do that at the component level. So, you could have this, you know, one page is rendered universally both on the the client and the server.
Daniel Kelly [00:28:47]:
But nested down inside that page, you could have a component that's only rendered on the server. And then whenever the props for that component change, it doesn't run any client side JavaScript. It just goes back to the server, fetches it, it rerenders on the server, and it replaces that HTML, you know, on the page. So, it's a really dynamic way of being able to choose exactly when and where you're, you're rendering your your view components. So, that that server rendered example is really great for something like rendering markdown. Right? Loading a markdown parser into your browser is kind of a heavy thing. And a lot of times, what we're using markdown for is for displaying static content. So we don't need that run-in the browser.
Daniel Kelly [00:29:28]:
We can save so much, you know, time in terms of loading, by just rendering that on server and sending the the loaded thing. But then that's just that one component on your page. All your other stuff could still be be dynamic. So pretty cool.
Steve Edwards [00:29:42]:
So that's sort of the astro approach to things, isn't it pretty much where you can everything server and then you can have your I mean, I'm sure you don't use the same terminology. They call it islands architecture where you can have your little island of interactivity in the middle of server side content. So that's pretty much the at least from the from that high level. But I'm sure there's a lot of other more dynamic stuff you can do within Nuxt within your command. Right?
Daniel Kelly [00:30:05]:
Oh, yeah. There's there's tons of other stuff it can do. But in terms of your comparison, Astro, that's exactly right. That's, yeah, the Astro is the server rendered by default. Right? And then client rendered by opt in. Nuxt is kind of the opposite. Mhmm. It's, it's universal by default, and then you can you can opt in to client only or or server only Mhmm.
Daniel Kelly [00:30:27]:
Per pager or per component. But, yeah, in terms of, like, other things that Nuxt has to offer for the Vue developer, just a lot of quality of life things. Things like auto imports for all the composables in your composables directory, things like auto imports for the core view reactive functions, you know, things like ref computed, all that kind of stuff. You just they just work. You just use them and they work. Right? Which is nice. But if you want to still import everything, like, you have the ability to do that. You can turn off the auto imports and things like that.
Daniel Kelly [00:31:01]:
So
Steve Edwards [00:31:02]:
So now if you're using Next, one of the big differences, and I I I think Nuxt is like this or some of the other ones, is how your routing is handled. Whereas with a with a strictly view front end, you have your front end routes that you have to define in Vue router, whereas with Nuxt, it's all based on folder structure. So you'll have a structure, and then you can define, you know, I want my URL to look like this, so that's how you name your folders. And then you can pass in dynamic values like ID values and, you know, sort of render
Daniel Kelly [00:31:33]:
Yep.
Steve Edwards [00:31:34]:
Blog post based on its slug or, you know, however you have identified it. So that's, you know, that's a pretty common thing. I've seen people I've in fact, I've worked on an app one time where everything was they were connecting to a dot net back end. Okay. But but they used Nuxt because they liked the page routing instead of just straight view on the front end.
Daniel Kelly [00:31:57]:
Okay. That's fair. And and a good opportunity for a shameless plug, we do have a Laravel course at the school where we do that same thing. We use Really? Laravel for the back end as an API. Yeah. And we use Nuxt on the front end.
Steve Edwards [00:32:07]:
Oh, that's interesting. Okay. Yeah. So my day to day is is a pretty huge app with Laravel and and REST APIs. You know, it was initially built way back in v 2, where it's all APIs, and then the Vue front end connects to the back end, you know, through the defined APIs. I, myself, you know, people have heard me talk about this. I'm a huge fan of inertia. JS, if you're familiar, love inertia.
Steve Edwards [00:32:30]:
In fact, I had Jonathan on here a couple times when inertia was pretty new. And, I will work with it with Laravel Laravel on the back end, Vue on the front end, Inertia in the middle, and it's it's awesome.
Daniel Kelly [00:32:41]:
Very cool. I I've got a colleague that just came on to our team, within, like, last 8 months maybe. And, yeah, he was really big in their inertia, taught me some things on it, and, looks really interesting. I haven't had the opportunity myself to to use it in prod. But
Steve Edwards [00:32:56]:
Yeah. It's really slick. If you're and if you're familiar, like, Next is, you know, your back end is in Node. You're writing in Node. Js if you're doing it in the back end. Right? So for someone like me who comes from the PHP world, and is familiar with Laravel and PHP, then that's a godsend. Being able to use something like that that you're already familiar with, and you don't have to learn a, you know, a whole new coding technology. So inertia is awesome.
Steve Edwards [00:33:20]:
It's it's so fast. It's crazy how fast it is. So I'd be real curious to see this course. I don't know if you oh, you said it's just Laravel with if you're using so if you're using Laravel for the back end with Nuxt
Daniel Kelly [00:33:34]:
Mhmm.
Steve Edwards [00:33:34]:
Yep. You're still doing the server side rendering because your Laravel controllers are returning your your content, to your Nuxt components, and it's fully rendered HTML that it's I mean, you're using blade templates to for the formatting of the HTML, or how is that happening?
Daniel Kelly [00:33:51]:
It's so it's, I'm trying to find the URL here. So if you just Google the name of the course is Laravel back ends for Vue. Js 3. Mhmm. And then Vue School. I'm sure you could find it. Mhmm. But the the whole approach is, yes, we're still server do we server site run-in the course? We might turn SSR off, actually.
Steve Edwards [00:34:13]:
Yeah. Here it is. Okay.
Daniel Kelly [00:34:14]:
We do. We turn SSR off. But you would you don't necessarily have to. You you could do the server side rendering bit. But but, basically, we used in the course, we used Nuxt just as the client, right, as as the JavaScript runs in the client. And the only reason we chose to use Nuxt instead of straight view was just because of some of the niceties like the auto imports and and things like that. Okay.
Steve Edwards [00:34:35]:
Yeah. Now I remember from a performance standpoint, one of the additions that I'm pretty sure is Nuxt 3 was Nitro, which is basically a rendering engine. So, can you tell us about Nitro?
Daniel Kelly [00:34:50]:
So, there's kind of this weird, like, stacking order of what what builds Nuxt. And the Nuxt core team actually have an organization now on GitHub called Un. Js, which powers a lot of the, inner workings of of Nuxt. But those, those packages are also available for the wire community at large to use. And and Nitro is one of those packages. Right?
Steve Edwards [00:35:15]:
Mhmm.
Daniel Kelly [00:35:15]:
So Nitro is the kind of the server layer there. It renders your Vue components on the server side, of course, and sends the HTML to the browser. But the other really cool thing that Nitro enables a Nuxt 3 project to have out of the box is API endpoints. This is something you didn't have in Nuxt too. So now you just have a folder in your Nuxt project called server, and then you have a folder inside of that folder called API. And any file within that directory automatically becomes an API endpoint. So, you've really got the whole like, everything you need to build a full stack app right there inside of your one Nuxt project. There's no reason to hook it up to an external API anymore.
Daniel Kelly [00:36:05]:
Of course, you still could. I mean, there's nothing wrong with that. Right? We use Laravel in the course. But if you don't wanna have to manage this separate back end, you can actually have your entire you're gonna have your REST API and your, you know, and your actual user facing applications all in the same repo, which is is pretty cool.
Steve Edwards [00:36:24]:
So as sort of a drop in, if you have APIs written for, what, any, CMS online CMS versus maybe something or even something that you have locally, such as Laravel, MySQL, or, you know Yep. Node. Js with, Mongo, API defined, or something like that, then you can drop it in and use it with with Nuxt.
Daniel Kelly [00:36:46]:
Yeah. I I wouldn't necessarily say you could drop it in. I mean, it is they do have their own syntax, right,
Steve Edwards [00:36:51]:
for
Daniel Kelly [00:36:52]:
for for the API endpoints. Mhmm. But if you have the data in a database somewhere, you know, you can just start interacting with that database directly via these these API endpoints and then sending the, you know, the data to your your front end. Right?
Steve Edwards [00:37:08]:
And so is it sending everything as props then? Is that how it's how it's
Daniel Kelly [00:37:12]:
so how
Steve Edwards [00:37:12]:
does it send it to the front end?
Daniel Kelly [00:37:15]:
So on your on your view pages so you talked about that page file based routing just a moment ago. Right? So Mhmm. In your view components, you call a composable a built in composable called use fetch, and it makes a a fetch request, and you just pass it the route for that API endpoint. Right? So you do slash API slash users or slash post or whatever. So that's how you connect your Vue pages to those those API endpoints. And, of course, on the server side, on the server side, when you make that request, it's actually gonna skip the network layer altogether, and it's just gonna go call the function that that API endpoint is is made up of. Mhmm. But then on the client side, when you're navigating, you know, 1st page load, it's all server side rendered and it hydrates.
Daniel Kelly [00:38:03]:
But then as you navigate to new pages, it's gonna make that request, asynchronously. Right? So, it's it's it's pretty nice. Like, it handles things like, you know, serializing your JSON for you. So, like, you can just return an object from the API endpoint. You don't have to serialize it first or tell it what kind of data it is or something like that. You just you return an object. It assumes, okay. This is this is JSON.
Daniel Kelly [00:38:29]:
Things like that. You also have type safe auto completions for your, for your API endpoint route. So if I'm calling useFetch on my front end on my my page, as soon as I start typing in the URL, I get a list of, of drop down autocomplete says what endpoints are available. Right? So I can just pick, oh, I want API slash users or I want API slash post. And because it all exists in the same project, that makes that possible. Right? So yeah.
Steve Edwards [00:39:02]:
So okay. So you mentioned that
Daniel Kelly [00:39:03]:
it's
Steve Edwards [00:39:03]:
been extracted into its own separate sort of rendering engine. Is it still geared specifically for Vue, or is it something that can be used with other front end? You know, I think of, for instance, Veet. When Veet first came out, the original iteration was view only. And then Yeah. He the next version, he said, okay. You can plug and play with anything, and it's just gone nuts with how many people replace webpack with with v and Right. And so on. So is is on JS, is this the the same idea, or is it still strictly for Vue?
Daniel Kelly [00:39:41]:
Yeah. It is the same idea. Everything in the NGS, organization is completely framework agnostic, and, indeed, other frameworks have picked up have picked up packages and have built off them to to make their own own thing. I can't remember I can't remember what it is, but there was some other, you know, how the JavaScript build is frameworks every week. Right. But there's there's some new framework I read about recently that they they built their server layer on top of of Nitro. But, yeah, that's that's the approach.
Steve Edwards [00:40:16]:
Yeah. I've seen that before. I did some work with another company that had a a specific JavaScript form render where everything was rendering forms, and they extracted it, you know, and made it open source. They had a story where another company used it and made 1,000,000 of dollars off of their work. They wouldn't even mention the company name when we talked to them. But, yeah, that's cool when you can extract that and use it for other things as well. Yeah. Any other next next things, new features, you know, anything what's coming down the pike with Nuxt
Daniel Kelly [00:40:52]:
or even Vue 3? I know Nuxt 4 is coming fairly soon. That's, I'm not totally sure that the biggest thing in NUXT 4 is there's gonna be a change to the project structure. Like, a lot of the things that were in your root directory for NUXT 3 will now be nested under an app directory, an app directory for Nuxt 4. And I think there's some, like, TypeScript benefits to that. Like, while you're watching certain files locally or something while you're developing now, it can it can focus on just that one app folder or something. I don't remember exactly what it is, but it's supposed to make your development process just a little bit, you know, faster, your your dev server a little faster or something like that. Yeah. So
Steve Edwards [00:41:39]:
I'm curious. So they're gonna do a NUXT 4, but still based it on Vue 3. Is that Yep. Right? Because it doesn't sound everything I'm, you know, reading I was just reading something by Linus Borg, that, you know, Vue 2 to Vue 3 was such a huge, you know, gutting and rewriting of everything and lots of backwards breaking stuff. Although, they did do I think it still supported the options API, but it was still so huge. It sounds like view 4 is gonna be not quite as, aggressive, shall we say, or changing going forward.
Daniel Kelly [00:42:12]:
Which is a good thing. Yeah. Yeah. And and I think the Vue, like, where Vue is at in its life, it's it's stable and it's well loved. It's it's easy to use. Like, I don't think at this point in its lifespan you need this this major change like we had from 2 to 3. Right?
Steve Edwards [00:42:30]:
Right.
Daniel Kelly [00:42:30]:
Which is great news for developers. It's less things we have to do to migrate. Mhmm.
Steve Edwards [00:42:37]:
And then I'll probably, hopefully, you know, sort of, encourage people to upgrade from Vue 2 to Vue 3, which is not a small undertaking undertaking, especially when you deal with some very large, you know, enterprise type applications and Yep.
Daniel Kelly [00:42:54]:
And everything. Depending on the libraries you're using and things like that.
Steve Edwards [00:42:57]:
Absolutely. I do know, and I've mentioned this before. I think it was 2.7 of Vue had Mhmm. Composition API stuff embedded in it. And the idea being that you could still be on Vue 2, but slow sort of migrate to Vue 3 Yep.
AJ O'Neil [00:43:11]:
And
Steve Edwards [00:43:12]:
then, you know, throw the switch in and migrate over to Vue 3 from there.
Daniel Kelly [00:43:17]:
Yep. Yep. It's, I mean, they've definitely made some good tooling to help, help you make that migration, but Mhmm. Like you said, the enterprise level, you know, size applications, it's, yeah, it's it's still work and quite a bit of it.
Steve Edwards [00:43:30]:
Oh, yeah. We have, like, upwards of probably 5 to 600 different components in our Vue 2 app alone that's been around, you know, for probably 10, 11 years. So wouldn't be a small undertaking, especially when you start incorporating, you know, TypeScript because I tried to mess with TypeScript and Vue 2 a couple times, and it was, yeah, it was not a good experience. I mean, it's basically sort of bolted on instead of, you know, built in. Right. So it definitely made things a lot more difficult. But, you know, that pretty much anything large is gonna be incorporating TypeScript anymore.
Daniel Kelly [00:44:02]:
Yep. Yep.
Steve Edwards [00:44:04]:
Cool. Anything else Vue, Nxt related that we didn't cover that you're, you're dealing with at Vue School or covering?
Daniel Kelly [00:44:14]:
No. I think we just about covered it all, Steve. I I guess I I do wanna throw in one shameless plug for our our VGS master class. Of course. We did release that. It's a progressively released course, so we started releasing it back in March of this year, and we're still releasing lessons where you build a, real world application, specifically a project management app, something like Asana or Monday or something like that. Mhmm. So if you are, you have the basics of Vue down and and you wanna kinda take it to the next level, this is a really great course, for you.
Steve Edwards [00:44:54]:
Alright. Cool. Yeah. I've got the URL up here on the screen for those who are watching, the Vue JS 3 master class, at viewschool.io. Alrighty. Before I forget, if people wanna follow you and give you money and and read all your view wisdom, where's the best places to do that?
Daniel Kelly [00:45:16]:
I'll have to go set up the, the donation app right now. So that sounds like a great idea. No. You could follow me on, Twitter. I'm Daniel Kelly _io. That's where I'm most active, if you can even call me active. I'm I'm not a huge social media guy. Mhmm.
Daniel Kelly [00:45:35]:
But you can follow me there. View School is View School IO on Twitter. And, just, you know, just Google Daniel Kelly LinkedIn or View School LinkedIn. You'll be able to find us there as well.
Steve Edwards [00:45:48]:
Alrighty. So with that, we will move on to PIX. PIX is the part of the show where we can talk about whatever we want. Doesn't necessarily have to be tech related. Obviously, it was in recent reports. AJ, we'll let you go first. What do you got for us for picks this week?
AJ O'Neil [00:46:06]:
Boy, oh, boy, have I got a good one for you. I I I don't think I'm gonna take this back because, you know, sometimes I make recommendations and then a month later, I'm like, actually, that was a bad idea. Okay. Browsers, finally, as of March 2023, have support for ec ECMAScript modules. Ubiquitous support. So whether you're on iPhone or Android or Chrome or Edge or Safari or Firefox, as of March 2023, all browsers finally support ECMAScript modules. That was about 18 months ago, and that's my threshold for when I say, okay. It's safe to use a browser feature.
AJ O'Neil [00:47:00]:
Because, you know, a lot of people, they haven't had a power outage in the last 18 months. And so if they haven't had a power outage, they haven't like, their browser hasn't been updated yet, because their, you know, their computer's still going. Or maybe it's on Windows where it, you know, it it, like, just shuts down the computer no matter what you're doing. Like, you're in the middle of typing a document. It's like shutting down to update. So I guess, like, within 18 months, either people have had a power outage or their computer has, like, crashed from pending updates. So with that, on the browser side,
Daniel Kelly [00:47:36]:
we're good
AJ O'Neil [00:47:37]:
to go. We can use ECMAScript modules. We don't need transpilers. It can work. As of March 2024, there was a PR for, ECMAScript support in node that is now available as an experimental feature in node v 22. So I believe that it is now safe to publish ECMAScript modules without any transpilers. And so you might say, oh, node nodes had nodes had support for it forever. No.
AJ O'Neil [00:48:19]:
It hasn't. Node has only supported node has had the the, the red blue function problem, the colored function problem, where you can either use ESM or you can use common JS, but you can't use both. And almost every module in the entire ecosystem uses common JS. So the moment that you introduce an import, an an ESM dependency, now you break everything or you have to transpile. But the new feature flag is that as long as you don't use a top level await. So if you just have an init function or a main function, if there's anything that you need to do as part of the initialization of your module, if you're willing to just put that in an an init function that you export or a main function that you export or you know? As long as you couch that or put it in a caching function where the first time whatever function needs that thing, you know, it it runs. As long as you put the top level of weight inside of an export, so so, basically, as long as you don't have a true top level await, you can now require an an ESM module from a common JS module, which means that we no longer have the red blue function problem. That modules in node are just modules except for that one case if they actually have in the body of the e s m, oh, wait.
AJ O'Neil [00:49:45]:
Whatever. And I think that I hope I hope that we can all agree that it's a sacrifice worth making to move that await into a function that's exported as the init function or whatever so that so that you can publish a module without transpiling, and it'd be available ever. Now, of course, since most people are on no. I don't would say most people. Since most most popular influencers are now on the TypeScript bus, You know, you you're not getting away from the transpiling problem. But you can you that that's a topic for another time. You can have I use the TypeScript checker every day. All of my code is typed.
AJ O'Neil [00:50:25]:
I even am using SQL c with node, such that I I had a left join in a SQL statement. And that SQL c allows you to write the raw SQL and then generate the code. So rather than writing the code that generates the SQL, you write the SQL that generates the code. Parameterized, all that. It's wonderful. I love it. I had a left join in my SQL code, and I got a type error on, one of the things I was iterating over. It said, you know, error.
AJ O'Neil [00:50:57]:
This can be null. And that was the moment when I felt we have arrived. Technology is maybe good again. Like, maybe we're on the right track. If I can write SQL and get a type error from a left join, Maybe maybe there is a bright future somewhere on the horizon. So
Steve Edwards [00:51:20]:
I was wondering why I was able to sleep better at night lately. That answers my question.
AJ O'Neil [00:51:25]:
So that's that's my that's my main pick, is is just that, and and I I am you know, I don't know how many experimental features have made it all the way to the point where they have a flag and are properly documented and everything and then don't make it in. But this seems like a no brainer. So I'm I'm willing to put my my eggs in this basket and say, it's time to use e s m imports. But for please, please, for the love of all that is holy and and heavenly and sacred in this world, just use one default export. Don't have a 1,000,000,000,000,000 exports, please. But that said, this is something I'm excited about. There have been headaches around this for a long time because of the bundlers, not because of the browser, because of the bundlers. It's been a pain in the butt to get isomorphic code working in both node and the browser.
AJ O'Neil [00:52:23]:
The browser is super easy to do, and node is super easy to do. You don't need to require stem or any of that. You just need a simple or. But because of the way that the bundlers do the window detection versus the global disk detection versus there there's all this crap that you like, boilerplate. There's, like, 6 lines of boilerplate that you have to have in order to get a common JS module that would otherwise work fine in Node in the browser without any problem, without hardly like, with one line, literally one line of, quote, unquote, boilerplate. For the bundlers, yet, it's it's atrocious because they they all do it wrong. They don't follow the spec. They don't anyway.
AJ O'Neil [00:53:03]:
But yeah. So I'm I believe I believe from today onward, I will be writing, ESM import and export, and I know that that went way over there allotted 2 minutes. Oops.
Steve Edwards [00:53:17]:
Oops. So another way we can blame Flow at Progressive for all the problems. For those who don't understand in the America, we have these insurance commercials. This guy named Flow always talked about bundling insurance. So
Daniel Kelly [00:53:32]:
They're everywhere.
Steve Edwards [00:53:33]:
That's what comes to my mind, unfortunately. Was that it, AJ?
AJ O'Neil [00:53:38]:
I'm I'm hoping you're gonna field the best dad joke ever.
Steve Edwards [00:53:44]:
The
AJ O'Neil [00:53:44]:
best tech the best tech dad joke ever.
Steve Edwards [00:53:48]:
Yeah.
AJ O'Neil [00:53:48]:
No? Okay. Alright. Are you gonna do it, or do I need to do it?
Steve Edwards [00:53:52]:
Is it is it all a good fit
AJ O'Neil [00:53:53]:
for you?
Steve Edwards [00:53:54]:
Oh, yeah. Oh, yeah. So let's talk about that. So, for those who follow me on Twitter, AJ made
Daniel Kelly [00:54:01]:
a
Steve Edwards [00:54:01]:
attempt, at a dad joke that apparently went over my head. And so, I just finally got it explained to me this morning before we came on. So, you wanna explain it, AJ? And for those who are maybe those who are less dense than I will get it.
AJ O'Neil [00:54:16]:
I I think it just is your experience, not that sense. But Right. So Steve was talking to me, and he said, what do you think about SQL Migrators, AJ? And I said, well, you know, they have their ups and downs.
Steve Edwards [00:54:32]:
Wait. Sorry. Sorry. Sorry. I was pulling up the tweet. And I didn't get it because did go Yeah. I didn't get it because the migration tools I've used did don't use the up down up and down terminology, and and so I missed it. And I felt sorry.
Steve Edwards [00:54:48]:
It was it was a a for effort, though. I I appreciate the thought. Going to the dad joke whenever you see that, that's that tells me that, you're learning. That So it That warms my heart. Speaking of dad jokes of the week, let's see. This one's a little long, but hopefully, you'll get the, it's maybe a little more visual, but, it's what I got for this week. So imagine this thing was Monday, Greg, Tuesday, Ian, Wednesday, Greg, Thursday, Ian, Friday, Greg, Saturday, Ian, Sunday, Greg. That is known as the Gregorian calendar.
Steve Edwards [00:55:30]:
Right. I was talking to my friend one, day not too long ago, and I said, you know, I used to be a heavy drinker, and he said, oh, you stopped drinking? I said, no. I just lost weight.
Daniel Kelly [00:55:42]:
Saw that one on Twitter the other day. Did it? Great. Yeah. That was good.
Steve Edwards [00:55:45]:
I wrote that originally. I really like I write all my dad jokes. And then, finally, did you know it's funny. When you die, people cry and they're upset, and they beg for you to come back. But when you do, they freak out. So those are the dad jokes of the week. Alright. Daniel, your turn.
Steve Edwards [00:56:08]:
What do you got for us?
Daniel Kelly [00:56:10]:
So picks. I'm gonna go with a book pick. I have been listening to a book called The Fairy Tale because he actually reads books anymore. Listen to it, through Spotify. It's by Stephen King. Definitely recommend checking that out if you're you're into Stephen King. Very, very well written book, and it hasn't gotten to the the creepy part yet. But, like, there's little hints of it in there, and it's, very intriguing.
Daniel Kelly [00:56:37]:
So definitely recommend that one.
Steve Edwards [00:56:39]:
Yeah. You know Stephen King, you gotta expect some level of creepiness. Right?
Daniel Kelly [00:56:43]:
Absolutely. Absolutely. As far as I'm gonna do I'm gonna throw a music pick in here as well because I've had an earworm for the past week. I'm a nineties kid. Does anybody remember Yellowcard? Does that band name ring any bells? Yes. Yes.
AJ O'Neil [00:57:01]:
Alright. Is that is that the her hair is everywhere or is that
Daniel Kelly [00:57:05]:
No. No. No. Her hair is not everywhere. Yeah. Believe. No. No.
Daniel Kelly [00:57:10]:
No. What was the name of it? They're very popular one. Man, I can't even remember the the the most popular one they have. I think it was called Believe, but I'm not singing it for you.
Steve Edwards [00:57:21]:
Yeah.
Daniel Kelly [00:57:22]:
That's been my earworm for the the past week. Very, you know, heavy guitars. They have violin in there, which is really interesting.
AJ O'Neil [00:57:31]:
You know, I love that. I think that that's the best. When when, Hello, Maybe came out, that was one of the things that I thought was so great. I love orchestral crossover in any music, be be it punk or rap or anything. I love orchestral crossovers.
Daniel Kelly [00:57:46]:
Oh, it's it's beautiful because you have, I mean, they live they have a violinist in their band, and so she'll do this, like, solo violin thing. And then the the whole band will kick in and just and it's really cool sounding. But I think Believe is the name of of one of their most popular songs.
Steve Edwards [00:58:05]:
Okay. Believe by Yellowcard. I was not familiar with that band, but then I wasn't really listening to loud radio in the nineties.
Daniel Kelly [00:58:14]:
If you remember story of the year, they kinda remind me of them slightly, just a little less screamy.
Steve Edwards [00:58:20]:
Less screamy? More musical?
Daniel Kelly [00:58:23]:
That's right. That's right.
Steve Edwards [00:58:25]:
Cool. Alrighty. Well, thank you, Daniel, for coming on. It's been good to have you. It's been good to talk to you on JavaScript Jabber. We've already talked about where people can give you money. So thanks, everybody, for watching and listening, and we will talk to you next time on JavaScript Java.
Hello, everybody. Welcome to another exciting episode of JavaScript Jabber. I am Steve Edwards, the host with the face for radio and the voice for being a mime, but I'm still your host, at least for today. Chuck is out, had some work to do. Dan is on vacation, so, he's taking some time off. So it's me. And on the panel, I have mister AJ O'Neil. How are you doing, AJ?
AJ O'Neil [00:00:30]:
I'm doing fine flipping fantastic.
Steve Edwards [00:00:33]:
Yo yo yo yo yo.
AJ O'Neil [00:00:35]:
I added the yo yo now.
Steve Edwards [00:00:37]:
Oh, did you? I did
AJ O'Neil [00:00:37]:
it on the back end.
Steve Edwards [00:00:38]:
Oh, back end. Sorry.
AJ O'Neil [00:00:39]:
You asked me a question,
Steve Edwards [00:00:40]:
so I Okay.
AJ O'Neil [00:00:41]:
I gave you the answer, and then I added the yo yo yo. Yo. Yo yo yo, coming at you live from my goodness isn't the weather heavenly today?
Daniel Kelly [00:00:50]:
Yes. It is here too.
Steve Edwards [00:00:51]:
It's awesome. I was thinking fall was coming way too early last week but it's warming up. It's supposed to be 90 here in Portland tomorrow. We're looking at some sunny skies and some good weather, so great. We did a drive
AJ O'Neil [00:01:03]:
through the mountains yesterday with the kiddos.
Steve Edwards [00:01:05]:
Did you?
AJ O'Neil [00:01:05]:
See the fall colors. Yeah. It was wonderful.
Steve Edwards [00:01:09]:
Yeah. Okay. It is after 21st, so I guess we can start calling it fall now, can't we? Although here, we tend to have really nice September October, Indian summer, they call it. So that's always nice. Anyway, as we blabber on, let's welcome our guest, mister Daniel Kelly. How are you doing, Daniel?
Daniel Kelly [00:01:26]:
Hey, Steve. Doing great. Great to be here.
Steve Edwards [00:01:29]:
So, Daniel is a prominent member of the Vue JS community. And so since I don't do the views on Vue podcast anymore, I like to bring in some Vue JS content into JavaScript Jabber every once in a while, and this is my chance.
Daniel Kelly [00:01:46]:
It's a must. Yeah. Get gotta get a rep view here.
Steve Edwards [00:01:49]:
Yes. That's right. We need a good view of what's going on. Sorry. I missed my, dang it. I missed my sound effect. I'll do a delay delay. There we go.
Steve Edwards [00:01:58]:
Thank you. Okay. So, first of all, Daniel, why don't you just give us an intro on who you are and why you're famous, and, we'll go from there.
Daniel Kelly [00:02:07]:
Sure. So, I am the lead instructor over at Vue School. We're one of the, primary places you can go to learn Vue JS, whether you're a beginner or, you know, even a a more advanced Vue person. We've got all kinds of tutorials, available for everyone. So, I've been working with Vue School for almost 4 years now. Has it really been that long? Yeah. Getting older, I think. Yeah.
Daniel Kelly [00:02:33]:
So, we also run-in the, in the conference kinda circuit there. I go to conferences all the time with Vue School. We put on a few virtual conferences and, also have recently got into the certification space. So we worked with Evan Yu to create an official Vue. Js, certificate so you can take an exam, you know, show potential employers I know my stuff. Right? Mhmm. So, yeah, that's kind of what I do on the the day to day these days.
Steve Edwards [00:03:04]:
So let's talk about that for a minute. I know way back when before I got into web development, I was, doing software, and I got into doing some network certifications. So, if you're looking at network certifications, for instance, I was doing on 1, this is Windows. This is early days of Linux. I don't even know if Linux was out yet, but, like, Windows NT network certifications. You know, there's a plus certifications. And I know that it's seen as a way to say, hey. I really know what I'm talking about.
Steve Edwards [00:03:37]:
I can remember when I was in the Drupal world. You know, there was always issue when, you know, when hiring a developer to do a Drupal site for you. How do you know that they know their stuff? And I know that Drupal Drupal has come up with certification test if I remember. I haven't looked in a while. So, you know, view development, any type of development can cover a wide array of of topics. You know? Absolutely. So I'm just curious. This first chance I've had to talk to somebody about this, can you talk about what's involved in generating a a certification test? And, obviously, you got the input from the guy who created Vue, which is you can't get much lower level than that in computer speak.
Steve Edwards [00:04:20]:
Right? That's right. We're we're
Daniel Kelly [00:04:22]:
very happy about that for sure.
Steve Edwards [00:04:24]:
Right. And then so and then what does it cover? What are the the main areas of
Daniel Kelly [00:04:30]:
So we've got yeah. We've got it really focuses on, like, core Vue JS. Right? And we have 2 different levels of the certification. So there's, like, a, mid level or just kind of regular level Developer cert, and then there's the senior level Developer Certification. And so, at the, at level 1, we're basically testing, hey, do you know just like the basics of Vue? Right? Can you create a component? Do you know how props and emits work? Do you know how to, you know, how to start a Vue application? Kind of basic things, like that. And the way we test you on that is we provide multiple choice questions at the beginning of the exam And then we provide, 2 different coding challenges that you have to complete to build some kind of, some kind of little app. Right? So it's it's fairly in-depth in terms of what you actually have to do to pass the exam. I mean, if you can't create this if you can't complete the coding challenge and actually write the code for yourself, you're you're not gonna pass.
Daniel Kelly [00:05:41]:
And then at the senior level, it's the same structure. It's multiple choice questions and 2 different coding challenges. But the topics are a little bit more advanced. Things like using TypeScript with Vue, things like writing tests for your Vue components, things like a few more advanced things that are a little less used but can be very useful for creating, you know, intuitive APIs for your components, things like provide inject, for example. So, Yeah. It's, it's an interesting dynamic, and we've had a a lot of good feedback from people. One of my favorite things to share is actually, we have a boot camp that goes along with the certification as well. It's a 3 day boot camp.
Daniel Kelly [00:06:31]:
It's a virtual thing. Right? But it's basically, me or a colleague of mine doing a, just an educational style boot camp thing. And people can ask questions, and we go over all the different topics that are on the exam and teach the concepts and so on. But I actually had, one guy who works on a very popular UI library in the Vue community who attended. You're like, why would he attend? Like, he knows Vue. Right? And he came out telling me he learned stuff. So I'd really like to talk about that. It's really, really makes me feel good.
Steve Edwards [00:07:03]:
So I assume that with I mean, there's a huge number of apps set up there and still in Vue 2. I mean, I work on a very large one every day. And, you know, v 3 has been out for is it 2
Daniel Kelly [00:07:15]:
years now, I wanna say? It was like this 2020, actually, I believe. I think it's been almost 4 years now.
Steve Edwards [00:07:22]:
Has it really? Wow. Anyway okay. So you have, you know, a lot of you to step out there, but Vue 3 is the latest and greatest. So are there, sort of case to test for both? Is everything focused on Vue 3?
Daniel Kelly [00:07:38]:
That's a great question. It is focused on view 3. All of our exams, focus on the the current level. And as soon as the, as soon as the current latest is is changed to, you know, increment to the next thing, then we will have new exam material for that that next level. That's kind of our strategy there. But, yeah, it's all view 3. It does focus on the composition API as opposed to the options API, because that is the recommendation from the the Vue. Js docs now, and that's the direction Evan wanted to take it while we were developing it.
Daniel Kelly [00:08:13]:
So yeah.
Steve Edwards [00:08:15]:
Okay. So how many any ballpark figure on how many people have been have taken taken it so far?
Daniel Kelly [00:08:22]:
Oh, how many have taken it? That's a really great question. I couldn't give you an exact number. I know it's, I mean, we're literally getting people taking it every day. Their exams come in every day for the past year. So do the math on that. I'm not sure exactly how many, but yeah.
Steve Edwards [00:08:40]:
So is this run through View School? Is that so is Vue School that's running the certification test, or is it more of a, open source type thing, I guess, for lack of a better term?
Daniel Kelly [00:08:51]:
Right. We, it it is our team that produces the content along with third parties like Evan. Mhmm. But, the brand, is is called certificates.dev. So the website is certificates.dev. And we had, we started out with just the view exam.
Steve Edwards [00:09:10]:
Mhmm.
Daniel Kelly [00:09:11]:
But we found that that was so meaningful to people that we pivoted to also well, not pivoted. We expanded to also do other certifications as well. So, now we also offer an Angular certification.
Steve Edwards [00:09:23]:
Oh, good.
Daniel Kelly [00:09:24]:
We're actually launching tomorrow a JavaScript certification, a more general JavaScript, certification. And we offer a NUC certification as well.
Steve Edwards [00:09:35]:
Okay. Yeah. I'll put the link up here in the little banner here for a second. Angular. So are you guys do you have somebody with Angular expertise that's that's doing that one?
Daniel Kelly [00:09:47]:
We do. Absolutely. So we we partnered with a guy named, Alan oh, he's gonna kill me because I I I'm gonna butcher his last name. Sherrard, I think it is. Anyways, he had an Angular certification, that he's been working on for years, and he wanted to partner with us just to make his processes a little bit easier and so on. So, he is, definitely an expert with that kind of material and provided a lot of that. It was just a matter of, you know, changing it up a little bit to fit our our standards and our platform requirements.
Steve Edwards [00:10:23]:
Okay. Yeah. So here's the view on interesting. So having had to administer and take online tests and and scenarios and stuff. Out of curiosity, how you'd mentioned that there's multiple guests excuse me, multiple choice, questions, throughout the test, and then there's some coding challenges and things. So how is that done? Is that like a a cloneable repo that you can do and push back to a repo, or is it just like an online thing like a HackerRank
Daniel Kelly [00:10:54]:
Right.
Steve Edwards [00:10:55]:
Environment? Or how exactly is that testing done?
Daniel Kelly [00:10:58]:
So it is all in the browser. In fact, we're we're pretty, what's the word for it? We are literally watching you during the exam. There's there's this entire proctoring setup. Right. Yeah. It's intense. Right? There's Mhmm. The your camera's on.
Daniel Kelly [00:11:15]:
Your screen is being monitored. Your your mic is on. It's it's monitoring everything. AG, you wanna say something. I could tell.
AJ O'Neil [00:11:23]:
I always bomb those.
Steve Edwards [00:11:25]:
Like, when when the pressure is on ago. Oh, yeah. I bombed with my ad.
AJ O'Neil [00:11:30]:
Yeah. When the pressure is on like that, I forget how to do fizz buzz. And and oftentimes and I and I it seems like in most of those situations, they're looking for a very specific answer. So it's not like, hey. Here's a here's a problem that's reasonable to have. And then, like, walk us through what are you thinking about that and how would you solve it. It's okay. So you've got the numbers 12, 20, 70, and 84.
AJ O'Neil [00:11:55]:
They're in an array, but they're backwards. They're inside of an object, and you need to have, less than o 2 login. Like like, so how do you solve this problem? And it's like, what?
Daniel Kelly [00:12:11]:
Yes.
AJ O'Neil [00:12:11]:
And then and and then and then, like, you solve it, and they're like, well, that's not the solution that we have in our book sheet here. So
Daniel Kelly [00:12:20]:
Totally. Totally. Yeah. And we we've done a lot of work to try to avoid that as much as we can while still being, you know, you have to have the parameters that they they they work in. And we tried to make the coding challenges, specifically kind of lifelike things. For example I don't wanna give too much away, but maybe there's, you know, in the the view one, maybe you have to create, like, a a carousel, right, that has some kind of functionality that requires JavaScript, rotating the images, you know, blah blah blah, so on and so forth. So we try to make it a a fairly realistic thing where you understand what the goal is. So, yeah, that that's kind of our way of trying to avoid the situation you're talking about.
Daniel Kelly [00:13:05]:
But we definitely have found over time, that we've had little instances exactly like you're talking about, and people report would report such things to us, and we've been able to to work and improve it over time. So during the coding challenge portion of the exam, it is all in your browser. We embed a Stackblitz project into the, into the platform. I don't know if you've heard of Stackblitz before.
Steve Edwards [00:13:31]:
So last week, we just talked to Tomek Sokowski from Stackblitz about tutorial kit, and I was about to ask I was about to ask you if that was what you were using or or maybe it was just embedding Stackblitz within your in the, test.
Daniel Kelly [00:13:45]:
Yep. That's right. It is just the the classic Stackblitz embed. They came out with tutorial kit. I believe they actually launched they announced it. They launched it at JavaScript. Oh, shoot. Now I'm getting my conference names mixed up.
Daniel Kelly [00:14:03]:
At Front End Nation, which is a conference fee school puts on an online conference. And, so, yeah, that that wasn't quite out when we first released the certification.
Steve Edwards [00:14:13]:
So, yes, we do know Stackblitz. We've had Eric Simons on, I think when they first started talking about in, embedding Node in the browser, a few years ago. So, yeah, we're familiar with Stackblitz.
Daniel Kelly [00:14:25]:
Right. Great. I'm sure it sounded a little crazy at that point, but I love it.
Steve Edwards [00:14:29]:
Right. Right. Right. For sure. So cool. What about okay. So people are coming in and, you know, taking the certification test. Hey.
Steve Edwards [00:14:39]:
I got the certificate. I can do view. Have you seen that being utilized, requested in the employment community in terms of people who are actually looking for Vue developers? What kind of reception has that been getting?
Daniel Kelly [00:14:57]:
Sure. That's an excellent question. From my point of view, I don't have any, I guess, state case studies per se on the employer side of, hey. We were looking for a Vue developer, and we saw some of our applicants had a had a Vue certification, and so they're the ones we hired. Honestly, our marketing team would probably have a ton of that Uh-huh. Ton of that valuable stuff. Right?
Steve Edwards [00:15:22]:
Right.
Daniel Kelly [00:15:23]:
But I definitely heard testimonials from, Vue developers themselves who have said, hey. I I got this in order to help me with the job search. Whether it actually ended up helping in the long run, that's something I don't have the feedback on, to be honest. But one thing we also think is a really great benefit, besides just the higher ability of a developer getting the cert, we also think another great benefit and something we hear actually from people who've taken the exam is that they really just wanna take it to kind of give them the confidence that they're up to date and they're knowledgeable. Like, they can kinda feel confident that, hey. I have the knowledge it takes to be a modern day day VU developer. So that's something they self evaluate. Right? Mhmm.
Daniel Kelly [00:16:09]:
And we get a lot of feedback about that being the case for them.
Steve Edwards [00:16:13]:
So it's, yeah, sort of just a measuring tool, I guess, or a way to bone up on what's the latest and make sure you're learning the the right thing and not focusing on something that's antiquated that's gonna go away.
Daniel Kelly [00:16:25]:
Right. Exactly right. Because because I haven't reviewed it all and said, hey. This is what you need to know. Right?
Steve Edwards [00:16:30]:
Mhmm.
Daniel Kelly [00:16:32]:
And, and, yeah, we also we have had, a a few employers, I know specifically who, you know, have given this exam bought this exam for their employees in order to, give people raises or, you know, elevate them in their position in the team, things like that. Right. So that's been a successful, use case for it.
Steve Edwards [00:16:55]:
Okay. Cool. Alright. So, let's talk about we'll do well, we'll do some shameless plugs towards the end for for Vue School. Yeah. Just in terms of Vue in general, obviously, we talked about how Vue 3 came out, almost 4 years ago or a little over 4 years ago.
Daniel Kelly [00:17:17]:
And I wanna Google that, Steve. I don't wanna tell y'all the wrong thing. Vue v 3.
Steve Edwards [00:17:23]:
Yeah. When
Daniel Kelly [00:17:23]:
did it come out? Let's see.
Steve Edwards [00:17:25]:
22. I'm sure you could It's 2 years. Okay.
Daniel Kelly [00:17:27]:
Oh, no. Oh, it is 22?
Steve Edwards [00:17:29]:
20 no. I'm sorry. It was officially released on September 18, 2020. Became the default version in February 22.
Daniel Kelly [00:17:37]:
Yep. Yep. That's that's accurate.
Steve Edwards [00:17:40]:
Okay. So so if you go to view dot, the view website, it's, by default, it's view 3, and then you gotta click on a link to go view the view 2 docs.
Daniel Kelly [00:17:50]:
Yep.
Steve Edwards [00:17:51]:
Is what sort of makes it the default. So we're on as we were talking about before, and we're on about 3.5 is the current release of Vue. What, what's so what's the latest and greatest coming out of Vue with with the latest releases since you're probably right on top of
Daniel Kelly [00:18:12]:
that? Absolutely. So, Viewpoint, 3.3 was a pretty big one. So with that came define model. I'm not sure if you've used define model yet. It's it's a really handy kind of wrapper around a common pattern for for taking a prop in and then omitting an event up whenever the value for that that prop changes. So think of, like, a custom input field. Right? You bring a a prop in that's called model value and then you send a, event up called update model value. Right? And so define model essentially just lets you skip the kind of song and dance there and directly alter the prop that came in inside of your child component.
Daniel Kelly [00:19:07]:
So whenever you actually assign a new value to that that prop, you're not actually mutating the prop, which would be a no no. Right? Mhmm. Instead, what it's doing under the hood is it's emitting update model value for you. So it's just a little ergonomic, yeah, quality of of development thing. So that was a a kind of big addition to 3.3. Now that's been quite quite a number of months now since that one's been out.
Steve Edwards [00:19:31]:
Can I ask you one question real quick? One of the things I used to talk about was component d model, which is basically where you, you know, you have a a parent and a child, and you can, do something within the, the child and then admit it back up to the parent. You know? And the example I have is one that I actually use in an inertia app where I have a, just like an index listing in a table. And then, within I do all the table itself is a separate component, but the search field that I'm using is in the parent. And because I'm using inertia, I gotta use a a defined URL. So, basically, in my table, I say, you know, I do all my stuff or no. I take it back. My route has to be defined in the parent. The search field is actually in the child, and so I read the child, pass it up to the parents so we can call the URL.
Steve Edwards [00:20:25]:
And that's basically component b model where you can map that real easily and have that dynamic field. Is this different, or is this an improvement on component v model? Are they just are they different things?
Daniel Kelly [00:20:36]:
It it's it's very similar. So really, we are talking about the same thing. Like, it's the v model on the using the v model in the parent on the child component. That's exactly what this is supporting. Okay. But it's just when you're doing your logic inside the child, it's making that logic inside the child a little bit easier to to reason about and ensure less lines to write.
Steve Edwards [00:20:59]:
Okay. So it's, yeah, sort of along the same. Yeah. It's really it's an easy way to because it's one of the thornier problems with making everything, self contained component, you know, trying to so you don't have this huge, you know, 500 line component with everything in it. You can break things into reusable components. But then you gotta communicate between the parent and the child, and that's where it gets gets, really sticky in dynamic ways. So okay. So sorry to interrupt.
Steve Edwards [00:21:25]:
So or you were going on from there.
Daniel Kelly [00:21:27]:
No worries. No worries. So 3.4, honestly, I have no real recollection of of what that was.
Steve Edwards [00:21:35]:
Very important release.
Daniel Kelly [00:21:38]:
Yeah. Truly minor release, right, at least in my my mind. So 3 in 3.5, just because it's very recent, I I am thinking about, of course, there's always performance improvements in every release. Right? But, also, 3.5 brought about a feature called props destructure. So, when you're working with the composition API inside of your script setup tags, you use a a macro called define props
Steve Edwards [00:22:09]:
in
Daniel Kelly [00:22:09]:
order to define your props. Right?
Steve Edwards [00:22:11]:
Right.
Daniel Kelly [00:22:13]:
Well, if you wanted to add defaults to your, to your props, you had to use this weird with defaults method, kinda wrap the whole define props call, and then have a second argument to the with defaults be your your actual default. So you're kind of, like, declaring your props here, and then you're declaring the the defaults for those those props here. And you just kinda have to, you know, put those keys in twice, and it's just kinda weird and cumbersome. And then when you're working with your props, you have to say const props equals define props, and then you're working with those, you know, those props off of that props object. Mhmm. So what props destructure does is it allows you to destructure your props from defined props. K? So now you're not working with props dot blah blah blah all throughout the components, throughout the script section, anyway. Now you can just get the actual prop name.
Daniel Kelly [00:23:09]:
Right? So
Steve Edwards [00:23:10]:
Oh, I gotta stop using this.
Daniel Kelly [00:23:12]:
And it's it's it's seamless. They're not real reactive refs, so you don't have to use that value. They're under the hood. It actually compiles back to props dot whatever the prop name is. Yeah. It's just super handy. And the other benefit is is you can define the defaults in the destructure statement. There's no with defaults function that you have to do anymore.
Daniel Kelly [00:23:35]:
So, yeah. That's a that's a big ad for 3.5.
Steve Edwards [00:23:39]:
I've wrestled with that for quite a while, in a particular app that I do, so that's I gotta look into this for sure.
Daniel Kelly [00:23:46]:
Okay. Yeah. Definitely do. Definitely do.
Steve Edwards [00:23:51]:
See. So I'm looking at your view school article on what's coming in 3.5. So use template ref. Yep. Use ID. That's more for server side rendering, it looks like.
Daniel Kelly [00:24:04]:
It is. That's a really cool one, though, especially if you're in the Nuxt world. Just getting a uniquely generated generated ID, but it's that same uniquely generated ID both on the client and the server. So there are no more, like, juggling and passing the unique ID that you generate on the server down to the client. You just you just call it, and it's the same everywhere. There's no mismatch, hydration, mismatch issues, which has just been a pain in the past.
Steve Edwards [00:24:30]:
Right. That's a good segue. So moving into Nuxt. We talked earlier about Nuxt and what's going on with Nuxt, and you'd mentioned this a few bullet points for those in the jobs world who might not know what Nuxt is. Nuxt is basically Nuxt for React. I don't remember which came first, and I know Nuxt is alphabetically before Nuxt, so maybe it came first.
Daniel Kelly [00:24:54]:
I think that's the case. Yeah.
Steve Edwards [00:24:56]:
Right? I think, Angular has a sort of similar tool they came out with. I can't remember what it's called. Svelte test, SvelteKit. So just so you can understand the Nuxt, side of things where Vue is just primarily front end JavaScript, Nuxt gives you the whole server rendering stack.
Daniel Kelly [00:25:15]:
Steve, I I think Next, like, had to come out first because Nuxt is like a play on words on
Steve Edwards [00:25:20]:
Is that what it is? Makes sense.
Daniel Kelly [00:25:22]:
Because who would name something Nuxt? Like That's a good question. Yeah. I think it yeah.
Steve Edwards [00:25:28]:
I could ask that about Vue and Drupal and any number of other names too. So
Daniel Kelly [00:25:33]:
So interesting fact, the name of the framework Vue comes from the French word for Vue, v I e w. No. That's Oh, isn't it? Oh, that's v v is fast. Fast.
Steve Edwards [00:25:45]:
V is fast. Yeah.
Daniel Kelly [00:25:46]:
Yeah. View is the, like, the the view layer, like, you know, the UI layer. Right?
Steve Edwards [00:25:51]:
Okay. So that actually has significance. Yeah.
Daniel Kelly [00:25:56]:
Never listen. Evan took the same strategy Evan took the same strategy for both Vue and Vue. He just, yeah, just grab the French word for
Steve Edwards [00:26:03]:
Right. Yeah. The the story of I always remember the story of Drupal where it came from, and it was actually a typo.
Daniel Kelly [00:26:10]:
Oh, really?
Steve Edwards [00:26:11]:
And, because, Dries' boytard is Belgian, and he was he meant he was he was trying to drop hell. It was like a French or Belgian word for drop, like a drop of water, and it was a misspelling and and ended up just sticking with it. And it took off from there. So sort of funny how some of these names come about.
Daniel Kelly [00:26:30]:
It's the best way. Yeah. Right. Happy accidents.
Steve Edwards [00:26:33]:
Yes. So, Nux, why don't you give us an overview of Nux, what it does and what its capabilities are, at least currently?
Daniel Kelly [00:26:41]:
Sure. So, Nuxt is like, the big benefit of Nuxt is the server side rendering portion. They take a lot of, I I mean, you could server side render with just vanilla view. Right? But you're having to build a lot of things up on your own if you decide to go that route. So Nuxt, makes it really easy to make server rendered view applications. But the really cool thing that's happened with Nuxt 3 versus with Nuxt 2, well, number 1, they've embraced the composition API, like, wholeheartedly. Okay? So Nuxt 3 composition API is, like, the first party way of interacting and and creating, which I like. A lot of Vue developers these days, I think, have jumped on the Composition API boat.
Daniel Kelly [00:27:28]:
I know some haven't, and that's fine, but it's kind of the direction a lot of the framework is going.
Steve Edwards [00:27:33]:
Mhmm.
Daniel Kelly [00:27:34]:
But, the other really exciting part, though, about these next steps is that you have the ability to specify where and how you're going to render things so granularly. And what I mean by that is, you could choose to render a certain page only on the client. So think about just that one page is rendered just like a normal view application. You can skip the NUC server side rendering altogether. K? And that's at the page level. You could do the same thing, for the server. You could say, render this page only on the server. Don't hydrate it on the client side.
Daniel Kelly [00:28:15]:
I don't want any of that JavaScript coming down and, you know, this is just a content oriented kinda page. I don't need it.
Steve Edwards [00:28:20]:
Like an about page or something like that. Right? That's the common usage.
Daniel Kelly [00:28:24]:
Exactly. Exactly. So you can do that not just at the app level. You used to could do that at the app level. Now you can do that at the page level. So you can mix and match your, you know, different rendering modes per page. But then you can also even do that at the component level. So, you could have this, you know, one page is rendered universally both on the the client and the server.
Daniel Kelly [00:28:47]:
But nested down inside that page, you could have a component that's only rendered on the server. And then whenever the props for that component change, it doesn't run any client side JavaScript. It just goes back to the server, fetches it, it rerenders on the server, and it replaces that HTML, you know, on the page. So, it's a really dynamic way of being able to choose exactly when and where you're, you're rendering your your view components. So, that that server rendered example is really great for something like rendering markdown. Right? Loading a markdown parser into your browser is kind of a heavy thing. And a lot of times, what we're using markdown for is for displaying static content. So we don't need that run-in the browser.
Daniel Kelly [00:29:28]:
We can save so much, you know, time in terms of loading, by just rendering that on server and sending the the loaded thing. But then that's just that one component on your page. All your other stuff could still be be dynamic. So pretty cool.
Steve Edwards [00:29:42]:
So that's sort of the astro approach to things, isn't it pretty much where you can everything server and then you can have your I mean, I'm sure you don't use the same terminology. They call it islands architecture where you can have your little island of interactivity in the middle of server side content. So that's pretty much the at least from the from that high level. But I'm sure there's a lot of other more dynamic stuff you can do within Nuxt within your command. Right?
Daniel Kelly [00:30:05]:
Oh, yeah. There's there's tons of other stuff it can do. But in terms of your comparison, Astro, that's exactly right. That's, yeah, the Astro is the server rendered by default. Right? And then client rendered by opt in. Nuxt is kind of the opposite. Mhmm. It's, it's universal by default, and then you can you can opt in to client only or or server only Mhmm.
Daniel Kelly [00:30:27]:
Per pager or per component. But, yeah, in terms of, like, other things that Nuxt has to offer for the Vue developer, just a lot of quality of life things. Things like auto imports for all the composables in your composables directory, things like auto imports for the core view reactive functions, you know, things like ref computed, all that kind of stuff. You just they just work. You just use them and they work. Right? Which is nice. But if you want to still import everything, like, you have the ability to do that. You can turn off the auto imports and things like that.
Daniel Kelly [00:31:01]:
So
Steve Edwards [00:31:02]:
So now if you're using Next, one of the big differences, and I I I think Nuxt is like this or some of the other ones, is how your routing is handled. Whereas with a with a strictly view front end, you have your front end routes that you have to define in Vue router, whereas with Nuxt, it's all based on folder structure. So you'll have a structure, and then you can define, you know, I want my URL to look like this, so that's how you name your folders. And then you can pass in dynamic values like ID values and, you know, sort of render
Daniel Kelly [00:31:33]:
Yep.
Steve Edwards [00:31:34]:
Blog post based on its slug or, you know, however you have identified it. So that's, you know, that's a pretty common thing. I've seen people I've in fact, I've worked on an app one time where everything was they were connecting to a dot net back end. Okay. But but they used Nuxt because they liked the page routing instead of just straight view on the front end.
Daniel Kelly [00:31:57]:
Okay. That's fair. And and a good opportunity for a shameless plug, we do have a Laravel course at the school where we do that same thing. We use Really? Laravel for the back end as an API. Yeah. And we use Nuxt on the front end.
Steve Edwards [00:32:07]:
Oh, that's interesting. Okay. Yeah. So my day to day is is a pretty huge app with Laravel and and REST APIs. You know, it was initially built way back in v 2, where it's all APIs, and then the Vue front end connects to the back end, you know, through the defined APIs. I, myself, you know, people have heard me talk about this. I'm a huge fan of inertia. JS, if you're familiar, love inertia.
Steve Edwards [00:32:30]:
In fact, I had Jonathan on here a couple times when inertia was pretty new. And, I will work with it with Laravel Laravel on the back end, Vue on the front end, Inertia in the middle, and it's it's awesome.
Daniel Kelly [00:32:41]:
Very cool. I I've got a colleague that just came on to our team, within, like, last 8 months maybe. And, yeah, he was really big in their inertia, taught me some things on it, and, looks really interesting. I haven't had the opportunity myself to to use it in prod. But
Steve Edwards [00:32:56]:
Yeah. It's really slick. If you're and if you're familiar, like, Next is, you know, your back end is in Node. You're writing in Node. Js if you're doing it in the back end. Right? So for someone like me who comes from the PHP world, and is familiar with Laravel and PHP, then that's a godsend. Being able to use something like that that you're already familiar with, and you don't have to learn a, you know, a whole new coding technology. So inertia is awesome.
Steve Edwards [00:33:20]:
It's it's so fast. It's crazy how fast it is. So I'd be real curious to see this course. I don't know if you oh, you said it's just Laravel with if you're using so if you're using Laravel for the back end with Nuxt
Daniel Kelly [00:33:34]:
Mhmm.
Steve Edwards [00:33:34]:
Yep. You're still doing the server side rendering because your Laravel controllers are returning your your content, to your Nuxt components, and it's fully rendered HTML that it's I mean, you're using blade templates to for the formatting of the HTML, or how is that happening?
Daniel Kelly [00:33:51]:
It's so it's, I'm trying to find the URL here. So if you just Google the name of the course is Laravel back ends for Vue. Js 3. Mhmm. And then Vue School. I'm sure you could find it. Mhmm. But the the whole approach is, yes, we're still server do we server site run-in the course? We might turn SSR off, actually.
Steve Edwards [00:34:13]:
Yeah. Here it is. Okay.
Daniel Kelly [00:34:14]:
We do. We turn SSR off. But you would you don't necessarily have to. You you could do the server side rendering bit. But but, basically, we used in the course, we used Nuxt just as the client, right, as as the JavaScript runs in the client. And the only reason we chose to use Nuxt instead of straight view was just because of some of the niceties like the auto imports and and things like that. Okay.
Steve Edwards [00:34:35]:
Yeah. Now I remember from a performance standpoint, one of the additions that I'm pretty sure is Nuxt 3 was Nitro, which is basically a rendering engine. So, can you tell us about Nitro?
Daniel Kelly [00:34:50]:
So, there's kind of this weird, like, stacking order of what what builds Nuxt. And the Nuxt core team actually have an organization now on GitHub called Un. Js, which powers a lot of the, inner workings of of Nuxt. But those, those packages are also available for the wire community at large to use. And and Nitro is one of those packages. Right?
Steve Edwards [00:35:15]:
Mhmm.
Daniel Kelly [00:35:15]:
So Nitro is the kind of the server layer there. It renders your Vue components on the server side, of course, and sends the HTML to the browser. But the other really cool thing that Nitro enables a Nuxt 3 project to have out of the box is API endpoints. This is something you didn't have in Nuxt too. So now you just have a folder in your Nuxt project called server, and then you have a folder inside of that folder called API. And any file within that directory automatically becomes an API endpoint. So, you've really got the whole like, everything you need to build a full stack app right there inside of your one Nuxt project. There's no reason to hook it up to an external API anymore.
Daniel Kelly [00:36:05]:
Of course, you still could. I mean, there's nothing wrong with that. Right? We use Laravel in the course. But if you don't wanna have to manage this separate back end, you can actually have your entire you're gonna have your REST API and your, you know, and your actual user facing applications all in the same repo, which is is pretty cool.
Steve Edwards [00:36:24]:
So as sort of a drop in, if you have APIs written for, what, any, CMS online CMS versus maybe something or even something that you have locally, such as Laravel, MySQL, or, you know Yep. Node. Js with, Mongo, API defined, or something like that, then you can drop it in and use it with with Nuxt.
Daniel Kelly [00:36:46]:
Yeah. I I wouldn't necessarily say you could drop it in. I mean, it is they do have their own syntax, right,
Steve Edwards [00:36:51]:
for
Daniel Kelly [00:36:52]:
for for the API endpoints. Mhmm. But if you have the data in a database somewhere, you know, you can just start interacting with that database directly via these these API endpoints and then sending the, you know, the data to your your front end. Right?
Steve Edwards [00:37:08]:
And so is it sending everything as props then? Is that how it's how it's
Daniel Kelly [00:37:12]:
so how
Steve Edwards [00:37:12]:
does it send it to the front end?
Daniel Kelly [00:37:15]:
So on your on your view pages so you talked about that page file based routing just a moment ago. Right? So Mhmm. In your view components, you call a composable a built in composable called use fetch, and it makes a a fetch request, and you just pass it the route for that API endpoint. Right? So you do slash API slash users or slash post or whatever. So that's how you connect your Vue pages to those those API endpoints. And, of course, on the server side, on the server side, when you make that request, it's actually gonna skip the network layer altogether, and it's just gonna go call the function that that API endpoint is is made up of. Mhmm. But then on the client side, when you're navigating, you know, 1st page load, it's all server side rendered and it hydrates.
Daniel Kelly [00:38:03]:
But then as you navigate to new pages, it's gonna make that request, asynchronously. Right? So, it's it's it's pretty nice. Like, it handles things like, you know, serializing your JSON for you. So, like, you can just return an object from the API endpoint. You don't have to serialize it first or tell it what kind of data it is or something like that. You just you return an object. It assumes, okay. This is this is JSON.
Daniel Kelly [00:38:29]:
Things like that. You also have type safe auto completions for your, for your API endpoint route. So if I'm calling useFetch on my front end on my my page, as soon as I start typing in the URL, I get a list of, of drop down autocomplete says what endpoints are available. Right? So I can just pick, oh, I want API slash users or I want API slash post. And because it all exists in the same project, that makes that possible. Right? So yeah.
Steve Edwards [00:39:02]:
So okay. So you mentioned that
Daniel Kelly [00:39:03]:
it's
Steve Edwards [00:39:03]:
been extracted into its own separate sort of rendering engine. Is it still geared specifically for Vue, or is it something that can be used with other front end? You know, I think of, for instance, Veet. When Veet first came out, the original iteration was view only. And then Yeah. He the next version, he said, okay. You can plug and play with anything, and it's just gone nuts with how many people replace webpack with with v and Right. And so on. So is is on JS, is this the the same idea, or is it still strictly for Vue?
Daniel Kelly [00:39:41]:
Yeah. It is the same idea. Everything in the NGS, organization is completely framework agnostic, and, indeed, other frameworks have picked up have picked up packages and have built off them to to make their own own thing. I can't remember I can't remember what it is, but there was some other, you know, how the JavaScript build is frameworks every week. Right. But there's there's some new framework I read about recently that they they built their server layer on top of of Nitro. But, yeah, that's that's the approach.
Steve Edwards [00:40:16]:
Yeah. I've seen that before. I did some work with another company that had a a specific JavaScript form render where everything was rendering forms, and they extracted it, you know, and made it open source. They had a story where another company used it and made 1,000,000 of dollars off of their work. They wouldn't even mention the company name when we talked to them. But, yeah, that's cool when you can extract that and use it for other things as well. Yeah. Any other next next things, new features, you know, anything what's coming down the pike with Nuxt
Daniel Kelly [00:40:52]:
or even Vue 3? I know Nuxt 4 is coming fairly soon. That's, I'm not totally sure that the biggest thing in NUXT 4 is there's gonna be a change to the project structure. Like, a lot of the things that were in your root directory for NUXT 3 will now be nested under an app directory, an app directory for Nuxt 4. And I think there's some, like, TypeScript benefits to that. Like, while you're watching certain files locally or something while you're developing now, it can it can focus on just that one app folder or something. I don't remember exactly what it is, but it's supposed to make your development process just a little bit, you know, faster, your your dev server a little faster or something like that. Yeah. So
Steve Edwards [00:41:39]:
I'm curious. So they're gonna do a NUXT 4, but still based it on Vue 3. Is that Yep. Right? Because it doesn't sound everything I'm, you know, reading I was just reading something by Linus Borg, that, you know, Vue 2 to Vue 3 was such a huge, you know, gutting and rewriting of everything and lots of backwards breaking stuff. Although, they did do I think it still supported the options API, but it was still so huge. It sounds like view 4 is gonna be not quite as, aggressive, shall we say, or changing going forward.
Daniel Kelly [00:42:12]:
Which is a good thing. Yeah. Yeah. And and I think the Vue, like, where Vue is at in its life, it's it's stable and it's well loved. It's it's easy to use. Like, I don't think at this point in its lifespan you need this this major change like we had from 2 to 3. Right?
Steve Edwards [00:42:30]:
Right.
Daniel Kelly [00:42:30]:
Which is great news for developers. It's less things we have to do to migrate. Mhmm.
Steve Edwards [00:42:37]:
And then I'll probably, hopefully, you know, sort of, encourage people to upgrade from Vue 2 to Vue 3, which is not a small undertaking undertaking, especially when you deal with some very large, you know, enterprise type applications and Yep.
Daniel Kelly [00:42:54]:
And everything. Depending on the libraries you're using and things like that.
Steve Edwards [00:42:57]:
Absolutely. I do know, and I've mentioned this before. I think it was 2.7 of Vue had Mhmm. Composition API stuff embedded in it. And the idea being that you could still be on Vue 2, but slow sort of migrate to Vue 3 Yep.
AJ O'Neil [00:43:11]:
And
Steve Edwards [00:43:12]:
then, you know, throw the switch in and migrate over to Vue 3 from there.
Daniel Kelly [00:43:17]:
Yep. Yep. It's, I mean, they've definitely made some good tooling to help, help you make that migration, but Mhmm. Like you said, the enterprise level, you know, size applications, it's, yeah, it's it's still work and quite a bit of it.
Steve Edwards [00:43:30]:
Oh, yeah. We have, like, upwards of probably 5 to 600 different components in our Vue 2 app alone that's been around, you know, for probably 10, 11 years. So wouldn't be a small undertaking, especially when you start incorporating, you know, TypeScript because I tried to mess with TypeScript and Vue 2 a couple times, and it was, yeah, it was not a good experience. I mean, it's basically sort of bolted on instead of, you know, built in. Right. So it definitely made things a lot more difficult. But, you know, that pretty much anything large is gonna be incorporating TypeScript anymore.
Daniel Kelly [00:44:02]:
Yep. Yep.
Steve Edwards [00:44:04]:
Cool. Anything else Vue, Nxt related that we didn't cover that you're, you're dealing with at Vue School or covering?
Daniel Kelly [00:44:14]:
No. I think we just about covered it all, Steve. I I guess I I do wanna throw in one shameless plug for our our VGS master class. Of course. We did release that. It's a progressively released course, so we started releasing it back in March of this year, and we're still releasing lessons where you build a, real world application, specifically a project management app, something like Asana or Monday or something like that. Mhmm. So if you are, you have the basics of Vue down and and you wanna kinda take it to the next level, this is a really great course, for you.
Steve Edwards [00:44:54]:
Alright. Cool. Yeah. I've got the URL up here on the screen for those who are watching, the Vue JS 3 master class, at viewschool.io. Alrighty. Before I forget, if people wanna follow you and give you money and and read all your view wisdom, where's the best places to do that?
Daniel Kelly [00:45:16]:
I'll have to go set up the, the donation app right now. So that sounds like a great idea. No. You could follow me on, Twitter. I'm Daniel Kelly _io. That's where I'm most active, if you can even call me active. I'm I'm not a huge social media guy. Mhmm.
Daniel Kelly [00:45:35]:
But you can follow me there. View School is View School IO on Twitter. And, just, you know, just Google Daniel Kelly LinkedIn or View School LinkedIn. You'll be able to find us there as well.
Steve Edwards [00:45:48]:
Alrighty. So with that, we will move on to PIX. PIX is the part of the show where we can talk about whatever we want. Doesn't necessarily have to be tech related. Obviously, it was in recent reports. AJ, we'll let you go first. What do you got for us for picks this week?
AJ O'Neil [00:46:06]:
Boy, oh, boy, have I got a good one for you. I I I don't think I'm gonna take this back because, you know, sometimes I make recommendations and then a month later, I'm like, actually, that was a bad idea. Okay. Browsers, finally, as of March 2023, have support for ec ECMAScript modules. Ubiquitous support. So whether you're on iPhone or Android or Chrome or Edge or Safari or Firefox, as of March 2023, all browsers finally support ECMAScript modules. That was about 18 months ago, and that's my threshold for when I say, okay. It's safe to use a browser feature.
AJ O'Neil [00:47:00]:
Because, you know, a lot of people, they haven't had a power outage in the last 18 months. And so if they haven't had a power outage, they haven't like, their browser hasn't been updated yet, because their, you know, their computer's still going. Or maybe it's on Windows where it, you know, it it, like, just shuts down the computer no matter what you're doing. Like, you're in the middle of typing a document. It's like shutting down to update. So I guess, like, within 18 months, either people have had a power outage or their computer has, like, crashed from pending updates. So with that, on the browser side,
Daniel Kelly [00:47:36]:
we're good
AJ O'Neil [00:47:37]:
to go. We can use ECMAScript modules. We don't need transpilers. It can work. As of March 2024, there was a PR for, ECMAScript support in node that is now available as an experimental feature in node v 22. So I believe that it is now safe to publish ECMAScript modules without any transpilers. And so you might say, oh, node nodes had nodes had support for it forever. No.
AJ O'Neil [00:48:19]:
It hasn't. Node has only supported node has had the the, the red blue function problem, the colored function problem, where you can either use ESM or you can use common JS, but you can't use both. And almost every module in the entire ecosystem uses common JS. So the moment that you introduce an import, an an ESM dependency, now you break everything or you have to transpile. But the new feature flag is that as long as you don't use a top level await. So if you just have an init function or a main function, if there's anything that you need to do as part of the initialization of your module, if you're willing to just put that in an an init function that you export or a main function that you export or you know? As long as you couch that or put it in a caching function where the first time whatever function needs that thing, you know, it it runs. As long as you put the top level of weight inside of an export, so so, basically, as long as you don't have a true top level await, you can now require an an ESM module from a common JS module, which means that we no longer have the red blue function problem. That modules in node are just modules except for that one case if they actually have in the body of the e s m, oh, wait.
AJ O'Neil [00:49:45]:
Whatever. And I think that I hope I hope that we can all agree that it's a sacrifice worth making to move that await into a function that's exported as the init function or whatever so that so that you can publish a module without transpiling, and it'd be available ever. Now, of course, since most people are on no. I don't would say most people. Since most most popular influencers are now on the TypeScript bus, You know, you you're not getting away from the transpiling problem. But you can you that that's a topic for another time. You can have I use the TypeScript checker every day. All of my code is typed.
AJ O'Neil [00:50:25]:
I even am using SQL c with node, such that I I had a left join in a SQL statement. And that SQL c allows you to write the raw SQL and then generate the code. So rather than writing the code that generates the SQL, you write the SQL that generates the code. Parameterized, all that. It's wonderful. I love it. I had a left join in my SQL code, and I got a type error on, one of the things I was iterating over. It said, you know, error.
AJ O'Neil [00:50:57]:
This can be null. And that was the moment when I felt we have arrived. Technology is maybe good again. Like, maybe we're on the right track. If I can write SQL and get a type error from a left join, Maybe maybe there is a bright future somewhere on the horizon. So
Steve Edwards [00:51:20]:
I was wondering why I was able to sleep better at night lately. That answers my question.
AJ O'Neil [00:51:25]:
So that's that's my that's my main pick, is is just that, and and I I am you know, I don't know how many experimental features have made it all the way to the point where they have a flag and are properly documented and everything and then don't make it in. But this seems like a no brainer. So I'm I'm willing to put my my eggs in this basket and say, it's time to use e s m imports. But for please, please, for the love of all that is holy and and heavenly and sacred in this world, just use one default export. Don't have a 1,000,000,000,000,000 exports, please. But that said, this is something I'm excited about. There have been headaches around this for a long time because of the bundlers, not because of the browser, because of the bundlers. It's been a pain in the butt to get isomorphic code working in both node and the browser.
AJ O'Neil [00:52:23]:
The browser is super easy to do, and node is super easy to do. You don't need to require stem or any of that. You just need a simple or. But because of the way that the bundlers do the window detection versus the global disk detection versus there there's all this crap that you like, boilerplate. There's, like, 6 lines of boilerplate that you have to have in order to get a common JS module that would otherwise work fine in Node in the browser without any problem, without hardly like, with one line, literally one line of, quote, unquote, boilerplate. For the bundlers, yet, it's it's atrocious because they they all do it wrong. They don't follow the spec. They don't anyway.
AJ O'Neil [00:53:03]:
But yeah. So I'm I believe I believe from today onward, I will be writing, ESM import and export, and I know that that went way over there allotted 2 minutes. Oops.
Steve Edwards [00:53:17]:
Oops. So another way we can blame Flow at Progressive for all the problems. For those who don't understand in the America, we have these insurance commercials. This guy named Flow always talked about bundling insurance. So
Daniel Kelly [00:53:32]:
They're everywhere.
Steve Edwards [00:53:33]:
That's what comes to my mind, unfortunately. Was that it, AJ?
AJ O'Neil [00:53:38]:
I'm I'm hoping you're gonna field the best dad joke ever.
Steve Edwards [00:53:44]:
The
AJ O'Neil [00:53:44]:
best tech the best tech dad joke ever.
Steve Edwards [00:53:48]:
Yeah.
AJ O'Neil [00:53:48]:
No? Okay. Alright. Are you gonna do it, or do I need to do it?
Steve Edwards [00:53:52]:
Is it is it all a good fit
AJ O'Neil [00:53:53]:
for you?
Steve Edwards [00:53:54]:
Oh, yeah. Oh, yeah. So let's talk about that. So, for those who follow me on Twitter, AJ made
Daniel Kelly [00:54:01]:
a
Steve Edwards [00:54:01]:
attempt, at a dad joke that apparently went over my head. And so, I just finally got it explained to me this morning before we came on. So, you wanna explain it, AJ? And for those who are maybe those who are less dense than I will get it.
AJ O'Neil [00:54:16]:
I I think it just is your experience, not that sense. But Right. So Steve was talking to me, and he said, what do you think about SQL Migrators, AJ? And I said, well, you know, they have their ups and downs.
Steve Edwards [00:54:32]:
Wait. Sorry. Sorry. Sorry. I was pulling up the tweet. And I didn't get it because did go Yeah. I didn't get it because the migration tools I've used did don't use the up down up and down terminology, and and so I missed it. And I felt sorry.
Steve Edwards [00:54:48]:
It was it was a a for effort, though. I I appreciate the thought. Going to the dad joke whenever you see that, that's that tells me that, you're learning. That So it That warms my heart. Speaking of dad jokes of the week, let's see. This one's a little long, but hopefully, you'll get the, it's maybe a little more visual, but, it's what I got for this week. So imagine this thing was Monday, Greg, Tuesday, Ian, Wednesday, Greg, Thursday, Ian, Friday, Greg, Saturday, Ian, Sunday, Greg. That is known as the Gregorian calendar.
Steve Edwards [00:55:30]:
Right. I was talking to my friend one, day not too long ago, and I said, you know, I used to be a heavy drinker, and he said, oh, you stopped drinking? I said, no. I just lost weight.
Daniel Kelly [00:55:42]:
Saw that one on Twitter the other day. Did it? Great. Yeah. That was good.
Steve Edwards [00:55:45]:
I wrote that originally. I really like I write all my dad jokes. And then, finally, did you know it's funny. When you die, people cry and they're upset, and they beg for you to come back. But when you do, they freak out. So those are the dad jokes of the week. Alright. Daniel, your turn.
Steve Edwards [00:56:08]:
What do you got for us?
Daniel Kelly [00:56:10]:
So picks. I'm gonna go with a book pick. I have been listening to a book called The Fairy Tale because he actually reads books anymore. Listen to it, through Spotify. It's by Stephen King. Definitely recommend checking that out if you're you're into Stephen King. Very, very well written book, and it hasn't gotten to the the creepy part yet. But, like, there's little hints of it in there, and it's, very intriguing.
Daniel Kelly [00:56:37]:
So definitely recommend that one.
Steve Edwards [00:56:39]:
Yeah. You know Stephen King, you gotta expect some level of creepiness. Right?
Daniel Kelly [00:56:43]:
Absolutely. Absolutely. As far as I'm gonna do I'm gonna throw a music pick in here as well because I've had an earworm for the past week. I'm a nineties kid. Does anybody remember Yellowcard? Does that band name ring any bells? Yes. Yes.
AJ O'Neil [00:57:01]:
Alright. Is that is that the her hair is everywhere or is that
Daniel Kelly [00:57:05]:
No. No. No. Her hair is not everywhere. Yeah. Believe. No. No.
Daniel Kelly [00:57:10]:
No. What was the name of it? They're very popular one. Man, I can't even remember the the the most popular one they have. I think it was called Believe, but I'm not singing it for you.
Steve Edwards [00:57:21]:
Yeah.
Daniel Kelly [00:57:22]:
That's been my earworm for the the past week. Very, you know, heavy guitars. They have violin in there, which is really interesting.
AJ O'Neil [00:57:31]:
You know, I love that. I think that that's the best. When when, Hello, Maybe came out, that was one of the things that I thought was so great. I love orchestral crossover in any music, be be it punk or rap or anything. I love orchestral crossovers.
Daniel Kelly [00:57:46]:
Oh, it's it's beautiful because you have, I mean, they live they have a violinist in their band, and so she'll do this, like, solo violin thing. And then the the whole band will kick in and just and it's really cool sounding. But I think Believe is the name of of one of their most popular songs.
Steve Edwards [00:58:05]:
Okay. Believe by Yellowcard. I was not familiar with that band, but then I wasn't really listening to loud radio in the nineties.
Daniel Kelly [00:58:14]:
If you remember story of the year, they kinda remind me of them slightly, just a little less screamy.
Steve Edwards [00:58:20]:
Less screamy? More musical?
Daniel Kelly [00:58:23]:
That's right. That's right.
Steve Edwards [00:58:25]:
Cool. Alrighty. Well, thank you, Daniel, for coming on. It's been good to have you. It's been good to talk to you on JavaScript Jabber. We've already talked about where people can give you money. So thanks, everybody, for watching and listening, and we will talk to you next time on JavaScript Java.
Unlocking Vue and Nuxt Potential: New Tools, Best Practices, and more - JSJ 652
0:00
Playback Speed: