Potluck: When to Use a Framework × Goodbye Webpack × Custom Events in React + More!

Welcome to Syntax. Today, we have a potluck question for you. This is where we bring the answers. You bring the questions. Please keep submitting your questions. Go to Syntax Scott f m. In the nav, there's a button that says potluck queues. Click on that. You can submit your own question.

Ask us whatever. Soft skills, hard skills, JavaScript, HTML, CSS, love, life, anything goes, and we'll, we'll answer it on a future episode. My name is Wes. I'm a developer from Canada. I was with me JS always as Scott. How are you doing, Scott? Doing super good, man. Yeah. Scott too much. I just spoke at, Denver TypeScript last night, so that was a lot of fun. Lot of people came out. Oh, yeah. It was just super cool. Yeah. So, did you bring some of the the skate decks I saw?

Yeah. We did a little, boards. Wes did a little giveaway, which was actually fun in itself because, I was just thinking, alright, we'll just, you know, write people's names down on the list and draw them out of a hat. And C. J. Was like, Node, Sanity, we Wes can do this a different way. And we had everybody's name from RSVP ing on meetup.com.

So what I did is I wrote a script to pull everyone's name from the meetup RSVPs and put them into an array. And then CJ wrote a script that would randomly pick people. But Wes so fun about it was that, he he the 1st time he put like a delay And so it would, count each or it would announce each winner, like, 1 letter at a time. But the delay he put on there was, like, crazy long. So he hit go, and it's just like a b and everyone is just like. So the next thing you know, CJ is writing a script live and it's on on the screen and he's adjusting it to just output them and, do it in a more fun way. So it ended up being like that part ended up being a fun thing in its own. But we gave away 10 of them. A lot of Syntax fans in the house, so it was super cool getting to meet everybody there. So just a lot of fun.

We should say if if anyone wants to get a Syntax fingerboard, go to syntax.fm.

Click on the swag button in the nav, and we'll send you these are $10. We also got 2 new hats. Do I have my hat? I got one of my hats right now.

I got the wool cap just in time for can't wear it with my headphones on right now, but just in time for winter. And then we also have a a a lighter one, which is blue with the syntax logo on it. So Amazing. Them out. They won't last forever. This fingerboard, they're selling way faster than I thought, which which is hilarious that that's what people want instead of a a hat.

Yeah. You know, it is fun. I, I do love, the fingerboard.

And I always I I Wes actually pretty impressed with your fingerboard

skills on your Oh, thanks. Yeah. I Wes surprised. Editing magic in in there, but I've I've been practicing. Especially, like like, when I'm on a call or whatever, I'll just mute myself and just, like, let like, start flipping around and all here around.

I I'm pretty good. Yeah. I, my my parents sent out a half pipe from my childhood, and my son has been playing with his deck on it. And so I was doing some dropping in and just yeah. It was a lot of fun. Yeah. That's great. Yeah. And if you wanna drop in to solving some of your errors and bugs, well, it's a good place to do that if you have them all being logged into Sanity because Wes what? You can find them super easily. And one thing I actually just added yesterday to our Sentry, which has existed for a little bit, but I I hadn't noticed that Sentry JS always coming up with new tools, was the cache. You can see cache hits versus misses inside of Sentry. So I just added that it's gonna be really fun to be able to make sure that we're caching effectively. There's a lot of conversation going on, developer Twitter about caching these days. So, if you would like to see your cache hits or misses, you wanna check your performance, head on over to century.io.

Sign up and get 2 months for free.

Alright. Let's get into it. Alright. 1st question from Chuck. Hey, Scott and Wes. How would you recommend moving a project off create React app? What tools or frameworks are out there that you'd recommend in the React ecosystem? No Svelte.

Sorry, Scott.

There is no interest in using server components such that is with Next. Js. Thank you. And the rest of the syntax team, excellent work. Okay. So this is a great question. So for a long time, the recommended way to start a React app was with create React app, and then what that did is it spun up a whole bunch of tooling.

I believe I had Webpack and Babel and a few more things that would allow you to both do use a dev server and bundle your application for for development. It was client side only. There was nothing in it aside from React, so there's no router or any server side, no APIs, no server components, none of that. Right? It's just simply the client side rendered, and then you have to do the rest. So if you are moving from create React app, it's very clear what you should move to. If you don't don't want a framework, it's Vite. The move to that should be very simple. The way that Vite works is that you have a input, which is an HTML file, And then that HTML file, it'll have, like, a div that you wanna mount your application on, and then it will also have a link to your script, which is your entry point. Usually, it's like app JS or something like that. And that what that does is it renders out your first app. So, likely, you already have a router. Right? You're probably using React router or or TANstack router or something like that.

So you don't need any of that. And the move to that should be very, very simple. There there might be a couple things where you had, like, some custom webpack config for loading specific types of images or CSS or whatever, but Vite handles almost all of those things out of the box for you. So you're likely don't even need a Vite config. And if you do, it's it's not that big of a deal to to move on over.

Yeah, for sure. Yeah. And that is one of those things that, you know, the cool thing about create your act app is that you didn't have to worry about any of that SSR stuff or it was just a nice, you know, starter, especially for CSR based apps. So yeah, I would personally move that way as well, especially because Vite is just such a great build tool to work in. I know that it's such a great platform overall and I think maybe a bit underrated by React developers, especially those of you who have only used things like Webpack, maybe don't understand just how fast and easy and good it is. There's so many just niceties that come out of the Bos. And you just. Just tell me about. Yeah. Yeah, I know. I love one of my favorite things, Wes, is like being able to import the like a raw text from a file. Yeah. Which doesn't seem like it's that handy, but like you can just, append a question mark raw to the end of an import string, and it gives you that file as a text file. And, man, I gotta love that. I use it all the time. We we actually have a proposal in t c 39 called import attributes,

and it's actually not even a proposal. It's it's already implemented. You but the only implementation so far is JSON where you can import a file as JSON. And soon, there will be the ability to import as text as well, which is

is gonna be great because sometimes, yeah, you just need the raw text out of that file. Yeah. There's it's funny. I was just, needing that just yesterday. I was building a little little code viewer where you have, like, an iframe and the the rendered site inside of an iframe and the code next to it. And, yeah, I'm getting the code already, but I wanted to pass in, arbitrary CSS string from another file and append it to my thing to do the source of the iframe. Right? Because you can have just a string as the source of an iframe instead of a URL.

And so I just like a data 64.

Scott even. Node, no. Just no. Just straight up, explain that. I don't know if I know that. Okay. Let me pull up my code here so that way I don't misrepresent anything.

But, yeah, I wanted to build I wanted to build, like, a, like, a little side by side code and whatever, like, a a demo. There's a attribute on Iframe called source doc, s r c d o c, and that takes just a string. And that string can be HTML. Right? But so I wanted some additional CSS applied to that from CSS I'm bringing in elsewhere. So I just imported that CSS as a raw string and did a string append and threw that into the source doc. Yeah.

Yeah. If the iframe is on the same origin, meaning, like, the same domain name, you can actually reach into an iframe and modify the document of the iframe from the parent, which is pretty nifty.

This isn't even doing that. I mean, this isn't even there's no URL associated straight up string for the whole DOM. It's just just just nothing. Yeah? Yeah. Yeah. For sure. I I guess a blank iframe still has a document, though. So you're you're reaching into the blank document and Oh, yeah. You're just inserting. Yeah. Yeah. That's right. Yeah. Yeah. For sure. Cool. So next Node is from zionides zionides.

What is the best way to get along with a q and a team? Even if you have to pretend and create a shape of a smile on your face. They don't even smile, but create the shape of a smile onto your face. Yeah. How did you get along with q and a?

What is specifically q and a. Yeah. Q and a. Yeah.

What is that? This is q and a. Sanity assurance. For some reason, I I know what QA does, but I never thought to think about what the answer is. Yeah. Yeah. I never put it together. Quality assurance. They're the folks that are making sure that, things that are going out as a product to your users works well.

Right? That it has quality. It's it's the people who are checking to make sure the seams are okay. Right? And when you're saying you get you wanna get along with them, I think the the thing to think about here is that you have a common goal with the QA team. The common goal is to ship good code.

It's to ship a good product.

And the QA team is there to help find those things. And whether or not they come back to you with, now you have a big long to do list of stuff to do. I mean, that stuff you kinda had to do anyways, whether or not you knew it or not. You know? Sometimes things just ESLint through the cracks. So it's not that you missed or you're you're a bad developer for missing those things or whatever.

But you wanna ship something good. It reflects on you at the end of the day. So the way you should think about this is the QA team is there to kinda save your butt, because if those things go out to users and your Sentry is finding all these bugs because you shipped a whole bunch of, buggy, iffy software, and now users are complaining, man, that doesn't that reflects poorly on you. Right? They're there to make sure that you look good for your boss because you crushed it. So I think the best thing to do to get along with your QA team is to know that you guys are on the same team, and they're there to help you.

That's the way I look at it at least.

I I have a I have a different approach. Write a script and replace them. You know? How many how many people still are using QA teams? I'm curious. It's like many years ago, I would work for I work for this company. I did a lot of contracting. And every single time we had a had a had a big push, it would go through QA. And they would click everything and and and test it and and find all the little bugs here and there and a lot of that stuff. Not all of it, especially a lot of the, like, accessibility audit stuff, but a lot of that can be found by integration tests and unit tests and doing, like, a diff on, like, screenshots when you when you deploy the thing. So that is there. I think also what I've heard from people, and this is a bit silly, but they sometimes just put a couple, like, decoys in there because I think what happens is that the QA team has to find something. Otherwise, they're not doing their job. Right? So if you throw them a couple bones in there, this is this is probably a bad answer, but maybe maybe put a couple Deno bugs in there to make the QA people happy. Sometimes this is just internal politics that needs to to be done. And if you don't have a lot of stuff, then they start nitpicking things that don't necessarily matter. You know? And then it's just a whole bunch of work Just fix the nest. Who cares? Who cares? Yeah. Write us to meet. Get them fired. Deno, Wes. I just did some quick googling. Yeah. Joking everybody.

But I did a a quick quick Google, and, man, QA.

There's there's jobs out there. There are job openings for QA left and right. And I did see who knows how real this JS, but it says that, Q and A Q and A. QA is is only more in demand than it was in the past. So I I don't think this is something that's going away. I don't think this is something that is decreasing in popularity. I think it's something that's probably increasing in popularity.

Yeah. Wes we are all shipping software. I'm curious

what if you have QA in your workplace and and what that looks like as part of the deployment process.

Yeah. I I I think it will. I think it's just like any industry in this space is continuing to evolve. But I do think, yeah, I I think there's a very real reality where

you just have a common goal. You fix your bugs and Yeah. Yeah. They're on your side. Exactly. Next question from Stove Racing. What are the benefits of learning React with Next JS framework compared to using previous approaches? So kinda like what we just talked about using just straight up Veed or create React app. I'm currently learning React and starting a new project. I see the latest updates have made Next. Js a prominent option as a framework.

I find many advantages in Next. Js, and I like the built in API functionality that really stands out.

Could you elaborate on how this framework enhances development workflows, particularly with new features compared to other methods? So I'll answer this, like, half Next. Js, but also just half, like, what's the benefit of using a framework versus nothing at all, like, going straight v int and doing it all yourself. So, like, the pros are, like, it's much faster to get up and running. It has baked in routing, often has baked in environmental environmental variable support. It will have, like, server side API stuff. It will have, like, so much stuff that you need on on every single app that you're building. And, also, there's just, like, lots of existing solutions. You know? Often you'll search for something and they'll be like a like, for example, with SvelteKit, I needed, CloudFlare CAPTCHA, which is called Turnstile, and I started implementing it myself. And I was like, I wonder if somebody's built a SvelteKit component for this. And, of course, there was. I there was a really nice component for it. So I just plugged that thing in myself, and I was I was up and running in no time because somebody had written the code for it. The cons to that is there can be some confusion over what is React and what is Next Wes. I think that that's not a huge issue, but just know what is React and what is Next JS, you know, like, where that line is.

There's often confusion over best practices and versus opinions.

You Node? Like, a lot of the stuff in Next JS is very opinionated, which is people often want that. I just want a very opinionated approach to do something, especially with, like, the image component in Next. Js. If you use an image tag in Next. Js, it will immediately flag it red and be like Mhmm. What are you doing? Using an image tag? Use this thing where you have to give it a height and a width immediately, which I get. The reason why they say you you wanna Node and width is so that you don't have the the layout recalculate when that image Node, but also I don't know Node width and height. Like, you tell me. Don't aren't you, like, sourcing the image? It would be nice if you could tell me that.

Yeah. And then, like, documentation plug ins. So Next. Js for many years was running on this thing called the pages router, and they had different approaches to getting server side data and then providing that to the component at a page level.

And then the new way to do it is is called the app router. And they've done a fantastic job at if you find docs for the wrong one, you can always switch to what you're using.

But sometimes plug ins aren't updated for the App Node. Sometimes you're reading a blog post that's not updated. You Node, it's just like it's a little bit much to figure out. Okay. What's the and especially if you're brand new to it. You know? What the hell? Pages router, app router? Yeah. I don't know. I'm I'm using pages, but I'm building an app. So I think with any new project, I would absolutely recommend grabbing a framework because it's just so much easier to get up and running. You can just build so much faster,

and and there's a lot more sort of plugins and stuff at your disposal. So I would say, yeah, grab the framework and and run with it. Yeah. I agree. And in like you mentioned, I mean, there's enough things that are, like, very Next JS specific. When I go on Next JS, I have the opposite experience since I, am more familiar with plain react, the Next JS. I'm, like, struggling to do things because I'm, like, oh, I gotta figure out the next JS way to do things now. So if you're gonna be using the framework, which, you know, makes sense to do yeah. Use the framework and and learn those things.

Next one from Horatio Von Schlappenmeister.

Okay. I don't Wow. Yeah. I don't think this is his real name given the context of the question, which is I just checked out your about page on syntax.f m, and those are all obviously implausible aliases.

What are your real names? And what Horatio is referring to is everybody on this team, except for me, has a kind of a crazy, like, almost too good last name. We got Wes Bos. Okay. Wes Bos. A six letter total. Boss is a last name. Just that's gotta be fake. Caitlin Bloom.

Okay. That's a cool last Node. Ben. Pretty cool. Yep. Ben vinegar.

I'm just saying that. You know? That's, like, the most, like,

you know, that Sanity Philadelphia, Vic vinegar? I every time I see that, I think about it like, what a badass.

So we got and then Randy Rector. We got Rector, Bloom, Vinegar, Boss. Yeah. The and then Reynolds and Tolinski. I, you know, I I have the the least likely of a fake name, which is funny that these are all our real names. We just somehow got the collection of the, coolest people with the coolest last names.

And, I probably should've done a fake last name to fit in with all y'all cool ass names, but I'll take.

Yeah.

Yeah. That's that's something that you see a lot with people, like, joining the Internet now JS they you just go by, like, a handle or or you just come up with, like, a fake last name, because it's so much easier to reference them when when you know what their handle is.

Totally. Yeah. It it is. And and that's good for a few reasons. You know? It's, well, these are all our last names. So now you're gonna have to deal with it. These are we just got cool last names here. Alright. Next question from Jer Bear. Just curious about what your work day typically looks like. Thoughts on things like RTO policies, which is return to office. Where do you get your best work done? How do you handle office relationships if the entire team is remote from you? Stuff like that. Sorry if my question is too vague. It's not too big. I think that it covers a lot. Yeah. I you know, RTO, return to office, is kind of a touchy subject. As somebody who does work from home and has worked for myself, so, therefore, my office has been my home for, I don't know, 10 years plus now.

It's easy for me to say, I kind of romanticize working in offices a little bit, which is crazy to think. I know. I I think it's crazy to say that. It I like working from home personally because of, if my kids need me, I can be at school, you know, quickly or any of that stuff. But when I worked in an office, I did get a lot of value out of, that collaboration with peers in person, having somebody look at your screen and, you know, talking through issues and stuff like that. Now granted, I was a more junior of a developer many of those times. But I think a lot of the mentorship I got in my career came from the moments where you're going for a walk at lunch. You're hanging out with your buddy in your office. You're just chit chatting over over, you know, coffee in the morning or something like that. I got so much value out of that stuff that I kind of romanticized that a little bit and looked back at it so fondly.

But at the same time, I totally understand working from home has been so much easier. So the conversation JS a little touchy on all sides. I don't necessarily know what the best answer is. I do think it's a little funny how, like, the people who are loudly proclaiming that return to office is the greatest thing ever are mostly, owners and bosses. You know? Yeah. And the employees are like, no. Wait a second. That's not that's not as good for me. But typical workday for me is, man, I I drop my kids off at school and then I come Node. I tend to first things first, I tend to do a couple things early on.

I get to inbox 0 every day. Inbox 0 is important for me because it makes sure that I'm on top of what I'm doing. It doesn't necessarily mean that I've taken care of every email, but it means that I've at least read and either snoozed that email to a time in which I'm going to be able to, you know, take care of it. So if I get an email and it's an ask of me, I'll say, I can't do this until noon. Snooze it until noon. And that gets it out of my Bos, and it'll pop back in at noon. I use superhuman as an email client, but a lot of email clients do snoozing. So this is, something that, you know, is very common. So the first thing I do is get my inbox to 0. The second thing I do is write my to do list. I use a tweak Scott Wes o, t w e e k dot s o. It's a simple to do list app. I write my to do list. I move things around if I'm not going to be able to accomplish them, and I take stock of, like, what I'm going to be doing that day realistically.

Because without that to do list, once I'm actually in a position to do things, I I I need to be able to look and say, like, alright. What should I I pick up at this very 2nd? Otherwise, what am I gonna do? I'm gonna go on Twitter. I'm gonna go on Reddit. I'm gonna just bop around with some code without, out direction. Right? And then typically, I'm either recording like we're doing today or I do for YouTube shorts, whatever.

Or I'm writing code for the syntax website for demos.

I'm trying things. I'm trying to break things.

A lot of times, that's kind of where we're at. Since Wes and I are kind of working on the edges here. A lot of the times, the code we're working on, is either just like a lot of exploration, a lot of breaking things, a a lot of just, like, figuring things out, and exploring is really it. So, you know, if if I'm not in meetings, answering emails, or, you know, recording, I'm I'm coding. And whether or not it's for a big project or explorations is different by the day. Yeah.

For me, it's pretty similar on every day. I wake up, take the kids to school, and then, usually, when I'm driving home from dropping the kids off, I will Node feature I really like about Apple CarPlay is that it shows you your calendar for the day. So as I'm driving, I can tap my calendar and see what I've got coming up that day. And, usually, it's or, hopefully, it's nothing.

So I can just work on stuff. Sometimes it's it's meetings or whatnot. Or or on Tuesdays, we we record pretty much the entire day.

And then I choose, as I'm driving home, like, what I'm gonna do. Like, today, I'm driving home. And at the end of the day yesterday, I was working on a layout for the potluck question submission.

And I had a really good use case for CSS subgrid. And I was like, oh, tomorrow morning, bam, I'm gonna record that video and know exactly what I want. So as I'm driving, I'm sort of thinking about, how I can how I can frame the video and, how I can describe it. And then I just sit down and, bam, right away, I record that, edit it, put the thing out.

Then, usually, it's just I have a list of either, like, things that I need to work on, which is, stuff for courses, stuff for syntax, or stuff that I wanna check out, which is just a running list of different technologies. And and, usually, I'll just sort of look at that and say, like, what do I need to do, and what do I want to do? And sorta balance those things out and grab one of them and sorta just take a deep dive into to what it's how how it works and how to understand all that good stuff. So that's pretty much it. The office does not appeal to me at all.

I definitely see the benefit of the chitchat and the back and forth and the planning and the friendships and, especially, like, when you have a problem being able to, like, noodle through it. Like, someone can just roll over and just, like, talk you through it and and noodle on it. That's super powerful. I totally understand that. But, also, I just wanna be

in my soundproof office with my soundproof headphones on with my screaming music, and just crank it through code. Yeah. I get that too. Although, you know, sometimes I'm most productive when I'm in public, like, at a coffee shop. Totally. Be because then I I like I it's not like I'm being judged for not working, but I feel like it makes me want to feel like I have to work and be productive at a coffee shop. And the same thing happened to me in office Wes I felt like if I'm the only one messing around and not doing my job all day long, it's gonna, you know, be obvious that I'm just on on Twitter or Reddit or whatever instead of, accomplishing anything. And and I'm the type of person where I can go down those rabbit holes and, like, an hour later, be like, wait. What was I doing? Where did that time go? So, you know, I think it's beneficial to me. Not like I need to to grind, grind, grind. You know? I don't wanna give that impression off that I'm, like, crazy hustle man or something. But, like,

my brain just works where I'll get distracted in, the environment of warp. Myself on. Yeah. I I find it also the opposite in offices, though, where people like, hey. You wanna go grab a coffee? Or, like, what are you doing this weekend? Like, no.

Leave me alone.

I'm more like I try and I I've gotten more grumpy about that as I have gotten more kids and gotten older, whereas, like, my time to work is my time to work. Yeah. And I don't wanna fritter away a second of that doing something that is not enjoyable to me. I'll obviously, I like going for coffee and whatnot. I I enjoy that part of it as well, but I I feel like sometimes it could be a bit too much of a distraction.

Yeah. You know what I don't miss about the office is, like, inappropriate office conversations where, like, I've had people that I've worked with, like, start talking to me about things that I don't wanna be talking to you about at work or in general. And, like, what what can you do? You can't just be like, go away, please. You Node? Like you said it, but it's still, like, distracting. I remember I was talking to my my manager at Ford when I worked there, and I was mentioning that we were checking out Denver. And he's like, I remember the last time I went to Denver. I went to this place, and it was like, you know, one of those, like, racy kind of, like, Hooters type of restaurants.

And I was just like, bro, what do you do? Why are you telling me this? I don't care. I don't wanna hear about this. I don't wanna be involved in this conversation.

Like, I don't miss that stuff at all because there's just some people who don't have good judgment in that regard. Now coworkers are gonna be overhearing this conversation. I gotta act like I'm yeah. Yeah. Next question from Picklesickle. Not really Wes, but a feature request would be awesome to have a page on Syntax FM with all the sick picks and their links,

where we could see them perhaps filter by tags, etcetera. Yes. We have this. Syntax Scott f m forward slash sick picks has a list of every single sick pick we have ever picked that is sick. And the it's actually kinda interesting how we had to generate this because what we're 826 episodes in, and most of them have sick picks, but they've always just been, like like, it's an h two or an h three or, like, a bold that says sick pic. Like, it's been in the show notes, but it's never been structured enough. And, like, taking unstructured data and trying to extract it has has always been, like, kind of a tricky thing. So I wrote some, like, pretty funky, like, dom traversal type of thing, and it it works really well. I I don't think there's any sick pickets ever missed over all of the all the episodes. So it's pretty interesting if you wanna look at the code of how do we actually scrape that from the show notes.

Yeah.

Yeah.

Well, it it's great that they're out there, and if you ever wanna see any of that stuff you know, we we did look the 1st Yarn. Maybe we did syntax. We did like a holiday gift guide of, like, our favorite sick picks. We should do that again this year. Couple years. Yeah. Let us know if you wanna see that Node again. I've I've Scott the we stopped it after a couple years because I was just, like, picking the same thing over and again.

Yeah. Because I just like the same things that I've liked for 5, 10 Yarn, but it's been probably 2 or 3 years since we've done it, so maybe we should. Yeah. For sure. Alright. Next question from.

How a junior becomes a senior? Who is a senior? How to learn those stuff? And what kind of projects, books, and communities could help with that? Basically, the difference in roles here between a junior and senior, and how do you get to be a junior or, or how do you get to be from a junior to a senior dev? Now a lot of this is just a label.

When I got my 1st senior label role, it was only because my boss had taken a new job and I was the next person in line. That's it. So in that regard, that's how I got the job. That's how I became a senior. And once you get that title, I'll tell you what. The next job is probably not going to be a junior job.

So, you know, sometimes you just get that Node, and and that's what you are. But if you want my opinion on, like, what makes a junior dev different from a senior ESLint my experience, in in the way I feel about it JS that a senior developer has a bigger picture view of everything.

Whether that JS, like, business stuff, as in they can see the big picture JS how what you're doing applies to the business as a whole. And, you know, you're not just focused on making this button click right. Right? That's a a senior developer type of thing. But a senior developer also tends to make decisions around the codebase that are smarter for the codebase in the company long term than the junior developer who wants to plop in whatever latest and greatest thing that they just learned this weekend.

That is definitely a junior trait to be like.

Let's rip out all this stuff. Now granted, I'm a ripper outer. I'm a refactor type of guy, but I'm not doing that in the context of a a code Bos that other folks are having to work in. So it's a little bit different. The the senior developer understands a solid, mature code base. They understand how to keep that code base, functioning long term. They have a bigger picture,

view of things is the best way I can describe it. Beautiful. I don't think I have anything to add to that. So, really, really well put. Man.

Next one from Diabeta Node. Hey, gents. Thanks so much for the podcast. I seriously can't get enough.

Firstly, for Scott, do you ever plan on doing any Go Scott videos or courses? Game dev has been a longtime passion of mine, and I always think your courses are extremely well taught. Would love to see some content around it. Alright, Scott. Let's let's hear it. What's Go dot, and, will you make something on it? Okay. So Godot.

Godot.

Yep.

Godot is a open source game dev framework. A lot of these game engines, right, they require license fees. They're expensive to pick up, or they're proprietary, this or that. Godot is open.

It's fantastic.

It has an incredible community of people working. You can build 3 d, 2 d mobile, even publish to web games with it.

So Godot is really just like the coolest platform, I think, for learning game dev, at least for me personally. Mostly because I'm new to game dev, and I don't have experience in, you know, Sanity or any of these other ones beforehand.

I did check out a bunch of these. Like, love is a, I believe a Lua based framework that I checked out a lot. But Godot is really cool.

I would love and I've been thinking about this a lot. I've been thinking about doing Godot tutorials. So this Wes, I I put it in here specifically because my son and I are building a game together as an experience so that he can understand Scott only coding, but, like, game development, what that entails. He's like, I wanna make a video game. I'm like, alright. But we're gonna we're I'm gonna we're gonna do this together, and you're going to watch the tutorials with me in a way. And we're gonna get the little guide moving on the screen together, and you're gonna get to experience those little wins. Alright. We wrote this Scott, and now all of a sudden he can do that. Now I'm not making the kid, my 7 year old, write code. But I I I'm having him be there, and he's so excited. He's been the idea man. I said, hey. Come up with 8 bosses for this video game. And he drew them all overnight.

The next day, he's like, dad, I got all 8 bosses.

And what's so great about this and now I don't have to come up those bosses. We went on chat chat g p t and did some, like, hey. Give me some pixel art for these bosses just so we could visualize what they look like, just so he could get his brain working.

The funniest thing about all those bosses, Wes, is that, like, man, his little brain is so funny. He'll he's like, dad, check it out. Here's a boss. It's a shark. He's got, like, you know, like, a spike on a chain as a weapon, which is a, urchin. It's a sea urchin, spike on a chain. I'm like, that's awesome. And he's like, and he's got 8 heads. Why does he got 8 heads? Why does he gotta have 8 heads? And he's like, alright. Here's this next one. He's a a salamander that shoots slime balls, and he's got 6 heads.

So all of his bosses had multiple heads. I was like, every single one of the bosses had some amount of heads. Wes heads, 8 heads, 6 heads, and I was just like, alright. How about 1 boss has 2 heads, and we can leave it at that? So yeah.

I you know, it's been a lot of fun, and I would love to do this, especially JS, like, a, you know, Scott and Son makes game together. Yeah. Here's what I'm learning kind of thing. Cool series.

So is Godot like, is it a GUI for making apps, or is it like a like a programming language?

It's it's both. So there's a programming language called GDScript, which I believe is I'm gonna confirm this. It's c sharp based. GDScript is kind of like a more simplified,

c warp, and that language is actually really nice to work in. Indentation based similar to Python, high level object oriented, imperative, and gradually typed programming language.

It's actually really nice to work in. And then the the the GUI itself, you write your code in the GUI, but you can also click around for, like, adding tiles and collisions. And, yeah, it's it's kind of like it's kind of like a code editor mixed with a a GUI for types of things that you can't do with code. But you're you're programming, let's say, a lot of the things like you would typically do in JavaScript type of thing. When I hit this key, you know, apply this physics by this plus this equals this to make the character move or have the physics apply. So you are writing code for for quite a bit of the things, and then other things are are entirely GUI based. But, yeah, it's a cool platform.

It looks like you can write it in JavaScript or csharp.net.

Yeah. Yes. Which is pretty neat. All the tutorials I see are GDScript, and, like, their their docs are really good. And I like GDScript. It's it's cool language. And and the TypeScript stuff the types the TypeScript. The types feel like TypeScript in a a good way. So, yeah, it's comfortable to work in. Nice.

So 2nd part of this question was, for both of you. Obviously, there's a dozen and a half AI platforms out there. Have either of you tried Find.

Seems their JS is option is free and perhaps slightly more dev centric than the regular chat g p t.

But I could be wrong. Do you have a favorite? Yeah. I've never tried this one. It seems like there are a 1000000 of them popping up overnight.

It seems like the big ones are all letting you now choose your model, which I thought was really interesting because, like, 6 months ago, everybody was trying to make their own programming model, and that's still certainly a thing. But now it seems like like, yeah, cursor allows you to choose your actual model. A lot of people are moving to Claude for this type of thing, which, like to say, I was very early in on the the Claude train when everyone was talking about, chat g p t.

Copilot obviously uses OpenAI under the hood, and even Node uses you can you can choose to use, OpenAI.

The real secret sauce with a lot of these products is not the model behind them now. It's how you provide context, how you do the auto completion.

All of what you provide to the model as your prompt is is the secret sauce behind it. And, we had the Node guys on Wes and they talked about, like, that's how they make it so good, because it's not simply just like, take this line of code and make it better. It's I have these tabs open. This thing's in my copy paste. It's referencing these other functions that are in other files and is smart about your code base. So I haven't checked it out. Find, p h I n d. I I need to spend, like,

7 days trying every single one out there. I'm gonna be honest with you JS you gotten, 2 pronunciations

wrong in one Node. How do you say this? Find. Find. Yeah. Sorry. Gosh.

That's a silly silly, silly name.

I know. It is kind of I I actually I used this like man, I used this before Claude anthropic Claude was out, and this one did a much better job for me with code issues than chat g p t did at the time. But after Claude came out, I just started using Claude for everything. And I have not been back to find at all. So when I did use find, I found it to be very good, but I have not looked at it in a little while. Then maybe I should give this a another shot specifically because it is dev centric. But, you know, I did find the UI to be nice. I found working with it to be nice. But yeah. Yeah.

I also find now allows you to select GPT four o or Claude Sanity, Claude Opus. So, again, like, this is another tool where they are allowing you to use the existing models, and their competitive edge is is what they put on top of that. Yeah. Cool.

The one that wins for me is the one that can utilize new libraries the best, like Svelte five. Right? That's the one thing I like about cursor a lot is I can pass it this Svelte five docs so that I can have that context in every query. So, yeah, that's always a a blocker for me. Alright. Next question from Bilal. In React, we pass callbacks to a component to take on action updates that components tell us about. So when a component needs to fire an update, it can fire, a callback as a prop. In some other frameworks like lit or angular, we listen to an event or output for the same purpose. The difference is that events bubble up so that prevents callback prop drilling.

Mhmm. But is there any other inherent advantage between callbacks and events, or are they just 2 ways of essentially doing the same thing? Yeah. That's an interesting thing because I've I've done both of these things, whether that is through custom events or through passing a prop. To me, the difference lies in if I control the component itself, the comp like, if it's coming from a component library, I kind of prefer to pass an event up. But if it's coming from a component that I wrote, for some reason, I almost always do it as a prop. No no questions about it. Like a on change equals

Correct.

Yes. Yeah. And I don't have I don't have any issues with that. For some reason, just because I have control to dive into the component to tweak it at any given ESLint, for me, that feels fine to do that way. I think the prop version is potentially easier,

but I don't know. Yeah. I don't know about advantages. Wes, you have a bunch of stuff here, so I wanna I wanna hear your opinion on this. Yeah. Yeah. It's it's a kind of an interesting thing because, like, what he's talking about here is if you have, like, let's say you have a map component and somebody types in address to that map component, and you wanna know when like, let's say that event is called, map address update, and you wanna know when that map address update happens.

And in in a lot of React components, you would just say on map address update equals, and then you run the function at that point. Right? And whereas with, like, Angular or something like that, that event will fire, and it will bubble up, meaning it will go every DOM node higher, higher, higher. And then at a higher level, you can sort of catch that event and say you can listen for it. So if your if your state management is happening or if you need to to deal with that event at a higher level and not have to what he's saying here is prop drilling, which is Yeah. I have this function that I need to to run at a high level. Now I have to pass it 7 levels Deno in order to sort of expose it and pass it at this map component.

So you can do this in React as well. Mostly, people like to do the inline version because it keeps everything sort of together, meaning that your component only knows about itself, and it's not hoping that somewhere higher up the chain will will sort of deal with that. Now that's the idea, and, also, I agree that's a pain in the butt because you have to it just you have to pass them from one to another. So you can use custom events in like, like, custom DOM events, and you can fire them from DOM elements. And you for that, you would need a ref and a custom hook.

And then that custom hook can then be you can import it. You can put it in the context to be able to access it earlier. You can also use an event emitter, which is similar to custom events, but an event emitter is not tied to DOM elements, which might be kind of nice.

So you can fire an event little little little lower. And then higher up, you can listen for that event to to fire.

And this this idea has has been around forever. Right? We used to call it PubSub.

Now we're we're calling it signals.

I think that we will start to see this once the signals make its way into React a little bit more, but lots of state managements Vercel stores already do this for you as well. So if you go and reach for a zoo stand, you can just subscribe to that store. Yeah. And instead of firing an event, you would just listen for that state to to be updated. Right? Svelte has this as well. You can subscribe to a store if you want to, and and you can fire an event when that thing happens. Even even React has a hook that's not well known, which is called use sync external store, and that will allow you to Scott detach the 2 from each other.

Yeah. I and then maybe that's why I don't think about this that much. I I tend to externalize a lot of my state in that kind of way. Yeah.

To me, like, prop drilling some kind of an event feels like, some type of architectural issue or something. You know what I mean? I don't know. Maybe it's just I haven't hit that issue. But It's a pain. Me. It's like, if you have to pass

a event handler, like, 3 levels deep and it has to weave its way, And then you think, oh, I'll throw it into context, and it and neither of them neither of them are great. It's Wes. Because, in Svelte, you could just import the store Right. And listen for it, which is the best. Like, I everything should be like that.

Yeah. Totally. I agree. And that's how I like to work in React as Wes. And you can work that way in React. Just some reason people don't Check out Zusdand.

It's it's really good for that. Next one from Dean Forrant.

Recently started listening to a show during my morning walk. I'm a developer who's been in the industry for 20 years. I recently got laid off from an organization where I had been working for for 10 years. I'm in my early fifties, and I'm looking for a transition to freelance development as I am nowhere near ready to retire.

Even though I gained a ton of experience over the years, all of that experience has been used in products that were proprietary in nature aside from a public facing website Wes I have collaborated with a team of developers on-site. I really have no portfolio of work to show. What advice can you give to someone who's just transitioning from a career of working for a single company to a freelance role? Keep up the good work. Yeah. We we hear this a lot where, like, life gets busy.

You work for and also, like like, that was the thing to do for for many years. My dad worked for the same company for, like, his entire life. You know? People do that, and you put in your time. Whereas with web development and and a lot of careers now is is you you jump around.

So what do you do when you are no longer at that company and you don't really have a whole lot to show because most of your work was proprietary? You're not allowed to to show it. So couple things you can do here. 1st, I would immediately start getting on the horn and and working on your your web presence. So whether it's YouTube videos, blogs, TikToks, just like explaining what you're working on, sharing absolutely everything you know, going to meet ups. You have to get if you're gonna be a freelancer, people have to know about you. Right? And you either have to be the most smart person in the world that people come to you to fix, like, this Node issue that you're you're the only person in the world that's good at, which is not that common, or you guys have to be well known. When I was doing freelancing, I was posting lots of blog posts about the stuff I was working on. I was going to meet ups and talking about it. That's how I got most of of my work because it is very hard to find a reliable freelancer, and I'm willing to bet you're in your early fifties. You have the skills that a lot of younger developers do not have in terms of time management and communication and and all of that stuff. So you have a huge leg up there, and people love to work with people that are not flaky. It's so hard to find people that are not flaky to do stuff.

So start doing that. Obviously, make a website. You can have a private portfolio as well where you can talk about the stuff that you worked on. Just say, hey. Contact me for a private portfolio. I did that as well. Not able to talk about this stuff publicly, but I'm able to to maybe show you, get on a call, and sort of talk about how that stuff works. So private portfolio, start getting some stuff out there.

Put you get some stuff up on GitHub. You just have to create a bit of a presence. And I think once you've done that, the the leads will start to flow. People will tell their friends. Tell everybody you meet. Hey. I'm a web developer. If you ever need anything, it's almost always, it's, hey. I don't need anything, but my sister's husband's dog needs a website.

And, I'll I'll pass the the contact on.

Yeah. Speaking of dogs, I don't know if you can hear this noise.

My dog has a cone on her head right now, and it's my sheepdog.

And she does not like it, so she's just, like, rubbing it all over everything in my office right now. I'm gonna have to put her in the house. The other day, or was it just yesterday, before we started recording with her cone, she unplugged my she unplugged my audio interface. I couldn't get audio her noise on my video. I couldn't get video because she walked underneath my Wes, and her cone caught on a cable.

Dog cone.

Man, you need those, like like, twist lock cables. You know? They use those in some industries.

JS that a thing in the audio world? It's got Yeah. It is. Yeah. Totally. Yeah? Yeah.

And even XLR cables, which are like microphone cables, you know, they clip in. So Yeah. Oh, yeah. They have, like, a little yeah. You're right. A little retainer clip. Yeah. We need retainer clip USB c is what we need.

I'll guarantee that works, and it's, like, $1,000 per cable.

Oh, they no. Here it is. USB c locking cable that exists.

Node But how do you how do you, like, does the thing you're plugging it into also need to take it? That's such a great question. I have so many questions about this cable.

I've never seen anything like this. I have no idea what this connects to if you have to have the special type of connector. I've seen this with Node bibs Wes there's this 1 company trying to, like, recreate the hose bib, and they have, like, this beautiful Wes lock proprietary hose bib. And, like, there's no chance I'm gonna put that on my house where, like, this 1 company owns hose bib. You Node? Your your hose breaks, and you have to, like, order apart from this 1 company that owns a patent to hose bib. I'm not even a proprietary hose bib. I got enough issues with my, Apple stuff being proprietary.

Your hose bib. Next question is from Shivan.

How do you deal with negative feedback? I'm fortunate enough to be working with an amazing and supportive development team. We always work hard as Wes, can produce the best for our users, and we get great feedback from management and power users.

However, when I talk to more peripheral users, they aren't very impressed.

For example, we might get complaints about our login system despite the work that we put into our features. Keen to hear your thoughts and thanks in advance. Yeah. You know what? The hard part about feedback is that not everyone is great at giving feedback.

And sometimes people are harsh with their feedback or maybe the way they give their feedback is not helpful.

Maybe it maybe it's, like, hurtful in, like, an ego type of way, but maybe it's just straight on not good feedback. Like, you can't nonactionable feedback. Right? I've I've mentioned this on on the show before, but I had a client one time tell me the interface feels cloudy, and he needs it to feel sunny. And I said, what does that mean? I that's the best he could do. And and sometimes that's what you get.

But in my mind, you know, the the feedback in general, you need to ex externalize, like, yourself as a developer, the things you're capable of from the product and the feedback it gets.

We get a lot of feedback on syntax. I'll tell you that. And, honestly, 99% of it is very good. But, occasionally, you'll get a comment, some feedback, and and and it's like, it's really, 1, not helpful or 2, super rude or, you know, occasionally, like, personally attacking.

And I know it's not the same as development, but it can feel like that.

The same way you you get your your feedback in development. And the best thing and something I really admire about US is that when you get negative feedback on syntax, I'm more the person that's gonna take it personally, and you're more of the person who's going to look at it and say, there's some truth into this feedback. So I think what you need to do is always look for what that truth is in the feedback and less of the individual attack or the individual, like, the way that the feedback's presented and take a step back and look for what that truth is.

Yes. I you have to look at it and say, what are they trying to say here? Like, what like, they may have have been a little aggressive with their feedback, and and certainly I've done this as well. Like, I'll give you an example JS many times I've I've tweeted out my frustration with, with render, or I I literally got on, emailed the CEO of FreshBooks, and it was just like, you this app is getting shitty.

You know? And I like and I gave them all your feedback, and I only do that because I care. I like this stuff. I like render a lot. I like FreshBooks, but there's things that annoy me about it, and I'm worried that it's not gonna get better. And if I didn't care, I would just move to something else and and stop using it. But I care enough that I wanna see this product survive, or I wanna see this going. So the Wes when people give me feedback, when I give feedback to other people, they sort of just, like, peel it apart and say, like, what are you actually getting at? What's the actual issue here? You know? And it it could be that the issue is that that person has a personality disorder, but it also could be that there's some truth to it. You know? There's oh, maybe maybe I do understand what your frustration is. So there's that. And then also, like like, what do you do with that JS if just talk to them straight up.

And often you can really neutralize any aggression that has there. Often, they can be a little bit frustrated with what's going on, and you say, hey.

Sorry about that. Love to hear a little bit more. What do you think what do you think would be a better way? You know? Follow it up with, like, a, like, a kind question, and you can get good feedback out of it, and you can also get some neutralization.

Often, the person will say, I'm sorry. I I came off so aggressively. You Node? X, y, and z was going on in my life right now. That often happens because I think people

look at a product or a business or anything as a soulless entity and not the people who are working behind the scenes working on it. And if you can bring that humanity back to that conversation, like you said, I think people, always dial it back.

And that's something that, you know, I I've had to learn quite a bit over the course of my time here. That's owning a business and having customer feedback or whatever or anything like that, YouTube comments. You always have to look, at, like, how to make how to communicate and how to truly get to their the truth that they're trying to give you, but in a human way so that, yeah, you connect.

They can give another example is, Marques Brownlee, MKBHD.

Yeah. So he right now, he's under fire for Yeah. He launched, like, a wallpaper app that's $16 a month for access to these wallpapers, and he's getting JS just solid orange. Roasted.

Absolutely roasted by everyone.

And, like, I I sent out a tweet about it. I was like, this is ridiculous. Like, 16th, that's more than Netflix, you know, for for wallpapers. Yeah.

And, like, he's he's obviously getting hammered with with feedback right now, and it's because like, a lot of the replies to mine were like, yeah. He's a scammer. He's dead to me. And it's like, no. Like, I I say this because I love Marquez, and I think that he understands this stuff better than than this. You know? I think I expect more out of him, and I I wish to see more out of him. And, obviously, he's taking that feedback being like, yeah. The people are mad Scott because I'm just some huckster trying to make an app that has expensive in app purchases, but people are mad because they trust me, and and they love my work, and they don't wanna see me go down that route.

Yeah. They're not mad. They're just disappointed. And I don't think disappoint. That's even worse. Yes. They don't how to express that disappointment, so they express it in a way that comes off as like, ah, benchmark. You know? Yeah. But, yeah, I I'm disappointed in it too. I mean, the dude has such a a good reputation, and I feel like, at some point, he probably should have thought, is this a good idea? It's and I saw the latest thing on that, Wes, for to make this about tech stuff JS that all of the wallpapers are in a unsecured s three bucket. So once you open the bucket, you can just download any of that. This is a JSON file,

which people were, like, replying, like, yeah. You can just download them now. I'm like, no. Like, he has all the right in the world to charge whatever he wants for these wallpapers.

Yeah. But we are also able to criticize, like, that's too much.

$16 a month for access to wallpapers is is too much. And then also, like, the the really scammy ads. Like, I got a ad for bail bondsman, which, I'm not in trouble with the law, but I was like, like, like, the ads on it were awful. He had to sit through, like, these, like, really awful, like, game ads. It just felt icky, and we wanted better from him. Right? And, and then also, yeah, he had a massive security hole of not securing anything down, so he could just look at the JSON file and download them all.

So silly.

Yeah. It's silly. It's silly indeed. Alright. Well, let's get ESLint, sick picks and shameless plugs.

My sick pick today is an open source project, and it's a self hosting project.

Now there's a number of these you you use, like, MB. Right, Wes? Or do you use, Plex? Which one do you do?

I use Jellyfin. I was on MB for many years. Okay. Yeah. By the way, I've been trying to email the, like, lead maintainer of Jellyfin and get them on because I'm so curious about that project. Right? It's it's multiplatform, runs on TVs, runs on mobile apps. It's a huge JavaScript app, c sharp on the back end. But there's something weird about the developers who work on these, like, semi it's not illegal, but, like, people are obviously using it to to stream downloaded shows. Right? And Node one will ever

ever get back to me on that. But, anyways, go ahead. Yeah. Yeah. The Jellyfin, I you know, the reason I don't use Jellyfin is because they don't have a Samsung TV app, and I don't wanna Chromecast everything. You could there there's an open source one, but you have to get it to the upper end. They have one now.

They do? Yeah. For the longest time, I had to side load it. That's what I'm saying. I don't wanna be that. Yeah. But no. It's like, I have Samsung Frame, and we just go to the go to the Samsung store and and install it. Okay. I'd prefer to do that.

But, yeah, I I run MB. But here's something I just discovered recently, and it's a really good piece of software.

And they're coming out with a native Bos app. It's audiobookshelf.

So I listen to a lot of audiobooks.

And you know what? Audible, expensive.

I you don't own the I mean, you kinda own it, but you're tied to a subscription and stuff like that. Audio bookshelf is basically MB for audiobooks. Now you can do audiobooks in MB or I believe you can even do them in Plex, but it's not necessarily made for it. It's not very good. And Yeah. Audiobookshelf is, like, really, really nice.

It it again, it's an open source project, so expect bugs here and there and whatever.

But I I really really have been enjoying this thing. I installed it on my, Synology.

I set my wife up with an account.

She can have her own books and her own, like, collections and all this stuff. And, overall, it works really well. And what's cool about it too is that the API is nice enough that there are several apps on the App Store consuming this API that also work with other things. So you could use, there's a couple apps. The one that I'm currently using is called, PlaPPA, but they are coming out with an official one. It's just under, test flight right now, and I don't have access to it. So there will be an official app for this thing. It's it's been really nice, and I I've been really enjoying using this. So audiobook shelf, check it out. So Plata is an audiobook player client for Jellyfin and Audiobook Shelf Yes. And ESLint. That's nice.

Yeah. I I've been wondering about this because, like, we do audiobooks, and we rent them from our library. But the apps are just awful. And, like, you have to download yeah. Libby. And sometimes they expire. It's so annoying, like, trying to find 1 for your kid, and then they finally find 1. And it's like, well, that one's taken out right Node, or you had that Node, but it expired. And Yeah. That's cool. Yeah. Check it out. I'm a sick pick. The Sanity hats. So we just got 2 new hats added to, to, the syntax store. They're $20 each. I got the felt one right now, and then there's also a blue one with the syntax logo. I don't have it in my office right now, but these are awesome, really high quality hats. We made them from scratch. I didn't make them myself, but, like, if you take a look Node it. At the the inside of the hat, all the seam tape says syntax. There's also a spelling mistake on the the label. I don't know if you noticed that, Scott. No. No. I didn't. I, I'll I'll leave it for you. You have to buy it if you wanna see pnpm spelling mistake, but I was just playing with it the other day. I was like, I made the tag. I designed the tag. I go, oh, crap.

I spelled that wrong. Should have century on it.

Yeah. Yep. Shoulda or at least a spell check. But that's a really cool hat. Check it out. $20. Really nice hats.

Syntax. F m. Click on the store or swag in the in the URL bar. You can pick Wes up yourself.

Sick. Cool. And I'm gonna shamelessly plug, Syntax on YouTube. So check us out at Syntax FM. All of these episodes and so much more are available on YouTube. Bos head CJ, CJ Reynolds just released an incredible video on create your own Next. Js starter template. This thing is 2 and a half hours long of some of the most in-depth, content you're going to get. So, you know, I think the biggest complaint a lot of people have with YouTube developer content is that it's done by nonpractitioners, and it's surface Deno, and they're just reading the docs or something. And this is not that. CJ does an incredible job getting super deep into these topics. So if you are the type of person who likes to get into the nitty gritty of it all, check it out at syntaxfm on YouTube. Alright. Thanks everybody for tuning in, and we'll catch you later. Peace.