Reactathon LIVE

so we're gonna cut over to that real quick. But we are sponsored today by 3 awesome companies. First one, a new one, Magic Bell, the embeddable notification inbox, rid FreshBooks, which is cloud accounting and Sentry, which does error exception. You know that, but they do performance monitoring now as well. We'll talk about all of them through the episode.

Welcome to I almost did the I almost did the scary voice again. Welcome to syntax, everybody.

Spooky.

Thanks so much for everybody for tuning in. My name is oh, no. We have slides for this. Welcome, Scott. How you doing?

I'm doing good. A look behind the scenes of how unprepared we are. Ready. We're gonna clap too. You didn't even clap. Oh, yeah. You put your hands up to let's do the clap. Hands up, and I put my hands up, and I was like, oh, we're gonna clap. No clap. Alright. Let's do a clap. Ready? 3, 2, 1.

That was the best clap we've ever done. Not for me.

Awesome. Well, Let's get into it. Thanks, everybody, for coming out. This is super fun. We've got a lot of interaction today, so, make sure that you're glued to the of that, and we also have some q and a and some stuff. We got links coming up in just a sec. Yeah. So to answer your question from a minute ago, I'm doing good, Wes. Good. I'm doing very good. Those of you who are listening on the podcast, this is, being originally recorded

at Reactathon 2020.

So shout out to everybody who's listening into a post fact, but this is going down live right now. How do we wanna kick this off, Wes? I think let's let's get into intros, and then we'll we'll get into the show. Well okay. For those of you who have never heard of syntax, we are a twice A weekly podcast.

And on Mondays, we have 30 minute or shorter episodes we like to call Hasty Treats. And on Wednesdays, we've got tasty treats. That is our hour long

screenshot. And, Scott, you got your cursor in the middle of the slide.

Rid. My name is Scott Tolinski. I'm a developer from Denver, Colorado. You can find me at s t o l I n s k I, just about everywhere, Instagram for dance moves and Twitter for code moves.

My name is Wes Bos. I'm a full stack dev from Canada. I tweet most recently fleet until they shut it down. And Instagram at Wes Boss. Bleeding down? No. They're not, but it's not taking off as as well as I thought it would. So we'll see. I flee. I flee.

Alright. What do we got next? So today is a live podcast. What do we got on the gamut? We're gonna have all I want for Christmas in React.

Rid js or NAS where you have to decide if the library that we're referring to is a real JavaScript library or rid if it's fake, if we made it up, or if it's potentially something else as well as a JavaScript library. We've got underrated versus overrated, where Scott and I talk about rid hotness you hear about often, and we're gonna give our opinion of whether you should spend your time on it or not. We're also going to be doing a re Fun game that we, prepared, and I'm actually really excited about this one because we have not talked a whole lot about it. But we're doing something called syntax error rid Where Wes and I are going to throw up a code that has a a small error in it somewhere, and we're going to have to try to find it without rid Code styling or anything like that. We've got JavaScript hot take tweets. That's all I'll say about that for now. JavaScript hot take tweets. And we also have read. Q and

a with Scott and Wes. The q is me, and the a is Wes in this one. For the q and a, we've got a link. Rid. So if you have a question you'd like us to answer, go to pigeonhole.atforward/tasty.

Rid. There's 2 things on there. We're gonna play a little polling game in just a sec, and then there's also a q and a. You can add your questions in there. So if you've got something already, rid throw it in there, and you can upload the good ones and whatnot. So

let's get into the content here. The The first thing we're gonna be doing is all I want for Christmas in React is and these are fun things. And if you think some of these things should not be added to React, that's cool. I think these are just sort of some things that maybe we've seen either elsewhere or just things that we think could be better that we really like, would love to see and react. Rid. So the first one, I think this is be on top of a lot of people's list would be suspense for data fetching. You know, there's just an endless amount of jokes you could make about being in suspense about rid but I'm not gonna go there.

It's just,

once you use suspense for data fetching or at least give it a little try, it's really nice to use, And I would love to see more of this, but, man, yeah, I think we're just gonna be waiting for a little while. Yeah. I don't I don't know. I just wish that we knew what the status of what it was. Or like I know they're they're trying to spend their time to see like make sure that they make the right choices and the best approach. And we have all rid like possible server streaming stuff that's coming. So pretty interest to see what comes of that. Next one we have here is unmount animations.

This is a general theme for me in React is that I look over at it's that meme where I look over at some of these other frameworks. I go, that looks nice. Like, I kind of wish that a lot of the stuff was just built in and you didn't have to use third party library. I wish there was just like a first party way to do this this type of stuff, and I don't even do a lot of animations. I don't Scott, you do lots. Right? Yeah. I do lots. And and specifically,

the unmounting animation bit kills me So many times because, like, if you are nested deeply and you want to control, like, the delay, like, even a point, 03 second delay, unmounting a component. It's kind of difficult to, like, really orchestrate that, and it's not like it's not doable.

We have things. But If you are several components deep and you want to unmount the parent component, orchestrating something nested like that, not super duper easy to do still. This next one, I'll let you take because I know this is your your baby. Yeah. Well, okay. So I would like to see single file components, rid. Which, like, it doesn't necessarily say that I need single file components. And, really, what that is is the idea that you have a file, And the framework can understand a little bit more about the application or that specific component just by the nature of the fact that it's in a file. The obvious example of this would be something like a style tag in a Svelte file. A style tag in a Svelte file automatically scopes the CSS within that file to that component.

And the amount of JS you could save typing just by having Writing a little style tag below your component and having it just work, little sprinkling of, magical, salt? What do do do you, have any fancy salts? We have a volcano salt, which is black.

Oh, really? No. We have, What's the the flaky salt in diamonds? Yes. Diamond.

What is that stuff? Courtney just bought it. I sick it on the podcast before.

Mal don't. Yep. Mal don't. And we bought like on Amazon. You can buy like a bucket of it. And last summer I bought a bunch of salt rid Cellars, which is like a little wooden thing with a lid on it, and I gave everybody in my family a salt cellar with the the salt in it. It's it's an awesome gift. Super cheap. It's kinda nice little stocking stuffer, so hot tip for you. I would take a salt flight, add a little bit to my, component files and and have single file components there.

Next 1 we have here is prevent default shortcuts. Just like one of these little thing. Like, if there was a syntax For handling events that was, like, star equals I think I don't even know. Maybe I think another I I saw this in another framework. A lot of this stuff is, like Svelte. Yeah. So what what's the svelte syntax for that?

You can just tell it to ignore the prevent default, like, directly on the component via, a directive. I forget what the syntax is offhand.

Like, on click or, handle change star equals, and it, like, immediately prevents the default on that, that would be kinda cool. Yeah. I'm really trying to limit the amount of times I say Svelte here. I'm I promise. Svelte Jonathan, this is a Svelte Adon. It's true. Maybe we just need to rid Move over. What do we got next here? Form input state to mapping. Oh, gosh. Yeah. I just think, like, forms in React, Everybody uses forms in their React application. Almost everybody does. And wouldn't it be great if there was some sort of, like, built in thing? Like, I remember back to the Angular days. I still remember.

You just, like, n g bind, and you give it a piece of state, and it just sinks in. Like, oh my god. It's so And, like, if it's a number, it will parse float or parse into it. I know there's lots of libraries out there. Whenever I talk about forms and everyone's like, have you heard of Formic before? I'm like, yes, I've heard of Formic, and, like, it's it's awesome. But, like, I wish React would be default, rid have all that stuff baked in for you. When I look at, like, Formic code,

it's like this is no less complex than Just writing all the state updaters myself, and that's not what I'm looking for. I'm not looking for I mean, yes, I want complete control, but I'm not looking for Endless fine tunability. I'm looking for do it all for me, and that that can be nice. I I actually ended up even writing my own form library because I didn't like any of them, and It's still not great, and maintaining your own formal labor kinda sucks in itself. So, like, there has to be a better way than than making controlled Date for each individual reducer or whatever. There has to be a better way. Now we're gonna be kicking off something that we like to call JS or NAY s, And this is going to be a fun little game where we shout out a library title or potential library title, you tell us if it's a JavaScript library, an object of which we're going to define, or both. So we've done this a couple of times on our live shows, and it's of our favorite games, so let's start it. Alright. So is

Graphene,

carbon atoms rid. Organize in a hexagonal lattice. Or an opinionated Python library for building GraphQL libraries. Or both. Or both.

Get your votes in. We got wow. Big number of votes. They're flying in now. Yeah.

Alright. We're gonna reveal the answer.

Both.

It is both. So I looked it up. Job. What graphene was. It's when carbon atoms are organized in a specific way. Kinda interesting Wikipedia read.

Next up, we have Floodlight, is it a super simple syntax highlighter for XHTML documents?

A large light used to illuminate dark outdoor spaces. Or both. By the way, shout out to Pigeonhole.

They make this awesome, like, conference software where you can do, like, live polling like we are doing right now, rid And it's awesome. Like, we checked out probably 5 or 6 different pieces of software.

And, I think I wanna have one of their devs on The podcast just because of how super fast and, like, slick it is. Yeah. Alright. Ready? Reveal answer.

Oh, man. Only 3.7% of you got it correct. It's literally both white. I think you might have goofed this one, Wes. Oh, yeah. So, Obviously, it's both, so I keep that up.

But only only 40% of you got it right.

It's not a light to illuminate dark spaces. It is. It is.

Oh, man. Alright. Next. Toy machine. Is this an early 2000 skate brand or a view based GUI for creating state machines or both? Alright. Here we go. Answer.

Boom. 51% of you were correct. It is an early 2000 Deepgram. Although that would be a good name for, like, a totally believable. It's so believable.

A view based GUI for creating state machines? So believable. Yeah.

Alright. Next, Joplin. Is this a free open source note taking and to do application based on markdown,

a rid. City in the northwestern corner of Missouri. Or both?

Alrighty.

Both. 50.9 Percent of you guessed it is both. I didn't even know this. I was just looking for I went on GitHub's, like, trending repos, and I saw Joplin.

And I was like, oh, I wonder what Joplin is. And I also figured out, like, it's a wicked markdown app. Well, like, you know, we were talking about, Like, how I can't take markdown notes on my phone and, like, have them sync to just files on my computer. Yes. It looks like this does that. Oh, I choose something else for that. What is that? Do do you remember? I'm care very curious because I'm in that space right now. My phone is currently dead. So Oh, Poor Scott.

Well, this is the new weekly segment. What piece of technology is broken

with Scott right now? Dude, I can't even my my iPhone stopped working just out of the blue. It started boob looping, and I'm, gonna send it off. I have no idea what's going on with my my tech. I have no idea.

Alright. Alright. Next one. Nocco.

Is this a JavaScript library that connects to no code tools

Like, what was this 1? Bubble. Io. Sorry. That got cut off. I didn't realize that. Or is it a smart 12 volt car battery charger? Or both? Or both.

Alright. Ready?

Alright. I get those all done.

Oh, this One was very split. This is a a car vault that and in fact, I I was, my battery just died because I haven't driven my car in, like, 9 months, And I didn't drip feed it.

So I was, like, looking at battery stuff on Amazon, and that's where I found the NOCO. That's how we, come up with these questions here. You gotta say 37.8%

voted the correct answer. We gotta say it for our audio only listeners. Audio only. Yep. Next one we have here is inner. Is it Internet of Things smart light bulb or a CSS in JS library for selecting

Parent selectors, and, unfortunately, this one cannot be both.

This is a good one. I kinda like not having both, but both, like, At least you can throw people. Yeah. Both is definitely the wild card in my mind because it adds that little bit of, like, well, could it be? Yeah. Ready. Alright. I'll reveal it. Oh, it is an Internet of Things smart light bulb.

Got them. Got them. Got them. Yes. 46.5% of you guessed It was the Internet of Things smart light bulb. Which is funny about this is because I actually sick pick the inner bulbs on an upcoming episode, And I was like, wait. When is that episode airing? Did I, did I ruin my, my,

JS or Nas? Oh, yeah. You're a sick pick.

Next one is Capcoma strand.

Is it a thermoplastic carbon fiber composite rod used in modern building?

Or a Redux like state management library for Svelte or both.

Get them votes ready. Them boats and get them boats and get. Alright. Reveal?

Yes. Almost 77% of you guessed correctly. That's the odd thing to know

That is a thermoplastic carbon fiber composite rod. I think most people could look at this and say, there's no way that's an actual thing and that it's most likely a thermoplastic carbon fiber composite rod.

Oh, man. Alright. Next one.

Sputnik 5.

Sputnik v. Is this a code name for an upcoming WordPress release with the built in headless? Or is it a non replicating viral vector COVID nineteen vaccine? It's funny because we should be voting on the ones that the other person wrote rid because I'm not quite sure. I

made this up, so you tell me what you think it is. I think that this is the WordPress thing. Re Okay. I think people are googling it because it was very much skewed in the early days to the wrong one, and now it's It's going up. Alright. Ready? It is. 45% of you guessed correctly. It's a non replicating viral vector COVID nineteen vaccine, but re 44% of you thought it was a, code name for upcoming WordPress release. It's impossible. It's not, though, because WordPress Olney uses jazz musicians for their code names. Well, who doesn't know that?

Okay.

Oh, that's good. People in the chat are saying how many they got right. 1 out of 8.

Alright.

I bet that person the highest score person probably picked both for Floodlight

and was like, come on. Yeah. Yeah. You know what? So there was there's 2 people that got All of them cracked because, obviously, I goofed up the headlight one, but that was fun. That was fun.

One of our sponsors today is Magic Bell. Re They do this really wicked product, and it's a embeddable notification inbox. So if you need to notify your users of rid Anything notification.

It's a pain in the butt to do that. Why? Because you need to have preferences for what rid. Who gets notified about what? And if you wanna turn off notifications or something like that, you have to have to add that in. And there's just a whole lot to think about, real time updates. Rid If someone hasn't refreshed the page in a while, all that good stuff. So Magic Bell is a service where you can just drop it into your application with a few lines of JavaScript.

They have an SDK and an API as well, and you get that little I like the name, magic bell, little bell in the top right hand corner of your app. You can put it wherever you want, And you click it, and those be able to see a list of notifications about whatever it is that you want.

Yeah. I don't know if you ever had to code anything like this to yourself, Wes, rid. Last time I did, I really regretted it. It was

it was so I would have loved to have known about Magic Bell at that time because at the time, I was just like, oh, yeah. Me just cut up and oh my gosh. There's so many things to worry about here. So It's one of those things that seems so simple. You're like, oh, just an array of things to tell the user, and then you get get into it. You're like, oh, but rid How do you mark it as seen and then Maybe, like, WebSockets or something? There's a whole thing to it. So Magic Bell will let you do that. They have a re Free plan of up to a 1000 users so you can just drop this into your own application.

And then they gave us a coupon code coupon code syntax, all caps, for 20% off If you sign up in the next 2 weeks, that's magicbell.i0.

Thanks so much to Magic Bell for sponsoring. Next thing rid thing we're gonna be doing is talking overrated and underrated. And this is sort of like a, a segment where we're just kind of gauging each other's interest or ideas on some of these new rid things.

So let's kick it off with the very first one. Is Dino overrated or underrated? I'm gonna say right now, It's probably underrated. It's very nice to work in. I think the permissions model of it all is very rid Forward thinking, I think the entire import via URL is not as painful as I expected it to be. Overall, the TypeScript experience with it, Not having to run a bundler, not have to do any of that was just

very nice. It's very nice to use, And I like that all of their tooling is sort of, what's the reasonable way to say this? Not all over the place. It's not a total mess. So I like it. Yeah. I think it's I'm gonna say underrated as well. Not to say that you're gonna build your next app on it because that would probably be not a good idea because it's very much in the early days. Yeah. There's, like, a lot of and you probably have heard this on the podcast. We've been talking a lot about shifting rid Tooling right now. We've been talking a lot about ESM becoming the thing now that it's a node. We've been talking about modules and URLs. We're talking about TypeScript.

Rid And Deno seems to just nail all of those things, and that's really cool. Will it replace Node? I don't think So maybe it would well, you would see it coming for, like in, like, 5 years. Like, it's not like you're gonna wake up tomorrow and be like, oh my gosh. I'm rid I have no skills left. And, like, that's the other thing about it is, like, if you know JavaScript and you're in Node, like, you switch over to Deno. No problem. Rid But it's kinda cool, and I'm very curious to see how Node will react to this. But, also, it's it's harder for Node to just do this stuff rid Because they have to maintain compatibility with the rest of the node. That's why ESM in node was so hard to get right because they couldn't break rid. 10 years worth of work that they've done, whereas, you know, could just be like, alright. Brand new thing. Here we go.

Next one is on the, sort of Somewhat related is ESM import from URL, and I think this one is very, very good. Rid In fact, it only took me a little bit to this is underrated, I would say. I think importing anything from URL is rid Really pretty underrated overall because, to me, one of the the fastest ways to try out a file I know that when we were trying out stuff with rid t s in Deno. It was, like, so nice to be able oh, let's just import this file from a URL.

Rid Yeah. I think just in general, importing from a URL and being able to access the file as an import like that, very, very good. Yeah. I think so too as well. Like, first, rid. You can do that in literally, you can do it in JavaScript in the browser, which is super cool that you can just you can write an app, rid. Have a HTML file, script tag, type of module, and then just start importing stuff from different URLs that are out there. And I think that's pretty cool. I don't know rid. How I feel about upgrading like, what happens when you upgrade, like, a bump up version release? I'm sure there will be tools Around that. Mhmm. Because, like, you literally import it from, like, whatever CDN.comforward/v2point 2.0. And then what happens when 2.0.1 comes out? Do you, like, find and replace?

Do you have to copy paste that? In Denon, there's or in Deno, there's a, Like a standard of doing, like, a DEPS folder, DEPS dot ts, where you do your imports, and that sort of almost becomes a package dot JSON if you think about it, rid with import statements.

So that's definitely a thing. There are there are detractors from that, but it seems like that's what we taught in our Deno course. So, like, it seems to be pretty much of a, like, a standard in that world. So who knows? Maybe that becomes a thing. So you have, like, a depth dot j s rid File where you import everything you need for the project, and then it's is it global? Or Then you import from that file. So it's like you're Oh. It's it's almost like a package dot JSON because you're setting the version when you're importing it. And then you if you wanna up the version, you're only modifying it in one spot.

Re Oh, that makes so much sense. Yeah. Because you could even you can use the export from syntax for that, or you say, like Mhmm. Export React from HTTP whatever. And what that does is it imports it and exports it in the same go. Oh, that makes so much I don't know. I didn't think of that. That's awesome. Yeah. It's nice. Re next one is remix.run. Wes, do you wanna take this one first? Yeah. This is the new React framework for building apps and websites From Brian Florence and Michael Jackson to, the devs or the devs behind React Router, awesome React Thought leaders in the space, and they are sort of, like, taking a look at the landscape and and rethinking it. And it's closed right now, and I think it. It will be. You have to pay for it. But from what I've seen, it seems really interested. So I'm going to go underrated on this one. And not That we're going everybody's gonna be using it, but I think that they are rethinking a lot of things, especially with what I've heard is that rid. Streaming from the server and this pain that we have, which is server side and client side rehydration and whatnot.

I'm very curious to see. And I bet if they, like, rid Nail something. Like, I bet other frameworks will adopt that as well. Yeah. We're pretty much all going one word agreeing on everything, I think, is rid Underrated. I also think that, like like you said specifically about the streaming from server side, that stuff sounds so good to me. I maintain rid Our own server side rendered React application, and it's not a lot of fun. It's just not super easy, but it also feels like It also feels like it's doing more work than it needs to, and I think the remix folks are really figuring a lot of those aspects out.

Next is gonna be Xstate, which, believe it or not, I'm gonna say is underrated. Looks at we should have picked things that we actually thought were underrated. Yeah. That actually might have been a problem in our approach to this, but, f states. Hey. I don't know if you've used state machines at all, Wes, but when we were writing the video player or the video uploading system. So we upload our videos to the all of those who have not heard. We use a service called Mux to do our video. So we upload our videos to Mux, And building that video uploader was, like, the thing that made me see the light for state machines specifically because there were so many states that this uploader could possibly be in. And so for me, it was, pretty eye opening to rid Control those states in the state machines world for the first time and just say, like, alright. I really feel like this uploader

is really solid compared to some of my other code, which was mostly Boolean flags set by state variables and things like that. I've not used it, so I'm gonna go medium rated. But it's one of those things that you just can't hear people stop talking about it. And we had David on the podcast rid. 6 months ago, and he talked about it. And it it just made a lot of sense. Like, I certainly had the problems that it solves. Yeah. This episode is also sponsored by read. [email protected].

Use the coupon code tasty treat, all lowercase, all one word, and you're gonna enjoy 2 months for free of Century's rid Really just outstanding feature set. It's just really a fantastic error and exception handling tool. In addition to that, rid There is some really great new features around the performance monitoring that came in century somewhat recently. I had a, I had a beta access to it a little while ago just because I wanted I wanted to get in, and it was really blew me away just how useful it was to basically have a table of all of your routes and how fast they take to load because it really allows you to quickly and easily see which aspects of your site, 1, get hit the most, 2, potentially have some failure rates. Right? Maybe it gives you failure rate percentage, but also allows you to see just how long it's rid taking for some users to load. Now they are constantly iterating upon this feature. I actually just went here just now, and although I checked this, I wanna say last week because I check it all the time, they have already added some new stuff. This is this 1st content full paint, rid Largest Contentful Paint, first inputs delay, cumulative layout shift, and what it does is it gives you these rid These bars of saying how, how many people have this hit. 80% of my users are getting a green level first input delay, rid. And 20% of my users are getting a yellow level of that, and then 0% of my users are getting a rid. Fire red level saying, hey. This is not good. Yes. I think I think. So, as you can see, these tools are very useful to be able to see Some other things like who's getting a cumulative layout shift, which that's when some content has loaded and others hasn't and then the layout shifts, rid. That is a huge pet peeve of mine. So Cool. It gives you the option to see all that stuff really easily, and you can even search by trends. It's very cool. So check it out at century.io, use the coupon code tastetree, all lowercase, all one word, and you will see some of their new tools.

Alright. We'll move into some hot take tweets. Rid Hot Ticks. I asked on Twitter for some hot take tweets. What are your JavaScript hot take tweets? And everybody gave me their opinions, which It's hilarious because my, like, Twitter's been ruined for, like, 3 days now with people sending me the because not because, like, people do it, but People reply with their hot take, and then there's, like, a Argument. Every single tweet has, like, a 40 thread argument on it. So first one is, from Laurie on tech. Read. Red syntax isn't super readable, and you probably should use something else if you can have it. Yes. I just shared an Advent of Code Solution using it, so sue me. So I really like this one because I do it myself, but it's not super readable. Hot take tweet. What do you what's your take on this, Scott? I think it's wrong.

I don't know. I This is gonna bug me because the the the type of person who does want to go on to Twitter and be like, no. That's wrong. Like, it doesn't matter.

In fact, But I I agree with Laurie that, like, when I when I don't wanna say I don't wanna try to claim that she just started using them because I doubt she has. But, like, rid When I first started using them personally, I felt like this is not readable.

But, like, now that I'm I've Been to the edge and back, and I've been using them for so long, and I understand it. Yeah. Like, I see through it. For some reason, I've I've been able to see through the lines of the matrix, and now I just like it a lot. Rid Once you know what spread is, then, like, you obviously have to know what it is. But Yeah. Once you know, it's the best. Yeah. The best. Okay.

Next one is from Chris Hailman. Console dot log is lazy and slows you down as a terrible debugging experience.

Chris can be right about all of this, and I will Still use console dot log until I enter the grave.

So, yeah. No. Debugger is great. Debugger is fantastic, But sometimes it crashes my browser, and sometimes it's slower than using deep or just a simple console log

and seen actually of the out button. Rid. Like, we did a show on syntax about, like, advanced debugging techniques with people ask me, what else do you use? Break points, break on, ready. You can listen for DOM changes, all of that stuff. You can view network requests and all that. Those are great, and I use those when I'm when I'm in trouble, but rid Nothing wrong with the console log. I love a good console log. Optional chaining makes code so much more readable and makes it harder to debug when it comes to optional props rid fields.

I love optional chaining. It's my Me too. It's my baby, and I will defend it. I've not run into a really rid Odd bug. Because that's the thing is, like, it could be undefined anywhere along your chain, and you wouldn't necessarily know where

It was undefined unless you took them out, but you could also just pop a breakpoint in there or log the thing 1 step above to see what is coming in. What's funny is that I, once I moved to TypeScript, it made me realize just how unsafe some of my code was. And, like, sometimes the solution is, If you're in a conditional, just dropping a question mark in there to do the optional chaining, and it's like, alright. Now this is safe. I'm it's gonna work. I don't have to worry about it ever again.

This next one is from Dan. Dan says JavaScript really isn't that bad as long as you avoid double equals and for in. Yeah. Dan is dead on. JavaScript is really not that bad, and it's gotten better all the time. A lot of the people, I think, who criticize it And it is kinda chaotic, but once you got it, I really enjoy working in JavaScript or now TypeScript for the most part. Big fan. Double equals, I don't use it. So one of the other hot takes was Double equals

is fine. Yeah. Yeah. And the other, for in, yeah, use for of instead. However, I added to the language a couple years ago, and it's awesome. Yeah. Four of is where it's at. Next one is the npm ecosystem has turned JavaScript development into a game of LEGOs rather than real programming. What? And to that, I say, re I'm a LEGO master. I wouldn't be able to build some of the stuff I build without some of the packages from so much smarter people. That's the beauty of JavaScript is that you can reach for these Much harder things like OAuth implementations and bcrypt

when you don't necessarily have to do it. I I wouldn't know how to build that myself. You know what? Real program rim as they mold their own Legos out of the plastic that they have forged from the oils of the earth.

Yeah. I I don't know about this one. All per unless you're unless you're writing, like, a binary, everything you're doing is the exact same as what you're saying npm is.

React is the worst choice for beginners, doubly so in its current state.

I kinda agree. It's not the worst choice for beginners because rid It's so widely used. That's why it's a good choice for beginners. It's so widely used. You can get a job doing real. On your resume. Right. But rid. If you are just trying to understand dumb events and whatever, man, keep it vanilla. And if and if you wanna move into a framework, I don't know, keep it as something way easier than that. Yeah. So for beginners listening, I stopped to say you shouldn't learn React. I literally have a course called React for Beginners,

but there's a handful of things you need to know about React. You couldn't be able to just jump in, but I think that's the same for a lot of stuff. So I think I agree on this, but you could still learn it. Yes. It's still not super hard and complicated. There's just more. You gotta have, like, a a list of, like, 5 gotchas. You know? It's also kind of like saying, like, pancakes

are the worst food for breakfast. There's still pancakes, man. Like, they're pretty dope.

Yeah. Next one. Aaron Bushnell says, if you work at an agency, really try to avoid using rid Using things until it's absolutely necessary, and even then, only what you need. When you manage hundreds of sites, it quickly can become A tremendous source of technical debt. I agree. As somebody who still has a coffee script site in production and, what, 6 or 7. I've been working this year to convert all my Gulp sites over. How in the world are you still Gosh. It's I'm not writing it anymore, but, like, it's rid Still running, and it still runs good. Yeah. Yeah. You you definitely that's the beauty. I loved doing agency work and freelance work because you could choose whatever you wanted, rid. But you can definitely fall into a hole. You just bring on a whole bunch of stuff. It's the same thing with WordPress plugins too. Rid If you go bonkers on WordPress plug ins, you're gonna have a bad time because half those things are gonna be out of date or not maintained or break. They're gonna install 8 versions of jQuery.

Yeah.

What do we got next? Do we wanna get into q and a? Because, do we Yeah. Let's move into q and a. We're running out of time here. Yeah. Because we could keep going rid ever on these tweets. Like a 100 more of these.

Yeah. Some good ones. Some good ones. Go visit that tweet and listen to all the popular and popular pages. So re If you've got a question for us, go to pigeonhole.atforward/tasty and ask a question, or you can drop it in the chat as well.

1st question is from anonymous. If you recently started doing web dev work, which career path would you choose? Start up, rid FAANG. FAANG is Facebook, Amazon, what's the other, Apple,

Netflix, and Google? Yeah. We should actually start Making up, like, a fake thing with, like, different companies in here. It's Yeah. Ford.

Foodora.

Oh, gosh. Yeah. That would be hilarious. Yeah. Or so would you choose startup FANG or slash big tech companies or freelance or contract? Or if I started today, rid. It depends. For me, I look at some startups, and I don't envy the work life balance and the grind ready and how quickly things move. But I also know people who get into startups and they're young and they've got Nothing but time and whatnot.

Certainly easier. And also not not to say that startups are only for young people because there's lots of people that are running re Great startups. They just work 9 to 5, and and they're done. Right? But I think on the flip side, there's also a very heavy culture in that thing.

I really like studio work a lot. Yeah. Like, the that's an option too working in a design dev studio because rid. You get a lot of experience with many different projects. And especially earlier on in your career, it can give you a lot of exposure to different projects rid In working with clients, many times you're you're in client meetings yourself rather than, you know, being some project manager, so you can get some managerial skills. You can get some project skills that rid shift very rapidly. Also, I'm gonna say,

if you can get the FAANG job, go for it. Yeah. Just don't allow your lifestyle to inflate what they're paying you very scary to be making $200,000 at Facebook, and before you know it, like, someone's gotta pay for that Tesla.

If you get sick of working at a FAANG and you wanna go do your own thing, like, I get DMs like this whole time. People, like, oh, Wes, I wanna I wanna make courses like you do. I wanna be able to just around on the Internet like you do. That would look so good on your resume. Like, I work for Google, and now I'm doing my own thing. Ex Googler it. Makes a new product or whatever. I think that would be kind of cool. So if you can get it, go for it. Otherwise, I'm a big fan of, like, Scott's studio. I went contract Freelance my own, and it worked out for me. I really enjoyed it. Yeah. Yeah. I agree. Today, we are sponsored by FreshBooks. FreshBooks is the cloud accounting solution rid For your business, whether you're small business, big business, freelancer, whatever, if you need to keep track of your time, rid. Send out invoices, convert that time into invoices, track all of your expenses, take expenses, and turn them back into invoices, all of that good stuff Just to run your business, all the money stuff, check it out. FreshBooks .comforward/ syntax. That's gonna get you a 30 day unrestricted free trial. Thanks so much rid FreshBooks for sponsoring.

Eric, real quick before we do the next one, asked in the chat about break dancing being added to the Paris Olympics. Rid. I have been following the breaking in the Olympics thing for maybe, like, 15 years now, maybe longer than that. They've been the group that's behind it. A lot of people have been trying to get it in since the literal eighties, so I'm very excited. The the Junior Olympics 4 went really well. You know, a lot of the the people in the scene are concerned about it becoming exploited by the masses or whatever.

But to be honest, The Junior Olympics went so well, and they didn't really change it too much. So I'm pumped.

Anan says, TypeScript all the things? And, yeah, I'm pretty much in. I'm pretty much in. I really like it, and I don't I don't see myself writing anything else. Even like today, I popped up on a quick utility, and I I'm firing up a quick code utility, I'm gonna hit up just some, you know, off the cuff JS kind of, like, real quick stuff. And I did it in TypeScript.

Rid I wasn't any more encumbered than I was in JavaScript. Like, I felt I felt like I could flow with it, and that to me was like a big thing because I always see TypeScript as this big rid. Barrier to entry. You gotta set up your tooling and whatever. But as long as you're using the right kind of systems that make it easy to get going,

man, Type of all the things. Yeah. And we were talking about this. We had a topic table on TypeScript yesterday, and I joined in and we're talking about, like, is it a barrier to entry anymore. And I don't think so because, like, pretty much every major or even minor package out there, I have a one line rid. Code called wait, and somebody submitted types where they all have types already.

You can infer types for like like I just built right before this podcast. I was like, man, I wanna see my webcam, but the, like, Apple photo booth, they crop it to, like, like this.

So I was like, I I built, like, a it's called check my hair, And it just it just shows your webcam really quickly. And I I'm like, I'm gonna build this in TypeScript. It was, like, maybe 40 lines of code. And there was 2 or 3 spots rid Where I had to literally type something, and everything else was inferred. And you got all the benefits from the the code completions and and all that. So, like I don't think everything. No, you can still write really good JavaScript, but I think the barrier to TypeScript has become very low in the last Year or so. That's specifically why I'm into it now because you can get up and running even for silly projects super quickly.

Next one. You wanna grab it? What do you do to keep up to date with the latest and greatest changes in tech, front end libraries, new languages, etcetera? Rid Hey. Here's actually do you have the GitHub app on your phone, Wes? No. I don't. Get it, man. Do I? The GitHub official app, It's so good for finding new packages.

There is an explore tab on it, and it gives you a bunch of potential libraries that you might be interested in. And I use this like crazy for finding stuff. I don't know how or why, but but this to me, like, has really changed rid how I find projects because it shows you trending stuff and whatever, but it's very good. And I I use it all the time to find new things. I also look at awesome rid. Awesome repos. You'll find things that are, like, awesome typescript,

and then you just go down the line of list and look for cool stuff and just look for For neat little things. So that's what I do personally. For me, we can't ask this question all the time. It's follow people on Twitter who who follow this stuff, rid. Like Scott and I listened to syntax. And, like, what do Scott and I actually do? I read release notes of every single browser.

Anytime there's, like, a working group that changes a proposal, there is a good Twitter account called intent to ship, which is really good, which means that, like, At that point, it's going to be in the browser in a couple weeks. So just, like, kinda watch those, and it's not like you're gonna miss something. If you listen to the podcast rest and follow handful of good people on Twitter. You're gonna hear about subgrid 14 times. In the 15th time that you hear it, That's when you should probably pay attention because okay. Now now it's a thing I need to implement in my, in my app. Speaking of cool new things, rid Una tweeted this out, Houdini dot how today? Oh, yeah. Houdini dot how, very cool stuff for CSS Houdini. Rid So I posted in the chat, so maybe you can go and check that out. Wow. Big wallet questions here. Yeah. They came in. We got how much time left? No time? Let's just keep going till they kick us off. What other good questions we got here? Can you share some exclusive barbecue tips?

Low and slow, baby. Rid Fish sauce. Did your mom try the fish sauce? She did. Yeah. She made it. She made it. My my mom was like, I'm making the recipe, and I'm like, what recipe? And she's like, the one from the podcast that Wes was talking about.

So it's very fun. Yeah. She made it. No. She loved it. We do something very similar to that all the time. We use rid sauce pretty heavy handedly over here. Fish sauce is a sick pick, I would say. Alright.

What do you expect of Blitz. Js in the coming years?

We'll see. I don't know. It's gonna have a tough time because I think as somebody who's used, like, full stack frameworks, it takes a lot for them to, like, really take off. And Blitz rid is on top of Next. Js, so at least has that going forward where it's like, alright. This is, like, Next. Js with Prisma and all this other stuff. Right? And that's cool to me, but, like, I feel like it will have a hard time getting people to really latch onto it in building a community, but I think it's cool, and I think it's worth knowing. Read. I like this one. What's the 1st node module you install in a brand new React project besides React itself? React router. For me, it's usually Next. Js rid If it's multipage

or Parcel,

if it is just a single little one off app because Parcel will bundle it all for you, which is rid Kinda cool. Thoughts on using languages other than JS or TS with React, like Kotlin, for example, I think is neat. I've kind of looked into some of this myself lately, rid But thoughts about using it, I'm not good at any other language if we're being entirely honest. So, yeah, j s and t s for me all the way right now. But, you know, I'm learning I'm learning Rust, But I'm not gonna be super effective with it. You know?

Yeah. I don't have all the time in the world to learn other languages, although they'll probably rid. Bend my horizons, but there's literally nothing wrong with just spending all of your time in JavaScript.

Alright. Let's last 1 right here is do you have any approach For optimizing high res images that are stored in your back end, like s three for a Gatsby website. We're talking about this on Twitter today. Rid. There's a lot of services that will slurp up your image, transform it on demand, and return it. Cloudinary ImageX, Sanity does it, whatnot.

I think making your own is what I need to do because I always I love that approach on demand rather than doing the Gatsby build. Mhmm. Especially if it's a rid. If it's a remote image, Next. Js's image component does it with remote images, which is a killer feature, but not Gatsby's.

Rid I'm always, like, hesitant to be like, yeah. Just pay this monthly cost for this service, and then the service will do it because I do that. But then also, like, rid. It sucks to have to tell someone, just pay for it. Right.

So, like, wouldn't it be cool to, like,

run it on, like, a serverless function or something like that? That'd be neat. It'd be cool if there was, like, re up option where somebody had created, like, a preconfigured one where you could just, like, spin up your own Cloudinary. Okay.

Yeah.

I think that does exist. It's just that, like, Cloudinary has 4,000,000 features.

Yes. And then you sometimes you use them like the they even have, like, sepia. Like, if you wanted to

rid. Tone your photos like it's a digital camera from 2001. You could. Or make it, like, into a a photo booth at a western show at Disneyland or something.

That's a great idea.

Oh, alright. I think we should end it off there. Thank you everybody so much for tuning in. That was really fun. We always like doing these live ones. It's a ri Bummer. We couldn't do it in person. But hopefully, next year, we get get the big shot in the arm, and we'll be able to to see you all in person. What about, sick picks? Do we wanna do some sick before we bounce off. Sick picks. Sick picks. We pick things that are sick. I overflow it with sick picks over here. So well, Wes goes in, hunts For his, I'm gonna pull up mine here. Sick picks. My sick pick, the thing that I think is sick, and this is gonna be a very special one, This is the coolest little extension I've ever done used, and it's called color conversion color.

Rid. This is a Versus Code extension.

I'll post it real quick here. Let me find the actual link page. So I've been Personally, dealing with a lot of, like, moving colors to HSL, HSLA, doing a lot of variable work there, and I found this really extension for Versus Code that allows me to convert colors from hex to HSLA, and it is so dang fast because you just basically highlight your color string, your hex value. You say go, turns it to HSLA.

Again, I'll post it in the chat here. I'm, like, trying to Google it while I'm talking about it, But it's really nice to not have to leave your editor or whatever. Just toggle through different types of color conversions, and this thing's been saving me some serious time. I'm gonna sick pick rid. A lock picking kit. So I we have this, like, vintage gumball machine in our house, and we bought it rid Years ago, we every now and then, we'd put some candy in it for the kids, and they get a penny, and they turn it, and they get, like, a couple, Smarties that come out. And it's getting full of money, and we don't have the key. We have the key to put the candy in, but we don't have the key to get the money out. And it's getting full, so I rid. I told Caitlin. I was like, oh, I'll I'll learn to pick locks. So I bought this.

It's an acrylic lock. So it's see through, and you can see rid All of the pins in the lock so you can see what you're doing. It comes with a whole bunch of different picks.

I'm trying to pick a I did it.

Wow. I did it on camera. So it's a super cheap lock. That's why it's so easy to pick. The real real locks are a lot harder than that. But it's cool because you can see what it's doing and how locks actually work, and that just is so helpful to understand. Like, when you are picking a real lock, What are you trying to do? Right? Now you're not just jamming this pick in there. And it came with a whole bunch of different types of picks, and I I watched Lockpicking Lawyer on YouTube. So, Yeah. It was it was it was kinda fun. I watched so much lockpicking

trying to lockpick 1 of our doors and because the door is locked, and it was, like, a

rid Super fancy slang lock or whatever. Slang. Yeah. Not a slang. Schlock.

It's a slang. I was a rich. In my slang, and I could not get the thing open, obviously. And then I had a lock picker come over, and he had to use, like, a whole, like, big rig machine to get it open. So I didn't feel too bad about myself after that.

Awesome. Shameless plugs. Westboss.comforward/courses is the list of all of my courses. Re You can use syntax for $10 off. And I'll shamelessly plug level up tutorials.com.

Sign up to become a pro, and you'll get rid to 12 new tutorial series for the entire year as well as the entire back catalog of thousands of video tutorials. So check it out, level up tutorials

Alright. Thanks so much to Reactathon for having us. Thanks to everybody in the chat. That was super fun. Make sure you subscribe to our podcast, Syntax. Fm, In whatever podcast player you are using and leave us a review. Positive review. Say nice things about us too. Peace.

Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.

Rid.