Potluck - Immutability × Turning Off Your Brain × Types vs Interfaces × Hooks vs Components × Making the Most of Your First Job × Confidence in Svelte × More!

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss. Welcome to Syntax, the podcast with the tastiest web development treats

Around, we've got a potluck for you today. A potluck is where you send in the question.

We answer them. We got all kinds of really good questions today about, re Immutability and CMSs and, some updates on using 1 password for environmental variables and all kinds of really good rid So excited about that. Today, we are sponsored by 3 awesome companies.

First 1 is FreshBooks Cloud Accounting. Second 1 is LogRocket re JavaScript session replay, and third one is Cloudinary online image hosting transformation, compression, Optimization, all that good stuff. We'll talk about them partway through the episode. With me, as always, is mister Scott Talinski. How are you doing today? Hey. I'm doing good. Just doing good in the neighborhood. You know what I mean? Oh, yeah. Who who has that slogan? Is that, like, Applebee's or something? Doing good in the something like that. Applebee's or Yeah. One of those. Eating good in the neighborhood. Eating good in the neighborhood. Yeah. I'm doing better than Applebee's, but, doing very good. Just hanging out, doing doing my stuff here. Yeah. Nothing nothing to report. Let's get into this, potluck here. Yeah. I'll grab the first question here. It's from re Sunniva. Such a cool name. It's pronounced like Geneva, but Sunniva, I like that a lot. It's like Geneva in syntax.

Oh, yeah. I like that even more.

Hello. I'm finally getting on board with the GraphQL train and have a specific Question about the nomenclature.

Having worked with Redux in the past, immutability was a concept ingrained in the head. Rid I continue to see benefits of immutability, updates across all sorts of libraries, frameworks, vanilla JS, etcetera, etcetera. So Maybe we should pause there real quick and just explain what immutability is. The idea of immutability in JavaScript in, I guess, just in programming in general, is that Instead of directly reaching into your data and overriding it with updates, you basically just ready. A copy of that data and update the the pieces. And the idea sort of the idea behind that is that You're not accidentally updating data that you were thinking about. Like, let's let's say, for example, array dot sort method.

That is not an immutable method.

Meaning that if you were to have your array and then you were to Call that sort on it. It would sort that original array instead of taking a copy of a new array and then sorting it based on that because then you still have the old array if you need it and and And things like that, and that that has all kinds of benefits in terms of tooling and and whatnot around it. We've talked about it a lot on the show, but I thought I would just do a quick rundown. Anyways, back rid question. I'm learning GraphQL now, and I'm taken aback by the fact that the could create, update, and delete re Operations are called mutations.

Okay. So we're just saying how immutability is awesome, but then everything in GraphQL, when you wanna re Change, update, delete data. It's called a mutation.

Is there a reason why we use the term mutation despite the fact that best practices rid Dictate that we should want to implement immutable updates to objects. Does GraphQL actually mutate the objects behind the scenes? Okay. Good question. That's kinda interesting because, like, you hear a lot of people are are just, like, hammered into them. Everything must be immutable and and whatnot. There must be no side effects. That's another one we we see a lot as well. But then you get into GraphQL, and and everything is a mutation when you wanna update it. So rid. At the other day, you sometimes do need to be able to update your data, and that is why they call it mutation because you're literally taking the data that you have Probably in a database, and you are changing it from what it exists in the database and what will exist in the database. So it's not that mutations rid are bad. It's just that in generally, in the front end world in JavaScript, it's more that you should take a copy of it. So The idea of having a mutation in GraphQL world is is not necessarily bad because at the end of the day, you do have to have it. Same thing with side effects as well. I'll throw that in there. Sometimes you do need to actually read that outside of a function and update the title or,

overwrite some HTML. Rid Never is kind of a hard word in programming because it can you can sometimes go through some pretty big hoops to avoid not doing some things that just rid because somebody said at one point not to do something some way. So that's always an important thing to remember is that, you know, absolutes, I don't know if they're great to work in. Totally. Rid. I always thought that the mutation word of it was just like, if you're changing your data, rid It's a mutation. If you're getting your data, it's a query. But sometimes I was wondering if that that mutation was, like, you're thinking about your mutating or changing the cache, rid The, like, the cache in the UI.

That's the thing at the end of the day in the UI that's being updated and changed is the cache, the data That you're in in some cases, that normalized cache that you're pulling the data from, that the the the UI system, whether it's Apollo or whatever, is pulling the data from.

The end of the day, it's not really the same thing, or it's it's not necessarily the same degree that you would say, like Yeah. It's not the type of immutability issue or whatever That's going to cause you any issues or oddness or whatever. The types of reasons why we avoid mutating things like arrays or objects is so that rid. When we access the properties of the object that we know precisely what's going to be in there, and sometimes if you mutate the object Then do something else. You can kind of lose track of what the object is and what the data is inside of that object because some things that mutate the main object kinda have some weird rid. Properties in terms of, you know, you count to log it out at one point, and you check for the values at one point, and it's different than what you might expect. There's These are kind of a lot of programming issues that people face early on when they're learning JavaScript, especially if they're using a lot of methods or things that mutate the data.

So just in general, I find, like, that that to be a rule when working with the data in those kind of ways and not necessarily something greater. Yeah. I think the the the keyword that you're I think you're trying to describe there is just, like, consistency in your data so that you know when you call something, when you update a property on rid. It the output of that will always be Right. X, y, or z, and it has no bearing on things that happened before. It's just what data got passed into that function.

Totally.

Okay. So next question is from Mark Began. He says, how do you sleep at night? And I read this, and I was like, what? What are you talking about, Mark? And then his second part of his question says, I mean, how do you switch off your brain when you're trying to go to sleep and your brain just wants to keep on coding? Mark, I have A lot of issues around this. I'm not a great sleeper. I've never been a great sleeper. My brain is the type that doesn't shut off, And whether it is, like, coding problems and, you know, I'm having the the brilliant solution at the right time while I'm in bed or the wrong time, I guess, you could say.

Rid You know, my brain just doesn't shut off. I I I can definitely spiral into either anxious thought or those types of things and keep me awake.

So how do I fall asleep? One thing that I do is I take a supplement called ZMA, which is it's just zinc, magnesium, and vitamin b. So it's, You know, just those things. And it's just your 100% zinc, you know, just a little bit of magnesium and your daily for vitamin b, And it really helps me stay asleep once I fall asleep and helps me get all sleepy. I don't recommend everyone taking a supplement to fall asleep, but it is just a just a kind of a vitamin that you would get if you were taking a multivitamin anyways.

So that helps me, but another thing that I do is I I don't know how many if you this might feel very foreign to you, Wes, and it may feel very foreign to a lot of people. I grew up with a TV in my bedroom, and I would just leave the TV on and then put the TV on a timer, like, a 30 minute timer, and then I would fall asleep watching the TV. It sounds very, not great much from a very young age. That was just, like, how we did it. You know, you that's the way my brother falls asleep too. And so, like, it's very funny that, like, I cannot fall asleep if I'm not watching a TV. It is really rough, especially because we don't have a TV in our bedroom. That's, like, one thing that we we don't wanna have a TV in our bedroom. You know, I I just feel like that's too much. Right? Yeah. What what I do is I watch read. Documentaries.

I've watched over 200 kung fu movies. I've watched a whole bunch of stuff on my phone, and I just put in AirPods, And I literally fall asleep with AirPods, Ed, while I'm watching something every night. That's how I fall asleep. It's called distracting yourself rid Just enough so that you don't let your day to day problems

overtake your anxious thoughts. Yeah. It's a good question. I find the the wind down Just from, like, other stuff in life. I don't necessarily my brain doesn't necessarily, like, keep on coding. I find that if I am hitting a rid. Really difficult problem, or I am very excited about something, and usually that happens like it's like, oh, shoot. It's already 5 o'clock. I have to go inside now rid Alright. Go back to the the family. What I'll do is I'll try to, like, write down as much of where my headspace is at that time, put it in a to do list, or rid myself a whole bunch of notes, and that allows me to we say this all time, out of your head, into your system. And that gives you a bit more of a a way to pick it up again instead of it always just rattling around in your in your brain. And then I I also do. I listen to podcasts as I fall asleep as well.

Don't really talk about that a whole lot because anytime I do, you get people being Dude. Giving you crap for it and whatnot. But Can you imagine what people say about watching

rid Watching this screen. A lot of listening to podcasts.

Ever since, like, I was, like like, 12 years old, I would fall asleep listening to The radio or literally anything.

And I usually just listen to not coding podcasts, but just other other types of podcasts, Usually about, like, heists or murder or things like that, which is super good to fall asleep to. Sure. Yeah. That's just that's the kind of stuff. Yeah. I'm a big fan of it. The AirPods have been a game changer for that kind of stuff because it allows you just to lay down and and Be nice and comfortable. The AirPod Pros are awful for sleeping sleeping with those. Oh, no. Don't use those. Yeah. One small thing about this rid 2, I think the wind down from your day is important. Do you know, what you said was really, really good about stopping and leaving those comments?

Did you know that the Hemingway, the author, said that, like, the best way to stop is to basically stop in the middle of a sentence? Rid Really? So that way, when you pick things up, you can you can feel like you're you're already moving. And then who else? Somebody I just Googled this, and, Apparently, Roald Dahl says, I never come back to a blank page. So it seems like that's, like, a common author technique even outside of coding to, like, Don't always finish all of your ideas while you're you're working. Maybe your brain can pick it up. And then maybe that's on a great instance for keeping your code off of your brain. But if you stop at Yeah. 5 o'clock, which is you know, I I'm so guilty of coding well into the night in my my life, so I don't wanna judge anybody who's putting in the rid Extra tub. But, you know, nowadays, with kids and and everything, it's so hard to get that sleep and that that time to wind down and everything like That I I'll another little trick I do is I take a shower at night to, like, really clear my mind and to get me into that headspace Until I get maybe some of my code thoughts out. And if I have any code thoughts out, you know, while I'm in the shower or, you know, when I'm done before bed, I'll just take out What I have is a little scratch pad, and I'll just write them down. I I use my remarkable tablet for that, but I'll I'll just scratch some notes down. And I don't wanna get too deep in anything, But it'll just be like little notes like investigate this library, you know, that that kind of thing. That's a good tip. I like that.

Next question we have here is from John Mars. I thought this was a good question because I know a lot of people are building websites for clients. And it was, how do you manage copy and microcopy on a site? Microcopy, that's a that's a neat word. I'm assuming what that means is just like You've got little sentences here and there. You where you got an icon. You wanna put some text underneath it. Should you put Every piece of text across the entire site into a CMS so that you, your client, can change it or just the parts you think may be updated in the future, Or you just hard code everything directly into the markup or collect it into importable JSON file. If you go the CMS route, how do you wrangle it all into 1 schema? Rid It seems like way too much boilerplate that end up maybe dozens or even hundreds of different fields. Love the show, guys.

Re You make my morning commute some something I look forward to. So this is this is a good question because us as developers love to think, okay, you give them a title, And you give them a a input box for the body and maybe, a checkboxes of 3 different categories, and and that's it. And the reality is, with a lot of these, like, marketing landing pages is that there are one off designs, and it's maybe too complex that you would put that sort of data into a page builder.

Although, I think that is starting to become more of a a possible option of Instead of thinking about it in terms of, like, a page that has all these fields, think about it in terms of components that have data attached to them. But I I think, like, there's a couple different levels that you can approach this this type of thing, and I almost always lean towards Spend the extra time and make everything editable by the client because you will for sure get like, I've I've done it many times in the past. I'm like, ah, that little Piece of text in the footer. Like, I had a client website, about a year ago, and I had put, like Mhmm. Make sure to like us on Facebook, And they're like, how do I change that to join us on Facebook? I can't find anywhere on the page where, I can edit that thing. Like, that's one thing I didn't make editable, and it was. It was. And I had to go in and figure out, okay, rid. Do I just take their text and update it, or do I make that thing, an editable field? So I'll I'll go on the side of making it, totally CMS editable, and that's rid For me, that's a level 4. Level 1 is just put everything in the h t o. If it's my website, I'll do it all in the HTML because I'm probably not re Updating a lot of these different fields, and, also, it's much quicker for me just to jump into the code. A level 2 JSON file, Like you've noted, that's kind of nice because if your client is somewhat technical, you can give them that. Also, if it's if that data if it's like a call to action text And if you use, like, 6 or 7 spots throughout the website and they wanna update the, like, buy it now to try it now, Then you can just put it in a JSON file. That also is really easy if you're doing, like, translations, like, multilingual.

That's a pretty popular thing where People will say, buy it now button text. Sometimes if you visit a website and I'm sure our people who don't speak English as their first language see this a lot. Sometimes you visit a website, and there is, like, text on a button or an error, and you're like, that ripped. Seems weird. That seems like a placeholder, and that's because that is its placeholder.

And then it should be swapped out with whatever the translation would be for English or French or whatever. So, yeah, there's a whole bunch of different levels there. I'm curious what you would do for a client website, Scott. Yeah.

I think I've probably done A little bit of having everything be editable in a CMS, and that was much easier to me, I think, and durable than it was for me in WordPress.

WordPress, you kinda get into, like, a situation.

Let's say you have a site with, like, 5 different pages, and those 5 different pages have the content Really broken out into very specific sections.

It is kind of difficult.

You're gonna have to create a lot of rid. Different custom fields, and that's not a problem. It's just kind of a a pain in the butt. I found it to be a little bit easier within Drupal myself, At least to the ability to for the clients to be able to find that content and find how and where it's editable, especially if you you set up your admin in a good way. But this is a tough one because it is something that you, you know, you wanna give the client the ability to change everything, ready. But at the same time, you don't want to give the client the ability to mess things up. So clients have a knack for messing things up, and My concern with giving them JSON is that JSON's formatting is very finicky. Yeah. One wrong quote in there, and it's rid. You're done. One wrong quote, one missing comma, one extra comma, and you break things. So that is a concern I would have there. They would have to be pretty technical for me to give them that.

Same with markdown even. Would we're web devs, and we're devs or even, like, younger people who are used to markdown fields rid in certain websites to format their text. Right? It seems like, hey. Everybody knows markdown. Nobody knows markdown. If I told, You know, my wife is very technical.

If if I told her to edit a markdown file, she'd be like, I don't know what the heck this is.

She's great with computers, rid And, she she used to work at a computer store. Never heard of markdown.

So there is some concerns there, and I would almost always lean on to just about everything they need to rid be editable to be editable within the CMS directly. Sometimes we've been getting away from CMS based sites a little bit here. Maybe that is just part of the agreement is that this is our contract. If you need to change things, you could add me. I have a 24 hour, 48 hour Turn around or whatever your turnaround is, and I will update it for you. Yeah. If you don't like that, we can cost out a big thing for me to build you in a CMS because not every site needs a CMS. Right? Some sites could certainly just be straight up HTML and CSS.

I mean, obviously, you'd probably build that in a different way, but I don't know. I I I would tell you, Wes, I worked in a lot of clients in my agency that we would make their site once. We would spend all this time making everything editable. Yeah. That's a good point. Rid. 3 years later, the client had never changed a single thing, and we hadn't touched it. So

yeah. That's true. It's not outside the realm to just ready. Alright. Once every year or 2, you'd just give it a quick once over, and we'll we'll edit that type of stuff because, like, you're net you're maybe never gonna be editing our rid Address. You know? Like, you're probably not gonna be moving your business anytime soon. And if you are, that's not a big deal for for me to jump in. That's often part of our discovery would be like, How often ideally would you update this, and how often are you actually likely to update this That's true. Until, like, have a real conversation with the client? I even wonder if something like, Tina you you remember Tina's CMS? No. It's like a front end UI. It's not actually a CMS. It's It's kinda like rid Netlify CMS.

Yeah. It's kinda like a edit button for your website where you can edit the actual website in in real time. Like, you're viewing you view the website, and then you just click edit this div.

Does it make things content editable and then save the values? Is that what it does? I I haven't looked into it too much. If you just, like, go to tina.io,

you can take a look at it. You get your text areas or images, and you just click on things, and you can change the text and update it. And then And then you have an adapter that will then take that data and and put it to your sanity, your Contentful, or your Strapi, or Even markdown file as well, so that might be a good option as well. If you didn't know

all their content full or or any of you just, like, listen

re Fake words is very funny. If you didn't know what we're talking about, that's often people reply to my Instagram stories that are, like, my friends that are not devs. They're like, I don't know what you're doing, but it seems impressive.

I always love that one. That guy who does the, the YouTube videos? He did the YouTube videos that was, like, the Excel eGaming kind of Excel, Microsoft Excel. Oh, yeah. Yeah. What I forget his name right now, but, like, he did, like, that one video where he was talking about, Overlord is connected to Bingo. Because Bingo knows everybody's name, oh, which is connecting. It's like, these could all be real companies. Like, I know they're not, but they could all be real companies with all these names. Macro is

Kurzam is the guy's YouTube. Yeah. Kurzam, man. That that's a top tier channel right there. So good. He only releases, like, 1 every year. So So every time your releases went on, this is gonna be good. It's brilliant.

What's also brilliant is one of our, sponsors today, which is FreshBooks. It makes accounting On the cloud, easy cloud accounting. Imagine that. Everything's on the cloud these days. What's next? Who knows? But for right now, it's FreshBooks. Wes, do you wanna talk a little bit about FreshBooks?

FreshBooks is small business accounting that makes billing painless. It's a very tough thing to do as You're trying to run a business, but they also have to take care of sending invoices and managing your expenses, all that. FreshBooks makes that type of stuff re Super, super simple. So you can check it out for yourself. Get a 30 day unrestricted free trial. No credit card needed. Rid FreshBooks .comforward/ syntax.

Make sure you use syntax in the how did you hear about us section. Thank you, FreshBooks, for sponsoring.

Sick. Ready. Alright. Next question is from Ben Lammers.

Ben says, hey, Scott and Wes love the podcast, and gold mine of expertise you guys provide. Well, thank you, Ben. Read. I am new to using CMSs and was wondering for applications that require a lot of content management where CMS Or a headless CMS such as Contentful is ideal, but also requires a dynamic query such as recommended content to the end user rid. Based on browser history, how do you approach integrating the user data in combination with the data being received and handled from the CMS? Rid A separate API, a database, or is this a scenario where the CMS doesn't fit? Thanks, Ben. Yeah. Sometimes you gotta ask yourself, are you Working against the CMS to the point where the answer is this is rid Not great for a CMS. You can get CMSs to do just about anything, especially if you're good with the language that the CMS is in. I mean, if you're using Ghost For Node. Js.

I would imagine you can get Ghost to do just about anything if you're good at Node, and that's really the same thing with WordPress and Drupal. You can do just about anything if You're good at PHP with those software.

I personally am not. Many times when we had some really advanced functionality of PHP if I was still working in it. But like I said, if I was using Ghost or something, I feel like I could augment Ghost to my fullest capabilities.

And so There is a decision to be made there, and we actually had to make the same decision when we were building our ecommerce store. Do I use Reaction Commerce, which at the time was built on Meteor, and the u r UI of our site was also built on or the The main version of our site was built on Meteor. So I was thinking, reaction commerce, it's the store. It's got everything I need, and then I started getting into subscriptions and how that all works within it.

And at the time, I didn't know enough node to augment something. I knew enough to write my own system, but not enough to augment something. So it felt like it was gonna be too much work to augment that, and I went in off, and I I built my own from scratch because, hey, rid. It seemed like the right idea at the time. Now looking back on it, I probably should have done reaction commerce. There's so many little pain points like shipping and stuff that I wish I, you know, didn't have to do. So at the end of the day, if you're having to augment it that much, it is a really difficult rid Decision to make on your part, and unfortunately, not one that has a a cookie cutter answer. So, like, at what point are you truly working around the CMS to a point where it's a detriment to your time and energy.

But then, also, you gotta look at, like, what is that time sync or time cost of rid Writing this all yourself. And it's a difficult conversation, and it depends on how good you are with the language that the CMS is written in is really what it comes down to. Yeah. I kinda see this as, like it's like the your application

versus your marketing CMS.

And if your app is doing Any significant stuff, I would probably keep them separate, especially because you can kinda keep your app as nice and clean as possible. And then The marketing website we talked about before is usually a lot more busy. It usually has a lot more third party stuff added to it. And if you can keep those separate, I I honestly think that is ideal. But if it's something simple, like, I think back to when I used to do WordPress, I would take rid Contact forms or sign ups or if you're taking data from the user And you they don't necessarily have an account, then, yeah, you can expose APIs. You can make some very simple permissions that allow the public to submit data into your database.

I think that's totally fine, but anything larger than that, I would probably reach for something that's not meant for content based sites And something that's more meant for building a full blown application where, you know, authentication

and user data. Yeah. It's a tough call all around. This is, it's not an easy problem to solve. Next question we have here from Caesar Zep. When problem solving,

Do you do it through trial and error, or do you carefully think through every solution and choose the best one before actually implementing into code. Yeah. That's a good question. Absolutely not. I don't sit there and think ponder all the possible options. And then After I've come down from my throne, I place my fingers on the golden keyboard, and it all comes out as no. It's a lot of, like, rid. Churning and reading ideas and failing and hitting dead ends and realizing the thing that you picked doesn't do this one little thing that you wanted.

There obviously is a lot of planning into it, but a lot of it is just testing and refactoring and and sort of thrashing until you found

Something that makes a lot of sense for you. Yeah. It is very difficult to come up with every scenario, solution, idea.

Like, it's very difficult to come up with all of that on the spot. Many times when you're implementing something, things Become revealed to you in ways that weren't there before.

And those are the times where you can maybe evaluate and say, is this the right direction or not the right direction? But just like, It's not necessarily totally trial and error. It's I mean, there's educated guesses. Yeah. But at the end of the day, they're educated guesses. And sometimes The thing that works in your brain when you get it out into code, you're like, oh, what wait. Why was I thinking this would be the the right way to do this or this would be the the correct way? And you you adjust. You know, a good way around this is something that, we've talked about a little bit on this podcast, and I've been doing it more in my courses where you just write everything out in comments first. You just rid Scaffold.

Whatever idea you have out in comments rather than code. Pseudocode just comments to say, alright. This does this, and this does this, and this does this. And really quickly, you can kinda see if there's any gaps in there. I read a lot of to dos too. Like, not necessarily to dos as these are tasks, but to dos as in, like, this This is something I have to consider. It has to do this. It has to do this. It has to do this. It has to do this. And then I sort them and organize them and sort of do an outline for the code. Rid. And that kinda gives you an idea if the code is a good idea or if it's gonna be a mess ahead of time before you even run anything, and allows you to validate some of your ideas too.

Alright. Next question is from Mike Laurel. Mike Laurel says, I know West is a huge One Password fan like myself. Yeah. I am too, actually, Mike. And I would very much like to hear how we can take advantage of the new partnership between 1 Password and Secret Hub.

Rid I've not heard of Secret Hub, but it sounds like a secret GitHub.

I feel like getting into dotenv, but this sounds much more interesting. So Secret Hub. Wes, have you heard of Secret Hub before? I have never heard of this thing. I had not, but I threw this question in because, first of all, rid Remember we had the dotenv show, and I said, oh, it'd be amazing if you could just stick your secrets in 1 password Mhmm. And You could use 1 password to, like, integrate them into environmental variables, and, apparently, that is possible. They have a whole command line Tool that you can use to I haven't installed it myself. The first thing it, tells you to do is to install some sort of CLI for it. What that will do is it will expose your username and passwords as environmental variables, so you can just use 1 password on this command line. And that seems pretty handy. Then I saw this question, which is Secret Hub, which is a product That allows you to store your secrets on a web app and then inject them into your rid Environment of choice as well as doing some audits and and whatnot of that data, which is great because that's how secrets kind of work on all these different app platforms.

And then on on your app, locally, you usually have a dotenv file where you put your passwords. And, like, I was working on rid Some wise API stuff the other day, and I had to put my wise username and password into a text file on my computer. And I was rid I don't really like this because, like, that file gets synced to my backup software, which is in the cloud, so I don't not a big fan of that. So this secret hub, it was bought by 1Password, and it looks like they Have seen the need for a very simple thing like that, so I'm excited about this because A nice app that is owned by a company that I very much trust to manage and inject your secrets is going to be really, really nice, so I'm excited about this.

Yeah. I don't know if I'll use it, but it looks nice. It's one of those apps that goes from free to rid Very expensive.

That is, like, such an it's such a joke, but such a a meme joke that it is so accurate. So many of these services will be like, they're free, and then the next Next tier up is, like, $200 a month, and you're just like, what? Something in between?

That escalated quickly. Yeah. Yeah. Yeah. Right. Exactly. Which it makes sense. Rid. Those companies are trying to get all of just, like, devs doing little stuff, side projects, personal stuff, And then they're trying to get their entire team on. I think that's how a lot of Yeah. These companies do. Bigger fish. Totally. Totally. So thank you, Mike Laurel, for sending that in. Read. I will be watching Secret Hub for,

any updates. Let's take a quick minute to talk about one of our sponsors today, which rid LogRocket. Now LogRocket is the best place to log your rockets.

LogRocket is, the error and exception handling service that allows you to see read. The errors make the action that initiated your mistake because it's always your mistake if you're the developer. Right? And so what this allows you to do is see these errors and exceptions happen in a visual video scrubbable replay.

It's really cool. It gives you the video scribbleable replay. It gives you the network request, the Chrome dev tools. All of those things that you know and love from your own debugging Workflow now are available to you. No more guessing in the dark as to why or when or where or how this thing happened or even worse, rid. Denying that it happened at all. Sometimes clients will be like, hey. Your website turned purple. And I say, that's impossible.

And then you you, if you had LogRocket, You could go ahead and see you goofed up, and they clicked on something, and it turned your site purple. And now you gotta start apologizing. So So what you're gonna do is head on over to logrocket.comforward/syntax, s y n t a x, And you will get 14 days for free. Check it out. This is a tool that you want to see to believe.

Okay.

Let's get into the next one. This is from t j space r. Hey, Wes and Scott. Love this show. Binged old episodes about a year ago, and I never missed one. Since you have been working a lot in TypeScript recently, maybe you should help me shed some light on this. When creating types in TypeScript, When should somebody use a type over an interface? While I generally understand the differences, it seems like interfaces offer more flexibility. Am I I am struggling to understand why I would ever use a type.

Yeah.

So it is funny. When you first see like, let's well, we we talked about this in the TypeScript episode. When you first go to TypeScript's documentation and you see that some people use interfaces and some people use types to do the exact same thing, your first instinct does say, ready. Alright. What's different about these things? What what is why why do they both exist? What's the use case for both of these? And then you you come to a table, And they mostly do the exact same stuff with a tiny little little bit where interfaces can be extended.

You have a note here that says types can do a nested alias.

What what what is that exactly? Yeah. I ran into this

rid The other day let me say, a super simple example. So you've got a food type, and then you have a sandwich type. And a sandwich extends food. Right? Like, Maybe food has some very basic properties, and then the sandwich has some more specific properties on that that are only related to being a sandwich and and not be not a pizza. Rid. So you can go ahead and extend that with either a type or an interface. However, if you have properties rid Inside of that type, that also need to be extended. So let's say you have rid. An expiry sub property, and that expiry is its own type.

If you wanted to extend that as a sub property In an interface, you would have to first extend it and then reference it as a child property in your type. With a regular type type, rid Not an interface. It allows you to use the ampersand.

So you could say base expiry ampersand, Open up curly brackets, close curly brackets, and put your extra properties in there. And I was like, oh, okay. That's that's something since the podcast that we talked about I've never run into before is that If you want to extend a type as a sub property, you cannot do that with the interface. So that was just, like, one tiny little use case that I ran into where rid. A type would be better than an interface. And then the other the other big one I run into a lot is if you wanna have an alias, You wanna do a quick little one liner where something equals something plus whatever, something extends something, something infers something.

A type uses, like, Any of the utility types that are in there, return type parameters, all of those have to be via types, and they can't be done via interfaces. Rid. So Wow. Yeah. It's a whole lot of answers for not much, but you'll hit little things. TJ,

I don't know if you need to worry about any of that because that is in the weeds a bit and not not not a fault of yours, Wes. Rid. That's just the the nature of this conversation, and the nature of this conversation is just pick 1. And, you can do basically what you're trying to do with either of them With some small exceptions, but most likely not things that you're going to hit all the time. And by the time that you do hit them, you'll have a bit better understanding of rid The pros and cons. Like, I we we said in our last TypeScript episode that I use types to type all of my React components, and I think Wes used used interfaces.

Yeah. I used interfaces by default. You used types by default.

It's not even not even a pro and a con. It's just a, oh, rid. Can't use that one. Use the other one. You know? Like, oh, it wasn't that one. Use the other one. Exactly. You know, like, it's it's almost silly. I I bet I bet it'll all be combined into rid one at some point for TypeScript 7.

Next question we have here from Linus. Another types of question. I recently ready. Started using TypeScript in React, and, typically, I'm just using function components.

I've been seeing some people say that classes are really great with TypeScript

rid in React, but I haven't found any real use cases benefit myself at all.

How about you guys use classes in React and TypeScript? I don't. Basically, this just comes down to do you like the class based approach to writing React, or do you like the function and hooks based approach to writing React? And I think over the last year or so, people have been migrating more towards hook based and function based way of writing React. And I think, like, existing code, yeah, absolutely TypeScript, but, I think any any new code that you're writing going forward, and it would be great with functions. And rid. I don't necessarily see any of the benefits that you would get with a class in TypeScript over a function and a hook.

Yeah. I personally would not Right. React components with classes. Again, personally, I prefer the hooks based. I don't need the the multiple life cycle methods, rid when I can just use use effect, I know hooks can be hard hard to parse for some people, and especially when you're you're learning them. Right? They can be a little bit confusing, But I just cannot imagine whatever benefit somebody is telling you is worth it to be on what would be seen as, like, sort of the out of date style of writing React components going forward. I know that's a bit of, you know, a bit of a touchy thing, but I personally I do I do not see any benefit there. I'd be interested in hearing the arguments, but I don't think I'd be going back to writing class components whatsoever.

Alright. Next question is from John Elwood.

John says, rid. What is slash are your opinions on generators like Yeoman? I have never heard you 2 discuss them as far as I can remember. I didn't even know they were a thing until this morning, so I, of course, I started to look at syntax episode, and I to learn about it and didn't find anything. Just looking for y'all's thoughts on opinions on such animals. Love the show and other nice phrases to get my questions answered.

Oh, this is funny. So John's saying that he has to placate us with, niceties so that his question will actually be answered on the show.

It's like an offering. Thank you, John. Thank you very much. We talked about them once. If you search yeoman on the website, we talked about it on episode 41.

Rid Oh, look at you. 300 episodes ago. Look at you. Yeah. Yeoman.

So Yeoman is a tool that I remember being very popular in 2011.

So, John, to give you some context why we're not talking about it a lot is definitely had it its heyday More of in the past. And Yeoman was a a scaffolding tool that allowed you to get started. Now what has replaced Yeoman? Re Well, a ton of stuff. Whether it is create React app to start up a whole React app. Because at the time, when you were doing a Yeoman application, the main things to choose from were, like, I'm gonna pick an HTML 5 boilerplate, which is just an HTML 5 file and some CSS and maybe Sass or whatever, maybe even a Gulp file. But nowadays, we're building more things in this context of a front end framework or an all encompassing UI framework like React, via Create React App, Next. Js, or even Svelte, SvelteKit, Vue, Vuex, or any of these sorta or not Vuex. Nuxt is the one I was thinking of. Those are all these types of things that really take the place of yeoman.

And so for that reason, I have not touched yeoman since probably 2000 and 12, 2013.

Just haven't had the need to, and I might be wrong on those dates. Who knows? But I haven't had the need to use it because, for the most part, the Scaffolding tools that I use already exist within, whatever platform I'm writing on. I don't know about Duwes, but I actually kinda like rid Scaffolding tools. And that was, like, one of the coolest things about Rails to me. It was like, oh, you need a new new data type? Let's just scaffold this all out. It's like CMS light kinda deal. Yeah. I've always kinda wanted to build some things like that in my own platform.

Like, oh, I'm considering creating a a new data type. Rid Well, okay. What do we need? We need a GraphQL type for it. We need the the Mongoose connection for it. We need the CRUD in the UI. Like, hey. Kinda nice if all this stuff was just baked in to my platform or automatically generated.

I have not used Jomon in a little while. It's a really nice app, fantastic logo, fantastic Typography, but that's pretty much as far as I'm going on it today. I think we have sort of moved away from not everything, but a lot of Things have tucked away complexity

where you needed you had so much setup, so much boilerplate that you needed a rid tool that would give you the boilerplate before you could do anything, and I think we've tucked away a lot of that complexity inside of a framework now. So, like, rid. In Next. Js or Gatsby.

Even package dot JSON is, like, wasn't really a thing when Yeoman came out. Yeah. Yeah. It's true. You there was no way to describe

all of that information. So, yeah, it's all it's all tucked away. If you look at Next. Js or Gatsby, If you wanna use TypeScript, you just name it .ts, and it's up and running. And even a lot of our build tools have very little or no config at all. Rid So, thankfully, it it was a tool that was used to solve some of the problems that we had. We either don't necessarily have those problems anymore, or They're built into the CLI tool themselves or an NPX script where, like, you don't have to Install something to run this. You just run n p x and the name of the script, and it will it will do it. And I'm even wondering now if rid Some of these tools use Yummin under the hood just to to generate out stuff for you. I don't know if they even need to anymore. Yeah. Probably just npm scripts. Do you see that new thing from Google that's like a easy way of writing node scripts?

It's like a two letter word rid Or, like, XE or something. I have to look for it. Who's it from? Google. I've been seeing a lot of chatter about it rid On the Twitterverse recently, people have obviously have opinions on it whether it's good or not. But it makes writing re Grips really easily. I'll find it before the end of this episode, and then I'll I'll share it to you. But, yeah, it it's it's basically like a a Oh, it's Google as close, z x.

It's basically, essentially, a way of really easily writing, essentially, bash scripts inside of Just a note file. And this to me seems like a nice code forward way to write your own kind of scaffolding tools or potentially, like, Script generators, those types of things, and it's neat. Oh, that's cool. So I don't know. I'd keep my eye on this. People are gonna have opinions about it. If anyone's trying to understand what this is, the example would be,

you write JavaScript await cat package dot JSON grep name, git branch. So, basically, if you have these bash commands, but you need the data in JavaScript or you just wanna orchestrate it Yep. In JavaScript, which I find not to be the hardest part of write writing bash scripts, I'm like, how do I loop over these things? You know? Yes. Yeah. Rid. How do I prompt the user in the right way with emoji and loaders and yeah. Yeah. Grab every image and rename to PNG. I'm always like, like, I know I can do this in a bash script, but I'd much rather be able to just console log and await and use my dev tools and write it in a note script. So that is

pretty nifty. Yeah. It's funny. Somebody was like, why would you just use this when you could write bash scripts? And I think you nailed it. I know how to do this in node with node scripts. And while I could figure it out with bash scripts, that's just a barrier to entry that I don't, you know, I don't want to have to to spend that time.

Next question from Nicodemus. Hey, guys. Love the podcast. Learned so much from you. Yeah. Thank you.

I am very passionate about web development, especially front end. I've been looking for a career for a couple of years now, and I've recently landed a job with a small agency getting paid hourly Making word WordPress websites, they are a team of SEO specialists and designers using prebuilt themes like Avada and Divi. Those are 2 re Super big WordPress themes, and I'm using air quotes there because these types of things have they're essentially a bunch of plugins as well that make authoring Your content really good.

They brought me on because of my knowledge in web development and want me to eventually run a team of web developers. I'm only rid. Developer on the team, and I'm worried that I'm gonna get stuck pushing Divi sites all the time. I know it was a good opportunity for me, but I was hoping you guys can shed some light and Give me some tips on how I could put my skills to good use. Okay. So it's funny. We got a lot of a lot of CMS questions and a lot of, like, kinda content based website questions today.

So first of all, congrats. You landed your 1st gig. And if this is not gonna be your favorite gig ever, that's totally fine. You got your You got your foot in the door after what sounds like, 2 years, and this is an awesome first website. So I wouldn't be worried too too much about getting stuck Building that type of stuff, I think it's a really good opportunity that if you find yourself saying, okay.

These are the things that we do on every website, or I find myself running into this problem on every website. You can start to create tools that will help you, and maybe you can even make your own, re WordPress framework for building the types of websites that you guys build over and over again.

That's pretty common in rid The agency freelancing space where we build a lot of these kinds of websites, so we need to go ahead and build a A plug in. If it turns out to be, yeah, I am building the same website over and over again because these guys are just cranking out SEO websites, then that's totally fine. You can stick with it for 6 months, 2 years, however long you need to in order for it to be a stepping stone to your next job. Yeah. The end of the day, it's just good experience,

and you're going to encounter situations that you're not going to encounter anywhere else, And that's going to come into play the next time you have a situation and you need to make that decision. So like you said, it's everything you do there is going to be rid. A positive for your long term understanding of both working with clients' projects, any of that stuff in the real world.

You know, It's always gonna be a good experience,

but you know what else is a good experience?

It's one of our sponsors today, which is Cloudinary. That was, like, the the all time laziest But you know what, Wes? It's okay because our sponsor really is more exciting than my rid transition. So do you wanna talk a little bit about Cloudinary?

I do. So Cloudinary, you know, you can upload your images to them. They can resize them. They can compress them. They can Literally, anything you want with the image, they can do it. What I wanna talk about today is they have add ons for Cloudinary, Which allow you to hook into other services in some of including their own, and they can run scripts. So they have, Cloudinary rid AI background removal. So part of your uploading of an image, let's say you're using Cloudinary for, like, a photo editing app. Rid. You could automatically clip out the background with AI. Have you ever seen any of these, like, background removal scripts? They're really good. Rid. They also have content analysis, so you could detect if there is a bike or a building ring Or a person or someone smiling in in your photos, they have a bunch of these auto taggers, which would be really nice for Generating alt text on demand, getting URL to PNG for getting screenshots, so, like, all kinds of really cool add ons in Cloudinary as well. Check it out at cloudinary.com.

Thank you so much to Cloudinary for sponsoring.

6666.

Next question is from Adam Hopkins.

What are your approaches to caching a GraphQL API? Adam, I am not the best at caching.

One thing that I like to do, If you're talking about server side caching of a GraphQL API, I use Mercurius, which is our GraphQL framework for the server side, rid And it has some baked in caching for the loaders, or you could tell them to just use Redis. So wherever possible, read. I personally am leaning on the libraries that I'm using for GraphQL to handle the caching, and I rid I, for the most part, with the exception of caching user information or session information in something like Redis On the server side, I personally am staying mostly out of the way from GraphQL caching.

And if you're using a library on the front end, I use Apollo.

There are many other options, whether that's Oracle, React, Query.

I wanna say Relay as an option, but, you know, I'm not using Relay myself.

These things have caching solutions baked in. They have, like, a normalized rid cache, and that's a huge part of why you would use one of those libraries in the 1st place. And that way, you don't have to manage the caching aspect. So that's what I do. Rid I lean really hard on the libraries that I'm using that are am already doing the thing. Yeah. I agree as well. The caching is not something that

rid. I think most developers need to to be implementing. If it's a client side, Apollo, React Query, all your those libraries will have caches built in, And they will have knobs in terms of, how much you should and should not be caching the data. On the server side, there usually will be adapters For things like Redis, you can even just cache the stuff in memory. So very, very simple example I use on my own course platform is that I get the exchange rate For, USD to Canadian.

And I'm only allowed to hit that API, I don't know, like, 20 times An hour.

And, also, it slows down the request a little bit because I'm requesting data from the database, but I also have to go to the API to go get this data. So all all I simply do is just store it in memory. And what does that mean? Put a variable at the top of your module, make it a let rid. Rate equals whatever, and then also make a let rate updated and then make that a time stamp. And then when you go to get the data, your function that fetches the data will either check if that data is there and is less than rid. An hour old, then it just returns the data in that variable. Otherwise, it goes off to the APIs, fetches it, updates those of external variables and returns it. So when people talk about caching it in memory, that's literally all they mean is they're just storing it in a variable, And that variable will eventually be cleaned up when the thing shuts down. Same with, serverless functions.

I use a serverless function to generate the OG images for my website.

And when When I was doing it, I was like, alright. Where should I store these images? But I I I want them to only live for, like, an hour or 2 because if I change the text or rid. Anything changes about it, then I wanna regenerate it. So all I ended up doing is I just base 64 encoded the the image, rid Stuck it in the variable, and that serverless function will hold on to that for up to 4 hours, I think, and there's no guarantee. But if it if it's not cache, then it just Generates it again, and that was a really good option because they didn't even have to reach out. I coulda reached out to, like, Cloudinary or something like that, stuck it in there. But in my case, I just rid Stuck it in memory, and it was a good enough caching solution for me. I say that's for small projects, that's almost always the way. We use Redis on our end, but, you know, honestly,

you can get by with just caching in memory for many, many, many things.

Alright. Next question is from, Nees from Kerala, India.

And, since you guys are doing a great job and being a subscriber to your podcast, I can rest assured that I will have the latest information in the world of JS. Man, so many so many great, wonderful, messages today.

You did mention in an earlier potluck that Svelte is probably the easiest framework to learn. My question is this, how confident can one be to start a new project With Svelte being a technical lead, can I propose our team to work in Svelte? Is there enough material solution on the web, and is the Community established. I think, in my opinion, yes. Absolutely, yes. I mean, The New York Times uses it. So that is a, A pretty big organization to be running Svelte in production. Right? A lot of companies run Svelte. It's a big community.

Inherent risks with anything. If you wanna take the least risky front end framework, it's gonna be React. But what is the least risky framework, You know, 10 years ago, I don't know. Who knows? Probably, jQuery. Right? But Backbone.

Maybe if you were saying full front end framework, The least risky one probably would have been backbone, but how many sites are, like, actively being marketed as, like, backbone engineers today? Right? Rid So Yeah. It's a tough call to say, like, to buy in into anything, but there are very real stakeholders using re Svelte in the big projects across the globe.

And you know what? I don't think you'll regret it. I personally if I was starting a project today, rid It would be in Svelte as much as I love React. Honestly, the only reason I'm still using React on level up tutorials is because There is no way I'm changing that. There's no there's no way I can change it. I like Svelte that much more. So I don't know. It's a calculated risk no matter what you're going to do. And if you have 0 risk tolerance, and that risk tolerance is I need to pick the most stable, Absolutely thing that is never ever going to go out of fashion, you're probably in the wrong industry.

If you're looking at picking something that has rid The most amount of developers working in it actively, you're probably gonna wanna pick React. If you're looking at something that is exciting to you and that you'll be productive in, rid. I have I have absolutely no issues saying to pick Svelte, and and you'll be happy with that decision for as long as you'll need to be happy with that decision for. I agree.

Nothing else to add there. I think you said said it super well. Let's move on to the next section, which is sick picks. This is the part where we pick things that are sick, and I'm going to re sick pick something that I just did again.

Maybe about 6, 8 months ago, I said pick these deli containers for keeping all of my spices in.

I saw you Instagramming about that. Oh, man. So

If you didn't hear that one, basically, what I did is I I took all of my spices that I had in my spice drawer. I bought these little rid Deli containers, which are those, like, clear plastic container that has a has a lid on it. And rid. I labeled them all with the spice names, and I stuck them all, and they stack really nicely. It's really easy to find what you want, and I've been so happy with it. Like, I feel like I'm even a better cook because I have such Quick, organized access to all of my different spices.

We did it at our cottage as well. I changed everything over from rid Random packages of random spices and old jars and things that have dried out because the lid didn't close all the way and things like that. And rid. I totally redid it, and I was like, man, I love these little deli containers for just for spices and just for everything in general. So It's such a simple little thing, but I'm so happy that I found a nice system for it. So I'll link up the the ones that I have, but rid. You can even just save the ones that you get from takeout.

We so we did for about half of them. Totally. Yeah.

Sick. I'm gonna pick a blender bottle if you are the type who's, you know, working out. You got protein shaker bottles, you got a protein powder. You shake them up. Oh, yeah. If you've ever used the official blender bottle, which is the one we've always used, this is a cheap plastic rid Crap with a, you know, metal little spring in it that shakes it all up, and those things are are just junk. They're always rid Spilling the the seal isn't great.

It's cheap plastic. I kinda feel bad drinking anything out of Cheap plastic, you know, like, especially I don't know. For some reason, I get weird about liquids, you know, whether it's hot hot liquids, cold Not spices, though, Scott. Right? Not spices. No. Okay. Good. Yeah. Yeah. No. No. No. I I I see what you're saying. What did you buy, like, a mason jar blender bottle? Well, that's the whole thing. You don't wanna put them in the dishwasher and stuff. You know? The these things get nasty. You gotta get them clean. I actually Have you ever have you ever left 1 in your gym bag for 6 months and opened it? Rid 6 months, I think I would just blow yeah. Nasty.

Even leaving it in the sink for one day is nasty. Awful. Awful. So I got these Contigo. You probably heard of Contigo.

Love Contigo.

Yeah. So they make thermal lock stainless steel Blender bottles, and, they're reasonable. It's $12.

And the thing has, like, a screw on top lid for the the thing so rid It won't spill. Oh. The blender part is actually thing, and the whole thing is stainless steel. So, you know, I treated myself to a $12 Contigo blender bottle because I was just like, actually This is nice. This is actually a a fairly ridiculous story that Courtney and I had the exact same, parallel thought. Rid. Our child, we don't know which 1, hid the only blender bottle we had left in the house, and Courtney and I both been been like, we cannot find the blender bottle. Where did it go? And then Courtney is like, is it wrong that I I consider just buying a new one because we can't find this? I was like, no. That's exactly what I was doing. Not only did I do, but I ended rid I'm a splurge on the on the $12, stainless steel blender bottle for something that you use every day if you're hitting the gym. So Oh, yeah. It's super easy to to clean stainless steel as well. Yeah. Which is, you know, the biggest thing with gross ass blender bottles.

So yeah. My Yeti is stainless steel, and every now and then, I just put fill it full of vinegar and let it sit for a couple days. Oh, baby. Throw it in the dishwasher after that, and it's Brand new. Man, this is this is great. Well, you could pickle some onions in there while you're, you're that big.

That's actually not a bad idea.

Oh, that's great.

Rid. Contigo makes such good stuff. We I went on a a tangent a couple years ago to find the best kids' cups, And Contigo ended up having them, and, there's just this one specific Contigo cup. Maybe I'll sick pick it at one time.

That is such so good for kids. Rid

shameless plugs. At the time of listening to this course, maybe for those of you who are interested in diving into the world of Svelte, you can check out the latest course on level up tutorials .com at the time of release of this is SvelteKit.

I don't have an that's the working title. It's gonna have a better title than just straight up SvelteKit, but it's on SvelteKit.

And we're gonna be showing you how you can even convert a sapper site into SvelteKit, which is painless. But we're gonna be talking all about the what's, where's, why's, how's, wins of Svelte and re SvelteKit. Why the heck you would pick a SvelteKit over anything else? We'll get you up and running to the point where you can feel confident, doing anything that you would need to do in a building a basic site with SvelteKit and feeling very comfortable about it. SvelteKit, rid In my mind is the future, and if I wanted to start a new project, this is the tech I would pick, and I'm gonna say that straight up. Rid. Also, if you are interested in becoming an author for LevelUp Tutorials, we do have a new author form where you can sign up. We pay both, an upfront cost to your work.

That's a non advanced many times with these these companies, they try to pay you in advance and then take your royalties out of that advance. We're not doing that. So, You know, you could get an upfront payment as well as royalties for your series. If you wanted to do a tutorial series for level up tutorials, I will make sure I have the rid Link in the show notes. Also, I'd love to tell you about the level up tutorials spring sale that's going on right now. We're doing re percent off of annual subscriptions.

Every single tutorial series on the site is on sale. So head on over to level up tutorials.comforward/pro.

And if you are not currently a pro subscriber, hit that .comforward/pro.

We have a new tutorial course every single month. Tons and tons of stuff, so you'll get access to the entire back catalog as well as 12 new additional courses over the course of the next year as well as a ton of additional features and tools. So check it out. Leveluptutorials.comforward/pro.

I will shamelessly plug all of my rid JavaScript courses. If you wanna learn JavaScript, you wanna brush up on JavaScript, you wanna learn a couple new frameworks, Next. Js, Gatsby, You wanna get really good at fundamentals in JavaScript? Go to Wesbos.comforward/ Courses, and you can use the coupon code syntax for $10 off. There's also a whole bunch of free ones in there as well.

And that is rid Oh, anything else to add there, Scott, or should we wrap this sucker up? Let's wrap it up. Alright. Thanks so much for tuning in. Catch you on Monday.

Peace. 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 ring.