Skip to main content
769

May 15th, 2024 × #react#javascript#live-podcast

React Miami Live Show

The React Miami live podcast episode features special live segments like map/filter/reduce code challenges, JS or NAS audience voting games, and opportunities for the audience to participate.

or
Topic 0 00:00

Transcript

Wes Bos

Welcome to Syntax.

Topic 1 00:17

Live podcast in Miami

Wes Bos

This is the React Miami live version of the podcast. Thanks everybody so much for coming on out.

Wes Bos

This is gonna be a little bit of a different episode than normal. We're not just gonna be sitting here talking about lame CSS rules or something like that, but, we got all kinds of fun stuff planned for you today. Hi. I'm Scott Tolinski. I'm a developer from Denver. You can find me at s Tolinski on all of the social media. I'm Wes. I'm a developer from Canada. Any Canadians in the room? Syndax is officially a Canadian podcast about web development, so make sure you grab one of the Syndax Canada stickers.

Scott Tolinski

This is the whole Syndax team. Wes Bos, me, myself, Caitlin Blum, Ben Vinegar, Randy Rector, and CJ Reynolds, we're all here today. Say hi.

Wes Bos

Give it up for Randy on the knobs today. Yeah.

Wes Bos

So we're a podcast. We've got hasty treats on Monday, tasty treats on Wednesday, and supper club on Friday, which is our interview style podcast.

Wes Bos

And today, we've got a live podcast for you.

Topic 2 01:19

Plan for live segments like map/filter/reduce code game

Scott Tolinski

So the plan today is that we have a lot of segments. The first one is going to be we shouldn't have put this one first. Yeah. It's gonna be tough. I'm kinda worried about this one. Map filter reduce, where we've given each other a map filter, well, map filter and reduce, and you have to determine the output just by looking at the code.

Scott Tolinski

Next up is syntax error where we try to stump each other on syntax bugs that we've, deviously hidden in code.

Wes Bos

Wes got JS or NAAS, which we're gonna get audience to participate in. You guys get your phones out. You're gonna, vote on whether something's a JavaScript library or a made up word.

Wes Bos

We'll have a an audience stumped. If you're brave enough to come up and have us badger you with questions about server components or weird CSS issues, we got it for you. We got a a free T shirts for Yeah. The winner itself. Yeah. It's gonna be pretty sweet. So grab your phone, QR code this sucker up, because we got a couple live things that are necessary for this.

Topic 3 02:28

Live audience participation with phones to vote on JS or NAS questions

Scott Tolinski

This will be available again later on the show too. So pigeonhole.atforward/sick.

Wes Bos

You don't need the caps. Yeah. You don't need them? Oh, you checked it. That's good.

Wes Bos

Alright. MAP filter reduce. We give each other a chain MAP filter reduce, and the other person must find out what the output is. Scott, are you ready for your I gotta go first? Map filter reduce.

Topic 4 02:39

Additional live audience participation opportunities

Wes Bos

This is gonna be brutal. Oh, no.

Scott Tolinski

Okay. Oh, man. Why you do this? Audience as well. You try to figure it out. Student name length times the student score. Okay.

Scott Tolinski

So out of the first one, you get the properties.

Scott Tolinski

So you get individual, name, score, and then points.

Scott Tolinski

So for Wes, it's obviously going to be 3, times 2. We have, that is 6.

Wes Bos

I don't wanna do this, Wes. Wait. Are you are you on are are you on the map? Sorry. I shouldn't have made you do math in front of a bunch of people. Yeah. Well, how about anxiety

Scott Tolinski

making thing ever. I'm just gonna ignore that part for right now. Okay. The filter, okay.

Scott Tolinski

Come on.

Wes Bos

What what for bonus points, what's that little thing called? Modulobe.

Wes Bos

Wow.

Wes Bos

What does it do?

Scott Tolinski

How many times something goes into something else? Or is that that's division.

Wes Bos

Yeah. That's division. What remainder.

Scott Tolinski

Bam. Got it. Remainer. Model. Oh, come on, Wes. Okay. After something has been evenly divided by 2, how many are left over? Okay. So that really gives us only the even ones. So which ones are even? So Wes is even. CJ is going to be even.

Scott Tolinski

2 times 4. Okay. Scott is 5 times 3, not going to be is that even? Node. 5 times 3.50. No. Not even. A note. Yep. Okay. So so so far, we are filtering out Scott. We have Wes, which is, now points of, 6. CJ points of 8. Yep. Okay? And the reduce, we are adding the student points together, and you're just returning the points.

Scott Tolinski

So the point is, we have 6 plus 8 equals 14.

Scott Tolinski

Fifteen. What?

Wes Bos

Wait. Did I get that? Yeah. I must have got it right.

Wes Bos

Audience, what did we do wrong here? What did I do wrong? Only Scott is kept. Only Scott is kept. Why? Why? Because the module results in 0. I did the opposite. Module let me stand up for this one. Module results in 0, which JS, say it with me, faulty.

Wes Bos

Brutal. Filter. You return a faulty value from a filter. It does not keep it. Yeah. Mine isn't this hard, so thank you. I thought I I thought you got it. Yeah. I pulled this up, and I was like, oh, maybe this is a bit too hard.

Scott Tolinski

Sorry about that. I did come up with this game, though, so it's on me.

Wes Bos

Alright. For me alright. Scott data, job producer, producer, podcaster, designer, data map, bring the job back. So we got an array of strings, producer, producer, podcaster, designer.

Wes Bos

Filter where the job does not equal designer, so we have producer, producer, podcaster.

Wes Bos

Then we reduce.

Wes Bos

We start with a blank object.

Wes Bos

We set the accumulator's current string of producer, podcaster, podcaster to be equal to itself or no. If it exists, it's going to be itself plus 1 or it's going to be 1. So you're just tallying up, which by the way, you don't need this anymore because of object dot group by. Doesn't matter.

Wes Bos

So the answer will be producer 2, podcaster 1.

Wes Bos

Let's see.

Wes Bos

Oh. Oh. Oh, hold on. Hold on. Hold on.

Wes Bos

There.

Wes Bos

Do I get a T shirt? Thank you. Thank you. That was good.

Scott Tolinski

We did the 2 hardest

Wes Bos

things for us first. Actually, all of these are kinda brutal. Yeah. They're all Yeah. We I we always forget this. Syntax error. We show each other code with no syntax highlighting, and the other person must find it. It could be either a syntax error or a logic error for Scott.

Scott Tolinski

K. So

Wes Bos

you can you can ask 1 person in the audience for help. The interface looks fine.

Scott Tolinski

The user document has 2 IDs, which I guess is fine.

Scott Tolinski

1 is a number. 1 is a string.

Scott Tolinski

Export default async function.

Scott Tolinski

Save user promise user document.

Wes Bos

Is okay. I don't I can't answer anything. It's not that the fetch you don't know there's it's not that there's not a type card on the fetch. Yeah. And you have syntax highlighting in here for me. I intentionally put it on. I was like, this is so good that I can put the syntax highlighting on.

Scott Tolinski

I'll give you a hint. It is a syntax error. It is a syntax error. Oh, man. I gotta, like, blur my eyes to see this.

Wes Bos

You're you're gonna kick yourself. I know. How many of you guys see it?

Scott Tolinski

Gosh. Darn it.

Wes Bos

That's a pressure. This is something I do at least once a day.

Scott Tolinski

I don't know. I don't see it. Alright. Audience.

Wes Bos

Interface.

Wes Bos

Interface. Interface does not need a A semicolon.

Scott Tolinski

Nope.

Wes Bos

Interface does not need an equals. Equals.

Scott Tolinski

I don't use interface that much. Well

Wes Bos

Yeah. TypeScript.

Wes Bos

We don't need your propaganda, Ken. Yeah.

Wes Bos

Alright, Wes. For me. Alright. Import React component from React. Class button component extends component. Constructor props.

Scott Tolinski

Remember class components? Yes. When was the last time?

Wes Bos

Okay. My first thought JS, do you need a super in the constructor? Does component take anything? So then we Scott handle click equals that.

Wes Bos

Problem not inside this function. Okay.

Wes Bos

Render return.

Wes Bos

Is it it's the return is not on the same line as the No. That's fine. That's fine. That's just

Scott Tolinski

a that's fine. That's fine. I think it's just a image thing. It's not an image. That's not the intention. I can see the line numbers. I know. It's not intentional. Okay. Well, I I extra point for that one.

Wes Bos

That's that's right. Right? Like, you can't put the return on the next line if you don't have parenthesis. Okay. Yep. It's React. Okay.

Scott Tolinski

Syntax highlighting was turned off.

Wes Bos

You need a comma after the instance methods.

Wes Bos

You need a super. Need a super. I said it.

Wes Bos

Hey.

Wes Bos

You did say it. Remember you needed, like, commas and weird cases, though? Yep. That was weird. Yeah. Yeah. Alright. For Scott, this one does not have syntax highlighting in it.

Scott Tolinski

You are defining the type, then you're yeah.

Scott Tolinski

The equals to an object. I feel like that is the wrong order of things.

Scott Tolinski

Let me just check the rest of it.

Wes Bos

I did that to you last live episode. Did you really? Yeah.

Wes Bos

I gave you the wrong syntax for the default destructured object.

Scott Tolinski

I isn't this the wrong syntax for the Node,

Wes Bos

gosh. Darn it. Kind of. Yes. Yeah. You're look. I'll tell you. You're on the right line. It's the first line. Okay.

Scott Tolinski

Function, user, card.

Scott Tolinski

Let's see.

Scott Tolinski

Oh, man. You're crushing me.

Wes Bos

Did I make these too hard for him? Wait. I feel kinda bad.

Wes Bos

I was seeing red when I was doing them. No. This is the fine. That's fine. Okay.

Scott Tolinski

User is I mean, we'd obviously don't know what user is. User is users destructed.

Scott Tolinski

Yep. D yeah. Okay. So users should should be the variable user, not inside of brackets.

Scott Tolinski

Right? Because this is React. Yeah. This is React. It's props.

Scott Tolinski

Now I don't write React.

Scott Tolinski

I don't see it. What is it? Alright. Gotcha. Audience.

Scott Tolinski

Wes should have a timer. Right here. What?

Wes Bos

Yeah. Exactly. So the d the the destructured default value should be inside a property called user because you are destructuring user prompt. So I was on the right. You were on the I was looking into him. We'll give it to him. Round of applause. Yeah. Oh, hey. I don't want your pity.

Wes Bos

Alright. Alright. Numbered list. Destructure the numbers. Consting equals list. Return u l list items.

Wes Bos

Is this this is not React.

Wes Bos

You forgot the dot join, which is going to give you a semicolon as you stringify an array.

Scott Tolinski

I think it just might be cut off.

Wes Bos

What? I Scott this. But that's an error. Yeah. Oh, you know what? Because you use that library that you don't need to join your arrays.

Scott Tolinski

Yeah. That Node. Okay. Yeah. So that's not the issue? I cut I yep.

Scott Tolinski

You're

Wes Bos

I intentionally made these easier. Because last time I was too rough on you. The implicit return and opening No. LI needs to be on the same line. Is that not a line, folks? Node? Okay.

Wes Bos

Oh, numb no.

Wes Bos

No. Node JS, no. You can have a Vercel number. This is a future question.

Wes Bos

Node is not a reserved word.

Wes Bos

No. Is it? No. No. Alright. I give up. Audience? No key.

Wes Bos

No keys. No.

Wes Bos

You don't need keys. Yeah. Honestly, it's have you ever not used a key and it's fine?

Scott Tolinski

Yeah. It works.

Wes Bos

No. Keys are dumb.

Wes Bos

Okay. CSS. Thank you. This one this one is tricky.

Scott Tolinski

Transform. Okay. So translate x looks fine. Translate y. Let's see.

Scott Tolinski

We have let's check the parentheses.

Scott Tolinski

3 open, 3 close, 2 open, 2 close, var var move, move 10 pnpm times negative 1 px, and that's inside of the calc.

Wes Bos

Calc needs a no. No. No. I'll tell you, it's not a syntax error. It's not? It's a it's a this would run-in the browser, but not give you a value. Okay.

Scott Tolinski

Why? Why? Let me see this. Calc, there's no misspellings. It's not something devious like that. Nope. Yeah. Var move is is fine both times. Those are both pixels. You're multiplying pixels. There's nothing crazy there.

Scott Tolinski

We need well, it How many of you see it. Can you do a translate y and a translate x to separate properties? Yeah. You you can. Quick. Because I never do that. That's fine. Always three d.

Wes Bos

Oh, yeah. You pass them to a a a trans translate 3 d and pass all 3 in 1 instead. And I don't think you don't need a comma between those 2. No. No? Should I give you a hint? Yes. It's something to do with the way that I'm calculating.

Scott Tolinski

Yeah. That's kind of what I was looking at. Anybody see it?

Wes Bos

Aw, man. They're like, give give a sec. Yeah.

Scott Tolinski

Calc.

Scott Tolinski

I don't see it. What is it? Alright. Help me out there. What do Wes got?

Wes Bos

Exactly. You cannot do calculation of Vercel values. If you want to if you wanna flip a pixel value to be its negative counterpart, you must multiply it by negative Node and not negative one p x.

Wes Bos

Boo. And not a hard ask me how I know.

Wes Bos

Alright. Last 1, import for React, Node from React interface props.

Wes Bos

Type submit.

Wes Bos

Oh my gosh.

Wes Bos

Can I ask Kent to help me with this one? Fancy buzz in his friend.

Scott Tolinski

This one hurts me. Yes.

Scott Tolinski

This one hurts me too. Yeah.

Wes Bos

Oh, you can't add class. It's class name. Class name.

Wes Bos

Man, I was, like, deep into the, like alright. How do you make, like, a flexible type that can extend the HTML attributes, but you add your own? Forward ref was a red herring. Yep. You got me. Yep.

Wes Bos

Alright. JS or Nas, open up your phones. We need everybody to be voting on these.

Scott Tolinski

Okay.

Scott Tolinski

Esno, is this a JavaScript compiler and TypeScript checker written in Rust with a focus on static analysis and runtime performance?

Wes Bos

Or is it Gen z slang for easy no used to quickly shut down your friends' plans? For example, hey. Wanna go see Machine Gun Kelly this summer? E easy no. Ease no. Eze no. Eze no. Or both.

Wes Bos

Alright. Lock those votes in, folks.

Scott Tolinski

Well, let's see. Alright. Let's Alright. Get your votes in.

Scott Tolinski

And the winner is it's a JavaScript compiler.

Wes Bos

39% of you. So most of you guessed wrong in that it is a JavaScript. And it it that's actually kind of exciting that it's a a TypeScript type checker written in Rust, not just a TypeScript.

Wes Bos

Good. Wow. We we got them.

Wes Bos

Alright. Who is invented with inventing up the Boolean? Ada Lovelace.

Wes Bos

George Buhl.

Wes Bos

Grace Hopper. Dan Abramov.

Scott Tolinski

Alright. Ready to go? Get your votes in. And And I'm gonna hit go.

Wes Bos

It's Joel. George Boole, 63% of you got that correct.

Wes Bos

10% of you thought Dan Abramov. He invented React, silly goose.

Scott Tolinski

Next question here.

Scott Tolinski

Which of these statements about MySQL is false? The my sequel dolphin is named Sekila.

Wes Bos

My my s q l, which is the way you pronounce it, was named after the inventor's daughter, Mai.

Scott Tolinski

Or PlanetScale attempted to fork my sequel after licensing disagreements in 2020? Which of these is false? False. Which one is false?

Wes Bos

Oh, some of you goofed it up. That's okay.

Wes Bos

Some of I think you'll be surprised at this one. Which one is false, you flip it? Let's get have it, Scott. Let's see it.

Wes Bos

Boom.

Wes Bos

Oh, wait. No. That's wrong. That's wrong. I did that wrong. What? What? No. No. That's right. No. That's right. Have done the negative. Which one is false? PlanetScale did not attempt to forecast SQL. So the the MySQL dolphin's name is Zequila, and MySQL was named after the inventor's daughter whose name is Mai.

Wes Bos

That's real.

Wes Bos

What is Vextor, a library for validating and extracting JSON database on schemas.

Scott Tolinski

Brand name for the Venlafaxine antidepressant medication in Mexico or both? Get your votes in.

Scott Tolinski

Vextor.

Wes Bos

Vextor. What are we gonna do? Let's see it.

Wes Bos

Both 62% of you got it correct. Got it.

Wes Bos

I thought that Node would get them. Got it, guys. I'm impressed. I'm impressed.

Wes Bos

Alright. TikTokin, is it a fast byte parent coding tokenizer for use with OpenAI's models?

Scott Tolinski

A ByteDance's design token generator that outputs to CSS, JavaScript Tailwind, SwiftUI, and Android Compose, or both? Yeah.

Wes Bos

Yeah. Bytedance is the parent company of TikTok, if you haven't if you didn't know that. I'm sure. Get your votes in. Guys are Americans, so I'm sure you've heard about that.

Wes Bos

Sorry about that. It is a fast byte pair encoding tokenizer. Only 49% of you. So we tricked Wes tricked half of the people here Yep. Thinking that it is a design token generator.

Wes Bos

Didn't the Android part throw you? Android part threw me. Yeah.

Wes Bos

Alright. We got 2 more questions here. 2 more.

Scott Tolinski

Zuber, is this Uber's zoo stand based state machine library for architecting real time UIs.

Wes Bos

Is it an unincorporated community in Marion County, Florida or both?

Scott Tolinski

Zuber.

Scott Tolinski

This one's for the locals.

Wes Bos

It's an unincorporated community in Florida.

Wes Bos

34% of you incorrectly guessed that it JS an Uber's Suzanne based tape machine library.

Wes Bos

That's pretty believable, don't you think? Yes.

Wes Bos

Last Node, Temporal. Is Temporal an Australian metalcore band which disbanded after 2 years in 2012?

Scott Tolinski

An upcoming standard library for JavaScript for working with date and times or both? Get your votes in.

Scott Tolinski

Ready?

Wes Bos

And both.

Wes Bos

63% of you got it correct. Both. Congratulations.

Wes Bos

3 only 3%.

Wes Bos

Node person got all of them right. Who was it? Woah.

Wes Bos

That's so impressive. We should get him something. Yeah. Give him a shirt. Alright. Come see us after. We'll give you a code for the Syndax Wes store. That's impressive.

Wes Bos

No. Not right now. But Yeah. Not right now. Alright.

Wes Bos

We're kinda doing a show.

Wes Bos

Yeah.

Wes Bos

Alright. Audience, who wants to be stumped? We need 4 people who are willing to come answer a trivia question. Come on up. Come on up.

Wes Bos

Or or we'll get the runner, Mike. Whatever.

Wes Bos

Alright. What's your name? Rob. Rob.

Wes Bos

Alright, Rob. We got a question for you.

Wes Bos

4. Right? Yeah. 4. We got 1, 2 3. 3. One more. Number 4 right here. Yep. Just Dial X. You can come up. We'll we'll I know what we got. No. We already Scott. We got 2. Alright. I'm sorry. We got them.

Wes Bos

Wes have them we're having them on the podcast anyway. It's okay. Yeah. Alright. 1st Wes. On a blank HTML page Wait. Who are we asking this? Who are we asking? Me? Okay. On a blank HTML page, the body element has what default spacing property and value applied to it? Border Bos? Space? I have no idea. So the body element GitHub a reset, you got a bunch of spacing around. So it has no margin? Yes. It has a margin of how many pixels? 18.

Wes Bos

No. Who's got it? 12? Deno. Nope.

Wes Bos

16? No. 8. 8. Who said 8? Nice. That's good. Yo. You get a prize anyway. Just send us a DM, and we'll give you a code for a shirt. Everybody gets The body has a default margin of 8 pixels.

Scott Tolinski

Alright. Next Wes, Dev.

Scott Tolinski

What's your name? Dev. Dev.

Scott Tolinski

React DOM's use form state was recently replaced with what hook for working with server components?

Wes Bos

He might know this one. Use action Scott? Woah.

Scott Tolinski

Use action state.

Wes Bos

I'm I'm impressed because it's not in it's not in anything yet. It's not in Next. Wes, therefore, not in React.

Wes Bos

Alright. What's your name? Search.

Wes Bos

Serge.

Wes Bos

What are the 3 valid options for a form method equals blank. Get post pnpm.

Wes Bos

Nope. Nope. You want it? Correct. And Dialog.

Wes Bos

Dialog.

Wes Bos

Damn.

Scott Tolinski

The what? That JS a hutz. That was a tricky

Wes Bos

answer. Follow-up question.

Wes Bos

Why is get posted dialogue the third one?

Scott Tolinski

So you can close

Wes Bos

the dialogue.

Wes Bos

HTML has a way to close the dialogue. You must use JavaScript to open the dialogue. Thank you.

Scott Tolinski

I went deep on the the GitHub website for that one. Michael. Michael.

Wes Bos

Good. Thank you. Oh, thanks, Rainey. Send us a DM, and we'll get you a

Scott Tolinski

a shirt. Next question for Michael.

Scott Tolinski

Name eight reserved keywords in JavaScript.

Scott Tolinski

Alright. Don't don't look at the screen. I'm gonna show them all. We're gonna show them. So you Scott look at all these people.

Scott Tolinski

I gotta guess the ones that you have oh, you have a lot of them. There are a lot of them. Yarn a lot.

Scott Tolinski

For, switch, function, class.

Scott Tolinski

Why am I there? Default.

Wes Bos

Function. Vercel.

Wes Bos

That's Oh my gosh. He's got a mom. Keep going. How many names can you do? Alright. We're just gonna click them all. He's got them. Keep going. Keep going.

Scott Tolinski

Await.

Scott Tolinski

Yeah. Yeah.

Scott Tolinski

Try, catch, replay.

Wes Bos

Recently.

Wes Bos

Alright.

Wes Bos

I see. Nice job.

Wes Bos

Awesome job. Thanks, everybody. Alright. The last section we have here is q and a. If you've got a question for us, either we got Caitlin on the mic right here. Just throw your hand up. We'll answer it. You got a question about how do server components work, what is love, whatever you want. We'll answer it. You ask it or submit a question on the pigeonhole in person or online.

Scott Tolinski

Oh, yeah. I guess we gotta open up the Yeah. We do have 1. We have 2 in let's see.

Wes Bos

Who codes better, Wes or Scott? Let's ask the audience. Who do you think is a better coder? Wes or Scott?

Scott Tolinski

Clear clear winner on that one. Scott is a much better coder than I am. Thank you. Wes did Scott get his dope shirt? Mac Weldon. This shirt is from Mac Weldon.

Scott Tolinski

That's a dope shirt.

Scott Tolinski

Have you guys struggled with Next. Js caching as much as Sam? How do you say he's the same? Selikhoff. Selikhoff did yesterday on stage and Me on My Side Projects. Yeah.

Scott Tolinski

Node. That's true.

Wes Bos

Yes. I have been using the unstable cache, which where you can tag them. I really like that API, but, yeah, it's, and, honestly, the amount of times in my career that I've, like, cried because of caching is is more than 7. Yeah.

Wes Bos

So It's always caching. Yeah. It's it's always caching. Like, when I did Apollo, we would have pagination, and you would cache all of the items in the pagination. But then you add an item to the front, so you have to, like, ripple delete every other page. And, like, it's it's always just a big pain. So I think we're gonna be trying to figure this out for a while. Alright. Let's see. What is better than React? Smelt.

Scott Tolinski

Solid. Sorry.

Wes Bos

Smelt.

Scott Tolinski

What else? I yeah. I think we just named all of them. Sorry. Literally everything, but who cares? Because React is king.

Wes Bos

Well, isn't it just the man? Coming in. Yeah. When will you get Tim Berners Lee on the podcast? That would be sick. I tried to do it loud there. I go which 1? We did that one. Scott's a better coder than my than us. Yep. Yep. No no problems with that. What is your favorite CSS property?

Scott Tolinski

Low key, I like aspect ratio. I use that all the time. Aspect ratio for me. Oh, man.

Wes Bos

I've been liking, inset and inset block.

Wes Bos

Inset rule. I'll stand up for this one. Anybody tried inset block before? If you wanna set left and right values in the same swoop, inset 0, and it will set left 0 and right 0 in one go. Because block are the new logical properties where you can set left and right, and then, oh, no. Block is top and bottom. The other way around. Yeah. Modal's easy for that. Yeah. Yeah. Insight 0? CSS is awesome. The color mix stuff, I'm really excited about.

Scott Tolinski

All the new HSL stuff. Wes, what is your least favorite thing about the current state of React? Oh,

Wes Bos

I I will tell you it was freaking binding to form input events and updating to state. Like, what a pain in the ass. Like, just let me like, the most common thing we wanna do is take all of the data from a form and pull it out and put it in a state. So the new action stuff is is I'm really excited about it. Yeah. For me, it's just

Scott Tolinski

the little buggy things that get in the way, the needing a key, the Yeah. Node. The class name stuff, like, this useCallback, the stuff that a compiler could do for you.

Wes Bos

Any memo wise that I get it. Yeah. Any questions in the audience? Back end of choice. Oh, of course, JavaScript.

Scott Tolinski

Yeah. JavaScript.

Wes Bos

Data layer. Right now, my latest 2 projects have been Drizzle, which I've been a big fan of. I've been a big fan of I'm like, going forward, all of my, APIs must be fetch fetch based. So request response, web response, you know, all of that type of stuff. So a big big fan of Hano JS.

Wes Bos

Hey? No. No. No. No.

Wes Bos

No. Node. I when I when I say I wanna use fetch, I wanna mean that, fetch is based on web request and web response. Those are 2 primitives in the browser, and you can have a request in the browser, and you can have a request on the server. And the fact that those are standardized and not like some Connect JS version of request response Yeah. Is beautiful because now all of this stuff starts to work together.

Scott Tolinski

Yeah. For me, I like data layer wise.

Scott Tolinski

Right now, I'm using Pocket Bos for everything.

Scott Tolinski

Pocket Base is sick. It's easy to host your own old office bake baked right in. But if I'm going full data, like we did on the Syntax site, it is, it's Prisma and, MySQL. But Yeah. I also like Drizzle and Postgres JS well as Drizzle and SQLite. All that stuff is good for me. Why is Century's brand all purple? David Kramer here?

Wes Bos

Nope. He's he said it on the podcast. He stole it from, Heroku.

Scott Tolinski

Oh, yeah.

Wes Bos

Purple's sick, though. Yeah. I love purple. Where can I buy a Webmaster shirt? They are sold out.

Wes Bos

Better luck next time. We'll have some more cool ones.

Wes Bos

Oh my gosh. Any questions in the audience? These keep jumping around. Might be No. It's nicer when you could just be a keyboard warrior and

Scott Tolinski

type it in online. I get it. When was the last time you coded vanilla JS?

Wes Bos

When was the last time I coded Vanilla JS? Like, daily. I I'm a big fan of Vanilla JS, and that's that's why I like the Svelte stuff as Wes.

Wes Bos

And, like yeah. Scott of that's why I'm talking about Wes response, because Vanilla JS

Scott Tolinski

back end is now possible. I like the DOM Yeah. Myself.

Wes Bos

Change of opinion.

Scott Tolinski

I stopped using React. I like Tailwind.

Wes Bos

I do like React, though. I think I like Tailwind.

Wes Bos

Hey.

Wes Bos

Who's wrong? I see. Yeah.

Scott Tolinski

First.

Wes Bos

Yeah. How long for SPAs to become cool again? I just rode an SPA,

Scott Tolinski

on the flight here, and, it was great. It was really nice not having to worry about the server. I didn't need server side rendering. And if you don't need server side rendering, it just makes things harder. That's So yeah. Again I like server side rendering when you need it. It's easy enough. Beauty of JavaScript, beauty of React, Do you need to do server? Sure. Use React. You need to do

Wes Bos

SPA? Sure. Use React. You Node? Need to Static? Static site? React. What's up? I guess it's expanding on what you're just previously talking about. When would you choose, like, playing React over or Next. JS? Like, what situations you would choose them in?

Scott Tolinski

In in now, I don't know. Too many times I'd pick something that wasn't a meta framework on top of React, because I mean, even create React app was kind of like a starter kit, not like something you'd probably keep around forever.

Scott Tolinski

But now with the server side components or React server components, there really isn't a React platform for server components. You have to use Remix. You have to use, Next. Js. And and to me, I'm going to pick one of those more full featured frameworks personally. Yeah. That to me is React at this point. I'm hoping for, like, a like, I usually

Wes Bos

default, wanna try something in React. I HTML file, install React, and use Vite. Right? And then if it becomes a, like, a full blown project, then I'll I'll reach for a meta framework.

Wes Bos

Alright.

Scott Tolinski

Have I used Remix? Yes. Love Remix. Very bullish on Remix. Big fan. I like Remix, what they did for actions and, then what everybody copied from them from that. And I'm I'm glad everybody copied that from them because it's, the best way to do form stuff. Poor Ryan is gonna just fix all the server component stuff for us so we don't have to

Wes Bos

well, like, it's not our problem. It's Ryan's problem. Yeah. You know? Yep. That's kinda nice.

Wes Bos

Alright. Last question we have here.

Wes Bos

How many episodes of ZoomText did you think you would record when you started? I don't know. Node don't I don't even know what happened. Literally anything. I don't even know what happened for dinner tonight. Yep. That's actually very true for both of us. Yeah. Yeah. Just let her rip. Yeah. We we actually came up with syntax about a whole year ahead of actually recording an episode,

Scott Tolinski

and it just kinda sat in a Google Drive document for a whole year. And then one one day, both of us were like, oh, wait. Remember that thing we were gonna do? Oh, yeah. Let's do it. Yeah. And then it's really easy to just keep going once you start. And then now we're at 700 something. So thank you so much, everybody. Thanks, everybody, for coming out. This is super fun. Have a good night.

Wes Bos

And please, if there's any koozies left, take as many as you want. Please, we do not wanna take as Sanity JS you want. Beers, koozies. You want. JS stickers there's millions of stickers. Don't feel bad. Just take in, like, 70.

Share