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

Instead of thinking about it in terms of, like, a page that has all these fields, think about it in terms of components

And so

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,

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.

with those software.

Do you do it through trial and error,

and figure out, okay, rid. Do I just take their text and update it, or do I make that thing, an editable field? where, 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, I can edit that thing. Like, that's that you would put that sort of data into a page builder.

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

re Fake words is very funny. If you didn't know what we're talking about,

It is kind of difficult.

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

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 compression,

And at the time, I didn't know enough node

are you

At least to the ability to

a a input box for the body

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,

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, 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

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,

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

permissions that allow the public to submit data into your database.

where the answer is So there is some concerns there, and I would almost always lean on to just about everything they need to rid have 0 risk tolerance, 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,

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

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.

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

Although, I think that is starting to become more of a a possible option of they have a bunch of these auto taggers, which would be really nice for Next question from 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.

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 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 Oh, it's Google 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.

And you give them An hour.

Or a headless CMS such as Contentful is ideal,

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.

all their content full or or 6666.

versus your marketing CMS.

if you're taking data from 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

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.

sections.

FreshBooks is small business accounting that makes billing painless. It's a very tough thing to do as Meaning that if you were to 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, 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.

What's also brilliant is one of our, sponsors today, which is FreshBooks. It makes accounting You know, 10 years ago, or it's it's not necessarily the same degree that you would say, like Yeah. It's not the type of immutability 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 anything out of

say, buy it now button text. Sometimes if you visit a website and it's maybe too complex have your array and then you were to

website in in real time. Like, you're viewing you view the website, and then you just click edit this div.

I personally am not. Many times when we had some really advanced functionality

I like, that file gets and it looks like they That's pretty common in almost always lean towards

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

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

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, ready. Alright. What's different

that's often people reply to my

I think I've probably done

and durable than it was for me in WordPress.

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

For Node. Js.

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.

Yeah. It's kinda like a edit button for your website where you can edit the actual

this is a tough one because it is something that you, you know, and Sick. Ready. Alright. Next question is from Ben Lammers.

Let's say you have a site with, like, 5 different pages, and those 5 different pages have the content

You know, my wife is very technical.

Any significant stuff, I would probably keep them separate, especially because

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/ 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

to augment something. I knew enough to write my own system, but not enough to augment something. So 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.

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.

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,

one thing I didn't make editable, and it was. It was. And I had to go in

That's a pretty popular thing where People will I'm just using function components.

for the clients to be able to find that content and find how and where it's editable,

I think that's totally fine, but anything larger than that, I would probably reach for Rid. Contigo makes such good stuff. We I went on a And if your app is doing

A little bit of having everything be editable in a CMS, and that was much easier to me, I think, 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,

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, for a full archive of all of our shows. And don't forget to subscribe in your podcast player or

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.

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

you can kinda keep your app as nice and clean as possible. And then to go get this data. So all all I simply do is just store it in memory. And what does that mean?

syntax.

I'll do it all in the HTML

recently, people have obviously have opinions on it whether it's good or not. But it makes writing

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, 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, 12, 2013.

I remember being very popular in 2011.

bash commands, but you need the data in JavaScript the user And you they don't necessarily have an account, then, yeah, you can expose APIs. You can make some very simple 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

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.

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, 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 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.

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.

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

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 re WordPress framework for building the types of websites that you guys build over and over again.

already exist within, 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

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,

And so for that reason, I have not touched yeoman since probably 2000 and this is

It's basically, essentially, a way of

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 A pretty big organization And that's going to come into play the next time

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

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.

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.

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.

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.

really easily writing, essentially, bash scripts inside of read. I personally am leaning on the libraries spring sale that's going on right now. We're doing re stainless steel

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 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,

that really take the place of yeoman.

cat package dot JSON grep name, 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 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 not coding podcasts, but just other other types of podcasts, tells you to do is to install some sort of CLI for it. What that will do is it will

script where, like, you don't have to rid The agency

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

as close, 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 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.

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

or automatically generated.

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 The end of the day, it's not really the same thing,

is a tool that

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

A nice app that is owned by a company that I very much trust

is going to be really, really nice, so I'm excited about this.

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,

Have seen the need

your git branch. So, basically, if you have these how much you should and should not be caching the data. On the server side,

When should somebody use a type over an interface? There are many other options, whether that's Oracle, React, Query.

Like, it's very difficult to come up with all of that on the spot. Many times when you're implementing something,

Tool that you can use to I haven't installed it myself. The first thing it, In an interface, you would have to first extend it and then reference it as a child

expose your username and passwords rid Deli containers, which are those, like, clear plastic Next question we have here from

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

Workflow

Secret Hub

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 Hello. I'm finally getting on board with the GraphQL train and have a specific and, apparently, that is possible. They have a whole command line 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

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.

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

Okay.

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

things

or do you carefully think through every solution and choose the best one before actually implementing 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.

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

Become revealed to you in ways that weren't there before.

for a very simple thing like that, so I'm excited about this because

Secret Hub, which is a 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 I've been seeing some people say that classes are really great with TypeScript

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.

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.

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?

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, 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, 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,

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 container 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 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, TypeScript

product that type, that also need to be extended. So let's say you have rid. An expiry

on my computer. And I was rid I don't really like this because,

realizing the thing that you picked doesn't do this one little thing that you wanted.

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.

And then on on your app,

And then you you, if you had LogRocket, eGaming kind of Excel, Microsoft Excel. Oh, yeah. Yeah. What I forget his name right now, but, like,

into code. Yeah. That's a good question. Absolutely not. I don't sit there and think ponder all the possible options. And then Courses, online you write JavaScript await

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,

Yeah.

and failing and hitting dead ends and

There obviously

.comforward/pro.

You wanna get really good at fundamentals in JavaScript? Go to Wesbos.comforward/ re Immutability and CMSs and, 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, 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 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.

That's actually not a bad idea.

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, 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.

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.

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.

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.

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 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? if you're changing your data, to be running

a tangent a couple years ago to find the best kids' cups, 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,

sale. So head on over to level up tutorials.comforward/pro.

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

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, Rid I've not heard of Secret Hub, but it sounds like a secret GitHub.

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.

.com at the time of release of this is SvelteKit.

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? 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

Love Contigo.

Oh, that's great.

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, the action that in something like Redis On the server side,

percent off of annual subscriptions.

Head on over to syntax.fm messages today.

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,

ring.

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 It's one of our sponsors today, which is Cloudinary. That was, like, the the all time laziest I always love that one. That guy who does the, the YouTube videos?

And Contigo ended up having them, and, there's just this one specific Contigo cup. Maybe I'll sick pick it at one time.

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

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

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.

Sick. I'm gonna pick a blender bottle if you are the type who's, you know, working out. You got protein shaker bottles,

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.

Yeah. So they make thermal lock He did the YouTube videos that was, like, the Excel

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, So Yeoman

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 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, especially if they're using a lot of methods or things that mutate the data.

And you know what? I don't think you'll regret it. I personally if I was starting a project today, 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, What are your approaches to caching a GraphQL So, John, to give you some context why we're not talking about it a lot is definitely had it its heyday

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,

Absolutely thing that is never ever going to go out of fashion, you're probably Alright. Next question is from John Elwood.

in the wrong industry.

but there are very real stakeholders using re Svelte in the big projects across the globe.

for as long as you'll need to be happy with that decision for. I agree.

and that risk tolerance is I need to pick the most stable,

You did mention in an earlier It's always gonna be a good experience,

I don't know. Who knows? Probably, jQuery. Right? But Backbone.

Svelte in production. Right? A lot of companies run Svelte. It's a big community.

so many so many great, wonderful,

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

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 junk. They're always rid Spilling the the seal isn't great.

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 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 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? and that expiry is its own type.

getting URL to PNG for getting screenshots,

that I'm using for GraphQL to handle the caching, and I rid I, for the most part, with the exception of caching

so, like, all kinds of really cool add ons in Cloudinary as well. Check it out at cloudinary.com.

Next question is from Adam Hopkins.

API?

I personally am staying mostly out of the way from GraphQL caching.

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 And when When I was doing it, I was like, alright. Where should I store these We did it at our cottage as well. I changed everything over from rid Random packages of random spices and for,

rid. I think most developers need to to be implementing. If it's a client side, Apollo, overtake your anxious thoughts. Yeah. It's a good question. I find the the wind down all of that information. So, yeah, it's all it's all tucked away. If you look at Next. Js or Gatsby, They're built into the CLI tool themselves or an NPX to manage and inject your secrets in some of including their own, and they can run scripts. So they have, Cloudinary ampersand, 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?

or you could tell them to just use Redis. So wherever possible, framework for the server side, rid And it has some baked in caching for the loaders, 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 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 Blender bottles, and, Every single tutorial series on the site is on 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

rid AI background removal. So That allows you to store your secrets on a web app and then inject them into Nothing else to add there. I think you said said it super well. Let's move on to the next section, which is 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 and you can use the coupon code syntax for $10 off. There's also a whole bunch of free ones in there as well.

You know, Adam, I am not the best at caching.

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,

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 and you're going to encounter It's cheap plastic. I kinda feel bad drinking and you see that some people use interfaces and some people use types to do the exact same thing, your first instinct does say, 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.

detect if there is a bike or a building ring Or a person or someone smiling in in your photos, was a concept ingrained in the head. Rid I continue to see benefits of immutability,

but you know what else is a good experience?

situations that you're not going to encounter anywhere else, rid Watching this screen. A lot of listening to podcasts.

Generating alt text on demand,

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

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

these guys are just cranking out SEO sick picks. This is the part where we pick things that are sick,

which is our GraphQL

Your content really good.

user information or session information These things have caching solutions baked in. They have, like, a normalized

websites, then that's totally fine. You can stick with it for were thinking about. Like, let's let's say, for example, and this is an awesome A type uses, like, Question about the nomenclature.

questions today.

have content analysis, so you could 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 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?

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

understanding of both working with clients' projects, any of that stuff in the real world.

really is more exciting than my rid transition. So do you wanna talk a little bit about Cloudinary? any updates. Let's take a quick minute to talk about one of our sponsors today, which that I will have the latest information in the world of JS. Man, parallel thought. Rid. Our child,

One thing that I like to do, If you're talking about server side caching of a GraphQL API, I use Mercurius, and allows you to validate some of your ideas too.

freelancing space

But you know what, Wes? It's okay because our sponsor 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 LogRocket is, the error and exception handling service that allows you to see read. The errors make and CSS.

all of those have to be via types, and they can't be done via interfaces. Rid. So 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 re sick pick something that I just did again.

rid Inside

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.

I don't know if you need to worry about any of that because

7.

You wanna do a quick little one liner where something equals something plus whatever, something extends something, something infers something.

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,

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

So you could say base expiry

can be extended.

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 Nicodemus. Hey, guys. Love the podcast. Learned so much from you. Yeah. Thank you.

better than an interface. And then the other the other big one I run into a lot is if you wanna have an alias,

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, 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 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

If you wanted to extend that as a sub property The marketing website we talked about before is usually a lot more 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.

property in your type. With a regular type type, rid Not an interface. It allows you to use the 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 Put a variable at the top of your module, make it a let rid. Rate equals whatever, After 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, they are a team of SEO specialists and designers using prebuilt themes like Avada and Divi. Those are 2 re Super big Maybe about 6, 8 months ago, I said pick these deli containers for keeping all of my spices in.

Wow. Yeah. It's 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 Thank you so much to Cloudinary for sponsoring.

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

of 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.

How about you guys use classes in React and TypeScript?

Linus. Another types of question. I recently ready. Started using TypeScript in React, and, typically,

And they mostly do the exact same stuff with a tiny little little bit where

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

a whole lot of answers for not much, but you'll hit little things. TJ,

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, Something that makes a lot of sense for you. Yeah. It is very difficult to come up with every scenario, solution, idea.

Any of the utility types that are in there, return type parameters, That is such so good for kids. Rid

sub property, into a text file

That is not an immutable method.

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

First 1 is FreshBooks Cloud Accounting. Second 1 is LogRocket by the fact that the could create, update, and delete re Operations are called mutations.

updating data that you 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.

re JavaScript session replay, and third one is Cloudinary

We answer them. We got all kinds of really good questions today about,

Oh, yeah. I like that even more.

in, I guess, just in programming in general, is that Instead of directly Yeah. I used interfaces by default. You used types by default.

array dot sort method.

image hosting transformation,

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.

reaching into your data and overriding it with updates, and maybe, if you find yourself saying, okay.

if you mutate the object 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 WordPress, you kinda get into, like, a situation.

and that is why they call it mutation because you're literally taking the data that you have Probably in a database, Having worked with Redux in the past, immutability

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?

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, I wanna say Relay as an option, but, you know, I'm not using Relay myself.

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

overwrite some HTML. Rid Never is kind of a hard word in programming because it can Really broken out into very specific

cause you any issues or oddness or whatever. The types of reasons why we avoid mutating

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.

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, z x.

rid are bad. It's just that in generally, in the front end world in JavaScript,

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.

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

issue or whatever That's going to Working against the CMS to the point

rid Dictate

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, especially if you you set up your admin in a good way. But

despite the fact that best practices Peace. Peace.

Is there a reason why we use the term mutation 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

Totally.

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, 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.

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.

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 interfaces

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, Yeah. I

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, they're reasonable. It's $12.

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, if you have properties 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 Making word WordPress websites,

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 any of you just, like, listen 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.

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.

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

For, USD to Canadian.

for my website.

I use on my own course platform is that I get the exchange rate

Nees from Kerala, India.

For things like Redis, you can even just cache the stuff in memory. So And I'm only allowed to hit that API, I don't know, like, 20 times

when the thing shuts down. Same with, I don't. Basically, this just comes down to do you like the and I'm going to

very, very simple example And then it should be swapped out with whatever the translation would be for

I use a serverless function to generate the OG images

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

and then also make a let rate updated

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

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 And I usually just listen to

Alright. Next question is from,

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

React Query, all your those libraries will have caches built in, And they will have knobs in terms of,

And, since you guys are doing a great job and being a subscriber to your podcast, I can rest assured

organized access to all of my different spices.

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, there usually will be adapters 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

save the ones that you get from takeout.

I saw you Instagramming about that. Oh, man. So for applications that require a lot of content management where CMS

that I had in my spice drawer. I bought these little Usually about, serverless functions.

If you didn't hear that one, basically, what I did is I I took all of my spices

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

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,

The radio or literally anything.

Rid It seems like way too much boilerplate that end up maybe dozens or even hundreds of different fields. Love the show, guys.

Ever since, like, I was, like like, 12 years old, I would fall asleep listening to

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,

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

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, personally would not Right. React components with classes. Again,

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.

John says, rid. What is slash are your opinions on generators like Yeoman?

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 rid LogRocket. Now LogRocket is the best place to log your rockets.